n20-common-lib 2.9.43 → 2.9.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.9.43",
+  "version": "2.9.44",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/ApprovalButtons/index.vue

@@ -2,6 +2,15 @@
 <template>
   <div :class="prefixCls">
     <el-form ref="approveBtnGroup" label-position="right" :label-width="_lang === 'zh' ? '6em' : '10em'">
+      <div v-if="taskId && showBtn" class="m-b-s">
+        <show-other-att-new
+          v-if="authList.includes('isShowOtherAtt')"
+          ref="showOtherAttNew"
+          :task-id="taskId"
+          :form="customizationDtos"
+        />
+      </div>
+
       <div v-if="taskId && showBtn" class="flex-box">
         <el-form-item v-if="authList.includes('isCarboncopy')" :label="'抄送' | $lc" class="flex-1 m-b-s">
           <el-input
@@ -80,6 +89,7 @@
           </div>
         </el-form-item>
       </div>
+
       <div class="flex-box">
         <template v-if="taskId && showBtn">
           <show-app-opi
@@ -123,7 +133,7 @@
           :file-url.sync="fileUrl"
           :on-success="onSuccess"
           :on-remove="onRemove"
-          action="/api/neams/eamsbaserecord/batchSavejson"
+          action="/neams/eamsbaserecord/batchSavejson"
           msg-type="message"
         />
       </el-form-item>
@@ -253,6 +263,7 @@ import CarboncopyProp from './setCarboncopyProp.vue'
 import RejectToProp from './setRejectToProp.vue'
 import ShowAppOpi from './showAppOpi.vue'
 import ShowOtherAtt from './showOtherAttr.vue'
+import ShowOtherAttNew from './showOtherAttrNew.vue'
 import { toExaminePath } from './specialHandle'
 const prefixCls = 'n20-approval-Button'
 // window._approvalExtend = { 'addtask.chdUserInfo.extend': {}, 'appOpi.queryAppOpiAndUser.exist': undefined, 'card.countermand.suggestion': false }
