n20-common-lib 2.9.13 → 2.9.14

package/src/components/Dialog/index.vue

@@ -8,6 +8,10 @@ export default {
       type: Boolean,
       default: false
     },
+    destroyOnClose: {
+      type: Boolean,
+      default: true
+    },
     appendToBody: {
       type: Boolean,
       default: true

package/src/components/Diff/index.vue

@@ -1,6 +1,8 @@
 <template>
-  <div v-if="isEqual">
-    {{ value }}
+  <div v-if="isEqual" class="truncate">
+    <el-tooltip v-if="tooltip" :content="value" placement="top">
+      <span>{{ value }}</span>
+    </el-tooltip>
   </div>
   <div v-else class="n20-descriptions">
     <div class="m-b-ss">

package/src/components/DynamicField/DynamicField.vue

@@ -14,6 +14,9 @@
         <span v-if="item.tabNamehtml" v-html="item.tabNamehtml"></span>
         <span v-else>{{ item.tabName }}</span>
       </template>
+      <template slot="tips">
+        <slot :name="`tips_${index}`"></slot>
+      </template>
       <template v-if="item.slotName">
         <slot :name="item.slotName" :list="item.list"></slot>
       </template>
@@ -79,6 +82,7 @@
                       :max="formItem.max || 9999999999.99"
                       :min="formItem.min || formItem.min === 0 ? formItem.min : 0"
                       :d-num="formItem.dNum || formItem.dNum === 0 ? formItem.dNum : 2"
+                      :type="formItem.numberType || 'money'"
                       @change="(value) => $emit('valueChange', value, key)"
                     />
                   </template>
@@ -127,7 +131,9 @@
                       v-model="value[key]"
                       v-title
                       class="input-w"
-                      :placeholder="formItem.placeholder || (formItem.filterable ? '请输入关键词' : formItem.label)"
+                      :placeholder="
+                        formItem.placeholder || (formItem.filterable ? $lc('请输入关键词') : formItem.label)
+                      "
                       :remote-method="
                         (query) => formItem.remoteMethod && formItem.remoteMethod(query, { ...$attrs, item, value })
                       "
@@ -164,7 +170,9 @@
                     <el-select
                       v-model="value[key]"
                       class="input-w"
-                      :placeholder="formItem.placeholder || (formItem.filterable ? '请输入关键词' : formItem.label)"
+                      :placeholder="
+                        formItem.placeholder || (formItem.filterable ? $lc('请输入关键词') : formItem.label)
+                      "
                       :remote-method="
                         (query) => formItem.remoteMethod && formItem.remoteMethod(query, { ...$attrs, item, value })
                       "
@@ -204,7 +212,7 @@
                       class="input-w"
                       type="date"
                       value-format="yyyy-MM-dd"
-                      placeholder="请选择日期"
+                      :placeholder="$lc('请选择日期')"
                       :clearable="formItem.clearable === false ? false : true"
                       @change="(value) => $emit('valueChange', value, key)"
                     />
@@ -228,9 +236,13 @@
                       v-model="value[key]"
                       v-title
                       type="textarea"
-                      placeholder="请输入内容"
+                      :placeholder="$lc('请输入内容')"
                       :maxlength="formItem.maxlength || '150'"
-                      show-word-limit
+                      :show-word-limit="
+                        formItem.showWordLimit === null || formItem.showWordLimit === undefined
+                          ? true
+                          : formItem.showWordLimit
+                      "
                       v-bind="{ rows: 4, ...formItem }"
                       :clearable="formItem.clearable === false ? false : true"
                       @change="(value) => $emit('valueChange', value, key)"
@@ -255,7 +267,7 @@
                       filterable
                       remote
                       reserve-keyword
-                      placeholder="请输入"
+                      :placeholder="$lc('请输入')"
                       v-bind="formItem"
                       :remote-method="
                         (query) => formItem.remoteMethod && formItem.remoteMethod(query, { ...$attrs, item, value })
@@ -323,6 +335,12 @@
 </template>
 
 <script>
+import clAnchorItem from '../Anchor/AnchorItem.vue'
+import clInputNumber from '../InputNumber/index.vue'
+import clInputNumberRange from '../InputNumber/numberRange.vue'
+import clDatePicker from '../DatePicker/index.vue'
+import clDatePickerPor from '../DatePicker/por.vue'
+import clInputSearch from '../InputSearch/index.vue'
 /*
 1.初始化值 是否能出发change事件
 2.当前表单change 触发其他表单的修改（未在自身作用域）
@@ -330,6 +348,7 @@
 */
 export default {
   name: 'DynamicField',
+  components: { clInputSearch, clDatePickerPor, clDatePicker, clAnchorItem, clInputNumber, clInputNumberRange },
   filters: {
     formatValue(value, row) {
       switch (row.type) {
@@ -418,6 +437,10 @@ export default {
     validate(callback) {
       return this.$refs.form.validate(callback)
     },
+    // 表单单项校验
+    validateField(field, callback) {
+      return this.$refs.form.validateField(field, callback)
+    },
     // 表单重置方法
     resetFields() {
       return this.$refs.form.resetFields()

package/src/components/DynamicField/DynamicFieldMixin.js

@@ -1,3 +1,4 @@
+import { $lc } from '../../utils/i18n/index.js'
 const obj = {
   mounted() {
     this.setRules()
@@ -29,14 +30,20 @@ const obj = {
           if (item.list[key].requiredMessage) {
             msg = item.list[key].requiredMessage
           } else if (['select', 'date-picker', 'searchSelect', 'daterange'].includes(item.list[key].type)) {
-            msg = '请选择' + item.list[key].label
+            msg = $lc('请选择') + item.list[key].label
           } else {
-            msg = '请输入' + item.list[key].label
+            msg = $lc('请输入') + item.list[key].label
           }
-          rules[key] = [{ required: item.list[key].requiredFlag, message: msg, trigger: ['submit', 'change'] }]
+          rules[key] = [
+            {
+              required: item.list[key].requiredFlag && item.list[key].type,
+              message: msg,
+              trigger: ['submit', 'change']
+            }
+          ]
         }
       })
-      this.rules = { ...this.staticRules, ...rules }
+      this.rules = { ...rules, ...this.staticRules }
       this.$nextTick(() => {
         this.$refs.form && this.$refs.form.clearValidate()
       })
@@ -78,7 +85,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

@@ -5,8 +5,28 @@
         <el-button v-if="type === 1" icon="n20-icon-shuaxin" plain onlyicon size="mini" @click="getData" />
         <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="hasTransform" size="mini" plain onlyicon @click="option('下载Json配置')"
+          >下载Json配置</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"
+          v-title="'转换'"
+          size="mini"
+          icon="n20-icon-caidan"
+          plain
+          onlyicon
+          @click="option('转换')"
+        />
+        <el-button
+          v-if="hasTableOption"
+          v-title="'生成table配置'"
+          size="mini"
+          icon="n20-icon-wenjian"
+          plain
+          onlyicon
+          @click="option('生成table配置')"
+        />
       </div>
     </div>
     <transition name="el-zoom-in-center">
@@ -15,13 +35,34 @@
           ref="xTable"
           :loading="loading"
           :data="tableData"
-          :columns="TableHeader"
+          :columns="checkColumns"
           height="100%"
           class="m-t-s Tabledrag"
           @selection-change-method="handleSelectionChange"
         >
           <vxe-column slot="order" title="排序" width="60px" align="center">
-            <i class="n20-icon-tuodong"></i>
+            <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 />
@@ -81,20 +122,37 @@
       <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>
+    <tableView ref="tableView" />
   </cl-page>
 </template>
 
 <script>
+import ClPage from '../PageLayout/page.vue'
 import Sortable from 'sortablejs'
 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'
+import tableView from './tableView.vue'
+import ClDialog from '../Dialog/index.vue'
+import ClTablePro from '../TablePro/index.vue'
 export default {
   name: 'DynamicFieldOptions',
-  components: { DynamicField },
+  components: { DynamicField, contentPop, tableView, ClPage, ClDialog, ClTablePro },
   mixins: [DynamicFieldMixin],
   props: {
+    hasTransform: {
+      type: Boolean,
+      default: false
+    },
+    hasTableOption: {
+      type: Boolean,
+      default: false
+    },
     showItems: {
       type: Array,
       default: () => {
@@ -103,7 +161,7 @@ export default {
           '序号',
           '栏目',
           '字段名称',
-          '显示字段名称',
+          '是否在列表显示',
           '是否启用',
           '是否必填',
           '是否可编辑',
@@ -115,9 +173,11 @@ export default {
         ]
       }
     },
-    busKey: {
-      type: String,
-      default: ''
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
     },
     options: {
       type: Object,
@@ -135,16 +195,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: [],
@@ -193,14 +255,14 @@ export default {
           width: '150',
           'show-overflow-tooltip': true
         },
-        /* {
+        {
           slotName: 'check',
-          label: '是否多选',
-          prop: 'isMultiple',
+          label: '是否在列表显示',
+          prop: 'isTableShow',
           align: 'center',
           width: '120',
           'show-overflow-tooltip': true
-        }, */
+        },
         {
           slotName: 'check',
           label: '是否启用',
@@ -235,7 +297,7 @@ export default {
         },
 
         {
-          slotName: 'input',
+          slotName: 'fieldValue',
           label: '取值规则',
           prop: 'fieldValue',
           align: 'center',
@@ -264,20 +326,45 @@ export default {
       checkColumns: [],
       formValue: {},
       form: [],
-      rules: {}
+      rules: {},
+      selectFieldValue: [],
+      selectIndex: {}
     }
   },
   computed: {},
-  watch: {},
+  watch: {
+    value: {
+      handler(val) {
+        this.tableData = val
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   created() {},
   mounted() {
-    this.setFieldType()
     this.getData()
+    this.setFieldType()
     this.checkColumns = this.TableHeader.filter((item) => {
       return this.showItems.includes(item.label)
     })
   },
   methods: {
+    pz(row, index) {
+      this.selectFieldValue = row.fieldValue || []
+      this.selectIndex = index
+      this.title = '数据来源'
+      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) => {
@@ -302,24 +389,7 @@ export default {
       this.selectData = data
     },
     getData() {
-      if (!this.busKey) {
-        this.$message.warning('busKey缺失,请检查')
-        return false
-      }
-      /* this.$axios.get(`/test/dyfield/list/${this.busKey}`).then(res => {
-        const { code, data } = res
-        if (code !== 200) {
-          return false
-        }
-        this.tableData = data.map((item, index) => {
-          item.selectId = index
-          return item
-        })
-        this.initData()
-      }) */
-
-      this.tableData = customFormOptionsData.data
-      this.initData()
+      this.tableData = this.value
       this.$nextTick(() => {
         this.rowDrop()
       })
@@ -328,26 +398,39 @@ 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) {
+      // 将本地数据转换为 JSON 字符串
+      const jsonData = JSON.stringify(this.value, null, 2)
+      // 创建一个 Blob 对象
+      const blob = new Blob([jsonData], { type: 'application/json' })
+      // 创建一个下载链接
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
       const selectIds = this.selectData.map((item) => {
         return item.selectId
       })
       switch (key) {
+        case '下载Json配置':
+          a.href = url
+          a.download = '动态字段配置.json'
+          document.body.appendChild(a)
+          a.click()
+          // 释放 URL 对象
+          window.URL.revokeObjectURL(url)
+          document.body.removeChild(a)
+          break
+        case '生成table配置':
+          this.$refs.tableView.setView(this.tableData)
+          break
         case '转换':
           if (this.type === 2) {
             this.type = 1
           } else {
             this.type = 2
           }
+          this.initData()
           break
         case '新增':
           this.tableData.push({ selectId: this.tableData.length })
@@ -363,23 +446,12 @@ export default {
           break
         case '保存':
           if (this.type === 1) {
-            /* this.$axios
-              .post(
-                '/test/dyfield/save',
-                this.tableData.map((item, index) => {
-                  item.busKey = this.busKey
-                  item.sort = index
-                  return item
-                })
-              )
-              .then(res => {
-                const { code } = res
-                if (code !== 200) {
-                  return false
-                }
-                this.$message.success('保存成功')
-              }) */
-            this.initData()
+            const tableData = this.tableData.map((item, index) => {
+              item.busKey = this.busKey
+              item.sort = index
+              return item
+            })
+            this.$emit('save', tableData)
           } else {
             this.$refs['DynamicField'].validate((valid) => {
               if (valid) {
@@ -402,6 +474,7 @@ export default {
       const tbody = document.querySelector('.Tabledrag tbody')
       const _this = this
       Sortable.create(tbody, {
+        handle: '.draggable-button',
         onEnd({ newIndex, oldIndex }) {
           // 页面重新渲染
           const tableData = deepClone(_this.tableData)

package/src/components/DynamicField/DynamicTable.vue

@@ -296,9 +296,19 @@
 </template>
 
 <script>
+import clInputNumber from '../InputNumber/index.vue'
+import clDatePicker from '../DatePicker/index.vue'
+import clDatePickerPor from '../DatePicker/por.vue'
+import ClTablePro from '../TablePro/index.vue'
+
 export default {
   name: 'DynamicTable',
-  components: {},
+  components: {
+    ClTablePro,
+    clDatePickerPor,
+    clDatePicker,
+    clInputNumber
+  },
   props: {
     listName: {
       type: String,

package/src/components/DynamicField/contentPop.vue

@@ -0,0 +1,110 @@
+<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>
+import ClPage from '../PageLayout/page.vue'
+import ClTablePro from '../TablePro/index.vue'
+export default {
+  name: 'ContentPop',
+  components: {
+    ClPage,
+    ClTablePro
+  },
+  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 scoped>
+.contentPop {
+  font-size: 14px;
+}
+</style>

package/src/components/DynamicField/tableList.vue

@@ -75,10 +75,14 @@
 
 <script>
 import DynamicTable from './DynamicTable.vue'
+import clPage from '../PageLayout/page.vue'
+import clStatisItem from '../Statis/statisItem.vue'
 export default {
   name: 'TableList',
   components: {
-    DynamicTable
+    DynamicTable,
+    clPage,
+    clStatisItem
   },
   mixins: [],
   props: {