优化关联

src/views/comment-excel/components/ExcelOperate/ExcelOperate.vue

@@ -571,8 +571,10 @@ const confirmConnect = () => {
   addConnect(list)
 }
 const addConnect = async (list: any) => {
+  const connectFiled = []
+  const beConnectFiled = []
   list.forEach((item: any) => {
-    currentConnectInfo.connectFiled.push({
+    connectFiled.push({
       title: item.title,
       sheet: item.sheet,
       row: item.row,
@@ -584,7 +586,7 @@ const addConnect = async (list: any) => {
       script: item.script
     })
 
-    currentConnectInfo.beConnectFiled.push({
+    beConnectFiled.push({
       title: item.betitle,
       sheet: item.besheet,
       row: item.berow,
@@ -596,6 +598,8 @@ const addConnect = async (list: any) => {
       script: item.bescript
     })
   })
+  currentConnectInfo.beConnectFiled = beConnectFiled
+  currentConnectInfo.connectFiled = connectFiled
   currentConnectInfo.fileId = getFileInfo.value.orderFileId
 
   const { data } = await addExcelAreaConnect(currentConnectInfo)
@@ -606,8 +610,10 @@ const addConnect = async (list: any) => {
   }
   ElMessage.success('添加成功！')
   connectVisible.value = false
+  // 添加成功，重新获取数据
+  queryConnectList()
   // 添加成功 手动更新页面数据
-  connectList.value.push(data.result)
+  // connectList.value.push(data.result)
 }
 const chooseConnect = (row: any) => {
   currentConnectInfo.excelAreaId = row.excelAreaId
@@ -628,60 +634,61 @@ const beConnectSelectOptions = computed(
 )
 watch(connectVisible, (val) => {
   if (val) {
-    // 编辑重新复制
-    if (currentConnectInfo.excelAreaConnectId) {
-      // 按照顺序来赋值connectFiled -> beConnectFiled
-      const connectFiled = cachConnectEditInfo.value?.connectFiled || []
-      const beConnectFiled = cachConnectEditInfo.value?.beConnectFiled
-      connectConfigData.value = connectFiled.map((item, i) => {
-        const beConnectFiledItem = beConnectFiled[i]
-        console.log(beConnectFiledItem, '----')
-        return {
-          title: item.title,
-          sheet: item.sheet,
-          row: item.row,
-          colum: item.colum,
-          numFlag: item.numFlag,
-          numTitle: item.numTitle,
-          only: item.only,
-          script: item.script,
-          scriptName: item.scriptName,
-          bescriptName: beConnectFiledItem.scriptName,
-          bescript: beConnectFiledItem.script,
-          betitle: beConnectFiledItem.title,
-          berow: beConnectFiledItem.row,
-          becolum: beConnectFiledItem.colum,
-          besheet: beConnectFiledItem.sheet,
-          benumFlag: beConnectFiledItem.numFlag,
-          benumTitle: beConnectFiledItem.numTitle,
-          beonly: beConnectFiledItem.only
-        }
-      })
-    } else {
-      const titles = areaList.value.find(
-        (v: any) => v.excelAreaId == currentConnectInfo.excelAreaId
-      )?.excelAreaTitle
-
-      connectConfigData.value = titles.map((item: any) => {
-        return {
-          title: item.title,
-          sheet: item.sheet,
-          row: item.row,
-          colum: item.colum,
-          numFlag: item.numFlag,
-          numTitle: item.numTitle,
-          only: item.only,
-
-          betitle: '',
-          berow: '',
-          becolum: '',
-          besheet: '',
-          benumFlag: '',
-          benumTitle: '',
-          beonly: ''
+    const titles = areaList.value.find((v: any) => v.excelAreaId == currentConnectInfo.excelAreaId)
+      ?.excelAreaTitle
+
+    connectConfigData.value = titles.map((item: any) => {
+      // 全部列，并且匹配已经绑定的列
+      if (currentConnectInfo.excelAreaConnectId) {
+        // 按照顺序来赋值connectFiled -> beConnectFiled
+        const connectFiled = cachConnectEditInfo.value?.connectFiled || []
+        const beConnectFiled = cachConnectEditInfo.value?.beConnectFiled
+
+        const index = connectFiled.findIndex(
+          (v) => v.row == item.row && v.colum == item.colum && v.title == item.title
+        )
+        if (index > -1) {
+          const beConnectFiledItem = beConnectFiled[index]
+          return {
+            title: item.title,
+            sheet: item.sheet,
+            row: item.row,
+            colum: item.colum,
+            numFlag: item.numFlag,
+            numTitle: item.numTitle,
+            only: item.only,
+            script: item.script,
+            scriptName: item.scriptName,
+            bescriptName: beConnectFiledItem.scriptName,
+            bescript: beConnectFiledItem.script,
+            betitle: beConnectFiledItem.title,
+            berow: beConnectFiledItem.row,
+            becolum: beConnectFiledItem.colum,
+            besheet: beConnectFiledItem.sheet,
+            benumFlag: beConnectFiledItem.numFlag,
+            benumTitle: beConnectFiledItem.numTitle,
+            beonly: beConnectFiledItem.only
+          }
         }
-      })
-    }
+      }
+      return {
+        title: item.title,
+        sheet: item.sheet,
+        row: item.row,
+        colum: item.colum,
+        numFlag: item.numFlag,
+        numTitle: item.numTitle,
+        only: item.only,
+
+        betitle: '',
+        berow: '',
+        becolum: '',
+        besheet: '',
+        benumFlag: '',
+        benumTitle: '',
+        beonly: ''
+      }
+    })
   }
 })
 

src/views/var/varExcel/components/ExcelOperate/ExcelOperate.vue

@@ -57,8 +57,12 @@
           <p class="font-bold">区域关联信息</p>
           <vxe-table border :data="connectList" size="mini" height="200">
             <vxe-column title="关联名称" field="varAreaId_dictText" min-width="100"></vxe-column>
-            <vxe-column title="别关联名称" field="varAreaBeId_dictText" min-width="100"></vxe-column>
-            <vxe-column title="关联字段"  min-width="100">
+            <vxe-column
+              title="别关联名称"
+              field="varAreaBeId_dictText"
+              min-width="100"
+            ></vxe-column>
+            <vxe-column title="关联字段" min-width="100">
               <template #default="{ row, $rowIndex }">
                 {{ connectFiledStr(row.connectFiled) }}
               </template>
@@ -70,6 +74,10 @@
             </vxe-column>
             <vxe-column title="操作" field="action" width="80">
               <template #default="{ row, $rowIndex }">
+                <el-link style="font-size: 12px" type="primary" @click="editConnect(row, $rowIndex)"
+                  >修改</el-link
+                >
+                <el-divider direction="vertical"></el-divider>
                 <el-link style="font-size: 12px" type="danger" @click="delConnect(row, $rowIndex)"
                   >删除</el-link
                 >
@@ -105,11 +113,7 @@
 
         <el-button type="primary" size="small" @click="toRun">执行解析</el-button>
         <el-button type="primary" size="small" @click="copy">复制</el-button>
-        <el-button
-          :loading="pasteLoading"
-          type="primary"
-          size="small"
-          @click="pasteConfig"
+        <el-button :loading="pasteLoading" type="primary" size="small" @click="pasteConfig"
           >引入</el-button
         >
       </div>
@@ -154,6 +158,7 @@
         class="mt-2"
         size="mini"
         :data="connectConfigData"
+        @hide="onHideSettingConnect"
         border
         height="400"
         ref="xTableConnect"
@@ -161,16 +166,16 @@
         <vxe-column type="checkbox" width="40"></vxe-column>
         <vxe-column title="关联title" field="title"></vxe-column>
 
-        <vxe-column title="关联脚本" width = "300px">
+        <vxe-column title="关联脚本" width="300px">
           <template #default="{ row }">
-          <el-select
+            <el-select
               size="small"
-              style="width: 100%;"
+              style="width: 100%"
               v-model="row.scriptName"
               @change="(e) => scriptChange(row, e)"
               clearable
             >
-            <el-option
+              <el-option
                 v-for="item in scriptList"
                 :key="item.srciptName"
                 :value="item.srciptName"
@@ -179,7 +184,7 @@
             </el-select>
             <el-input
               type="textarea"
-              style="width: 100%;margin-top: 2px;"
+              style="width: 100%; margin-top: 2px"
               rows="5"
               v-model="row.script"
             ></el-input>
@@ -196,16 +201,16 @@
           </template>
         </vxe-column>
 
-        <vxe-column title="被关联脚本" width = "300px">
+        <vxe-column title="被关联脚本" width="300px">
           <template #default="{ row }">
-          <el-select
+            <el-select
               size="small"
-              style="width: 100%;"
+              style="width: 100%"
               v-model="row.bescriptName"
               @change="(e) => scriptBeChange(row, e)"
               clearable
             >
-            <el-option
+              <el-option
                 v-for="item in scriptList"
                 :key="item.srciptName"
                 :value="item.srciptName"
@@ -214,7 +219,7 @@
             </el-select>
             <el-input
               type="textarea"
-              style="width: 100%;margin-top: 2px;"
+              style="width: 100%; margin-top: 2px"
               rows="5"
               v-model="row.bescript"
             ></el-input>
@@ -273,9 +278,13 @@
           <template #default="{ row }">{{ row['数据区'] }}</template>
         </vxe-column>
         <template v-for="item in runResultTitle" :key="item">
-          <vxe-column :title="item" :field="item" cell-type="string"
-          show-overflow
-          width="150"></vxe-column>
+          <vxe-column
+            :title="item"
+            :field="item"
+            cell-type="string"
+            show-overflow
+            width="150"
+          ></vxe-column>
         </template>
       </vxe-table>
     </vxe-modal>
@@ -311,12 +320,10 @@ import {
   removeExcelArea,
   removeExcelAreaConnect,
   addExcelArea,
-batchAddVarExcelArea
+  batchAddVarExcelArea
 } from '@/api/varExcel'
 
-import {
-  apiGetScript
-} from '@/api/excel'
+import { apiGetScript } from '@/api/excel'
 
 import type { Recordable } from '@/types/global'
 import { filterRunData2, getRangetxt, setRangeBackground } from '@/utils/excel'
@@ -324,7 +331,7 @@ import type { VxeTableInstance } from 'vxe-table'
 import EditArea from '../EditArea/EditArea.vue'
 import { deleteExcelProdFileConfByIds, getExcelProdFileConfPage } from '@/api/product'
 
-const pasteLoading = ref(false);
+const pasteLoading = ref(false)
 const connectVisible = ref(false)
 const showProdCompare = ref(false)
 const xTableConnect = ref<VxeTableInstance>()
@@ -351,6 +358,7 @@ const currentConnectInfo = reactive<Recordable>({
   beConnectFiled: [],
   fileId: ''
 })
+const cachConnectEditInfo = ref({})
 const runDataTable = ref<VxeTableInstance>()
 const cachCurrentConnectInfo = reactive<Recordable>({})
 const cachCurrentBeConnectInfo = reactive<Recordable>({})
@@ -401,7 +409,7 @@ const areaTypeLen = computed(() => {
 const scriptChange = (item, e) => {
   if (e) {
     // console.log(e)
-   item.script = scriptList.value.find((item1) => item1.srciptName == e)?.scriptContent
+    item.script = scriptList.value.find((item1) => item1.srciptName == e)?.scriptContent
   } else {
     item.script = ''
   }
@@ -409,13 +417,12 @@ const scriptChange = (item, e) => {
 }
 
 const scriptBeChange = (item, e) => {
-
-if (e) {
-  item.bescript = scriptList.value.find((item1) => item1.srciptName == e)?.scriptContent
-} else {
-  item.bescript = ''
-}
-item.beshow = true
+  if (e) {
+    item.bescript = scriptList.value.find((item1) => item1.srciptName == e)?.scriptContent
+  } else {
+    item.bescript = ''
+  }
+  item.beshow = true
 }
 
 const deletePic = () => {
@@ -428,7 +435,7 @@ const initExcelAreaMarksKey = (len: number) => {
 }
 const connectFiledStr = (row: any) => {
   // console.log(row)
-  return row.map(item => item.title).join(', ');
+  return row.map((item) => item.title).join(', ')
 }
 
 const onSaveSuccess = (data: any) => {
@@ -480,9 +487,7 @@ const cellClick = ({ row }) => {
 const delAreaMark = async (row: any) => {
   // 判断当前区域是否关联了其他区域
   if (
-    connectList.value.find(
-      (v) => row.varAreaId == v.varAreaId || row.varAreaId == v.varAreaBeId
-    )
+    connectList.value.find((v) => row.varAreaId == v.varAreaId || row.varAreaId == v.varAreaBeId)
   ) {
     return ElMessage.warning('当前区域绑定与其他区域绑定了关联信息，请先删除关联信息之后再做修改！')
   }
@@ -517,9 +522,7 @@ const currentAreaMark = reactive({})
 const toModify = (row) => {
   // 判断当前区域是否关联了其他区域
   if (
-    connectList.value.find(
-      (v) => row.varAreaId == v.varAreaId || row.varAreaId == v.varAreaBeId
-    )
+    connectList.value.find((v) => row.varAreaId == v.varAreaId || row.varAreaId == v.varAreaBeId)
   ) {
     return ElMessage.warning('当前区域绑定与其他区域绑定了关联信息，请先删除关联信息之后再做修改！')
   }
@@ -586,8 +589,10 @@ const confirmConnect = () => {
   addConnect(list)
 }
 const addConnect = async (list: any) => {
+  const connectFiled = []
+  const beConnectFiled = []
   list.forEach((item: any) => {
-    currentConnectInfo.connectFiled.push({
+    connectFiled.push({
       title: item.title,
       sheet: item.sheet,
       row: item.row,
@@ -599,7 +604,7 @@ const addConnect = async (list: any) => {
       script: item.script
     })
 
-    currentConnectInfo.beConnectFiled.push({
+    beConnectFiled.push({
       title: item.betitle,
       sheet: item.besheet,
       row: item.berow,
@@ -611,6 +616,8 @@ const addConnect = async (list: any) => {
       script: item.bescript
     })
   })
+  currentConnectInfo.beConnectFiled = beConnectFiled
+  currentConnectInfo.connectFiled = connectFiled
   currentConnectInfo.fileId = getFileInfo.value.varFileId
 
   const { data } = await addExcelAreaConnect(currentConnectInfo)
@@ -621,8 +628,8 @@ const addConnect = async (list: any) => {
   }
   ElMessage.success('添加成功！')
   connectVisible.value = false
-  // 添加成功 手动更新页面数据
-  connectList.value.push(data.result)
+
+  queryConnectList()
 }
 const chooseConnect = (row: any) => {
   currentConnectInfo.varAreaId = row.varAreaId
@@ -641,6 +648,39 @@ watch(connectVisible, (val) => {
       ?.excelAreaTitle
 
     connectConfigData.value = titles.map((item: any) => {
+      // 全部列，并且匹配已经绑定的列
+      if (currentConnectInfo.excelAreaConnectId) {
+        // 按照顺序来赋值connectFiled -> beConnectFiled
+        const connectFiled = cachConnectEditInfo.value?.connectFiled || []
+        const beConnectFiled = cachConnectEditInfo.value?.beConnectFiled
+
+        const index = connectFiled.findIndex(
+          (v) => v.row == item.row && v.colum == item.colum && v.title == item.title
+        )
+        if (index > -1) {
+          const beConnectFiledItem = beConnectFiled[index]
+          return {
+            title: item.title,
+            sheet: item.sheet,
+            row: item.row,
+            colum: item.colum,
+            numFlag: item.numFlag,
+            numTitle: item.numTitle,
+            only: item.only,
+            script: item.script,
+            scriptName: item.scriptName,
+            bescriptName: beConnectFiledItem.scriptName,
+            bescript: beConnectFiledItem.script,
+            betitle: beConnectFiledItem.title,
+            berow: beConnectFiledItem.row,
+            becolum: beConnectFiledItem.colum,
+            besheet: beConnectFiledItem.sheet,
+            benumFlag: beConnectFiledItem.numFlag,
+            benumTitle: beConnectFiledItem.numTitle,
+            beonly: beConnectFiledItem.only
+          }
+        }
+      }
       return {
         title: item.title,
         sheet: item.sheet,
@@ -648,19 +688,23 @@ watch(connectVisible, (val) => {
         colum: item.colum,
         numFlag: item.numFlag,
         numTitle: item.numTitle,
-        only:item.only,
-       
+        only: item.only,
+
         betitle: '',
         berow: '',
         becolum: '',
         besheet: '',
         benumFlag: '',
         benumTitle: '',
-        beonly:''
+        beonly: ''
       }
     })
   }
 })
+const onHideSettingConnect = () => {
+  // 清空
+  cachConnectEditInfo.value = {}
+}
 const changeBeConnect = (v: string, row: any) => {
   const option = beConnectSelectOptions.value.find((item: any) => item.title == v)
   row.becolum = option.colum
@@ -703,6 +747,28 @@ const chooseConnectOnHide = () => {
     // fileId: ''
   })
 }
+// 初始化修改关联信息
+const editConnect = async (row: any, index: number) => {
+  console.log(row)
+
+  currentConnectInfo.excelAreaConnectId = row.excelAreaConnectId
+  currentConnectInfo.excelAreaBeId = row.excelAreaBeId
+  currentConnectInfo.varAreaId = row.varAreaId
+  Object.assign(cachConnectEditInfo.value, unref(row))
+
+  // cachCurrentConnectInfo 保存关联数据
+  Object.assign(
+    cachCurrentConnectInfo,
+    unref(areaList.value?.find((item) => item.varAreaId == row.varAreaId))
+  )
+  // cachCurrentBeConnectInfo 保存被关联数据
+  Object.assign(
+    cachCurrentBeConnectInfo,
+    unref(areaList.value?.find((item) => item.varAreaId == row.excelAreaBeId))
+  )
+
+  connectVisible.value = true
+}
 const delConnect = async (row: any, index: number) => {
   const { data } = await removeExcelAreaConnect(row.varAreaConnectId)
   if (data?.success) {
@@ -876,7 +942,7 @@ const toDelete = async (row) => {
 /**
  * 复制
  */
- const copy = () => {
+const copy = () => {
   if (areaList.value?.length) {
     return localStorage.setItem('copyVarID', getFileInfo.value.varFileId)
   }
@@ -909,15 +975,14 @@ const pasteConfig = async () => {
 
     // 4、刷新
     ElMessage({
-      type:'success',
-      message: '引入成功！重新加载...',
+      type: 'success',
+      message: '引入成功！重新加载...'
     })
 
     // 5、刷新当前页 or 刷新当前excel
     setTimeout(() => {
-      window.location.reload();
-    }, 1500);
-    
+      window.location.reload()
+    }, 1500)
   } catch {
     ElMessage.error('引入失败！')
   }