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

package/src/visual/EntityList.vue

@@ -0,0 +1,838 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from './Component.vue'
+import Background from './config/Background.vue'
+export default {
+  name: 'epx-visual-entity-list',
+  extends: ComponentVue,
+  components: {
+    [Background.name]: Background
+  },
+  data () {
+    return {
+      FunctionOption: [],
+      operateConfigs: {},
+      unfold: false,
+      backgroundCondition: null,
+      backgroundStyleDialog: false,
+      operateOptions: {}
+    }
+  },
+  computed: {
+    metaView () {
+      if (this.currentMeta && this.currentMeta.metaView) {
+        return this.currentMeta.metaView[this.currentMetaViewId]
+      }
+      return null
+    }
+  },
+  watch: {
+    allConfigs: {
+      handler (v) {
+        this.componentMetaId = v.metaId
+      },
+      immediate: true
+    },
+    'allConfigs.categoryField': {
+      handler (v) {
+        // 根据字段获取对象
+        if (v) {
+          const fieldConfigs = this.currentMeta.getAllFieldConfigs().find(item => item.attriName === v[0])
+          if (fieldConfigs) {
+            this.treeMetaId = fieldConfigs.codeKey
+            this.treeFieldIsObject = fieldConfigs.dataType === 'object' || fieldConfigs.dataType === 'dept' || fieldConfigs.dataType === 'user'
+            // this.initConfigOptions()
+          }
+        }
+      },
+      immediate: true
+    },
+    async currentMetaViewId (v) {
+      if (!v) return
+      await this.getAllFields()
+      // 仅用户切换视图且字段树加载成功时，按新视图过滤已配置字段（配置回显不过滤，避免误删）
+      if (!this.canFilterFieldsByView(v)) return
+      const { listFields, orderFields, rowFields } = this.config
+      if (listFields) {
+        const filtered = listFields.filter(item => this.getField(item.attriName || item))
+        if (filtered.length !== listFields.length) this.changeConfigItem('listFields', filtered)
+      }
+      if (orderFields) {
+        const filtered = orderFields.filter(item => this.getField(item.attriName || item))
+        if (filtered.length !== orderFields.length) this.changeConfigItem('orderFields', filtered)
+      }
+      if (rowFields) {
+        const filtered = rowFields.map(row => row.filter(item => this.getField(item.attriName || item)))
+        if (!this.$_.isEqual(filtered, rowFields)) this.changeConfigItem('rowFields', filtered)
+      }
+    }
+  },
+  methods: {
+    getOperateOptions () {
+      this.getHandlerList()
+      this.getCommonOperates()
+      this.operateConfigs = [
+        {
+          key: 'base',
+          title: '基本',
+          options: ['text', 'ui', 'styles', 'icon', 'showName', 'preview']
+        },
+        {
+          key: 'event',
+          title: '事件',
+          options: ['handler', 'metaId', 'action', 'rule', 'moveType', 'exportFileImmediately', 'exportFileFields', 'exportFileNameFields', 'openMode', 'page', 'menuId', 'serviceId', 'pageType', 'printWay', 'printCode', 'cptName', 'printOperates', 'showDownloadReportDialog', 'showDownloadReportFormat', 'downloadReportFormat', 'downloadReportNameFields', 'downloadReportNameSplit', 'downloadReportWay', 'destActivityId', 'processNode', 'processCode', 'processNodes', 'endOtherNode', 'showCheckFields', 'checkRequireFields', 'checkOpinionValue', 'function', 'importPromptCode', 'sendMessageType', 'defaultMessageTemplate', 'messageTemplateScope', 'receiveMessagePhone', 'receiveMessageEmail', 'sendMessageEmail', 'editableFields', 'params', 'beforeTrigger', 'afterTrigger', 'afterTriggerPage', 'afterTriggerPageOpenMode', 'afterTriggerParams']
+        },
+        {
+          key: 'advance',
+          title: '高级',
+          options: ['terminal', 'num', 'limitFlag', 'limitCondition', 'limitTip', 'showConditionType', 'showCondition', 'showConditionEl', 'confirm', 'confirmMsg', 'confirmButtonText', 'cancelButtonText', 'successMsg', 'failMsg', 'mask']
+        }
+      ]
+      this.operateOptions = {
+        showCheckFields: {
+          key: 'showCheckFields',
+          label: '显示字段',
+          type: 'checkbox',
+          options: [{ label: '审核意见', value: 'opinion' }, { label: '审核签名', value: 'sign' }],
+          showFlag: { handler: ['batchCheck'] }
+        },
+        checkRequireFields: {
+          key: 'checkRequireFields',
+          label: '必填字段',
+          type: 'checkbox',
+          options: [{ label: '审核意见', value: 'opinion' }, { label: '审核签名', value: 'sign' }],
+          showFlag: { handler: ['batchCheck'] }
+        },
+        checkOpinionValue: {
+          key: 'checkOpinionValue',
+          label: '审核意见默认值',
+          type: 'text',
+          showFlag: { handler: ['batchCheck'], showCheckFields: ['opinion'] }
+        },
+        importPromptCode: {
+          key: 'importPromptCode',
+          label: '导入大模型提示词',
+          type: 'object',
+          object: 'FM_AI_PROMPT',
+          dataKey: 'CODE',
+          showFlag: { handler: ['entityImport'] }
+        },
+        sendMessageType: {
+          key: 'sendMessageType',
+          label: '发送方式',
+          type: 'checkbox',
+          defaultValue: ['template', 'custom'],
+          options: [{ label: '模版发送', value: 'template' }, { label: '自定义', value: 'custom' }],
+          showFlag: { handler: ['sendMessage'] }
+        },
+        defaultMessageTemplate: {
+          key: 'defaultMessageTemplate',
+          label: '默认模版',
+          type: 'object',
+          object: 'FM_MESSAGE_TEMPLATE',
+          scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }],
+          showFlag: { handler: ['sendMessage'] }
+        },
+        messageTemplateScope: {
+          key: 'messageTemplateScope',
+          label: '模版范围',
+          type: 'object',
+          object: 'FM_MESSAGE_TEMPLATE',
+          fieldConfigs: { isMultiple: '1' },
+          scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }],
+          showFlag: { handler: ['sendMessage'] }
+        },
+        receiveMessagePhone: {
+          key: 'receiveMessagePhone',
+          label: '接收人手机号',
+          type: 'field',
+          showSubField: false,
+          showSubFlag: false,
+          showFlag: { handler: ['sendMessage'] }
+        },
+        receiveMessageEmail: {
+          key: 'receiveMessageEmail',
+          label: '接收人邮箱',
+          type: 'field',
+          showSubField: false,
+          showSubFlag: false,
+          showFlag: { handler: ['sendMessage'] }
+        },
+        sendMessageEmail: {
+          key: 'sendMessageEmail',
+          label: '默认发送邮箱',
+          type: 'object',
+          object: 'FM_MAIL_CONFIG',
+          scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }],
+          showFlag: { handler: ['sendMessage'] }
+        },
+        exportFileImmediately: {
+          key: 'exportFileImmediately',
+          label: '是否直接导出',
+          type: 'switch',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: { handler: ['exportFile'] }
+        },
+        exportFileFields: {
+          key: 'exportFileFields',
+          label: '导出附件',
+          type: 'field',
+          limit: { dataType: ['blob', 'photo'] },
+          showFlag: { handler: ['exportFile'], exportFileImmediately: true }
+        },
+        exportFileNameFields: {
+          key: 'exportFileNameFields',
+          label: '导出附件命名',
+          type: 'field',
+          showFlag: { handler: ['exportFile'], exportFileImmediately: true }
+        },
+        page: {
+          key: 'page',
+          label: '打开页面',
+          type: 'page',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity', 'entityImport', 'exportFile'] }
+        },
+        editableFields: {
+          key: 'editableFields',
+          label: '可编辑字段',
+          type: 'field',
+          showSubField: false,
+          showSubFlag: false,
+          showFlag: { handler: ['editMultiEntity'] }
+        },
+        processCode: {
+          key: 'processCode',
+          label: '选择流程',
+          type: 'object',
+          object: 'ACT_RE_MODEL',
+          dataKey: 'KEY',
+          fieldConfigs: {
+            scopeParams: [{ field: 'ENTITY', values: this.currentMetaId }, { field: 'CATEGORY', values: '1' }]
+          },
+          showFlag: { handler: ['skipProcessNode', 'resetCheckPerson', 'rejectionProcess'] }
+        },
+        processNodes: {
+          key: 'processNodes',
+          label: '选择可跳转结束节点',
+          type: 'select',
+          multiple: true,
+          showFlag: { handler: ['skipProcessNode'] }
+        },
+        endOtherNode: {
+          key: 'endOtherNode',
+          label: '结束其他节点',
+          type: 'switch',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['skipProcessNode'] }
+        }
+      }
+      let oldMetaId = this.currentMetaId
+      let oldProcessCode = null
+      this.changeOperate = (key, operate) => {
+        if (operate.metaId !== oldMetaId) {
+          const processCode = this.operateOptions.processCode
+          oldMetaId = operate.metaId
+          delete this.operateOptions.processCode
+          this.$nextTick(() => {
+            this.operateOptions.processCode = {
+              ...processCode,
+              fieldConfigs: {
+                scopeParams: [{ field: 'ENTITY', values: operate.metaId || this.currentMetaId }, { field: 'CATEGORY', values: '1' }]
+              }
+            }
+          })
+        }
+        if (operate?.processCode && operate.processCode !== oldProcessCode) {
+          oldProcessCode = operate.processCode
+          this.$http.get({
+            action: 'processNodeList',
+            entityId: 'ACT_RE_MODEL',
+            processCode: operate.processCode
+          })
+            .then(data => {
+              const optionList = data.map(item => {
+                return {
+                  label: item.name,
+                  value: item.id
+                }
+              })
+              const processNodes = this.operateOptions.processNodes
+              delete this.operateOptions.processNodes
+              this.$nextTick(() => {
+                this.operateOptions.processNodes = { ...processNodes, options: optionList }
+              })
+            })
+        }
+      }
+    },
+    initDefaultConfigs () {
+      let defaultListFields = []
+      if (this.currentMeta) {
+        if (this.metaView) {
+          const { listFields, fields } = this.metaView
+          if (listFields) {
+            defaultListFields = JSON.parse(listFields)
+          } else {
+            defaultListFields = JSON.parse(fields)
+          }
+        } else {
+          defaultListFields = this.currentMeta.getAllFields()
+        }
+      }
+      // const { addPage = 'entity-add-page', editPage = 'entity-edit-page', openMode = '3', addPageFlag = 'v_add' } = this.allConfigs
+      const { addPage = 'entity-add-page', editPage = 'entity-edit-page', openMode = '3' } = this.allConfigs
+      let keywords = []
+      let metaKey = 'ID'
+      if (this.currentMeta) {
+        const { label, keyNames = [] } = this.currentMeta
+        metaKey = this.currentMeta.getKey()
+        keywords = [...keyNames]
+        if (label) {
+          keywords.push(label)
+        }
+      }
+      this.defaultConfigs = {
+        flex: true,
+        componentName: this.componentInfo.title,
+        type: 'table',
+        addPageFlag: 'v_add',
+        editPageFlag: 'v_add',
+        detailPageFlag: 'v_add',
+        detailFlag: true,
+        componentType: '',
+        metaId: this.pageMetaId,
+        action: 'list',
+        searchFlag: true,
+        searchMode: 'keyword',
+        showSearchLabel: false,
+        isChangeListType: false,
+        border: false,
+        keywords,
+        searchFields: [],
+        listFields: defaultListFields,
+        pageFlag: true,
+        pageSize: 20,
+
+        operateEllipsis: 2,
+        serialColumnFlag: true, // 是否显示序号列
+        operateColumnFlag: true, // 是否显示操作列
+        operateColumnWidth: 100,
+        operateColumnEllipsis: 2,
+        operateColumnPosition: 'start',
+        categoryExpandLevel: 'none',
+        operateTreeListFlag: true,
+        dragSort: false,
+        fixedTable: true,
+        span: 24,
+        metaKeyField: [metaKey],
+        operates: [
+          {
+            text: '新增',
+            handler: 'addEntity',
+            action: 'save',
+            ui: 'primary',
+            num: 0,
+            openMode,
+            component: addPage,
+            params: {}
+          },
+          {
+            text: '删除',
+            handler: 'commonAction',
+            action: 'removeMulti',
+            num: 'n',
+            confirm: true,
+            confirmMsg: this.$t('Confirm the deletion') + '？',
+            successMsg: '删除成功',
+            params: {
+              ids: `#[${metaKey}]`
+            }
+          },
+          {
+            text: '导入',
+            handler: 'entityImport',
+            action: 'entityImport',
+            component: 'import-page',
+            params: {}
+          },
+          {
+            text: '导出',
+            handler: 'goPage',
+            action: 'entityExport',
+            component: 'export-page',
+            params: {
+              selects: `#[${metaKey}]`,
+              total: '$[total]',
+              params: '$[params]',
+              fields: '$[exportFields]',
+              scopeParams: '$[scopeParams]'
+            }
+          }
+        ],
+        columnOperates: [
+          // {
+          //   text: '多选',
+          //   handler: 'multiSelect',
+          //   terminal: 'mobile'
+          // },
+          {
+            text: '编辑',
+            handler: 'editEntity',
+            action: 'update',
+            num: 1,
+            openMode,
+            component: editPage,
+            pageType: 'EDIT'
+          }
+          // {
+          //   text: '删除',
+          //   handler: 'commonAction',
+          //   action: 'removeMulti',
+          //   num: 'n',
+          //   confirmMsg: this.$t('Confirm the deletion') + '？',
+          //   successMsg: '删除成功',
+          //   params: {
+          //     ids: `#[${this.$metaKey}]`
+          //   }
+          // }
+        ],
+        treeListOperates: [{
+          text: '上移',
+          handler: 'operateTree',
+          action: 'operateTree',
+          moveType: 'pre'
+        },
+        {
+          text: '下移',
+          handler: 'operateTree',
+          action: 'operateTree',
+          moveType: 'next'
+        },
+        {
+          text: '移到最前',
+          handler: 'operateTree',
+          action: 'operateTree',
+          moveType: 'first'
+        },
+        {
+          text: '移到最后',
+          handler: 'operateTree',
+          action: 'operateTree',
+          moveType: 'last'
+        },
+        {
+          text: '移到外层',
+          handler: 'operateTree',
+          action: 'operateTree',
+          moveType: 'upper'
+        },
+        {
+          text: '移到指定位置',
+          action: 'dragTree',
+          handler: 'dragTree'
+        }],
+
+        // 列表内容
+        treeExpandLevel: 'first',
+        treeExpandMore: false
+      }
+    },
+    initConfig () {
+      const config = this.$_.cloneDeep(this.compConfig)
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+    },
+    getFieldOptions () {
+      this.getFunctionOption()
+      this.fieldOptions = [
+        { key: 'attriName', label: '字段', readonly: true },
+        { key: 'configWay', label: '配置方式', type: 'radio', options: [{ label: '默认配置', value: 'default' }, { label: '自定义', value: 'custom' }], defaultValue: 'default' },
+        { key: 'attriLabel', label: '名称', type: 'text' },
+        { key: 'width', label: '宽度', type: 'text', defaultValue: '120' },
+        { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' },
+        { key: 'icon', label: '图标', type: 'object', object: 'FM_FONT_ICON', tip: '图标只在卡片模式展示' },
+        { key: 'iconColor', label: '图标颜色', type: 'color' },
+        { key: 'newLine', label: '是否换行', type: 'switch', defaultValue: false },
+        {
+          key: 'lineNum',
+          label: '显示行数',
+          type: 'num',
+          showFlag: {
+            newLine: true
+          }
+        },
+        {
+          key: 'showTooltip',
+          label: '鼠标悬浮展示',
+          type: 'switch',
+          defaultValue: true,
+          showFlag: {
+            newLine: [false, null, undefined]
+          }
+        },
+        { key: 'locked', label: '是否锁定', type: 'switch', defaultValue: false },
+        { key: 'editable', label: '可编辑', type: 'switch', defaultValue: false },
+        { key: 'rule', label: '逻辑编排', type: 'select', options: this.ruleList, showFlag: { editable: true } },
+        { key: 'addible', label: '可新增', type: 'switch', defaultValue: true },
+        { key: 'state', label: '字段状态', type: 'radio', options: [{ label: '显示', value: 'DETAIL' }, { label: '隐藏', value: 'HIDDEN' }], defaultValue: 'DETAIL' },
+        { key: 'align', label: '对齐方式', type: 'radio', options: [{ label: '左对齐', value: 'left' }, { label: '居中对齐', value: 'center' }, { label: '右对齐', value: 'right' }], defaultValue: 'left' },
+        { key: 'isLabel', label: '外部标签', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        { key: 'sortable', label: '可排序', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        {
+          key: 'findPageId',
+          label: '对象查找页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }],
+          showFlag: {
+            editable: true,
+            dataType: ['multiobject', 'object', 'user', 'dept', 'list', 'treeList']
+          }
+        },
+        {
+          key: 'objectScope',
+          label: '对象查询范围',
+          type: 'object-scope',
+          showFlag: {
+            editable: true,
+            dataType: ['multiobject', 'object', 'user', 'dept']
+          }
+        },
+        {
+          key: 'fieldExMethod',
+          label: '字段扩展方式',
+          type: 'radio',
+          code: 'FIELD_EX_METHOD',
+          defaultValue: 'suffix',
+          showFlag: {
+            dataType: ['text', 'num']
+          }
+        },
+        {
+          key: 'suffix',
+          label: '前/后缀内容',
+          type: 'text',
+          showFlag: {
+            dataType: ['text', 'num']
+          }
+        },
+        {
+          key: 'numericalUnits',
+          label: '数值单位',
+          type: 'radio',
+          code: 'Numerical units',
+          showFlag: {
+            dataType: ['num']
+          }
+        },
+        { key: 'link', label: '链接', type: 'switch' },
+        { key: 'linkType', label: '链接类型', type: 'radio', code: 'LINK_TYPE', showFlag: { link: [true] } },
+        { key: 'linkPageId', label: '页面', type: 'object', object: 'FM_PAGE_CONFIG', scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }], showFlag: { link: [true], linkType: 'page' } },
+        { key: 'linkAddress', label: '链接地址', showFlag: { link: [true], linkType: 'url' } },
+        { key: 'linkOpenType', label: '链接打开方式', type: 'radio', code: 'OPEN_PAGE_MODE', showFlag: { link: [true], linkType: ['page', 'detail'] } },
+        { key: 'linkParams', label: '链接参数设置', type: 'params', showFlag: { link: [true], linkType: ['page', 'detail'] } },
+        { key: 'showSummary', label: '显示合计项', type: 'switch', defaultValue: false, showFlag: { dataType: ['num', 'int'] } },
+        { key: 'showOptionStyle', label: '显示选项样式', type: 'switch', defaultValue: false, showFlag: { dataType: ['list'] } },
+        { key: 'imageFit', label: '图片显示方式', type: 'radio', options: [{ label: '剪切', value: 'cover' }, { label: '填充', value: 'fill' }, { label: '缩放', value: 'contain' }, { label: '不做处理', value: 'none' }], defaultValue: 'cover', showFlag: { dataType: ['photo'] } },
+        { key: 'imgaePosition', label: '图片显示位置', type: 'radio', options: [{ label: '顶部', value: 'top' }, { label: '居中', value: 'center' }, { label: '底部', value: 'bottom' }], defaultValue: 'center', showFlag: { dataType: ['photo'] } },
+        { key: 'previewDialogSize', label: '预览弹窗大小', type: 'radio', options: [{ label: '50%', value: '50%' }, { label: '75%', value: '75%' }, { label: '80%', value: '80%' }, { label: '90%', value: '90%' }, { label: '全屏', value: 'fullscreen' }], defaultValue: '75%', showFlag: { dataType: ['blob'] } },
+        // {
+        //   key: 'showWay',
+        //   label: '显示内容',
+        //   type: 'radio',
+        //   options: [{ label: '字段值', value: 'value' }, { label: '记录数', value: 'record' }, { label: '字段统计', value: 'statistics' }],
+        //   defaultValue: 'value',
+        //   showCondition: {
+        //     el: '#{field.relationSort===\'1\'&&field.type!==\'meta\'}'
+        //   }
+
+        // },
+        {
+          key: 'showWay',
+          label: '显示内容',
+          type: 'radio',
+          options: [{ label: '字段值', value: 'value' }, { label: '记录数', value: 'record' }, { label: '自定义', value: 'el' }],
+          defaultValue: 'value',
+          showFlag: {
+            type: 'meta'
+          }
+        },
+        {
+          key: 'statisticsType',
+          label: '统计方式',
+          type: 'radio',
+          code: 'FIELD_STATISTIC_TYPE',
+          defaultValue: 'SUM',
+          showFlag: {
+            showWay: 'statistics',
+            type: 'meta'
+          }
+        },
+        {
+          key: 'showWay',
+          label: '显示内容',
+          type: 'radio',
+          options: [{ label: '字段值', value: 'value' }, { label: '统计值', value: 'statistics' }],
+          defaultValue: 'value',
+          showFlag: {
+            relationSort: '1',
+            dataType: ['num']
+          }
+        },
+        {
+          key: 'statisticsType',
+          label: '统计方式',
+          type: 'radio',
+          code: 'FIELD_STATISTIC_TYPE',
+          defaultValue: 'SUM',
+          showFlag: {
+            showWay: 'statistics',
+            relationSort: '1',
+            dataType: ['num']
+          }
+        },
+        {
+          key: 'fields',
+          label: '展示字段',
+          type: 'field',
+          showFlag: {
+            // relationSort: '1',
+            type: 'meta',
+            showWay: ['value', undefined, null]
+          }
+        },
+
+        {
+          key: 'showEl',
+          label: '自定义内容',
+          type: 'rule',
+          showFlag: {
+            showWay: 'el',
+            type: 'meta'
+          }
+        },
+        {
+          key: 'separator',
+          label: '字段分隔符',
+          type: 'radio-input',
+          options: [{ label: '、', value: '、' }, { label: '/', value: '/' }, { label: ',', value: ',' }],
+          defaultValue: '、',
+          showFlag: {
+            // relationSort: '1'
+            type: 'meta'
+          }
+        },
+        {
+          key: 'showFieldName',
+          label: '是否展示字段名',
+          type: 'radio',
+          options: [{ label: '是', value: '1' }, { label: '否', value: '0' }],
+          defaultValue: '0',
+          showFlag: {
+            // relationSort: '1'
+            type: 'meta'
+          }
+        },
+        {
+          key: 'orderFields',
+          label: '数据排序',
+          type: 'order-field',
+          showFlag: {
+            relationSort: '1'
+          }
+        },
+        {
+          key: 'scopeParams',
+          label: '查询范围',
+          type: 'scope',
+          showFlag: {
+            relationSort: '1'
+          }
+        },
+        {
+          key: 'recordSeparator',
+          label: '记录分隔符',
+          type: 'radio-input',
+          options: [{ label: '换行', value: '\n' }, { label: '/', value: '/' }, { label: ',', value: ',' }],
+          defaultValue: '\n',
+          showFlag: {
+            relationSort: '1'
+          }
+        }
+      ]
+      this.rowFieldOptions = [...this.fieldOptions]
+      this.rowFieldOptions.splice(4, 0,
+        { key: 'showLabel', label: '显示标题', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }], defaultValue: false },
+        { key: 'split', label: '分隔符', type: 'radio', options: [{ label: '竖号', value: ' | ' }, { label: '斜杠', value: ' / ' }, { label: '空格', value: ' ' }], defaultValue: ' | ' },
+        { key: 'fontWeight', label: this.$t('whether the bold'), type: 'radio', options: [{ label: this.$t('yes'), value: 'bold' }, { label: this.$t('no'), value: 'normal' }] },
+        { key: 'fontSize', label: this.$t('font size'), type: 'num', defaultValue: 14 })
+    },
+    addCondition (v) {
+      const backgroundConditionSet = this.config.backgroundConditionSet ? [...this.config.backgroundConditionSet] : []
+      backgroundConditionSet.push({ condition: v, style: null })
+      this.config.backgroundConditionSet = backgroundConditionSet
+    },
+    setConditionBackgroundStyle (item, index) {
+      this.backgroundStyleDialog = true
+      this.conditionBackgroundStyle = item.style || {}
+      this.editConditionIndex = index
+    },
+    deleteConditionBackgroundStyle (index) {
+      const backgroundConditionSet = this.config.backgroundConditionSet ? [...this.config.backgroundConditionSet] : []
+      backgroundConditionSet.splice(index, 1)
+      this.config.backgroundConditionSet = backgroundConditionSet
+    },
+    saveConditionBackgroundStyle () {
+      const backgroundConditionSet = this.config.backgroundConditionSet ? [...this.config.backgroundConditionSet] : []
+      backgroundConditionSet.splice(this.editConditionIndex, 1, { ...backgroundConditionSet[this.editConditionIndex], style: this.conditionBackgroundStyle })
+      this.config.backgroundConditionSet = backgroundConditionSet
+      this.conditionBackgroundStyle = {}
+      this.backgroundStyleDialog = false
+      this.editConditionIndex = null
+    },
+    renderCardBackground () {
+      const { backgroundConditionSet = [] } = this.config
+      return (
+        <div class={['epx-page-designer-setting-style__item', 'epx-visual-entity-list__card-background', { 'epx-page-designer-setting-style__item--unfold': this.unfold }]}>
+          <div class="epx-page-designer-setting-style__header">
+            <span>
+              <i class="epx-page-designer-setting-style__fold-icon el-icon-caret-right" onClick={() => { this.unfold = !this.unfold }}></i>
+              <label class="epx-page-designer-setting-style__label" for="">{this.$t('background')}</label>
+            </span>
+          </div>
+          <div class="epx-page-designer-setting-style__content">
+            <epx-visual-config-background v-model={this.config.backgroundStyle} class="epx-visual-entity-list__background-style" defaultValue={{
+              backgroundSize: 'cover',
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center'
+            }}></epx-visual-config-background>
+            <div class="epx-visual-entity-list__background-conditions">
+              {
+                backgroundConditionSet.map((item, index) => (
+                  <div key={index} class="epx-visual-entity-list__background-condition-item">
+                    <div class="epx-visual-entity-list__background-condition-content">
+                      <epx-visual-config-scope
+                        designer={this.designer}
+                        value={item.condition}
+                        pageParams={this.pageParams}
+                        treeFieldStore={this.treeFieldStore}
+                        componentMetaId={this.componentMetaId || this.pageMetaId}
+                        scopeConfigs={this.scopeConfigs}
+                        state='DETAIL'
+                      />
+                      <el-button type="primary" link class="epx-visual-entity-list__background-condition-set" onClick={this.setConditionBackgroundStyle.bind(this, item, index)}>
+                        <i class="el-icon-setting"></i>
+                        背景设置
+                      </el-button>
+                    </div>
+                    <i class="epx-visual-entity-list__background-condition-remove el-icon-close" onClick={this.deleteConditionBackgroundStyle.bind(this, index)}></i>
+                  </div>
+                ))
+              }
+              <epx-visual-config-scope
+                designer={this.designer}
+                value={this.backgroundCondition}
+                pageParams={this.pageParams}
+                treeFieldStore={this.treeFieldStore}
+                componentMetaId={this.componentMetaId || this.pageMetaId}
+                scopeConfigs={this.scopeConfigs}
+                operateName="+ 添加动态背景条件"
+                onChangeConfigs={v => this.addCondition(v)}
+              >
+              </epx-visual-config-scope>
+            </div>
+
+            <el-dialog
+              title="背景设置"
+              modelValue={this.backgroundStyleDialog}
+              width="420px"
+              show-close={false}
+              append-to-body
+              destroy-on-close
+              center v-slots={{
+                footer: () => (<span class="dialog-footer">
+                  <el-button onClick={() => { this.backgroundStyleDialog = false }}>取 消</el-button>
+                  <el-button type="primary"onClick={this.saveConditionBackgroundStyle}>确 定</el-button>
+                </span>)
+              }}>
+              {
+                this.backgroundStyleDialog &&
+                <epx-visual-config-background
+                  v-model={this.conditionBackgroundStyle}
+                  defaultValue={{
+                    backgroundSize: 'cover',
+                    backgroundRepeat: 'no-repeat'
+                  }}></epx-visual-config-background>
+              }
+            </el-dialog>
+          </div>
+        </div>
+      )
+    }
+  }
+}
+</script>
+<style lang="scss">
+// 2026-09-09：整块从 <style scoped> 搬来。
+// Vue3 的 extends **不继承** __scopeId，本组件有 4 个纯 script 继承者（ClientList /
+// ComponentList / DblogList / MetaList，都没有自己的 <template>、也没转写 __scopeId）
+// ⇒ 它们渲染出的 DOM 上一个 data-v-* 都没有，这一簇规则整块静默失效：卡片背景配置项的
+// 负边距丢失、条件列表没有分隔线与 flex 布局。
+//
+// ⚠️ 三个搬迁要点，别改回去：
+// 1) 类名必须带 BEM 前缀——`.background-style` / `.background-condition__*` 都是通用名，
+//    裸着放进无 scoped 块就是全局污染。
+// 2) 原文的 `:deep(...)` 全部去掉了：`:deep()` 是 scoped 专用的穿透语法，只有 scoped 块
+//    才会被编译器改写；留在无 scoped 块里会原样输出成浏览器不认识的伪类 ⇒ 规则照样失效。
+//    无 scoped 下嵌在块内本身就是后代选择器，语义等价。
+// 3) 这簇 DOM 挂在 `epx-page-designer-setting-style__item` 上，**不在** .epx-visual-entity-list
+//    的后代里。能这么写是因为本仓 e() 在不含 modifier / .is- / 伪类时走 @at-root，生成的是
+//    独立类名 `.epx-x__y` 而不是后代选择器（见 theme/utils/mixins.scss）。
+//
+// 原 `.background-condititon`（三个 t）是笔误，与 `.background-condition__*` 并非同名；
+// 类名反正要整体重命名，就没把笔误固化进 BEM 名，统一成 conditions，JSX 同步改。
+@include b(visual-entity-list) {
+  @include e(card-background) {
+    margin: 0 -10px;
+
+    .epx-page-designer-setting-style__subitem {
+      margin: 20px 0;
+    }
+    .epx-page-designer-setting-style__content {
+      background: none;
+      padding: 0;
+    }
+  }
+  @include e(background-style) {
+    padding: 10px 10px 10px 28px;
+    background: #F5F7FA;
+  }
+  @include e(background-conditions) {
+    padding: 10px;
+  }
+  @include e(background-condition-item) {
+    display: flex;
+    padding: 10px 0;
+    border-bottom: 1px solid #DCDCDC;
+  }
+  @include e(background-condition-content) {
+    flex: 1;
+  }
+  @include e(background-condition-set) {
+    margin: 0;
+    i {
+      margin-right: 4px;
+    }
+  }
+  @include e(background-condition-remove) {
+    font-size: var(--epx-font-size-l);
+    cursor: pointer;
+    margin-top: 4px;
+  }
+}
+</style>