可视化编辑1/2

src/views/createtable/index.vue

@@ -21,7 +21,7 @@
         <div class="check_header">
           <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
               <el-row :gutter="6">
-                <el-col v-for="(item, index) in formItemArr" :key=" index" :span="3" v-show="isShow(item.isdisplay)">
+                <el-col v-for="(item, index) in formItemArr" :key=" index" :span="4" v-show="isShow(item.isdisplay)">
                   <el-form-item :rules="fromDataReq(item)" :prop="item.pagecode" :label="item.pagename">
                     <span slot="label">
                       {{ item.pagename }}
@@ -143,6 +143,7 @@ import AdvancedQuery from '@/components/AdvancedQuery'
 import AuthButton from '@/components/AuthButton'
 import AuthInstall from '@/components/AuthInstall'
 import SimpleQuery from '@/components/SimpleQuery'
+import allIcons from '@/utils/icons'
 import { mapGetters } from 'vuex'
 import { Query, newData, modifyData, moveData, start, stop, startAll, stopAll } from "@/api/webApi"
 import { formatChange, listToTree } from '@/utils/validate'
@@ -223,7 +224,8 @@ export default {
       advancedQueryValue: [], //高级查询缓存值
       formItemArr: [],
       pageSizeDatas: ['outairportpage', 'landairportpage', 'transairportpage'],
-      pageInstall: 'creatManagementPage'
+      pageInstall: 'creatManagementPage',
+      formIcons: allIcons
     }
   },
   computed: {
@@ -261,7 +263,29 @@ export default {
     },
     pageAuthBtnInstall () {
       return this.pageInstall == this.$route.path.replace('/', '')
-    }
+    },
+    //设置新增修改表单类型
+    fromDataType () {
+      return function (type) {
+        if (type) {
+          return type.toLocaleUpperCase().replace(/\([^\)]*\)/g, "");
+        }
+      }
+    },
+    //设置新增修改表单必填类型
+    fromDataReq () {
+      return function (item) {
+        const { dropdownlist, datatype, pagename, isrequired, formatrule } = item
+        const itemType = datatype ? datatype.replace(/\([^\)]*\)/g, "") : datatype
+        const itemReq = isrequired ? true : false
+        const itemRule = formatrule ? true : false
+        if (dropdownlist || dropdownlist == 0) return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'change' }]
+        else if (itemType == 'date' || itemType == 'datetime') return [{ required: itemReq, type: 'date', message: `${pagename}不能为空`, trigger: 'change' }]
+        else
+          if (itemReq && itemRule) return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'blur' }, { pattern: new RegExp(formatrule), message: `请输入合法的${pagename}规则`, trigger: 'blur' }]
+        return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'blur' }]
+      }
+    },
   },
   watch: {
     msgContent: {
@@ -289,6 +313,7 @@ export default {
   },
   mounted () {
     this.authId ? this.pageInit(this.authId) : this.pageInit()
+    this.queryTableData(true)
   },
   methods: {
     //页面初始化
@@ -364,6 +389,7 @@ export default {
       const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
       const formItemCopy = tableColumnArrs.filter((item) => item.isdisplay != 0)
       this.formItem = _.orderBy(formItemCopy, ['displaynumber'], ['asc'])
+      console.log(this.formItem)
     },
     //获取表头数据
     getColumnData (columnArrs = []) {
@@ -1022,6 +1048,7 @@ export default {
             this.noMore = true
           }
           this.tableData.push(...returnData)
+          this.formItemArr = this.tableData
         } else {
           this.page--
           this.noMore = true
@@ -1035,130 +1062,140 @@ export default {
         this.noMore = true
       }
       this.loading = false
-    }
-  },
+    },
     //获取表单下拉数据
-  getSelectData (formItem = []) {
-    if (!formItem.length || !Array.isArray(formItem)) return
-    const formItemCopy = _.cloneDeep(formItem)
-    const [allResult, allResultKey, allResultList] = [[], [], []]
-    formItemCopy.map(({ dropdownlist, pagecode, defaultparameters }) => {
-      if (((dropdownlist || dropdownlist == 0) && dropdownlist != "")) {
-        const datacontent = defaultparameters ? { filter: this.formatDefault(defaultparameters) } : { filter: { 1: 1 } }
-        const params = {
-          dropdownlist,
-          pagecode,
-          datacontent
+    getSelectData (formItem = []) {
+      if (!formItem.length || !Array.isArray(formItem)) return
+      const formItemCopy = _.cloneDeep(formItem)
+      const [allResult, allResultKey, allResultList] = [[], [], []]
+      formItemCopy.map(({ dropdownlist, pagecode, defaultparameters }) => {
+        if (((dropdownlist || dropdownlist == 0) && dropdownlist != "")) {
+          const datacontent = defaultparameters ? { filter: this.formatDefault(defaultparameters) } : { filter: { 1: 1 } }
+          const params = {
+            dropdownlist,
+            pagecode,
+            datacontent
+          }
+          allResultList.push(params)
         }
-        allResultList.push(params)
-      }
-    })
-    if (allResultList?.length) {
-      this.reduceHttp(allResultList, formItemCopy)
-    } else {
-      this.formItemArr = formItemCopy
-    }
-  },
-  //格式化传递参数数据
-  formatDefault (item) {
-    if (typeof item != 'string') return {}
-    const filterItem = {}
-    const parameters = item.replace('{', '').replace('}', '')
-    const parametersSplit = parameters?.split(',')
-    parametersSplit.map(item => {
-      const [key, val] = item?.split(':')
-      filterItem[key] = val
-    })
-    return filterItem
-  },
-  //去除重复请求
-  reduceHttp (arr = [], formItem = []) {
-    const datas = _.cloneDeep(arr)
-    const dataMap = new Map()
-    const [columnArrs1, columnArrs2, allResult, allResultKey] = [[], [], [], []]
-    if (!datas.length) return
-    datas.map(item => {
-      const { datacontent, dropdownlist } = item
-      const nameter = Object.entries(datacontent.filter)[0]
-      const namekey = dropdownlist + nameter[0] + nameter[1]
-      if (!dataMap.get(namekey)) {
-        dataMap.set(namekey, item)
-        columnArrs1.push(item)
+      })
+      if (allResultList?.length) {
+        this.reduceHttp(allResultList, formItemCopy)
       } else {
-        columnArrs2.push(item)
+        this.formItemArr = formItemCopy
       }
-    })
-    columnArrs1.map(({ dropdownlist, pagecode, datacontent }) => {
-      allResultKey.push(pagecode)
-      allResult.push(Query({ serviceid: dropdownlist, datacontent, event: '0', page: 1, size: 9999 }))
-    })
-    this.getAnscyData(allResultKey, allResult, _.cloneDeep(formItem), _.cloneDeep(columnArrs1), _.cloneDeep(columnArrs2))
-  },
-    //获取异步数据
-  async getAnscyData (allResultKey = [], allResult = [], formItem = [], columnArrs1 = [], columnArrs2 = []) {
-    this.loading = true
-    if (allResult.length && allResultKey.length) {
-      const results = await Promise.allSettled(allResult)
-      const resultDatas = []
-      results.map((item, index) => {
-        const { status, value } = item
-        if (status == 'fulfilled') {
-          const { code, returnData } = value
-          const nitem = {
-            pagecode: allResultKey[index],
-            dropdownlist: columnArrs1[index].dropdownlist,
-            returnData
-          }
-          resultDatas.push(nitem)
-          this.tableOptions[allResultKey[index]] = code == 0 && returnData?.length ? this.formatData(returnData) : []
-        }
+    },
+    //格式化传递参数数据
+    formatDefault (item) {
+      if (typeof item != 'string') return {}
+      const filterItem = {}
+      const parameters = item.replace('{', '').replace('}', '')
+      const parametersSplit = parameters?.split(',')
+      parametersSplit.map(item => {
+        const [key, val] = item?.split(':')
+        filterItem[key] = val
       })
-      if (resultDatas?.length) this.serRepets(_.cloneDeep(resultDatas), columnArrs1, columnArrs2)
-      this.formItemArr = formItem
-    } else {
-      this.formItemArr = formItem
-    }
-    this.setPassters(this.formPass)
-    this.loading = false
-  },
-  //设置重复下拉数据
-  serRepets (resultDatas = [], columnArrs1, columnArrs2) {
-    resultDatas.map(item => {
-      columnArrs1.map(ci => {
-        if (item.pagecode == ci.pagecode) {
-          item.datacontent = ci.datacontent
+      return filterItem
+    },
+    //去除重复请求
+    reduceHttp (arr = [], formItem = []) {
+      const datas = _.cloneDeep(arr)
+      const dataMap = new Map()
+      const [columnArrs1, columnArrs2, allResult, allResultKey] = [[], [], [], []]
+      if (!datas.length) return
+      datas.map(item => {
+        const { datacontent, dropdownlist } = item
+        const nameter = Object.entries(datacontent.filter)[0]
+        const namekey = dropdownlist + nameter[0] + nameter[1]
+        if (!dataMap.get(namekey)) {
+          dataMap.set(namekey, item)
+          columnArrs1.push(item)
+        } else {
+          columnArrs2.push(item)
         }
       })
-    })
-    const result = [...resultDatas]
-    result.map(item => {
-      const { datacontent, dropdownlist, returnData } = item
-      const nameterItem = Object.entries(datacontent.filter)[0]
-      const namekeyItem = dropdownlist + nameterItem[0] + nameterItem[1]
-      columnArrs2.map(ci => {
-        const { datacontent, dropdownlist, pagecode } = ci
-        const nameterCi = Object.entries(datacontent.filter)[0]
-        const namekeyCi = dropdownlist + nameterCi[0] + nameterCi[1]
-        if (namekeyItem == namekeyCi) {
-          this.tableOptions[pagecode] = _.cloneDeep(returnData)
-        }
+      columnArrs1.map(({ dropdownlist, pagecode, datacontent }) => {
+        allResultKey.push(pagecode)
+        allResult.push(Query({ serviceid: dropdownlist, datacontent, event: '0', page: 1, size: 9999 }))
       })
-    })
-  },
-  //设置下拉数据
-  setPassters (array = []) {
-    const passitem = this.formItemArr.filter(item => item.pagecode == 'passparameters')
-    if (passitem?.length) {
-      const ndata = _.cloneDeep(array)
-      const passitemkey = passitem[0]
-      passitemkey.datatype = 'DROP'
-      ndata.map(item => {
-        item.dropdownlistid = item.pageconfigurationid
-        item.dropdownlistlabel = item.pagename
+      this.getAnscyData(allResultKey, allResult, _.cloneDeep(formItem), _.cloneDeep(columnArrs1), _.cloneDeep(columnArrs2))
+    },
+      //获取异步数据
+    async getAnscyData (allResultKey = [], allResult = [], formItem = [], columnArrs1 = [], columnArrs2 = []) {
+      this.loading = true
+      if (allResult.length && allResultKey.length) {
+        const results = await Promise.allSettled(allResult)
+        const resultDatas = []
+        results.map((item, index) => {
+          const { status, value } = item
+          if (status == 'fulfilled') {
+            const { code, returnData } = value
+            const nitem = {
+              pagecode: allResultKey[index],
+              dropdownlist: columnArrs1[index].dropdownlist,
+              returnData
+            }
+            resultDatas.push(nitem)
+            this.tableOptions[allResultKey[index]] = code == 0 && returnData?.length ? this.formatData(returnData) : []
+          }
+        })
+        if (resultDatas?.length) this.serRepets(_.cloneDeep(resultDatas), columnArrs1, columnArrs2)
+        this.formItemArr = formItem
+      } else {
+        this.formItemArr = formItem
+      }
+      this.setPassters(this.formPass)
+      this.loading = false
+    },
+    //设置重复下拉数据
+    serRepets (resultDatas = [], columnArrs1, columnArrs2) {
+      resultDatas.map(item => {
+        columnArrs1.map(ci => {
+          if (item.pagecode == ci.pagecode) {
+            item.datacontent = ci.datacontent
+          }
+        })
       })
-      this.tableOptions['passparameters'] = ndata
-      this.formPassCopy = ndata
-    }
+      const result = [...resultDatas]
+      result.map(item => {
+        const { datacontent, dropdownlist, returnData } = item
+        const nameterItem = Object.entries(datacontent.filter)[0]
+        const namekeyItem = dropdownlist + nameterItem[0] + nameterItem[1]
+        columnArrs2.map(ci => {
+          const { datacontent, dropdownlist, pagecode } = ci
+          const nameterCi = Object.entries(datacontent.filter)[0]
+          const namekeyCi = dropdownlist + nameterCi[0] + nameterCi[1]
+          if (namekeyItem == namekeyCi) {
+            this.tableOptions[pagecode] = _.cloneDeep(returnData)
+          }
+        })
+      })
+    },
+    //设置下拉数据
+    setPassters (array = []) {
+      const passitem = this.formItemArr.filter(item => item.pagecode == 'passparameters')
+      if (passitem?.length) {
+        const ndata = _.cloneDeep(array)
+        const passitemkey = passitem[0]
+        passitemkey.datatype = 'DROP'
+        ndata.map(item => {
+          item.dropdownlistid = item.pageconfigurationid
+          item.dropdownlistlabel = item.pagename
+        })
+        this.tableOptions['passparameters'] = ndata
+        this.formPassCopy = ndata
+      }
+    },
+    isShow (isdisplay) {
+      let show = false
+      if (eval(isdisplay)) {
+        show = true
+      }
+      else {
+        show = false
+      }
+      return show
+    },
   },
 }
 </script>
@@ -1186,7 +1223,8 @@ export default {
 
     .check_header{
       width: 100%;
-      height:100px
+      height:100px;
+      overflow: hidden;
     }
     .TablePage{
       &_child {