excel标注添加产品对照

src/components/UserModal/UserModal.vue

@@ -80,7 +80,9 @@ export default defineComponent({
       }
     )
 
-    const resetForm = () => {}
+    const resetForm = () => {
+      formState.nickName = ''
+    }
     const queryUser = async () => {
       loading.value = true
       try {

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

@@ -64,6 +64,32 @@
           </vxe-table>
         </div>
 
+        <div class="p-2 text-sm">
+          <p class="font-bold">产品对照</p>
+          <vxe-table border :data="compareData" show-overflow="tooltip" size="mini" height="300">
+            <vxe-column field="productId_dictText" title="产品名称" width="200"></vxe-column>
+            <vxe-column field="customerId_dictText" title="客户名称" width="200"></vxe-column>
+            <vxe-column field="excelFiled" title="产品描述" width="200"></vxe-column>
+            <vxe-column title="操作" width="50">
+              <template #default="{ row }">
+                <el-link type="danger" style="font-size: 12px" @click="toDelete(row)">删除</el-link>
+              </template>
+            </vxe-column>
+          </vxe-table>
+
+          <vxe-pager
+            size="small"
+            background
+            v-model:current-page="compareParams.currentPage"
+            v-model:page-size="compareParams.pageSize"
+            :total="compareParams.total"
+            @page-change="getCompareList"
+            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'Total']"
+          >
+          </vxe-pager>
+        </div>
+
+        <el-button type="primary" size="small" @click="setProdCompare">设置产品对照</el-button>
         <el-button type="primary" size="small" @click="toRun">执行解析</el-button>
       </div>
     </el-scrollbar>
@@ -175,12 +201,15 @@
         </template>
       </vxe-table>
     </vxe-modal>
+
+    <ProductCompare v-model:visible="showProdCompare" @success="getCompareList" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, reactive, unref, computed, watch, nextTick } from 'vue'
 import LuckyExcel from 'luckyexcel'
