update:表单自定义对话框数据联动功能改进

src/business/platform/form/formbuilder/right-aside/components/data-template-linkdata.vue

@@ -1,176 +1,194 @@
 <template>
-  <el-dialog
-    :title="title"
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    class="data-template-linkdata-dialog"
-    top="0"
-    width="50%"
-    append-to-body
-    @open="getFormData"
-    @close="closeDialog"
-  >
-    <el-table ref="elTable" :data="formData" border stripe>
-      <el-table-column label="返回结果字段" prop="label" />
-      <el-table-column label="绑定显示的属性" prop="field">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.field" clearable>
-            <el-option
-              v-for="field in boFields"
-              :key="field.name"
-              :value="field.name"
-              :label="field.label"
-            />
-          </el-select>
-        </template>
-      </el-table-column>
-    </el-table>
+    <el-dialog
+        :title="title"
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        class="data-template-linkdata-dialog"
+        top="0"
+        width="70%"
+        append-to-body
+        style="margin-top:80px"
+        @open="getFormData"
+        @close="closeDialog"
+    >
+        <el-table ref="elTable" :data="formData" border stripe>
+            <el-table-column label="返回结果字段" prop="label" />
+            <el-table-column label="绑定显示的属性" prop="field">
+                <template slot-scope="scope">
+                    <el-select v-model="scope.row.field" clearable @clear="scope.row.showRule=''">
+                        <el-option
+                            v-for="field in boFields"
+                            :key="field.name"
+                            :value="field.name"
+                            :label="field.label"
+                        />
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column prop="showRule">
+                <template slot="header" slot-scope="scope">
+                    <el-tooltip class="item" effect="dark" content="自定义联动数据展示模版，可联动多个字段，该字段为空时原样输出返回结果字段数据。模版示例：姓名:${name}，年龄：${age}" placement="top-start">
+                        <span>
+                            自定义数据格式
+                            <i class="el-icon-question" />
+                        </span>
+
+                    </el-tooltip>
+                </template>
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.showRule" :disabled="scope.row.field===''" :placeholder="scope.row.field ===''?'请先绑定属性':'请输入数据模版'" />
+                </template>
+            </el-table-column>
+        </el-table>
 
-    <div slot="footer" class="el-dialog--center">
-      <ibps-toolbar
-        :actions="toolbars"
-        @action-event="handleActionEvent"
-      />
-    </div>
+        <div slot="footer" class="el-dialog--center">
+            <ibps-toolbar
+                :actions="toolbars"
+                @action-event="handleActionEvent"
+            />
+        </div>
 
