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

package/src/visual/config/OperateItem.vue

@@ -0,0 +1,917 @@
+<template>
+<div class="operate-config__options" v-if="selectOperate" :key="selectOperate.key || selectOperate.id">
+  <el-tabs class="operate-tabs" v-model="operateTab">
+    <el-tab-pane v-for="tab in operateTabs" :key="tab.key" :label="tab.title" :name="tab.key">
+      <el-form class="setting-field__config" label-position="right">
+        <el-form-item v-for="item in showOperateOptions(tab.options)" :key="item.key" :label="item.label">
+          <!-- 单选框 -->
+          <el-radio-group v-if="item.type==='radio'" :model-value="selectOperate[item.key]!=null ?  selectOperate[item.key]: item.defaultValue">
+            <el-radio v-for="option in item.options" :key="option.value" :label="option.value" :value="option.value" @click="selectOperate[item.key] = option.value">
+              {{option.label}}
+            </el-radio>
+          </el-radio-group>
+          <epx-visual-config-select
+            v-else-if="item.type==='select'"
+            :allow-create="item.allowCreate"
+            :value="selectOperate[item.key]"
+            :defaultValue="item.defaultValue"
+            :placeholder="item.placeholder"
+            :option-list="item.options"
+            :multiple="item.multiple"
+            @change-configs="v=>(selectOperate[item.key] = v)"
+          ></epx-visual-config-select>
+          <!-- 多选框 -->
+          <epx-visual-config-checkbox
+            v-else-if="item.type==='checkbox'"
+            :code="item.code"
+            :option-list="item.options"
+            :value="selectOperate[item.key]"
+            :defaultValue="item.defaultValue"
+            @change-configs="v=>(selectOperate[item.key] = v)"
+          />
+          <!-- 开关 -->
+          <el-switch v-else-if="item.type==='switch'" :model-value="selectOperate[item.key]!=null ?  selectOperate[item.key]: item.defaultValue" @update:model-value="v=>(selectOperate[item.key] = v)"></el-switch>
+          <!-- 对象 -->
+          <epx-visual-config-object
+            v-else-if="item.type==='object'"
+            :value="selectOperate[item.key]"
+            label=''
+            :dataKey="item.dataKey"
+            :object="item.entityId || item.object"
+            :flag="item.flag"
+            :fieldConfigs="item.fieldConfigs"
+            @change-configs="v=>(selectOperate[item.key] = v)"
+          ></epx-visual-config-object>
+          <epx-visual-config-field
+            v-else-if="item.type==='field'"
+            :value="selectOperate[item.key]"
+            :metaId="entityWay === 'custom' ?  selectOperate.metaId|| metaId: metaId"
+            :treeFieldStore="treeFieldStore"
+            :multiple="item.multiple"
+            :limit="item.limit"
+            :scopeConfigs="scopeConfigs"
+            :defaultShowSubField="item.showSubField"
+            :showSubFlag="item.showSubFlag"
+            @change-configs="v=>(selectOperate[item.key] = v)"
+          />
+          <!-- 颜色 -->
+           <el-radio-group class="operate-item__ui-select" v-else-if="item.type==='ui-select'" v-model="selectOperate.ui" size="default">
+            <el-radio v-for="option in operateUi" :key="option.value" :label="option.value" :value="option.value" border>
+              <el-button size="small" :type="option.value" @click="selectOperate['ui'] = option.value">{{option.label}}</el-button>
+            </el-radio>
+          </el-radio-group>
+          <!-- <ul class="operate-color__list">
+
+            <li v-for="option in operateUi" :key="option.value"
+              :class="['operate-color__item']"
+              @click="$set(selectOperate, 'ui', option.value)">
+              <div :class="['operate-color', option.value, {active: option.value===(selectOperate.ui || 'default')}]" >
+                <i class="el-icon-check check-icon"></i>
+              </div>
+              <p class="operate-color__text">{{option.label}}</p>
+            </li>
+          </ul> -->
+          <!-- 预览 -->
+          <el-button v-bind="{[selectOperate.type]: true}" size="default"
+            v-else-if="item.type==='preview'"
+            :type="selectOperate.ui"
+            :plain="selectOperate.styles && selectOperate.styles.includes('plain')"
+            :circle="selectOperate.styles && selectOperate.styles.includes('circle')"
+            :round="selectOperate.styles && selectOperate.styles.includes('round')"
+            :icon="selectOperate.icon && (selectOperate.icon.id || selectOperate.icon)">
+            <template v-if="selectOperate.showName!==false">{{selectOperate.text}}</template>
+          </el-button>
+          <!-- 业务对象 -->
+          <template v-else-if="item.type==='entity'">
+            <el-radio-group v-model="entityWay">
+              <el-radio label="default" value="default">当前对象</el-radio>
+              <el-radio label="custom" value="custom">指定对象</el-radio>
+              <el-radio v-show="useProcessRight && ['applyEntity','checkEntity', 'batchCheck'].includes(selectOperate.handler)" label="process" value="process">流程对象</el-radio>
+            </el-radio-group>
+            <epx-object v-show="entityWay === 'custom'" :modelValue="selectOperate.metaId" @update:modelValue="v=>(selectOperate['metaId'] = v.id || v)" :fieldConfigs="{ state: 'ADD', attriLabel: '对象', codeKey: 'FM_ENTITY' }"></epx-object>
+          </template>
+          <!-- 接口 -->
+            <template v-else-if="item.type==='action'">
+            <div :style="{marginBottom: '10px'}">
+              <el-select :filterable="true" clearable v-model="selectOperate[item.key]" size="default" placeholder="">
+                <el-option
+                  v-for="option in operateActionList"
+                  :key="option.value"
+                  :label="`${option.label}`"
+                  :value="option.value"
+                >
+                </el-option>
+              </el-select>
+              <p :style="{fontSize: '12px', color: '#999', position: 'absolute', top: '30px', whiteSpace: 'nowrap'}">请求操作可用于控制操作权限：按钮是否显示</p>
+            </div>
+          </template>
+          <!-- 业务规则 -->
+          <el-select v-else-if="item.type==='rule'" clearable  v-model="selectOperate[item.key]" size="default" placeholder="">
+            <el-option
+              v-for="option in operateRuleList"
+              :key="option.value"
+              :label="`${option.label}`"
+              :value="option.value"
+            >
+            </el-option>
+          </el-select>
+          <!-- 页面 -->
+          <template v-else-if="item.type==='page'">
+            <el-radio-group v-model="pageWay">
+              <el-radio label="component" value="component">指定页面模板</el-radio>
+              <el-radio label="page" value="page">指定页面</el-radio>
+            </el-radio-group>
+            <epx-object v-show="pageWay==='component'" v-model="selectOperate.component" :fieldConfigs="{ state: 'ADD', attriLabel: '页面模板', codeKey: 'FM_PAGE', scopeParams: [{lb: '(', field: 'SYSTEM', values: SYSTEM, link: 'or' }, { field:'LEVEL',values: '01', 'rb': ')' }] }"></epx-object>
+            <epx-object v-show="pageWay==='page'" v-model="selectOperate.pageId" :fieldConfigs="{ state: 'ADD', attriLabel: '页面', codeKey: 'FM_PAGE_CONFIG', scopeParams: [{ field: 'SYSTEM', values: SYSTEM }], addBtn: true, addPageFlag: 'page_add', detailPageFlag: 'page_config' }"></epx-object>
+          </template>
+          <!-- 流程 -->
+          <div v-else-if="item.type==='process'" >
+            <epx-visual-config-object :value="selectOperate.processCode" label='' :scopeParams="[{field: 'ENTITY', values: entityWay === 'custom' ? selectOperate.metaId|| metaId: metaId }, {field: 'CATEGORY', values: '1'}]" dataKey="KEY" object="ACT_RE_MODEL" @change-configs="v=>changeProcess(item, v)"></epx-visual-config-object>
+            <div>
+              <el-radio-group v-model="selectOperate[item.key+'Type']">
+                <el-radio label="line" value="line">自定义连线</el-radio>
+                <el-radio label="default" value="default">默认操作</el-radio>
+              </el-radio-group>
+            </div>
+              <el-select clearable  v-if="selectOperate[item.key+'Type']==='default'"  v-model="selectOperate[item.key]" size="default" placeholder="">
+              <el-option label="同意" value="agree"></el-option>
+              <el-option label="驳回" value="disagree"></el-option>
+              <el-option label="保存" value="save"></el-option>
+              <el-option label="退回" value="return"></el-option>
+              <el-option label="撤销" value="repeal"></el-option>
+            </el-select>
+            <el-select v-else clearable v-model="selectOperate[item.key]" size="default" placeholder="">
+              <el-option
+                v-for="option in (item.processType==='check'?checkProcessNodeList:processNodeList)"
+                :key="option.id"
+                :label="option.name"
+                :value="option.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <!-- 高级查询 -->
+          <epx-visual-config-scope v-bind="item" v-else-if="item.type==='scope'"
+            :value="selectOperate[item.key]"
+            :treeFieldStore="treeFieldStore"
+            :componentMetaId="item.metaId || metaId"
+            :scopeConfigs="scopeConfigs"
+
+            @change-configs="v=>changeScopeParmas(item.key, v)"
+          />
+          <epx-rule
+            v-else-if="item.type==='el'"
+            formulaType='web'
+            :modelValue="elData(selectOperate[item.key])||item.defaultValue"
+            @change="v=>changeEl(item.key, v)"
+            :metaId="item.metaId || metaId"
+            :extendVariable="variableTree"
+            :fieldConfigs="{ state: 'EDIT', functionType: 'web' }"
+          />
+          <!-- 自定义JS事件 -->
+          <template v-else-if="item.type==='function'">
+            <el-select clearable :model-value="selectOperate[item.key] || 'new'" @clear="selectOperate[item.key] = null">
+              <el-option @click="selectOperate[item.key] = option" v-for="option in functionList" :key="option" :value="option">{{option}}</el-option>
+              <el-option @click="selectOperate[item.key] = 'new'" value="new" label="添加新事件">添加新事件</el-option>
+            </el-select>
+            <div class="handler-function">
+              <el-input  size="default"  v-if="!selectOperate[item.key] || selectOperate[item.key]==='new'" v-model="selectOperate[item.key + 'Name']"  ></el-input>
+              <el-button @click="editJS(item)">编辑JS代码</el-button>
+            </div>
+          </template>
+          <!-- 参数 -->
+          <div v-else-if="item.type === 'params'">
+            <p v-for="(value, key) in selectOperate[item.key]" class="operate-params-item" :key="key">
+              {{key}} = {{value}}
+              <i class="el-icon-edit" @click="editOperateParam(item.key, key, value)"></i>
+              <i class="el-icon-close" @click="deleteOperateParam(item.key, key)"></i>
+            </p>
+            <el-button type="primary" link @click="operateParamsDialog = `${item.key}`">添加参数</el-button>
+          </div>
+          <!-- 按钮 -->
+          <div v-else-if="item.type==='operate'">
+            <draggable
+              :list="selectOperate.operates"
+              class="list-group-operates"
+              ghost-class="ghost"
+            >
+              <transition-group type="transition" name="flip-list" >
+                <el-button size="default" v-for="operate in selectOperate.operates" :type="operate.ui" :key="operate.text">
+                  <i :class="['fa', operate.icon]"></i>
+                  {{operate.text}}
+                </el-button>
+              </transition-group>
+            </draggable>
+            <el-button type="primary" link :style="{ marginLeft: '12px' }" @click="$emit('set-dropdown')">设置</el-button>
+          </div>
+          <epx-visual-config-textarea
+            v-else-if="item.type==='textarea'"
+            :key="item.key"
+            :label="item.label"
+            :value="selectOperate[item.key]"
+            :defaultValue="item.defaultValue"
+            :i18nValue="selectOperate[item.key + '.i18n']"
+            @change-configs="v=>(selectOperate[item.key] = v)"
+            @change-language-config="v=>(selectOperate[item.key+'.i18n'] = v)"
+          >
+          </epx-visual-config-textarea>
+          <epx-visual-config-input
+            v-else
+            :label="item.label"
+            :value="selectOperate[item.key]"
+            :defaultValue="item.defaultValue"
+            :i18nValue="selectOperate[item.key + '.i18n']"
+            @change-configs="v=>(selectOperate[item.key] = v)"
+            @change-language-config="v=>(selectOperate[item.key+'.i18n'] = v)"
+          >
+          </epx-visual-config-input>
+          <el-tooltip class="operate-config-item__tip" :content="item.tip" placement="top" v-if="item.tip">
+            <i class="el-icon-warning-outline"></i>
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+    </el-tab-pane>
+    <el-tab-pane label="样式" name="style">
+      <epx-page-designer-setting-style :style="{width: '360px'}"  v-model="selectOperate.css" inline-style></epx-page-designer-setting-style>
+    </el-tab-pane>
+  </el-tabs>
+  <epx-visual-config-lazy-dialog
+      title="添加参数"
+      append-to-body
+      :model-value="!!operateParamsDialog"
+      width="400px"
+      @close="operateParamsDialog = false; operateParamsType= null"
+    >
+      <div>
+        <div class="add-params-input">
+          <span>参数名：</span>
+            <div v-if="selectOperate && selectOperate.handler==='print' && selectOperate.printWay!=='fine'">
+            <el-radio-group v-model="operateParams.key">
+                <el-radio v-for="param in printFormParams" :key="param.ID" :label="param.CODE" :value="param.CODE">{{param.NAME}}</el-radio>
+                <el-radio label="custom" value="custom">自定义</el-radio>
+              </el-radio-group>
+              <el-input v-if="operateParams.key==='custom'" :model-value="operateParams.customKey" @update:model-value="v => (operateParams['customKey'] = v)"> </el-input>
+            </div>
+            <el-input v-else :model-value="operateParams.customKey" @update:model-value="v => (operateParams['customKey'] = v)"> </el-input>
+        </div>
+        <div class="add-params-input">
+          <span>参数类型：</span>
+          <el-radio-group v-model="paramType">
+            <el-radio label="str" value="str">固定值</el-radio>
+            <el-radio label="field" value="field">字段值  </el-radio>
+            <el-radio label="page" value="page">页面参数</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="add-params-input" >
+          <span>参数值：</span>
+          <el-input v-if="paramType==='str'" :model-value="operateParams.value" @update:model-value="v => (operateParams['value'] = v)"></el-input>
+          <el-popover
+            v-else-if="paramType==='field'"
+            width="200"
+            trigger="click"
+          >
+            <template v-slot:reference><el-input :model-value="operateParams.value"></el-input></template>
+            <el-tree
+              :style="{maxHeight: '300px', overflow: 'auto'}"
+              :data="fieldStore"
+              :props="{
+                children: 'children',
+                label: 'text'
+              }"
+             >
+              <template v-slot="{node, data}"><span v-html="node.label" @click="operateParams.value=`#[${data.field.replace(/\./g, '|')}]`"></span></template>
+            </el-tree>
+          </el-popover>
+          <el-select v-else-if="paramType==='page'" v-model="operateParams.value">
+            <el-option
+              v-for="item in pageParams"
+              :key="item.code"
+              :label="item.name || item.code"
+              :value="`$[${item.code}]`">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="add-params__footer">
+          <el-button type="primary" @click="addOperateParams">确定</el-button>
+          <el-button @click="operateParamsDialog = false;">取消</el-button>
+        </div>
+      </div>
+    </epx-visual-config-lazy-dialog>
+</div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  props: {
+    designer: {
+      type: Object
+    },
+    useProcessRight: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    metaId: String,
+    operateTabs: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    scopeConfigs: Object,
+    treeFieldStore: Array,
+    defaultActionList: Array,
+    defaultRuleList: Array
+  },
+  data () {
+    return {
+      operateTab: 'base',
+      selectOperate: null,
+      pageWay: 'component',
+      operateType: [
+        {
+          label: '默认',
+          value: 'default'
+        },
+        {
+          label: '空心按钮',
+          value: 'plain'
+        },
+        {
+          label: '圆角按钮',
+          value: 'round'
+        },
+        {
+          label: '圆形按钮',
+          value: 'circle'
+        },
+        {
+          label: '文字按钮',
+          value: 'text'
+        }
+      ],
+      operateUi: [
+        { label: '默认', value: 'default', color: '#fff' },
+        { label: '主要', value: 'primary' },
+        { label: '成功', value: 'success', color: '#67c23a' },
+        { label: '警告', value: 'warning', color: '#e6a23c' },
+        { label: '危险', value: 'danger', color: '#f56c6c' },
+        { label: '文字', value: 'text' }
+      ],
+      processNodeList: [],
+      checkProcessNodeList: [],
+      actionList: [],
+      ruleList: [],
+      paramType: 'str',
+      operateParamsDialog: false,
+      operateParams: {
+        key: '',
+        value: ''
+      },
+      printFormParams: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    widgetConfig () {
+      return this.designer.widgetConfig[this.designer.selectedWidget.id] || {}
+    },
+    functionList () {
+      const { JS = '' } = this.designer?.pageConfig || {}
+      const result = JS.match(/export\sfunction\s(\w+)/g)
+      const functionList = []
+      if (!result) return []
+      result.forEach(item => {
+        functionList.push(item.replace(/export\sfunction\s/, ''))
+      })
+      return functionList
+    },
+    fieldStore () {
+      const id = this.selectOperate.metaId
+      return this.getMetaViewFields(id || this.metaId) || this.treeFieldStore
+    },
+    operateActionList () {
+      if (this.selectOperate.metaId && this.entityWay === 'custom' && this.actionList) return this.actionList
+      return this.defaultActionList
+    },
+    operateRuleList () {
+      if (this.selectOperate.metaId && this.entityWay === 'custom' && this.ruleList) return this.ruleList
+      return this.defaultRuleList
+    },
+    showOperateOptions () {
+      return (operateOptions = []) => {
+        const operate = this.selectOperate
+        const operates = operateOptions.filter(item => {
+          let flag = true
+          if (!item) return false
+          if (item.showFlag) {
+            for (const key in item.showFlag) {
+              const relyOption = operateOptions.find(option => option && option.key === key) || {}
+              const value = operate && !this.$_.isNil(operate[key]) ? operate[key] : relyOption.defaultValue || null
+              const condition = item.showFlag[key]
+              if (typeof condition === 'object') {
+                if (Array.isArray(value)) {
+                  flag = value.some(item => condition.includes(item))
+                  if (!flag) return false
+                } else {
+                  if (!condition.includes(value)) return false
+                }
+              } else if (condition !== value) {
+                return false
+              }
+            }
+          }
+          return flag
+        })
+        return operates
+      }
+    },
+    entityWay: {
+      get () {
+        const { metaMode, handler, metaId } = this.selectOperate
+        if (metaMode) {
+          return metaMode
+        } else {
+          if (this.useProcessRight && ['applyEntity', 'checkEntity', 'batchCheck'].includes(handler)) {
+            return 'process'
+          } else {
+            return metaId ? 'custom' : 'default'
+          }
+        }
+      },
+      set (v) {
+        this.selectOperate.metaMode = v
+      }
+    },
+    elData () {
+      return value => {
+        if (typeof value === 'object') {
+          return JSON.stringify(value)
+        } else {
+          return value
+        }
+      }
+    },
+    variableSets: {
+      get () {
+        return this.designer.pageConfig?.variableSets || []
+      }
+    },
+    variableTree () {
+      const { iterator } = this.widgetConfig
+      const variableList = this.variableSets.map(item => ({ ...item, type: 'variable', text: item.name || item.code, code: item.code }))
+      if (iterator?.data) {
+        variableList.push({
+          type: 'variable',
+          text: this.selectedWidget.title + '_迭代变量',
+          code: iterator.name || 'item'
+        })
+      }
+      variableList.push({
+        type: 'variable',
+        text: '页面状态',
+        code: 'pageType'
+      })
+      return [{
+        code: 'PAGE_VARIABLE',
+        text: '页面变量',
+        children: variableList
+      }]
+    }
+  },
+  watch: {
+    'selectOperate.metaId' (v) {
+      if (v) {
+        const metaId = v.id || v
+        if (metaId !== this.metaId) {
+          this.getActionList(metaId)
+          this.getRuleList(metaId)
+          this.getFieldStore(metaId)
+        }
+      }
+    },
+    'selectOperate.processCode' (v) {
+      this.getProcessNode(v)
+      this.getCheckProcessNode(v)
+    },
+    'selectOperate.printCode' (v) {
+      const { printWay, handler } = this.selectOperate
+      if (printWay !== 'fine' && handler === 'print' && v) {
+        this.getPrintParams()
+      }
+    },
+    selectOperate: {
+      async handler (v) {
+        const operate = { ...v }
+        if (this.entityWay !== 'custom') {
+          operate.metaId = null
+        }
+        if (this.pageWay === 'component') {
+          operate.pageId = null
+        }
+        for (const key in operate) {
+          if (operate[key] && (typeof operate[key] === 'object' && !Array.isArray(operate[key])) && key !== 'params' && key !== 'limitCondition' && key !== 'showCondition' && key !== 'showConditionEl' && key !== 'afterTriggerParams' && key !== 'downloadReportNameFields' && key !== 'operates' && !key.includes('i18n')) {
+            operate[key] = operate[key].id
+          }
+          if (operate[key] === null) delete operate[key]
+        }
+        if (operate.component) {
+          const code = await this.getComponentCode(operate.component)
+          if (code) operate.component = code
+        }
+        this.$emit('change', operate)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getActionList (id) {
+      this.$http.list({
+        action: 'getEntityAllApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: id
+      })
+        .then(data => {
+          this.actionList = data.entitys.map(item => ({ label: item.LABEL || item.NAME, value: item.NAME }))
+        })
+    },
+    getRuleList (id) {
+      this.$http.list({
+        entityId: 'ACT_RE_MODEL',
+        'scope.ENTITY': id,
+        'scope.CATEGORY': '2'
+      })
+        .then(data => {
+          this.ruleList = data.entitys.map(item => ({ label: item.NAME || item.KEY, value: item.KEY }))
+        })
+    },
+    getFieldStore (id) {
+      if (!id) return
+      if (!(this.fieldStore && this.fieldStore.length > 0)) {
+        this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: id
+        })
+      }
+    },
+    getPrintParams () {
+      const { printCode } = this.selectOperate
+      this.$http.list({
+        entityId: 'FM_FORM_PARAM',
+        'scope.FORM|CODE': printCode
+      })
+        .then(data => {
+          this.printFormParams = data.entitys
+        })
+    },
+    getProcessNode (processCode) {
+      if (!processCode) return
+      const operateMeta = this.selectOperate.metaId
+      this.$http.get({
+        action: 'getProcessStartFlow',
+        entityId: 'ACT_RE_MODEL',
+        processCode,
+        currentMetaId: operateMeta || this.currentMetaId
+      })
+        .then(data => {
+          this.processNodeList = data
+        })
+    },
+    getCheckProcessNode (processCode) {
+      if (!processCode) return
+      const operateMeta = this.selectOperate.metaId
+      this.$http.get({
+        action: 'getProcessFlow',
+        entityId: 'ACT_RE_MODEL',
+        processCode,
+        currentMetaId: operateMeta || this.metaId
+      })
+        .then(data => {
+          this.checkProcessNodeList = data.map(item => ({ ...item, name: item.sourceFlowName + '-' + item.name }))
+        })
+    },
+    getComponentId (code) {
+      return new Promise(resolve => {
+        this.$http.find({
+          entityId: 'FM_PAGE',
+          'scope.CODE': code
+        })
+          .then(data => {
+            if (data && data.data) {
+              resolve(data.data.ID)
+            }
+            resolve()
+          })
+      })
+    },
+    getComponentCode (id) {
+      return new Promise(resolve => {
+        this.$http.get({
+          entityId: 'FM_PAGE',
+          id
+        })
+          .then(data => {
+            if (data && data.data) {
+              resolve(data.data.CODE)
+            }
+            resolve()
+          })
+      })
+    },
+    changeSelect (item, v) {
+      this.selectOperate[item.key] = v
+      if (item.onChange) {
+        item.onChange(v)
+      }
+    },
+    changeProcess (item, v) {
+      this.selectOperate.processCode = v
+      if (!v) {
+        this.selectOperate[item.key] = null
+      }
+    },
+    changeScopeParmas (key, v, type) {
+      this.selectOperate[key] = v
+    },
+    changeEl (key, v, type) {
+      this.selectOperate[key] = v ? JSON.parse(v).el : null
+    },
+    addOperateParams () {
+      const operate = this.selectOperate
+      // 复制一份参数对象再修改，避免与其它按钮共享同一引用导致互相影响
+      const params = { ...(operate[this.operateParamsDialog] || {}) }
+      let key = this.operateParams.key.trim()
+      const value = this.operateParams.value.trim()
+      if (!key || key === 'custom') {
+        key = this.operateParams.customKey.trim()
+      }
+      if (!key) {
+        this.$message.error('请输入参数名')
+        return
+      }
+      if (!value) {
+        this.$message.error('请输入参数值')
+        return
+      }
+      if (this.operateParamKey) delete params[this.operateParamKey]
+      params[key] = value
+      this.selectOperate[this.operateParamsDialog] = params
+      this.operateParams = {
+        key: '',
+        customKey: '',
+        value: ''
+      }
+      this.operateParamsDialog = false
+      this.operateParamsType = null
+      this.operateParamKey = null
+    },
+    deleteOperateParam (itemKey, key) {
+      // 复制一份参数对象再删除，避免与其它按钮共享同一引用导致互相影响
+      const params = { ...(this.selectOperate[itemKey] || {}) }
+      delete params[key]
+      this.$set(this.selectOperate, itemKey, params)
+    },
+    editOperateParam (itemKey, key, value) {
+      this.operateParamsDialog = itemKey
+      this.operateParamKey = key
+      this.operateParams = {
+        key: 'custom',
+        customKey: key,
+        value
+      }
+    },
+    editJS (item, type) {
+      // 获取页面JS配置
+      // 创建新JS 添加到页面
+      // 弹出编辑窗口
+      const operate = { ...this.selectOperate }
+      const { JS = '' } = this.designer?.pageConfig || {}
+
+      if (!operate[item.key] || operate[item.key] === 'new') {
+        if (!operate[item.key + 'Name']) {
+          this.$message.error('请输入事件名')
+          return
+        }
+        if (this.functionList.includes(operate[item.key + 'Name'])) {
+          this.$message.error('该事件名称已存在')
+          return
+        }
+        const js = JS + `
+  /**
+   * Button ${operate[item.key + 'Name']}
+   */
+  export function ${operate[item.key + 'Name']} () {
+
+  }
+      `
+        this.designer.updatePageConfig({ JS: js })
+        this.selectOperate[item.key] = operate[item.key + 'Name']
+        this.selectOperate[item.key + 'Name'] = null
+      }
+      this.designer.openPanel('jsPanel')
+    }
+  },
+  async mounted () {
+    // 深拷贝一份再编辑，保证编辑当前按钮时不会原地修改外部传入对象（含 params 等嵌套对象）的引用
+    const selectOperate = this.$_.cloneDeep(this.value)
+    if (this.value.pageId) {
+      this.pageWay = 'page'
+    } else {
+      this.pageWay = 'component'
+    }
+    if (this.value.component) {
+      const id = await this.getComponentId(this.value.component)
+      if (id) selectOperate.component = id
+    }
+    this.selectOperate = selectOperate
+  }
+}
+</script>
+<style lang="scss" scoped>
+.operate-config__options {
+  width: 100%;
+  height: 100%;
+}
+.operate-tabs {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column  ;
+
+    :deep(.el-tabs__nav-scroll) {
+      padding:  0 20px;
+    }
+    :deep(.el-tab-pane) {
+      height: 100%;
+      overflow: auto;
+    }
+
+}
+.operate-color__list {
+  display: flex;
+}
+.operate-color__item {
+  margin: 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: 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;
+    }
+  }
+}
+.setting-field__config {
+  flex: 1;
+  overflow: auto;
+
+    :deep(.el-form-item) {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+    }
+    :deep(.el-form-item__content) {}
+    :deep(.el-input) {
+      width: 220px!important;
+      .el-input__inner {
+        width: 220px;
+      }
+    }
+    :deep(.el-form-item__label) {
+      width: 120px;
+      &::after {
+        content: ':';
+        margin-right: 4px;
+      }
+    }
+
+}
+.handler-function {
+  margin-top: 10px;
+
+    :deep(.el-input) {
+      margin-right: 10px;
+    }
+
+}
+.operate-params-item {
+  cursor: pointer;
+  i {
+    display: none;
+    margin-left: 8px;
+    font-size: var(--epx-font-size-l);
+    @include font_color_primary;
+    &:last-child {
+      color: #F56C6C;
+    }
+  }
+  &:hover {
+    i {
+      display: inline;
+
+    }
+  }
+}
+.add-params-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 0 10px;
+  >span {
+    white-space: nowrap;
+  }
+
+    :deep(.el-input) {
+      width: 240px;
+    }
+
+}
+.add-params__footer {
+  text-align: center;
+}
+.operate-item__ui-select {
+
+    :deep(.el-radio.is-bordered) {
+      height: auto;
+      padding: 8px;
+      margin-right: 12px;
+      overflow: hidden;
+    }
+    :deep(.el-radio__label) {
+      padding: 0;
+      .el-button  {
+        width: 60px;
+      }
+    }
+    :deep(.el-radio__input) {
+      position: absolute;
+      right: 0;
+      top: 0;
+      .el-radio__inner  {
+        background: none;
+        border:none;
+        &::after {
+          display: none;
+        }
+      }
+
+      &.is-checked .el-radio__inner {
+        &::before {
+          content: '';
+          display: inline-block;
+          width: 1em;
+          height: 1em;
+          background-color: currentColor;
+          -webkit-mask: var(--epx-i-epx-icon-kapianxuanzhong) no-repeat center / 100%;
+          mask: var(--epx-i-epx-icon-kapianxuanzhong) no-repeat center / 100%;
+          vertical-align: -0.125em;
+          font-size: var(--epx-font-size-l);
+          @include font_color_primary;
+        }
+      }
+    }
+
+}
+</style>