deepdragon/src/admin/views/renovation/scheme/index.vue

<template>
  <div class="app-container">
    <transition name="fade">
      <div :gutter="20" v-if="!showDetail">
        <el-row :gutter="10">
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
          >

            <el-form-item label ="方案名称" prop="layerName">
              <el-input
                v-model="queryParams.planName"
                placeholder="请输入方案"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"

              >新增</el-button
            >
          </el-col>


          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          style="margin-top: 20px"
          :data="dataList"

        >
          <el-table-column type="index" label="序号"  width="55" align="center" />
          <el-table-column label="公司名称" align="center" prop="companyName" />
          <el-table-column label="方案名称" align="center" prop="planName" />

          <el-table-column label="创建时间" align="center" prop="createTime" />

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleExit(scope.row)"
                >修改</el-button
              >
              <el-button
                link
                type="warning"
                icon="Download"
                @click="handleOpen(scope.row)"
                >导出</el-button
              >
              <el-button
                link
                type="danger"
                icon="Delete"
                @click="handleDelete(scope.row)"

                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改公告对话框 -->
        <el-dialog :title="title" v-model="open" width="70%" append-to-body>
          <el-form
            :model="form"
            :rules="rules"
            ref="applyRef"
            label-width="100px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="公司名称" >
                  <el-input
                    v-model="form.companyName"
                    placeholder="公司名称"

                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="方案名称" >
                  <el-input
                    v-model="form.planName"
                    placeholder="方案名称"

                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="方案时间" >
                  <el-date-picker
                    v-model="form.planTime"
                    type="month"
                    style="width: 100%"
                    placeholder="方案时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="项目背景" >
                  <el-input
                  v-model="form.planbg"
                  style="width: 100%;"
                    :autosize="{ minRows: 3, maxRows: 8 }"
                  autosize
                  type="textarea"
                  placeholder="请输入"
                />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="方案类型" >
                  <el-select
                    v-model="form.planType"
                    placeholder="选择类型"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in equipment_type"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <scsb ref="scsbRef" v-if="open" :citytype="citytype" :planType="form.planType"  v-model="formValue"></scsb>

          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submit">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </transition>
  </div>
</template>

<script setup name="porfiles">
import {
  list,
  postData,
  putData,
  deleteData
} from "@/api/renovation/scheme/index";

import {
  treeRegionLevel,

} from "@/api/renovation/scheme/discharge";

const { proxy } = getCurrentInstance();
const {  equipment_type } = proxy.useDict("equipment_type");
import scsb from './compant/SCSB'
const showDetail = ref(false);
const backCall = () => {
  if (!document.startViewTransition) {
    showDetail.value = false;
    return;
  }
  document.startViewTransition(() => (showDetail.value = false));
  getList();
  // showDetail.value = false
};








const rules = ref([])
const data = reactive({
  // 按钮loading
  buttonLoading: false,
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 显示搜索条件
  showSearch: true,
  tableDevice: [
    {
      name: "10",
      waterDict: "Q=9m3/h；H=5m；P=0.25kW；220V",
      waterNum: "2",
      airDict: "150L/min；P=0.115kW；220V",
      airNum: "1",
    },
    {
      name: "20",
      waterDict: "Q=9m3/h；H=5m；P=0.25kW；220V",
      waterNum: "2",
      airDict: "150L/min；P=0.115kW；220V",
      airNum: "1",
    },
  ],
  tableDict: [
    {
      name: "10",
      device: "水泵",
      yxsj: "3",
      taishu: "1",
      zhuangjigl: "0.5",
      rijdh: "0.75",
      rzdh: "3.25",
      rduzdkh: "0.325",
      dshuidf: "0.124",
    },
    {
      name: "10",
      device: "风机",
      yxsj: "22",
      taishu: "33",
      zhuangjigl: "0.15",
      rijdh: "3.75",
      rzdh: "3.25",
      rduzdkh: "0.325",
      dshuidf: "0.124",
    },
    {
      name: "20",
      device: "水泵",
      yxsj: "6",
      taishu: "1",
      zhuangjigl: "0.5",
      rijdh: "0.75",
      rzdh: "4.25",
      rduzdkh: "0.202",
      dshuidf: "0.967",
    },
    {
      name: "20",
      device: "风机",
      yxsj: "22",
      taishu: "33",
      zhuangjigl: "0.15",
      rijdh: "3.75",
      rzdh: "4.25",
      rduzdkh: "0.202",
      dshuidf: "0.622",
    },
  ],
  // 总条数
  total: 0,
  // 图层管理表格数据
  dataList: [

  ],
  citytype:[],



  title: "",
  // 是否显示弹出层
  open: false,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    createBy: undefined,
    layersId: undefined,
  },
  // 表单参数
  form: {},
  // 表单校验
});
const scsbRef = ref()
const input = ref("");
const {
  open,
  tableDevice,
  showSearch,
  schemetype,
  queryParams,
  form,
  ids,
  title,
  tonnageData,
  dataList,
  citytype,
  total,
  multiple,
  single,
  loading,
  planList,
  tableDict,
  inletlist,
  buttonLoading,
} = toRefs(data);
const planDialog = ref("");
const applyDialog = ref(false);
const layerName = ref();


