epx-frame 3.5.0-shpgy.1

package/src/frame/views/visual/config/Operate.vue

@@ -0,0 +1,1657 @@
+<template>
+  <div class="operates">
+    <el-radio-group v-model="operateWay">
+      <el-radio label="default">默认操作</el-radio>
+      <el-radio label="custom">自定义操作</el-radio>
+    </el-radio-group>
+    <div class="operate-group" v-show="operateWay==='custom'">
+      <draggable
+        :list="operates"
+        class="list-group-operates"
+        ghost-class="ghost"
+      >
+        <transition-group type="transition" name="flip-list" >
+          <el-button
+            v-for="operate in operates"
+            :key="operate.text"
+            size="medium"
+            v-bind="{[operate.type]: true}"
+            :type="operate.type=='text'?'text' :operate.ui"
+          >
+            <i :class="['fa', operate.icon]"></i>
+            {{operate.text}}
+          </el-button>
+        </transition-group>
+      </draggable>
+      <el-button type="text" :style="{ marginLeft: '12px' }" @click="openDialog">设置</el-button>
+   </div>
+    <div class="operate-group" v-show="operateWay==='default'">
+      <el-button size="medium" v-for="operate in defaultValue" :key="operate.text"  v-bind="{[operate.type]: true}"
+            :type="operate.type=='text'?'text' :operate.ui">{{operate.text}}</el-button>
+    </div>
+    <div class="operate-config">
+      <el-dialog
+        custom-class="setting-fields-dialog"
+        title="操作按钮配置"
+        :visible.sync="showDialog"
+        :append-to-body="true"
+        width="70%"
+      >
+        <div class="setting-fields-container">
+          <div class="setting-fields__select">
+            <draggable
+              :list="operates"
+              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 operates" :key="operate.text" @click="selectOperateFn(operate)">
+                  <el-button size="medium" :type="operate.ui"> <i :class="['fa', operate.icon]"></i>{{operate.text}}</el-button>
+                  <i class="el-icon-delete fr" @click.stop="deleteOperate(operate, index)"></i>
+                </li>
+              </transition-group>
+            </draggable>
+            <el-popover
+              trigger="click">
+              <ul>
+                <li v-for="operate in commonOperates" :key="operate.text" class="common-operate-item" @click="addOperate(operate)">{{operate.text}}</li>
+              </ul>
+              <el-button slot="reference" type="text" class="setting-fields__select--add" >+ 添加常用按钮</el-button>
+            </el-popover>
+            <el-button type="text" class="setting-fields__select--add" @click="addOperate(null)" >+ 添加自定义按钮</el-button>
+            <el-button type="text" class="setting-fields__select--add" @click="addFoldOperate(null)" >+ 添加折叠按钮</el-button>
+          </div>
+          <!-- 操作按钮配置项 -->
+          <div class="operate-config__options" v-if="selectOperate" :key="selectOperate.key">
+            <el-tabs class="operate-tabs" v-model="operateTab">
+              <el-tab-pane v-for="tab in (selectOperate.operateType!=='dropdown'?operateTabs: dropdownTabs)" :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'" :value="selectOperate[item.key]!=null ?  selectOperate[item.key]: item.defaultValue">
+                      <el-radio v-for="option in item.options" :key="option.value" :label="option.value" @click.native="$set(selectOperate, item.key, option.value)">
+                        {{option.label}}
+                      </el-radio>
+                    </el-radio-group>
+                    <!-- 下拉框 -->
+                    <el-select v-else-if="item.type==='select'" :allow-create="item.allowCreate" :filterable="item.allowCreate" :value="selectOperate[item.key]!=null?  selectOperate[item.key]: item.defaultValue" @change="v=>changeSelect(item, v)">
+                      <el-option
+                        v-for="option in item.options"
+                        :key="option.value"
+                        :label="`${option.label}`"
+                        :value="option.value"
+                        @click.native="$set(selectOperate, item.key, option.value)"
+                      >
+                      </el-option>
+                    </el-select>
+                    <!-- 对象 -->
+                    <epx-visual-config-object
+                      v-else-if="item.type==='object'"
+                      :value="selectOperate[item.key]"
+                      label=''
+                      :dataKey="item.dataKey"
+                      :object="item.entityId || item.object"
+                      @change-configs="v=>$set(selectOperate, item.key,v)"
+                    ></epx-visual-config-object>
+                    <!-- 颜色 -->
+                    <ul class="operate-color__list" v-else-if="item.type==='color'">
+                      <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 size="medium"
+                      v-else-if="item.type==='preview'"
+                      v-bind="{[selectOperate.type]: true}"
+                      :type="selectOperate.type=='text'?'text'
+                      :selectOperate.ui"
+                      :icon="selectOperate.icon && (selectOperate.icon.id || selectOperate.icon)"
+                    >
+                      <template v-if="selectOperate.type!=='circle'">{{selectOperate.text}}</template>
+                    </el-button>
+                    <!-- 业务对象 -->
+                    <template v-else-if="item.type==='entity'">
+                      <el-radio-group v-model="entityWay">
+                        <el-radio label="default">当前对象</el-radio>
+                        <el-radio label="custom">指定对象</el-radio>
+                      </el-radio-group>
+                      <epx-object v-show="entityWay === 'custom'" v-model="selectOperate.metaId" @change="changeObject" :fieldConfigs="{ state: 'ADD', attriLabel: '对象', codeKey: 'FM_ENTITY' }"></epx-object>
+                    </template>
+                    <!-- 接口 -->
+                    <div :style="{marginBottom: '10px'}" v-else-if="item.type==='action'" >
+                      <el-select :filterable="item.key==='handler'" v-model="selectOperate[item.key]" size="medium" placeholder="">
+                        <el-option
+                          v-for="option in (selectOperate.metaId? metaActionListMap[selectOperate.metaId.id]: actionList)"
+                          :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>
+                    <!-- 业务规则 -->
+                    <el-select v-else-if="item.type==='rule'" v-model="selectOperate[item.key]" size="medium" placeholder="">
+                      <el-option
+                        v-for="option in (selectOperate.metaId? metaRuleListMap[selectOperate.metaId.id] : ruleList)"
+                        :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">指定页面模板</el-radio>
+                        <el-radio label="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 }] }"></epx-object>
+                    </template>
+                    <!-- 流程 -->
+                    <div v-else-if="item.type==='process'" >
+                      <epx-visual-config-object :value="selectOperate.processCode" label='' dataKey="KEY" object="ACT_RE_MODEL" @change-configs="v=>$set(selectOperate, 'processCode',v)"></epx-visual-config-object>
+                      <div>
+                        <el-radio-group v-model="selectOperate[item.key+'Type']">
+                        <el-radio label="line">自定义连线</el-radio>
+                        <el-radio label="default">默认操作</el-radio>
+                      </el-radio-group>
+                      </div>
+                       <el-select v-if="selectOperate[item.key+'Type']==='default'"  v-model="selectOperate[item.key]" size="medium" 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 v-model="selectOperate[item.key]" size="medium" placeholder="">
+                        <el-option
+                          v-for="option in (item.processType==='check'?checkProcessNodeList[selectOperate.processCode] : processNodeList[selectOperate.processCode])"
+                          :key="option.id"
+                          :label="option.name"
+                          :value="option.id"
+                        >
+                        </el-option>
+                      </el-select>
+                    </div>
+                    <!-- 高级查询 -->
+                    <epx-visual-config-scope
+                      v-else-if="item.type==='scope'"
+                      :value="selectOperate.showCondition"
+                      :treeFieldStore="treeFieldStore"
+                      :componentMetaId="currentMetaId"
+                      :scopeConfigs="scopeConfigs"
+                      v-bind="item"
+                      @change-configs="changeScopeParmas"
+                    />
+                    <!-- 自定义JS事件 -->
+                    <template v-else-if="item.type==='function'">
+                      <el-select :value="selectOperate[item.key] || 'new'">
+                        <el-option @click.native="$set(selectOperate, item.key, option)" v-for="option in functionList" :key="option" :value="option">{{option}}</el-option>
+                        <el-option @click.native="$set(selectOperate, item.key, 'new')" value="new" label="添加新事件">添加新事件</el-option>
+                      </el-select>
+                      <div class="handler-function">
+                        <el-input  size="medium"  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="text" @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="medium" 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="text" :style="{ marginLeft: '12px' }" @click="openDropdownDialog">设置</el-button>
+                    </div>
+                    <epx-visual-config-input
+                      v-else
+                      :key="item.key"
+                      :label="item.label"
+                      :value="selectOperate[item.key]"
+                      :defaultValue="item.defaultValue"
+                      :i18nValue="selectOperate[item.key + '.i18n']"
+                      @change-configs="v=>$set(selectOperate, item.key, v)"
+                      @change-language-config="v=>$set(selectOperate, item.key+'.i18n', v)"
+                    >
+                    </epx-visual-config-input>
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
+            </el-tabs>
+            <div class="button-group">
+              <el-button type="primary" @click="saveOperateSetting">保存</el-button>
+              <el-button @click="showDialog=false">取消</el-button>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+      <el-dialog
+        v-if="selectOperate"
+        custom-class="setting-fields-dialog"
+        title="操作按钮配置"
+        :visible.sync="showDropdownDialog"
+        :append-to-body="true"
+        width="70%"
+      >
+        <div class="setting-fields-container">
+          <div class="setting-fields__select">
+            <draggable
+              :list="selectOperate.operates"
+              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 selectOperate.operates" :key="operate.text" @click="selectOperateFn(operate, 'dropdown')">
+                  <el-button size="medium" :type="operate.ui"> <i :class="['fa', operate.icon]"></i>{{operate.text}}</el-button>
+                  <i class="el-icon-delete fr" @click.stop="deleteDropdown(operate, index)"></i>
+                </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>
+              <el-button slot="reference" type="text" class="setting-fields__select--add" >+ 添加常用按钮</el-button>
+            </el-popover>
+            <el-button type="text" class="setting-fields__select--add" @click="addDropdownOperate(null)" >+ 添加自定义按钮</el-button>
+          </div>
+          <!-- 操作按钮配置项 -->
+          <div class="operate-config__options" v-if="selectDropdownOperate" :key="selectDropdownOperate.key">
+            <el-tabs class="operate-tabs" v-model="dropdownOperateTab">
+              <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, selectDropdownOperate)" :key="item.key" :label="item.label">
+                    <!-- 单选框 -->
+                    <el-radio-group v-if="item.type==='radio'" :value="selectDropdownOperate[item.key]!=null ?  selectDropdownOperate[item.key]: item.defaultValue">
+                      <el-radio v-for="option in item.options" :key="option.value" :label="option.value" @click.native="$set(selectDropdownOperate, item.key, option.value)">
+                        {{option.label}}
+                      </el-radio>
+                    </el-radio-group>
+                    <!-- 下拉框 -->
+                    <el-select v-else-if="item.type==='select'" :value="selectDropdownOperate[item.key]!=null?  selectDropdownOperate[item.key]: item.defaultValue">
+                      <el-option
+                        v-for="option in item.options"
+                        :key="option.value"
+                        :label="`${option.label}`"
+                        :value="option.value"
+                        @click.native="$set(selectDropdownOperate, item.key, option.value)"
+                      >
+                      </el-option>
+                    </el-select>
+                    <!-- 对象 -->
+                    <epx-visual-config-object
+                      v-else-if="item.type==='object'"
+                      :value="selectDropdownOperate[item.key]"
+                      label=''
+                      :dataKey="item.dataKey"
+                      :object="item.entityId || item.object"
+                      @change-configs="v=>$set(selectDropdownOperate, item.key,v)"
+                    ></epx-visual-config-object>
+                    <!-- 颜色 -->
+                    <ul class="operate-color__list" v-else-if="item.type==='color'">
+                      <li v-for="option in operateUi" :key="option.value"
+                        :class="['operate-color__item']"
+                        @click="$set(selectDropdownOperate, 'ui', option.value)">
+                        <div :class="['operate-color', option.value, {active: option.value===(selectDropdownOperate.ui || 'default')}]" >
+                          <i class="el-icon-check check-icon"></i>
+                        </div>
+                        <p class="operate-color__text">{{option.label}}</p>
+                      </li>
+                    </ul>
+                    <!-- 预览 -->
+                    <el-button size="medium"
+                      v-else-if="item.type==='preview'"
+                      v-bind="{[selectDropdownOperate.type]: true}"
+                      :type="selectDropdownOperate.type=='text'?'text'
+                      :selectDropdownOperate.ui"
+                      :icon="selectDropdownOperate.icon && (selectDropdownOperate.icon.id || selectDropdownOperate.icon)"
+                    >
+                      <template v-if="selectDropdownOperate.type!=='circle'">{{selectDropdownOperate.text}}</template>
+                    </el-button>
+                    <!-- 业务对象 -->
+                    <template v-else-if="item.type==='entity'">
+                      <el-radio-group v-model="entityWay">
+                        <el-radio label="default">当前对象</el-radio>
+                        <el-radio label="custom">指定对象</el-radio>
+                      </el-radio-group>
+                      <epx-object v-show="entityWay === 'custom'" v-model="selectDropdownOperate.metaId" @change="changeObject" :fieldConfigs="{ state: 'ADD', attriLabel: '对象', codeKey: 'FM_ENTITY' }"></epx-object>
+                    </template>
+                    <!-- 接口 -->
+                    <div :style="{marginBottom: '10px'}" v-else-if="item.type==='action'" >
+                      <el-select :filterable="item.key==='handler'" v-model="selectDropdownOperate[item.key]" size="medium" placeholder="">
+                        <el-option
+                          v-for="option in (selectDropdownOperate.metaId? metaActionListMap[selectDropdownOperate.metaId.id]: actionList)"
+                          :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>
+                    <!-- 业务规则 -->
+                    <el-select v-else-if="item.type==='rule'" v-model="selectDropdownOperate[item.key]" size="medium" placeholder="">
+                      <el-option
+                        v-for="option in (selectDropdownOperate.metaId? metaRuleListMap[selectDropdownOperate.metaId.id] : ruleList)"
+                        :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">指定页面模板</el-radio>
+                        <el-radio label="page">指定页面</el-radio>
+                      </el-radio-group>
+                      <epx-object v-show="pageWay==='component'" v-model="selectDropdownOperate.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="selectDropdownOperate.pageId" :fieldConfigs="{ state: 'ADD', attriLabel: '页面', codeKey: 'FM_PAGE_CONFIG', scopeParams: [{ field: 'SYSTEM', values: SYSTEM }] }"></epx-object>
+                    </template>
+                    <!-- 流程 -->
+                    <div v-else-if="item.type==='process'" >
+                      <epx-visual-config-object :value="selectDropdownOperate.processCode" label='' dataKey="KEY" object="ACT_RE_MODEL" @change-configs="v=>$set(selectDropdownOperate, 'processCode',v)"></epx-visual-config-object>
+                      <el-select v-model="selectDropdownOperate[item.key]" size="medium" placeholder="">
+                        <el-option
+                          v-for="option in (item.processType==='check'?checkProcessNodeList[selprocessNodeListectDropdownOperate.processCode] : [selectDropdownOperate.processCode])"
+                          :key="option.id"
+                          :label="option.name"
+                          :value="option.id"
+                        >
+                        </el-option>
+                      </el-select>
+                    </div>
+                    <!-- 高级查询 -->
+                    <epx-visual-config-scope
+                      v-else-if="item.type==='scope'"
+                      :value="selectDropdownOperate.showCondition"
+                      :treeFieldStore="treeFieldStore"
+                      :componentMetaId="currentMetaId"
+                      :scopeConfigs="scopeConfigs"
+                      v-bind="item"
+                      @change-configs="v=>changeScopeParmas(v, 'dropdown')"
+                    />
+                    <!-- 自定义JS事件 -->
+                    <template v-else-if="item.type==='function'">
+                      <el-select :value="selectDropdownOperate[item.key] || 'new'">
+                        <el-option @click.native="$set(selectDropdownOperate, item.key, option)" v-for="option in functionList" :key="option" :value="option">{{option}}</el-option>
+                        <el-option @click.native="$set(selectDropdownOperate, item.key, 'new')" value="new" label="添加新事件">添加新事件</el-option>
+                      </el-select>
+                      <div class="handler-function">
+                        <el-input  size="medium"  v-if="!selectDropdownOperate[item.key] || selectDropdownOperate[item.key]==='new'" v-model="selectDropdownOperate[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 selectDropdownOperate[item.key]" class="operate-params-item" :key="key">
+                        {{key}} = {{value}}
+                        <i class="el-icon-edit" @click="editDropdownOperateParam(item.key, key, value)"></i>
+                        <i class="el-icon-close" @click="deleteDropdownOperateParam(item.key, key)"></i>
+                      </p>
+                      <el-button type="text" @click="operateParamsDialog = `${item.key}`; operateParamsType='dropdown'">添加参数</el-button>
+                    </div>
+                    <epx-visual-config-input
+                      v-else
+                      :key="item.key"
+                      :label="item.label"
+                      :value="selectDropdownOperate[item.key]"
+                      :defaultValue="item.defaultValue"
+                      :i18nValue="selectDropdownOperate[item.key + '.i18n']"
+                      @change-configs="v=>$set(selectDropdownOperate, item.key, v)"
+                      @change-language-config="v=>$set(selectDropdownOperate, item.key+'.i18n', v)"
+                    >
+                    </epx-visual-config-input>
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
+            </el-tabs>
+            <div class="button-group">
+              <el-button type="primary" @click="saveDropdownOperate">保存</el-button>
+              <el-button @click="showDropdownDialog=false">取消</el-button>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <el-dialog
+      title="添加参数"
+      :visible="!!operateParamsDialog"
+      width="400px"
+      @close="operateParamsDialog = false; operateParamsType= null"
+    >
+      <div>
+        <div class="add-params-input">
+          <span>参数名：</span>
+          <template v-if="operateParamsType==='dropdown'">
+            <div v-if="selectDropdownOperate && selectDropdownOperate.handler==='print' && selectDropdownOperate.printWay!=='fine'">
+            <el-radio-group v-model="operateParams.key">
+                <el-radio v-for="param in printFormParams" :key="param.ID" :label="param.CODE">{{param.NAME}}</el-radio>
+                <el-radio label="custom">自定义</el-radio>
+              </el-radio-group>
+              <el-input v-if="operateParams.key==='custom'" :value="operateParams.customKey" @input="v => $set(operateParams, 'customKey', v)"> </el-input>
+            </div>
+            <el-input v-else :value="operateParams.customKey" @input="v => $set(operateParams, 'customKey', v)"> </el-input>
+          </template>
+          <template v-else>
+            <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">{{param.NAME}}</el-radio>
+                <el-radio label="custom">自定义</el-radio>
+              </el-radio-group>
+              <el-input v-if="operateParams.key==='custom'" :value="operateParams.customKey" @input="v => $set(operateParams, 'customKey', v)"> </el-input>
+            </div>
+            <el-input v-else :value="operateParams.customKey" @input="v => $set(operateParams, 'customKey', v)"> </el-input>
+          </template>
+        </div>
+        <div class="add-params-input">
+          <span>参数类型：</span>
+          <el-radio-group v-model="paramType">
+            <el-radio label="str">固定值</el-radio>
+            <el-radio label="field">字段值  </el-radio>
+            <el-radio label="page">页面参数</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="add-params-input" >
+          <span>参数值：</span>
+          <el-input v-if="paramType==='str'" :value="operateParams.value" @input="v => $set(operateParams, 'value', v)"></el-input>
+          <el-popover
+            v-else-if="paramType==='field'"
+            width="200"
+            trigger="click"
+          >
+            <el-input slot="reference" :value="operateParams.value"></el-input>
+            <el-tree
+              :style="{maxHeight: '300px', overflow: 'auto'}"
+              :data="treeFieldStore"
+              :props="{
+                children: 'children',
+                label: 'text'
+              }"
+             >
+              <span slot-scope="{node, data}" v-html="node.label" @click="operateParams.value=`#[${data.code.replace(/\./g, '|')}]`"></span>
+            </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"
+              :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;operateParamsType=null;">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <el-drawer
+      size="50%"
+      :visible.sync="showJsDrawer"
+      direction="rtl"
+      :withHeader="false"
+    >
+      <epx-js-panel :value="pageGlobalConfigs.JS" @change="changeJS"></epx-js-panel>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'epx-visual-config-operate',
+  components: {
+    draggable
+  },
+  props: {
+    value: Array,
+    defaultValue: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    currentMetaId: 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,
+      default () {
+        return []
+      }
+    },
+    operateOptions: {
+      type: [Object, Array],
+      default () {
+        return {}
+      }
+    },
+    pageGlobalConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    pageParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    changeItemConfigs: {
+      type: Function,
+      default () {
+        return () => null
+      }
+    }
+  },
+  data () {
+    return {
+      operateTabs: [],
+      operates: [],
+      operateWay: 'default',
+      entityWay: 'default',
+      pageWay: 'component',
+      showDialog: false,
+      selectOperate: null,
+      operateParamsDialog: false,
+      operateParams: {
+        key: '',
+        value: ''
+      },
+      functionList: [],
+      operateIcon: {},
+      object: {},
+      paramType: 'str',
+      processNodeList: {},
+      checkProcessNodeList: {},
+      metaActionListMap: {},
+      metaRuleListMap: {},
+      showScopeDialog: false,
+      showJsDrawer: false,
+      jsCode: '',
+      operateTab: 'base',
+      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' }
+      ],
+      printFormParams: [],
+      dropdownTabs: [],
+      dropdownOperateTab: 'base',
+      showDropdownDialog: false,
+      selectDropdownOperate: null,
+      operateParamsType: null
+    }
+  },
+  computed: {
+    showOperateOptions () {
+      return (operateOptions = [], operate = this.selectOperate) => {
+        const operates = operateOptions.filter(item => {
+          let flag = true
+          if (item.showFlag) {
+            for (const key in item.showFlag) {
+              const relyOption = operateOptions.find(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 (!condition.includes(value)) flag = false
+              } else if (condition !== value) {
+                flag = false
+              }
+            }
+          }
+          return flag
+        })
+        return operates
+      }
+    },
+    getPageWay () {
+      return event => {
+
+      }
+    }
+  },
+  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 {
+        this.$emit('change-configs', null)
+      }
+    },
+    operateWay (v) {
+      if (v === 'custom') {
+        if (this.operates !== this.value) {
+          this.$emit('change-configs', this.operates)
+        }
+      } else {
+        this.$emit('change-configs', null)
+      }
+    },
+    selectOperate: {
+      handler (v) {
+        if (v) {
+          if (!this.processNodeList[v.processCode]) {
+            this.getProcessNode(v.processCode)
+          }
+          if (!this.checkProcessNodeList[v.processCode]) {
+            this.getCheckProcessNode(v.processCode)
+          }
+        }
+      },
+      deep: true
+    },
+    'selectOperate.printCode' (v) {
+      const { printWay, handler } = this.selectOperate
+      if (printWay !== 'fine' && handler === 'print' && v) {
+        this.getPrintParams()
+      }
+    },
+    pageGlobalConfigs (v) {
+      this.getFunctionList()
+    }
+  },
+  methods: {
+    getOperateOptions () {
+      const defaultOperateOptions = {
+        text: { key: 'text', label: '按钮名称' },
+        ui: {
+          key: 'ui',
+          label: '按钮样式',
+          type: 'color',
+          options: [
+            { label: '主要按钮', value: 'primary' },
+            { label: '成功按钮', value: 'success' },
+            { label: '信息按钮', value: 'info' },
+            { label: '警告按钮', value: 'warning' },
+            { label: '危险按钮', value: 'danger' },
+            { label: '文本按钮', value: 'text' },
+            { label: '默认按钮', value: 'default' }
+          ],
+          defaultValue: 'default'
+        },
+        type: {
+          key: 'type',
+          label: '按钮类型',
+          type: 'radio',
+          options: [
+            {
+              label: '默认',
+              value: 'default'
+            },
+            {
+              label: '空心按钮',
+              value: 'plain'
+            },
+            {
+              label: '圆角按钮',
+              value: 'round'
+            },
+            {
+              label: '圆形按钮',
+              value: 'circle'
+            },
+            {
+              label: '文字按钮',
+              value: 'text'
+            }
+          ],
+          defaultValue: 'default'
+        },
+        icon: { key: 'icon', label: '按钮图标', type: 'object', object: 'FM_FONT_ICON' },
+        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'] }
+        },
+        menuId: {
+          key: 'menuId',
+          label: '打开菜单',
+          type: 'object',
+          object: 'FM_MODULE',
+          flag: 'config_menu',
+          objectWay: 'option',
+          isTree: '1',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity'] }
+        },
+        openMode: {
+          key: 'openMode',
+          label: '页面打开方式',
+          type: 'radio',
+          options: [{ label: '直接打开', value: '3' }, { label: '标签页', value: '1' }, { label: '弹窗', value: '2' }],
+          defaultValue: '3',
+          showFlag: { handler: ['goPage', 'addEntity', 'editEntity'] }
+        },
+        pageType: {
+          key: 'pageType',
+          label: '页面状态',
+          type: 'radio',
+          options: [{ label: '新增', value: 'ADD' }, { label: '编辑', value: 'EDIT' }, { label: '详情', value: 'DETAIL' }],
+          defaultValue: 'ADD',
+          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', printWay: 'custom' }
+        },
+        printPage: {
+          key: 'printPage',
+          label: '打印页面模板',
+          type: 'object',
+          object: 'FM_PAGE',
+          dataKey: 'CODE',
+          defaultValue: 'excel-preview',
+          showFlag: { handler: 'print', printWay: 'custom' }
+        },
+        cptName: {
+          key: 'cptName',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_REPORT_TEMPLATE',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'fine' }
+        },
+        showDownload: {
+          key: 'showDownload',
+          label: '显示下载按钮',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['print'] }
+        },
+        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'] }
+        },
+        checkOpinion: {
+          key: 'checkOpinion',
+          label: '审核意见',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        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',
+          defaultValue: 'backPage',
+          options: [
+            { label: '返回', value: 'backPage' },
+            { label: '打开指定页面', value: 'goPage' },
+            { label: '刷新页面', value: 'reloadPage' },
+            { label: '刷新组件', value: '$refesh' }
+          ],
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity'] }
+        },
+        afterTriggerPage: {
+          key: 'afterTriggerPage',
+          label: '打开页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          scopeParams: [{ field: 'SYSTEM', values: this.SYSTEM }],
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity'], afterTrigger: 'goPage' }
+        },
+        afterTriggerParams: {
+          key: 'afterTriggerParams',
+          label: '页面参数传递',
+          type: 'params',
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity'], afterTrigger: 'goPage' }
+        },
+        num: { key: 'num', label: '选中记录', type: 'radio', options: [{ label: '不需要', value: '0' }, { label: '选择1个', value: '1' }, { label: '选择多个', value: 'n' }], defaultValue: '0' },
+        limitCondition: { key: 'showCondition', label: '操作限制条件', type: 'scope', showOperate: false, modeType: ['FIXED_VALUE', 'DYNAMIC_VALUE', 'DEFINED'] },
+        limitTip: { key: 'limitTip', label: '操作限制提示', defaultValue: '对不起，不能执行该操作！' },
+        showCondition: { key: 'showCondition', label: '显示条件', type: 'scope', showOperate: false, modeType: ['FIXED_VALUE', 'DYNAMIC_VALUE', 'DEFINED'] },
+        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: '确定', 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 }], defaultValue: false },
+        params: { key: 'params', label: '参数传递', type: 'params' }
+      }
+      const operateOptions = { ...defaultOperateOptions, ...this.operateOptions }
+      this.operateTabs = this.operateConfigs.map(item => {
+        return {
+          ...item,
+          options: item.options.map(option => operateOptions[option])
+        }
+      })
+      const dropdownOptions = ['text', 'ui', 'type', 'icon', 'preview'].map(option => operateOptions[option])
+      this.dropdownTabs = [
+        {
+          key: 'base',
+          title: '基本',
+          options: [...dropdownOptions, { key: 'operates', label: '按钮', type: 'operate' }]
+        }
+      ]
+    },
+    getFunctionList () {
+      const { JS = '' } = this.pageGlobalConfigs
+      const result = JS.match(/export\sfunction\s(\w+)/g)
+      const functionList = []
+      if (!result) return
+      result.forEach(item => {
+        functionList.push(item.replace(/export\sfunction\s/, ''))
+      })
+      this.functionList = functionList
+    },
+    getPrintParams () {
+      const { printCode } = this.selectOperate
+      this.$http.list({
+        entityId: 'FM_FORM_PARAM',
+        'scope.FORM|CODE': printCode
+      })
+        .then(data => {
+          this.printFormParams = data.entitys
+        })
+    },
+    openDialog () {
+      this.showDialog = true
+      this.selectOperate = null
+    },
+    openDropdownDialog () {
+      this.showDropdownDialog = true
+      this.selectDropdown = null
+    },
+    changeSelect (item, v) {
+      this.$set(this.selectOperate, item.key, v)
+    },
+    addOperate (operate) {
+      const item = operate || { text: '自定义按钮' }
+      this.operates.push(item)
+      this.selectOperateFn(item, this.operates.length - 1)
+    },
+    addFoldOperate (operate) {
+      const item = operate || { text: '折叠按钮', operateType: 'dropdown' }
+      this.operates.push(item)
+      this.selectOperateFn(item, this.operates.length - 1)
+    },
+    addDropdownOperate (operate) {
+      const item = operate || { text: '自定义按钮' }
+      if (this.selectOperate) {
+        const { operates = [] } = this.selectOperate
+        operates.push(item)
+        this.$set(this.selectOperate, 'operates', operates)
+        this.selectOperateFn(item, 'dropdown')
+      }
+    },
+    deleteOperate (operate, index) {
+      if (this.selectOperate && operate.key === this.selectOperate.key) this.selectOperate = null
+      this.operates.splice(index, 1)
+    },
+    deleteDropdown (operate, index) {
+      if (this.selectDropdownOperate && operate.key === this.selectDropdownOperate.key) this.selectDropdownOperate = null
+      this.selectOperate.operates.splice(index, 1)
+    },
+    async selectOperateFn (operate = {}, type) {
+      operate.key = new Date().getTime()
+      const selectOperate = { ...operate }
+      if (selectOperate.metaId) {
+        this.entityWay = 'custom'
+      } else {
+        this.entityWay = 'default'
+      }
+      if (selectOperate.pageId) {
+        this.pageWay = 'page'
+      } else {
+        this.pageWay = 'component'
+      }
+      // 如果是对象，获取对应的标签名
+      if (selectOperate.component) {
+        const id = await this.getComponentId(selectOperate.component)
+        if (id) selectOperate.component = id
+      }
+      // for (const key in selectOperate) {
+      //   const option = this.operateOptions[key] || {}
+      //   if (option.type === 'object' && selectOperate[key]) {
+      //     const data = await this.getLabel(option.entity || option.object, selectOperate[key])
+      //     selectOperate[key] = { id: selectOperate[key], name: data.label }
+      //   }
+      // }
+      if (selectOperate.processCode && !this.processNodeList[selectOperate.processCode]) {
+        // 请求节点
+        this.getProcessNode(selectOperate.processType, selectOperate.processCode)
+      }
+      if (type === 'dropdown') {
+        this.selectDropdownOperate = selectOperate
+        this.dropdownOperateTab = 'base'
+      } else {
+        this.selectOperate = selectOperate
+        this.operateTab = 'base'
+      }
+    },
+    getProcessNode (processCode) {
+      if (!processCode) return
+      let operateMeta = this.selectOperate.metaId
+      if (this.selectOperate.metaId && typeof this.selectOperate.metaId === 'object') {
+        operateMeta = this.selectOperate.metaId.id
+      }
+      this.$http.get({
+        action: 'getProcessStartFlow',
+        entityId: 'ACT_RE_MODEL',
+        processCode,
+        currentMetaId: operateMeta || this.currentMetaId
+      })
+        .then(data => {
+          this.$set(this.processNodeList, processCode, data)
+        })
+    },
+    getCheckProcessNode (processCode) {
+      if (!processCode) return
+      let operateMeta = this.selectOperate.metaId
+      if (this.selectOperate.metaId && typeof this.selectOperate.metaId === 'object') {
+        operateMeta = this.selectOperate.metaId.id
+      }
+      this.$http.get({
+        action: 'getProcessFlow',
+        entityId: 'ACT_RE_MODEL',
+        processCode,
+        currentMetaId: operateMeta || this.currentMetaId
+      })
+        .then(data => {
+          this.$set(this.checkProcessNodeList, processCode, data.map(item => ({ ...item, name: item.sourceFlowName + '-' + item.name })))
+        })
+    },
+    getLabel (entityId, key) {
+      return new Promise(resolve => {
+        this.$http.getLabel(entityId, key)
+          .then(data => {
+            resolve(data)
+          })
+          .catch(() => {
+            resolve({ label: key })
+          })
+      })
+    },
+    getComponentCode (id) {
+      return new Promise(resolve => {
+        this.$http.get({
+          entityId: 'FM_PAGE',
+          id
+        })
+          .then(data => {
+            if (data && data.data) {
+              resolve(data.data.CODE)
+            }
+            resolve()
+          })
+      })
+    },
+    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()
+          })
+      })
+    },
+    changeObject (v) {
+      if (v.id !== this.currentMetaId) {
+        this.getActionList(v.id)
+        this.getRuleList(v.id)
+      }
+    },
+    changeScopeParmas (v, type) {
+      if (type === 'dropdown') {
+        this.$set(this.selectDropdownOperate, 'showCondition', v)
+      } else {
+        this.$set(this.selectOperate, 'showCondition', v)
+      }
+    },
+    getActionList (id) {
+      if (this.metaActionListMap[id]) return
+      this.$http.list({
+        action: 'getEntityAllApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: id
+      })
+        .then(data => {
+          this.$set(this.metaActionListMap, id, data.entitys.map(item => ({ label: item.LABEL || item.NAME, value: item.NAME })))
+        })
+    },
+    getRuleList (id) {
+      if (this.metaRuleListMap[id]) return
+      this.$http.list({
+        entityId: 'ACT_RE_MODEL',
+        'scope.ENTITY': id,
+        'scope.CATEGORY': '2'
+      })
+        .then(data => {
+          this.$set(this.metaRuleListMap, id, data.entitys.map(item => ({ label: item.NAME || item.KEY, value: item.KEY })))
+        })
+    },
+    async saveOperateSetting () {
+      const operates = this.operates
+      const selectOperate = { ...this.selectOperate }
+      const index = operates.findIndex(item => item.key === selectOperate.key)
+      if (index !== -1) {
+        if (this.entityWay !== 'custom') {
+          selectOperate.metaId = null
+        }
+        if (this.pageWay === 'component') {
+          selectOperate.pageId = null
+        }
+        selectOperate.key = null
+        const operate = { ...operates[index], ...selectOperate }
+        for (const key in operate) {
+          // ['metaId', 'pageId', 'component'].includes(key) &&
+          if (operate[key] && typeof operate[key] === 'object' && key !== 'params' && key !== 'showCondition' && key !== 'afterTriggerParams' && key !== 'operates' && !key.includes('i18n')) {
+            operate[key] = operate[key].id
+          }
+          if (operate[key] === null) delete operate[key]
+        }
+        // 如果operate.component
+        if (operate.component) {
+          const code = await this.getComponentCode(operate.component)
+          if (code) operate.component = code
+        }
+        this.operates.splice(index, 1, operate)
+        this.$message.success('保存成功')
+        this.showDialog = false
+      }
+    },
+    async saveDropdownOperate () {
+      const selectOperate = { ...this.selectDropdownOperate }
+      const index = this.selectOperate.operates.findIndex(item => item.key === selectOperate.key)
+      if (index !== -1) {
+        if (this.entityWay !== 'custom') {
+          selectOperate.metaId = null
+        }
+        if (this.pageWay === 'component') {
+          selectOperate.pageId = null
+        }
+        selectOperate.key = null
+        const operate = { ...this.selectOperate.operates[index], ...selectOperate }
+        for (const key in operate) {
+          // ['metaId', 'pageId', 'component'].includes(key) &&
+          if (operate[key] && typeof operate[key] === 'object' && key !== 'params' && key !== 'showCondition' && key !== 'afterTriggerParams' && !key.includes('i18n')) {
+            operate[key] = operate[key].id
+          }
+          if (operate[key] === null) delete operate[key]
+        }
+        // 如果operate.component
+        if (operate.component) {
+          const code = await this.getComponentCode(operate.component)
+          if (code) operate.component = code
+        }
+
+        this.selectOperate.operates.splice(index, 1, operate)
+        this.showDropdownDialog = false
+        this.selectDropdownOperate = null
+      }
+    },
+    addOperateParams () {
+      const operate = this.operateParamsType === 'dropdown' ? this.selectDropdownOperate : this.selectOperate
+      const { [this.operateParamsDialog]: params = {} } = operate
+      let key = this.operateParams.key
+      if (!key || key === 'custom') {
+        key = this.operateParams.customKey
+      }
+      if (!key) {
+        this.$message.error('请输入参数名')
+        return
+      }
+      if (!this.operateParams.value) {
+        this.$message.error('请输入参数值')
+        return
+      }
+      params[key] = this.operateParams.value
+      this.$set(this.operateParamsType === 'dropdown' ? this.selectDropdownOperate : this.selectOperate, this.operateParamsDialog, params)
+      this.operateParams = {
+        key: '',
+        customKey: '',
+        value: ''
+      }
+      this.operateParamsDialog = false
+      this.operateParamsType = null
+      // if (this.operateParamsType !== 'dropdown') this.showDropdownDialog = false
+    },
+    deleteOperateParam (itemKey, key) {
+      const selectOperate = { ...this.selectOperate }
+      const { [itemKey]: params = {} } = selectOperate
+      delete params[key]
+      this.selectOperate = selectOperate
+    },
+    editOperateParam (itemKey, key, value) {
+      this.operateParamsDialog = itemKey
+      this.operateParams = {
+        key: 'custom',
+        customKey: key,
+        value
+      }
+    },
+    editDropdownOperateParam (itemKey, key, value) {
+      this.operateParamsDialog = itemKey
+      this.operateParamsType = 'dropdown'
+      this.operateParams = {
+        key: 'custom',
+        customKey: key,
+        value
+      }
+    },
+    deleteDropdownOperateParam (itemKey, key) {
+      const selectOperate = { ...this.selectDropdownOperate }
+      const { [itemKey]: params = {} } = selectOperate
+      delete params[key]
+      this.selectDropdownOperate = selectOperate
+    },
+    editJS (item) {
+      // 获取页面JS配置
+      // 创建新JS 添加到页面
+      // 弹出编辑窗口
+      const operate = { ...this.selectOperate }
+      const { JS = '' } = this.pageGlobalConfigs
+
+      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.changeItemConfigs('page', { JS: js })
+        this.$set(this.selectOperate, item.key, operate[item.key + 'Name'])
+        this.$set(this.selectOperate, item.key + 'Name', null)
+      }
+
+      this.showJsDrawer = true
+      // epx-js-panel
+    },
+    changeJS (JS) {
+      this.changeItemConfigs('page', { JS })
+    }
+  },
+  created () {
+    // 如果按钮有值，默认为自定义设置
+
+    this.getOperateOptions()
+    this.getFunctionList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.operate-config {
+   &::v-deep {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+}
+.operate-config__options {
+  width: 100%;
+  height: 100%;
+}
+
+.list-group-operates {
+  display: inline;
+  &::v-deep {
+    .el-button {
+      margin-bottom: 10px;
+    }
+  }
+}
+.common-operate-item {
+  cursor: pointer;
+  line-height: 32px;
+  &:hover {
+    @include font_color_primary()
+  }
+}
+.operate-params-item {
+  cursor: pointer;
+  i {
+    display: none;
+    margin-left: 8px;
+    font-size: 16px;
+    @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;
+  }
+  &::v-deep {
+    .el-input {
+      width: 240px;
+    }
+  }
+}
+.add-params__footer {
+  text-align: center;
+}
+.setting-fields-container {
+  display: flex;
+  height: 70vh;
+}
+.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: 14px;
+  }
+  .el-icon-document {
+    @include font-color-primary();
+    margin-right: 8px;
+  }
+  .el-icon-delete {
+    display: none;
+    color: red;
+  }
+  &:hover, &.active {
+    .el-icon-delete {
+      display: inline;
+    }
+    @include font-color-primary();
+    @include bg-color-primary(.2)
+  }
+}
+.setting-fields__select--add {
+  &::v-deep{
+    &.el-button {
+         margin-left: 24px;
+    }
+  }
+}
+.setting-field__config {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+  &::v-deep {
+    .el-form-item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+    }
+    .el-input {
+      width: 220px;
+      .el-input__inner {
+        width: 220px;
+      }
+    }
+    .el-form-item__label {
+      width: 120px;
+      &::after {
+        content: ':';
+        margin-right: 4px;
+      }
+    }
+  }
+}
+.setting-field__item {
+  display: flex;
+   &::v-deep {
+    .el-color-picker__trigger {
+      width: 120px;
+    }
+  }
+}
+.setting-field__item--default {
+  white-space: nowrap;
+}
+.operate-tabs {
+  width: 100%;
+  height: calc(100% - 60px);
+  display: flex;
+  flex-direction: column  ;
+  &::v-deep {
+    .el-tabs__nav-scroll {
+      padding:  0 20px;
+    }
+    .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;
+}
+.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;
+  &::v-deep {
+    .el-input {
+      margin-right: 10px;
+    }
+  }
+}
+
+</style>