完成用气管理

spring

2025-08-13 64adb432af57444f42c6b6b8236dad80d05927dd

 src/views/energyManagement/energyArea/index.vue

@@ -4,7 +4,7 @@
      <div>
        <el-input v-model="search" style="width: 210px" placeholder="输入关键字进行搜索" @change="searchFilter"
          @clear="searchFilter" clearable prefix-icon="Search" />
        <el-button type="primary" @click="openModelDia('add')" style="margin-left: 10px">新增区域</el-button>
        <el-button type="primary" @click="openProDia('add')" style="margin-left: 10px">新增父区域</el-button>
      </div>
      <div ref="containerRef">
        <el-tree ref="tree" v-loading="treeLoad" :data="list" @node-click="handleNodeClick"
@@ -23,16 +23,14 @@
                    ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
                </el-icon>
                {{ data.fuId==null ? data.id : '' || data.areaName }}


              </span>
              <div>
                <!-- <el-button type="primary" link @click="openProDia('edit', data)">
                <el-button v-if="node.level < 2" type="primary" link @click="openProDia('edit', data)">
                  编辑
                </el-button> -->
                <el-button v-if="node.level < 2" type="primary" link @click="openProDia('add', data)" :disabled="node.level >= 3">
                  添加子区域
                </el-button>
                <!-- <el-button v-if="node.level < 2" type="primary" link @click="openProDia('add', data)" :disabled="node.level >= 3">
                  添加子区域
                </el-button> -->
                <!-- <el-button v-if="!node.childNodes.length" style="margin-left: 4px" type="danger" link
                  @click="remove(node, data)">
                  删除
@@ -44,10 +42,10 @@
      </div>
    </div>
    <div class="right">
      <div style="margin-bottom: 10px" v-if="isShowButton">
        <!-- <el-button type="primary" @click="openModelDia('add')">
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click="openModelDia('add')">
          新增区域
        </el-button> -->
        </el-button>
        <ImportExcel @uploadSuccess="getModelList" />
        <el-button type="danger" @click="handleDelete" style="margin-left: 10px" plain>
          删除
@@ -58,11 +56,11 @@
    </div>
    <el-dialog v-model="productDia" title="区域" width="400px" @keydown.enter.prevent>
      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
        <el-row :gutter="30">
        <el-row>
          <el-col :span="24">
            <el-form-item label="父区域：" prop="fuId">
              <el-select v-model="form.fuId"  placeholder="请选择父区域" clearable @keydown.enter.prevent>
                <el-option v-for="item in list" :key="item.id" :label="item.label" :value="item.id" />
            <el-form-item label="区域类型：" prop="areaType">
              <el-select v-model="form.areaType" placeholder="请选择区域类型" clearable @keydown.enter.prevent>
                <el-option v-for="item in areaTypeList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -71,6 +69,7 @@
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
           <!-- <el-button type="primary" @click="submitModelForm">确认</el-button> -->
          <el-button @click="closeProDia">取消</el-button>
        </div>
      </template>
@@ -114,17 +113,9 @@
</template>

<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { areaListPage, areaDelete, areaAdd, areaUpdate } from "@/api/energyManagement/index.js";
import {
  addOrEditProduct,
  addOrEditProductModel,
  delProduct,
  delProductModel,
  modelListPage,
  productTreeList,
} from "@/api/basicData/product.js";
// import ImportExcel from "../../../ImportExcel/index.vue";

