入表功调整

lxs
Showing 2 changed files with 720 additions and 779 deletions
src/api/modules/dataEntry.ts
src/views/data_entry/index.vue
--- a/src/api/modules/dataEntry.ts
View file @638335c
+++ b/src/api/modules/dataEntry.ts
View file @638335c
@@ -9,10 +9,9 @@ export const getAssetCatalog = (params= {}) => request({
 })
 /** 获取成本项列表 */
-export const getCostList = (params) => request({
+export const getCostList = () => request({
-  url: `${import.meta.env.VITE_API_NEW_PORTAL}/tableentry-index-classify/page-list`,
+  url: `${import.meta.env.VITE_API_NEW_PORTAL}/tableentry-index-classify/list`,
  method: 'post',
-  data: params
 })
 /** 获取成本项详情 */
--- a/src/views/data_entry/index.vue
View file @638335c
+++ b/src/views/data_entry/index.vue
View file @638335c
@@ -6,13 +6,9 @@
 import { ref, inject } from "vue";
 import { ElMessage, ElMessageBox, translate } from "element-plus";
 import { MoreFilled } from '@element-plus/icons-vue'
-import StepBar from "@/components/StepBar/index.vue";
-import TableTools from "@/components/Tools/table_tools.vue";
-import Table from "@/components/Table/index.vue";
-import Form from "@/components/Form/index.vue";
 import useUserStore from "@/store/modules/user";
 import { changeNum } from "@/utils/common";
-import { getAssetCatalog, getCostList, sendEntryMsg } from "@/api/modules/dataEntry";
+import { costDelete, getAssetCatalog, getCostList, sendEntryMsg } from "@/api/modules/dataEntry";
 import * as XLSXS from 'xlsx-js-style';
 import { saveAs } from 'file-saver';
@@ -20,36 +16,17 @@ const { proxy } = getCurrentInstance() as any;
 const userStore = useUserStore();
 const userData = JSON.parse(userStore.userData);
-const itemWidth = ref('56px');
+const reload: any = inject("reload");
-const itemLeft = ref('-56px');
-const reload = inject("reload");
 const loading = ref(false);
 const companyName = ref('');
 /** 默认显示步骤 */
 const step = ref(0);
-/** 步骤条配置信息 */
-const stepsInfo = ref({
-  step: step.value,
-  list: [
-    { title: '设置成本项', value: 1 },
-    { title: '填写成本项', value: 2 },
-    { title: '入表', value: 3 },
-  ]
-})
-const allMapList = ref([]);
+const showAdd = ref(false);
-const showLevel4 = ref(false);
-const gridList = ref([
-  { name: '一级指标', code: '0', children: [] },
-  { name: '一级分类', code: '1', children: [] },
-  { name: '二级分类', code: '2', children: [] },
-  { name: '三级分类', code: '3', children: [] },
-]);
-const checkedList = ref([]);
 const productList = ref([]);
 const costFormRef = ref();
 const entryFormRef = ref();
-const costFormInfo = ref({});
+const costFormInfo: any = ref({});
 const costForm = ref({
  id: 'step-form-one',
  col: '',
@@ -77,7 +54,7 @@ const costForm = ref({
      placeholder: "请选择",
      clearable: true,
      required: true,
-      visible: false,
+      visible: true,
      popperClass: 'date-year-popper',
      disabledDate: (date) => {
        const curr = new Date();
@@ -92,7 +69,7 @@ const costForm = ref({
      placeholder: "请选择",
      clearable: true,
      required: true,
-      visible: false,
+      visible: true,
      style: { width: 'calc(33.33% - 70px)', 'margin-right': '8px' },
      popperClass: 'date-month-popper',
      disabledDate: (date) => {
@@ -106,7 +83,7 @@ const costForm = ref({
      options: [
        { label: '确认', value: 'besure', type: 'primary', style: { height: '32px' } },
      ],
-      visible: false,
+      visible: true,
      style: { width: 'unset', 'align-self': 'end', 'margin-right': '0px' }
    },
  ],
@@ -135,7 +112,7 @@ const costForm = ref({
    ]
  }
 });
-const entryForm = ref({
+const entryForm: any = ref({
  id: 'step-form-two',
  col: '',
  items: [
@@ -208,15 +185,8 @@ const entryForm = ref({
 });
 const amount = ref(0);
-const sumAmount = ref([]);
+const sumAmount: any = ref([]);
-const initCheckedList = ref([]);
-const checkedData = ref([]);
 const costFileds = ref({});
-const rowCount = {
-  level1: { index: 0, rowspan: [] },
-  level2: { index: 0, rowspan: [] },
-  level3: { index: 0, rowspan: [] },
-}
 const convertConfig = {
  intangible: {
    originName: '一、账面原值',
@@ -255,12 +225,24 @@ const convertConfig = {
  }
 }
 const costTableRef = ref(null);
-const isInitField = ref(true);
+const initField: any = ref([
-const initField = ref([]); //第二步初始化的表头数据
+  { label: "一级指标", field: "name1", level: 1, width: 120, visible: true },
-const tableField = ref([]);
+  { label: "一级分类", field: "name2", level: 2, width: 120, visible: true },
-const tableData = ref([])
+  { label: "二级分类", field: "name3", level: 3, width: 200, visible: true },
+  { label: "三级分类", field: "name4", level: 4, width: 200, visible: false },
+  {
+    label: "累计投入", field: "total", width: 120, align: 'right', visible: false, columClass: 'inverse_cell', getName: (scope) => {
+      return changeNum(scope.row.total, 2, true);
+    }
+  },
+]); //第二步初始化的表头数据
+const tableField: any = ref([]);
+const tableData: any = ref([])
 const besure = ref(false);
-const mergeRowCount = ref({});
+const mergeRowCount: any = ref({});
+const checkedData: any = ref([]);
+const checkedField: any = ref([]);
 const entryItem = {
  year: '',
  originName: '',
@@ -289,10 +271,17 @@ const entryItem = {
 };
 const entryTableRef = ref(null);
-const entryData = []
+const entryData: any = ref([]);
-const headers = ref([]);
+const bookHeaders: any = ref([
+  { label: '项目', field: 'title', width: 140, align: 'left' }
+]);
 const transposedData = ref([]);
+const popoverVisible = ref(false);
+const popoverTriggerRef = ref(null)
+const currentRow: any = ref({})
+// 获取产品数据
 const getProducts = () => {
  getAssetCatalog().then((res: any) => {
    if (res.code == proxy.$passCode) {
@@ -305,147 +294,106 @@ const getProducts = () => {
  })
 }
+// 获取原始指标数据
 const getCostData = () => {
  loading.value = true;
-  getCostList({
+  getCostList().then((res: any) => {
-    pageIndex: 1,
-    pageSize: -1,
-  }).then((res: any) => {
    loading.value = false;
-    const data = res.data.records || [];
+    const data = res.data || [];
-    let levelList = { level1: [], level2: [], level3: [], level4: [] };
+    tableData.value = data.map(item => {
-    data.map(item => {
+      item.checked1 = false;
-      item.checked = false;
+      item.checked2 = false;
-      item.children = [];
+      item.checked3 = false;
-      levelList['level' + item.level].push(item);
+      return item;
    })
-    levelList.level1.map(l => allMapList.value.push(l));
+    getMergeRow();
-    setAllMapList(levelList, allMapList.value, 2);
  }).catch((res) => {
    loading.value = false;
  });
 };
-// 整理成本项数据
+// 单元格多选框选中监听
-const setAllMapList = (mapObj, arr, level) => {
+const cellCheckboxChange = (val, scope) => {
-  arr.map(item => {
+  const { rIndex, level } = scope;
-    const code = item.code;
+  let rowData = tableData.value[rIndex];
-    item.children = mapObj['level' + level].filter(a => a.parentId == code);
+  rowData[`checked${level}`] = val;
-    level < 3 && setAllMapList(mapObj, item.children, level + 1);
+  if (val) {
-  })
+    // 选中上级
-  // console.log(allMapList.value);
+    for (let l = level - 1; l >= 1; l--) {
-}
+      const tIndex = l;
+      const rCode = rowData[`code${l}`];
-const setStep = async () => {
+      (() => {
-  const info = costFormInfo.value;
+        setChecked(tIndex, rCode, val);
-  await setFormItems(info, 'cost');
+      })();
-  costForm.value.items[0].disabled = step.value > 0;
-  costForm.value.items[1].visible = step.value == 1;
-  costForm.value.items[2].visible = step.value == 1;
-  costForm.value.items[3].visible = step.value == 1;
-  if (step.value == 1) {
-    setSumRow();
    }
-  stepsInfo.value.step = step.value;
+  } else {
-  nextTick(() => {
+    // 取消选中下级
-    const contentDom = document.getElementsByClassName('content_main');
+    const rowList = tableData.value.filter(t => t[`code${level}`] == rowData[`code${level}`]);
-    if (contentDom[0]) {
+    rowList.forEach(rData => {
-      contentDom[0].scrollTo({
+      for (let l = level; l <= 4; l++) {
-        behavior: 'smooth',
+        rData[`checked${l}`] = val;
-        top: 0,
-      });
      }
    })
-}
+  }
+  rowData.edit = rowData.code4 ? rowData.checked4 : rowData.checked3; // 数据是否可编辑
+  checkedData.value = tableData.value.filter(t => t.edit);
+};
-const checkboxChange = (val, scope, level) => {
+// 设置单元格选中
-  const { item, grid, child, opt } = scope;
+const setChecked = (level, code, check) => {
-  let row = {};
+  const rowList = tableData.value.filter(t => t[`code${level}`] == code);
-  switch (level) {
+  rowList.forEach(rData => rData[`checked${level}`] = check)
-    case 1:
+};
-      row = item;
-      break;
-    case 2:
-      row = grid;
-      break;
-    case 3:
-      row = child;
-      break;
-    case 4:
-      row = opt;
-      break;
-  }
-  let list = checkedList.value, tData = checkedData.value, tRow = { ...row, total: '0.00', memo: '', level1: item.name, level2: grid ? grid.name : '', level3: child ? child.name : '', level4: opt ? opt.name : '' };
-  const eIndex = list.findIndex(item => item.guid == row.guid);
-  const tIndex = tData.findIndex(t => t.guid == row.guid);
-  if (val) {
+// 点击外部区域关闭处理
-    eIndex === -1 && list.push(row);
+const handleClickOutside = (event) => {
-    if (tIndex === -1) {
+  const popoverEl = document.querySelector('.tree-item-edit-menu')
-      tRow[`level${row.level}`] = row.name;
+  const triggerEl: any = popoverTriggerRef.value
-      tData.push(tRow);
-    }
+  if (!popoverVisible.value || !popoverEl || !triggerEl) return
-    if (level > 1) {
-      item.checked = true;
+  const clickedInPopover = popoverEl.contains(event.target)
-      const x = list.findIndex(l => l.guid == item.guid);
+  const clickedOnTrigger = triggerEl === event.target || triggerEl.contains(event.target)
-      x === -1 && list.push(item);
-      const i = tData.findIndex(t => t.guid == item.guid);
+  if (!clickedInPopover && !clickedOnTrigger) {
-      i > -1 && tData.splice(i, 1);
+    popoverVisible.value = false
-      if (level > 2) {
-        grid.checked = true;
-        const y = list.findIndex(l => l.guid == grid.guid);
-        y === -1 && list.push(grid);
-        const g = tData.findIndex(t => t.guid == grid.guid);
-        g > -1 && tData.splice(g, 1);
-        if (level > 3) {
-          child.checked = true;
-          const z = list.findIndex(l => l.guid == child.guid);
-          z === -1 && list.push(child);
-          const c = tData.findIndex(t => t.guid == child.guid);
-          c > -1 && tData.splice(c, 1);
-        }
-      }
-    }
-  } else {
-    eIndex > -1 && list.splice(eIndex, 1);
-    tIndex > -1 && tData.splice(tIndex, 1);
-    if (level > 1) {
-      const targetObj = level === 2 ? item : level === 3 ? grid : child;
-      const hasChildItem = targetObj.children.find(r => r.checked);
-      const nIndex = tData.findIndex(t => t.guid == targetObj.guid);
-      if (!hasChildItem && nIndex === -1) {
-        let nRow = { ...targetObj, total: '0.00', memo: '', level1: item.name, level2: grid ? grid.name : '', level3: child ? child.name : '', level4: opt ? opt.name : '' };
-        nRow.level4 = '';
-        if (level === 2) {
-          nRow.level2 = '';
-          nRow.level3 = '';
-        } else if (level === 3) {
-          nRow.level3 = '';
-        }
-        tData.push(nRow);
-      }
-    }
-    level < 4 && setChecked(row.children);
  }
-};
+}
-const setChecked = (arr) => {
+// 切换Popover显示/隐藏
-  let list = checkedList.value, tData = checkedData.value;
+const togglePopover = (row, event) => {
-  arr.forEach(a => {
+  // 如果点击的是当前已激活的触发器，则关闭popover
-    a.checked = false;
+  if (popoverVisible.value && popoverTriggerRef.value === event.currentTarget) {
-    const lIndex = list.findIndex(t => t.guid == a.guid);
+    popoverVisible.value = false
-    lIndex > -1 && list.splice(lIndex, 1);
+    return
-    const tIndex = tData.findIndex(t => t.guid == a.guid);
-    tIndex > -1 && tData.splice(tIndex, 1);
-    if (a.children.length) {
-      setChecked(a.children);
  }
-  });
-};
+  // 设置当前行和触发器引用
+  currentRow.value = row
+  popoverTriggerRef.value = event.currentTarget
+  const level = Number(row.field.split('name')[1]);
+  showAdd.value = level == 3 ? true : false;
+  // 打开popover
+  popoverVisible.value = true
+}
+// 处理菜单点击
+const handleMenuClick = (action) => {
+  // 关闭popover
+  popoverVisible.value = false;
+  btnClick({ value: action, row: currentRow.value })
+}
+// Popover关闭后的处理
+const handlePopoverClose = () => {
+  currentRow.value = null
+  popoverTriggerRef.value = null
+}
 const selectChange = async (val, row, info) => {
  if (row.field == 'entryType') {
-    await setFormItems(info);
+    await setFormItems(info, 'entry');
    entryForm.value.items.at(0).default = val;
    entryForm.value.items.at(1).visible = val == 'intangible' ? true : false;
    entryForm.value.items.at(2).visible = val == 'intangible' ? true : false;
@@ -485,13 +433,57 @@ const inputEventChange = (val, scope, field) => {
  row[field] = row[field].toString().replace(/^\D*(\d{0,12}(?:\.\d{0,2})?).*$/g, "$1")
 }
+// 重命名
+const setName = (name, level, rIndex) => {
+  let rowData = tableData.value[rIndex];
+  rowData[`name${level}`] = name;
+}
+// 新增本级
+const addSameData = (rIndex, name, level, tData) => {
+  let rowData = JSON.parse(JSON.stringify(tData));
+  const lastCode = rowData[`code${level - 1}`];
+  const tCode = tData[`code${level}`].split(lastCode)[1];
+  const codeVal = parseInt(tCode, 10) < 10 ? `0${parseInt(tCode, 10) + 1}` : parseInt(tCode, 10) + 1;
+  for (var r in rowData) {
+    if (r.indexOf('name') == -1 && r.indexOf('code') == -1) rowData[r] = '';
+  }
+  rowData[`name${level}`] = name;
+  rowData[`code${level}`] = `${lastCode}${codeVal}`;
+  rowData[`checked${level}`] = false;
+  delete rowData.name4;
+  delete rowData.code4;
+  tableData.value.splice(rIndex + 1, 0, rowData);
+  getMergeRow();
+}
+// 新增下级
+const addLowerData = (rIndex, name, level, len) => {
+  let rowData = JSON.parse(JSON.stringify(tableData.value[rIndex]));
+  const hasLowerItem = rowData[`code${level + 1}`] ? true : false;
+  const lastCode = rowData[`code${level}`];
+  const codeVal = (len + 1) < 10 ? '0' + (len + 1) : len + 1;
+  for (var r in rowData) {
+    if (r.indexOf('name') == -1 && r.indexOf('code') == -1) rowData[r] = '';
+  }
+  rowData[`name${level + 1}`] = name;
+  rowData[`code${level + 1}`] = `${lastCode}${codeVal}`;
+  rowData[`checked${level + 1}`] = false;
+  rowData.edit = false;
+  hasLowerItem ? tableData.value.splice(rIndex + 1, 0, rowData) : tableData.value.splice(rIndex, 1, rowData);
+  tableField.value[3].visible = true;
+  getMergeRow();
+}
+// 按钮点击事件
 const btnClick = async (btn, bType = null) => {
  const type = btn.value;
  if (type == 'add-same' || type == 'add-lower' || type == 'edit') {
    const row = btn.row;
-    const parent = btn.parent;
+    const { rIndex, level } = row;
-    const inputVal = type == 'edit' ? row.name : '';
+    const inputVal = type == 'edit' ? row[`name${level}`] : '';
-    let isChange = false, curGridList = type == 'add-lower' ? row.children : parent.children;
+    let isChange = false, rowList = type == 'add-same' ? tableData.value.filter(t => t[`code${level - 1}`] == row[`code${level - 1}`]) : tableData.value.filter(t => t[`code${level}`] == row[`code${level}`]);
    ElMessageBox.prompt('', '节点名称', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
@@ -512,7 +504,7 @@ const btnClick = async (btn, bType = null) => {
          if (name.length > 10) {
            return '节点名称长度不能超过10个字符'
          }
-          const isExist = curGridList.find(a => a.name == name);
+          const isExist = rowList.find(a => type == 'add-same' ? a[`name${level}`] == name : a[`name${level + 1}`] == name);
          if (isExist) {
            return '节点名称已存在，请填写其他名称'
          }
@@ -522,7 +514,7 @@ const btnClick = async (btn, bType = null) => {
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          if (!instance.inputValue) {
-            const dom = document.querySelectorAll('.prompt_msg_box .el-message-box__errormsg');
+            const dom: any = document.querySelectorAll('.prompt_msg_box .el-message-box__errormsg');
            if (dom[0]) {
              dom[0].innerHTML = '请填写节点名称';
              dom[0].style.visibility = 'visible';
@@ -540,61 +532,13 @@ const btnClick = async (btn, bType = null) => {
      const name = value.trim();
      if (type == 'edit') {
        if (value == inputVal) return
-        row.name = name;
+        setName(name, level, rIndex);
-        let list = checkedList.value, tData = checkedData.value;
-        tData.forEach((t) => {
-          if (t.guid == row.guid) {
-            t['level' + row.level] = name;
-            t.name = name;
-          }
-          if (t.parentId == row.code) {
-            t['level' + row.level] = name;
-          }
-        })
-        list.forEach((l) => {
-          if (l.guid == row.guid) {
-            l.name = name;
-          }
-        })
      } else if (type == 'add-same') {
-        let code = '';
+        const tData = rowList.at(-1);
-        const sameCode = curGridList.filter(c => c.parentId == row.parentId);
+        const tIndex = tableData.value.findIndex(t => (tData.code4 ? t.code4 === tData.code4 : t.code3 === tData.code3));
-        sameCode.sort((a, b) => a.sortNum - b.sortNum);
+        addSameData(tIndex, name, level, tData);
-        const lastCode = sameCode.at(-1);
-        const codeVal = (sameCode.length + 1) < 10 ? '0' + (sameCode.length + 1) : sameCode.length + 1;
-        code = `${lastCode.parentId}${codeVal}`;
-        curGridList.push({
-          ...JSON.parse(JSON.stringify(row)),
-          code: code,
-          name: name,
-          guid: `new-${code}`,
-          sortNum: lastCode.sortNum + 1,
-          children: [],
-          checked: false
-        })
      } else if (type == 'add-lower') {
-        let code = '', sortNum = 1;
+        addLowerData(rIndex, name, level, rowList.length);
-        if (curGridList.length) {
-          curGridList.sort((a, b) => a.sortNum - b.sortNum);
-          const lastCode = curGridList.at(-1);
-          const codeVal = (curGridList.length + 1) < 10 ? '0' + (curGridList.length + 1) : curGridList.length + 1;
-          code = `${lastCode.parentId}${codeVal}`;
-          sortNum = lastCode.sortNum + 1;
-        } else {
-          code = `${row.code}01`;
-        }
-        curGridList.push({
-          ...JSON.parse(JSON.stringify(row)),
-          code: code,
-          name: name,
-          sortNum: sortNum,
-          level: 4,
-          guid: `new-${code}`,
-          parentId: row.code,
-          children: [],
-          checked: false
-        })
-        if (!showLevel4.value) showLevel4.value = true;
      }
    }).catch(() => {
      ElMessage({
@@ -604,8 +548,9 @@ const btnClick = async (btn, bType = null) => {
    })
  } else if (type == 'remove') {
    const row = btn.row;
-    const hasChild = row.children;
+    const { rIndex, level } = row;
-    const msg = hasChild.length ? '删除该节点会同步删除其子节点，是否确定删除？' : '确定删除该节点吗？';
+    const rowList = tableData.value.filter(t => t[`code${level}`] == row[`code${level}`]);
+    const msg = level == 3 && rowList[0].code4 ? '删除该节点会同步删除其子节点，是否确定删除？' : '确定删除该节点吗？';
    ElMessageBox.confirm(
      msg,
      '提示',
@@ -615,57 +560,26 @@ const btnClick = async (btn, bType = null) => {
        type: 'warning',
      }
    ).then(() => {
-      let curGridList = btn.parent.children;
+      if (level == 3) {
-      const rIndex = curGridList.findIndex(c => c.guid == row.guid);
+        if (rowList.length > 1) {
-      rIndex > -1 && curGridList.splice(rIndex, 1);
+          // 获取所有code3不等于当前code3的节点
-      let list = checkedList.value, tData = checkedData.value;
+          tableData.value = tableData.value.filter(t => t.code3 !== row.code3);
-      let cRow = tData.find(c => c.guid == row.guid);
+        } else {
-      const hasChild = row.children.find(r => r.checked);
+          tableData.value.splice(rIndex, 1);
-      if (!cRow && hasChild) {
-        cRow = tData.find(c => c.guid == hasChild.guid);
-      }
-      const tIndex = tData.findIndex(c => c.guid == row.guid);
-      tIndex > -1 && tData.splice(tIndex, 1);
-      const lIndex = list.findIndex(c => c.guid == row.guid);
-      lIndex > -1 && list.splice(lIndex, 1);
-      const level = row.level;
-      if (level > 1 && cRow) {
-        const targetObj = btn.parent;
-        const hasChildItem = targetObj.children.find(r => r.checked);
-        const nIndex = tData.findIndex(t => t.guid == targetObj.guid);
-        if (!hasChildItem && nIndex === -1) {
-          let nRow = { ...cRow, ...targetObj, total: '0.00', level: targetObj.level };
-          nRow[`level${targetObj.level}`] = targetObj.name;
-          nRow.level4 = '';
-          if (level === 2) {
-            nRow.level2 = '';
-            nRow.level3 = '';
-          } else if (level === 3) {
-            nRow.level3 = '';
-          }
-          tData.push(nRow);
-        }
-      }
-      level < 4 && setChecked(row.children);
-      for (let c = 0; c < curGridList.length; c++) {
-        const item = curGridList[c];
-        if (item.sortNum > row.sortNum) {
-          const code = parseInt(item.code.split(item.parentId)[1], 10) - 1;
-          tData.forEach(t => {
-            if (t.guid == item.guid) {
-              t.code = `${t.parentId}${code < 10 ? '0' + code : code}`;
-              t.guid = t.guid.indexOf('new') > -1 ? `new-${t.code}` : t.guid;
-              t.sortNum = t.sortNum - 1;
        }
-          })
-          item.code = `${item.parentId}${code < 10 ? '0' + code : code}`;
-          item.guid = item.guid.indexOf('new') > -1 ? `new-${item.code}` : item.guid;
-          item.sortNum = item.sortNum - 1;
      } else {
-          continue;
+        const peerList = tableData.value.filter(t => t[`code${level - 1}`] == row[`code${level - 1}`]);
+        if (peerList.length > 1) {
+          tableData.value.splice(rIndex, 1);
+        } else {
+          let rowData = tableData.value[rIndex];
+          delete rowData[`name${level}`];
+          delete rowData[`code${level}`];
        }
      }
-      setShowLevel4();
+      const level4 = tableData.value.find(t => t.code4);
+      !level4 && (tableField.value[3].visible = false);
+      getMergeRow();
    }).catch(() => {
      ElMessage({
        type: 'info',
@@ -678,80 +592,6 @@ const btnClick = async (btn, bType = null) => {
    costFormInfo.value = { ...costFormInfo.value, ...JSON.parse(JSON.stringify(fInfo)) };
    setStep();
  } else if (type == 'next') {
-    if (step.value == 0) {
-      const formEl = costFormRef.value.ruleFormRef;
-      const fInfo = costFormRef.value.formInline;
-      costFormInfo.value = { ...costFormInfo.value, ...JSON.parse(JSON.stringify(fInfo)) };
-      if (!formEl) return;
-      const valid = await submitForm(formEl);
-      if (valid) {
-        if (checkedList.value.length == 0) {
-          ElMessage.warning('请勾选成本项');
-          return
-        }
-        const nameArr = checkedList.value.map(c => c.name);
-        isInitField.value = initCheckedList.value.toString() != nameArr.toString();
-        const tGuids = tableData.value.map(d => d.guid);
-        if (isInitField.value) {
-          initCheckedList.value = nameArr;
-          let fields = [
-            {
-              label: "累计投入", field: "total", width: 120, align: 'right', getName: (scope) => {
-                return changeNum(scope.row.total, 2, true);
-              }
-            },
-          ]
-          const hasLevel1 = checkedList.value.find(c => c.level == 1);
-          if (hasLevel1) {
-            fields.splice(-1, 0, { label: "指标", field: "level1", width: 120 });
-          }
-          const hasLevel2 = checkedList.value.find(c => c.level == 2);
-          if (hasLevel2) {
-            fields.splice(-1, 0, { label: "一级分类", field: "level2", width: 120 });
-          }
-          const hasLevel3 = checkedList.value.find(c => c.level == 3);
-          if (hasLevel3) {
-            fields.splice(-1, 0, { label: "二级分类", field: "level3", width: 120 });
-          }
-          const hasLevel4 = checkedList.value.find(c => c.level == 4);
-          if (hasLevel4) {
-            fields.splice(-1, 0, { label: "三级分类", field: "level4", width: 120 });
-          }
-          tableField.value.splice(0);
-          tableField.value.push(...fields);
-          initField.value = JSON.parse(JSON.stringify(tableField.value));
-          const datas = JSON.parse(JSON.stringify(checkedData.value));
-          datas.sort((a, b) => a.code.localeCompare(b.code));
-          const dGuid = datas.map(d => d.guid);
-          let tDatas = tableData.value.filter(t => dGuid.indexOf(t.guid) > -1);
-          datas.forEach((td, t) => {
-            if (tGuids.indexOf(td.guid) == -1) {
-              tDatas.splice(t, 0, td)
-            } else {
-              tDatas.map(d => {
-                if (d.guid == td.guid) {
-                  d.name = td.name;
-                  d.level1 = td.level1;
-                  d.level2 = td.level2;
-                  d.level3 = td.level3;
-                  d.level4 = td.level4;
-                }
-              })
-            }
-          })
-          tableData.value.splice(0);
-          tableData.value = tDatas;
-          if (tGuids.length > 0 && costFormInfo.value.baseDate && costFormInfo.value.investYear) {
-            setTableFields(costFormInfo.value);
-            besure.value = true;
-          }
-          getMergeRow();
-        }
-        step.value++;
-        setStep();
-      }
-    } else if (step.value == 1) {
    const formEl1 = entryFormRef.value.ruleFormRef;
    const fInfo1 = entryFormRef.value.formInline;
    if (!formEl1) return;
@@ -773,9 +613,14 @@ const btnClick = async (btn, bType = null) => {
        }
        await setEntryData(fInfo1, fInfo2);
        await transposeData(fInfo1.entryType);
-          step.value++;
+        costForm.value.items.map((cost, c) => {
-          setStep();
+          if (c == 0) {
+            cost.disabled = true
+          } else {
+            cost.visible = false
          }
+        })
+        step.value++;
      }
    }
  } else if (type == 'refresh') {
@@ -793,11 +638,13 @@ const btnClick = async (btn, bType = null) => {
  }
 };
-const setShowLevel4 = () => {
+const setStep = async () => {
-  nextTick(() => {
+  const info = costFormInfo.value;
-    const box4 = document.querySelectorAll('.grid-panel-box.box3 .grid-items');
+  await setFormItems(info, 'cost');
-    showLevel4.value = box4.length > 0
+  costForm.value.items[0].disabled = step.value > 0;
-  })
+  costForm.value.items[1].visible = step.value == 0;
+  costForm.value.items[2].visible = step.value == 0;
+  costForm.value.items[3].visible = step.value == 0;
 }
 const setFormItems = (row: any = null, type) => {
@@ -839,10 +686,10 @@ const submitForm = (formEl) => {
 };
 const setEntryData = (fInfo1, fInfo2) => {
-  let datas = [], lastCount = -1, lastYear = {};
+  let datas: any = [], lastCount = -1, lastYear: any = {};
  for (var f in costFileds.value) {
    lastCount++;
-    let row = { ...entryItem };
+    let row: any = { ...entryItem };
    if (f != 'baseNum') {
      row.year = `${f}年`;
    } else {
@@ -863,7 +710,7 @@ const setEntryData = (fInfo1, fInfo2) => {
        } else {
          let amortize1 = 0;
          for (var d = datas.length - 1; d > (lastCount - fInfo1.shareYears); d--) {
-            const da = datas[d];
+            const da: any = datas[d];
            amortize1 += da.amortize2
          }
          row.amortize1 = amortize1;
@@ -889,25 +736,29 @@ const setTableFields = (info) => {
  //结束年
  let nowYears = Number(info.baseDate.split('-')[0]);
  let Years = nowYears - smallYears
-  let arrYear = [], fields = [], row = { baseNum: '' };
+  let arrYear: any = [], fields: any = [], row: any = { baseNum: '' };
  for (let i = 0; i < Years; i++) {
    arrYear.push(smallYears++)
  }
  arrYear.forEach(item => {
    const field = `${item}`;
-    fields.push({ label: `${item}年`, field: field, type: 'input', width: 100, columClass: 'edit_cell' },)
+    fields.push({ label: `${item}年`, field: field, type: 'input', width: 100, align: 'right', columClass: 'edit_cell' },)
    row[field] = '';
  })
  costFileds.value = row;
  const date = new Date(info.baseDate);
  const currDay = date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long' });
-  tableField.value = JSON.parse(JSON.stringify(initField.value));
+  const modifiedStr = currDay.replace(/(\d+)年(\d+)月/, (_, year, month) => {
-  tableField.value.splice(-1, 0, ...fields, { label: currDay, field: 'baseNum', type: 'input', width: 120, columClass: 'edit_cell' });
+    return `${year}年1-${month}月`;
+  });
-  let datas = [];
+  tableField.value.at(-1).visible = true;
+  tableField.value = tableField.value.filter(item => item.field.indexOf('name') > -1 || item.field == 'total');
+  tableField.value.splice(-1, 0, ...fields, { label: modifiedStr, field: 'baseNum', type: 'input', width: 120, align: 'right', columClass: 'edit_cell' });
+  // 设置table数据
+  let datas: any = [];
  tableData.value.map(t => {
    let tRow = { ...row, ...t };
-    const tKey = Object.keys(t);
+    const tKey: any = Object.keys(t);
    tKey.forEach(k => {
      if ((k == 'baseNum' || !isNaN(k)) && row[k] === undefined) {
        delete tRow[k];
@@ -917,87 +768,107 @@ const setTableFields = (info) => {
  })
  tableData.value.splice(0);
  tableData.value = datas;
+  getMergeRow();
 }
 // 设置表格合并下标
 const getMergeRow = () => {
-  mergeRowCount.value = JSON.parse(JSON.stringify(rowCount));
+  let list = tableData.value, info = {}
-  let list = tableData.value;
+  // 为每个层级初始化合并信息
-  for (var i = 0; i < list.length; i++) {
+  for (let level = 1; level <= 3; level++) {
-    if (i === 0) {
+    const nameKey = `name${level}`
-      //第一个数据 默认合并1行，开始位置下标默认为0
+    const codeKey = `code${level}`
-      for (var m in mergeRowCount.value) {
+    info[nameKey] = []
-        mergeRowCount.value[m].rowspan.push(1);
-        mergeRowCount.value[m].index = 0;
+    // 处理每行数据
-      }
+    list.forEach((row, index) => {
+      if (index === 0) {
+        // 第一行默认合并1行，开始位置0
+        info[nameKey][index] = 1
      } else {
-      // 根据拥有子级数量进行合并
+        // 当前行与上一行的code和name比较
-      for (var m in mergeRowCount.value) {
+        const sameCode = row[codeKey] === list[index - 1][codeKey]
-        let mergeRow = mergeRowCount.value[m];
+        const sameName = row[nameKey] === list[index - 1][nameKey]
-        const e = Number(m.split('level')[1]);
-        if (list[i][m] && list[i]['level' + (e - 1)] == list[i - 1]['level' + (e - 1)] && list[i][m] === list[i - 1][m]) {
+        if (sameCode && sameName) {
-          mergeRow.rowspan[mergeRow.index] += 1;
+          // 找到当前分组的起始位置
-          mergeRow.rowspan.push(0);
+          let groupStart = index - 1
+          while (groupStart > 0 && info[nameKey][groupStart] === 0) {
+            groupStart--
+          }
+          // 增加合并行数
+          info[nameKey][groupStart]++
+          info[nameKey][index] = 0
        } else {
-          mergeRow.rowspan.push(1);
+          // 新分组，合并1行
-          mergeRow.index = i;
+          info[nameKey][index] = 1
-        }
        }
      }
+    })
  }
+  mergeRowCount.value = info;
 }
 // 表格行合并
 const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
-  if (column.property.indexOf('level') > -1 && column.property != 'level4') {
+  const colName = column.property
-    const rowspan = mergeRowCount.value[column.property].rowspan;
+  if (mergeRowCount.value[colName]) {
-    const _row = rowspan[rowIndex];
+    const rowspan = mergeRowCount.value[colName][rowIndex]
-    const _col = _row == 0 ? 0 : 1;
    return {
-      rowspan: _row,
+      rowspan: rowspan,
-      colspan: _col
+      colspan: rowspan > 0 ? 1 : 0
    }
  }
+  return { rowspan: 1, colspan: 1 }
 }
-const isMergedCell = ({ rowIndex, columnIndex }) => {
+const isMergedCell = ({ row, column, rowIndex, columnIndex }) => {
-  const property = tableField.value[columnIndex].field;
+  const property = column.property;
-  const rowspan = mergeRowCount.value[property]?.rowspan[rowIndex];
+  // 只处理需要合并的列 (name1/name2/name3)
-  return rowspan > 1 ? 'merged-cell' : '';
+  if (['name1', 'name2', 'name3'].includes(property)) {
+    // 检查当前单元格是否属于合并范围
+    const rowspan = mergeRowCount.value[property]?.[rowIndex];
+    // 无论是合并的起始单元格(rowspan>1)还是被合并的隐藏单元格(rowspan===0)
+    return rowspan !== 1 ? 'merged-cell' : '';
+  }
+  return '';
 }
-// 表格合计行
+// 优化后的合计计算方法
 const tableSummaryMethod = ({ columns, data }) => {
-  let sums = [];
+  if (!besure.value) return;
+  let sums: any = [], numericColumns: any = []; // 记录需要计算的数字列
  columns.forEach((column, index) => {
-    if (index === 0) {  //需要显示'总金额'的列 坐标 :0
+    if (index === 0) {
-      sums[index] = '合计'
+      sums[index] = '合计';
-      return
+      return;
-    } else {
-      if (column.property.indexOf('level') == -1 && column.property != 'memo') {
-        const values = data.map(item => parseFloat(item[column.property] ? item[column.property].replace(/,/g, "") : 0));
-        if (!values.every(value => isNaN(value))) {
-          const sum = values.reduce((prev, curr) => {
-            const value = parseFloat(curr || 0)
-            if (!isNaN(value)) {
-              return prev + curr
-            } else {
-              return prev
-            }
-          }, 0)
-          sums[index] = changeNum(sum, 2, true)
-          if (column.property == 'total') {
-            amount.value = sum
    }
-          sumAmount.value[column.property] = sum;
+    // 识别需要计算的数字列
+    if (!column.property.includes('name') && column.property !== 'memo') {
+      numericColumns.push({
+        index,
+        property: column.property
+      });
    } else {
-          sums[index] = 'N/A'
+      sums[index] = ''; // 非数字列留空
-        }
-      }
    }
-  })
+  });
-  return sums
+  // 计算数字列合计
-}
+  numericColumns.forEach(({ index, property }) => {
+    const sum = data.reduce((total, item) => {
+      const value = parseFloat(String(item[property]).replace(/,/g, '')) || 0;
+      return total + value;
+    }, 0);
+    sums[index] = changeNum(sum, 2, true);
+    // 特殊字段处理
+    if (property === 'total') {
+      amount.value = sum;
+    }
+    sumAmount.value[property] = sum;
+  });
+  return sums;
+};
 const isExist = (newArr, name) => {
  for (let i = 0; i < newArr.length; i++) {
@@ -1010,19 +881,23 @@ const isExist = (newArr, name) => {
 // 表格数据行列转置
 const transposeData = (type) => {
+  bookHeaders.value.splice(1);
  // 提取原始数据的头部作为转置后数据的列
-  headers.value = entryData.value.map((t) => {
+  const list = entryData.value.map((t) => {
    return {
      label: t.year,
-      value: t.guid || t.year
+      field: t.guid || t.year,
+      width: 120,
+      align: 'right'
    }
  });
+  bookHeaders.value.push(...list);
  /**
 *  定义映射字段表(最好取全量字段)
 * */
  const mapObj = convertConfig[type]
-  const newArr = [];
+  const newArr: any = [];
  for (const t in mapObj) {
    for (let i = 0; i < entryData.value.length; i++) {
      const item = entryData.value[i]
@@ -1030,7 +905,7 @@ const transposeData = (type) => {
      if (result) {
        result[item.year] = item[t]
      } else {
-        const obj = {}
+        const obj: any = {}
        obj.title = mapObj[t]
        obj[item.year] = item[t]
        newArr.push(obj)
@@ -1054,248 +929,360 @@ const setLabel = (val) => {
  }
 }
-const getClass = (i, checked) => {
+// 下载表格
-  return checked ? `active${i + 1}` : '';
+const s2ab = (s) => {
+  const buf = new ArrayBuffer(s.length);
+  const view = new Uint8Array(buf);
+  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
 }
-const gridPanel = ref(null);
+// 定义边框样式 - 实线边框
-const gridItem = ref(null);
+const borderStyle = {
-const setItemLine = () => {
+  top: { style: 'thin', color: { rgb: '888888' } },
-  nextTick(() => {
+  bottom: { style: 'thin', color: { rgb: '888888' } },
-    setTimeout(() => {
+  left: { style: 'thin', color: { rgb: '888888' } },
-      if (gridItem.value) {
+  right: { style: 'thin', color: { rgb: '888888' } }
-        const width1 = gridPanel.value[0].offsetWidth;
+};
-        const width2 = gridItem.value[0].offsetWidth;
-        // 设置::before伪元素的宽度
-        itemWidth.value = `${(width1 - width2) / 2 + (showLevel4.value ? 6 : 8)}px`;
-        itemLeft.value = `-${(width1 - width2) / 2 + (showLevel4.value ? 6 : 8)}px`;
-        document.documentElement.style.setProperty('--item-width', itemWidth.value);
-        document.documentElement.style.setProperty('--item-left', itemLeft.value);
-      }
-    }, 100)
-  })
-}
-const spanHeight = (obj) => {
+// 字体配置
-  return `${obj.children.length ? obj.children.length * 48 : 48}px`;
+const defaultFont = {
-}
+  name: '宋体',        // 字体名称
+  sz: 14 * 0.75,            // 字体大小(磅)
+  color: { rgb: '212121' } // 黑色
+};
-const showPanel = (arr, row) => {
+// 设置行高（单位：磅，1px≈0.75磅）
-  arr.forEach(a => {
+const defaultRowHeightInPx = 36; // 默认行高36px
-    if (a.level < 3) {
+const headerRowHeightInPx = 32;  // 表头行高32px
-      a.children.length && showPanel(a.children, row)
+// 生成成本设置表
+const exportDetailsToExcel = async () => {
+  // 准备工作表数据
+  let wsData = [], fields: any = [];
+  tableField.value.map(f => {
+    if (f.visible || f.field.indexOf('name') == -1) {
+      if (f.field == 'name4') {
+        const exist4 = checkedData.value.find(c => c.code4)
+        exist4 && fields.push(f)
      } else {
-      if (a.children.length) {
+        fields.push(f)
-        row.show4 = true;
-        return;
      }
    }
-  })
+  });
-  return row.show4 || false;
-}
-// 设置二级分类 item的margin-bottom值
+  // 表头
-const setItemStyle = (row, indexObj) => {
+  const headers = fields.map(item => item.label)
-  if (indexObj) {
+  wsData.push(headers)
-    const { o } = indexObj;
-    setGroupStyle();
+  // 判断哪些列是数值类型
-    setItemsStyle(o);
+  const numField = fields.filter(item => item.field.indexOf('name') == -1);
-    return { height: 'auto' }
+  const numericFields = numField.map(f => f.field);
+  const isNumericColumn = fields.map(field => numericFields.includes(field.field));
+  // 处理数据行
+  checkedData.value.forEach(item => {
+    const row = fields.map(f => {
+      if (f.field.indexOf('name') == -1) {
+        // 分类字段
+        return changeNum(item[f.field], 2, true)
      } else {
-    setHeight();
+        // 其他字段
-    return { 'margin-bottom': row.children.length > 1 ? ((row.children.length - 1) * 48) + 8 + 'px' : '0px' }
+        return item[f.field] || ''
      }
-}
-// 设置三级分类 group高度
-const setGroupStyle = () => {
-  nextTick(() => {
-    const box3 = document.querySelectorAll('.grid-panel-box.box2 .grid-panel');
-    const box4 = document.querySelectorAll('.grid-panel-box.box3 .grid-group');
-    box4.forEach((box, b) => {
-      box.style.height = box3[b].offsetHeight + 'px';
    })
+    wsData.push(row)
  })
-}
-// 设置三级分类 item高度
+  // 添加合计行
-const setItemsStyle = (i) => {
+  const totalRow = ['合计', '', '', ''];
-  nextTick(() => {
+  let totalValues = {}
-    const box3 = document.querySelectorAll('.grid-panel-box.box2 .grid-items');
-    const box4 = document.querySelectorAll('.grid-panel-box.box3 .group-items');
+  // 初始化合计值
-    box4.forEach((box, b) => {
+  numericFields.forEach(field => {
-      const bStyle = window.getComputedStyle(box3[b]);
+    totalValues[field] = 0
-      const h = parseFloat(bStyle.height) + parseFloat(bStyle.marginBottom);
+  })
-      box.style.height = h <= 40 ? (h + 8) + 'px' : h + 'px';
+  // 计算合计值
+  checkedData.value.forEach(item => {
+    numericFields.forEach(field => {
+      if (item[field]) {
+        const num = parseFloat(item[field].replace(/,/g, '')) || 0
+        totalValues[field] += num
+      }
    })
  })
-}
-// 设置一级分类 panel高度
+  // 将合计值添加到合计行
-const setHeight = () => {
+  fields.forEach((field, index) => {
-  nextTick(() => {
+    if (index < 4) return // 前4列已经处理
-    const boxArr = document.querySelectorAll('.grid-panel-box');
+    if (numericFields.includes(field.field)) {
-    if (boxArr.length) {
+      const value = totalValues[field.field]
-      const box2 = boxArr[1].querySelectorAll('.grid-panel');
+      // 格式化数字，保留2位小数
-      const box3 = boxArr[2].querySelectorAll('.grid-panel');
+      totalRow.push(value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","))
-      box2.forEach((box, b) => {
+    } else {
-        box.style.height = box3[b].offsetHeight + 'px';
+      totalRow.push('')
+    }
  })
+  wsData.push(totalRow)
+  // 创建工作表
+  const ws = XLSXS.utils.aoa_to_sheet(wsData)
+  // 自动调整列宽
+  const colWidths = fields.map((field, index) => {
+    const defaultWidth = field.width || 100 // 默认宽度100
+    const colWidth = 100 * 0.75; // 留一些余地
+    // 取表头宽度和内容宽度的较大值
+    return { wpx: colWidth } // 使用像素宽度
+  })
+  ws['!cols'] = colWidths
+  // 转换为磅（Excel使用磅作为单位）
+  const defaultRowHeight = defaultRowHeightInPx * 0.75;
+  const headerRowHeight = headerRowHeightInPx * 0.75;
+  // 初始化行高设置
+  ws['!rows'] = [];
+  // 设置表头行高
+  ws['!rows'][0] = { hpt: headerRowHeight, customHeight: true };
+  // 设置数据行高
+  for (let i = 1; i < wsData.length; i++) {
+    ws['!rows'][i] = { hpt: defaultRowHeight, customHeight: true };
  }
+  // 设置合并单元格
+  const merges = []
+  // 按code1合并一级指标
+  const level1Groups = groupBy(checkedData.value, 'code1')
+  Object.values(level1Groups).forEach(group => {
+    const startRow = checkedData.value.findIndex(item => item.code1 === group[0].code1) + 1 // +1因为第一行是表头
+    const endRow = startRow + group.length - 1
+    merges.push({ s: { r: startRow, c: 0 }, e: { r: endRow, c: 0 } })
  })
-}
-// 下载表格
+  // 按code2合并一级分类
-const s2ab = (s) => {
+  const level2Groups = groupBy(checkedData.value, 'code2')
-  const buf = new ArrayBuffer(s.length);
+  Object.values(level2Groups).forEach(group => {
-  const view = new Uint8Array(buf);
+    const startRow = checkedData.value.findIndex(item => item.code2 === group[0].code2) + 1
-  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+    const endRow = startRow + group.length - 1
-  return buf;
+    merges.push({ s: { r: startRow, c: 1 }, e: { r: endRow, c: 1 } })
-}
+  })
-// 获取所有单元格对象
+  // 按code3合并二级分类
-function getAllCells(pRef, type) {
+  const level3Groups = groupBy(checkedData.value, 'code3')
-  const allCells = [];
+  Object.values(level3Groups).forEach(group => {
-  let columns = [], allColsNum = 0;
+    const startRow = tableData.value.findIndex(item => item.code3 === group[0].code3) + 1
-  if (type == 'cost') {
+    const endRow = startRow + group.length - 1
-    allColsNum = tableField.value.length;
+    merges.push({ s: { r: startRow, c: 2 }, e: { r: endRow, c: 2 } })
-    tableField.value.map((tc, c) => {
+  })
-      if (tc.field.indexOf('level') == -1 || tc.field == 'memo') {
-        columns.push({ ...tc, cIndex: c })
+  ws['!merges'] = merges
+  // 设置单元格样式
+  const range = XLSXS.utils.decode_range(ws['!ref'])
+  for (let R = range.s.r; R <= range.e.r; ++R) {
+    for (let C = range.s.c; C <= range.e.c; ++C) {
+      const cellAddress = XLSXS.utils.encode_cell({ r: R, c: C })
+      // 默认样式
+      const defaultStyle = {
+        alignment: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        font: defaultFont,
+        border: borderStyle // 添加边框样式
      }
-    });
-  } else {
+      // 表头样式
-    headers.value.map((th, h) => {
+      if (R === 0) {
-      columns.push({ ...th, cIndex: h + 1 })
+        // 如果该列是数值列，则表头也右对齐
-    });
+        const isNumeric = isNumericColumn[C];
+        ws[cellAddress].s = {
+          ...defaultStyle,
+          alignment: {
+            vertical: 'center',
+            horizontal: isNumeric ? 'right' : 'left'
+          },
+          fill: { fgColor: { rgb: 'F2F2F2' } } // 表头背景色（可选）
+        }
+        continue
      }
-  const colIndex = columns.map(c => c.cIndex);
-  // 获取所有行
-  const rows = pRef.$el.querySelectorAll('.el-table__row');
-  rows.forEach((rowElement, rowIndex) => {
+      // 合计行样式
-    const cells = rowElement.querySelectorAll('.el-table__cell');
+      if (R === range.e.r) {
+        ws[cellAddress].s = {
+          ...defaultStyle,
+          alignment: {
+            vertical: 'center',
+            horizontal: isNumericColumn[C] ? 'right' : 'left'
+          },
+          // fill: { fgColor: { rgb: 'FFF1D4' } } // 合计行背景色（可选）
+        }
+        continue
+      }
-    cells.forEach((cellElement, cellIndex) => {
+      // 数据行样式
-      const cell = {
+      const fieldIndex = C
-        rowIndex: (rowIndex + 1),
+      const field = fields[fieldIndex]
-        cellIndex: cellIndex,
-        value: cellElement.innerText.trim(),
+      // 数值列右对齐
-        style: window.getComputedStyle(cellElement)
+      if (isNumericColumn[C]) {
-      };
+        ws[cellAddress].s = {
-      let format = 'General';
+          ...defaultStyle,
-      if (type == 'entry') {
+          alignment: {
-        format = colIndex.indexOf(cellIndex) > -1 ? '#,##0.00' : '';
+            vertical: 'center',
-      } else {
+            horizontal: 'right'
-        if (rowIndex == rows.length - 1) {
+          }
-          format = cell.value != '合计' && cell.value ? '#,##0.00' : '';
+        }
      } else {
-          format = colIndex.indexOf(cellIndex + (allColsNum - cells.length)) > -1 ? '#,##0.00' : '';
+        // 其他列左对齐
-          cell.cellIndex = cellIndex + (allColsNum - cells.length)
+        ws[cellAddress].s = defaultStyle
+      }
+    }
  }
+  return ws;
+};
+// 辅助函数：按属性分组
+const groupBy = (array, key) => {
+  return array.reduce((acc, obj) => {
+    const groupKey = obj[key]
+    if (!acc[groupKey]) {
+      acc[groupKey] = []
+    }
+    acc[groupKey].push(obj)
+    return acc
+  }, {})
+};
+// 生成成本设置表
+const exportBookToExcel = async () => {
+  // 准备工作表数据
+  const wsData = []
+  // 表头
+  const headers = bookHeaders.value.map(item => item.label)
+  wsData.push(headers)
+  // 处理数据行
+  transposedData.value.forEach(item => {
+    const row = bookHeaders.value.map(f => {
+      if (f.field.indexOf('title') == -1) {
+        // 分类字段
+        return changeNum(item[f.field], 2, true)
+      } else {
+        // 其他字段
+        return item[f.field] || ''
      }
-      cell.format = format;
-      allCells.push(cell);
    })
+    wsData.push(row)
  })
-  return allCells;
-}
-// 设置单元格样式
+  // 创建工作表
-const applyStyles = (ws, pRef, type) => {
+  const ws = XLSXS.utils.aoa_to_sheet(wsData)
-  // 获取所有带有样式的单元格
-  const styledCells = getAllCells(pRef, type)
-  // 设置单元格样式
+  // 自动调整列宽
-  styledCells.forEach((cell) => {
+  const colWidths = bookHeaders.value.map((field, index) => {
-    const cellRef = XLSXS.utils.encode_cell({ r: cell.rowIndex, c: cell.cellIndex });
+    const defaultWidth = field.width || 100 // 默认宽度100
-    const style = cell.style;
+    const colWidth = defaultWidth * 0.75; // 留一些余地
+    // 取表头宽度和内容宽度的较大值
+    return { wpx: colWidth } // 使用像素宽度
+  })
+  ws['!cols'] = colWidths
+  // 转换为磅（Excel使用磅作为单位）
+  const defaultRowHeight = defaultRowHeightInPx * 0.75;
+  const headerRowHeight = headerRowHeightInPx * 0.75;
+  // 初始化行高设置
+  ws['!rows'] = [];
+  // 设置表头行高
+  ws['!rows'][0] = { hpt: headerRowHeight, customHeight: true };
+  // 设置数据行高
+  for (let i = 1; i < wsData.length; i++) {
+    ws['!rows'][i] = { hpt: defaultRowHeight, customHeight: true };
+  }
  // 设置单元格样式
-    const cellStyle = {
+  const range = XLSXS.utils.decode_range(ws['!ref'])
-      alignment: {
+  // 确定哪些列是数值列（field不包含'title'的列）
-        horizontal: cell.format ? 'right' : style.textAlign,
+  const isNumericColumn = bookHeaders.value.map(f => f.field.indexOf('title') === -1);
-        vertical: 'center', // 垂直居中
-      },
-    };
-    ws[cellRef] = ws[cellRef] || {};
+  for (let R = range.s.r; R <= range.e.r; ++R) {
-    ws[cellRef].s = cellStyle;
+    for (let C = range.s.c; C <= range.e.c; ++C) {
-    if (cell.format) {
+      const cellAddress = XLSXS.utils.encode_cell({ r: R, c: C })
-      ws[cellRef].z = cell.format;
-    } else {
+      // 确保单元格存在（有些空值单元格可能不存在）
-      ws[cellRef].t = 's';
+      if (!ws[cellAddress]) {
-      ws[cellRef].v = cell.value;
+        ws[cellAddress] = {};
      }
-  });
-  // 合并单元格
+      // 默认样式（垂直居中）
-  const mergedCells = document.querySelectorAll('.merged-cell');
+      const defaultStyle = {
-  mergedCells.forEach((cell) => {
-    // 设置合并单元格的样式
-    const mergedCellStyle = {
        alignment: {
-        vertical: 'center', // 垂直居中
+          vertical: 'center',
+          horizontal: 'left'
        },
-    };
+        font: defaultFont,
+        border: borderStyle // 添加边框样式
+      }
-    const topLeftCellRef = XLSXS.utils.encode_cell({ r: cell.rowIndex, c: cell.cellIndex });
+      // 判断当前列是否为数值列
-    ws[topLeftCellRef] = ws[topLeftCellRef] || {};
+      const isNumeric = isNumericColumn[C];
-    ws[topLeftCellRef].s = mergedCellStyle;
+      // 数值列的对齐方式
-  });
+      const alignment = {
-}
+        vertical: 'center',
+        horizontal: isNumeric ? 'right' : 'left'
+      };
+      // 表头样式（第1行）
+      if (R === 0) {
+        ws[cellAddress].s = {
+          ...defaultStyle,
+          alignment: alignment, // 使用统一对齐方式
+          fill: { fgColor: { rgb: 'F2F2F2' } } // 表头背景色（可选）
+        }
+        continue
+      }
-// 创建一个隐藏的 div 用于测量文本宽度
+      // 数据行样式
-const measureDiv = document.createElement('div');
+      const cellValue = ws[cellAddress].v;
-measureDiv.style.position = 'absolute';
-measureDiv.style.visibility = 'hidden';
-measureDiv.style.whiteSpace = 'nowrap';
-document.body.appendChild(measureDiv);
-// 测量文本宽度的函数
-function measureTextWidth(text, fontSize, fontFamily) {
-  measureDiv.style.fontSize = `${fontSize}px`;
-  measureDiv.style.fontFamily = fontFamily;
-  measureDiv.textContent = text;
-  return measureDiv.offsetWidth;
-}
-const adjustColumnWidth = (ws) => {
+      ws[cellAddress].s = {
-  const range = XLSXS.utils.decode_range(ws['!ref']);
+        ...defaultStyle,
-  const defaultFontSize = 11; // 默认字体大小
+        alignment: alignment // 使用统一对齐方式
-  const defaultFontFamily = 'Arial'; // 默认字体族
+      };
-  for (let C = range.s.c; C <= range.e.c; ++C) {
+      // 确保数值被正确识别为数字类型
-    let maxWidth = 0;
+      if (isNumeric && cellValue !== undefined && cellValue !== "" && !isNaN(cellValue)) {
-    for (let R = range.s.r; R <= range.e.r; ++R) {
+        ws[cellAddress].t = 'n'; // 数字类型
-      const cellRef = XLSXS.utils.encode_cell({ r: R, c: C });
+        ws[cellAddress].z = '#,##0.00'; // 数字格式
-      const cellValue = ws[cellRef]?.v?.toString() || '';
+      }
-      const width = measureTextWidth(cellValue, defaultFontSize, defaultFontFamily);
-      maxWidth = Math.max(maxWidth, width);
    }
-    // 根据测量的宽度计算列宽
-    const colWidth = maxWidth / defaultFontSize + 2; // 留一些余地
-    ws['!cols'] = ws['!cols'] || [];
-    ws['!cols'][C] = { wpx: colWidth * defaultFontSize }; // 使用像素宽度
  }
+  return ws;
 };
-const exportClick = () => {
+const exportClick = async () => {
  // 获取第一个表格的数据
-  const table1 = document.getElementById('cost-table');
+  const ws1 = await exportDetailsToExcel();
-  const ws1 = XLSXS.utils.table_to_sheet(table1);
  // 获取第二个表格的数据
-  const table2 = document.getElementById('entry-table');
+  const ws2 = await exportBookToExcel();
-  const ws2 = XLSXS.utils.table_to_sheet(table2);
-  // 调整列宽
-  adjustColumnWidth(ws1);
-  adjustColumnWidth(ws2);
-  // 添加样式
-  applyStyles(ws1, costTableRef.value, 'cost');
-  applyStyles(ws2, entryTableRef.value, 'entry');
  // 创建工作簿并添加两个工作表
  const wb = XLSXS.utils.book_new();
@@ -1342,220 +1329,129 @@ const setSumRow = () => {
 }
 onActivated(() => {
+  tableField.value = JSON.parse(JSON.stringify(initField.value));
  getProducts();
  getCostData();
 });
 onMounted(() => {
-  setItemLine();
+  // 添加/移除全局点击监听
-  window.addEventListener('resize', setItemLine);
+  document.addEventListener('click', handleClickOutside)
-});
+})
-onUpdated(() => {
+onBeforeUnmount(() => {
-  setItemLine();
+  document.removeEventListener('click', handleClickOutside)
-});
+})
-onUnmounted(() => {
+onUpdated(() => {
-  window.removeEventListener('resize', setItemLine);
+  // setItemLine();
 });
-watch(showLevel4, (newVal, oldVal) => {
-  setItemLine();
-})
 </script>
 <template>
  <div class="container_wrap">
    <div class="content_main">
-      <div class="top_tool_wrap">
+      <div class="operator_panel_wrap" :style="{ 'min-height': 'unset' }" v-loading="loading">
-        <StepBar :steps-info="stepsInfo" />
-      </div>
-      <div class="operator_panel_wrap" :style="{ 'min-height': step == 0 ? 'calc(100% - 112px)' : 'unset' }"
-        v-loading="loading">
-        <ContentWrap title="入表类型" description="" :expandSwicth="false" v-show="step == 1">
-          <Form ref="entryFormRef" :itemList="entryForm.items" formId="dam-base-form" :rules="entryForm.rules"
-            col="col3" @selectChange="selectChange" />
-        </ContentWrap>
        <div class="v-tip" v-show="step == 0">
          <div class="tip-icon"></div>
          <div class="tip-des">
            本工具提供的入表评估结果仅为初步测算参考，基于用户输入参数生成，不代表最终入表金额。实际入表需遵循《企业数据资源相关会计处理暂行规定》及会计准则要求，经专业审计机构确认后方可生效。
          </div>
        </div>
-        <ContentWrap :title="step == 0 ? '设置成本项' : step == 1 ? '填写成本明细' : '文件预览'"
+        <ContentWrap :title="step == 0 ? '设置成本项' : '文件预览'" description="" :expandSwicth="false"
-          description=""
+          :style="step == 1 ? { 'margin-top': '16px' } : {}">
-          :expandSwicth="false" :style="step == 1 ? { 'margin-top': '16px' } : {}">
          <div class="table_tool_wrap">
            <Form ref="costFormRef" :itemList="costForm.items" formId="dam-base-form" :rules="costForm.rules" col="col3"
              @btnClick="btnClick" @selectChange="selectChange" />
-            <div class="tool_btn" v-if="step == 2">
+            <div class="tool_btn" v-if="step == 1">
              <el-button type="primary" @click="exportClick">下载文件</el-button>
              <!-- <el-button type="primary" plain @click="senMessage">入表咨询</el-button>  -->
            </div>
          </div>
-          <div class="grid-box-wrap" v-show="step == 0">
+          <div class="table_panel_wrap">
-            <!-- 头部标题 -->
+            <div class="amount_tool" v-if="besure">
-            <div class="grid-panel-wrap header" :class="{ col4: showLevel4 }">
-              <template v-for="(list, l) in gridList" :key="'panel'+l">
-                <div class="panel-header" v-if="l < 3 || showLevel4">{{ list.name }}</div>
-              </template>
-            </div>
-            <div class="grid-panel-wrap" :class="{ col4: showLevel4 }" v-for="(item, i) in allMapList"
-              :key="'panel-' + i">
-              <!-- 一级指标 -->
-              <div class="grid-panel-box">
-                <div class="grid-panel" ref="gridPanel">
-                  <div class="grid-items after" ref="gridItem" :class="getClass(i, item.checked)">
-                    <el-checkbox v-model="item.checked" @change="val => checkboxChange(val, { item }, 1)" />
-                    <span class="item-label">{{ item.name }}</span>
-                    <span class="circle"></span>
-                  </div>
-                </div>
-              </div>
-              <!-- 一级分类 -->
-              <div class="grid-panel-box box1">
-                <template v-for="(grid, g) in item.children" :key="'grid' + i + '-' + g">
-                  <div class="grid-panel" :class="{ before: g < item.children.length - 1, left8: showLevel4 }">
-                    <div class="grid-items before after" :class="getClass(i, grid.checked)">
-                      <el-checkbox v-model="grid.checked" @change="val => checkboxChange(val, { item, grid }, 2)" />
-                      <span class="item-label">{{ grid.name }}</span>
-                      <span class="circle"></span>
-                    </div>
-                  </div>
-                </template>
-              </div>
-              <!-- 二级分类 -->
-              <div class="grid-panel-box box2 before" :class="{ after: showLevel4 }">
-                <template v-for="(grid, g) in item.children" :key="'grid' + i + '-' + g">
-                  <div class="grid-panel height_auto" :class="{ left8: showLevel4 }" v-if="grid.children.length">
-                    <div class="grid-items before"
-                      :class="[getClass(i, child.checked), { after: child.children.length }]"
-                      v-for="(child, c) in grid.children" :key="'item' + i + '-' + g + '-' + c"
-                      :style="setItemStyle(child, null)">
-                      <el-checkbox v-model="child.checked"
-                        @change="val => checkboxChange(val, { item, grid, child }, 3)" />
-                      <span class="item-label">{{ child.name }}</span>
-                      <div class="item-tool">
-                        <el-popover placement="bottom-end" :width="108" trigger="click" popper-class="popover_btns">
-                          <template #reference>
-                            <el-icon>
-                              <MoreFilled />
-                            </el-icon>
-                          </template>
-                          <template #default>
-                            <div class="tool-btns">
-                              <div @click="btnClick({ value: 'add-same', row: child, parent: grid })">新增本级</div>
-                              <div @click="btnClick({ value: 'add-lower', row: child, parent: grid })">新增下级</div>
-                              <div @click="btnClick({ value: 'edit', row: child, parent: grid })">重命名</div>
-                              <div v-if="grid.children.length > 1"
-                                @click="btnClick({ value: 'remove', row: child, parent: grid })">删除</div>
-                            </div>
-                          </template>
-                        </el-popover>
-                      </div>
-                      <span class="circle" :style="{ height: spanHeight(child) }"></span>
-                    </div>
-                  </div>
-                </template>
-              </div>
-              <!-- 三级分类 -->
-              <div class="grid-panel-box box3" v-if="showLevel4">
-                <div class="grid-panel no_padding" v-if="showPanel(item.children, item)">
-                  <template v-for="(grid, g) in item.children" :key="'grid' + i + '-' + g">
-                    <div class="grid-group">
-                      <template v-for="(child, c) in grid.children" :key="'item' + i + '-' + g + '-' + c">
-                        <div class="group-items before">
-                          <div class="grid-items before" :class="getClass(i, opt.checked)"
-                            v-for="(opt, o) in child.children" :key="'pis' + i + '-' + g + '-' + c + '-' + o"
-                            :style="setItemStyle(opt, { o })">
-                            <el-checkbox v-model="opt.checked"
-                              @change="val => checkboxChange(val, { item, grid, child, opt }, 4)" />
-                            <span class="item-label">{{ opt.name }}</span>
-                            <div class="item-tool">
-                              <el-popover placement="bottom-end" :width="108" trigger="click"
-                                popper-class="popover_btns">
-                                <template #reference>
-                                  <el-icon>
-                                    <MoreFilled />
-                                  </el-icon>
-                                </template>
-                                <template #default>
-                                  <div class="tool-btns">
-                                    <div @click="btnClick({ value: 'edit', row: opt, parent: child })">重命名</div>
-                                    <div @click="btnClick({ value: 'remove', row: opt, parent: child })">删除</div>
-                                  </div>
-                                </template>
-                              </el-popover>
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="table_panel_wrap" v-show="step > 0">
-            <div class="amount_tool" v-if="step == 1">
              <span class="amount_text">累计投入:</span>
              <span class="amount_num">{{ changeNum(amount, 2, true) }}</span>
              <span>元</span>
            </div>
            <div class="table_panel">
-              <el-table id="cost-table" v-show="step == 1" ref="costTableRef" :data="tableData"
+              <el-table id="cost-table" v-show="step == 0" ref="costTableRef" :data="tableData"
-                :span-method="tableSpanMethod" :summary-method="tableSummaryMethod" show-summary border
+                :span-method="tableSpanMethod" :show-summary="besure" :summary-method="tableSummaryMethod"
-                :cell-class-name="isMergedCell">
+                :cell-class-name="isMergedCell" stripe border>
-                <el-table-column v-for="(item, i) in tableField" :label="item.label" :width="item.width"
+                <template v-for="(item, i) in tableField" :key="'tField' + i">
-                  :min-width="item.minWidth" :fixed="item.fixed" :align="item.align" :sortable="item.sortable ?? false"
+                  <el-table-column v-if="item.visible ?? true" :label="item.label" :width="item.width"
-                  :prop="item.field" :class-name="item.columClass" show-overflow-tooltip>
+                    :min-width="item.minWidth" :fixed="item.fixed" :align="item.align"
+                    :sortable="item.sortable ?? false" :prop="item.field" :class-name="item.columClass"
+                    show-overflow-tooltip>
                    <template #default="scope">
                      <div class="input_cell" v-if="item.type == 'input'">
-                      <el-input v-model.trim="scope.row[item.field]" placeholder="请输入" :maxlength="item.maxlength ?? ''"
+                        <el-input v-model.trim="scope.row[item.field]" :placeholder="scope.row.edit ? '' : '--'"
-                        @change="(val) => inputChange(val, scope, item.field)"
+                          :maxlength="item.maxlength ?? ''" @change="(val) => inputChange(val, scope, item.field)"
-                        @input="(val) => inputEventChange(val, scope, item.field)" clearable></el-input>
+                          @input="(val) => inputEventChange(val, scope, item.field)"
+                          :disabled="scope.row.edit ? false : true" clearable></el-input>
                        <span>{{ scope.row[item.field] ? changeNum(scope.row[item.field], 2, true) :
                          Number(scope.row[item.field]) == 0 ? '0.00' : '' }}</span>
                      </div>
-                    <span v-else>
+                      <div class="cell-tool" v-else>
-                      {{ item.getName ? item.getName(scope) : scope.row[item.field] !== 0 && !scope.row[item.field] ?
+                        <span class="cell_text_group">
+                          <el-checkbox v-if="item.field != 'total' && scope.row[item.field]"
+                            v-model="scope.row['checked' + item.level]"
+                            @change="val => cellCheckboxChange(val, { ...item, ...scope.row, rIndex: scope.$index })" />
+                          <span class="cell_text">
+                            {{ item.getName ? item.getName(scope) : scope.row[item.field] !== 0 &&
+                              !scope.row[item.field]
+                              ?
                              "--" : scope.row[item.field] }}
                          </span>
+                        </span>
+                        <el-icon v-if="item.field == 'name3' || (item.field == 'name4' && scope.row[item.field])"
+                          class="list-more" color="#666"
+                          @click="e => togglePopover({ ...item, ...scope.row, rIndex: scope.$index }, e)">
+                          <MoreFilled />
+                        </el-icon>
+                      </div>
                    </template>
                  </el-table-column>
-              </el-table>
-              <el-table id="entry-table" ref="entryTableRef" :data="transposedData" stripe border v-show="step == 2">
-                <el-table-column prop="title" label="项目" :width="140">
-                  <template v-slot="{ row }">
-                    <span>{{ setLabel(row.title) }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column v-for="(item, index) in headers" :key="index" :prop="item.value" :label="item.label"
-                  :width="120" align="right">
-                  <template v-slot:header>
-                    <span v-html="item.label"></span>
                </template>
-                  <template v-slot="{ row }">
+              </el-table>
-                    <span v-if="typeof row[item.value] == 'number'">{{ changeNum(row[item.value], 2, true) }}</span>
+              <el-table id="entry-table" ref="entryTableRef" :data="transposedData" stripe border v-show="step == 1">
-                    <span v-else></span>
+                <el-table-column v-for="(item, index) in bookHeaders" :key="index" :prop="item.field"
+                  :label="item.label" :width="item.width" :align="item.align">
+                  <template #default="scope">
+                    <span v-if="item.field == 'title'">{{ setLabel(scope.row[item.field]) }}</span>
+                    <span v-else>{{ changeNum(scope.row[item.field], 2, true) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </ContentWrap>
+        <ContentWrap title="入表类型" description="" :expandSwicth="false" v-show="step == 0">
+          <Form ref="entryFormRef" :itemList="entryForm.items" formId="dam-base-form" :rules="entryForm.rules"
+            col="col3" @selectChange="selectChange" />
+        </ContentWrap>
      </div>
    </div>
    <div class="tool_btns">
      <div class="btns">
        <el-button @click="btnClick({ value: 'refresh' })">重置</el-button>
-        <el-button @click="btnClick({ value: 'prev' })" v-if="step == 1">上一步</el-button>
+        <el-button type="primary" @click="btnClick({ value: 'next' })" v-if="step == 0">入表</el-button>
-        <el-button type="primary" @click="btnClick({ value: 'prev' })" v-if="step == 2">上一步</el-button>
+        <el-button type="primary" @click="btnClick({ value: 'prev' })" v-if="step == 1">上一步</el-button>
-        <el-button type="primary" @click="btnClick({ value: 'next' })" v-if="step < 2">下一步</el-button>
+      </div>
    </div>
  </div>
+  <el-popover :visible="popoverVisible" placement="bottom-start" width="110" trigger="click"
+    popper-class="tree-item-edit-menu" :virtual-ref="popoverTriggerRef" virtual-triggering :hide-after="0" :offset="8"
+    @after-leave="handlePopoverClose">
+    <div class="levitation-ul" @mousedown.stop>
+      <span class="levitation-li" @click="handleMenuClick('add-same')" v-show="showAdd">新增本级分类</span>
+      <span class="levitation-li" @click="handleMenuClick('add-lower')" v-show="showAdd">新增下级分类</span>
+      <span class="levitation-li" @click="handleMenuClick('edit')">重命名</span>
+      <span class="levitation-li" @click="handleMenuClick('remove')">删除</span>
    </div>
+  </el-popover>
 </template>
 <style lang="scss" scoped>
@@ -1848,7 +1744,7 @@ watch(showLevel4, (newVal, oldVal) => {
      background: #FFFBF2;
      border: 1px solid rgba(255, 241, 212, 1);
      border-radius: 4px;
-      margin: 5px 0px 8px;
+      margin: 16px 0px 8px;
      padding: 2px 0px;
      .tip-icon {
@@ -1902,6 +1798,30 @@ watch(showLevel4, (newVal, oldVal) => {
 :deep(.el-table) {
  td.el-table__cell {
+    .cell-tool {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .cell_text_group {
+        display: flex;
+        .el-checkbox {
+          height: 24px;
+          line-height: 24px;
+        }
+        .cell_text {
+          margin-left: 4px;
+          line-height: 24px;
+        }
+      }
+      .list-more {
+        cursor: pointer;
+      }
+    }
    &.edit_cell {
      padding: 4px 0;
@@ -1911,6 +1831,11 @@ watch(showLevel4, (newVal, oldVal) => {
        .input_cell {
          position: relative;
+          .el-input .el-input__inner {
+            text-align: right;
+            height: 24px;
+          }
          >span {
            position: absolute;
            left: 0;
@@ -1919,6 +1844,13 @@ watch(showLevel4, (newVal, oldVal) => {
        }
      }
    }
+    &.inverse_cell {
+      .cell_text_group {
+        display: block;
+        width: 100%;
+      }
+    }
  }
  .el-table__footer-wrapper tr td {
@@ -1926,5 +1858,15 @@ watch(showLevel4, (newVal, oldVal) => {
      text-align: right;
    }
  }
+  .el-table__footer-wrapper tfoot td.el-table__cell {
+    background: #FFF1D4;
+  }
+}
+:deep(.el-popper) {
+  &.tree-item-edit-menu {
+    transform: translateX(-10px);
+  }
 }
 </style>