+import ProductCompare from '../ProductCompare/ProductCompare.vue'
 import SetArea from '../SetArea/SetArea.vue'
 import {
   areaMarksColor,
@@ -208,10 +237,18 @@ import type { Recordable } from '@/types/global'
 import { filterRunData, getRangetxt, setRangeBackground } from '@/utils/excel'
 import type { VxeTableInstance } from 'vxe-table'
 import EditArea from '../EditArea/EditArea.vue'
+import { deleteExcelProdFileConfByIds, getExcelProdFileConfPage } from '@/api/product'
 
 const connectVisible = ref(false)
+const showProdCompare = ref(false)
 const xTableConnect = ref<VxeTableInstance>()
 const beConnectTable = ref<VxeTableInstance>()
+const compareData = ref([])
+const compareParams = reactive({
+  pageSize: 10,
+  currentPage: 1,
+  total: 0
+})
 const luckysheet = (window as any).luckysheet
 const commentExcelStore = useCommentExcel()
 const { getFileInfo } = storeToRefs(commentExcelStore)
@@ -260,14 +297,17 @@ const initIsSetSheetMark = (length: number) => {
 const locaExcelAreaMarks: Recordable = reactive({})
 const areaList = computed(() => flatten(Object.values(locaExcelAreaMarks)))
 const areaTypeLen = computed(() => {
-  return areaList.value.reduce((pre, cur) => {
-    pre[cur.excelAreaType] += 1
-    return pre
-  }, {
-    data_area: 0,
-    public_area: 0,
-    attach_area: 0
-  })
+  return areaList.value.reduce(
+    (pre, cur) => {
+      pre[cur.excelAreaType] += 1
+      return pre
+    },
+    {
+      data_area: 0,
+      public_area: 0,
+      attach_area: 0
+    }
+  )
 })
 const initExcelAreaMarksKey = (len: number) => {
   Array.from({ length: len }).forEach((item, index) => {
@@ -282,6 +322,10 @@ const exportRunData = () => {
   runDataTable.value?.exportData({ type: 'csv' })
 }
 
+const setProdCompare = () => {
+  showProdCompare.value = true
+}
+
 const setSheetAuthority = (exportJson: any) => {
   exportJson.sheets.forEach((sheet: any) => {
     // 工作表格权限
@@ -671,20 +715,25 @@ const toRun = async () => {
   }
 }
 
-const filterObjKeys = (data: any) => {
-  return Object.keys(data).filter((v) => v !== '_X_ROW_KEY')
+const getCompareList = async () => {
+  const { data } = await getExcelProdFileConfPage(compareParams)
+  compareData.value = data.result.records
+  compareParams.total = +data.result.total
 }
-const expandConfig = reactive({
-  visibleMethod({ row }) {
-    if (typeof row.expendData === 'object') {
-      return true
-    }
-    return false
+
+const toDelete = async (row) => {
+  const { data } = await deleteExcelProdFileConfByIds(row.excelProductFiledConfId)
+  if (data.code === 200) {
+    ElMessage.success('删除成功！')
+    getCompareList()
+  } else {
+    ElMessage.error(data.message || '删除失败！')
   }
-})
+}
 
 onMounted(() => {
   loadExcel()
+  getCompareList()
   queryConnectList()
 })
 onUnmounted(() => {

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

+<template>
+  <vxe-modal
+    v-model="modalVisible"
+    title="设置产品对照"
+    @hide="onHide"
+    esc-closable
+    mask-closable
+    :show-footer="false"
+    :z-index="1003"
+  >
+    <el-form
+      ref="formRef"
+      size="small"
+      inline
+      label-width="80px"
+      :model="formState"
+      :rules="formRules"
+    >
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="产品名称" prop="productId_dictText">
+            <el-input v-model="formState.productId_dictText" disabled>
+              <template #append>
+                <el-button :icon="MoreFilled" @click="openModal('prod')" />
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="客户名称" prop="customerId_dictText">
+            <el-input v-model="formState.customerId_dictText" disabled>
+              <template #append>
+                <el-button :icon="MoreFilled" @click="openModal('cust')" />
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="产品单位" prop="customerUnit">
+            <el-input v-model="formState.customerUnit"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="单位" prop="unit">
+            <el-input v-model="formState.unit"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="换算值" prop="unitRatio">
+            <el-input type="number" v-model="formState.unitRatio"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="产品描述" prop="excelFiled">
+            <el-input
+              disabled
+              style="width: 250px"
+              type="textarea"
+              :rows="5"
+              v-model="formState.excelFiled"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center">
+        <el-button size="default" type="primary" @click="onSubmit" :loading="saveLoading"
+          >提交</el-button
+        >
+        <el-button size="default" @click="modalVisible = false">取消</el-button>
+      </el-row>
+    </el-form>
+  </vxe-modal>
+
+  <ProductModal v-model:visible="prodVisible" @confirm="(list) => confirmModal(list, 'prod')" />
+  <CustomerModal
+    v-model:visible="customerVisible"
+    @confirm="(list) => confirmModal(list, 'customer')"
+  />
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue'
+import ProductModal from '@/components/ProductModal/ProductModal.vue'
+import CustomerModal from '@/components/CustomerModal/CustomerModal.vue'
+import { MoreFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus';
+import { saveExcelProdFileConf } from '@/api/product';
+
+const props = defineProps(['visible'])
+const emits = defineEmits(['confirm', 'update:visible', 'success'])
+const formRef = ref()
+const modalVisible = ref(false)
+const prodVisible = ref(false)
+const customerVisible = ref(false)
+const saveLoading = ref(false)
+const luckysheet = (window as any).luckysheet
+const formRules = reactive({})
+const formState = reactive({
+  customerId: '',
+  productId: '',
+  customerId_dictText: '',
+  productId_dictText: '',
+  excelFiled: '',
+  customerUnit: '',
+  unit: '',
+  unitRatio: ''
+})
+watch(
+  () => props.visible,
+  (val) => {
+    modalVisible.value = val
+    if (val) {
+        formState.excelFiled = getText()
+    }
+  }
+)
+
+const getText = () => {
+    const rangeJson = luckysheet.getRangeJson()
+    const effectVal: any = []
+    rangeJson.forEach(item => {
+        const vs = Object.values(item)
+        effectVal.push(...vs.filter(v => !!v))
+    })
+   
+    return effectVal.join(';')
+}
+// 表单提交
+const onSubmit = async () => {
+  await formRef.value.validate()
+  saveLoading.value = true
+
+  try {
+    await saveExcelProdFileConf(formState)
+    ElMessage.success('操作成功！')
+    modalVisible.value = false
+    emits('success')
+  } catch {}
+  saveLoading.value = false
+}
+const onHide = () => {
+  // 重置表单
+  Object.assign(formState, {
+    customerId: '',
+    productId: '',
+    customerId_dictText: '',
+    productId_dictText: '',
+    excelFiled: '',
+    customerUnit: '',
+    unit: '',
+    unitRatio: ''
+  })
+  emits('update:visible', false)
+}
+const openModal = (type: string) => {
+  if (type == 'prod') {
+    prodVisible.value = true
+  } else {
+    customerVisible.value = true
+  }
+}
+const confirmModal = (list: any, type: string) => {
+  const [item] = list
+  if (type == 'prod') {
+    formState.productId = item.productId
+    formState.productId_dictText = item.productName
+  } else {
+    formState.customerId = item.customerId
+    formState.customerId_dictText = item.customerName
+  }
+}
+</script>
+<style lang="scss" scoped></style>