const { proxy } = getCurrentInstance();
@@ -151,6 +142,10 @@
  "特殊用电区域"
])
const tableColumn = ref([
  {
    label: "区域编号",
    prop: "id"
  },
  {
    label: "区域名称",
    prop: "areaName"
@@ -185,7 +180,7 @@
const selectedRows = ref([]);
const page = reactive({
  current: 1,
  size: 10,
  size: 30,
  total: 0,
});
const data = reactive({
@@ -196,39 +191,38 @@
    fuId: "",
    sort: ""
  },

  modelForm: {
    areaName: "",
    areaType: "",
    fuId: "",
    sort: ""
  },
  modelRules: {
    model: [{ required: true, message: "请输入", trigger: "blur" }],
    unit: [{ required: true, message: "请输入", trigger: "blur" }],
  },
});
const { form, rules, modelForm, modelRules } = toRefs(data);

const { form, rules, modelRules } = toRefs(data);
// const originalRecords = ref([]);
// const parentItems = ref([]);
// 查询产品树
const getProductTreeList = () => {
const getProductTeeList = () => {
  treeLoad.value = true;
  areaListPage()
  areaListPage({
    current: page.current,
    size: page.size,
  })
    .then((res) => {
      const originalRecords = res.data.records;
      console.log(originalRecords);
      // 筛选fuId为空的项作为父节点
      const parentItems = originalRecords.filter(item => !item.fuId);
      list.value = originalRecords.filter(item => !item.fuId);
      // 为每个父节点添加children并匹配子节点
      parentItems.forEach(parent => {
      list.value.forEach(parent => {
        parent.children = originalRecords.filter(child => child.fuId === parent.id);
      });
      // 更新列表数据为树形结构
      list.value = parentItems;
      // // 更新列表数据为树形结构
      // list.value = parentItems.value;

      console.log('树形结构数据:', list.value);

      list.value.forEach((a) => {
        expandedKeys.value.push(a.label);
      });
      // list.value.forEach((a) => {
      //   expandedKeys.value.push(a.label);
      // });
      treeLoad.value = false;
    })
    .catch((err) => {
@@ -242,10 +236,16 @@
// 打开产品弹框
const openProDia = (type, data) => {
  operationType.value = type;
  modelOperationType.value = type;

  productDia.value = true;
  form.value.fuId = "";
  form.value.areaType = "";
  if (type === "edit") {
    form.value.id = data.id;
    form.value.areaName = data.areaName;
    form.value.areaType = data.areaType;
    form.value.fuId = data.fuId;
    form.value.sort = data.sort;
  }
};
// 打开规格型号弹框
@@ -270,14 +270,17 @@
        areaAdd(form.value).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
          closeProDia();
          getProductTreeList();
          getProductTeeList();
          getModelList();

        });
      }else {
        form.value.id = currentId.value;
        areaUpdate(form.value).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
          closeProDia();
          getProductTreeList();
          getModelList();
          getProductTeeList();
        });
      }
    }
@@ -300,10 +303,11 @@
  })
    .then(() => {
      tableLoading.value = true;
      delProduct(ids)
      areaDelete(ids)
        .then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          getProductTreeList();
          getProductTeeList();
          getModelList();
        })
        .finally(() => {
          tableLoading.value = false;
@@ -316,7 +320,7 @@
// 选择产品
const handleNodeClick = (val, node, el) => {
  // 判断是否为叶子节点
  isShowButton.value = !(val.children && val.children.length > 0);
  // isShowButton.value = !(val.children && val.children.length > 0);
  // 只有叶子节点才执行以下逻辑
  currentId.value = val.id;
  currentParentId.value = val.parentId;
@@ -327,13 +331,21 @@
const submitModelForm = () => {
  proxy.$refs.modelFormRef.validate((valid) => {
    if (valid) {
      modelForm.value.productId = currentId.value;
      areaUpdate(form.value).then((res) => {
        proxy.$modal.msgSuccess("提交成功");
        closeModelDia();
        getModelList();
        getProductTreeList();
      });
      if (modelOperationType.value === "add") {
        form.value.fuId = currentId.value;
        areaAdd(form.value).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
        });
      }
      else {
        // form.value.id = currentId.value;
        areaUpdate(form.value).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
        });
      }
      closeModelDia();
      getModelList();
      getProductTeeList();
    }
  });
};
@@ -347,21 +359,18 @@
  selectedRows.value = selection;
};

// 查询规格型号
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getModelList();
};
// 查询区域
const getModelList = () => {
  tableLoading.value = true;
  areaListPage({
    id: currentId.value,
    fuId: currentId.value,
    current: page.current,
    size: page.size,
  }).then((res) => {
    console.log("res", res);
    tableData.value = res.data.records;
    const originalRecords = res.data.records;
    // 筛选fuId为空的项作为父节点
    tableData.value = originalRecords.filter(item => item.fuId === currentId.value);
    page.total = res.total;
    tableLoading.value = false;
  });
@@ -386,7 +395,7 @@
        .then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          getModelList();
          getProductTreeList();
          getProductTeeList();
        })
        .finally(() => {
          tableLoading.value = false;
@@ -432,7 +441,10 @@
  // 没匹配到返回false
  return false;
};
getProductTreeList();
onMounted(() => {
   getProductTeeList();
});

</script>

<style scoped>