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

package/src/base/EntityMatchCompare.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="container">
+    <div class="sync-buttons">
+      <el-button size="default" type="primary" @click="showSyncDialog=true">数据同步</el-button>
+      <el-button size="default" @click="refreshData">刷新</el-button>
+    </div>
+    <epx-add-form-item show-title comp-title="对象匹配方案" :comp-configs="{column: 2, fields: ['NAME', 'CODE', 'SOURCE_ENTITY', 'TARGET_ENTITY']}" :formData="formData"></epx-add-form-item>
+    <el-tabs class="tabs" type="card" v-model="compareType">
+      <el-tab-pane :label="`字段内容不一致(${data.compareDataTotal})`" name="compareData">
+        <el-button class="export-btn" size="default" type="primary" @click="exportCompareData">导出</el-button>
+        <el-table class="table" v-loading="loading.compareData" :data="dataList.compareData" border :cell-style="compareCellStyle">
+          <el-table-column v-for="field in listFields" width="220" :key="field.attriName" :prop="field.attriName" :label="field.attriLabel">
+            <template v-slot="{ row }">{{row[field.attriName + '#'] || row[field.attriName]}}</template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          class="epx-entity-list__pagination"
+          :currentPage="currentPages['compareData']"
+          :pageSizes="[5, 10, 15, 20, 30, 50, 100, 200]"
+          :pageSize="limits['compareData']"
+          layout="prev, pager, next, jumper, sizes,total"
+          :total="data['compareDataTotal']"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+        >
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane :label="`源对象有但目标对象无(${data.appendDataTotal})`" name="appendData">
+        <el-table v-loading="loading.appendData" class="table" :data="dataList.appendData" border>
+          <el-table-column v-for="field in listFields" width="220" :key="field.attriName" :prop="field.attriName" :label="field.attriLabel">
+            <template v-slot="{ row }">{{row[field.attriName + '#'] || row[field.attriName]}}</template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          class="epx-entity-list__pagination"
+          :currentPage="currentPages['appendData']"
+          :pageSizes="[5, 10, 15, 20, 30, 50, 100, 200]"
+          :pageSize="limits['appendData']"
+          layout="prev, pager, next, jumper, sizes, total"
+          :total="data['appendDataTotal']"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+        >
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane :label="`字段内容一致(${data.sampleDataTotal})`" name="sampleData">
+        <el-table v-loading="loading.sampleData" class="table" :data="dataList.sampleData" border>
+          <el-table-column v-for="field in listFields" width="220" :key="field.attriName" :prop="field.attriName" :label="field.attriLabel">
+            <template v-slot="{ row }">{{row[field.attriName + '#'] || row[field.attriName]}}</template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          class="epx-entity-list__pagination"
+          :currentPage="currentPages['sampleData']"
+          :pageSizes="[5, 10, 15, 20, 30, 50, 100, 200]"
+          :pageSize="limits['sampleData']"
+          layout="prev, pager, next, jumper, sizes, total"
+          :total="data['sampleDataTotal']"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+        >
+        </el-pagination>
+      </el-tab-pane>
+    </el-tabs>
+    <el-dialog class="" width="960px" v-model="showSyncDialog" title="数据同步" @close="syncStatus='init'">
+      <template v-if="syncStatus==='init'">
+        <div class="sync-title">同步方式: </div>
+        <ul class="sync-mode">
+          <li class="sync-mode__item" :class="{'is-selected': selectMode===item.key}" @click="selectMode=item.key" v-for="item in syncMode" :key="item.key">
+            <div class="sync-mode__bg" :style="{background: item.background}">
+              <img :src="imageAsset(`${item.icon}.png`)" />
+            </div>
+            <p class="sync-mode__name">{{item.name}}</p>
+            <i class="selected-icon epx-icon-kapianxuanzhong"></i>
+          </li>
+        </ul>
+        <div class="sync-title">参数设置: </div>
+        <ul class="params-list">
+          <li class="params-item" v-for="(param, index) in params" :key="index">
+            <div class="params-content">
+              <div>
+                <label for="">参数名：</label>
+                <el-input size="default" class="params-key__input" v-model="param.key"></el-input>
+              </div>
+              <div>
+                <label for="">参数值：</label>
+                <el-input size="default" class="params-value__input" v-model="param.value"></el-input>
+              </div>
+            </div>
+            <i class="el-icon-close params-delete__icon fr" @click="delete params[index]"></i>
+          </li>
+        </ul>
+        <el-button type="primary" link @click="addParamFn">+ 添加参数</el-button>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="syncDataFn">开始同步数据</el-button>
+          <el-button @click="showSyncDialog=false">取消</el-button>
+        </span>
+      </template>
+      <div class="sync-loading" v-else-if="syncStatus==='loading'">
+        <img src="@/assets/images/sync_loading.png" />
+        <p>数据同步中，请耐心等待</p>
+      </div>
+       <div class="sync-loading" v-else-if="syncStatus==='success'">
+        <i class="el-icon-success"></i>
+        <p>数据同步成功！</p>
+        <el-button size="default" @click="refreshData">重新对比数据</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { component } from '@epxing/core/src/mixins'
+// 动态图片路径经资产表取 URL（Vite 无 require；带 .js 后缀以命中 vite alias）
+import { imageAsset } from '@epxing/utils/src/asset-images.js'
+export default {
+  name: 'epx-base-entity-match-compare',
+  mixins: [component],
+  data () {
+    return {
+      compareTypeList: ['compareData', 'appendData', 'sampleData'],
+      compareType: 'compareData',
+      formData: {},
+      data: {
+        compareDataTotal: 0,
+        appendDataTotal: 0,
+        sampleDataTotal: 0
+      },
+      listFields: [],
+      dataList: {},
+      currentPages: {
+        compareData: 1,
+        appendData: 1,
+        sampleData: 1
+      },
+      limits: {
+        compareData: 20,
+        appendData: 20,
+        sampleData: 20
+      },
+      loading: {
+        compareData: false,
+        appendData: false,
+        sampleData: false
+      },
+      total: {},
+      showSyncDialog: false,
+      syncMode: [{
+        key: 'REPLACE',
+        name: '替换',
+        icon: 'sync_replace',
+        background: '#E4F2FF'
+      },
+      {
+        key: 'APPEND',
+        name: '追加',
+        icon: 'sync_append',
+        background: '#E7FAEF'
+      },
+      {
+        key: 'UPDATE',
+        name: '更新',
+        icon: 'sync_update',
+        background: '#E4E6FF'
+      },
+      {
+        key: 'APPEND_UPDATE',
+        name: '追加更新',
+        icon: 'sync_append&update',
+        background: '#FCF3E8'
+      }],
+      params: [{
+        key: '',
+        value: ''
+      }],
+      selectMode: 'REPLACE',
+      syncStatus: 'init'
+    }
+  },
+  methods: {
+    imageAsset,
+    refreshData () {
+      this.$http.$post({
+        action: 'refreshSycnComparaData',
+        entityId: 'FM_ENTITY_MATCH',
+        cacheId: this.data.cacheId
+      })
+      this.$message.success('正在刷新数据...')
+      this.showSyncDialog = false
+      this.getCompareSyncDataCount()
+    },
+    getFields () {
+      this.$http.list({
+        entityId: 'FM_ENTITY_FIELD_MATCH',
+        'scope.ENTITY_MATCH': this.$query.id
+      })
+        .then(data => {
+          this.listFields = data.entitys.filter(item => item.TARGET_FIELD_CODE !== 'ID').map(item => {
+            const field = { attriName: item.TARGET_FIELD_CODE }
+            if (item.TARGET_FIELD_NAME !== item.SOURCE_FIELD_NAME) {
+              field.attriLabel = `${item.SOURCE_FIELD_NAME}(源对象)/${item.TARGET_FIELD_NAME}(目标对象)`
+            } else {
+              field.attriLabel = item.TARGET_FIELD_NAME
+            }
+            return field
+          })
+        })
+    },
+    getData () {
+      this.$http.get({
+        entityId: this.$metaId,
+        id: this.$query.id
+      })
+        .then(data => {
+          this.formData = data.data
+        })
+    },
+    getCompareSyncDataCount () {
+      return this.$http.get({
+        action: 'compareSyncDataCount',
+        entityId: 'FM_ENTITY_MATCH',
+        id: this.$query.id
+      })
+        .then(data => {
+          this.data = data
+          this.compareTypeList.map(item => this.getCompareSyncDataList(item))
+          return data
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getCompareSyncDataList (type = this.compareType, page) {
+      this.loading[type] = true
+      this.$http.get({
+        action: 'compareSyncDataList',
+        entityId: 'FM_ENTITY_MATCH',
+        id: this.$query.id,
+        cacheId: this.data.cacheId,
+        type: type,
+        page: page || this.currentPages[this.compareType],
+        limit: this.limits[this.compareType]
+      })
+        .then(data => {
+          this.dataList[type] = data.entitys
+          this.loading[type] = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.loading[type] = false
+        })
+    },
+    currentChange (current) {
+      this.getCompareSyncDataList(this.compareType, current)
+    },
+    sizeChange (size) {
+      this.currentPages[this.compareType] = 1
+      this.limits[this.compareType] = size
+      this.getCompareSyncDataList()
+    },
+    compareCellStyle ({ row, column }) {
+      if (row.compareFields.includes(column.property)) {
+        return {
+          background: '#FFDFDF',
+          color: '#E53131'
+        }
+      }
+      return {}
+    },
+    addParamFn () {
+      this.params.push({
+        key: '',
+        value: ''
+      })
+    },
+    syncDataFn () {
+      const params = {
+        _SYNC_MODE_: this.selectMode
+      }
+      this.params.map(item => {
+        if (item.key) params[item.key] = item.value
+      })
+      this.syncStatus = 'loading'
+      this.$http.$post({
+        action: 'syncData',
+        entityId: 'FM_ENTITY_MATCH',
+        code: this.formData.CODE,
+        ps: Object.keys(params).join(','),
+        ...params
+      })
+        .then(data => {
+          this.syncStatus = 'success'
+        })
+        .catch(() => {
+          this.syncStatus = 'init'
+        })
+    },
+    exportCompareData () {
+      this.$http.$post({
+        action: 'exportCompareSyncData',
+        entityId: 'FM_ENTITY_MATCH',
+        id: this.$query.id,
+        cacheId: this.data.cacheId
+      }, {
+        responseType: 'blob'
+      })
+        .then(({ blob, filename }) => {
+          var a = document.createElement('a')
+          document.body.appendChild(a)
+          const objectUrl = URL.createObjectURL(blob)
+          a.href = objectUrl
+          a.download = filename
+          a.click()
+          window.URL.revokeObjectURL(objectUrl)
+          document.body.removeChild(a)
+        })
+    }
+  },
+  created () {
+    this.getData()
+    this.getCompareSyncDataCount()
+    this.getFields()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+}
+.sync-buttons {
+  margin-bottom: 10px;
+
+}
+.tabs {
+  background: var(--epx-bg-card);
+  margin-top: 10px;
+
+    :deep(.el-tab-pane) {
+      padding: 0 10px;
+    }
+
+}
+.table {
+
+    :deep(th.el-table__cell) {
+      background: rgba(0,0,0,0.02);
+    }
+
+}
+.sync-title {
+  margin: 10px 0;
+}
+.params-item {
+  background: var(--epx-bg);
+  border-radius: var(--epx-radius-base);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 10px;
+  &:hover {
+    .params-delete__icon {
+      display: block;
+    }
+  }
+}
+.params-content {
+  display: flex;
+
+}
+.params-key__input {
+  width: 180px;
+  margin-right: 40px;
+}
+.params-value__input {
+  width: 300px;
+}
+.params-delete__icon {
+  font-size: var(--epx-font-size-l);
+  cursor: pointer;
+  display: none;
+}
+.sync-mode {
+  display: flex;
+}
+.sync-mode__item {
+  flex : 1;
+  margin: 10px;
+  border-radius: var(--epx-radius-base);
+  overflow: hidden;
+  border: 1px solid var(--epx-border);
+  cursor: pointer;
+  position: relative;
+  &.is-selected {
+    @include border_color_primary;
+    .selected-icon {
+      display: block;
+    }
+  }
+}
+.sync-mode__bg {
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  >img {
+    width: 114px;
+  }
+}
+.sync-mode__name {
+  text-align: center;
+  margin: 10px 0;
+}
+.selected-icon {
+  position: absolute;
+  right: -1px;
+  top: 0;
+  @include font_color_primary;
+  font-size: var(--epx-font-size-xl);
+  line-height: 1;
+  display: none;
+}
+.dialog-footer {
+  text-align: center;
+}
+.sync-loading {
+  padding: 80px 0 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  >i {
+    font-size: 120px;
+    color:  #34C968;
+    line-height: 1;
+  }
+  >p {
+    margin: 16px 0;
+  }
+}
+.export-btn {
+  margin-bottom: 10px;
+}
+</style>

package/src/base/FieldRelationFormItem.vue

@@ -0,0 +1,260 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import { mapGetters } from 'vuex'
+import AddFormItemVue from '@epxing/components/src/add-form-item'
+
+// 需要按「所属对象」的字段树取值的配置项（字段选择、范围设置、条件设置、公式）
+const ENTITY_FIELD_CONFIG_NAMES = [
+  'CONTROL_ATTRIS',
+  'RELY_ATTRI',
+  'OBJECT_SCOPE',
+  'RELY_CONDITION',
+  'RELY_SCOPE_CONDITION',
+  'COMPUTED_FORMULA'
+]
+// 支持一条规则控制多个被控制字段的依赖类型
+const MULTI_CONTROL_RELY_TYPES = ['show', 'required']
+
+export default {
+  name: 'epx-field-relation-form-item',
+  extends: AddFormItemVue,
+  data () {
+    return {
+      cascadeRuleList: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    treeFields () {
+      const fields = this.getMetaViewFields(this.data.ENTITY_ID || this.$query.id) || []
+      return [...fields]
+    }
+  },
+  watch: {
+    'data.RELY_ATTRI': {
+      handler (v) {
+        this.changeObjectScope(v)
+        this.getFieldsCode(v, 'RELY_ATTRI_CODE')
+      }
+    },
+    'data.CONTROL_ATTRIS': {
+      handler (v) {
+        this.getFieldsCode(v, 'CONTROL_ATTRIS_CODE')
+      }
+    },
+    'data.RELY_TYPE' (v) {
+      const index = this.fieldsConfigs.findIndex(item => item.attriName === 'RELY_ATTRI')
+      if (index !== -1) {
+        const fieldConfigs = this.fieldsConfigs[index]
+        // 显示依赖、必填依赖都支持一条规则控制多个被控制字段
+        this.fieldsConfigs[index] = { ...fieldConfigs, isMultiple: MULTI_CONTROL_RELY_TYPES.includes(v) ? '1' : '0' }
+      }
+    },
+    cascadeRuleList: {
+      handler (v) {
+        const formatData = this.cascadeRuleList.filter(item => item.relyOptions && item.controlOptions).map(item => {
+          return {
+            operator: item.operator,
+            relyOptions: Array.isArray(item.relyOptions) ? item.relyOptions.map(item => item.id || item).join(',') : item.relyOptions,
+            controlOptions: Array.isArray(item.controlOptions) ? item.controlOptions.map(item => item.id || item).join(',') : item.controlOptions
+          }
+        })
+        this.data.CASCADE_RULE = JSON.stringify(formatData)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getFieldItem (treeFields, key, parent) {
+      for (const fieldItem of treeFields) {
+        if (fieldItem.id === key) {
+          return fieldItem
+        } else if (fieldItem.children) {
+          const field = this.getFieldItem(fieldItem.children, key, fieldItem)
+          if (field) return field
+        }
+      }
+    },
+    async onAfterFieldsConfigs () {
+      if (!(this.treeFields && this.treeFields.length > 0)) {
+        await this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: this.data.ENTITY_ID || this.$query.id
+        })
+      }
+      this.fieldsConfigs = this.fieldsConfigs.map(item => {
+        if (ENTITY_FIELD_CONFIG_NAMES.includes(item.attriName)) {
+          item.metaId = this.data.ENTITY_ID || this.$query.parentId
+          item.isTree = '1'
+          if (item.attriName === 'RELY_ATTRI') item.showSub = false
+        }
+        return item
+      })
+      this.changeObjectScope(this.data.RELY_ATTRI)
+      if (this.data.RELY_ATTRI) this.getFieldsCode(this.data.RELY_ATTRI, 'RELY_ATTRI_CODE')
+      if (this.data.CONTROL_ATTRIS) this.getFieldsCode(this.data.CONTROL_ATTRIS, 'CONTROL_ATTRIS_CODE')
+    },
+    // 依赖字段编号 CONTROL_ATTRIS_CODE 被控制字段编号 RELY_ATTRI_CODE
+    getFieldsCode (v, code) {
+      if (v) {
+        const arr = v.split(',')
+        const fields = []
+        arr.forEach(item => {
+          const field = this.getFieldItem(this.treeFields, item)
+          if (field)fields.push(field)
+        })
+        if (code === 'RELY_ATTRI_CODE') {
+          this.replyFields = fields.map(item => ({ ...item, attriName: item.field, attriLabel: item.text }))
+        } else {
+          this.controlFields = fields.map(item => ({ ...item, attriName: item.field, attriLabel: item.text }))
+        }
+        const codes = fields.map(item => item.field).join(',')
+        this.data[code] = codes
+        // 详情态展示优先取 `字段#`，不同步会一直显示后端返回的旧编号
+        this.data[code + '#'] = codes
+      } else {
+        this.data[code] = ''
+        this.data[code + '#'] = ''
+      }
+    },
+    changeObjectScope (v) {
+      if (!v) return
+      const index = this.fieldsConfigs.findIndex(item => item.attriName === 'OBJECT_SCOPE')
+      let fieldItem = null
+      if (index !== -1) {
+        fieldItem = this.getFieldItem(this.treeFields, v)
+        if (fieldItem) {
+          this.fieldsConfigs.splice(index, 1, { ...this.fieldsConfigs[index], metaId: fieldItem.relatedEntity, fieldValueMetaId: this.data.ENTITY_ID || this.$query.id, modeType: ['FIXED_VALUE', 'SYSTEM_VARIABLE', 'FIELD_VALUE', 'DYNAMIC_VALUE', 'DEFINED'] })
+        }
+      }
+    },
+    addCascadeRule () {
+      this.cascadeRuleList.push({
+        operator: '',
+        relyOptions: '',
+        controlOptions: ''
+      })
+    },
+    deleteRule (index) {
+      this.cascadeRuleList.splice(index, 1)
+    },
+    renderForm () {
+      let { labelWidthType, labelWidth, valueWidthType, valueWidth, labelFontSize, valueFontSize, lineSpace, mFormStyle, mFormPadding } = this.$configs
+      labelWidth = labelWidthType === 'auto' ? 'auto' : labelWidth
+      valueWidth = valueWidthType === 'fixed' ? valueWidth : 'auto'
+      if (this.fieldsConfigs.length > 0 && this.loadForm) {
+        return (
+          <epx-table-form class="epx-add-form-item__content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} pageType={this.componentType} v-model={this.data} fieldRelation={this.fieldRelation} column={this.column} labelAlign={this.$configs.labelAlign} lineSpace={lineSpace} labelWidth={labelWidth} labelFontSize={labelFontSize} valueWidth={valueWidth} valueFontSize={valueFontSize} mFormStyle={mFormStyle} mFormPadding={mFormPadding} showRelyFlag={this.$configs.showRelyFlag !== false} valueRelyFlag={this.$configs.valueRelyFlag !== false} onChange-fields-configs={this.changeFieldsConfigs}
+            v-slots={{
+              default: ({ showLabel, fieldConfigs, metaId, ruleMetaId }) => {
+                return fieldConfigs.attriName === 'CASCADE_RULE' ? (
+                  <div class="rule-container">
+                    <ul class="rule-list">
+                      {
+                        this.cascadeRuleList.map((item, index) => (
+                          <li class="rule-item" key={index}>
+                            <div class="rule-item__content">
+                              <label>原选项：</label>
+                              <el-select class="rule-operator" v-model={item.operator} placeholder="操作符" size="default">
+                                <el-option label="等于" value="="></el-option>
+                                <el-option label="包含" value="in"></el-option>
+                              </el-select>
+                              {this.controlFields && <epx-object key={item.id} v-model={item.controlOptions} fieldConfigs={{ ...this.controlFields[0], optionType: 'treeList', state: 'EDIT', isMultiple: '1' }}></epx-object>}
+                              <label class="ml-10">目标选项：</label>
+                              {this.replyFields && <epx-object key={item.id} v-model={item.relyOptions} fieldConfigs={{ ...this.replyFields[0], optionType: 'treeList', state: 'EDIT', isMultiple: '1' }}></epx-object>}
+                              <el-popconfirm
+                                title="确定删除？"
+                                onConfirm={() => this.deleteRule(index)}
+                                v-slots={{ reference: () => (<i class="rule-delete el-icon-close"></i>) }}>
+                              </el-popconfirm>
+                            </div>
+                          </li>
+                        ))
+                      }
+                    </ul>
+                    <el-button type="primary" link size="default" onClick={this.addCascadeRule}>添加一行</el-button>
+                  </div>
+                ) : (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+                  </epx-table-form-item>
+                )
+              }
+            }}>
+
+          </epx-table-form>
+        )
+      }
+    }
+  },
+  created () {
+    const { CASCADE_RULE } = this.data
+    if (CASCADE_RULE) {
+      this.cascadeRuleList = Array.isArray(JSON.parse(CASCADE_RULE)) ? JSON.parse(CASCADE_RULE) : []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 必填依赖「符合条件时」下方的说明，做成提示条样式
+:deep(.epx-field-relation-form-item__required-tip) {
+  .epx-form-item__notes {
+    padding: var(--epx-space-2) var(--epx-space-3);
+    border-radius: var(--epx-radius-base);
+    font-size: var(--epx-font-size-s);
+    // 用 mix(0%) 取纯主题色，避免 font_color_primary 带出 hover 变色
+    @include font_color_primary_mixin(0);
+    @include bg_color_primary(.06);
+  }
+}
+.rule-container {
+  margin-left: 128px;
+}
+.rule-item {
+  position: relative;
+  background: #f2f3f5;
+  margin: 10px 0;
+  padding: 8px;
+  border-radius: var(--epx-radius-base);
+  &:hover {
+    .rule-delete {
+      display: inline-block;
+    }
+  }
+}
+.rule-item__content {
+  display: flex;
+  align-items: center;
+}
+.rule-operator {
+  width: 100px;
+  margin-right: 10px;
+}
+.rule-delete {
+  font-size: var(--epx-font-size-l);
+  margin-left: 8px;
+  display: none;
+  cursor: pointer;
+}
+.rule-error {
+  font-size: var(--epx-font-size-s);
+  color: red;
+  position: absolute;
+  left: -12px;
+  top: 50%;
+  transform: translate(-100%, -50%);
+}
+</style>