@@ -269,7 +280,8 @@ export default {
     CarboncopyProp,
     RejectToProp,
     ShowAppOpi,
-    ShowOtherAtt
+    ShowOtherAtt,
+    ShowOtherAttNew
   },
   props: {
     message: {
@@ -370,6 +382,7 @@ export default {
       opiAndUser: false,
       addTaskMode: '0',
       otherAtt: {},
+      customizationDtos: {},
       fileDtos: [],
       fileName: '',
       fileUrl: '',
@@ -538,6 +551,10 @@ export default {
     // 获取提交参数
     getParam() {
       let { typeCode, taskId, groupNo, isAgentcy, isCheck } = this.$route.query
+      let customizationDtos
+      if (this.authList.includes('isShowOtherAtt')) {
+        customizationDtos = this.$refs['showOtherAttNew']?.getOtherAttData()
+      }
       return [
         {
           typeCode,
@@ -556,6 +573,7 @@ export default {
           addTaskType: this.addTaskType,
           addTaskTag: this.addTaskTag,
           addTaskWay: this.addTaskWay,
+          customizationDtos,
           ...this.otherAtt
         }
       ]
@@ -649,6 +667,7 @@ export default {
       this.approvalFn()
     },
     async checkFlowFn() {
+      debugger
       if (this.requiredC && !this.messageC) {
         return this.errMsgFn(
           this.authList.includes('byAddTask') && this.addTaskList.length > 0 ? $lc('加签') : $lc('批准')

package/src/components/ApprovalButtons/showOtherAttrNew.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="w-100p flex-box">
+    <div v-for="(item, i) in otherAttData" :key="i" class="flex-box">
+      <el-form-item class="m-r-ss m-b-s" :label="item.cfgName">
+        <el-input v-if="item.cfgType === '11'" v-model="item.cfgVal" class="flex-item" clearable />
+        <el-select
+          v-if="['21'].includes(item.cfgType)"
+          v-model="item.cfgVal"
+          class="flex-item"
+          clearable
+          @change="(val) => changeFn(val, item)"
+        >
+          <el-option v-for="(row, i) in JSON.parse(item.cfgJson)" :key="i" :label="row.value" :value="row.code" />
+        </el-select>
+        <el-select
+          v-if="['31'].includes(item.cfgType)"
+          v-model="selectList"
+          multiple
+          collapse-tags
+          class="flex-item"
+          clearable
+          @change="(val) => changeFn(val, item)"
+        >
+          <el-option v-for="(row, i) in JSON.parse(item.cfgJson)" :key="i" :label="row.value" :value="row.code" />
+        </el-select>
+        <el-radio-group v-if="item.cfgType === '22'" v-model="item.cfgVal" @change="(val) => changeFn(val, item)">
+          <el-radio v-for="(row, i) in JSON.parse(item.cfgJson)" :key="i" :label="row.code">{{ row.value }}</el-radio>
+        </el-radio-group>
+        <el-checkbox-group v-if="item.cfgType === '32'" v-model="checkList" @change="(val) => changeFn(val, item)">
+          <el-checkbox v-for="(row, i) in JSON.parse(item.cfgJson || '[]')" :key="i" :label="row.code">{{
+            row.value
+          }}</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+export default {
+  props: {
+    taskId: {
+      type: [String, Number],
+      default: ''
+    },
+    form: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      checkList: [],
+      selectList: [],
+      otherAttData: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      axios.post(`/bems/admin/customization/${this.taskId}`, null, { loading: false }).then(({ data }) => {
+        if (data && data.length) {
+          this.otherAttData = data || []
+        }
+      })
+    },
+    changeFn(val, item) {
+      if (['31', '32'].includes(item.cfgType)) {
+        const cfgJson = JSON.parse(item.cfgJson)
+        item.cfgText = val
+          ?.map((s) => cfgJson?.find((row) => row.code === s)?.value)
+          ?.filter((s) => s)
+          .join(',')
+        item.cfgVal = val?.join(',')
+      }
+      if (['22', '21'].includes(item.cfgType)) {
+        const cfgJson = JSON.parse(item.cfgJson)
+        item.cfgText = cfgJson.find((row) => row.code === val)?.value
+        item.cfgVal = val
+      }
+    },
+    getOtherAttData() {
+      return this.otherAttData?.map((item) => {
+        return {
+          cfgName: item.cfgName,
+          cfgKey: item.cfgKey,
+          cfgVal: item.cfgVal,
+          cfgText: item.cfgText
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style></style>

package/src/components/ApprovalCard/index.vue

@@ -63,7 +63,7 @@
               </div>
               <div v-if="item.showConnect === '1'" class="m-l-s">
                 <span class="pointer color-ccc f-s-s" @click="seeDetail(item)"
-                  >查看详情 <i class="el-icon-arrow-right"></i
+                  >{{ '查看详情' | $lc }} <i class="el-icon-arrow-right"></i
                 ></span>
               </div>
             </div>
@@ -85,7 +85,7 @@
 
               <div v-if="showChildTimeline" class="n20-approve-wrap-children">
                 <el-timeline :reverse="true">
-                  <el-timeline-item
+                  <div
                     v-for="(row, i) in approvalChildrenData"
                     :key="i"
                     :type="row | typeF(status)"
@@ -95,7 +95,7 @@
                       <div>{{ row.endTime | dataF }}</div>
                       <div>{{ row.endTime | timeF }}</div>
                     </div>
-                    <div>
+                    <template>
                       <div v-if="row.result === 0" class="flex-box flex-v">
                         <div
                           v-title="row.assignee"
@@ -160,14 +160,30 @@
                       <div v-if="row.addTaskName" class="n20-description-c m-t">
                         {{ '加签审批人：' | $lc }}{{ row.addTaskName }}
                       </div>
-                      <template v-if="row.resultName !== '撤回' || showCtdMsg">
+                      <div v-if="row.resultName !== '撤回' || showCtdMsg">
                         <div v-if="row.suggestion" class="n20-description-c n20-description-bgc m-t p-a-s">
                           <span v-if="row.result !== status.waiting">{{ '审批意见：' | $lc }}</span>
                           <span>{{ row.suggestion }} </span>
                         </div>
-                      </template>
-                    </div>
-                  </el-timeline-item>
+                        <div
+                          v-if="row.flowHistoryCfgs && row.flowHistoryCfgs.length"
+                          class="n20-description-c m-t p-a-s"
+                        >
+                          <span
+                            v-if="row.result !== status.waiting"
+                            class="color-primary pointer"
+                            @click="showFlowHistoryChild = !showFlowHistoryChild"
+                            >{{ '审查意见：' | $lc }} <i class="n20-icon-shouqizhedie f-s-m"></i
+                          ></span>
+                          <div v-show="showFlowHistoryChild" class="n20-description-bgc p-a-s">
+                            <div v-for="(s, i) in row.flowHistoryCfgs" :key="i">
+                              {{ s.cfgName }}：{{ s.cfgText ? s.cfgText : s.cfgVal }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </div>
                 </el-timeline>
               </div>
             </div>
@@ -175,6 +191,19 @@
               <span v-if="item.result !== status.waiting">{{ '审批意见：' | $lc }}</span>
               <span>{{ item.suggestion }} </span>
             </div>
+            <div v-if="item.flowHistoryCfgs && item.flowHistoryCfgs.length" class="n20-description-c m-t p-a-s">
+              <span
+                v-if="item.result !== status.waiting"
+                class="color-primary pointer"
+                @click="showFlowHistory = !showFlowHistory"
+                >{{ '审查意见：' | $lc }}<i class="n20-icon-shouqizhedie f-s-m"></i
+              ></span>
+              <div v-show="showFlowHistory" class="n20-description-bgc p-a-s">
+                <div v-for="(s, i) in item.flowHistoryCfgs" :key="i">
+                  {{ s.cfgName }}：{{ s.cfgText ? s.cfgText : s.cfgVal }}
+                </div>
+              </div>
+            </div>
             <div v-if="item.flowHisFileList" class="n20-description-c n20-description-bgc m-t p-a-s">
               <span>{{ '附件信息' | $lc }}：</span>
               <div class="flex-box">
@@ -349,7 +378,9 @@ export default {
       previewName: '',
       previewSameOrg: false,
       seeTypes: /\.(jpg|png|gif|svg|pdf|swf|xlsx|xls|docx|doc)$/i,
-      seeRow: {}
+      seeRow: {},
+      showFlowHistory: false,
+      showFlowHistoryChild: false
     }
   },
   async created() {
@@ -362,7 +393,7 @@ export default {
     async seeDetail(item) {
       const { appUrl = {} } = await getJsonc('activiti/server-config.jsonc', null, true)
       if (appUrl[item._details.appNo]) {
-        let path = appUrl[item._details.appNo] + $l('/') + item._details.typeCode
+        let path = appUrl[item._details.appNo] + '/' + item._details.typeCode
         linkPush(path, {
           taskId: item._details.taskId,
           typeCode: item._details.typeCode,
@@ -408,7 +439,8 @@ export default {
           showConnect: item.showConnect, // 是否显示查看详情
           _details: item,
           deptName: item.deptName, // 部门
-          addTaskTag: item.addTaskTag // 加签备注
+          addTaskTag: item.addTaskTag, // 加签备注
+          flowHistoryCfgs: item.flowHistoryCfgs // 自定义字段
         }
         if (_item.addTaskTag && this.remarkOpt?.length === 0) {
           this.getMdmDataDoc()

package/src/components/DynamicField/DynamicFieldMixin.js

@@ -84,7 +84,8 @@ const obj = {
               type: item2.fieldType,
               label: item2.fieldName,
               requiredFlag: item2.isMust,
-              remark: item2.remark
+              remark: item2.remark,
+              options: item2.fieldValue
             }
           }
         })

package/src/components/DynamicField/DynamicFieldOptions.vue

@@ -6,7 +6,7 @@
         <el-button v-if="type === 1" size="mini" type="primary" @click="option('新增')">新增</el-button>
         <el-button v-if="type === 1" size="mini" type="danger" plain @click="option('删除')">删除</el-button>
         <!-- <el-button v-if="type === 1" size="mini" plain @click="option('导出')">导出</el-button> -->
-        <el-button size="mini" icon="n20-icon-caidan" plain onlyicon @click="option('转换')" />
+        <el-button v-if="hasTransform" size="mini" icon="n20-icon-caidan" plain onlyicon @click="option('转换')" />
       </div>
     </div>
     <transition name="el-zoom-in-center">
@@ -23,6 +23,27 @@
           <vxe-column slot="order" title="排序" width="60px" align="center">
             <i class="n20-icon-tuodong draggable-button"></i>
           </vxe-column>
+          <!-- 取值规则 -->
+          <vxe-column
+            slot="fieldValue"
+            slot-scope="{ column }"
+            v-bind="column"
+            :field="column.prop"
+            :title="column.label"
+          >
+            <template slot-scope="{ row, $rowIndex }">
+              <el-input
+                v-if="row.fieldType !== 'select'"
+                v-model="row[column.prop]"
+                placeholder="请输入"
+                size="normal"
+                clearable
+              />
+              <el-button v-else type="text" size="small" @click="pz(row, $rowIndex)">{{
+                row[column.prop] || '配置'
+              }}</el-button>
+            </template>
+          </vxe-column>
           <vxe-column slot="input" slot-scope="{ column }" v-bind="column" :field="column.prop" :title="column.label">
             <el-input v-model="row[column.prop]" slot-scope="{ row }" placeholder="请输入" size="normal" clearable />
           </vxe-column>
@@ -81,6 +102,9 @@
       <el-button type="primary" @click="option('保存')">保存</el-button>
       <el-button plain @click="option('重置')">重置</el-button>
     </div>
+    <cl-dialog v-drag :visible.sync="visible" title="数据来源" :destroy-on-open="true">
+      <content-pop v-model="selectFieldValue" :visible.sync="visible" @save="dialogSave" />
+    </cl-dialog>
   </cl-page>
 </template>
 
@@ -90,11 +114,16 @@ import customFormOptionsData from './jsonData/customFormOptionsData.json'
 import DynamicField from './DynamicField.vue'
 import DynamicFieldMixin from './DynamicFieldMixin.js'
 import { deepClone } from './utils'
+import contentPop from './contentPop.vue'
 export default {
   name: 'DynamicFieldOptions',
-  components: { DynamicField },
+  components: { DynamicField, contentPop },
   mixins: [DynamicFieldMixin],
   props: {
+    hasTransform: {
+      type: Boolean,
+      default: false
+    },
     showItems: {
       type: Array,
       default: () => {
@@ -137,16 +166,18 @@ export default {
   },
   data() {
     return {
+      visible: false,
       fieldType: [
         { code: 'input', name: '输入框' },
         { code: 'input-number', name: '金额输入框' },
-        { code: 'input-number-range', name: '金额区间' },
-        { code: 'input-rate-range', name: '利率区间' },
         { code: 'select', name: '下拉框' },
         { code: 'selectMultiple', name: '多选下拉框' },
         { code: 'date-picker', name: '日期选择' },
-        { code: 'textarea', name: '大文本' },
-        { code: 'searchinput', name: '搜索框' }
+        { code: 'textarea', name: '大文本' }
+        // 这三种暂时不开放
+        /*   { code: 'input-number-range', name: '金额区间' },
+        { code: 'input-rate-range', name: '利率区间' },
+        /*  { code: 'searchinput', name: '搜索框' } */
       ],
       type: 1,
       selectData: [],
@@ -237,7 +268,7 @@ export default {
         },
 
         {
-          slotName: 'input',
+          slotName: 'fieldValue',
           label: '取值规则',
           prop: 'fieldValue',
           align: 'center',
@@ -266,7 +297,9 @@ export default {
       checkColumns: [],
       formValue: {},
       form: [],
-      rules: {}
+      rules: {},
+      selectFieldValue: [],
+      selectIndex: {}
     }
   },
   computed: {},
@@ -288,6 +321,20 @@ export default {
     })
   },
   methods: {
+    pz(row, index) {
+      this.selectFieldValue = row.fieldValue || []
+      this.selectIndex = index
+      this.visible = true
+    },
+    dialogSave(value) {
+      this.visible = false
+      this.tableData[this.selectIndex].fieldValue = value.map((item) => {
+        return {
+          label: item.label,
+          value: item.value
+        }
+      })
+    },
     // 处理控件类型
     setFieldType() {
       this.options.fieldType.forEach((item) => {
@@ -321,13 +368,6 @@ export default {
       console.log(this.tableData)
       this.form = this.transform(this.tableData).form
       this.formValue = this.transform(this.tableData).formValue
-      this.setType('select', {
-        options: [
-          { value: '1', label: '网银' },
-          { value: '2', label: '网关' },
-          { value: '3', label: '其他' }
-        ]
-      })
       this.setRules()
     },
     option(key) {

package/src/components/DynamicField/contentPop.vue

@@ -0,0 +1,105 @@
+<template>
+  <cl-page class="contentPop">
+    <div class="flex-box flex-lr flex-v m-b-s">
+      <div></div>
+      <div>
+        <el-button type="primary" size="mini" @click="option('新增')">新增</el-button>
+      </div>
+    </div>
+    <cl-table-pro ref="xTable" :loading="loading" :data="value" :columns="TableHeader" :height="'300px'">
+      <vxe-column slot="input" slot-scope="{ column }" v-bind="column" :field="column.prop" :title="column.label">
+        <el-input v-model="row[column.prop]" slot-scope="{ row }" placeholder="请输入" size="normal" clearable />
+      </vxe-column>
+      <vxe-column slot="delete" slot-scope="{ column }" v-bind="column" :field="column.prop" :title="column.label">
+        <el-link
+          slot-scope="{ row, $rowIndex }"
+          class="m-r-s"
+          :underline="false"
+          icon="n20-icon-a-shanchuxuanzhong"
+          @click="option('删除', row, $rowIndex)"
+        />
+      </vxe-column>
+    </cl-table-pro>
+
+    <div slot="footer" class="page-button-shadow flex-box flex-c flex-v">
+      <el-button type="primary" @click="option('保存')">保存</el-button>
+      <!-- <el-button plain @click="option('重置')">重置</el-button> -->
+    </div>
+  </cl-page>
+</template>
+
+<script>
+export default {
+  name: 'ContentPop',
+  components: {},
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      TableHeader: [
+        /*         {
+          type: 'checkbox',
+          static: 'pre' // 静态不被"显示列"显示的,且最终会被拼接到"显示列"排序后的表格的"前面"
+        }, */
+        {
+          type: 'seq',
+          label: '序号',
+          width: '56',
+          align: 'center'
+        },
+        {
+          slotName: 'input',
+          label: '枚举名',
+          prop: 'label',
+          align: 'left',
+          minWidth: '120',
+          'show-overflow-tooltip': true
+        },
+        {
+          slotName: 'input',
+          label: '枚举值',
+          prop: 'value',
+          width: '260'
+        },
+        {
+          slotName: 'delete',
+          width: '50'
+        }
+      ],
+      loading: false
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    option(key, row, index) {
+      switch (key) {
+        case '删除':
+          this.value.splice(index, 1)
+          break
+        case '新增':
+          this.value.push({})
+          break
+        case '保存':
+          this.$emit('save', this.value)
+          break
+        default:
+          break
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.contentPop {
+  font-size: 14px;
+}
+</style>

package/src/components/ShowColumn/index copy.vue

@@ -0,0 +1,566 @@
+<template>
+  <dialog-wrap
+    ref="dialog"
+    v-drag
+    class="p-t-0"
+    v-bind="$attrs"
+    :visible.sync="visible"
+    :title="title"
+    :width="width"
+    :close-on-click-modal="false"
+    @open="popOpen"
+  >
+    <div class="dialog-view">
+      <div class="flex-box">
+        <div class="left-c flex-column p-t-m bd-r">
+          <div class="flex-box flex-v p-r m-b">
+            <span>{{ header }}</span>
+            <span class="m-l-m color-999">
+              {{ '已选' | $lc }}
+              <span class="color-main">{{ dragList.length }}</span>
+            </span>
+            <el-link :underline="false" type="primary" class="m-l-auto" @click="setAll">{{
+              setState ? $lc('全部清空') : $lc('全部选中')
+            }}</el-link>
+          </div>
+          <div class="flex-item p-r" style="height: 50%; overflow: auto">
+            <el-checkbox-group :value="dragListN.map((d) => d[labelKey])">
+              <template v-if="!columnsGroups">
+                <el-checkbox
+                  v-for="(column, i) in columnsAs"
+                  :key="i"
+                  v-hover-tooltip="column[labelKey]"
+                  :label="column[labelKey]"
+                  :disabled="column.checked"
+                  class="m-t"
+                  @change="(val) => checkChange(val, column)"
+                  >{{ column[labelKey] }}</el-checkbox
+                >
+              </template>
+              <template v-else>
+                <div v-for="gp in columnsGroups" :key="gp.groupId" class="m-b">
+                  <div class="f-s-b font-w600">{{ gp.groupName }}</div>
+                  <template v-for="(column, i) in columnsAs">
+                    <el-checkbox
+                      v-if="column.groupId === gp.groupId"
+                      :key="i"
+                      v-hover-tooltip="column[labelKey]"
+                      :label="column[labelKey]"
+                      :disabled="column.checked"
+                      class="m-t"
+                      @change="(val) => checkChange(val, column)"
+                      >{{ column[labelKey] }}</el-checkbox
+                    >
+                  </template>
+                </div>
+              </template>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div v-if="!hasPX" class="right-c flex-column p-t-m">
+          <div class="m-b">
+            {{ '当前选定项' | $lc }}
+            <el-link type="primary" style="visibility: hidden">{{ '当前选定项' | $lc }}</el-link>
+          </div>
+          <div class="flex-1 overflow-y">
+            <drag-list :list="dragList" :label-key="labelKey" :in-show-column="true" />
+          </div>
+        </div>
+        <div v-else class="right-tree flex-column p-t-m">
+          <div class="m-b flex-box flex-lr flex-v">
+            {{ '当前选定项' | $lc }}
+            <el-link class="m-r-s" :underline="false" icon="n20-icon-xinzeng" @click="add">{{
+              '新增字段' | $lc
+            }}</el-link>
+          </div>
+          <el-tree
+            ref="menu-tree"
+            class="menu-tree"
+            :data="dragList"
+            :props="{
+              children: 'children',
+              label: 'label'
+            }"
+            node-key="prop"
+            draggable
+            style="width: 200px"
+            :allow-drop="allowDrop"
+          >
+            <span slot-scope="{ node, data }" class="menu-item flex-item flex-box flex-lr flex-v">
+              <span>
+                <i class="n20-drag-icon n20-icon-tuodong"></i>
+                <span
+                  :class="data.isNew ? 'color-success' : 'color-primary'"
+                  class="text-ellipsis pointer"
+                  @click="clickItem(data)"
+                  >{{ data.label }}</span
+                >
+              </span>
+              <el-link
+                class="n20-icon-shanchu"
+                :underline="false"
+                :disabled="data.checked"
+                @click.stop="() => removeMenu(node, data)"
+              />
+            </span>
+          </el-tree>
+        </div>
+      </div>
+    </div>
+    <dialogWrap
+      v-drag
+      :visible.sync="configVisible"
+      :title="'表头设置' | $lc"
+      width="350px"
+      :close-on-click-modal="false"
+    >
+      <el-form :model="configModel">
+        <el-form-item>
+          {{ configModel.label }}
+        </el-form-item>
+        <el-form-item
+          :label="'表头宽度' | $lc"
+          :rules="[
+            {
+              type: 'number',
+              trigger: ['change', 'blur'],
+              validator: validator
+            }
+          ]"
+          prop="width"
+        >
+          <el-input v-model="configModel.width" class="w-224" />
+        </el-form-item>
+        <el-form-item :label="'是否折行' | $lc">
+          <el-radio-group v-model="configModel.wrap">
+            <el-radio :label="true">{{ $lc('是') }}</el-radio>
+            <el-radio :label="false">{{ $lc('否') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="'是否加粗' | $lc">
+          <el-radio-group v-model="configModel.bold">
+            <el-radio :label="true">{{ $lc('是') }}</el-radio>
+            <el-radio :label="false">{{ $lc('否') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="'对齐方式' | $lc">
+          <el-radio-group v-model="configModel.align">
+            <el-radio :label="'right'">{{ $lc('右对齐') }}</el-radio>
+            <el-radio :label="'left'">{{ $lc('左对齐') }}</el-radio>
+            <el-radio :label="'center'">{{ $lc('居中对齐') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="primary" @click="configSave">{{ '确定' | $lc }}</el-button>
+      </div>
+    </dialogWrap>
+    <dialogWrap v-drag :visible.sync="configVisibleN" :title="'新增' | $lc" width="350px" :close-on-click-modal="false">
+      <el-form :model="configModelN">
+        <el-form-item :label="'名称' | $lc" required>
+          <el-input v-model="configModelN.label" class="input-w" :placeholder="'请输入' | $lc" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="primary" @click="configSaveN">{{ '确定' | $lc }}</el-button>
+      </div>
+    </dialogWrap>
+    <div slot="footer" class="text-c">
+      <el-button type="primary" @click="setChange">{{ '确定' | $lc }}</el-button>
+      <el-button plain @click="reset">{{ '恢复默认' | $lc }}</el-button>
+    </div>
+  </dialog-wrap>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+import { $lc } from '../../utils/i18n/index'
+
+import { Message } from 'element-ui'
+import forEachs from '../../utils/forEachs'
+import dialogWrap from '../Dialog/index.vue'
+import dragList from '../DragList/index.vue'
+export default {
+  name: 'ShowColumn',
+  components: { dialogWrap, dragList },
+  inheritAttrs: false,
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    columnsGroups: {
+      type: Array,
+      default: undefined
+    },
+    checkColumns: {
+      type: Array,
+      default: () => []
+    },
+    isExport: {
+      type: Boolean,
+      default: false
+    },
+    isFilter: {
+      type: Boolean,
+      default: false
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    pageId: {
+      type: String,
+      default: undefined
+    },
+    autoSave: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: '1000px'
+    },
+    hasPX: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dragList: [],
+      configVisible: false,
+      enabled: false,
+      configModel: {
+        wrap: false,
+        bold: false,
+        align: 'center'
+      },
+      configModelN: {
+        label: '',
+        prop: '',
+        width: 120,
+        isNew: true,
+        children: []
+      },
+      userNo: sessionStorage.getItem('userNo'),
+      configVisibleN: false,
+      dragListN: []
+    }
+  },
+  computed: {
+    title() {
+      if (this.isExport) {
+        return $lc('导出')
+      } else if (this.isFilter) {
+        return $lc('筛选')
+      } else {
+        return $lc('设置显示列')
+      }
+    },
+    header() {
+      if (this.isExport) {
+        return $lc('导出')
+      } else if (this.isFilter) {
+        return $lc('筛选')
+      } else {
+        return $lc('显示列')
+      }
+    },
+    visible: {
+      get() {
+        return this.dialogVisible
+      },
+      set(val) {
+        this.$emit('update:dialogVisible', val)
+      }
+    },
+    setState() {
+      return this.columnsAs.length && this.columnsAs.length === this.dragListN.length
+    },
+    columnsAs: {
+      get() {
+        return this.columns.filter((col) => !col.static)
+      },
+      set(val) {
+        return val
+      }
+    }
+  },
+  watch: {
+    dragList: {
+      handler() {
+        let arr = []
+        forEachs(this.dragList, (item) => {
+          arr.push(item)
+        })
+        this.dragListN = arr
+        /* const newArr = arr.filter((item) => {
+          return item.isNew
+        })
+        newArr.forEach((item) => {
+          const index = this.columns.findIndex((col) => col.prop === item.prop || col.label === item.label)
+          if (index === -1) {
+            this.columns.push(item)
+          }
+        }) */
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    validator(rule, value, callback) {
+      if (value) {
+        if (value > 300) {
+          return callback(new Error($lc('输入最大宽度不能大于300')))
+        } else if (!/^[1-9]\d*$/.test(value)) {
+          return callback(new Error($lc('表头宽度只能输入正整数')))
+        }
+      }
+      callback()
+    },
+    add() {
+      this.configVisibleN = true
+      this.configModelN.prop = `prop${Date.now()}`
+    },
+    configSaveN() {
+      if (!this.configModelN.label) {
+        return this.$message.warning($lc('请填写名称'))
+      }
+      const hasLabel = this.dragListN.find((item) => {
+        return item.label === this.configModelN.label
+      })
+      if (hasLabel) {
+        return this.$message.warning($lc('已有重名字段,请修改'))
+      }
+      this.dragList.unshift(this.configModelN)
+      // this.columns = [this.configModelN, ...this.columns]
+      this.$message.success($lc('添加成功'))
+      this.configVisibleN = false
+      this.configModelN = {
+        label: '',
+        prop: '',
+        width: 120,
+        isNew: true,
+        children: []
+      }
+    },
+    removeMenu(node, data) {
+      const parent = node.parent
+      const children = parent.data.children || parent.data
+      const index = children.findIndex((d) => d.prop === data.prop)
+      children.splice(index, 1)
+    },
+    allowDrop(draggingNode, dropNode, type) {
+      if (type === 'inner' && draggingNode.data.isNew) {
+        return !(draggingNode.level <= dropNode.level)
+      } else if (type === 'inner' && !draggingNode.data.isNew) {
+        return !(draggingNode.level <= dropNode.level && !dropNode.data.isNew)
+      } else {
+        return true
+      }
+    },
+    clickItem(item) {
+      this.configModel = item
+      this.configVisible = true
+    },
+    configSave() {
+      this.configVisible = false
+    },
+    popOpen() {
+      // 深拷贝一下，防止修改
+      this.dragList = JSON.parse(JSON.stringify(this.checkColumns)).filter((col) => !col.static)
+    },
+    setAll() {
+      if (this.setState) {
+        this.dragList = this.dragList.filter((c) => c.checked)
+      } else {
+        this.dragList = [...this.columnsAs]
+      }
+    },
+    checkChange(val, column) {
+      if (val === false) {
+        let index = this.dragList.findIndex((d) => d[this.labelKey] === column[this.labelKey])
+        index !== -1 && this.dragList.splice(index, 1)
+      } else {
+        let index = this.dragListN.findIndex((d) => d[this.labelKey] === column[this.labelKey])
+        if (index !== -1) {
+          Message.warning($lc(`子级请在右侧删除!`))
+          return false
+        }
+        this.dragList.push(column)
+      }
+    },
+    reset() {
+      let dragList = this.columns.filter((col) => col.isDefault)
+      this.dragList = dragList.length ? dragList : this.checkColumns.filter((col) => !col.static)
+    },
+    setChange() {
+      if (this.dragList.length < 1) {
+        this.$message.error(
+          `${$lc(`至少设置`)}${
+            this.isExport ? $lc('一列导出数据') : this.isFilter ? $lc('一个筛选条件') : $lc('一列显示列')
+          }!`
+        )
+        return
+      }
+
+      let list = []
+      let preCols = this.columns.filter((col) => col.static === 'pre')
+      let nextCols = this.columns.filter((col) => col.static === 'next')
+      list.push(...preCols, ...this.dragList, ...nextCols)
+      // 新增校验
+      if (!this.isExport) {
+        let state = list.findIndex((c) => c.isNew && c.children && c.children.length === 0)
+        if (state !== -1) {
+          Message.warning($lc(`新增字段必须包含子级!`))
+          return false
+        }
+      }
+      // 自动保存设置的显示列
+      this.userNo = sessionStorage.getItem('userNo')
+      !this.isExport && this.autoSave && this.saveColumns(list)
+      if (this.isExport) {
+        this.visible = false
+         this.$emit('setColumns', list)
+      }
+    },
+    saveColumns(list) {
+      let columns = saveTransform(list, this.labelKey, this.isFilter)
+      axios.post(
+        '/bems/prod_1.0/user/pageHabit',
+        {
+          userNo: this.userNo,
+          pageId: this.pageId,
+          showStructure: JSON.stringify(columns)
+        },
+        { loading: false }
+      ).then(() => {
+        this.getColumns(this.pageId).then(list => {
+               this.visible = false
+        this.$emit('setColumns', list)
+      })
+      })
+    },
+    getColumns(pageId) {
+      return getColumns(pageId || this.pageId, this.userNo, this.columns, this.labelKey)
+    }
+  }
+}
+
+function saveTransform(list, labelKey, isFilter) {
+  let listN = []
+  if (!isFilter) {
+    list.forEach((c) => {
+      if (c.prop && !c.children && !c.isNew && !c.width & !c.isNew) {
+        listN.push({ _colKey: 'prop', _colVal: c.prop })
+      } else if (c.slotName) {
+        listN.push({ _colKey: 'slotName', _colVal: c.slotName })
+      } else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
+        listN.push({ _colKey: 'type', _colVal: c.type })
+      } else {
+        let sFn = false
+        for (let k in c) {
+          // if (typeof c[k] === 'function') sFn = true
+        }
+        if (sFn && c[labelKey]) {
+          listN.push({ _colKey: labelKey, _colVal: c[labelKey] })
+        } else {
+          listN.push(c)
+        }
+      }
+    })
+  } else {
+    list.forEach((c) => {
+      if (c.value) {
+        listN.push({ _colKey: 'value', _colVal: c.value })
+      } else if (c.startValue) {
+        listN.push({ _colKey: 'startValue', _colVal: c.startValue })
+      } else if (c.startDate) {
+        listN.push({ _colKey: 'startDate', _colVal: c.startDate })
+      } else if (c.slotName) {
+        listN.push({ _colKey: 'slotName', _colVal: c.slotName })
+      } else {
+        listN.push(c)
+      }
+    })
+  }
+  return listN
+}
+
+function getTransform(list, columnsT, labelKey = 'label') {
+  let columns = []
+
+  list.forEach((d) => {
+    // 如果list中的每一项是字符串
+    if (typeof d === 'string') {
+      // 从columnsT中找到label等于d的项
+      let column = columnsT.find((c) => c[labelKey] === d)
+      // 如果找到，则将其添加到columns中
+      column && columns.push(column)
+      // 如果list中的每一项是对象
+    } else if (typeof d === 'object') {
+      if (d.children) {
+        d.children.forEach((item, index) => {
+          let column = columnsT.find((c) => c.prop === d.children[index].prop)
+          // 如果找到，则将其添加到columns中
+        if (column.formatter) {
+          d.children[index].formatter = column.formatter
+        }
+        })
+        columns.push(d)
+      } else {
+      // 如果d中有_colKey属性
+      if (d._colKey) {
+        // 从columnsT中找到d._colKey等于d._colVal的项
+        let column = columnsT.find((c) => c[d._colKey] === d._colVal)
+        // 如果找到，则将其添加到columns中
+        column && columns.push(column)
+        // 如果d中没有_colKey属性
+      } else {
+        let column = columnsT.find((c) => c.prop === d.prop)
+        d.formatter = column.formatter
+        // 将d添加到columns中
+        columns.push(d)
+        }
+      }
+    }
+  })
+    console.log(columns)
+  // 返回columns
+  return columns
+}
+
+// 这段代码在筛选组件中复用
+export function getColumns(pageId, userNo, columnsT, labelKey = 'label') {
+  return new Promise((resolve, reject) => {
+    axios
+      .post(
+        '/bems/prod_1.0/user/pageHabit/list',
+        {
+          userNo: userNo,
+          pageId: pageId
+        },
+        { loading: false }
+      )
+      .then(({ data }) => {
+        if (data) {
+          let _data = JSON.parse(data)
+          if (_data && _data.length > 0) {
+            let columns = getTransform(_data, columnsT, labelKey)
+            return resolve(columns)
+          }
+        }
+        return resolve(null)
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
+</script>

package/src/i18n.json

@@ -1669,6 +1669,11 @@
     "th": "ดูแผนภาพกระบวนการ",
     "vi": "Xem biểu đồ luồng"
   },
+  "查看详情": {
+    "en": "View details",
+    "th": "ดูรายละเอียด",
+    "vi": "Xem chi tiết"
+  },
   "请输入应用[": {
     "en": "Please enter an application [",
     "th": "โปรดป้อนแอปพลิเคชัน [",