wans

src/views/custom/form/CustomForm.vue

@@ -1,82 +1,60 @@
 <template>
   <a-card :bordered="false">
-    <a-row v-show="visible" :gutter="20">
-      <a-col :span="6">
-        <a-tree
-          @expand="onExpand"
-          :expandedKeys="expandedKeys"
-          :autoExpandParent="autoExpandParent"
-          @select="onSelect"
-          :selectedKeys="selectedKeys"
-          :treeData="treeData"
-          :replaceFields="{
-            children:'children', title:'title', key:'value'
-          }"
-        />
-      </a-col>
-      <a-col :span="18">
-        <div class="table-page-search-wrapper" @keyup.enter="handleEnter">
-          <a-form layout="inline">
-            <a-row :gutter="48" >
-              <a-col :md="6" :sm="24">
-                <a-form-item label="模板名称">
-                  <a-input v-model="queryParam.name" placeholder="请输入模板名称"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="6 || 24" :sm="24" >
-                <span class="table-page-search-submitButtons">
-                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-                  <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
-                </span>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-
-        <div class="table-operator" style="margin-bottom: 8px;">
-          <a-row>
-            <a-col :md="16">
-              <a-button type="primary" icon="plus" @click="handleAdd()">新增</a-button>
-              <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0 ">
-                <a-menu slot="overlay">
-                  <a-popconfirm title="是否要删除所选数据？" @confirm="batchDelete()">
-                    <a-menu-item key="1"><a-icon type="delete" /><a>删除</a></a-menu-item>
-                  </a-popconfirm>
-                </a-menu>
-                <a-button style="margin-left: 8px">
-                  批量操作 <a-icon type="down" />
-                </a-button>
-              </a-dropdown>
+    <div v-show="visible">
+      <div class="table-page-search-wrapper" @keyup.enter="handleEnter">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="模板名称">
+                <a-input v-model="queryParam.name" placeholder="请输入模板名称" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="所属部门">
+                <a-tree-select v-model="queryParam.deptId" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请选择" tree-default-expand-all>
+                </a-tree-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6 || 24" :sm="24">
+              <span class="table-page-search-submitButtons">
+                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
+              </span>
             </a-col>
           </a-row>
-        </div>
+        </a-form>
+      </div>
 
-        <s-table
-          ref="table"
-          size="default"
-          rowKey="id"
-          :columns="columns"
-          :data="loadData"
-          showPagination="auto"
-        >
-          <span slot="action" slot-scope="record">
-            <template>
-              <a @click="handleView(record)">查看</a>
-              <operation-button
-                @click="handleEdit(record)"
-              >修改</operation-button>
-              <operation-button
-                v-if="$auth('custom-form-del')"
-                :type="2"
-                title="是否要删除该条数据？"
-                @confirm="batchDelete(record.id)">删除</operation-button>
-            </template>
-          </span>
-        </s-table>
-      </a-col>
-    </a-row>
-    <base-form ref="baseModal" @ok="handleOk"/>
-    <detail ref="detailModal" @ok="handleOk"/>
+      <div class="table-operator" style="margin-bottom: 8px;">
+        <a-row>
+          <a-col :md="16">
+            <a-button type="primary" icon="plus" @click="handleAdd()">新增</a-button>
+            <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0 ">
+              <a-menu slot="overlay">
+                <a-popconfirm title="是否要删除所选数据？" @confirm="batchDelete()">
+                  <a-menu-item key="1"><a-icon type="delete" /><a>删除</a></a-menu-item>
+                </a-popconfirm>
+              </a-menu>
+              <a-button style="margin-left: 8px">
+                批量操作 <a-icon type="down" />
+              </a-button>
+            </a-dropdown>
+          </a-col>
+        </a-row>
+      </div>
+
+      <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" showPagination="auto">
+        <span slot="action" slot-scope="record">
+          <template>
+            <a @click="handleView(record)">查看</a>
+            <operation-button @click="handleEdit(record)">修改</operation-button>
+            <operation-button v-if="$auth('custom-form-del')" :type="2" title="是否要删除该条数据？" @confirm="batchDelete(record.id)">删除</operation-button>
+          </template>
+        </span>
+      </s-table>
+    </div>
+    <base-form ref="baseModal" @ok="handleOk" />
+    <detail ref="detailModal" @ok="handleOk" />
   </a-card>
 </template>
 
@@ -92,61 +70,59 @@ export default {
     STable,
     Ellipsis,
     BaseForm,
-    Detail
+    Detail,
   },
-  data () {
+  data() {
     return {
-      advanced: false,
       visible: true,
       treeData: [],
-      expandedKeys: [],
-      autoExpandParent: true,
       // 查询参数
-      queryParam: {
-      },
+      queryParam: {},
       // 表头
       columns: [
         {
           title: '序号',
           dataIndex: 'index',
           customRender: (text, record, index) => {
-            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
-          }
+            return `${
+              (this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1
+            }`
+          },
         },
         {
           title: '表单名称',
-          dataIndex: 'name'
+          dataIndex: 'name',
         },
         {
           title: '表单类型',
           dataIndex: 'type',
           customRender: (text, record, index) => {
             return this.BaseTool.Table.getMapText(this.typeMap, text)
-          }
+          },
         },
         {
           title: '模板分类',
           dataIndex: 'category',
           customRender: (text, record, index) => {
             return this.BaseTool.Table.getMapText(this.categoryMap, text)
-          }
+          },
         },
         {
           title: '备注',
-          dataIndex: 'remark'
+          dataIndex: 'remark',
         },
         {
           title: '创建人',
-          dataIndex: 'createdUserName'
+          dataIndex: 'createdUserName',
         },
         {
           title: '创建时间',
-          dataIndex: 'createdTime'
+          dataIndex: 'createdTime',
         },
         {
           title: '状态',
           fixed: 'right',
-          dataIndex: 'status'
+          dataIndex: 'status',
         },
         {
           title: '操作',
@@ -154,75 +130,93 @@ export default {
           width: '200px',
           fixed: 'right',
           align: 'center',
-          scopedSlots: { customRender: 'action' }
-        }
+          scopedSlots: { customRender: 'action' },
+        },
       ],
       // 下拉框map
       // 加载数据方法 必须为 Promise 对象
