添加附件，调整数据

yaowanxin

2025-08-11 e4897e8a61146a1e7a5418373e31375a16366c46

添加附件，调整数据

 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>

 src/views/personnelManagement/contractManagement/index.vue

@@ -3,51 +3,79 @@
    <div class="search_form">
      <div>
        <span class="search_title">姓名：</span>
        <el-input
            v-model="searchForm.staffName"
            style="width: 240px"
            placeholder="请输入姓名搜索"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
        />
        <span  style="margin-left: 10px" class="search_title">合同结束日期：</span>
        <el-date-picker  v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                         placeholder="请选择" clearable @change="changeDaterange" />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
        >搜索</el-button
        >
        <el-input v-model="searchForm.staffName" style="width: 240px" placeholder="请输入姓名搜索" @change="handleQuery"
          clearable :prefix-icon="Search" />
        <span style="margin-left: 10px" class="search_title">合同结束日期：</span>
        <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
          placeholder="请选择" clearable @change="changeDaterange" />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
        <!--        <el-button type="primary" @click="openForm('add')">新增入职</el-button>-->
        <el-button type="info" @click="handleImport">导入</el-button>
        <el-button @click="handleOut">导出</el-button>
        <!--        <el-button type="danger" plain @click="handleDelete">删除</el-button>-->
      </div>
    </div>
    <div class="table_list">
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          :tableLoading="tableLoading"
          @pagination="pagination"
          :total="page.total"
      ></PIMTable>
      <PIMTable rowKey="id" :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true"
        @selection-change="handleSelectionChange" :tableLoading="tableLoading" @pagination="pagination"
        :total="page.total"></PIMTable>
    </div>
    <form-dia ref="formDia" @close="handleQuery"></form-dia>

    <!-- 合同导入对话框 -->
    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <!-- <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板</el-link
            > -->
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import { onMounted, ref } from "vue";
import FormDia from "@/views/personnelManagement/contractManagement/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import {staffOnJobListPage} from "@/api/personnelManagement/employeeRecord.js";
import { ElMessageBox } from "element-plus";
import { staffOnJobListPage } from "@/api/personnelManagement/employeeRecord.js";
import dayjs from "dayjs";
import { getToken } from "@/utils/auth.js";

const data = reactive({
  searchForm: {
@@ -108,7 +136,7 @@
  {
    label: "家庭住址",
    prop: "adress",
    width:200
    width: 200
  },
  {
    label: "第一学历",
@@ -117,12 +145,12 @@
  {
    label: "专业",
    prop: "profession",
    width:100
    width: 100
  },
  {
    label: "身份证号",
    prop: "identityCard",
    width:200
    width: 200
  },
  {
    label: "年龄",
@@ -131,7 +159,7 @@
  {
    label: "联系电话",
    prop: "phone",
    width:150
    width: 150
  },
  {
    label: "紧急联系人",
@@ -141,7 +169,7 @@
  {
    label: "紧急联系人电话",
    prop: "emergencyContactPhone",
    width:150
    width: 150
  },
  {
    label: "合同年限",
@@ -234,12 +262,47 @@
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/staff/staffOnJob/export", {}, "合同管理.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
    .then(() => {
      proxy.download("/staff/staffOnJob/export", {}, "合同管理.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};
const upload = reactive({
  // 是否显示弹出层（合同导入）
  open: false,
  // 弹出层标题（合同导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 1,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/staff/staffOnJob/import",
});
/** 导入按钮操作 */
function handleImport() {
  upload.title = "合同导入";
  upload.open = true;
}
/** 提交上传文件 */
function submitFileForm() {
  console.log(upload.url + '?updateSupport=' + upload.updateSupport)
  proxy.$refs["uploadRef"].submit();
}
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  getList();
};
onMounted(() => {
  getList();