接口重复调用优化、多数据标题自定义对话框

src/business/platform/data/data-template/field-formatter.vue

@@ -12,6 +12,8 @@
 </template>
 <script>
 import fecha from '@/utils/fecha'
+import { buildLabelTitle } from '../templaterender/utils/index'
+
 import { getAreaData } from '@/api/platform/cat/area'
 import { findByTypeKey as getDictionaryData } from '@/api/platform/cat/dictionary'
 import { get as getUserById } from '@/api/platform/org/employee'
@@ -19,7 +21,10 @@ import { get as getOrgById } from '@/api/platform/org/org'
 import { get as getPositionById } from '@/api/platform/org/position'
 import { get as getRoleById } from '@/api/platform/org/role'
 import { get as getAttachmentById } from '@/api/platform/file/attachment'
-import { queryDataById as getDataById, queryLinkageData as getLinkDataByKey } from '@/api/platform/data/dataTemplate'
+import {
+  queryDataById as getDataById,
+  queryLinkageData as getLinkDataByKey
+} from '@/api/platform/data/dataTemplate'
 
 var WorldDistricts = null
 var DICTIONARY_CACHE = {}
@@ -33,21 +38,25 @@ var SELECTOR_CACHE = {}
 
 export default {
   props: {
-    labelKey: { // 展示的字段
+    labelKey: {
+      // 展示的字段
       type: String
     },
     data: {
       type: Object,
       default: () => {}
     },
-    templateFields: { // 跟vee冲突
+    templateFields: {
+      // 跟vee冲突
       type: Object,
       default: () => {}
     },
     defaultValue: {
       type: String,
       default: '&nbsp;'
-    }
+    },
+    fieldType: String,
+    tem: Object
   },
   data() {
     return {
@@ -67,7 +76,6 @@ export default {
   },
   methods: {
     initData() {
-      console.log(this.labelKey, this.templateFields, 'this.labelKeythis.labelKey')
       if (!this.labelKey) return
       const value = this.data[this.labelKey]
       if (this.$utils.isEmpty(value)) {
@@ -81,13 +89,16 @@ export default {
       }
       const fieldType = field.field_type
       const fieldOptions = field.field_options
-      if (this.$utils.isEmpty(value) || this.$utils.isEmpty(fieldType) || this.$utils.isEmpty(fieldOptions)) {
+      if (
+        this.$utils.isEmpty(value) ||
+        this.$utils.isEmpty(fieldType) ||
+        this.$utils.isEmpty(fieldOptions)
+      ) {
         this.label = value
         return
       }
-
       // 数据格式
-      this.dataFormatter(value, fieldType, fieldOptions)
+      this.dataFormatter(value, this.fieldType, fieldOptions)
     },
     dataFormatter(value, fieldType, fieldOptions) {
       switch (fieldType) {
@@ -98,10 +109,10 @@ export default {
         case 'autoNumber':
           this.label = value
           break
-        case 'number':// 数字，格式化千分位等
+        case 'number': // 数字，格式化千分位等
           this.label = this.formatterNumber(value, fieldOptions)
           break
-        case 'datePicker':// 日期格式
+        case 'datePicker': // 日期格式
         case 'currentDate':
         case 'currentTime':
           this.formatterDate(value, fieldOptions)
@@ -109,30 +120,38 @@ export default {
         case 'select': // 下拉，单选，多选
         case 'radio':
         case 'checkbox':
-          this.label = this.formatterOptions(value, fieldOptions['options'], 'val')
+          this.label = this.formatterOptions(
+            value,
+            fieldOptions['options'],
+            'val'
+          )
           break
-        case 'switch':// 开关
-          this.label = this.formatterOptions(value, this.getSwitchOptions(fieldOptions), 'val')
+        case 'switch': // 开关
+          this.label = this.formatterOptions(
+            value,
+            this.getSwitchOptions(fieldOptions),
+            'val'
+          )
           break
-        case 'dictionary':// 数据字典
+        case 'dictionary': // 数据字典
           this.formatterDictionary(value, fieldOptions)
           break
-        case 'customDialog':// TODO 自定义对话框
+        case 'customDialog': // TODO 自定义对话框
           this.formatterCustomDialog(value, fieldOptions)
           break
-        case 'linkdata':// TODO 关联数据
+        case 'linkdata': // TODO 关联数据
           this.formatterLinkdata(value, fieldOptions)
           break
-        case 'selector':// 选择器
+        case 'selector': // 选择器
         case 'currentUser':
         case 'currentOrg':
           this.formatterSelector(value, fieldOptions)
 
           break
-        case 'attachment':// 附件
+        case 'attachment': // 附件
           this.formatterAttachment(value, fieldOptions)
           break
-        case 'address':// 地址
+        case 'address': // 地址
           this.formatterAddress(value, fieldOptions)
           break
         default:
@@ -156,9 +175,13 @@ export default {
     getSwitchOptions(fieldOptions) {
       const options = []
       const activeValue = fieldOptions.active_value
-      const activeText = this.$utils.isNotEmpty(fieldOptions.active_text) ? fieldOptions.active_text : activeValue
+      const activeText = this.$utils.isNotEmpty(fieldOptions.active_text)
+        ? fieldOptions.active_text
+        : activeValue
       const inactiveValue = fieldOptions.inactive_value
-      const inactiveText = this.$utils.isNotEmpty(fieldOptions.inactive_text) ? fieldOptions.inactive_text : inactiveValue
+      const inactiveText = this.$utils.isNotEmpty(fieldOptions.inactive_text)
+        ? fieldOptions.inactive_text
+        : inactiveValue
 
       options.push({
         val: activeValue,
@@ -176,19 +199,26 @@ export default {
     formatterDictionary(value, fieldOptions) {
       const key = fieldOptions['dictionary']
       if (DICTIONARY_CACHE[key]) {
-        this.label = this.formatterOptions(value, DICTIONARY_CACHE[key], 'key', 'name')
+        this.label = this.formatterOptions(
+          value,
+          DICTIONARY_CACHE[key],
+          'key',
+          'name'
+        )
       } else {
         getDictionaryData({
           typeKey: key
-        }).then(response => {
-          const data = response.data
-          DICTIONARY_CACHE[key] = data
-          this.label = this.formatterOptions(value, data, 'key', 'name')
-        }).catch((e) => {
-          DICTIONARY_CACHE[key] = []
-          // 异常
-          console.error(e)
         })
+          .then(response => {
+            const data = response.data
+            DICTIONARY_CACHE[key] = data
+            this.label = this.formatterOptions(value, data, 'key', 'name')
+          })
+          .catch(e => {
+            DICTIONARY_CACHE[key] = []
+            // 异常
+            console.error(e)
+          })
       }
     },
     /**
@@ -199,7 +229,10 @@ export default {
       if (store === 'json') {
         this.label = this.formatterJson(value, 'name')
       } else if (store === 'id') {
-        this.formatterSelectorData(value, fieldOptions['selector_type'] || 'user')
+        this.formatterSelectorData(
+          value,
+          fieldOptions['selector_type'] || 'user'
+        )
       } else {
         this.label = value
       }
@@ -214,46 +247,54 @@ export default {
         this.label = SELECTOR_CACHE[key]
       } else {
         if (type === 'user' || type === 'employee') {
-          getUserById({ employeeId: id }).then(response => {
-            const data = response.data
-            data[nameKey] = data['name']
-            if (data) {
-              SELECTOR_CACHE[key] = data[nameKey]
-              this.label = data[nameKey]
-            }
-          }).catch((e) => {
-            console.error(e)
-          })
+          getUserById({ employeeId: id })
+            .then(response => {
+              const data = response.data
+              data[nameKey] = data['name']
+              if (data) {
+                SELECTOR_CACHE[key] = data[nameKey]
+                this.label = data[nameKey]
+              }
+            })
+            .catch(e => {
+              console.error(e)
+            })
         } else if (type === 'org') {
-          getOrgById({ orgId: id }).then(response => {
-            const data = response.data
-            if (data) {
-              this.label = data[nameKey]
-              SELECTOR_CACHE[key] = data[nameKey]
-            }
-          }).catch((e) => {
-            console.error(e)
-          })
+          getOrgById({ orgId: id })
+            .then(response => {
+              const data = response.data
+              if (data) {
+                this.label = data[nameKey]
+                SELECTOR_CACHE[key] = data[nameKey]
+              }
+            })
+            .catch(e => {
+              console.error(e)
+            })
         } else if (type === 'position') {
-          getPositionById({ positionId: id }).then(response => {
-            const data = response.data
-            if (data) {
-              this.label = data[nameKey]
-              SELECTOR_CACHE[key] = data[nameKey]
-            }
-          }).catch((e) => {
-            console.error(e)
-          })
+          getPositionById({ positionId: id })
+            .then(response => {
+              const data = response.data
+              if (data) {
+                this.label = data[nameKey]
+                SELECTOR_CACHE[key] = data[nameKey]
+              }
+            })
+            .catch(e => {
+              console.error(e)
+            })
         } else if (type === 'role') {
-          getRoleById({ roleId: id }).then(response => {
-            const data = response.data
-            if (data) {
-              this.label = data[nameKey]
-              SELECTOR_CACHE[key] = data[nameKey]
-            }
-          }).catch((e) => {
-            console.error(e)
-          })
+          getRoleById({ roleId: id })
+            .then(response => {
+              const data = response.data
+              if (data) {
+                this.label = data[nameKey]
+                SELECTOR_CACHE[key] = data[nameKey]
+              }
+            })
+            .catch(e => {
+              console.error(e)
+            })
         }
       }
     },
@@ -276,14 +317,16 @@ export default {
       if (ATTACHMENT_CACHE[id]) {
         this.label = ATTACHMENT_CACHE[id]
       } else {
-        getAttachmentById({ attachmentId: id, type: type }).then(response => {
-          const data = response.data
-          if (this.$utils.isEmpty(data)) return
-          this.label = data['fileName']
-          ATTACHMENT_CACHE[id] = data['fileName']
-        }).catch((e) => {
-          console.error(e)
-        })
+        getAttachmentById({ attachmentId: id, type: type })
+          .then(response => {
+            const data = response.data
+            if (this.$utils.isEmpty(data)) return
+            this.label = data['fileName']
+            ATTACHMENT_CACHE[id] = data['fileName']
+          })
+          .catch(e => {
+            console.error(e)
+          })
       }
     },
     /**
@@ -293,30 +336,47 @@ export default {
       const dialog = fieldOptions['dialog']
       const store = fieldOptions['store_mode'] || 'id'
 
-      if (store === 'json') {
-        this.label = this.formatterJson(value, 'name')
-      } else if (store === 'id') { // id需要查询数据库。返回名称
-        this.formatterDataTemplateValue(value, dialog)
-      }
+      // if (store === 'json') {
+      //   this.label = this.formatterJson(value, 'name')
+      // } else if (store === 'id') {
+      //   // id需要查询数据库。返回名称
+      this.formatterDataTemplateValue(value, dialog)
+      // }
     },
     // 处理对话框id值
     formatterDataTemplateValue: function(value, key) {
       value.split(',').forEach(id => {
-        getDataById({ id: id, key: key }).then(response => {
-          const responseData = response.data
-          const data = responseData.data[0]
-          // const data = response.data
-          const variables = response.variables
-          if (this.$utils.isNotEmpty(data)) {
-            // TODO 多个字段组合处理
-            const val = data[variables['title']] || ''
-            this.label += this.$utils.isNotEmpty(val) ? val + ',' : ''
-          }
-        }).catch((e) => {
-          console.error(e)
-        })
+        const labelKeys = buildLabelTitle(this.tem)
+        const a = this.handleLabel(this.data, labelKeys)
+        this.label += this.$utils.isNotEmpty(a) ? a : ''
+        // getDataById({ id: id, key: key })
+        //   .then(response => {
+        //     const responseData = response.data
+        //     const data = responseData.data[0]
+        //     // const data = response.data
+        //     const variables = response.variables
+        //     if (this.$utils.isNotEmpty(data)) {
+        //       // TODO 多个字段组合处理
+        //       const val = data[variables['title']] || ''
+        //       this.label += this.$utils.isNotEmpty(val) ? val + ',' : ''
+        //     }
+        //   })
+        //   .catch(e => {
+        //     console.error(e)
+        //   })
       })
     },
+    handleLabel(data, labelKeys) {
+      const config = labelKeys
+      if (typeof config === 'function') {
+        return config(data)
+      } else if (typeof config === 'string') {
+        return data[config]
+      } else if (typeof config === 'undefined') {
+        const dataProp = data['name']
+        return dataProp === undefined ? '' : dataProp
+      }
+    },
     formatterLinkdata(value, fieldOptions) {
       const linkConfig = fieldOptions['link_config'] || {}
       const __key = fieldOptions['linkdata']
@@ -331,25 +391,27 @@ export default {
       // TODO: 有问题
       getLinkDataByKey({
         key: key
-      }).then(response => {
-        const data = response.data
-        if (this.$utils.isNotEmpty(data)) {
-          const arrayValue = value.split(',')
-          const rtn = []
-          for (var d = 0; d < data.length; d++) {
-            const	item = data[d]
-            const v = arrayValue.find((val) => {
-              return val === item[__linkKey]
-            })
-            if (v) {
-              rtn.push(item[__linkText] || '')
+      })
+        .then(response => {
+          const data = response.data
+          if (this.$utils.isNotEmpty(data)) {
+            const arrayValue = value.split(',')
+            const rtn = []
+            for (var d = 0; d < data.length; d++) {
+              const item = data[d]
+              const v = arrayValue.find(val => {
+                return val === item[__linkKey]
+              })
+              if (v) {
+                rtn.push(item[__linkText] || '')
+              }
             }
+            this.label += rtn.join(',')
           }
-          this.label += rtn.join(',')
-        }
-      }).catch((e) => {
-        console.error(e)
-      })
+        })
+        .catch(e => {
+          console.error(e)
+        })
     },
     /**
      * 格式化地址
@@ -368,23 +430,26 @@ export default {
           this.label = value
           return
         }
-        this.label = this.getAddressData(fieldOptions, jsonValue, 'country') +
-              this.getAddressData(fieldOptions, jsonValue, 'province') +
-              this.getAddressData(fieldOptions, jsonValue, 'city') +
-              this.getAddressData(fieldOptions, jsonValue, 'district') +
-                  (jsonValue.street ? jsonValue.street : '')
+        this.label =
+          this.getAddressData(fieldOptions, jsonValue, 'country') +
+          this.getAddressData(fieldOptions, jsonValue, 'province') +
+          this.getAddressData(fieldOptions, jsonValue, 'city') +
+          this.getAddressData(fieldOptions, jsonValue, 'district') +
+          (jsonValue.street ? jsonValue.street : '')
       }
     },
     // ====================地址展示处理================
     getTextValue: function(data, value) {
-      if (this.$utils.isEmpty(value) || this.$utils.isEmpty(data)) { return value || '' }
+      if (this.$utils.isEmpty(value) || this.$utils.isEmpty(data)) {
+        return value || ''
+      }
       if (data[value]) {
         return data[value]
       }
       return value || ''
     },
     getTop: function(fieldOptions) {
-      return 	fieldOptions['top'] ? fieldOptions['top'] : 'country'
+      return fieldOptions['top'] ? fieldOptions['top'] : 'country'
     },
     getLevel: function(fieldOptions) {
       return fieldOptions['level'] ? fieldOptions['level'] : 'district'
@@ -393,7 +458,9 @@ export default {
       var top = this.getTop(fieldOptions)
       var rtnVal = '0'
       var topval = fieldOptions['topval']
-      if (this.$utils.isEmpty(topval)) { return rtnVal }
+      if (this.$utils.isEmpty(topval)) {
+        return rtnVal
+      }
       if (top === 'province') {
         rtnVal = topval['country']
       } else if (top === 'city') {
@@ -405,35 +472,52 @@ export default {
     },
     getAddressData(fieldOptions, v, type) {
       // TODO: 获取地址信息
-      getAreaData().then((response) => {
+      getAreaData().then(response => {
         WorldDistricts = response.data
       })
-      if (this.$utils.isEmpty(v)) { return '' }
+      if (this.$utils.isEmpty(v)) {
+        return ''
+      }
       var top = this.getTop(fieldOptions)
       var topval = this.getTopval(fieldOptions)
       var topval1
       if (type === 'country' && v.country) {
-        topval = (top === 'country') ? topval : 0
-        if (this.$utils.isEmpty(topval)) { return '' }
-        return this.getTextValue(WorldDistricts[topval],
-          v.country)
+        topval = top === 'country' ? topval : 0
+        if (this.$utils.isEmpty(topval)) {
+          return ''
+        }
+        return this.getTextValue(WorldDistricts[topval], v.country)
       } else if (type === 'province' && v.province) {
         topval1 = this.$utils.isNotEmpty(v.country) ? v.country : null
-        if (this.$utils.isEmpty(topval1) && top === 'province') { topval1 = topval }
-        if (this.$utils.isEmpty(topval1)) { return '' }
-        return this.getTextValue(WorldDistricts[topval1],
-          v.province)
+        if (this.$utils.isEmpty(topval1) && top === 'province') {
+          topval1 = topval
+        }
+        if (this.$utils.isEmpty(topval1)) {
+          return ''
+        }
+        return this.getTextValue(WorldDistricts[topval1], v.province)
       } else if (type === 'city' && v.city) {
         topval1 = this.$utils.isNotEmpty(v.province) ? v.province : null
-        if (this.$utils.isEmpty(topval1) && top === 'city') { topval1 = topval }
-        if (this.$utils.isEmpty(topval1)) { return '' }
-        return WorldDistricts[topval1] ? (WorldDistricts[topval1][v.city] || '')
+        if (this.$utils.isEmpty(topval1) && top === 'city') {
+          topval1 = topval
+        }
+        if (this.$utils.isEmpty(topval1)) {
+          return ''
+        }
+        return WorldDistricts[topval1]
+          ? WorldDistricts[topval1][v.city] || ''
           : ''
       } else if (type === 'district' && v.district) {
         topval1 = this.$utils.isNotEmpty(v.city) ? v.city : null
-        if (this.$utils.isEmpty(topval1) && top === 'district') { topval1 = topval }
-        if (this.$utils.isEmpty(topval1)) { return '' }
-        return WorldDistricts[topval1] ? (WorldDistricts[topval1][v.district] || '') : ''
+        if (this.$utils.isEmpty(topval1) && top === 'district') {
+          topval1 = topval
+        }
+        if (this.$utils.isEmpty(topval1)) {
+          return ''
+        }
+        return WorldDistricts[topval1]
+          ? WorldDistricts[topval1][v.district] || ''
+          : ''
       } else {
         return ''
       }
@@ -448,14 +532,14 @@ export default {
         optionObj[option[valueKey]] = option[labelKey]
       })
       const aryValue = value.split(',')
-      const res = aryValue.map((v) => {
+      const res = aryValue.map(v => {
         return optionObj[v] || v
       })
       return res.join(',')
     },
     /**
-   * 格式json 数据
-   */
+     * 格式json 数据
+     */
     formatterJson(value, key) {
       let aryValue = []
       try {
@@ -463,22 +547,23 @@ export default {
       } catch (e) {
         return value
       }
-      if (this.$utils.isEmpty(aryValue)) { return '' }
+      if (this.$utils.isEmpty(aryValue)) {
+        return ''
+      }
       if (typeof aryValue !== 'object') {
         return aryValue
       }
-      const res = aryValue.map((val) => {
+      const res = aryValue.map(val => {
         return val[key] || ''
       })
       return res.join(',')
     }
-
   }
 }
 </script>
 <style lang="scss" scoped>
-  .ibps-data-template-data{
-    word-break: break-all;
-    word-wrap: break-word;
-  }
+.ibps-data-template-data {
+  word-break: break-all;
+  word-wrap: break-word;
+}
 </style>

src/business/platform/data/data-template/template.vue

@@ -28,43 +28,60 @@
       <van-cell-group v-if="isTree">
         <van-cell class="ibps-root-title">
           <div slot="title">
-            <template v-for="(data,index) in pathData">
+            <template v-for="(data, index) in pathData">
               <span
                 :key="data[idKey]"
-                :class="{'ibps-is-link':pathData.length-1!==index}"
+                :class="{ 'ibps-is-link': pathData.length - 1 !== index }"
                 @click="changePath(index)"
-              >{{ data[labelKey] }}</span>
-              <span v-if="pathData.length-1!==index" :key="index">/</span>
+                >{{ data[labelKey] }}</span
+              >
+              <span v-if="pathData.length - 1 !== index" :key="index">/</span>
             </template>
           </div>
         </van-cell>
       </van-cell-group>
       <!--多选 -->
-      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
-        <van-checkbox-group ref="checkboxGroup" v-model="checkbox" :max="multiple?0:1">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="loadData"
+      >
+        <van-checkbox-group
+          ref="checkboxGroup"
+          v-model="checkbox"
+          :max="multiple ? 0 : 1"
+        >
           <van-cell-group>
             <van-cell
-              v-for="(data,index) in dataList"
-              :key="data[valueKey]+index"
+              v-for="(data, index) in dataList"
+              :key="data[valueKey] + index"
               clickable
-              @click="toggle(data,index)"
+              @click="toggle(data, index)"
             >
               <div slot="title">
-                <van-checkbox
-                  ref="checkboxes"
-                  :name="data[valueKey]"
-                >
+                <van-checkbox ref="checkboxes" :name="data[valueKey]">
                   <!-- <field-formatter
                     :label-key="labelKey"
                     :data="data"
                     :template-fields="templateFields"
                   /> -->
                   <div>
-                    <div v-for="(item, i) in data" :key="i">
-                      <span v-if="i!=='id_'">{{ item.label }}</span>
-                      <span v-if="i!=='id_'">：</span>
-                      <span v-if="item.fieldType!=='selector' && i!=='id_'">{{ item.val }}</span>
-                      <span v-else-if="i!=='id_'"><van-tag>{{ selectorArr.find(i=>i.id_ === item.val) ? selectorArr.find(i=>i.id_ === item.val).name_ :'' }}</van-tag></span>
+                    <div v-for="(item, i) in data.showlabel" :key="i">
+                      <span v-if="i !== 'id_'">{{ item.label }}</span>
+                      <span v-if="i !== 'id_'">：</span>
+                      <span
+                        v-if="item.fieldType !== 'selector' && i !== 'id_'"
+                        >{{ item.val }}</span
+                      >
+                      <span
+v-else-if="i !== 'id_'"
+                        ><van-tag>{{
+                          selectorArr.find(i => i.id_ === item.val)
+                            ? selectorArr.find(i => i.id_ === item.val).name_
+                            : ''
+                        }}</van-tag></span
+                      >
                     </div>
                   </div>
                 </van-checkbox>
@@ -72,7 +89,7 @@
               <span
                 v-if="hasChild(data)"
                 slot="right-icon"
-                @click="toggle(data,index)"
+                @click="toggle(data, index)"
               >
                 <span class="van-cell__right-icon" />
                 <van-icon name="arrow " class="van-cell__right-icon" />
@@ -99,14 +116,12 @@
 
       <van-cell-group>
         <van-swipe-cell
-          v-for="(data,index) in selectedData"
-          :key="data[valueKey]+index"
+          v-for="(data, index) in selectedData"
+          :key="data[valueKey] + index"
           :right-width="65"
           class="ibps-swipe-cell"
         >
-          <van-cell
-            clickable
-          >
+          <van-cell clickable>
             <template #title>
               <field-formatter
                 :label-key="labelKey"
@@ -137,10 +152,15 @@
 </template>
 
 <script>
-import { queryDataByKey, queryDataById, getByKey } from '@/api/platform/data/dataTemplate'
+import {
+  queryDataByKey,
+  queryDataById,
+  getByKey
+} from '@/api/platform/data/dataTemplate'
 import { remoteRequest } from '@/utils/remote'
 import TreeUtils from '@/utils/tree'
 import ActionUtils from '@/utils/action'
+import { buildLabelTitle } from '../templaterender/utils/index'
 import i18n from '@/utils/i18n' // Internationalization 国际化
 import FieldFormatter from './field-formatter'
 import IbpsPickerToolbar from '@/components/ibps-picker-toolbar'
@@ -155,13 +175,14 @@ export default {
     templateKey: String,
     templateFields: Object,
     params: Object,
-    value: Array,
+    values: Array,
     multiple: Boolean,
     leftText: String,
     searchPlaceholder: String,
     isTree: Boolean,
     datat: Object,
-    idKey: { // 唯一键
+    idKey: {
+      // 唯一键
       type: String,
       default: 'id_'
     },
@@ -169,7 +190,8 @@ export default {
       type: String,
       default: 'parentId'
     },
-    valueKey: { // 展示的key showLableKey
+    valueKey: {
+      // 展示的key showLableKey
       type: String,
       default: 'id_'
     },
@@ -182,7 +204,8 @@ export default {
       default: 'children'
     },
     queryKey: String,
-    dynamicParams: Object // 动态参数
+    dynamicParams: Object, // 动态参数
+    tem: Object
   },
   data() {
     return {
@@ -201,30 +224,43 @@ export default {
       page: 1,
       loading: true,
       finished: false,
-      selectorArr: []
+      selectorArr: [],
+      tems: {},
+      labelKeys: {},
+      childrenIndex: -1
     }
   },
   computed: {
     title() {
       if (this.multiple) {
         const length = this.checkbox.length
-        return length > 0 ? i18n.t('components.checkbox.title', { length: length }) : ''
+        return length > 0
+          ? i18n.t('components.checkbox.title', { length: length })
+          : ''
       } else {
         if (this.$utils.isEmpty(this.checkbox)) {
           return ''
         }
         const checked = this.checkbox[0]
-        return this.$utils.isNotEmpty(checked) ? this.cacheData[checked] ? this.cacheData[checked][this.labelKey] : '' : ''
+
+        this.labelKeys = buildLabelTitle(this.tem)
+        const a = this.handleLabel(this.dataList[this.childrenIndex])
+
+        return this.$utils.isNotEmpty(checked)
+          ? this.cacheData[checked]
+            ? a
+            : ''
+          : ''
       }
     },
     selectedData() {
-      return this.checkbox.map((d) => {
+      return this.checkbox.map(d => {
         return this.cacheData[d] || {}
       })
     }
   },
   watch: {
-    value: {
+    values: {
       handler(val, oldVal) {
         this.initData()
       },
@@ -242,21 +278,29 @@ export default {
     },
     dynamicParams(val, oldVal) {
       if (val !== oldVal && this.$utils.isNotEmpty(val)) {
-        this.loadData(this.params, true)
+        // this.loadData(this.params, true)
       }
+    },
+    tem: {
+      handler(val, oldVal) {
+        if (val !== oldVal && this.$utils.isNotEmpty(val)) {
+          this.dataList = []
+          // this.loadData(this.params, true)
+        }
+      },
+      deep: true
     }
-
   },
   created() {
     const sql = `select name_,id_ from ibps_party_entity `
-    this.$common.request('sql', sql).then((res) => {
+    this.$common.request('sql', sql).then(res => {
       const { data } = res.variables
       this.selectorArr = data
     })
   },
   methods: {
     initData() {
-      const data = this.value
+      const data = this.values
       this.checkedValue = []
       this.checkbox = []
       if (this.$utils.isEmpty(data)) {
@@ -275,7 +319,17 @@ export default {
     emitInitData(data) {
       this.$emit('init-data', data)
     },
-
+    handleLabel(data) {
+      const config = this.labelKeys
+      if (typeof config === 'function') {
+        return config(data)
+      } else if (typeof config === 'string') {
+        return data[config]
+      } else if (typeof config === 'undefined') {
+        const dataProp = data['name']
+        return dataProp === undefined ? '' : dataProp
+      }
+    },
     /**
      * 通过ID获取数据
      */
@@ -289,27 +343,33 @@ export default {
       }
       remoteRequest('dataTemplate', params, () => {
         return this.getRemoteDataTemplateByIdFunc(params)
-      }).then(responseData => {
-        if (this.$utils.isNotEmpty(responseData) && this.$utils.isNotEmpty(responseData.data)) {
-          const data = responseData.data[0] || {}
-          let key = id
-          if (this.$utils.isNotEmpty(data[this.valueKey])) {
-            key = data[this.valueKey]
-          }
-          this.cacheData[key] = data
-          this.checkedValue.push(data[this.valueKey])
-          this.emitInitData(this.getSelectedData(this.checkedValue))
-        }
-      }).catch(() => {
       })
+        .then(responseData => {
+          if (
+            this.$utils.isNotEmpty(responseData) &&
+            this.$utils.isNotEmpty(responseData.data)
+          ) {
+            const data = responseData.data[0] || {}
+            let key = id
+            if (this.$utils.isNotEmpty(data[this.valueKey])) {
+              key = data[this.valueKey]
+            }
+            this.cacheData[key] = data
+            this.checkedValue.push(data[this.valueKey])
+            this.emitInitData(this.getSelectedData(this.checkedValue))
+          }
+        })
+        .catch(() => {})
     },
     getRemoteDataTemplateByIdFunc(params) {
       return new Promise((resolve, reject) => {
-        queryDataById(params).then(response => {
-          resolve(response.data)
-        }).catch((error) => {
-          reject(error)
-        })
+        queryDataById(params)
+          .then(response => {
+            resolve(response.data)
+          })
+          .catch(error => {
+            reject(error)
+          })
       })
     },
 
@@ -329,14 +389,10 @@ export default {
       if (!this.isTre) {
         pagination = { page: this.page }
       }
-      getByKey({
-        dataTemplateKey: this.templateKey
-      }).then(response => {
-        this.dataTem = this.$utils.parseData(response.data).templates[0]
-        // this.loadAjaxOptions()
-        // TODO: 分页数据处理
-        // 加载数据
-        queryDataByKey(ActionUtils.formatParams(params, pagination)).then(response => {
+      // TODO: 分页数据处理
+      // 加载数据
+      queryDataByKey(ActionUtils.formatParams(params, pagination))
+        .then(response => {
           const dataResult = response.data.dataResult
           const pageResult = response.data.pageResult
           if (this.isTree) {
@@ -348,44 +404,49 @@ export default {
             // 初始化最顶级数据
             this.initRootTreeData(response.vars)
             // 缓存数据
-            dataResult.map((d) => {
+            dataResult.map(d => {
               this.cacheData[d[this.valueKey]] = d
             })
           } else {
-            // const mid = []
             const dl = dataResult
-            dl.map((d) => {
+            dl.map(d => {
               this.cacheData[d[this.valueKey]] = d
               // const objName = Object.keys(d)
-              const fb = {}
+              const fb = d
+              fb.showlabel = {}
+              if (typeof this.tem.display_columns !== 'undefined') {
+                const keyName = this.dataList.findIndex(t => t.id_ == d.id_)
+                if (typeof keyName !== -1) {
+                  this.tem.display_columns.forEach((it, i) => {
+                    let b = {}
 
-              this.dataTem.display_columns.forEach((it, i) => {
-                let b = {}
-                // const keyName = objName.find(t => t === it.name)
-                // if (typeof keyName !== 'undefined' && keyName) {
-                b = { 'label': it.label, 'val': d[it.name], 'fieldType': it.field_type }
-                // } else {
-                // b = d[it.name]
-                // }
-                fb[it.name] = b
-                // }
-              })
-              fb['id_'] = d['id_']
-              this.dataList.push(fb)
+                    b = {
+                      label: it.label,
+                      val: d[it.name],
+                      fieldType: it.field_type
+                    }
+                    fb.showlabel[it.name] = b
+                  })
+                  this.dataList.push(fb)
+                } else {
+                }
+              }
             })
           }
           this.page++
           // 加载状态结束
           this.loading = false
           // 数据全部加载完成
-          if (this.dataList.length >= pageResult.totalCount || this.page > pageResult.totalPages) {
+          if (
+            this.dataList.length >= pageResult.totalCount ||
+            this.page > pageResult.totalPages
+          ) {
             this.finished = true
           }
-        }).catch((e) => {
+        })
+        .catch(e => {
           console.error(e)
         })
-      }).catch(() => {
-      })
     },
     /**
      * 初始
@@ -404,7 +465,7 @@ export default {
       if (this.$utils.isEmpty(data)) {
         return []
       }
-      return data.map((d) => {
+      return data.map(d => {
         return this.cacheData[d]
       })
     },
@@ -456,6 +517,7 @@ export default {
       return false
     },
     toggle(data, index) {
+      this.childrenIndex = index
       if (!this.multiple) {
         this.$refs.checkboxGroup.toggleAll(false)
       }
@@ -513,7 +575,6 @@ export default {
         }
       }
     }
-
   }
 }
 </script>

src/business/platform/data/templaterender/custom-dialog/index.vue

@@ -14,7 +14,6 @@
     :is-link="isLink"
     :error="error"
     :error-message="errorMessage"
-
     :arrow-direction="arrowDirection"
     :label-class="labelClass"
     :label-width="labelWidth"
@@ -25,12 +24,18 @@
     :left-icon="leftIcon"
     :right-icon="rightIcon"
     :icon-prefix="iconPrefix"
-    :rules="editable?rules:null"
+    :rules="editable ? rules : null"
     readonly
     @click-input="onClick"
   >
     <template #label>
-      {{ label }}<van-icon v-if="desc && descPosition==='lableIcon'" name="warning" class="ibps-dialog-icon" @click="$action.descDialog({ title:label, message:desc })" />
+      {{ label
+      }}<van-icon
+        v-if="desc && descPosition === 'lableIcon'"
+        name="warning"
+        class="ibps-dialog-icon"
+        @click="$action.descDialog({ title: label, message: desc })"
+      />
     </template>
     <template v-if="editable" #right-icon>
       <van-icon
@@ -41,15 +46,15 @@
       />
       <van-icon
         v-else
-        :name="showPopup?'arrow-up':'arrow-down'"
+        :name="showPopup ? 'arrow-up' : 'arrow-down'"
         @click.native.stop="onClick"
       />
     </template>
     <template #input>
       <div v-if="$utils.isNotEmpty(selectedData)" class="van-field__control">
         <van-tag
-          v-for="(item,index) in selectedData"
-          :key="item[valueKey]+index"
+          v-for="(item, index) in selectedData"
+          :key="item[valueKey] + index"
           type="primary"
           class="ibps-tag-span"
           size="medium"
@@ -58,19 +63,26 @@
           <field-formatter
             :label-key="showLableKey"
             :data="item"
+            :tem="tem"
+            :field-type="fieldType"
             :template-fields="templateFields"
           />
         </van-tag>
       </div>
-      <input v-else :placeholder="placeholder" class="van-field__control" readonly>
+      <input
+        v-else
+        :placeholder="placeholder"
+        class="van-field__control"
+        readonly
+      />
       <!-- 数据模版对话框-->
       <data-template-popup
+        :tem="tem"
         :visible="showPopup"
         :template-key="templateKey"
         :params="params"
-        :value="selectedValue"
+        :values="selectedValue"
         :multiple="multiple"
-
         :left-text="leftText"
         :id-key="idKey"
         :value-key="valueKey"
@@ -80,13 +92,11 @@
         :query-key="queryKey"
         :template-fields="templateFields"
         :dynamic-params="dynamicParams"
-
         @init-data="initData"
         @cancel="onCancel"
         @confirm="onConfirm"
       />
     </template>
-
   </van-field>
 </template>
 
@@ -104,7 +114,11 @@ import i18n from '@/utils/i18n' // Internationalization 国际化
 
 import { isDef } from 'vant/lib/utils'
 import FieldMixin from '@/mixins/field'
-import { loadDataTemplateByKey, getDataTemplateListTemplate, buildDataTemplateFields } from '@/business/platform/data/utils'
+import {
+  loadDataTemplateByKey,
+  getDataTemplateListTemplate,
+  buildDataTemplateFields
+} from '@/business/platform/data/utils'
 import DataTemplatePopup from '@/business/platform/data/data-template/template'
 import FieldFormatter from '@/business/platform/data/data-template/field-formatter'
 
@@ -118,18 +132,21 @@ export default {
   props: {
     multiple: Boolean,
     dialogType: String, // 对话框类型
-    templateKey: { // 对话框对象的数据模版key
+    templateKey: {
+      // 对话框对象的数据模版key
       type: String,
       required: true
     },
-    store: { // 存储类型 对应[多选]有效，json： json字符串,id:只存储id， array：存储数组数据 ，arrayId: 字符串类型。
+    store: {
+      // 存储类型 对应[多选]有效，json： json字符串,id:只存储id， array：存储数组数据 ，arrayId: 字符串类型。
       type: String,
       default: 'json',
       validator: function(value) {
         return ['json', 'id', 'array', 'arrayId'].indexOf(value) !== -1
       }
     },
-    storeSeparator: { // 存储值分割符，对于设置字符串类型的分隔符
+    storeSeparator: {
+      // 存储值分割符，对于设置字符串类型的分隔符
       type: String,
       default: ','
     },
@@ -138,7 +155,8 @@ export default {
       default: i18n.t('cancel')
     },
     fieldOptions: Object,
-    dynamicParams: Object
+    dynamicParams: Object,
+    fieldType: String
   },
   data() {
     return {
@@ -154,12 +172,18 @@ export default {
       templateFields: {}, // 模版字段
       showPopup: false, // 弹窗
       selectedData: [], // 选中的数据，这个值是用于展示的
-      selectedValue: [] // 选中的值 是valueKey的值
+      selectedValue: [], // 选中的值 是valueKey的值
+      tem: {}
     }
   },
   computed: {
     showClear() {
-      return this.clearable && this.$utils.isNotEmpty(this.value) && isDef(this.value) && this.editable
+      return (
+        this.clearable &&
+        this.$utils.isNotEmpty(this.value) &&
+        isDef(this.value) &&
+        this.editable
+      )
     },
     showLableKey() {
       return this.labelKey
@@ -185,19 +209,22 @@ export default {
     // 加载加载配置数据
     loadData(key) {
       const params = {}
-      loadDataTemplateByKey(key, params).then((data) => {
-        const template = getDataTemplateListTemplate(data)
-
-        this.templateFields = buildDataTemplateFields(data.fields)
-        this.buildKey(data, template)
-      }).catch((e) => {
-        console.error(e)
-      })
+      loadDataTemplateByKey(key, params)
+        .then(data => {
+          const template = getDataTemplateListTemplate(data)
+          this.tem = template
+          this.templateFields = buildDataTemplateFields(data.fields)
+          this.buildKey(data, template)
+        })
+        .catch(e => {
+          console.error(e)
+        })
     },
     buildKey(dataTemplate, template) {
       this.idKey = this.valueKey = dataTemplate['unique']
       this.queryKey = this.getQueryKey(template['query_columns'])
-      if (dataTemplate.showType === 'tree') { // 树形
+      if (dataTemplate.showType === 'tree') {
+        // 树形
         this.isTree = true
         const displayColumns = template['display_columns']
         if (this.$utils.isNotEmpty(displayColumns)) {
@@ -209,7 +236,8 @@ export default {
         this.isTree = false
         const displayColumns = template['result_columns']
         if (this.$utils.isNotEmpty(displayColumns)) {
-          this.labelKey = (displayColumns[0] ? displayColumns[0]['name'] : '') || ''
+          this.labelKey =
+            (displayColumns[0] ? displayColumns[0]['name'] : '') || ''
         }
       }
     },
@@ -220,56 +248,71 @@ export default {
       if (this.$utils.isEmpty(value)) {
         return []
       }
-      if (this.store === 'json') { // json
-        const o = Object.prototype.toString.call(this.$utils.parseData(value)) === '[object Object]'
+      if (this.store === 'json') {
+        // json
+        const o =
+          Object.prototype.toString.call(this.$utils.parseData(value)) ===
+          '[object Object]'
         try {
-          const data = o ? [this.$utils.parseData(value)] : this.$utils.parseData(value)
-          return data.map((d) => {
+          const data = o
+            ? [this.$utils.parseData(value)]
+            : this.$utils.parseData(value)
+          return data.map(d => {
             return d[this.valueKey]
           })
         } catch (error) {
           console.error(error)
           return []
         }
-      } else if (this.store === 'id') { // id
+      } else if (this.store === 'id') {
+        // id
         return value.split(this.storeSeparator)
-      } else if (this.store === 'arrayId') { // 数组id
+      } else if (this.store === 'arrayId') {
+        // 数组id
         return value
       } else {
-        return value.map((d) => {
+        return value.map(d => {
           return d[this.valueKey]
         })
       }
     },
     getStoreValue(value) {
       const res = []
-      if (this.store === 'json') { // json
+      if (this.store === 'json') {
+        // json
         if (this.$utils.isEmpty(value)) {
           return ''
         }
         value.forEach(v => {
-          if (this.$utils.isEmpty(v)) { return true }
+          if (this.$utils.isEmpty(v)) {
+            return true
+          }
           const o = {}
           o[this.valueKey] = v[this.valueKey]
           o[this.labelKey] = v[this.labelKey]
           res.push(o)
         })
         return JSON.stringify(res)
-      } else if (this.store === 'id') { // id
+      } else if (this.store === 'id') {
+        // id
         value.forEach(v => {
           res.push(v[this.valueKey])
         })
         return res.join(this.storeSeparator)
-      } else if (this.store === 'arrayId') { // 数组id
-        return value.map((d) => {
+      } else if (this.store === 'arrayId') {
+        // 数组id
+        return value.map(d => {
           return d[this.valueKey]
         })
-      } else { // 数组
+      } else {
+        // 数组
         return value || []
       }
     },
     onClick() {
-      if (!this.editable) { return }
+      if (!this.editable) {
+        return
+      }
       this.initSelectedData()
       this.showPopup = true
     },
@@ -321,7 +364,8 @@ export default {
       if (this.$utils.isEmpty(data)) {
         return ''
       }
-      if (this.store === 'json') { // json
+      if (this.store === 'json') {
+        // json
         const resutlList = JSON.parse(this.$utils.newData(data))
         resutlList.forEach(element => {
           element[this.dialogId] = element[this.valueKey]

src/business/platform/data/templaterender/utils/index.js

@@ -106,30 +106,30 @@ export function buildDynamicParams(conditions) {
  * 构建label标题
  * @param {*} dataTemplate
  */
-export function buildLabelTitle(dataTemplate) {
+ export function buildLabelTitle(dataTemplate) {
   if (Utils.isEmpty(dataTemplate)) {
     return ''
   }
   // TODO: 数据模版不同类型不同的处理,需处理组合模版
-  const template = dataTemplate.dialog_list || dataTemplate.templates[0] || {}
+  const template = dataTemplate || {}
   //  标题文字
   const dataTitle = template.attrs ? template.attrs.data_title || {} : {}
-
+  // console.log(dataTitle,'dataTitledataTitledataTitle')
   const titleType = Utils.isNotEmpty(dataTitle) ? dataTitle.type : 'first'
   const dataTitleTitle = dataTitle ? dataTitle.title : ''
   const lableKey = template.result_columns && template.result_columns.length > 0 ? template.result_columns[0].name : ''
-  // return buildLinkLabelTitle(titleType, dataTitleTitle, lableKey)
-  return {'dataTitle':dataTitle,'titleType':titleType,'dataTitleTitle':dataTitleTitle,'lableKey':lableKey}
+
+  return buildLinkLabelTitle(titleType, dataTitleTitle, lableKey)
 }
 /**
  * 构建label标题
  * @param {*} dataTemplate
  */
-export function buildLinkLabelTitle(titleType = 'first', dataTitle, lableKey,data) {
+ export function buildLinkLabelTitle(titleType = 'first', dataTitle, lableKey) {
   if (titleType === 'first') {
     return lableKey
   } else {
-    // return function(data) {
+    return function(data) {
       const d = dataTitle.split(/(\$[0-9a-zA-Z._]+#[0-9A-Fa-f]*)/g)
       const rtn = []
 
@@ -141,9 +141,9 @@ export function buildLinkLabelTitle(titleType = 'first', dataTitle, lableKey,dat
         }
         rtn.push(a)
       })
-      console.log(rtn.join(''))
+
       return rtn.join('')
-    // }
+    }
   }
 }
 

src/business/platform/form/dynamic-form/form-field.vue

@@ -324,6 +324,7 @@
   <ibps-custom-dialog
     v-else-if="fieldType === 'customDialog'"
     v-model="dataModel"
+    :field-type="fieldType"
     :label="field.label"
     :desc="field.desc"
     :desc-position="descPosition"