-  </el-dialog>
+    </el-dialog>
 </template>
 <script>
 import ActionUtils from '@/utils/action'
 export default {
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: '设置联动数据'
-    },
-    columns: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    data: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    fields: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      dialogVisible: this.visible,
-      formName: 'form',
-      toolbars: [
-        { key: 'confirm' },
-        { key: 'reset', label: '重置', icon: 'ibps-icon-undo', type: 'danger' },
-        { key: 'cancel' }
-      ],
-      formData: [],
-      rules: {
-        id: [{ required: true, message: this.$t('validate.required') }],
-        text: [{ required: true, message: this.$t('validate.required') }]
-      }
-    }
-  },
-  computed: {
-    boFields() {
-      return this.fields || []
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-        if (this.dialogVisible) {
-          this.$nextTick(() => {
-            this.$refs.elTable.doLayout()
-          })
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: '设置联动数据'
+        },
+        columns: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        data: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        fields: {
+            type: Array,
+            default: () => {
+                return []
+            }
         }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    handleActionEvent({ key }) {
-      switch (key) {
-        case 'confirm':
-          this.handleConfirm()
-          break
-        case 'reset':
-          this.handleReset()
-          break
-        case 'cancel':
-          this.closeDialog()
-          break
-        default:
-          break
-      }
     },
-    handleConfirm() {
-      this.$emit('callback', this.formData)
-      this.closeDialog()
+    data () {
+        return {
+            dialogVisible: this.visible,
+            formName: 'form',
+            toolbars: [
+                { key: 'confirm' },
+                { key: 'reset', label: '重置', icon: 'ibps-icon-undo', type: 'danger' },
+                { key: 'cancel' }
+            ],
+            formData: [],
+            rules: {
+                id: [{ required: true, message: this.$t('validate.required') }],
+                text: [{ required: true, message: this.$t('validate.required') }]
+            }
+        }
     },
-    handleReset() {
-      for (let i = 0; i < this.formData.length; i++) {
-        this.formData[i].field = ''
-      }
-      ActionUtils.success('重置成功！')
+    computed: {
+        boFields () {
+            return this.fields || []
+        }
     },
-    // 关闭当前窗口
-    closeDialog() {
-      this.$emit('close', false)
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
+                if (this.dialogVisible) {
+                    this.$nextTick(() => {
+                        this.$refs.elTable.doLayout()
+                    })
+                }
+            },
+            immediate: true
+        }
     },
-    getFormData() {
-      if (this.$utils.isEmpty(this.columns)) {
-        return
-      }
-      const formDataMap = {}
-      if (this.$utils.isNotEmpty(this.data)) {
-        const data = JSON.parse(JSON.stringify(this.data))
-        data.forEach(d => {
-          formDataMap[d.name] = d
-        })
-      }
-      const fieldsMap = {}
-      if (this.$utils.isNotEmpty(this.boFields)) {
-        const data = JSON.parse(JSON.stringify(this.boFields))
-        data.forEach(d => {
-          fieldsMap[d.name] = d
-        })
-      }
+    methods: {
+        handleActionEvent ({ key }) {
+            switch (key) {
+                case 'confirm':
+                    this.handleConfirm()
+                    break
+                case 'reset':
+                    this.handleReset()
+                    break
+                case 'cancel':
+                    this.closeDialog()
+                    break
+                default:
+                    break
+            }
+        },
+        handleConfirm () {
+            this.$emit('callback', this.formData)
+            this.closeDialog()
+        },
+        handleReset () {
+            for (let i = 0; i < this.formData.length; i++) {
+                this.formData[i].field = ''
+                this.formData[i].showRule = ''
+            }
+            ActionUtils.success('重置成功！')
+        },
+        // 关闭当前窗口
+        closeDialog () {
+            this.$emit('close', false)
+        },
+        getFormData () {
+            if (this.$utils.isEmpty(this.columns)) {
+                return
+            }
+            const formDataMap = {}
+            if (this.$utils.isNotEmpty(this.data)) {
+                const data = JSON.parse(JSON.stringify(this.data))
+                data.forEach(d => {
+                    formDataMap[d.name] = d
+                })
+            }
+            const fieldsMap = {}
+            if (this.$utils.isNotEmpty(this.boFields)) {
+                const data = JSON.parse(JSON.stringify(this.boFields))
+                data.forEach(d => {
+                    fieldsMap[d.name] = d
+                })
+            }
 
-      const formData = []
-      for (let i = 0; i < this.columns.length; i++) {
-        const column = this.columns[i]
-        const name = column.name
-        const data = {
-          name: name,
-          label: column.label,
-          field: ''
+            const formData = []
+            for (let i = 0; i < this.columns.length; i++) {
+                const column = this.columns[i]
+                const name = column.name
+                const data = {
+                    name: name,
+                    label: column.label,
+                    field: ''
+                }
+                if (formDataMap[name]) {
+                    const fieldData = formDataMap[name] || {}
+                    const field = fieldData.field
+                    const showRule = fieldData.showRule
+                    if (this.$utils.isNotEmpty(field) && fieldsMap[field]) {
+                        data['field'] = field
+                        data['showRule'] = showRule
+                    }
+                }
+                formData.push(data)
+            }
+            this.formData = formData
         }
-        if (formDataMap[name]) {
-          const fieldData = formDataMap[name] || {}
-          const field = fieldData.field
-          if (this.$utils.isNotEmpty(field) && fieldsMap[field]) {
-            data['field'] = field
-          }
-        }
-        formData.push(data)
-      }
-      this.formData = formData
     }
-  }
 }
 </script>
 <style lang="scss" >

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

@@ -1125,8 +1125,25 @@ export default {
                         this.changeFormData(fieldName, data[item.name] || '')
                     }
                 }
+
+                // 自定义数据联动
+                const showRule = item.showRule
+                if (this.$utils.isNotEmpty(showRule)) {
+                    const fieldName = fieldObj.length > 1 ? fieldObj[1] : fieldObj[0]
+                    if (this.$utils.isNotEmpty(fieldName) && this.models.hasOwnProperty(fieldName)) {
+                        this.changeFormData(fieldName, this.replacePlaceholders(data, showRule) || '')
+                    }
+                }
             }
         },
+        // 自定义数据格式转换
+        replacePlaceholders (data, showRule) {
+            // 使用正则表达式找到所有${...}的占位符
+            return showRule.replace(/\$\{([^}]+)\}/g, (_, placeholder) => {
+                // 尝试从variables对象中获取对应变量的值
+                return data[placeholder] || `${placeholder}` // 如果找不到，就返回占位符本身
+            })
+        },
         // 联动属性
         handleLinkageAttr (value, data) {
             if (this.multipleString) {