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

package/src/visual/config/Operate.vue

@@ -0,0 +1,1083 @@
+<template>
+  <div class="operates">
+    <el-radio-group v-model="operateWay" v-if="state!=='DETAIL'">
+      <el-radio label="default" value="default">默认操作</el-radio>
+      <el-radio label="custom" value="custom">自定义操作</el-radio>
+    </el-radio-group>
+    <div class="operate-group" v-show="operateWay==='custom'">
+      <!-- 必须用 v-model 而不是 :list —— draggable 的 alterList 对两者行为相反：
+           `:list` 分支是 onList(this.list) 原地 splice，**不 emit `input` / `update:modelValue`**，引用不变
+           ⇒ Vue3 浅层 watcher 不跑 ⇒ 下面那个 operates watcher 的 $emit('change-configs')
+           发不出去 ⇒ 拖出来的顺序不写回设计器，刷新即还原（Vue2 因为 splice 被 patch 过而正常，
+           是典型的静默迁移回归）。
+           `v-model` 分支走 [...modelValue] 新数组 + emit('update:modelValue')，引用变了，
+           浅层 watcher 正常触发，**不需要 deep**。
+           （`change` 事件其实两种模式都发，所以挂 `@change` 自己接也是一条可行修法；这里选
+           v-model 是因为它顺带消掉了「operates 与 prop 同引用、就地 splice 等于改 prop」的隐患。） -->
+      <draggable
+        v-model="operates"
+        class="list-group-operates"
+        ghost-class="ghost"
+        :disabled="state==='DETAIL'"
+      >
+        <transition-group type="transition" name="flip-list" >
+          <el-button v-bind="{[operate.type]: true}" v-for="operate in operates"
+            :key="operate.text"
+            size="default"
+
+            :type="operate.type=='text'?'text' :operate.ui"
+          >
+            <i :class="['fa', operate.icon]"></i>
+            {{operate.text}}
+          </el-button>
+        </transition-group>
+      </draggable>
+      <el-button type="primary" link :style="{ marginLeft: '12px' }" @click="openDialog" v-if="state!=='DETAIL'">设置</el-button>
+   </div>
+    <div class="operate-group" v-show="operateWay==='default'">
+      <el-button v-bind="{[operate.type]: true}" size="default" v-for="operate in defaultValue" :key="operate.text"
+            :type="operate.type=='text'?'text' :operate.ui">{{operate.text}}</el-button>
+    </div>
+    <div class="operate-config">
+      <epx-visual-config-lazy-dialog
+        class="setting-fields-dialog setting-operate-dialog"
+        title="操作按钮配置"
+        v-model="showDialog"
+        :append-to-body="true"
+        width="70%"
+      >
+        <div class="setting-fields-container">
+          <div class="setting-fields__select">
+            <draggable
+              :list="settingOperates"
+              class="list-group"
+              ghost-class="ghost"
+            >
+              <transition-group type="transition" name="flip-list" class="setting-fields__select--list">
+                <li class="setting-fields__select--item" v-for="(operate, index) in settingOperates" :key="operate.text" @click="selectOperateFn(operate)">
+                  <el-button size="default" :type="operate.ui"> <i :class="['fa', operate.icon]"></i>{{operate.text}}</el-button>
+                  <span class="button-icon-container">
+                    <i title="复制" class="el-icon-copy-document" @click.stop="copyOperate(operate, index)"></i>
+                    <i title="删除" class="el-icon-delete" @click.stop="deleteOperate(operate, index)"></i>
+                  </span>
+                </li>
+              </transition-group>
+            </draggable>
+            <el-popover
+              trigger="click">
+              <ul :style="{maxHeight: '300px', overflow: 'auto'}">
+                <li v-for="operate in commonOperates" :key="operate.text" class="common-operate-item" @click="addOperate(operate)">{{operate.text}}</li>
+              </ul>
+              <template v-slot:reference><el-button type="primary" link class="setting-fields__select--add" >+ 添加常用按钮</el-button></template>
+            </el-popover>
+            <el-button type="primary" link class="setting-fields__select--add" @click="addOperate(null)" >+ 添加自定义按钮</el-button>
+            <el-button type="primary" link class="setting-fields__select--add" @click="addFoldOperate(null)" >+ 添加折叠按钮</el-button>
+          </div>
+          <!-- 操作按钮配置项 -->
+          <operate-Item
+            :key="selectOperate.id"
+            v-if="selectOperate"
+            :designer="designer"
+            :value="selectOperate"
+            :operate-tabs="selectOperate.operateType==='dropdown'? dropdownTabs :operateTabs"
+            :metaId="currentMetaId"
+            :defaultRuleList="ruleList"
+            :defaultActionList="actionList"
+            :treeFieldStore="treeFieldStore"
+            :useProcessRight="configs.useProcessRight"
+            :scopeConfigs="scopeConfigs"
+            @change="updateOperate"
+            @set-dropdown="openDropdownDialog"
+          ></operate-Item>
+        </div>
+        <template v-slot:footer><div class="button-group">
+          <el-button type="primary" @click="saveOperateSetting">保存</el-button>
+          <el-button @click="showDialog=false">取消</el-button>
+        </div></template>
+      </epx-visual-config-lazy-dialog>
+      <epx-visual-config-lazy-dialog
+        v-if="selectOperate"
+        class="setting-fields-dialog setting-operate-dialog"
+        title="折叠按钮配置"
+        v-model="showDropdownDialog"
+        :append-to-body="true"
+        width="70%"
+      >
+        <div class="setting-fields-container">
+          <div class="setting-fields__select">
+            <draggable
+              :list="settingDropdownOperates"
+              class="list-group"
+              ghost-class="ghost"
+            >
+             <transition-group type="transition" name="flip-list" class="setting-fields__select--list">
+                <li class="setting-fields__select--item" v-for="(operate, index) in settingDropdownOperates" :key="operate.text" @click="selectOperateFn(operate, 'dropdown')">
+                  <el-button size="default" :type="operate.ui"> <i :class="['fa', operate.icon]"></i>{{operate.text}}</el-button>
+                  <span class="button-icon-container">
+                    <i title="复制" class="el-icon-copy-document" @click.stop="copyDropdown(operate, index)"></i>
+                    <i title="删除" class="el-icon-delete" @click.stop="deleteDropdown(operate, index)"></i>
+                  </span>
+                </li>
+              </transition-group>
+            </draggable>
+            <el-popover
+              trigger="click">
+              <ul>
+                <li v-for="operate in commonOperates" :key="operate.text" class="common-operate-item" @click="addDropdownOperate(operate)">{{operate.text}}</li>
+              </ul>
+              <template v-slot:reference><el-button type="primary" link class="setting-fields__select--add" >+ 添加常用按钮</el-button></template>
+            </el-popover>
+            <el-button type="primary" link class="setting-fields__select--add" @click="addDropdownOperate(null)" >+ 添加自定义按钮</el-button>
+          </div>
+          <operate-Item
+            :key="selectDropdownOperate.key"
+            v-if="selectDropdownOperate"
+            :designer="designer"
+            :value="selectDropdownOperate"
+            :operate-tabs="operateTabs"
+            :metaId="currentMetaId"
+            :defaultRuleList="ruleList"
+            :defaultActionList="actionList"
+            :treeFieldStore="treeFieldStore"
+            :useProcessRight="configs.useProcessRight"
+            :scopeConfigs="scopeConfigs"
+            @change="updateDropdownOperates"
+          ></operate-Item>
+        </div>
+        <template v-slot:footer><div class="button-group">
+            <el-button type="primary" @click="saveDropdownOperate">保存</el-button>
+            <el-button @click="showDropdownDialog=false">取消</el-button>
+          </div></template>
+      </epx-visual-config-lazy-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from '@epxing/core/src/components/draggable'
+import OperateItem from './OperateItem'
+export default {
+  name: 'epx-visual-config-operate',
+  components: {
+    draggable,
+    OperateItem
+  },
+  props: {
+    value: Array,
+    defaultValue: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    configs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    state: {
+      type: String,
+      defaultValue: 'ADD'
+    },
+    metaId: String,
+    compMetaId: String,
+    commonOperates: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    handlerList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    actionList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    ruleList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    treeFieldStore: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    scopeConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    operateConfigs: {
+      type: Array
+    },
+    operateOptions: {
+      type: [Object, Array],
+      default () {
+        return {}
+      }
+    },
+    pageGlobalConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    pageParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    changeItemConfigs: {
+      type: Function,
+      default () {
+        return () => null
+      }
+    },
+    designer: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      operateTabs: [],
+      operates: [],
+      settingOperates: [],
+      operateWay: 'default',
+      pageWay: 'component',
+      showDialog: false,
+      selectOperate: null,
+      dropdownTabs: [],
+      showDropdownDialog: false,
+      selectDropdownOperate: null,
+      settingDropdownOperates: []
+    }
+  },
+  computed: {
+    currentMetaId () {
+      return this.metaId || this.compMetaId
+    }
+  },
+  watch: {
+    defaultValue: {
+      handler () {
+        if (this.value) {
+          this.operateWay = 'custom'
+          this.operates = this.value
+        } else {
+          this.operateWay = 'default'
+          this.operates = [...this.defaultValue]
+        }
+      },
+      immediate: true
+    },
+    operates (v) {
+      if (this.operateWay === 'custom') {
+        if (v !== this.value) {
+          this.$emit('change-configs', v)
+        }
+      } else if (this.value != null) {
+        // 默认方式下仅在存在自定义值时才需要清除，避免默认值回显触发无意义写回
+        this.$emit('change-configs', null)
+      }
+    },
+    operateWay (v) {
+      if (this._skipOperateWayChange) {
+        this._skipOperateWayChange = false
+        return
+      }
+      if (v === 'custom') {
+        if (this.operates !== this.value) {
+          this.$emit('change-configs', this.operates)
+        }
+      } else if (this.value && this.value.length) {
+        // 已有自定义按钮时切回默认需确认，防止误触清空配置
+        this.$confirm('切换为默认操作后，已配置的自定义按钮将被清除，是否继续？', '提示', { type: 'warning' })
+          .then(() => {
+            this.$emit('change-configs', null)
+          })
+          .catch(() => {
+            this._skipOperateWayChange = true
+            this.operateWay = 'custom'
+          })
+      } else {
+        this.$emit('change-configs', null)
+      }
+    },
+    operateOptions () {
+      this.getOperateOptions()
+    }
+  },
+  methods: {
+    getOperateOptions () {
+      const defaultOperateOptions = {
+        text: { key: 'text', label: '按钮名称' },
+        ui: {
+          key: 'ui',
+          label: '按钮类型',
+          type: 'ui-select',
+          options: [
+            { label: '主要按钮', value: 'primary' },
+            { label: '成功按钮', value: 'success' },
+            { label: '信息按钮', value: 'info' },
+            { label: '警告按钮', value: 'warning' },
+            { label: '危险按钮', value: 'danger' },
+            { label: '文本按钮', value: 'text' },
+            { label: '默认按钮', value: 'default' }
+          ],
+          defaultValue: 'default'
+        },
+        styles: {
+          key: 'styles',
+          label: '按钮样式',
+          type: 'checkbox',
+          options: [
+            {
+              label: '空心按钮',
+              value: 'plain'
+            },
+            {
+              label: '圆角按钮',
+              value: 'round'
+            },
+            {
+              label: '圆形按钮',
+              value: 'circle'
+            }
+          ]
+        },
+        icon: { key: 'icon', label: '按钮图标', type: 'object', object: 'FM_FONT_ICON' },
+        showName: { key: 'showName', label: '显示按钮名称', type: 'switch', defaultValue: true },
+        preview: { key: 'preview', label: '预览', type: 'preview' },
+        beforeTrigger: {
+          key: 'beforeTrigger',
+          label: '事件触发前',
+          type: 'function'
+        },
+        handler: {
+          key: 'handler',
+          label: '处理事件',
+          type: 'select',
+          options: this.handlerList,
+          allowCreate: true
+        },
+        metaId: { key: 'metaId', label: '请求对象', type: 'entity' },
+        action: { key: 'action', label: '请求操作', type: 'action', options: this.actionList, desc: '请求操作可用于控制操作权限：按钮是否显示' },
+        rule: {
+          key: 'rule',
+          label: '业务规则',
+          type: 'rule',
+          options: this.ruleList,
+          showFlag: { handler: 'commonRuleAction' }
+        },
+        page: {
+          key: 'page',
+          label: '打开页面',
+          type: 'page',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity', 'entityImport'] }
+        },
+        menuId: {
+          key: 'menuId',
+          label: '打开菜单',
+          type: 'object',
+          object: 'FM_MODULE',
+          flag: 'config_menu',
+          objectWay: 'option',
+          isTree: '1',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity'] }
+        },
+        moveType: {
+          key: 'moveType',
+          label: '移动类型',
+          type: 'radio',
+          options: [{ label: '上移', value: 'pre' }, { label: '下移', value: 'next' }, { label: '最前', value: 'first' }, { label: '最后', value: 'last' }, { label: '上一层', value: 'upper' }],
+          defaultValue: 'pre',
+          showFlag: { handler: ['operateTree'] }
+        },
+        openMode: {
+          key: 'openMode',
+          label: '页面打开方式',
+          type: 'radio',
+          options: [{ label: '直接打开', value: '3' }, { label: '标签页', value: '1' }, { label: '弹窗', value: '2' }],
+          defaultValue: '3',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity', 'print'] }
+        },
+        serviceId: {
+          key: 'serviceId',
+          label: '指定应用',
+          type: 'object',
+          object: 'FM_SERVICE',
+          scopeParams: [{ field: 'CLIENT', values: this.CLIENT }],
+          showFlag: { handler: ['goApp'] }
+        },
+        webLinkUrl: {
+          key: 'webLinkUrl',
+          label: '指定链接',
+          type: 'input',
+          showFlag: { handler: 'goWebLink' }
+        },
+        pageType: {
+          key: 'pageType',
+          label: '页面状态',
+          type: 'radio',
+          options: [{ label: '新增', value: 'ADD' }, { label: '编辑', value: 'EDIT' }, { label: '详情', value: 'DETAIL' }, { label: '只读', value: 'READONLY' }],
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity'] }
+        },
+        printWay: {
+          key: 'printWay',
+          label: '打印方式',
+          type: 'radio',
+          options: [{ label: '自定义报表打印', value: 'custom' }, { label: '帆软报表打印', value: 'fine' }],
+          defaultValue: 'custom',
+          showFlag: { handler: 'print' }
+        },
+        printCode: {
+          key: 'printCode',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_FORM',
+          dataKey: 'CODE',
+          showFlag: { handler: ['print', 'downloadReport'], printWay: 'custom' }
+        },
+        cptName: {
+          key: 'cptName',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_REPORT_TEMPLATE',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'fine' }
+        },
+        printOperates: {
+          key: 'printOperates',
+          label: '按钮显示',
+          type: 'checkbox',
+          options: [{ label: '下载pdf', value: 'downloadPdf' }, { label: '下载word', value: 'downloadWord' }, { label: '下载excel', value: 'downloadExcel' }, { label: '打印', value: 'print' }],
+          defaultValue: 'downloadPdf,downloadWord,downloadExcel,print',
+          showFlag: { handler: 'print', printWay: 'custom' }
+        },
+        showDownloadReportDialog: {
+          key: 'showDownloadReportDialog',
+          label: '下载报表弹窗',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: 'downloadReport' }
+        },
+        showDownloadReportFormat: {
+          key: 'showDownloadReportFormat',
+          label: '显示文件格式',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: 'downloadReport', showDownloadReportDialog: [true, null] }
+        },
+        downloadReportFormat: {
+          key: 'downloadReportFormat',
+          label: '文件格式',
+          type: 'radio',
+          options: [{ label: 'pdf', value: 'pdf' }, { label: 'excel', value: 'excel' }, { label: 'word', value: 'word' }],
+          defaultValue: 'pdf',
+          showFlag: { handler: 'downloadReport' }
+        },
+        downloadReportWay: {
+          key: 'downloadReportWay',
+          label: '下载报表方式',
+          type: 'radio',
+          options: [{ label: '单个文件', value: 'single' }, { label: '多个文件', value: 'multiple' }],
+          defaultValue: 'single',
+          showFlag: { handler: 'downloadReport' }
+        },
+        downloadReportNameFields: {
+          key: 'downloadReportNameFields',
+          label: '文件命名字段',
+          type: 'field',
+          showFlag: { handler: 'downloadReport' }
+        },
+        downloadReportNameSplit: {
+          key: 'downloadReportNameSplit',
+          label: '文件命名分隔符',
+          type: 'select',
+          allowCreate: true,
+          placeholder: '请选择或输入分隔符',
+          options: [{ label: '_', value: '_' }, { label: '-', value: '-' }],
+          // eslint-disable-next-line no-useless-escape
+          tip: '文件分隔符不能包含\ / : * ? " < > |',
+          showFlag: { handler: 'downloadReport' }
+        },
+        destActivityId: {
+          key: 'destActivityId',
+          label: '审核流程',
+          type: 'process',
+          processType: 'check',
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        processNode: {
+          key: 'processNode',
+          label: '流程',
+          type: 'process',
+          showFlag: { handler: 'applyEntity' }
+        },
+        auditorOptional: {
+          key: 'auditorOptional',
+          label: '审核人自选',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: { handler: ['checkEntity', 'check', 'applyEntity'] }
+        },
+        openOpinion: {
+          key: 'openOpinion',
+          label: '审核意见弹窗',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        showCheckFields: {
+          key: 'showCheckFields',
+          label: '显示字段',
+          type: 'checkbox',
+          options: [{ label: '审核操作', value: 'operate' }, { label: '审核意见', value: 'opinion' }, { label: '审核签名', value: 'sign' }],
+          defaultValue: ['operate', 'opinion', 'sign'],
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        checkRequireFields: {
+          key: 'checkRequireFields',
+          label: '必填字段',
+          type: 'checkbox',
+          options: [{ label: '审核意见', value: 'opinion' }, { label: '审核签名', value: 'sign' }],
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        showCheckOperate: {
+          key: 'showCheckOperate',
+          label: '审核操作',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        checkOpinion: {
+          key: 'checkOpinion',
+          label: '审核意见',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        checkOpinionLabel: {
+          key: 'checkOpinionLabel',
+          label: '审核意见名称',
+          type: 'text',
+          showFlag: { handler: ['checkEntity', 'check'], showCheckFields: ['opinion', null] }
+        },
+        checkOpinionValue: {
+          key: 'checkOpinionValue',
+          label: '审核意见默认值',
+          type: 'text',
+          showFlag: { handler: ['checkEntity', 'check'], showCheckFields: ['opinion', null] }
+        },
+        checkSign: {
+          key: 'checkSign',
+          label: '审核签名',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        reload: {
+          key: 'reload',
+          label: '是否刷新页面',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          showFlag: { handler: 'backPage' },
+          defaultValue: false
+        },
+        function: {
+          key: 'function',
+          label: '事件名称',
+          type: 'function',
+          showFlag: { handler: 'customJs' }
+        },
+        afterTrigger: {
+          key: 'afterTrigger',
+          label: '事件触发后',
+          type: 'select',
+          options: [
+            { label: '返回', value: 'backPage' },
+            { label: '返回并刷新', value: 'backRefeshPage' },
+            { label: '打开指定页面', value: 'goPage' },
+            { label: '刷新组件', value: '$refesh' },
+            { label: '刷新页面', value: '$refeshPage' },
+            { label: '重新加载页面', value: 'reloadPage' }
+          ],
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'] }
+        },
+        backPageDelta: {
+          key: 'backPageDelta',
+          label: '返回页面数',
+          type: 'num',
+          defaultValue: 1,
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'], afterTrigger: ['backPage', 'backRefeshPage'] }
+        },
+        afterTriggerPage: {
+          key: 'afterTriggerPage',
+          label: '打开页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }],
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'], afterTrigger: 'goPage' }
+        },
+        afterTriggerPageOpenMode: {
+          key: 'afterTriggerPageOpenMode',
+          label: '页面打开方式',
+          type: 'radio',
+          options: [{ label: '直接打开', value: '3' }, { label: '标签页', value: '1' }, { label: '弹窗', value: '2' }],
+          defaultValue: '3',
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'], afterTrigger: 'goPage' }
+        },
+        afterTriggerParams: {
+          key: 'afterTriggerParams',
+          label: '页面参数传递',
+          type: 'params',
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'], afterTrigger: 'goPage' }
+        },
+        num: { key: 'num', label: '控制选择数量', type: 'radio', options: [{ label: '不需要', value: '0' }, { label: '选择1个', value: '1' }, { label: '选择多个', value: 'n' }], defaultValue: '0' },
+        limitFlag: { key: 'limitFlag', label: '操作限制', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }], defaultValue: true },
+        limitCondition: {
+          key: 'limitCondition',
+          label: '操作限制条件',
+          type: 'scope',
+          showOperate: false,
+          modeType: ['FIXED_VALUE', 'DYNAMIC_VALUE', 'DEFINED'],
+          extendFields: [{
+            code: 'user',
+            text: '用户信息',
+            type: 'meta',
+            children: [
+              { code: 'user.account', text: '用户账户', type: 'field', field: 'user.account', dataType: 'text' },
+              { code: 'user.roleCode', text: '用户角色编号', type: 'field', field: 'user.roleCode', dataType: 'text' }
+            ]
+          }],
+          showFlag: { limitFlag: [true, null] }
+        },
+        limitTip: { key: 'limitTip', label: '操作限制提示', defaultValue: '对不起，不能执行该操作！', showFlag: { limitFlag: [true, null] } },
+        showConditionType: { key: 'showConditionType', label: '显示条件类型', type: 'radio', options: [{ label: '高级筛选', value: 'scope' }, { label: '公式编辑器', value: 'el' }], defaultValue: 'scope' },
+        showCondition: {
+          key: 'showCondition',
+          label: '显示条件',
+          type: 'scope',
+          showOperate: false,
+          modeType: ['FIXED_VALUE', 'DYNAMIC_VALUE', 'DEFINED'],
+          // 显示条件在前端用 runExpByScope 解析，系统变量改用前端可解析的 $[xxx] 形式
+          frontendSysVar: true,
+          extendFields: [{
+            code: 'user',
+            text: '用户信息',
+            type: 'meta',
+            children: [
+              { code: 'user.account', text: '用户账户', type: 'field', field: 'user.account', dataType: 'text' },
+              { code: 'user.roleCode', text: '用户角色编号', type: 'field', field: 'user.roleCode', dataType: 'text' }
+            ]
+          }],
+          showFlag: { showConditionType: ['scope', null] }
+        },
+        showConditionEl: { key: 'showConditionEl', label: '显示条件（表达式）', type: 'el', showFlag: { showConditionType: 'el' } },
+        confirm: { key: 'confirm', label: '二次确认', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }], defaultValue: false },
+        confirmMsg: { key: 'confirmMsg', label: '操作确认信息', showFlag: { confirm: true } },
+        confirmButtonText: { key: 'confirmButtonText', label: '确认按钮文字', defaultValue: this.$t('confirm'), showFlag: { confirm: true } },
+        cancelButtonText: { key: 'cancelButtonText', label: '取消按钮文字', defaultValue: this.$t('cancel'), showFlag: { confirm: true } },
+        successMsg: { key: 'successMsg', label: '操作成功提示', defaultValue: '处理成功' },
+        failMsg: { key: 'failMsg', label: '操作失败提示', defaultValue: '处理失败' },
+        actionOptionMsg: { key: 'actionOptionMsg', label: '禁止操作提示' },
+        mask: { key: 'mask', label: 'loading遮罩', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }] },
+        params: { key: 'params', label: '参数传递', type: 'params' },
+        terminal: { key: 'terminal', label: '适用终端', type: 'radio', options: [{ label: '全部', value: 'all' }, { label: 'PC端', value: 'pc' }, { label: '移动端', value: 'mobile' }], defaultValue: 'all' }
+      }
+      const operateOptions = { ...defaultOperateOptions, ...this.operateOptions }
+      let operateConfigs = this.operateConfigs
+      if (!operateConfigs) {
+        operateConfigs = [
+          {
+            key: 'base',
+            title: '基本',
+            options: ['text', 'ui', 'styles', 'icon', 'showName', 'preview']
+          },
+          {
+            key: 'event',
+            title: '事件',
+            options: ['handler', 'metaId', 'action', 'rule', 'moveType', 'openMode', 'page', 'pageType', 'menuId', 'serviceId', 'webLinkUrl', 'printWay', 'printCode', 'cptName', 'destActivityId', 'processNode', 'function', 'params', 'beforeTrigger', 'afterTrigger', 'afterTriggerPage', 'afterTriggerPageOpenMode', 'afterTriggerParams']
+          },
+          {
+            key: 'advance',
+            title: '高级',
+            options: ['terminal', 'num', 'limitFlag', 'limitCondition', 'limitTip', 'showCondition', 'confirm', 'confirmMsg', 'confirmButtonText', 'cancelButtonText', 'successMsg', 'failMsg', 'mask']
+          }
+        ]
+      }
+      this.operateTabs = operateConfigs.map(item => {
+        return {
+          ...item,
+          options: item.options.map(option => operateOptions[option])
+        }
+      })
+      const dropdownOptions = ['text', 'ui', 'styles', 'icon', 'showName', 'preview'].map(option => operateOptions[option])
+      const dropdownAnvanceOptions = ['terminal', 'limitFlag', 'limitCondition', 'limitTip', 'showConditionType', 'showCondition', 'showConditionEl'].map(option => operateOptions[option])
+      this.dropdownTabs = [
+        {
+          key: 'base',
+          title: '基本',
+          options: [...dropdownOptions, { key: 'operates', label: '按钮', type: 'operate' }]
+        },
+        {
+          key: 'advance',
+          title: '高级',
+          options: dropdownAnvanceOptions
+        }
+      ]
+    },
+
+    openDialog () {
+      this.settingOperates = this.$_.cloneDeep(this.operates)
+      this.showDialog = true
+      this.selectOperate = null
+    },
+    openDropdownDialog () {
+      this.showDropdownDialog = true
+      this.selectDropdown = null
+      this.settingDropdownOperates = this.selectOperate.operates ? this.$_.cloneDeep(this.selectOperate.operates) : []
+    },
+    addOperate (operate) {
+      const key = 'operate_' + this.$util.genId()
+      const item = { ...(operate || { text: '自定义按钮' }), key }
+      this.settingOperates.push(item)
+      this.selectOperateFn(item)
+    },
+    addFoldOperate (operate) {
+      const key = 'operate_' + this.$util.genId()
+      const item = { ...(operate || { text: '折叠按钮', operateType: 'dropdown' }), key }
+      this.settingOperates.push(item)
+      this.selectOperateFn(item)
+    },
+    addDropdownOperate (operate) {
+      if (this.selectOperate) {
+        const key = 'operate_' + this.$util.genId()
+        const dropdownOperate = { ...(operate || { text: '自定义按钮' }), key }
+        this.settingDropdownOperates.push(dropdownOperate)
+        this.selectOperateFn(dropdownOperate, 'dropdown')
+      }
+    },
+    copyOperate (operate) {
+      const key = 'operate_' + this.$util.genId()
+      // id 也要重新生成，否则复制出的按钮与原按钮共用同一 id（运行时按 id 标识按钮），会互相影响
+      const newBtn = { ...this.$_.cloneDeep(operate), key, id: key, text: `${operate.text}-复制-按钮${this.settingOperates.length + 1}` }
+      this.settingOperates.push(newBtn)
+    },
+    deleteOperate (operate, index) {
+      if (this.selectOperate && operate.key === this.selectOperate.key) this.selectOperate = null
+      this.settingOperates.splice(index, 1)
+    },
+    copyDropdown (operate) {
+      if (this.selectDropdownOperate && operate.key === this.selectDropdownOperate.key) this.selectDropdownOperate = null
+      const key = 'operate_' + this.$util.genId()
+      // id 也要重新生成，否则复制出的按钮与原按钮共用同一 id（运行时按 id 标识按钮），会互相影响
+      const newBtn = { ...this.$_.cloneDeep(operate), key, id: key, text: `${operate.text}-复制-按钮${this.settingDropdownOperates.length + 1}` }
+      this.settingDropdownOperates.push(newBtn)
+    },
+    deleteDropdown (operate, index) {
+      if (this.selectDropdownOperate && operate.key === this.selectDropdownOperate.key) this.selectDropdownOperate = null
+      this.settingDropdownOperates.splice(index, 1)
+    },
+    async selectOperateFn (operate = {}, type) {
+      if (!operate.key) operate.key = 'operate_' + this.$util.genId()
+      const selectOperate = { ...operate }
+      if (type === 'dropdown') {
+        this.selectDropdownOperate = selectOperate
+      } else {
+        this.selectOperate = null
+        this.$nextTick(() => {
+          this.selectOperate = selectOperate
+        })
+      }
+    },
+    async updateOperate (v) {
+      const operates = this.settingOperates
+      const selectOperate = { ...v }
+      const index = operates.findIndex(item => item.key === selectOperate.key)
+      this.$emit('change-operate', v)
+      if (index !== -1) {
+        const operate = { ...selectOperate }
+        this.settingOperates.splice(index, 1, operate)
+      }
+    },
+    saveOperateSetting () {
+      setTimeout(() => {
+        this.operates = [...this.settingOperates]
+        this.$message.success('保存成功')
+        this.showDialog = false
+      }, 400)
+    },
+    async updateDropdownOperates (v) {
+      const selectOperate = { ...v }
+      const index = this.settingDropdownOperates.findIndex(item => item.key === selectOperate.key)
+      if (index !== -1) {
+        const operate = { ...this.settingDropdownOperates[index], ...selectOperate }
+        this.settingDropdownOperates.splice(index, 1, operate)
+      }
+    },
+    saveDropdownOperate () {
+      this.selectOperate.operates = [...this.settingDropdownOperates]
+      this.showDropdownDialog = false
+      this.selectDropdownOperate = null
+      this.selectOperateFn(this.selectOperate)
+    }
+  },
+  created () {
+    // 如果按钮有值，默认为自定义设置
+    this.getOperateOptions()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.operate-config {
+
+    :deep(.el-dialog__body) {
+      padding: 0;
+    }
+
+}
+.operate-config__options {
+  width: 100%;
+  height: 100%;
+}
+
+.list-group-operates {
+  display: inline;
+
+    :deep(.el-button) {
+      margin-bottom: 10px;
+    }
+
+}
+.common-operate-item {
+  cursor: pointer;
+  line-height: 32px;
+  &:hover {
+    @include font_color_primary()
+  }
+}
+
+.setting-fields-container {
+  display: flex;
+  height: 60vh;
+}
+.setting-fields__select {
+  width: 210px;
+  height: 100%;
+  padding-top: 20px;
+  box-sizing: border-box;
+  border-right: 1px solid #e3e3e3;
+  overflow: auto;
+  .list-group {
+    width: 100%;
+  }
+}
+.setting-fields__select--item {
+  width: 100%;
+  padding: 8px 24px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  i {
+    line-height: 1;
+    font-size: var(--epx-font-size-base);
+  }
+
+    :deep(.el-button) {
+      max-width: calc(100% - 20px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+  .el-icon-document,.el-icon-copy-document {
+    @include font-color-primary();
+    margin-right: 8px;
+  }
+  .button-icon-container{
+    display: none;
+    margin-left: 8px;
+  }
+  .el-icon-delete {
+    display: none;
+    color: red;
+  }
+  &:hover, &.active {
+    .button-icon-container{
+      display: inline-block;
+      width: 40px;
+    }
+    .el-icon-delete,.el-icon-copy-document {
+      display: inline;
+    }
+    @include font-color-primary();
+    @include bg-color-primary(.2)
+  }
+}
+.setting-fields__select--add {
+
+    &.el-button {
+         margin-left: 24px;
+    }
+
+}
+
+.setting-field__item {
+  display: flex;
+
+    :deep(.el-color-picker__trigger) {
+      width: 120px;
+    }
+
+}
+.setting-field__item--default {
+  white-space: nowrap;
+}
+
+.button-group {
+  height: 60px;
+  border-top: 1px solid #e3e3e3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.operate-color {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  line-height: 36px;
+  box-sizing: border-box;
+  text-align: center;
+  .check-icon {
+    display: none;
+  }
+  &.default {
+    border: 1px solid #e3e3e3;
+  }
+  &.primary {
+    @include bg_color_primary;
+  }
+  &.success {
+    background: #67c23a;
+  }
+  &.warning {
+    background: #e6a23c;
+  }
+  &.danger {
+    background: #f56c6c;
+  }
+  &.active {
+    .check-icon {
+      display: inline;
+      color: #fff;
+      font-size: 18px;
+      text-align: center
+    }
+  }
+  &.active.default {
+    .check-icon {
+      @include font_color_primary;
+    }
+  }
+}
+.handler-item {
+  padding-left: 40px;
+  position: relative;
+  &:last-child {
+    .handler-item__dot {
+      top: 15px;
+      left: 20px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #888888;
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+.event-delete {
+  position: absolute;
+  left: 400px;
+  top: 0;
+  line-height: 30px;
+  z-index: 1;
+}
+.handler-item__dot {
+  position: absolute;
+  top: 20px;
+  left: 15px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  @include bg_color_primary(.4);
+  text-align: center;
+  line-height: 20px;
+  flex-direction: column;
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    @include bg_color_primary;
+  }
+
+}
+.handler-item__line {
+  display: block;
+  position: absolute;
+  top: 40px;
+  left: 24px;
+  width: 2px;
+  height: calc(100% - 20px);
+  background: #DCDFE6;
+}
+.handler-function {
+  margin-top: 10px;
+
+    :deep(.el-input) {
+      margin-right: 10px;
+    }
+
+}
+.operate-config-item__tip {
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+</style>
+<style lang="scss">
+.setting-operate-dialog {
+  .el-dialog__body {
+    padding-bottom: 0;
+  }
+  .el-dialog__footer {
+    padding: 0;
+  }
+}
+</style>