n20-common-lib 2.9.83 → 2.9.84

package/package.json

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

package/src/components/DynamicField/DynamicFieldOptions.vue

@@ -2,11 +2,56 @@
   <cl-page class="customFormOptions" style="height: calc(100% - 8px)">
     <div slot="header">
       <div class="flex-box flex-r m-t-s">
-        <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="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 v-if="hasTransform" 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,7 +60,7 @@
           ref="xTable"
           :loading="loading"
           :data="tableData"
-          :columns="TableHeader"
+          :columns="checkColumns"
           height="100%"
           class="m-t-s Tabledrag"
           @selection-change-method="handleSelectionChange"
@@ -39,17 +84,50 @@
                 size="normal"
                 clearable
               />
-              <el-button v-else type="text" size="small" @click="pz(row, $rowIndex)">{{
-                row[column.prop] || '配置'
-              }}</el-button>
+              <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
+            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="select" slot-scope="{ column }" v-bind="column" :field="column.prop" :title="column.label">
-            <el-select v-model="row[column.prop]" slot-scope="{ row }" placeholder="请选择" clearable filterable>
-              <el-option v-for="item in options[column.prop]" :key="item.code" :label="item.name" :value="item.code" />
+          <vxe-column
+            slot="select"
+            slot-scope="{ column }"
+            v-bind="column"
+            :field="column.prop"
+            :title="column.label"
+          >
+            <el-select
+              v-model="row[column.prop]"
+              slot-scope="{ row }"
+              placeholder="请选择"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in options[column.prop]"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
             </el-select>
           </vxe-column>
           <!-- 控件类型 -->
@@ -60,17 +138,37 @@
             :field="column.prop"
             :title="column.label"
           >
-            <el-select v-model="row[column.prop]" slot-scope="{ row }" placeholder="请选择" clearable filterable>
-              <el-option v-for="item in fieldType" :key="item.code" :label="item.name" :value="item.code" />
+            <el-select
+              v-model="row[column.prop]"
+              slot-scope="{ row }"
+              placeholder="请选择"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in fieldType"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
             </el-select>
           </vxe-column>
-          <vxe-column slot="check" slot-scope="{ column }" v-bind="column" :field="column.prop" :title="column.label">
+          <vxe-column
+            slot="check"
+            slot-scope="{ column }"
+            v-bind="column"
+            :field="column.prop"
+            :title="column.label"
+          >
             <el-switch
               v-model="row[column.prop]"
               slot-scope="{ row }"
               :active-value="true"
               :inactive-value="false"
-              :disabled="column.prop === 'isMultiple' && !['searchSelect', 'select'].includes(row.fieldType)"
+              :disabled="
+                column.prop === 'isMultiple' &&
+                !['searchSelect', 'select'].includes(row.fieldType)
+              "
             />
           </vxe-column>
         </cl-table-pro>
@@ -90,7 +188,11 @@
           @valueChange="valueChange"
           @formItemClick="formItemClick"
         >
-          <el-radio-group slot="input1" v-model="formValue.select" class="m-t-s">
+          <el-radio-group
+            slot="input1"
+            v-model="formValue.select"
+            class="m-t-s"
+          >
             <el-radio :label="3">备选项</el-radio>
             <el-radio :label="6">备选项</el-radio>
             <el-radio :label="9" disabled>备选项</el-radio>
@@ -102,9 +204,19 @@
       <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
+      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>
 
@@ -115,15 +227,20 @@ import DynamicField from './DynamicField.vue'
 import DynamicFieldMixin from './DynamicFieldMixin.js'
 import { deepClone } from './utils'
 import contentPop from './contentPop.vue'
+import tableView from './tableView.vue'
 export default {
   name: 'DynamicFieldOptions',
-  components: { DynamicField, contentPop },
+  components: { DynamicField, contentPop, tableView },
   mixins: [DynamicFieldMixin],
   props: {
     hasTransform: {
       type: Boolean,
       default: false
     },
+    hasTableOption: {
+      type: Boolean,
+      default: false
+    },
     showItems: {
       type: Array,
       default: () => {
@@ -132,7 +249,7 @@ export default {
           '序号',
           '栏目',
           '字段名称',
-          '显示字段名称',
+          '是否在列表显示',
           '是否启用',
           '是否必填',
           '是否可编辑',
@@ -226,14 +343,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: '是否启用',
@@ -324,6 +441,7 @@ export default {
     pz(row, index) {
       this.selectFieldValue = row.fieldValue || []
       this.selectIndex = index
+      this.title = '数据来源'
       this.visible = true
     },
     dialogSave(value) {
@@ -371,10 +489,29 @@ export default {
       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

package/src/components/DynamicField/tableView.vue

@@ -0,0 +1,172 @@
+<template>
+  <cl-dialog
+    v-drag
+    width="85%"
+    max-dialog
+    :visible.sync="tableVisible"
+    title="数据展示"
+    :destroy-on-open="true"
+  >
+    <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('导出json')"
+            >导出json</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>
+  </cl-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ContentPop',
+  components: {},
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      tableVisible: false,
+      TableHeader: [
+        {
+          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: {
+    setView(data) {
+      console.log(data)
+      let TableHeader = [
+        {
+          type: 'checkbox',
+          static: 'pre' // 静态不被"显示列"显示的,且最终会被拼接到"显示列"排序后的表格的"前面"
+        },
+        {
+          type: 'seq',
+          label: '序号',
+          width: '56',
+          align: 'center'
+        }
+      ]
+      data
+        .filter((item) => {
+          return item.isTableShow
+        })
+        .forEach((i) => {
+          TableHeader.push({
+            label: i.fieldName,
+            prop: i.fieldCode,
+            align: i.fieldType === 'input-number' ? 'right' : 'center',
+            sortable: i.fieldType === 'input-number',
+            formatter: i.fieldType === 'input-number' ? 'formatAmount' : '', // 金额格式化
+            minWidth: '120',
+            'show-overflow-tooltip': true
+          })
+        })
+      this.TableHeader = TableHeader
+      console.log(this.TableHeader)
+      this.tableVisible = true
+    },
+    option(key, row, index) {
+      // 将本地数据转换为 JSON 字符串
+      const jsonData = JSON.stringify(this.TableHeader, null, 2)
+      // 创建一个 Blob 对象
+      const blob = new Blob([jsonData], { type: 'application/json' })
+      // 创建一个下载链接
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      switch (key) {
+        case '导出json':
+          a.href = url
+          a.download = 'TableHeader.json'
+          document.body.appendChild(a)
+          a.click()
+          // 释放 URL 对象
+          window.URL.revokeObjectURL(url)
+          document.body.removeChild(a)
+          break
+
+        default:
+          break
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.contentPop {
+  font-size: 14px;
+}
+</style>