@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/base/entity-view-config/FieldPropForm.vue

@@ -0,0 +1,687 @@
+<template>
+  <div class="field-prop">
+    <div class="field-prop__field">
+      <label class="is-required">名称</label>
+      <el-input :model-value="field.NAME" size="small" @update:model-value="set('NAME', $event)"></el-input>
+    </div>
+    <div class="field-prop__field">
+      <label class="is-required">编号</label>
+      <el-input
+        :model-value="field.CODE"
+        size="small"
+        class="field-prop__mono"
+        placeholder="视图列名，视图内唯一"
+        :disabled="!isDraft"
+        @update:model-value="set('CODE', $event)"
+      ></el-input>
+      <div class="field-prop__hint">
+        {{ isDraft ? '对应物理视图列名；「ID」为保留主键列，勿占用' : '编号创建后不可修改，需要更换请删除后重建' }}
+      </div>
+    </div>
+    <div class="field-prop__field">
+      <label class="is-required">类型</label>
+      <el-select :model-value="field.VIEW_TYPE" size="small" filterable @change="onViewTypeChange">
+        <el-option v-for="type in dataTypes" :key="type.code" :value="type.name" :label="type.name"></el-option>
+      </el-select>
+      <div v-if="field.DATA_SOURCE === 'field'" class="field-prop__hint">原值字段列发布时继承源属性类型</div>
+    </div>
+    <div class="field-prop__field">
+      <label class="is-required">数据来源</label>
+      <el-select :model-value="field.DATA_SOURCE" size="small" @change="onDataSourceChange">
+        <el-option v-for="item in dataSources" :key="item.value" :value="item.value" :label="item.label"></el-option>
+      </el-select>
+    </div>
+
+    <div class="field-prop__divider"></div>
+
+    <template v-if="field.DATA_SOURCE === 'field'">
+      <div class="field-prop__field">
+        <label class="is-required">来源字段</label>
+        <el-select
+          :model-value="sourceValue"
+          size="small"
+          filterable
+          placeholder="选择主对象或关联对象的字段"
+          @visible-change="onSourceDropdown"
+          @change="onSourceChange"
+        >
+          <el-option-group v-if="mainMeta.id" :label="`${mainMeta.name || '主对象'}（主对象）`">
+            <el-option
+              v-for="item in metaFieldsMap[mainMeta.id] || []"
+              :key="`main::${item.id}`"
+              :value="`main::${item.id}`"
+              :label="`${item.label}（${item.name}）· ${dataTypeMap[item.dataType] || item.dataType || ''}`"
+            ></el-option>
+          </el-option-group>
+          <el-option-group
+            v-for="source in sources"
+            :key="`source-${source.code}`"
+            :label="`${source.name}（${source.code} · ${relTypeLabel(source.relType) || '关联'}）`"
+          >
+            <el-option
+              v-for="item in metaFieldsMap[source.metaId] || []"
+              :key="`source::${source.code}::${item.id}`"
+              :value="`source::${source.code}::${item.id}`"
+              :label="`${item.label}（${item.name}）· ${dataTypeMap[item.dataType] || item.dataType || ''}`"
+            ></el-option>
+          </el-option-group>
+          <el-option-group
+            v-for="candidate in unconfiguredCandidates"
+            :key="`candidate-${candidate.flag}`"
+            :label="`${candidateName(candidate)}（${relTypeLabel(candidate.relType) || '关联'} · 首次选择自动创建源）`"
+          >
+            <el-option
+              v-for="item in metaFieldsMap[candidate.relatedMetaId] || []"
+              :key="`candidate::${candidate.flag}::${item.id}`"
+              :value="`candidate::${candidate.flag}::${item.id}`"
+              :label="`${item.label}（${item.name}）· ${dataTypeMap[item.dataType] || item.dataType || ''}`"
+            ></el-option>
+          </el-option-group>
+        </el-select>
+        <div v-if="sourceInfo" class="field-prop__src">
+          <span :class="['field-prop__src-tag', (field.SOURCE_CODE || field.REL_FLAG) ? 'is-rel' : 'is-main']">
+            {{ (field.SOURCE_CODE || field.REL_FLAG) ? relTypeText : '主对象' }}
+          </span>
+          <span class="field-prop__src-name">{{ sourceInfo.name }} · {{ sourceFieldLabel }}</span>
+        </div>
+        <div v-else class="field-prop__hint">可直接选择主对象或任意关联对象的字段</div>
+      </div>
+      <div class="field-prop__field">
+        <label>取值函数</label>
+        <el-select v-if="isManySource" :model-value="field.VALUE_FN || ''" size="small" @change="onValueFnChange">
+          <el-option v-for="fn in valueFns" :key="fn.value" :value="fn.value" :label="fn.label"></el-option>
+        </el-select>
+        <template v-else>
+          <el-input model-value="直接取值" size="small" disabled></el-input>
+          <div class="field-prop__hint">仅「一对多」聚合对象的字段可设置取值函数</div>
+        </template>
+      </div>
+      <div v-if="isDistinctFn" class="field-prop__field">
+        <label>聚合去重</label>
+        <el-checkbox :model-value="field.DISTINCT_FLAG === '1'" @change="set('DISTINCT_FLAG', $event ? '1' : '')">
+          DISTINCT（去重后再聚合）
+        </el-checkbox>
+      </div>
+      <!--
+        多字段/带运算的取值统一走「公式生成」：公式编辑器本就是点选式（参数树选字段 +
+        中文函数库 + 运算符），能表达任意计算，不在此另造一套场景化配置。
+        这里只对存量表达式做只读展示（中文解读）。
+      -->
+      <div v-if="isAggFn && field.SOURCE_EXPR" class="field-prop__field">
+        <label>取值方式</label>
+        <div class="field-prop__calc">{{ exprPreview || field.SOURCE_EXPR }}</div>
+        <div class="field-prop__hint">
+          该字段按上述表达式取值，此处只作展示。需要调整请把「数据来源」改为「公式生成」，
+          在公式编辑器里点选字段与函数配置。
+        </div>
+      </div>
+      <div v-else-if="isAggFn" class="field-prop__hint">
+        需要多个字段参与计算（相加、相乘、按条件统计等）？把「数据来源」改为「公式生成」，
+        在公式编辑器里点选配置，例如：求和(空值兜底(应发合计) + 空值兜底(岗位津贴))。
+      </div>
+      <template v-if="isOrderFn">
+        <div class="field-prop__field">
+          <label>排序字段</label>
+          <el-select :model-value="field.ORDER_FIELD || ''" size="small" clearable filterable @change="set('ORDER_FIELD', $event)">
+            <el-option v-for="item in sourceMetaFields" :key="item.id" :value="item.id" :label="`${item.label}（${item.name}）`"></el-option>
+          </el-select>
+        </div>
+        <div class="field-prop__field">
+          <label>排序方向</label>
+          <el-select :model-value="field.ORDER_DIR || 'asc'" size="small" @change="set('ORDER_DIR', $event)">
+            <el-option value="asc" label="升序"></el-option>
+            <el-option value="desc" label="降序"></el-option>
+          </el-select>
+        </div>
+      </template>
+      <div class="field-prop__field">
+        <label>
+          代码映射
+          <el-button type="primary" link size="small" icon="el-icon-plus" @click="addCodeMapRow">添加</el-button>
+        </label>
+        <div v-if="codeMapRows.length === 0" class="field-prop__hint">选填，将显示值映射为源值（生成 CASE），如 男 → 1</div>
+        <div v-for="(row, index) in codeMapRows" :key="index" class="field-prop__kv">
+          <el-input v-model="row.key" size="small" placeholder="显示值" @input="syncCodeMap"></el-input>
+          <i class="el-icon-right"></i>
+          <el-input v-model="row.value" size="small" placeholder="源值" @input="syncCodeMap"></el-input>
+          <i class="el-icon-delete field-prop__kv-del" @click="removeCodeMapRow(index)"></i>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="field.DATA_SOURCE === 'formula'" class="field-prop__field">
+      <label class="is-required">取值公式</label>
+      <div class="field-prop__formula" :title="field.FORMULA">
+        <template v-if="field.FORMULA">{{ field.FORMULA }}</template>
+        <span v-else class="field-prop__formula-empty">未设置公式</span>
+      </div>
+      <el-button size="small" icon="el-icon-edit-outline" class="field-prop__formula-btn" @click="$emit('open-formula')">
+        打开公式编辑器
+      </el-button>
+    </div>
+
+    <template v-if="field.DATA_SOURCE === 'fixed'">
+      <!-- 选项类型：先选代码表，再从代码表选项中选指定值 -->
+      <template v-if="field.VIEW_TYPE === '选项'">
+        <div class="field-prop__field">
+          <label class="is-required">代码表</label>
+          <epx-object
+            :key="`cd-${field.ID || 'draft'}`"
+            :model-value="field.CODE_DEFINE"
+            :field-configs="{ state: 'ADD', attriLabel: '代码表', dataType: 'object', codeKey: 'FM_CODE_DEFINE' }"
+            @update:model-value="onCodeDefineChange"
+          ></epx-object>
+        </div>
+        <div class="field-prop__field">
+          <label class="is-required">指定值</label>
+          <el-select v-if="field.CODE_DEFINE" :model-value="field.FIXED_VALUE" size="small" filterable @change="set('FIXED_VALUE', $event)">
+            <el-option v-for="option in codeDefineOptions" :key="option.code" :value="option.code" :label="option.name"></el-option>
+          </el-select>
+          <el-input v-else size="small" disabled placeholder="请先选择代码表"></el-input>
+        </div>
+      </template>
+      <!-- 对象类型：先选关联对象，再选该对象的记录 -->
+      <template v-else-if="field.VIEW_TYPE === '对象'">
+        <div class="field-prop__field">
+          <label class="is-required">关联对象</label>
+          <epx-object
+            :key="`le-${field.ID || 'draft'}`"
+            :model-value="field.LINK_ENTITY"
+            :field-configs="{ state: 'ADD', attriLabel: '关联对象', dataType: 'object', codeKey: 'FM_ENTITY' }"
+            @update:model-value="onLinkEntityChange"
+          ></epx-object>
+        </div>
+        <div class="field-prop__field">
+          <label class="is-required">指定值</label>
+          <epx-object
+            v-if="field.LINK_ENTITY"
+            :key="`lv-${field.LINK_ENTITY}`"
+            :model-value="field.FIXED_VALUE"
+            :field-configs="{ state: 'ADD', attriLabel: '指定值', dataType: 'object', codeKey: field.LINK_ENTITY }"
+            @update:model-value="onFixedObjectChange"
+          ></epx-object>
+          <el-input v-else size="small" disabled placeholder="请先选择关联对象"></el-input>
+        </div>
+      </template>
+      <!-- 时间类型：先选日期精度，再按精度选日期 -->
+      <template v-else-if="field.VIEW_TYPE === '时间'">
+        <div class="field-prop__field">
+          <label class="is-required">日期精度</label>
+          <el-select :model-value="field.DATE_PRECISION || 'date'" size="small" @change="onPrecisionChange">
+            <el-option v-for="option in precisionOptions" :key="option.code" :value="option.code" :label="option.name"></el-option>
+          </el-select>
+        </div>
+        <div class="field-prop__field">
+          <label class="is-required">指定值</label>
+          <el-time-picker
+            v-if="(field.DATE_PRECISION || 'date') === 'time'"
+            :model-value="field.FIXED_VALUE"
+            size="small"
+            value-format="HH:mm:ss"
+            placeholder="选择时间"
+            @update:model-value="set('FIXED_VALUE', $event || '')"
+          ></el-time-picker>
+          <el-date-picker
+            v-else
+            :model-value="field.FIXED_VALUE"
+            size="small"
+            :type="datePicker.type"
+            :value-format="datePicker.valueFormat"
+            placeholder="选择日期"
+            @update:model-value="set('FIXED_VALUE', $event || '')"
+          ></el-date-picker>
+        </div>
+      </template>
+      <div v-else class="field-prop__field">
+        <label class="is-required">指定值</label>
+        <el-input :model-value="field.FIXED_VALUE" size="small" placeholder="请输入固定值" @update:model-value="set('FIXED_VALUE', $event)"></el-input>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { DATA_SOURCES, VALUE_FNS, relTypeLabel, mapViewType, DATE_PRECISION_CODE_KEY, DATE_PRECISION_PICKERS } from './constants'
+
+export default {
+  name: 'epx-base-entity-view-config-prop',
+  props: {
+    // 字段工作副本（大写键，与 FM_VIEW_FIELD 字段一致）
+    field: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 已登记源 [{ code, name, metaId, relType, flag }]
+    sources: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 主对象的关联候选（relationCandidates），来源字段下拉展示全部可关联对象
+    candidates: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    mainMeta: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    metaFieldsMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 字段类型代码表（FM_DATA_TYPE）编号 -> 名称
+    dataTypeMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 字段类型代码表全量选项 [{ code, name }]，「类型」下拉展示全部字段类型
+    dataTypes: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    isDraft: Boolean
+  },
+  data () {
+    return {
+      dataSources: DATA_SOURCES,
+      valueFns: VALUE_FNS,
+      codeMapRows: []
+    }
+  },
+  computed: {
+    sourceInfo () {
+      if (this.field.DATA_SOURCE !== 'field') return null
+      // 关联对象绑定（REL_FLAG 保存期入参，后端自动登记源）：按候选展示
+      if (this.field.REL_FLAG) {
+        const candidate = this.candidates.find(item => item.flag === this.field.REL_FLAG)
+        return candidate
+          ? { name: candidate.title || candidate.relatedName, metaId: candidate.relatedMetaId, relType: candidate.relType }
+          : null
+      }
+      if (!this.field.SOURCE_CODE) {
+        // 主对象字段必须有来源字段才算已绑定；一对多源的纯聚合表达式列（无 SOURCE_FIELD）不落这里
+        return this.field.SOURCE_FIELD
+          ? { name: this.mainMeta.name || '主对象', metaId: this.mainMeta.id, relType: '' }
+          : null
+      }
+      // 关联源列：SOURCE_FIELD 可为空（聚合表达式列，如多个工资项 IFNULL 相加）——
+      // 不能因无来源字段就视为未绑定，否则取值函数/聚合表达式面板整体不可编辑
+      const source = this.sources.find(item => item.code === this.field.SOURCE_CODE)
+      return source ? { name: source.name, metaId: source.metaId, relType: source.relType } : null
+    },
+    unconfiguredCandidates () {
+      return this.candidates.filter(candidate =>
+        !this.sources.some(source => source.flag === candidate.flag)
+      )
+    },
+    // 来源字段下拉当前值保留明确的源编号，支持同一关系登记多个源实例
+    sourceValue () {
+      if (!this.field.SOURCE_FIELD) return ''
+      if (this.field.REL_FLAG) return `candidate::${this.field.REL_FLAG}::${this.field.SOURCE_FIELD}`
+      if (!this.field.SOURCE_CODE) return `main::${this.field.SOURCE_FIELD}`
+      const source = this.sources.find(item => item.code === this.field.SOURCE_CODE)
+      return source ? `source::${source.code}::${this.field.SOURCE_FIELD}` : ''
+    },
+    relTypeText () {
+      return this.sourceInfo ? relTypeLabel(this.sourceInfo.relType) || this.field.SOURCE_CODE : ''
+    },
+    sourceMetaFields () {
+      return (this.sourceInfo && this.metaFieldsMap[this.sourceInfo.metaId]) || []
+    },
+    sourceFieldLabel () {
+      if (!this.field.SOURCE_FIELD) return '聚合表达式'
+      const field = this.sourceMetaFields.find(item => item.id === this.field.SOURCE_FIELD)
+      return field ? field.label : this.field.SOURCE_FIELD
+    },
+    // 表达式解读：把物理列名替换成 [中文名] 回显（ITEM67_ 这类编码列名没人看得懂）。
+    // 按列名长度倒序替换，避免短列名命中长列名的前缀。
+    exprPreview () {
+      const expr = this.field.SOURCE_EXPR || ''
+      if (!expr.trim() || !this.sourceMetaFields.length) return ''
+      let out = expr
+      const fields = this.sourceMetaFields
+        .filter(item => item.dbColumn)
+        .slice()
+        .sort((a, b) => b.dbColumn.length - a.dbColumn.length)
+      fields.forEach(item => {
+        out = out.split(item.dbColumn).join(`[${item.label || item.name}]`)
+      })
+      return out === expr ? '' : out
+    },
+    isManySource () {
+      return !!this.sourceInfo && this.sourceInfo.relType === '1'
+    },
+    // 选项类型指定值：所选代码表的选项（按代码表 id 走 store 代码缓存）
+    codeDefineOptions () {
+      const key = this.field.CODE_DEFINE
+      if (!key) return []
+      const options = this.$store.getters.getCodeById(key)
+      if (!options) {
+        this.$store.dispatch({ type: 'ADD_LIST', key })
+        return []
+      }
+      return options
+    },
+    // 日期精度选项（FM_VIEW_FIELD.DATE_PRECISION 的代码表）
+    precisionOptions () {
+      const options = this.$store.getters.getCodeById(DATE_PRECISION_CODE_KEY)
+      if (!options) {
+        this.$store.dispatch({ type: 'ADD_LIST', key: DATE_PRECISION_CODE_KEY })
+        return []
+      }
+      return options
+    },
+    datePicker () {
+      return DATE_PRECISION_PICKERS[this.field.DATE_PRECISION] || DATE_PRECISION_PICKERS.date
+    },
+    isAggFn () {
+      return this.isManySource && ['sum', 'avg', 'max', 'min', 'count'].includes(this.field.VALUE_FN)
+    },
+    // 去重只对真聚合有意义（最大/最小去重不改变结果，拼接跨方言不支持）
+    isDistinctFn () {
+      return this.isManySource && ['sum', 'avg', 'count'].includes(this.field.VALUE_FN)
+    },
+    isOrderFn () {
+      return this.isManySource && ['raw', 'last', 'concat'].includes(this.field.VALUE_FN)
+    }
+  },
+  watch: {
+    'field.ID': {
+      handler () {
+        this.initCodeMap()
+      },
+      immediate: true
+    },
+    'field.DATA_SOURCE' () {
+      this.initCodeMap()
+    },
+    isDraft () {
+      this.initCodeMap()
+    }
+  },
+  methods: {
+    relTypeLabel,
+    set (key, value) {
+      this.$emit('change', { [key]: value })
+    },
+    candidateName (candidate) {
+      const source = this.sources.find(item => item.flag === candidate.flag)
+      return (source && source.name) || candidate.title || candidate.relatedName
+    },
+    // 切换类型：指定值列清掉旧类型的取值与辅助配置
+    onViewTypeChange (value) {
+      const patch = { VIEW_TYPE: value }
+      if (this.field.DATA_SOURCE === 'fixed') {
+        patch.FIXED_VALUE = ''
+        patch.CODE_DEFINE = ''
+        patch.LINK_ENTITY = ''
+        patch.DATE_PRECISION = ''
+      }
+      this.$emit('change', patch)
+    },
+    onCodeDefineChange (v) {
+      this.$emit('change', { CODE_DEFINE: (v && v.id) || '', FIXED_VALUE: '' })
+    },
+    onLinkEntityChange (v) {
+      this.$emit('change', { LINK_ENTITY: (v && v.id) || '', FIXED_VALUE: '' })
+    },
+    onFixedObjectChange (v) {
+      this.set('FIXED_VALUE', (v && v.id) || '')
+    },
+    onPrecisionChange (value) {
+      this.$emit('change', { DATE_PRECISION: value, FIXED_VALUE: '' })
+    },
+    // 切换数据来源：清掉不适用的取值配置，待保存时一并提交
+    onDataSourceChange (value) {
+      const patch = { DATA_SOURCE: value }
+      if (value !== 'field') {
+        patch.SOURCE_CODE = ''
+        patch.SOURCE_META_ID = ''
+        patch.REL_FLAG = ''
+        patch.SOURCE_FIELD = ''
+        patch.VALUE_FN = ''
+        patch.DISTINCT_FLAG = ''
+        patch.SOURCE_EXPR = ''
+        patch.ORDER_FIELD = ''
+        patch.ORDER_DIR = ''
+        patch.CODE_MAP = ''
+      }
+      if (value !== 'formula') patch.FORMULA = ''
+      if (value !== 'fixed') {
+        patch.FIXED_VALUE = ''
+        patch.CODE_DEFINE = ''
+        patch.LINK_ENTITY = ''
+        patch.DATE_PRECISION = ''
+      }
+      this.$emit('change', patch)
+    },
+    // 打开来源字段下拉时懒加载各候选对象的字段
+    onSourceDropdown (open) {
+      if (!open) return
+      this.candidates.forEach(candidate => {
+        if (!this.metaFieldsMap[candidate.relatedMetaId]) this.$emit('load-meta-fields', candidate.relatedMetaId)
+      })
+      this.sources.forEach(source => {
+        if (!this.metaFieldsMap[source.metaId]) this.$emit('load-meta-fields', source.metaId)
+      })
+    },
+    onSourceChange (value) {
+      if (!value) return
+      const parts = value.split('::')
+      const kind = parts[0]
+      const fieldId = kind === 'main' ? parts[1] : parts[2]
+      const source = kind === 'source'
+        ? (this.sources.find(item => item.code === parts[1]) || {})
+        : {}
+      const candidate = kind === 'candidate'
+        ? (this.candidates.find(item => item.flag === parts[1]) || {})
+        : {}
+      const metaId = kind === 'main' ? this.mainMeta.id : (source.metaId || candidate.relatedMetaId)
+      const metaField = (this.metaFieldsMap[metaId] || []).find(item => item.id === fieldId) || {}
+      const patch = { SOURCE_FIELD: fieldId, VIEW_TYPE: mapViewType(metaField.dataType) }
+      if (!this.field.NAME) patch.NAME = metaField.label || metaField.name || ''
+      if (kind === 'main') {
+        patch.SOURCE_CODE = ''
+        patch.SOURCE_META_ID = ''
+        patch.REL_FLAG = ''
+        patch.VALUE_FN = ''
+        patch.DISTINCT_FLAG = ''
+        patch.SOURCE_EXPR = ''
+        patch.ORDER_FIELD = ''
+        patch.ORDER_DIR = ''
+      } else {
+        if (kind === 'source') {
+          // 已登记源按 SOURCE_CODE 精确绑定，多个同关系源实例互不混淆
+          patch.SOURCE_CODE = source.code || ''
+          patch.SOURCE_META_ID = ''
+          patch.REL_FLAG = ''
+        } else {
+          // 未登记关系保留快捷入口，首次保存时由后端在同一事务内创建默认源
+          patch.SOURCE_CODE = ''
+          patch.SOURCE_META_ID = candidate.relatedMetaId || ''
+          patch.REL_FLAG = candidate.flag || ''
+        }
+        const relType = source.relType || candidate.relType
+        if (relType === '1') {
+          if (!this.field.VALUE_FN) patch.VALUE_FN = 'raw'
+        } else {
+          patch.VALUE_FN = ''
+          patch.DISTINCT_FLAG = ''
+          patch.SOURCE_EXPR = ''
+          patch.ORDER_FIELD = ''
+          patch.ORDER_DIR = ''
+        }
+      }
+      this.$emit('change', patch)
+    },
+    onValueFnChange (value) {
+      const patch = { VALUE_FN: value }
+      if (!['raw', 'last', 'concat'].includes(value)) {
+        patch.ORDER_FIELD = ''
+        patch.ORDER_DIR = ''
+      }
+      if (!['sum', 'avg', 'max', 'min', 'count'].includes(value)) {
+        patch.SOURCE_EXPR = ''
+      }
+      if (!['sum', 'avg', 'count'].includes(value)) {
+        patch.DISTINCT_FLAG = ''
+      }
+      this.$emit('change', patch)
+    },
+    initCodeMap () {
+      let map = {}
+      try {
+        map = this.field.CODE_MAP ? JSON.parse(this.field.CODE_MAP) : {}
+      } catch (e) {
+        map = {}
+      }
+      this.codeMapRows = Object.keys(map).map(key => ({ key, value: map[key] }))
+    },
+    addCodeMapRow () {
+      this.codeMapRows.push({ key: '', value: '' })
+    },
+    removeCodeMapRow (index) {
+      this.codeMapRows.splice(index, 1)
+      this.syncCodeMap()
+    },
+    syncCodeMap () {
+      const map = {}
+      this.codeMapRows.forEach(row => {
+        if (row.key !== '') map[row.key] = row.value
+      })
+      this.set('CODE_MAP', Object.keys(map).length ? JSON.stringify(map) : '')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.field-prop {
+  padding: 18px 18px 24px;
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    margin-bottom: var(--epx-space-3);
+    > label {
+      font-size: var(--epx-font-size-s);
+      color: var(--color-text-secondary);
+      display: flex;
+      align-items: center;
+      &.is-required::before {
+        content: '*';
+        color: #f56c6c;
+        margin-right: 3px;
+      }
+    }
+    .el-select {
+      width: 100%;
+    }
+  }
+  &__mono {
+    :deep(input),
+    :deep(textarea) {
+      font-family: ui-monospace, Menlo, monospace;
+    }
+  }
+  &__calc {
+    padding: 7px 10px;
+    border-radius: var(--epx-radius-base);
+    background: var(--epx-bg);
+    border: 1px solid var(--epx-border);
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-primary);
+    line-height: 1.7;
+    word-break: break-all;
+  }
+  &__hint {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-disabled);
+    line-height: 1.5;
+  }
+  &__divider {
+    height: 1px;
+    background: var(--epx-border);
+    margin: 4px 0 18px;
+  }
+  &__src {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    flex-wrap: wrap;
+    min-height: 32px;
+    padding: var(--epx-space-2) var(--epx-space-3);
+    background: var(--epx-bg-card);
+    border: 1px solid var(--epx-border);
+    border-radius: var(--epx-radius-base);
+  }
+  &__src-tag {
+    font-size: var(--epx-font-size-s);
+    padding: 2px 8px;
+    border-radius: var(--epx-radius-base);
+    white-space: nowrap;
+    &.is-main {
+      @include font_color_primary;
+      @include bg_color_primary(0.1);
+    }
+    &.is-rel {
+      background: #fff2e6;
+      color: #d9822b;
+    }
+  }
+  &__src-name {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-primary);
+  }
+  &__kv {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    margin-bottom: var(--epx-space-2);
+    i {
+      color: var(--color-text-disabled);
+      flex: 0 0 auto;
+    }
+  }
+  &__kv-del {
+    cursor: pointer;
+    &:hover {
+      color: #f56c6c !important;
+    }
+  }
+  &__formula {
+    padding: var(--epx-space-3) var(--epx-space-3);
+    background: var(--epx-bg);
+    border: 1px solid #d8ecdd;
+    border-radius: var(--epx-radius-base);
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: var(--epx-font-size-s);
+    color: #3a7d4e;
+    word-break: break-all;
+    line-height: 1.6;
+    min-height: 40px;
+  }
+  &__formula-empty {
+    color: var(--color-text-disabled);
+    font-family: inherit;
+  }
+  &__formula-btn {
+    width: 100%;
+  }
+}
+</style>