-      loadData: parameter => {
+      loadData: (parameter) => {
         parameter = {
           ...parameter,
           ...this.queryParam,
           dataScope: {
             sortBy: 'desc',
-            sortName: 'created_time'
-          }
+            sortName: 'created_time',
+          },
         }
-        return getCustomFormPage(Object.assign(parameter, this.queryParam))
-          .then(res => {
-            return res.data
-          })
+        return getCustomFormPage(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res.data
+        })
       },
       selectedRowKeys: [],
       selectedRows: [],
-      selectedKeys: [],
       options: {
-        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          },
+        },
         rowSelection: {
           selectedRowKeys: this.selectedRowKeys,
-          onChange: this.onSelectChange
-        }
+          onChange: this.onSelectChange,
+        },
       },
       optionAlertShow: false,
       categoryMap: {},
-      typeMap: {}
+      typeMap: {},
     }
   },
-  created () {
+  created() {
     // 下拉框map
     this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOM_FORM_TYPE)
     this.categoryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CATEGORY_TYPE)
     this.tableOption()
-    getCustomTree().then(res => {
-      this.treeData = res.data
+    getCustomTree().then((res) => {
+      this.treeData = this.setTree(res.data)
     })
   },
   methods: {
-    tableOption () {
+    tableOption() {
       if (!this.optionAlertShow) {
         this.options = {
-          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+          alert: {
+            show: true,
+            clear: () => {
+              this.selectedRowKeys = []
+            },
+          },
           rowSelection: {
             selectedRowKeys: this.selectedRowKeys,
             onChange: this.onSelectChange,
-            getCheckboxProps: record => ({
+            getCheckboxProps: (record) => ({
               props: {
                 disabled: false,
-                name: record.id
-              }
-            })
-          }
+                name: record.id,
+              },
+            }),
+          },
         }
         this.optionAlertShow = true
       } else {
         this.options = {
           alert: false,
-          rowSelection: null
+          rowSelection: null,
         }
         this.optionAlertShow = false
       }
     },
-    batchDelete (id) {
+    setTree(list) {
+      return list.map((item) => {
+        return {
+          title: item.title,
+          key: item.id,
+          value: item.id,
+          children: item.children ? this.setTree(item.children) : [],
+        }
+      })
+    },
+    batchDelete(id) {
       let ids = []
       if (this.BaseTool.String.isBlank(id)) {
         const length = this.selectedRows.length
@@ -230,66 +224,50 @@ export default {
           this.$message.info('请选择要删除的记录')
           return
         }
-        ids = this.selectedRows.map(item => item.id)
+        ids = this.selectedRows.map((item) => item.id)
       } else {
         ids = [id]
       }
-      deleteCustomForms(ids).then(res => {
+      deleteCustomForms(ids).then((res) => {
         this.$message.info('删除成功')
         this.handleOk()
         this.$refs.table.clearSelected()
       })
     },
-    handleAdd () {
+    handleAdd() {
       this.visible = false
       const modal = this.$refs.baseModal
       modal.base()
     },
-    handleEdit (record) {
+    handleEdit(record) {
       this.visible = false
-      fetchCustomForm({ id: record.id }).then(res => {
+      fetchCustomForm({ id: record.id }).then((res) => {
         const modal = this.$refs.baseModal
         modal.base(res.data)
       })
     },
-    handleView (record) {
+    handleView(record) {
       this.visible = false
-      fetchCustomForm({ id: record.id }).then(res => {
+      fetchCustomForm({ id: record.id }).then((res) => {
         const modal = this.$refs.detailModal
         modal.base(res.data)
       })
     },
-    handleOk (values) {
+    handleOk(values) {
       this.visible = true
       this.$refs.table.refresh()
     },
-    onSelectChange (selectedRowKeys, selectedRows) {
+    onSelectChange(selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
     },
-    resetSearchForm () {
-      this.queryParam = {
-      }
+    resetSearchForm() {
+      this.queryParam = {}
       this.$refs.table.refresh(true)
     },
-    onSelect: function (selectedKeys, info) {
-      this.selectedKeys = selectedKeys
-      if (selectedKeys.length > 0) {
-        this.queryParam.deptId = selectedKeys[0]
-        this.rightSelectDept = info.node.dataRef.item
-      } else {
-        this.queryParam.deptId = ''
-        this.rightSelectDept = {}
-      }
+    handleEnter() {
       this.$refs.table.refresh(true)
     },
-    onExpand (expandedKeys) {
-      this.expandedKeys = expandedKeys
-      this.autoExpandParent = false
-    },
-    handleEnter () {
-      this.$refs.table.refresh(true)
-    }
-  }
+  },
 }
 </script>

src/views/custom/form/modules/BaseForm.vue

@@ -2,7 +2,7 @@
   <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
     <a-row :gutter="48" slot="extra">
       <a-col :md="48" :sm="48">
-        <a-space class="table-page-search-submitButtons" >
+        <a-space class="table-page-search-submitButtons">
           <a-button v-show="current!==0" :loading="confirmLoading" type="primary" @click="current--">上一步</a-button>
           <a-button v-show="current!==3" :loading="confirmLoading" type="primary" @click="next">下一步</a-button>
           <a-button v-show="current===3" :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
@@ -20,56 +20,34 @@
     <br>
     <a-form :form="form" v-show="current===0">
       <a-form-item v-show="false">
-        <a-input v-decorator="['id']" type="hidden"/>
+        <a-input v-decorator="['id']" type="hidden" />
       </a-form-item>
-      <a-form-item
-        label="模板名称"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-input
-          v-decorator="['name', {rules: [{required: true, message: '模板名称不能为空'}]}]"/>
+      <a-form-item label="模板名称" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+        <a-input v-decorator="['name', {rules: [{required: true, message: '模板名称不能为空'}]}]" />
       </a-form-item>
-      <a-form-item
-        label="模板分类"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-select v-decorator="['category', {rules: [{required: true, message: '模板分类不能为空'}]}]">
+      <a-form-item label="模板分类" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+        <a-select v-decorator="['category', {rules: [{required: true, message: '模板分类不能为空'}]}]" @change="val => (type = val)">
           <a-select-option v-for="(label,value) in categoryMap" :value="value" :key="value">
             {{ label }}
           </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item
-        label="表单类型"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
+      <a-form-item label="表单类型" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
         <a-select v-decorator="['type', {rules: [{required: true, message: '表单类型不能为空'}]}]">
-          <a-select-option v-for="(label,value) in typeMap" :value="value" :key="value">
+          <a-select-option v-for="(label,value) in childrenMaps[type]" :value="value" :key="value">
             {{ label }}
           </a-select-option>
         </a-select>
       </a-form-item>
 
-      <a-form-item
-        label="备注"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-input
-          v-decorator="['remark']"/>
+      <a-form-item label="备注" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+        <a-input v-decorator="['remark']" />
       </a-form-item>
 
     </a-form>
-    <FormComponent v-show="current===1" ref="formComponent"/>
+    <FormComponent v-show="current===1" ref="formComponent" />
     <a-form v-show="current===2">
-      <a-form-item
-        label="查询字段"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
+      <a-form-item label="查询字段" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
         <a-checkbox-group v-model="queryFields" @change="handleQueryFieldsChange">
           <a-row>
             <a-col :span="8" v-for="item in queryFieldList" :key="item.fieldName">
@@ -91,9 +69,9 @@ import FormComponent from './component/index.vue'
 export default {
   name: 'BaseCustomForm',
   components: {
-    FormComponent
+    FormComponent,
   },
-  data () {
+  data() {
     return {
       confirmLoading: false,
       modalTitle: null,
@@ -102,37 +80,40 @@ export default {
       current: 0,
       // 下拉框map
       categoryMap: {},
-      typeMap: {},
+      type: 0,
+      childrenMaps: [],
       formValue: {
-        queryFields: []
+        queryFields: [],
       },
       queryFields: [],
       formComponentConfig: {
-        components: []
-      }
+        components: [],
+      },
     }
   },
 
   computed: {
-    queryFieldList () {
-      return this.formComponentConfig.components.map(item => {
+    queryFieldList() {
+      return this.formComponentConfig.components.map((item) => {
         return {
           comments: item.label,
           fieldName: item.value,
           dataType: item.type,
-          dataJson: JSON.stringify(item.attrs)
+          dataJson: JSON.stringify(item.attrs),
         }
       })
-    }
+    },
   },
   props: {},
-  created () {
+  created() {
     // 下拉框map
-    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOM_FORM_TYPE)
     this.categoryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CATEGORY_TYPE)
+    this.DictCache.getChildrenList(this.DictCache.TYPE.CATEGORY_TYPE).forEach((item) => {
+      this.childrenMaps[item.value] = this.DictCache.getLabelByValueMapByType(item.code)
+    })
   },
   methods: {
-    base (record) {
+    base(record) {
       this.visible = true
       // 如果是空标识添加
       if (this.BaseTool.Object.isBlank(record)) {
@@ -140,25 +121,23 @@ export default {
         return
       }
       this.modalTitle = '编辑'
-      const { form: { setFieldsValue } } = this
+      const {
+        form: { setFieldsValue },
+      } = this
       // 日期处理
       this.formValue = record
-      this.queryFields = this.formValue.queryFields.map(item => item.fieldName)
+      this.queryFields = this.formValue.queryFields.map((item) => item.fieldName)
       this.$nextTick(() => {
-        setFieldsValue(Object.assign(pick(record, [
-          'id',
-          'type',
-          'name',
-          'category',
-          'remark'
-        ])))
+        setFieldsValue(Object.assign(pick(record, ['id', 'type', 'name', 'category', 'remark'])))
         this.$refs.formComponent.base(record.jsonString)
       })
     },
-    next () {
+    next() {
       switch (this.current) {
-        case 0 :
-          const { form: { validateFieldsAndScroll } } = this
+        case 0:
+          const {
+            form: { validateFieldsAndScroll },
+          } = this
           validateFieldsAndScroll((errors, values) => {
             if (errors) {
               this.confirmLoading = false
@@ -169,10 +148,10 @@ export default {
             this.formValue = values
           })
           break
-        case 1 :
+        case 1:
           this.formComponentConfig = {
             components: this.$refs.formComponent.list2,
-            config: this.$refs.formComponent.config
+            config: this.$refs.formComponent.config,
           }
           this.current++
           break
@@ -182,40 +161,43 @@ export default {
           break
       }
     },
-    prev () {
+    prev() {
       if (this.current > 0) {
         this.current--
       }
     },
-    handleQueryFieldsChange () {
-      this.formValue.queryFields = this.queryFieldList.filter(item => this.queryFields.includes(item.fieldName))
+    handleQueryFieldsChange() {
+      this.formValue.queryFields = this.queryFieldList.filter((item) => this.queryFields.includes(item.fieldName))
     },
-    save () {
+    save() {
       this.confirmLoading = true
       // 日期处理
       const values = {
         ...this.formValue,
-        jsonString: JSON.stringify(this.formComponentConfig)
+        jsonString: JSON.stringify(this.formComponentConfig),
       }
       if (this.BaseTool.String.isBlank(values.id)) {
         addCustomForm(values)
           .then(() => {
             this.handleCancel(values)
-          }).catch(() => {
+          })
+          .catch(() => {
             this.confirmLoading = false
           })
       } else {
         updateCustomForm(values)
           .then(() => {
             this.handleCancel(values)
-          }).catch(() => {
+          })
+          .catch(() => {
             this.confirmLoading = false
           })
       }
     },
-    handleCancel (values) {
+    handleCancel(values) {
       this.visible = false
       this.confirmLoading = false
+      this.type = 0
       this.current = 0
       this.form.resetFields()
       if (this.BaseTool.Object.isNotBlank(values)) {
@@ -223,7 +205,7 @@ export default {
       } else {
         this.$emit('ok')
       }
-    }
-  }
+    },
+  },
 }
 </script>

src/views/custom/form/modules/component/index.vue

@@ -1,22 +1,11 @@
 <template>
   <a-row :gutter="10">
     <a-col :span="5">
-      <a-card title="基础" >
+      <a-card title="基础">
         <a-row>
-          <VueDraggable
-            v-model="componentBaseList"
-            :animation="150"
-            :group="{ name: 'people', pull: 'clone', put: false }"
-            :sort="false"
-            :clone="onClone"
-          >
-            <a-col
-              :span="12"
-              v-for="item in componentBaseList"
-              :key="item.id">
-              <div
-                class="hover type"
-              >
+          <VueDraggable v-model="componentBaseList" :animation="150" :group="{ name: 'people', pull: 'clone', put: false }" :sort="false" :clone="onClone">
+            <a-col :span="12" v-for="item in componentBaseList" :key="item.id">
+              <div class="hover type">
                 <a-space>
                   <a-icon type="profile" /> {{ item.name }}
                 </a-space>
@@ -25,22 +14,11 @@
           </VueDraggable>
         </a-row>
       </a-card>
-      <a-card title="高级" >
+      <a-card title="高级">
         <a-row>
-          <VueDraggable
-            v-model="componenHidetList"
-            :animation="150"
-            :group="{ name: 'people', pull: 'clone', put: false }"
-            :sort="false"
-            :clone="onClone"
-          >
-            <a-col
-              :span="12"
-              v-for="item in componenHidetList"
-              :key="item.id">
-              <div
-                class="hover type"
-              >
+          <VueDraggable v-model="componenHidetList" :animation="150" :group="{ name: 'people', pull: 'clone', put: false }" :sort="false" :clone="onClone">
+            <a-col :span="12" v-for="item in componenHidetList" :key="item.id">
+              <div class="hover type">
                 <a-space>
                   <a-icon type="profile" /> {{ item.name }}
                 </a-space>
@@ -52,33 +30,17 @@
     </a-col>
     <a-col :span="15">
       <a-card>
-        <a-form
-          :form="form"
-          :labelCol="BaseTool.Constant.labelCol"
-          :wrapperCol="BaseTool.Constant.wrapperCol">
+        <a-form :form="form" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
           <a-row>
-            <VueDraggable
-              v-model="list2"
-              :animation="150"
-              group="people"
-              style="min-height:600px"
-            >
-              <MComponent
-                class="hover"
-                v-for="item in list2"
-                :key="item.id"
-                :config="config"
-                :detail="item"
-                @select="handleSelect"
-                @selectInfo="handleInfoSelect"
-              />
+            <VueDraggable v-model="list2" :animation="150" group="people" style="min-height:600px">
+              <MComponent class="hover" v-for="item in list2" :key="item.id" :config="config" :detail="item" @select="handleSelect" @selectInfo="handleInfoSelect" />
             </VueDraggable>
           </a-row>
         </a-form>
       </a-card>
     </a-col>
     <a-col :span="4">
-      <Detail :config="config" ref="detail" @delete="handleDelete" @addForm="addForm"/>
+      <Detail :config="config" ref="detail" @delete="handleDelete" @addForm="addForm" />
     </a-col>
     <SelectInfo ref="selectInfo" @selected="handleInfoSelected" />
   </a-row>
@@ -97,9 +59,9 @@ export default {
     VueDraggable,
     Detail,
     MComponent,
-    SelectInfo
+    SelectInfo,
   },
-  data () {
+  data() {
     return {
       form: this.$form.createForm(this),
       componentBaseList,
@@ -108,51 +70,50 @@ export default {
       num: 1,
       detail: {},
       config: {
-        layout: 2
-      }
+        layout: 2,
+      },
     }
   },
-  provide () {
+  provide() {
     return {
       getFormList: () => {
         return this.list2
-      }
+      },
     }
   },
   watch: {
     list2: {
       deep: true,
-      handler (val) {
+      handler(val) {
         this.num++
-      }
-    }
-  },
-  created () {
+      },
+    },
   },
-  mounted () {
+  created() {},
+  mounted() {
     this.handleSelect({}, this.config)
   },
   methods: {
-    base (json) {
+    base(json) {
       const jsonData = JSON.parse(json)
       this.list2 = jsonData.components
       this.config = jsonData.config
     },
-    onClone (element) {
+    onClone(element) {
       // 生成随机id
       const val = {
         ...JSON.parse(JSON.stringify(element)),
         value: `${element.value}${this.num}`,
-        id: Math.floor(Math.random() * 10000000000000)
+        id: Math.floor(Math.random() * 10000000000000),
       }
       this.handleSelect(val)
       return val
     },
-    update (val) {
+    update(val) {
       console.log(val)
     },
-    addForm (val) {
-      val.forEach(item => {
+    addForm(val) {
+      val.forEach((item) => {
         this.list2.push({
           id: item.bind,
           name: '单行文本',
@@ -163,17 +124,17 @@ export default {
           label: item.columnComment,
           attrs: {
             placeholder: '请输入',
-            disabled: true
-          }
+            disabled: true,
+          },
         })
       })
     },
-    handleDelete (val) {
-      this.list2 = this.list2.filter(v => v.id !== val.id)
+    handleDelete(val) {
+      this.list2 = this.list2.filter((v) => v.id !== val.id)
     },
-    handleSubmit () {
+    handleSubmit() {
       const {
-        form: { validateFieldsAndScroll }
+        form: { validateFieldsAndScroll },
       } = this
       this.confirmLoading = true
       validateFieldsAndScroll((errors, values) => {
@@ -183,20 +144,20 @@ export default {
         }
       })
     },
-    handleSelect (item) {
+    handleSelect(item) {
       this.$refs.detail.base(item, this.config)
     },
-    handleInfoSelect (item) {
+    handleInfoSelect(item) {
       this.$refs.selectInfo.base(item)
     },
-    handleInfoSelected (keys, rows, detail) {
+    handleInfoSelected(keys, rows, detail) {
       const {
-        form: { setFieldsValue }
+        form: { setFieldsValue },
       } = this
       if (detail.attrs.selectType === 'radio') {
         const data = rows[0]
         const value = {}
-        detail.attrs.connect.forEach(item => {
+        detail.attrs.connect.forEach((item) => {
           value[item.bind] = data[item.columnName]
         })
         this.$nextTick(() => {
@@ -205,21 +166,21 @@ export default {
       } else {
         this.$nextTick(() => {
           setFieldsValue({
-            [detail.attrs.connect[0].bind]: keys
+            [detail.attrs.connect[0].bind]: keys,
           })
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
-.type{
-border: 1px solid #ccc;
-padding: 5px;
-margin: 5px;
-border-radius: 5px;
+.type {
+  border: 1px solid #ccc;
+  padding: 5px;
+  margin: 5px;
+  border-radius: 5px;
+  font-size: 12px;
 }
-
 </style>

src/views/custom/relation/CustomRelation.vue

@@ -3,35 +3,27 @@
     <div v-show="visible">
       <div class="table-page-search-wrapper" @keyup.enter="handleEnter">
         <a-form layout="inline">
-          <a-row :gutter="48" v-show="advanced">
+          <a-row :gutter="48">
             <a-col :md="6" :sm="24">
               <a-form-item label="关键字">
                 <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称" />
               </a-form-item>
             </a-col>
-          </a-row>
-          <a-row :gutter="48">
-            <a-col :md="24 || 24" :sm="24" style="text-align: right">
+            <a-col :md="6 || 24" :sm="24">
               <span class="table-page-search-submitButtons">
                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                 <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
-                <a @click="()=>{ this.advanced = !this.advanced}" style="margin-left: 8px">
-                    {{ advanced ? '收起' : '展开' }}
-                    <a-icon :type="advanced ? 'up' : 'down'" />
-                </a>
               </span>
             </a-col>
           </a-row>
         </a-form>
       </div>
-
       <div class="table-operator" style="margin-bottom: 8px;">
         <a-row>
           <a-col :md="16">
             <a-button type="primary" icon="plus" @click="handleAdd()">新增
             </a-button>
-            <a-button style="margin-left: 8px" type="primary" icon="download"
-                      @click="doExport">导出
+            <a-button style="margin-left: 8px" type="primary" icon="download" @click="doExport">导出
             </a-button>
             <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
               <a-menu slot="overlay">
@@ -50,27 +42,12 @@
         </a-row>
       </div>
 
-      <s-table
-        ref="table"
-        size="default"
-        rowKey="id"
-        :columns="columns"
-        :data="loadData"
-        :alert="options.alert"
-        :rowSelection="options.rowSelection"
-        showPagination="auto"
-      >
+      <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :alert="options.alert" :rowSelection="options.rowSelection" showPagination="auto">
         <span slot="action" slot-scope="record">
           <template>
             <a @click="handleView(record)">查看</a>
-            <operation-button
-              v-if="$auth('custom-relation-edit')" @click="handleEdit(record)"
-            >修改</operation-button>
-            <operation-button
-              v-if="$auth('custom-relation-del')"
-              :type="2"
-              title="是否要删除该条数据？"
-              @confirm="batchDelete(record.id)">删除</operation-button>
+            <operation-button v-if="$auth('custom-relation-edit')" @click="handleEdit(record)">修改</operation-button>
+            <operation-button v-if="$auth('custom-relation-del')" :type="2" title="是否要删除该条数据？" @confirm="batchDelete(record.id)">删除</operation-button>
           </template>
         </span>
       </s-table>
@@ -88,7 +65,7 @@ import {
   getCustomRelationPage,
   deleteCustomRelations,
   fetchCustomRelation,
-  exportCustomRelation
+  exportCustomRelation,
 } from '@/api/custom/relation'
 
 export default {
@@ -97,9 +74,9 @@ export default {
     STable,
     Ellipsis,
     BaseForm,
-    Detail
+    Detail,
   },
-  data () {
+  data() {
     return {
       advanced: false,
       visible: true,
@@ -111,108 +88,115 @@ export default {
           title: '序号',
           dataIndex: 'index',
           customRender: (text, record, index) => {
-            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
-          }
+            return `${
+              (this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1
+            }`
+          },
         },
         {
           title: '模板分类',
-          dataIndex: 'category'
+          dataIndex: 'category',
+          customRender: (text, record, index) => {
+            return this.categoryMap[text]
+          },
         },
         {
           title: '表单分类',
-          dataIndex: 'type'
-        },
-        {
-          title: 'json字符串',
-          dataIndex: 'json'
-        },
-        {
-          title: '备注',
-          dataIndex: 'remark'
+          dataIndex: 'type',
+          customRender: (text, record, index) => {
+            return this.childrenMaps[record.category][text]
+          },
         },
         {
           title: '添加时间',
-          dataIndex: 'createdTime'
+          dataIndex: 'createdTime',
         },
         {
           title: '添加人',
-          dataIndex: 'createdUserName'
+          dataIndex: 'createdUserName',
         },
         {
           title: '操作',
           key: 'action',
           width: '200px',
           align: 'center',
-          scopedSlots: { customRender: 'action' }
-        }
+          scopedSlots: { customRender: 'action' },
+        },
       ],
       // 下拉框map
       // 加载数据方法 必须为 Promise 对象
-      loadData: parameter => {
+      loadData: (parameter) => {
         parameter = {
           ...parameter,
           ...this.queryParam,
           dataScope: {
             sortBy: 'desc',
-            sortName: 'update_time'
-          }
+            sortName: 'update_time',
+          },
         }
-        return getCustomRelationPage(Object.assign(parameter, this.queryParam))
-          .then(res => {
-            return res.data
-          })
+        return getCustomRelationPage(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res.data
+        })
       },
       selectedRowKeys: [],
       selectedRows: [],
 
       options: {
         alert: {
-          show: true, clear: () => {
+          show: true,
+          clear: () => {
             this.selectedRowKeys = []
-          }
+          },
         },
         rowSelection: {
           selectedRowKeys: this.selectedRowKeys,
-          onChange: this.onSelectChange
-        }
+          onChange: this.onSelectChange,
+        },
       },
-      optionAlertShow: false
+      optionAlertShow: false,
+      categoryMap: {},
+      childrenMaps: [],
     }
   },
-  created () {
+  created() {
     // 下拉框map
     this.tableOption()
+    this.categoryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CATEGORY_TYPE)
+    this.DictCache.getChildrenList(this.DictCache.TYPE.CATEGORY_TYPE).forEach((item) => {
+      this.childrenMaps[item.value] = this.DictCache.getLabelByValueMapByType(item.code)
+    })
   },
   methods: {
-    tableOption () {
+    tableOption() {
       if (!this.optionAlertShow) {
         this.options = {
           alert: {
-            show: true, clear: () => {
+            show: true,
+            clear: () => {
               this.selectedRowKeys = []
-            }
+            },
           },
           rowSelection: {
             selectedRowKeys: this.selectedRowKeys,
             onChange: this.onSelectChange,
-            getCheckboxProps: record => ({
+            getCheckboxProps: (record) => ({
               props: {
                 disabled: false,
-                name: record.id
-              }
-            })
-          }
+                name: record.id,
+              },
+            }),
+          },
         }
         this.optionAlertShow = true
       } else {
         this.options = {
           alert: false,
-          rowSelection: null
+          rowSelection: null,
         }
         this.optionAlertShow = false
       }
     },
-    batchDelete (id) {
+    batchDelete(id) {
       let ids = []
       if (this.BaseTool.String.isBlank(id)) {
         const length = this.selectedRows.length
@@ -220,58 +204,58 @@ export default {
           this.$message.info('请选择要删除的记录')
           return
         }
-        ids = this.selectedRows.map(item => item.id)
+        ids = this.selectedRows.map((item) => item.id)
       } else {
         ids = [id]
       }
-      deleteCustomRelations(ids).then(res => {
+      deleteCustomRelations(ids).then((res) => {
         this.$message.info('删除成功')
         this.handleOk()
         this.$refs.table.clearSelected()
       })
     },
-    handleAdd () {
+    handleAdd() {
       this.visible = false
       const modal = this.$refs.baseModal
       modal.base()
     },
-    handleEdit (record) {
+    handleEdit(record) {
       this.visible = false
-      fetchCustomRelation({ id: record.id }).then(res => {
+      fetchCustomRelation({ id: record.id }).then((res) => {
         const modal = this.$refs.baseModal
         modal.base(res.data)
       })
     },
-    handleView (record) {
+    handleView(record) {
       this.visible = false
-      fetchCustomRelation({ id: record.id }).then(res => {
+      fetchCustomRelation({ id: record.id }).then((res) => {
         const modal = this.$refs.detailModal
         modal.base(res.data)
       })
     },
-    handleOk (values) {
+    handleOk(values) {
       this.visible = true
       this.$refs.table.refresh()
     },
-    onSelectChange (selectedRowKeys, selectedRows) {
+    onSelectChange(selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
     },
-    resetSearchForm () {
+    resetSearchForm() {
       this.queryParam = {}
       this.$refs.table.refresh(true)
     },
-    doExport () {
+    doExport() {
       const parameter = {
-        ...this.queryParam
+        ...this.queryParam,
       }
-      exportCustomRelation(parameter).then(file => {
+      exportCustomRelation(parameter).then((file) => {
         this.BaseTool.Util.downLoadExportExcel(file)
       })
     },
-    handleEnter () {
+    handleEnter() {
       this.$refs.table.refresh(true)
-    }
-  }
+    },
+  },
 }
 </script>

src/views/custom/relation/modules/BaseForm.vue

@@ -1,142 +1,227 @@
 <template>
-    <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
-        <a-row :gutter="48" slot="extra">
-            <a-col :md="48" :sm="48">
-              <span class="table-page-search-submitButtons" style="float: right">
-                <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
-                <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
-              </span>
-            </a-col>
-        </a-row>
-        <a-form :form="form">
+  <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
+    <a-row :gutter="48" slot="extra">
+      <a-col :md="48" :sm="48">
+        <span class="table-page-search-submitButtons" style="float: right">
+          <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
+          <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
+        </span>
+      </a-col>
+    </a-row>
+    <a-form :form="form">
 
-            <a-form-item v-show="false">
-                <a-input v-decorator="['id']" type="hidden"/>
-                                                                                                                                                                                                                                                                                                                                                                                            </a-form-item>
+      <a-form-item v-show="false">
+        <a-input v-decorator="['id']" type="hidden" />
+      </a-form-item>
 
-            <row-list :col="2">
-                                                                                                <row-item>
-
-                            <a-form-item
-                                    label="模板分类"
-                                    :labelCol="BaseTool.Constant.labelCol"
-                                    :wrapperCol="BaseTool.Constant.wrapperCol"
-                            >
-                                                                    <a-input
-                                            v-decorator="['category', {rules: [{required: true, message: '模板分类不能为空'}]}]"/>
-                                                            </a-form-item>
-                        </row-item>
-                                                                                <row-item>
-
-                            <a-form-item
-                                    label="表单分类"
-                                    :labelCol="BaseTool.Constant.labelCol"
-                                    :wrapperCol="BaseTool.Constant.wrapperCol"
-                            >
-                                                                    <a-input
-                                            v-decorator="['type', {rules: [{required: true, message: '表单分类不能为空'}]}]"/>
-                                                            </a-form-item>
-                        </row-item>
-                                                                                <row-item>
-
-                            <a-form-item
-                                    label="json字符串"
-                                    :labelCol="BaseTool.Constant.labelCol"
-                                    :wrapperCol="BaseTool.Constant.wrapperCol"
-                            >
-                                                            </a-form-item>
-                        </row-item>
-                                                                                <row-item>
-
-                            <a-form-item
-                                    label="备注"
-                                    :labelCol="BaseTool.Constant.labelCol"
-                                    :wrapperCol="BaseTool.Constant.wrapperCol"
-                            >
-                                                                    <a-input
-                                            v-decorator="['remark', {rules: [{required: true, message: '备注不能为空'}]}]"/>
-                                                            </a-form-item>
-                        </row-item>
-                                                                                                                                                                                                                                                                        </row-list>
-        </a-form>
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </a-card>
+      <row-list :col="2">
+        <row-item>
+          <a-form-item label="模板分类" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+            <a-select v-decorator="['category', {rules: [{required: true, message: '模板分类不能为空'}]}]" @change="val => (type = val)">
+              <a-select-option v-for="(label,value) in categoryMap" :value="value" :key="value">
+                {{ label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item label="表单类型" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+            <a-select v-decorator="['type', {rules: [{required: true, message: '表单类型不能为空'}]}]">
+              <a-select-option v-for="(label,value) in childrenMaps[type]" :value="value" :key="value">
+                {{ label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item label="备注" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+            <a-input v-decorator="['remark']" />
+          </a-form-item>
+        </row-item>
+      </row-list>
+      <a-table :columns="columns" :data-source="jsonData" bordered>
+        <template #action="text,record,index">
+          <a-popconfirm title="确定删除吗?" @confirm="remove(index)">
+            <a href="javascript:;">删除</a>
+          </a-popconfirm>
+        </template>
+        <template #chineseName="text,record">
+          <a-input v-model="record.chineseName"></a-input>
+        </template>
+        <template #englishName="text,record">
+          <a-input v-model="record.englishName"></a-input>
+        </template>
+        <template #value="text,record">
+          <a-input v-model="record.value"></a-input>
+        </template>
+        <template #type="text,record">
+          <a-select v-model="record.type">
+            <a-select-option v-for="{name,type} in componentBaseList" :value="type" :key="type">
+              {{ name }}
+            </a-select-option>
+          </a-select>
+        </template>
+        <template slot="title" slot-scope="currentPageData">
+          配置信息
+        </template>
+        <template slot="footer" slot-scope="currentPageData">
+          <div class="add">
+            <a-button type="primary" icon="plus" @click="add()"></a-button>
+          </div>
+        </template>
+      </a-table>
+    </a-form>
+  </a-card>
 </template>
 
 <script>
-    import pick from 'lodash.pick'
-    import {addCustomRelation, updateCustomRelation } from '@/api/custom/relation'
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                        export default {
-        name: 'BaseCustomRelation',
-        data() {
-            return {
-                confirmLoading: false,
-                modalTitle: null,
-                form: this.$form.createForm(this),
-                visible: false,
-            // 下拉框map
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
+import pick from 'lodash.pick'
+import { componentBaseList } from '@/views/custom/form/modules/component/modules/components'
+import MComponent from '@/views/custom/form/modules/component/modules/Component.vue'
+import { addCustomRelation, updateCustomRelation } from '@/api/custom/relation'
+export default {
+  name: 'BaseCustomRelation',
+  components: {
+    MComponent,
+  },
+  data() {
+    return {
+      confirmLoading: false,
+      modalTitle: null,
+      form: this.$form.createForm(this),
+      visible: false,
+      // 下拉框map
+      componentBaseList: componentBaseList,
+      categoryMap: {},
+      type: 0,
+      childrenMaps: [],
+      jsonData: [],
+      columns: [
+        {
+          title: '字段名',
+          dataIndex: 'chineseName',
+          key: 'chineseName',
+          width: 25,
+          scopedSlots: { customRender: 'chineseName' },
+        },
+        {
+          title: '字段值',
+          dataIndex: 'englishName',
+          width: 25,
+          key: 'englishName',
+          scopedSlots: { customRender: 'englishName' },
+        },
+        {
+          title: '填充方式',
+          dataIndex: 'type',
+          width: 25,
+          key: 'type',
+          scopedSlots: { customRender: 'type' },
+        },
+        {
+          title: '默认值',
+          dataIndex: 'value',
+          width: 25,
+          key: 'value',
+          scopedSlots: { customRender: 'value' },
+        },
+
+        {
+          title: '操作',
+          width: 25,
+          key: 'action',
+          scopedSlots: { customRender: 'action' },
         },
-        props: {},
-        created() {
-            // 下拉框map
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        },
-        methods: {
-            base(record) {
-                this.visible = true
-                // 如果是空标识添加
-                if (this.BaseTool.Object.isBlank(record)) {
-                    this.modalTitle = '添加'
-                    return
-                }
-                this.modalTitle = '编辑'
-                const {form: {setFieldsValue}} = this
-                // 日期处理
-                                this.$nextTick(() => {
-                    setFieldsValue(Object.assign(pick(record, [
-                                                                                    'id',
-                                                                                                                'category',
-                                                                                                                'type',
-                                                                                                                'json',
-                                                                                                                'remark',
-                                                                                                                                                                                                                                                                                                                                                                            ])))
-                })
-            },
-            save() {
-                const {form: {validateFieldsAndScroll}} = this
-                this.confirmLoading = true
-                validateFieldsAndScroll((errors, values) => {
-                    if (errors) {
-                        this.confirmLoading = false
-                        return
-                    }
-                    // 日期处理
-                                        if (this.BaseTool.String.isBlank(values.id)) {
-                        addCustomRelation(values)
-                                .then(() => {
-                                    this.handleCancel(values)
-                                }).catch(() => {
-                            this.confirmLoading = false
-                        })
-                    } else {
-                        updateCustomRelation(values)
-                                .then(() => {
-                                    this.handleCancel(values)
-                                }).catch(() => {
-                            this.confirmLoading = false
-                        })
-                    }
-                })
-            },
-            handleCancel(values) {
-                this.visible = false
-                this.confirmLoading = false
-                this.form.resetFields()
-                if (this.BaseTool.Object.isNotBlank(values)) {
-                    this.$emit('ok', values)
-                } else {
-                    this.$emit('ok')
-                }
-            }
-                                                                                                                                                                                                                                                                                                                                        }
+      ],
     }
+  },
+  props: {},
+  created() {
+    // 下拉框map
+    this.categoryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CATEGORY_TYPE)
+    this.DictCache.getChildrenList(this.DictCache.TYPE.CATEGORY_TYPE).forEach((item) => {
+      this.childrenMaps[item.value] = this.DictCache.getLabelByValueMapByType(item.code)
+    })
+  },
+  methods: {
+    base(record) {
+      this.visible = true
+      // 如果是空标识添加
+      if (this.BaseTool.Object.isBlank(record)) {
+        this.modalTitle = '添加'
+        return
+      }
+      this.modalTitle = '编辑'
+      this.jsonData = JSON.parse(record.json)
+      const {
+        form: { setFieldsValue },
+      } = this
+      // 日期处理
+      this.$nextTick(() => {
+        setFieldsValue(Object.assign(pick(record, ['id', 'category', 'type', 'remark'])))
+      })
+    },
+    add() {
+      this.jsonData.push({})
+    },
+    remove(i) {
+      this.jsonData.splice(i, 1)
+    },
+    save() {
+      const {
+        form: { validateFieldsAndScroll },
+      } = this
+      this.confirmLoading = true
+      validateFieldsAndScroll((errors, values) => {
+        if (errors) {
+          this.confirmLoading = false
+          return
+        }
+        // 日期处理
+        values.json = JSON.stringify(this.jsonData)
+        if (this.BaseTool.String.isBlank(values.id)) {
+          addCustomRelation(values)
+            .then(() => {
+              this.handleCancel(values)
+            })
+            .catch(() => {
+              this.confirmLoading = false
+            })
+        } else {
+          updateCustomRelation(values)
+            .then(() => {
+              this.handleCancel(values)
+            })
+            .catch(() => {
+              this.confirmLoading = false
+            })
+        }
+      })
+    },
+    handleCancel(values) {
+      this.visible = false
+      this.confirmLoading = false
+      this.jsonData = []
+      this.type = 0
+      this.form.resetFields()
+      if (this.BaseTool.Object.isNotBlank(values)) {
+        this.$emit('ok', values)
+      } else {
+        this.$emit('ok')
+      }
+    },
+  },
+}
 </script>
+<style lang="less" scoped>
+.add {
+  width: 100%;
+  text-align: center;
+  button {
+    width: 200px;
+  }
+}
+/deep/.ant-table-footer {
+  padding: 10px;
+}
+</style>

src/views/custom/relation/modules/Detail.vue

@@ -1,69 +1,93 @@
 <template>
-    <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
-        <a-row :gutter="48" slot="extra">
-            <a-col :md="48" :sm="48">
-              <span class="table-page-search-submitButtons" style="float: right">
-                <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
-              </span>
-            </a-col>
-        </a-row>
-        <detail-list title="" :col="2">
-                                                                                                    <detail-list-item term="模板分类">{{ model.category }}</detail-list-item>
-                                                                                                            <detail-list-item term="表单分类">{{ model.type }}</detail-list-item>
-                                                                                                            <detail-list-item term="json字符串">{{ model.json }}</detail-list-item>
-                                                                                                            <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
-                                                                                                                                        <detail-list-item term="添加人ID">{{ model.createdUserId }}</detail-list-item>
-                                                                                                                                        <detail-list-item term="更新时间">{{ model.updateTime }}</detail-list-item>
-                                                                                                            <detail-list-item term="更新人ID">{{ model.updateUserId }}</detail-list-item>
-                                                                                                            <detail-list-item term="更新人">{{ model.updateUserName }}</detail-list-item>
-                                                        </detail-list>
-    </a-card>
+  <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
+    <a-row :gutter="48" slot="extra">
+      <a-col :md="48" :sm="48">
+        <span class="table-page-search-submitButtons" style="float: right">
+          <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
+        </span>
+      </a-col>
+    </a-row>
+    <detail-list title="" :col="2">
+      <detail-list-item term="模板分类">{{ model.category }}</detail-list-item>
+      <detail-list-item term="表单分类">{{ model.type }}</detail-list-item>
+      <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
+      <detail-list-item term="更新时间">{{ model.updateTime }}</detail-list-item>
+      <detail-list-item term="更新人">{{ model.updateUserName }}</detail-list-item>
+    </detail-list>
+    <a-table :columns="columns" :data-source="jsonData" bordered>
+      <template #type="text,record">
+        {{ componentBaseList.find(item => item.type === record.type).name}}
+
+      </template>
+    </a-table>
+  </a-card>
 </template>
 
 <script>
-    import DetailList from '@/components/tools/DetailList'
-    const DetailListItem = DetailList.Item
+import DetailList from '@/components/tools/DetailList'
+const DetailListItem = DetailList.Item
+import { componentBaseList } from '@/views/custom/form/modules/component/modules/components'
 
-    export default {
-        name: 'CustomRelationDetail',
-        components: {
-            DetailList,
-            DetailListItem
+export default {
+  name: 'CustomRelationDetail',
+  components: {
+    DetailList,
+    DetailListItem,
+  },
+  data() {
+    return {
+      confirmLoading: false,
+      mdl: {},
+      componentBaseList,
+      modalTitle: null,
+      visible: false,
+      // 下拉框map
+      model: {},
+      jsonData: [],
+      columns: [
+        {
+          title: '字段名',
+          dataIndex: 'chineseName',
+          key: 'chineseName',
+          width: 25,
+        },
+        {
+          title: '字段值',
+          dataIndex: 'englishName',
+          width: 25,
+          key: 'englishName',
+        },
+        {
+          title: '填充方式',
+          dataIndex: 'type',
+          width: 25,
+          key: 'type',
+          scopedSlots: { customRender: 'type' },
         },
-        data () {
-            return {
-                confirmLoading: false,
-                mdl: {},
-                modalTitle: null,
-                visible: false,
-                // 下拉框map
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            model: {
-                                                                                                                    'category': null,
-                                                                                                'type': null,
-                                                                                                'json': null,
-                                                                                                'remark': null,
-                                                                                                                                            'createdUserId': null,
-                                                                                                                                            'updateTime': null,
-                                                                                                'updateUserId': null,
-                                                                                                'updateUserName': null,
-                                                            }
-            }
+        {
+          title: '默认值',
+          dataIndex: 'value',
+          width: 25,
+          key: 'value',
         },
-        created () {
-            // 下拉框map
-            
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        },
-        methods: {
-            base (record) {
-                this.visible = true
-                this.modalTitle = '详情'
-                this.model = record
-            },
-            handleCancel () {
-                this.visible = false
-                this.confirmLoading = false
-                this.$emit('ok')
-            }
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
+      ],
     }
+  },
+  created() {
+    // 下拉框map
+  },
+  methods: {
+    base(record) {
+      this.visible = true
+      this.modalTitle = '详情'
+      this.model = record
+      this.jsonData = JSON.parse(record.json)
+    },
+    handleCancel() {
+      this.visible = false
+      this.confirmLoading = false
+      this.$emit('ok')
+    },
+  },
+}
 </script>