@brms/ai-skills 0.1.0

package/skills/brms-vxe-plus-developer/references/vxe-plus-knowledge/sources/project/base/src/views/A1/P1/A1P11011.vue

@@ -0,0 +1,444 @@
+<!--
+ * @Description: 数据采集详情
+ * @Autor: 池樱千幻
+ * @Change: 池樱千幻
+ * @Date: 2025-04-07 14:57:17
+ * @LastEditTime: 2026-03-12 14:50:14
+-->
+<template>
+  <bx-container auto :title="title">
+    <div class="bx-container">
+      <div v-if="pageComponentType !== 'FORM'" class="flex flex-col flex-1">
+        <VxePlusTable
+          v-if="showTable" id="A1P1101001_result" ref="xGrid" :columns="columns"
+          :service-config="serviceConfig" :form-config="formConfig" :show-checkbox="true"
+          :toolbar-buttons="toolbarButtons" :is-edit="dataCollectStatus === '10'" :is-import="true" :is-export-template="true"
+          :export-config="exportConfig" v-on="gridEvents"
+        />
+        <div v-else v-loading="!showTable" class="flex flex-1 items-center justify-center" />
+      </div>
+
+      <div v-if="pageComponentType === 'FORM'" class="flex flex-col flex-1">
+        <VxePlusForm v-if="showTable" ref="xForm" :form-options="formOptions" :form-events="formEvents" />
+      </div>
+    </div>
+  </bx-container>
+</template>
+
+<script setup lang="ts">
+import { EiBlock, EiCommunicator, EiInfo } from '@eplat/ei'
+import { onMounted, reactive, ref } from 'vue'
+import type { VxeGridProps } from 'vxe-table'
+import type { VxeFormProps } from 'vxe-pc-ui'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useDialog } from '@vxe-plus/components'
+import { multiply } from 'xe-utils'
+import { useTable } from '@/hooks/useTable'
+import vxeTableDialog from '@/views/A1/P1/vxeTableDialog.vue'
+import { getCodeSetByService } from '@/utils/eiTools'
+import { convertToCamelCase } from '@/utils'
+import { isEmpty } from '@/utils/is'
+import YearDialog from '@/views/A1/P2/dialog/Year/index.vue'
+
+const route = useRoute()
+
+const showTable = ref(false)
+
+const xGrid = ref<any>(null)
+const xForm = ref<any>(null)
+const pageComponentType = ref('FORM')
+const title = ref('记录集')
+const dataCollectStatus = ref('10')
+let columns: any = null
+
+const exportConfig = reactive({
+  fileName: '导入模板',
+})
+
+const formOptions = ref<VxeFormProps<any>>({})
+
+const { p1DataCollectHeadId, dataItemCode } = route.query as any
+
+const formConfig = reactive({
+  data: {
+    p1DataCollectHeadId,
+  },
+})
+
+const formData = ref<any>({})
+// table按钮列表
+const btnList: any = [
+  { name: '新增', code: 'add', status: 'primary', dataCollectStatus: '10' },
+  { name: '复制历史数据', code: 'copy_his', status: 'primary', dataCollectStatus: '10' },
+  { name: '删除', code: 'del', status: 'error', dataCollectStatus: '10' },
+  { name: '保存', code: 'SAVE', status: 'success', dataCollectStatus: '10' },
+  { name: '确认', code: 'confirm', status: 'success', dataCollectStatus: '10' },
+  { name: '取消确认', code: 'cancelConfirm', status: 'warning', dataCollectStatus: '40' },
+]
+
+const toolbarButtons = ref<NonNullable<VxeGridProps['toolbarConfig']>['buttons']>([
+])
+const info = new EiInfo()
+
+let inquStatusBlock = new EiBlock('inqu_status')
+
+/**
+ * @description: 根据fieldAttrJson获取配置
+ * @param {*} item
+ * @return {*}
+ * @author: 池樱千幻
+ */
+function getJsonByfieldAttrJson(item: any) {
+  if (!item.fieldAttrJson) {
+    return {}
+  }
+  try {
+    const json = JSON.parse(item.fieldAttrJson)
+    const obj: any = {}
+    if (json.width) {
+      obj.width = json.width
+    }
+    obj.visible = true
+    if (json.visible) {
+      obj.visible = json.visible !== '0'
+    }
+    if (json.isEdit) {
+      obj.isEdit = json.isEdit !== '0'
+    }
+
+    if (item.fieldLabel === 'select') {
+      obj.codeSet = json.codeSet
+      obj.condition = json?.selectConfig?.condition
+      if (json.cascadeConfig) {
+        obj.cascadeFields = json.cascadeConfig.cascadeFields
+        obj.cascadePromiseFnFields = json.cascadeConfig.cascadePromiseFnFields
+        obj.cascadePromiseFnItemFields = json.cascadeConfig.cascadePromiseFnItemFields
+        obj.cascadePromiseFn = (params: any) => getCodeSetByService({
+          serviceName: json.cascadeConfig.api.split('.')[0],
+          methodName: json.cascadeConfig.api.split('.')[1],
+          params,
+          label: json.cascadeConfig.label,
+          value: json.cascadeConfig.value,
+        })
+      }
+      if (json.selectConfig) {
+        obj.fields = json.selectConfig.fields
+        obj.selectFields = json.selectConfig.selectFields
+      }
+      if (json.codeSetType === 'api') {
+        const ei = new EiInfo()
+        if (json.condition) {
+          Object.keys(json.condition).forEach((str) => {
+            ei.set(str, json.condition[str])
+          })
+        }
+        obj.promiseFn = () => getCodeSetByService({
+          serviceName: json.codeSet.split('.')[0],
+          methodName: json.codeSet.split('.')[1],
+          params: ei,
+          label: json.optionLabel,
+          value: json.optionValue,
+        })
+        obj.codeSet = `com.brms.custom.${item.fieldSort}`
+      }
+    }
+    if (item.fieldLabel === 'dialog') {
+      obj.componentParam = json.dialogConfig.componentParam
+      obj.fields = json.dialogConfig.fields
+      obj.dialogFields = json.dialogConfig.dialogFields
+    }
+    return obj
+  }
+  catch (error) {
+    console.error('getJsonByfieldAttrJson error: ', error)
+    return {}
+  }
+}
+
+function initTable() {
+  if (p1DataCollectHeadId) {
+    showTable.value = false
+    info.addBlock(EiBlock.build('inqu_status', [{ p1DataCollectHeadId }]))
+    EiCommunicator.send('A1P11020', 'queryDetail', info).then((res: EiInfo) => {
+      inquStatusBlock = res.getBlock('inqu_status')
+      const currentOpt = res.getBlock('result1').getMappedRows()[0]
+      const inqu_status = res.getBlock('inqu_status').getMappedRows()[0]
+      dataCollectStatus.value = inqu_status.dataCollectStatus
+      pageComponentType.value = currentOpt.pageComponentType
+      toolbarButtons.value = btnList.filter((item: any) => {
+        return item.dataCollectStatus === dataCollectStatus.value
+      }).map((item: any) => {
+        return {
+          name: item.name,
+          content: item.name,
+          code: item.code,
+          status: item.status,
+        }
+      })
+
+      let result2 = res.getBlock('result2').getMappedRows()
+      // 先将 fieldLabel : "titleLabel" 的数据过滤并单独提出
+      const titleLabel = result2.find(item => item.fieldLabel === 'titleLabel')
+      title.value = titleLabel?.fieldName
+      exportConfig.fileName = titleLabel?.fieldName
+
+      result2 = result2.filter(item => item.fieldLabel !== 'titleLabel' && item.fieldLabel !== 'seq')
+      if (pageComponentType.value !== 'FORM') {
+        const result2Columns: any = result2.map((item) => {
+          let isEdit = dataCollectStatus.value === '10'
+          const field = convertToCamelCase(item.fieldCode || '')
+          const json = getJsonByfieldAttrJson(item)
+          if (json.isEdit !== undefined) {
+            isEdit = json.isEdit
+          }
+          console.log('json: ', json)
+          if (item.fieldLabel === 'percentage') {
+            return {
+              width: json.width || 120,
+              field,
+              title: item.fieldName,
+              editType: 'percentage',
+              visible: json.visible,
+              isEdit,
+              formatter: ({ cellValue }) => !isEmpty(cellValue) ? `${multiply(Number.parseFloat(cellValue), 100)}%` : '',
+            }
+          }
+          if (item.fieldLabel === 'input') {
+            return {
+              width: json.width || 120,
+              field,
+              title: item.fieldName,
+              editType: 'input',
+              visible: json.visible,
+              isEdit,
+            }
+          }
+          if (item.fieldLabel === 'seq') {
+            return {
+              type: 'seq',
+              width: 60,
+              editType: 'input',
+            }
+          }
+          if (item.fieldLabel === 'select') {
+            return {
+              field,
+              title: item.fieldName,
+              isEdit,
+              visible: json.visible,
+              editRender: {
+                name: 'tableSelect',
+                props: {
+                  ...json,
+                },
+              },
+            }
+          }
+          if (item.fieldLabel === 'dialog') {
+            if (json.componentParam) {
+              json.componentParam.dataCollectYear = inqu_status.dataCollectYear
+            }
+            return {
+              field,
+              title: item.fieldName,
+              isEdit,
+              editRender: {
+                name: 'tableSelectDialog',
+                props: {
+                  component: vxeTableDialog,
+                  ...json,
+                  title: `${title.value}-${item.fieldName}`,
+                },
+              },
+            }
+          }
+          return {
+            field,
+            title: item.fieldName,
+            editType: 'input',
+            isEdit,
+            visible: json.visible,
+          }
+        })
+        console.log('result2Columns', result2Columns)
+        columns = useTable().createColumns(result2Columns)
+      }
+      else {
+        const result = res.getBlock('result').getMappedRows()
+
+        formData.value = result2.reduce((acc, item) => {
+          const field = convertToCamelCase(item.fieldCode)
+          acc[field] = result[0] ? result[0][field] : ''
+          return acc
+        }, result[0] || {})
+
+        const items: any = result2.map((item) => {
+          return {
+            field: convertToCamelCase(item.fieldCode),
+            title: item.fieldName,
+            itemRender: { name: 'BxInputPercentage' },
+          }
+        })
+        const formBtnList = [
+          { content: '保存', name: 'SAVE', status: 'primary', dataCollectStatus: '10' },
+          { content: '确认', name: 'confirm', status: 'primary', dataCollectStatus: '10' },
+          { content: '取消确认', name: 'cancelConfirm', status: 'primary', dataCollectStatus: '40' },
+        ]
+        items.push({
+          span: 24,
+          align: 'center',
+          itemRender: {
+            name: 'VxeButtonGroup',
+            options: formBtnList.filter((item: any) => {
+              return item.dataCollectStatus === dataCollectStatus.value
+            }),
+            props: {
+              onClick: ({ name }) => {
+                console.log('name: ', name)
+                if (name === 'SAVE') {
+                  formSave()
+                }
+                if (name === 'confirm') {
+                  formConfirm()
+                }
+                if (name === 'cancelConfirm') {
+                  formCancelConfirm()
+                }
+              },
+            },
+          },
+        })
+        formOptions.value = {
+          data: formData.value,
+          items,
+          readonly: dataCollectStatus.value === '40',
+        }
+      }
+
+      showTable.value = true
+      // inqu_status 主信息，result明细信息，result1 数据项（FORM或GRID），result2 列名信息
+    })
+  }
+}
+
+const serviceConfig = reactive({
+  serviceName: 'A1P11020',
+  queryMethod: 'queryDetail',
+})
+
+const { openDialog } = useDialog()
+
+const gridEvents = reactive({
+  toolbarButtonClick: async ({ code, $grid }: { code: string, $grid: any }) => {
+    if (code === 'copy_his') {
+      openDialog(YearDialog, {
+        title: '复制历史数据',
+        componentParam: {
+          selectMode: 'multi',
+          columns: columns.value.filter(k => k.visible ?? true).map((k) => {
+            return {
+              ...k,
+              width: '',
+            } as any
+          }),
+          param: {
+            dataItemCode,
+          },
+        },
+      }, async (checkedRows, exposed) => {
+        console.log('checkedRows', checkedRows)
+        await $grid.insertAt(checkedRows.map((row) => {
+          row.p1DataCollectHeadId = p1DataCollectHeadId
+          delete row.p1DataCollectLineId
+          return row
+        }))
+        exposed.close()
+      })
+    }
+    if (code === 'add') {
+      const { row: newRow } = await $grid.insertAt({
+      })
+      $grid.setEditRow(newRow)
+    }
+    if (code === 'cancelConfirm') {
+      formCancelConfirm()
+    }
+    if (code === 'confirm') {
+      formConfirm()
+    }
+    if (code === 'SAVE') {
+      const updateRecords = $grid.getUpdateRecords()
+      const insertRecords = $grid.getInsertRecords()
+      const saveInfo = new EiInfo()
+      saveInfo.addBlock(inquStatusBlock)
+
+      const saveRecords = [...updateRecords, ...insertRecords]
+      if (saveRecords.length > 0) {
+        saveInfo.addBlock(EiBlock.build('result', saveRecords.map((item: any) => {
+          return {
+            ...item,
+            p1DataCollectHeadId,
+          }
+        })))
+
+        await EiCommunicator.send('A1P11021', 'save', saveInfo)
+        ElMessage.success('保存成功')
+        $grid.commitProxy('query')
+      }
+      else {
+        ElMessage.warning('没有需要保存的数据')
+      }
+    }
+
+    if (code === 'del') {
+      const checkboxRecords = xGrid.value?.getCheckboxRecords()
+      if (!checkboxRecords.getBlock('result')) {
+        ElMessage.error('请选择要删除的记录')
+        return
+      }
+      ElMessageBox.confirm('确定删除吗？').then(() => {
+        EiCommunicator.send('A1P11021', 'delete', checkboxRecords).then(() => {
+          ElMessage.success('删除成功')
+          $grid.commitProxy('query')
+        })
+      })
+    }
+  },
+})
+
+async function formSave() {
+  const saveInfo = new EiInfo()
+  saveInfo.addBlock(inquStatusBlock)
+  saveInfo.addBlock(EiBlock.build('result', [{
+    ...formData.value,
+    p1DataCollectHeadId,
+  }]))
+  await EiCommunicator.send('A1P11021', 'save', saveInfo)
+  ElMessage.success('保存成功')
+  initTable()
+}
+
+async function formConfirm() {
+  await ElMessageBox.confirm('确定确认吗？')
+  await EiCommunicator.send('A1P11020', 'confirm', info)
+  ElMessage.success('确认成功')
+  initTable()
+}
+
+async function formCancelConfirm() {
+  await ElMessageBox.confirm('确定取消确认吗？')
+  await EiCommunicator.send('A1P11020', 'notConfirm', info)
+  ElMessage.success('取消确认成功')
+  initTable()
+}
+
+const formEvents = reactive({
+  'form-submit': formSave,
+})
+
+onMounted(() => {
+  initTable()
+})
+</script>
+
+<style scoped></style>