const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2];
    } else if (columnIndex === 1) {
      return [0, 0];
    }
  }
};
const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase());
};
const handleExcel = (item) => {
  excel(item.planId);
  proxy.download(
    "/renovationPlan/export/excel",
    {
      planId: item.planId,
    },
    `${item.planName}.xlsx`,
    {
      baseURL: "/plan-api",
    }
  );
};
const handleWorld = (item) => {
  excel(item.planId);
  proxy.download(
    "/renovationPlan/export/word",
    {
      planId: item.planId,
    },
    `${item.planName}.docx`,
    {
      baseURL: "/plan-api",
    }
  );
};
function cancel(){
  open.value = false;
}
/** 表单重置 */
function reset() {
  form.value = {
    "planName": "",
    "planType": "",
    "planTime": '',
    "companyName":''
  };

  proxy.resetForm("applyRef");
}
const formValue = ref({})
function handleExit(row){
  reset();


  open.value = true;
  title.value = "编辑方案";
  form.value ={
    planId: row.planId,
    planTime:new Date(parseInt(row.planTime.toString().substring(0,4)), parseInt(row.planTime.toString().substring(4)) - 1),//row.planTime.toString().substring(0,4)+'-'+row.planTime.toString().substring(4),
    planType:row.planType,
    planName:row.planName,
    companyName:row.companyName
    }

  formValue.value= JSON.parse(JSON.stringify(row));
}
/** 新增按钮操作 */
function handleAdd() {
  reset();

  open.value = true;
  formValue.value={planId:null}
  title.value = "添加方案";
}
//详情
const arrSite = ref([]);
const planData = ref({});
async function handleOpen(row) {
  proxy.download("/technicalPlan/export/word/"+row.planId, {
  }, `${row.planName}.doc`,{ baseURL: "/plan-api",});
}



/** 删除按钮操作 */
function handleDelete(row) {
  const planName = row.planName ;
  proxy.$modal
    .confirm('是否确认方案:' + planName )
    .then(function () {
      return deleteData(row.planId);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}
/** 查询理列表 */
function getList() {
  //  loading.value = false;
  loading.value = true;
  list(queryParams.value).then((response) => {

    dataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}
//格式化时间函数
function formatDate(date) {
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  return (
    year +
    (month < 10 ? "0" + month : month)
  )
}
function submit() {
  console.log(form.value)
  let value = scsbRef.value.handleSubmit()
  console.log(value)
  form.value.planTime = formatDate(form.value.planTime)

  value.equipmentParamId = value.equipmentParamId.toString();

  let data = {
    ...value,
    ...form.value,

  }
  console.log(data)
  if(form.value.planId){
    putData(data).then(res=>{
      proxy.$modal.msgSuccess(res.msg);
      scsbRef.value.rest()
      open.value = false;

      getList()

    })

  }else{
    postData(data).then(res=>{
      proxy.$modal.msgSuccess(res.msg);
      scsbRef.value.rest()
      open.value = false;
      getList()
    })

  }
}
async function getTreeData() {
  let data = await treeRegionLevel();

  citytype.value = data.data.map((item, index) => {
    return {
      value: item.label,
      label: item.label,
      children: item.children,
    };
  });
}
onMounted(() => {
  getList();
  getTreeData();
});

</script>
<style lang="scss" scoped>
.fade-enter-active {
  transition: all 0.3s ease-out;
}
.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter-from,
.fade-leave-to {
  transform: translateX(-120px);
  opacity: 0;
}

.detail-enter-active,
.detail-leave-active {
  transition: opacity 0.5s ease;
}
.detail-enter-from,
.detail-leave-to {
  opacity: 0;
}
</style>