同步医学改动（流程）

src/business/platform/bpmn/form/action.js

@@ -4,7 +4,6 @@ import { startFlow, saveDraft } from '@/api/platform/bpmn/bpmInst'
 import Print from '@/utils/print'
 import request from '@/business/platform/form/utils/custom/joinCURD.js'
 import { snapshoot } from '@/api/platform/file/attachment'
-import Utils from '@/utils/util'
 
 export default {
     methods: {
@@ -161,7 +160,7 @@ export default {
                 text: this.$t('common.saving')
             })
             if (!formData) return
-            const replaceFormData = Utils.replaceNullWithEmpty(formData)
+            const replaceFormData = this.$utils.replaceNullWithEmpty(formData)
             bpmTaskSave({
                 taskId: this.taskId,
                 data: JSON.stringify(replaceFormData),
@@ -190,7 +189,7 @@ export default {
             if (firstNodeUserAssign) {
                 const formData = this.getFormData()
                 if (!formData) return
-                this.submitFormData = formData
+                this.submitFormData = this.$utils.replaceNullWithEmpty(formData)
                 this.startFlowDialogVisible = true
             } else {
                 this.saveStartFlow()
@@ -206,7 +205,7 @@ export default {
             const jsonData = {
                 defId: this.defId,
                 version: this.version || '0',
-                data: JSON.stringify(formData)
+                data: JSON.stringify(this.$utils.replaceNullWithEmpty(formData))
             }
             if (this.$utils.isNotEmpty(params.nodeUsers)) {
                 jsonData.nodeUsers = JSON.stringify(params.nodeUsers) || ''
@@ -256,7 +255,7 @@ export default {
             const jsonData = {
                 defId: this.defId,
                 version: this.version || '',
-                data: JSON.stringify(formData)
+                data: JSON.stringify(this.$utils.replaceNullWithEmpty(formData))
             }
             if (this.$utils.isNotEmpty(this.proInstId) && !this.copyFlow) {
                 jsonData.proInstId = this.proInstId || ''
@@ -316,7 +315,7 @@ export default {
                 text: this.$t('common.saving')
             })
             params.taskId = this.taskId
-            params.data = JSON.stringify(formData)
+            params.data = JSON.stringify(this.$utils.replaceNullWithEmpty(formData))
 
             if (actionName === 'agree') {
                 agree(params).then(response => {

src/business/platform/bpmn/setting/bpmn-setting/components/user-condition-setting.vue

@@ -1,33 +1,33 @@
 <template>
-  <el-dialog
-    :visible.sync="dialogVisible"
-    :title="title"
-    width="70%"
-    top="10vh"
-    append-to-body
-    class="bpmn-node-user-dialog"
-    @close="closeDialog"
-    @open="getFormData"
-  >
-    <!--表单规则-->
-    <!-- <form-condition
-      v-model="condition"
-    /> -->
-    <!--用户设置-->
-    <user-setting
-      v-model="userCalcs"
-      :plugin-type-options="pluginTypeOptions"
-      :logic-cal-options="logicCalOptions"
-      :extract-optins="extractOptins"
-    />
+    <el-dialog
+        :visible.sync="dialogVisible"
+        :title="title"
+        width="70%"
+        top="10vh"
+        append-to-body
+        class="bpmn-node-user-dialog"
+        @close="closeDialog"
+        @open="getFormData"
+    >
+        <!--表单规则-->
+        <!-- <form-condition
+            v-model="condition"
+        /> -->
+        <!--用户设置-->
+        <user-setting
+            v-model="userCalcs"
+            :plugin-type-options="pluginTypeOptions"
+            :logic-cal-options="logicCalOptions"
+            :extract-optins="extractOptins"
+        />
 
-    <div slot="footer" class="el-dialog--center">
-      <ibps-toolbar
-        :actions="toolbars"
-        @action-event="handleActionEvent"
-      />
-    </div>
-  </el-dialog>
+        <div slot="footer" class="el-dialog--center">
+            <ibps-toolbar
+                :actions="toolbars"
+                @action-event="handleActionEvent"
+            />
+        </div>
+    </el-dialog>
 </template>
 
 <script>
@@ -36,142 +36,146 @@ import UserSetting from './user-setting'
 import { pluginTypeOptions, logicCalOptions, extractOptins } from './user-setting/constants'
 
 export default {
-  components: {
-    // FormCondition,
-    UserSetting
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
+    components: {
+        // FormCondition,
+        UserSetting
     },
-    title: String,
-    data: {
-      type: Object
-    }
-  },
-  data() {
-    return {
-      pluginTypeOptions,
-      logicCalOptions,
-      extractOptins,
-      dialogVisible: this.visible,
-      userCalcs: [],
-      condition: {},
-      buttonDisable: false,
-      toolbars: [
-        { key: 'confirm', label: '确定' },
-        { key: 'cancel' }
-      ]
-    }
-  },
-  computed: {
-    pluginTypeMap() {
-      const pluginTypeMap = {}
-      this.pluginTypeOptions.forEach(item => {
-        pluginTypeMap[item.value] = item
-      })
-      return pluginTypeMap
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: String,
+        data: {
+            type: Object
+        },
+        users: {
+            type: Array,
+            default: () => []
+        }
     },
-    logicCalMap() {
-      const logicCalMap = {}
-      this.logicCalOptions.forEach(item => {
-        logicCalMap[item.value] = item
-      })
-      return logicCalMap
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.buttonDisable = false
-        this.dialogVisible = this.visible
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    handleActionEvent({ key }) {
-      switch (key) {
-        case 'confirm':
-          this.handleConfirm()
-          break
-        case 'cancel':
-          this.closeDialog()
-          break
-        default:
-          break
-      }
+    data () {
+        return {
+            pluginTypeOptions,
+            logicCalOptions,
+            extractOptins,
+            dialogVisible: this.visible,
+            userCalcs: [],
+            condition: {},
+            buttonDisable: false,
+            toolbars: [
+                { key: 'confirm', label: '确定' },
+                { key: 'cancel' }
+            ]
+        }
     },
-    // 关闭当前窗口
-    closeDialog() {
-      this.buttonDisable = true
-      this.$emit('close', false)
+    computed: {
+        pluginTypeMap () {
+            const pluginTypeMap = {}
+            this.pluginTypeOptions.forEach(item => {
+                pluginTypeMap[item.value] = item
+            })
+            return pluginTypeMap
+        },
+        logicCalMap () {
+            const logicCalMap = {}
+            this.logicCalOptions.forEach(item => {
+                logicCalMap[item.value] = item
+            })
+            return logicCalMap
+        }
     },
-    getDescription() {
-      // 规则拼装
-      // ==============TODO:人员规则====
-      // 拼装描述
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.buttonDisable = false
+                this.dialogVisible = this.visible
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        handleActionEvent ({ key }) {
+            switch (key) {
+                case 'confirm':
+                    this.handleConfirm()
+                    break
+                case 'cancel':
+                    this.closeDialog()
+                    break
+                default:
+                    break
+            }
+        },
+        // 关闭当前窗口
+        closeDialog () {
+            this.buttonDisable = true
+            this.$emit('close', false)
+        },
+        getDescription () {
+            // 规则拼装
+            // ==============TODO:人员规则====
+            // 拼装描述
 
-      let description = ''
-      this.userCalcs.forEach((item) => {
-        description = description + '【' + this.pluginTypeMap[item.pluginType].label + '】' +
+            let description = ''
+            this.userCalcs.forEach((item) => {
+                description = description + '【' + this.pluginTypeMap[item.pluginType].label + '】' +
                    item.description + '（' + this.logicCalMap[item.logicCal].label + '） ;　'
-      })
+            })
 
-      return description
-    },
-    handleConfirm() {
-      if (this.buttonDisable) {
-        return
-      }
-      if (this.userCalcs.length < 1) {
-        this.$message.closeAll()
-        this.$message({
-          message: '请添加人员配置项',
-          type: 'warning'
-        })
-        return
-      }
-      for (var i = 0; i < this.userCalcs.length; i++) {
-        // 如果 配置条件为空 则return
-        if (!this.userCalcs[i]['description']) {
-          this.$message.closeAll()
-          this.$message({
-            message: `第${i + 1}行人员配置无效,请检查。`,
-            type: 'warning'
-          })
-          return
+            return description
+        },
+        handleConfirm () {
+            if (this.buttonDisable) {
+                return
+            }
+            if (this.userCalcs.length < 1) {
+                this.$message.closeAll()
+                this.$message({
+                    message: '请添加人员配置项',
+                    type: 'warning'
+                })
+                return
+            }
+            for (var i = 0; i < this.userCalcs.length; i++) {
+                // 如果 配置条件为空 则return
+                if (!this.userCalcs[i]['description']) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: `第${i + 1}行人员配置无效,请检查。`,
+                        type: 'warning'
+                    })
+                    return
+                }
+            }
+            const data = {
+                calcs: this.userCalcs,
+                condition: this.condition,
+                conditionMode: '',
+                description: this.getDescription(),
+                groupNo: this.data.groupNo ? this.data.groupNo : this.users.length ? this.users.length + 1 : 1
+            }
+            this.$emit('callback', data)
+            this.closeDialog()
+        },
+        getFormData () {
+            if (this.$utils.isNotEmpty(this.data)) {
+                this.condition = JSON.parse(JSON.stringify(this.data.condition))
+                this.userCalcs = JSON.parse(JSON.stringify(this.data.calcs))
+            } else {
+                this.condition = {}
+                this.userCalcs = []
+            }
         }
-      }
-      const data = {
-        calcs: this.userCalcs,
-        condition: this.condition,
-        conditionMode: '',
-        description: this.getDescription(),
-        groupNo: this.data.groupNo || 1
-      }
-      this.$emit('callback', data)
-      this.closeDialog()
-    },
-    getFormData() {
-      if (this.$utils.isNotEmpty(this.data)) {
-        this.condition = JSON.parse(JSON.stringify(this.data.condition))
-        this.userCalcs = JSON.parse(JSON.stringify(this.data.calcs))
-      } else {
-        this.condition = {}
-        this.userCalcs = []
-      }
     }
-  }
 }
 </script>
 <style lang="scss">
 .bpmn-node-user-dialog{
- .el-dialog{
-  .el-dialog__body{
-    height: 60vh;
-  }
-  }
+    .el-dialog{
+        .el-dialog__body{
+            height: 60vh;
+        }
+    }
 }
 </style>

src/business/platform/bpmn/setting/bpmn-setting/components/user-rules.vue

@@ -1,118 +1,119 @@
 <template>
-  <div>
-    <div class="buttons ibps-pb-5 ibps-tr">
-      <el-button type="success" size="mini" plain icon="el-icon-circle-plus-outline" @click="handleAddUser">添加人员</el-button>
-      <el-button  size="mini" plain icon="el-icon-circle-close" type="danger" @click="cleanUser">清空人员</el-button>
+    <div>
+        <div class="buttons ibps-pb-5 ibps-tr">
+            <el-button type="success" size="mini" plain icon="el-icon-circle-plus-outline" @click="handleAddUser">添加人员</el-button>
+            <el-button size="mini" plain icon="el-icon-circle-close" type="danger" @click="cleanUser">清空人员</el-button>
+        </div>
+        <el-table ref="elTable" :data="users" border style="width: 100%">
+            <el-table-column
+                type="index"
+                width="50"
+                label="序号"
+            />
+            <el-table-column prop="description" label="条件" />
+            <el-table-column align="center" prop="groupNo" width="80" label="批次">
+                <template slot-scope="scope">
+                    <el-input
+                        v-model="scope.row.groupNo"
+                        type="number"
+                        placeholder="批次"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column align="center" label="管理" width="100">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="editUser(scope.$index)">编辑</el-button>
+                    <el-button type="text" size="small" @click="removeUser(scope.$index)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <user-condition-setting
+            :title="title"
+            :data.sync="editData"
+            :users="users"
+            :visible="dialogFormVisible"
+            @callback="handleUserData"
+            @close="visible => dialogFormVisible = false"
+        />
     </div>
-    <el-table ref="elTable" :data="users" border style="width: 100%">
-      <el-table-column
-        type="index"
-        width="50"
-        label="序号"
-      />
-      <el-table-column prop="description" label="条件" />
-      <el-table-column align="center" prop="groupNo" width="80" label="批次">
-        <template slot-scope="scope">
-          <el-input
-            v-model="scope.row.groupNo"
-            type="number"
-            placeholder="批次"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="管理" width="100">
-        <template slot-scope="scope">
-          <el-button type="text" size="small" @click="editUser(scope.$index)">编辑</el-button>
-          <el-button type="text" size="small" @click="removeUser(scope.$index)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <user-condition-setting
-      :title="title"
-      :data.sync="editData"
-      :visible="dialogFormVisible"
-      @callback="handleUserData"
-      @close="visible => dialogFormVisible = false"
-    />
-  </div>
 </template>
 <script>
 import { defaultsDeep } from 'lodash'
 import UserConditionSetting from './user-condition-setting'
 export default {
-  components: {
-    UserConditionSetting
-  },
-  props: {
-    data: Array,
-    title: String
-  },
-  data() {
-    return {
-      dialogFormVisible: false,
-      defaultValue: {},
-      editIndex: -1,
-      editData: {},
-      editTitle: ''
-    }
-  },
-  computed: {
-    users() {
-      return this.data
-    }
-  },
-  watch: {
-    users: {
-      handler() {
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.$refs.elTable.doLayout()
-          }, 10)
-        })
-      },
-      immediate: true
-    }
-  },
-  beforeDestroy() {
-    this.editData = null
-  },
-  methods: {
-    handleAddUser() {
-      this.editData = {}
-      this.editIndex = -1
-      this.dialogFormVisible = true
+    components: {
+        UserConditionSetting
+    },
+    props: {
+        data: Array,
+        title: String
+    },
+    data () {
+        return {
+            dialogFormVisible: false,
+            defaultValue: {},
+            editIndex: -1,
+            editData: {},
+            editTitle: ''
+        }
     },
-    // 新增编辑人员设置
-    editUser(index) {
-      const data = this.$utils.isNotEmpty(index) ? this.users[index] : {}
-      this.editData = defaultsDeep(JSON.parse(JSON.stringify(data)), this.defaultValue)
-      this.editIndex = this.$utils.isNotEmpty(index) ? index : -1
-      this.dialogFormVisible = true
+    computed: {
+        users () {
+            return this.data
+        }
     },
-    // 删除单行人员设置
-    removeUser(index) {
-      this.users.splice(index, 1)
+    watch: {
+        users: {
+            handler () {
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.$refs.elTable.doLayout()
+                    }, 10)
+                })
+            },
+            immediate: true
+        }
     },
-    // 清空人员设置
-    cleanUser() {
-      this.$confirm('是否清空人员设置?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.users.splice(0, this.users.length)
-      })
+    beforeDestroy () {
+        this.editData = null
     },
-    /**
-     * 处理数据
-     */
-    handleUserData(data) {
-      if (this.editIndex > -1) {
-        this.users.splice(this.editIndex, 1, data)
-      } else {
-        this.users.push(data)
-      }
+    methods: {
+        handleAddUser () {
+            this.editData = {}
+            this.editIndex = -1
+            this.dialogFormVisible = true
+        },
+        // 新增编辑人员设置
+        editUser (index) {
+            const data = this.$utils.isNotEmpty(index) ? this.users[index] : {}
+            this.editData = defaultsDeep(JSON.parse(JSON.stringify(data)), this.defaultValue)
+            this.editIndex = this.$utils.isNotEmpty(index) ? index : -1
+            this.dialogFormVisible = true
+        },
+        // 删除单行人员设置
+        removeUser (index) {
+            this.users.splice(index, 1)
+        },
+        // 清空人员设置
+        cleanUser () {
+            this.$confirm('是否清空人员设置?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.users.splice(0, this.users.length)
+            })
+        },
+        /**
+         * 处理数据
+         */
+        handleUserData (data) {
+            if (this.editIndex > -1) {
+                this.users.splice(this.editIndex, 1, data)
+            } else {
+                this.users.push(data)
+            }
+        }
     }
-  }
 }
 </script>

src/business/platform/bpmn/setting/bpmn-setting/settings/button-setting.vue

@@ -1,144 +1,247 @@
 <template>
-  <div class="panel-default">
-    <div class="panel-body">
-      <div class="buttons ibps-pb-5 ibps-tr">
-        <el-button type="success" size="mini" plain icon="el-icon-circle-plus-outline" @click="editButton()">添加按钮</el-button>
-        <el-button type="primary" size="mini" plain icon="el-icon-refresh-left" @click="initButton">初始化按钮</el-button>
-        <el-button size="mini" plain icon="el-icon-circle-close" type="danger" @click="cleanButton">清空按钮</el-button>
-      </div>
-      <el-table ref="elTable" :data="buttons" border style="width: 100%">
-        <el-table-column align="center" prop="name" label="按钮名称" />
-        <el-table-column align="center" prop="aliasName" label="操作类型" width="180" />
-        <el-table-column align="center" label="管理" width="100">
-          <template slot-scope="scope">
-            <el-button type="text" size="small" @click="editButton(scope.$index)">编辑</el-button>
-            <el-button type="text" size="small" @click="removeButton(scope.$index)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+    <div class="panel-default">
+        <div class="panel-body">
+            <div class="buttons ibps-pb-5 ibps-tr">
+                <el-button type="success" size="mini" plain icon="el-icon-circle-plus-outline" @click="editButton()">添加按钮</el-button>
+                <el-button type="primary" size="mini" plain icon="el-icon-refresh-left" @click="initButton">初始化按钮</el-button>
+                <el-button size="mini" plain icon="el-icon-circle-close" type="danger" @click="cleanButton">清空按钮</el-button>
+            </div>
+            <div class="button-table-header">
+                <div class="name">按钮名称</div>
+                <div class="type">操作类型</div>
+                <div class="operate">管理</div>
+            </div>
+            <vue-draggable
+                v-if="buttons && buttons.length"
+                v-model="buttons"
+                v-bind="draggableOptions"
+                class="list-group"
+                @start="isDragging = true"
+                @end="()=>{isDragging= false}"
+            >
+                <!-- 原代码，使用table渲染，不可拖拽排序 -->
+                <!-- <el-table ref="elTable" :data="buttons" border style="width: 100%">
+                    <el-table-column align="center" prop="name" label="按钮名称" />
+                    <el-table-column align="center" prop="aliasName" label="操作类型" width="180" />
+                    <el-table-column align="center" label="管理" width="100">
+                        <template slot-scope="scope">
+                            <el-button type="text" size="small" @click="editButton(scope.$index)">编辑</el-button>
+                            <el-button type="text" size="small" @click="removeButton(scope.$index)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table> -->
+                <!-- div布局，可拖拽排序 -->
+                <div v-for="(button,i) in buttons" :key="i" class="button-table-item">
+                    <div class="name">
+                        {{ button.name }}
+                    </div>
+                    <div class="type">
+                        {{ button.aliasName }}
+                    </div>
+                    <el-button-group class="operate">
+                        <el-button size="small" type="text" title="编辑" icon="ibps-icon-cog" @click="editButton(i)" />
+                        <el-button size="small" type="text" title="删除" icon="el-icon-delete" @click="removeButton(i)" />
+                        <el-button class="draggable" title="拖动排序" data-role="sort_choice" size="small" type="text" icon="ibps-icon-arrows" />
+                    </el-button-group>
+                </div>
+            </vue-draggable>
+            <div v-else class="no-data">
+                暂无数据
+            </div>
+        </div>
+        <edit-button
+            :visible="dialogFormVisible"
+            :title="title"
+            :data="editData"
+            :button-type-map="buttonTypeMap"
+            :buttons="buttons"
+            @callback="handleData"
+            @close="visible => dialogFormVisible = false"
+        />
     </div>
-    <edit-button
-      :visible="dialogFormVisible"
-      :title="title"
-      :data="editData"
-      :button-type-map="buttonTypeMap"
-      :buttons="buttons"
-      @callback="handleData"
-      @close="visible => dialogFormVisible = false"
-    />
-  </div>
 </template>
 <script>
 import { initButton, getButton } from '@/api/platform/bpmn/bpmDefinition'
 import ActionUtils from '@/utils/action'
 import { defaultsDeep } from 'lodash'
 import EditButton from './../components/edit-button'
+import VueDraggable from 'vuedraggable'
 
 export default {
-  components: {
-    EditButton
-  },
-  props: {
-    data: Array,
-    nodeType: {
-      type: String,
-      default: 'userTask'
-    }
-  },
-  data() {
-    return {
-      defaultValue: {
-        alias: '',
-        aliasName: '',
-        name: '',
-        code: '',
-        afterScript: '',
-        beforeScript: ''
-      },
-      buttonTypeMap: {},
-      editData: {},
-      editIndex: -1,
-      dialogFormVisible: false,
-      title: '添加按钮'
-    }
-  },
-  computed: {
-    buttons() {
-      return this.data
-    }
-  },
-  watch: {
-    nodeType: {
-      handler: function(val, oldVal) {
-        if (val !== oldVal) {
-          this.loadButtonTypes()
-          this.$nextTick(() => {
-            this.$refs.elTable.doLayout()
-          })
+    components: {
+        EditButton,
+        VueDraggable
+    },
+    props: {
+        data: Array,
+        nodeType: {
+            type: String,
+            default: 'userTask'
         }
-      },
-      immediate: true
-    }
-  },
-  beforeDestroy() {
-    this.editData = null
-  },
-  methods: {
-    // 新增、编辑变量
-    editButton(index) {
-      const data = this.$utils.isNotEmpty(index) ? this.buttons[index] : {}
-      this.editData = defaultsDeep(JSON.parse(JSON.stringify(data)), this.defaultValue)
-      this.editIndex = this.$utils.isNotEmpty(index) ? index : -1
-      this.title = this.$utils.isNotEmpty(index) ? '编辑按钮' : '添加按钮'
-      this.dialogFormVisible = true
     },
-    // 删除变量
-    removeButton(index) {
-      this.buttons.splice(index, 1)
+    data () {
+        return {
+            defaultValue: {
+                alias: '',
+                aliasName: '',
+                name: '',
+                code: '',
+                afterScript: '',
+                beforeScript: ''
+            },
+            buttonTypeMap: {},
+            editData: {},
+            editIndex: -1,
+            dialogFormVisible: false,
+            title: '添加按钮',
+            isDragging: false,
+            draggableOptions: {
+                handle: '.draggable',
+                ghostClass: 'sortable-ghost',
+                distance: 1,
+                disabled: false,
+                animation: 200,
+                axis: 'y'
+            }
+        }
     },
-    // 清空变量
-    cleanButton() {
-      this.$confirm('是否清空按钮?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.buttons.splice(0, this.buttons.length)
-      })
+    computed: {
+        // buttons () {
+        //     console.log(this.data)
+        //     return this.data
+        // }
+        buttons: {
+            get (v) {
+                return this.data || []
+            },
+            set (value) {
+                this.$emit('update', value)
+            }
+        }
     },
-    /**
-     * 处理数据
-     */
-    handleData(data) {
-      if (this.editIndex > -1) {
-        this.buttons.splice(this.editIndex, 1, data)
-      } else {
-        this.buttons.push(data)
-      }
+    watch: {
+        nodeType: {
+            handler: function (val, oldVal) {
+                if (val !== oldVal) {
+                    this.loadButtonTypes()
+                    // this.$nextTick(() => {
+                    //     this.$refs.elTable.doLayout()
+                    // })
+                }
+            },
+            immediate: true
+        }
     },
-    initButton() {
-      initButton({
-        nodeType: this.nodeType
-      }).then(response => {
-        this.buttons.splice(0, this.buttons.length)
-        const buttons = response.data
-        buttons.forEach(button => {
-          this.buttons.push(button)
-        })
-        ActionUtils.success('初始化按钮成功')
-      })
+    beforeDestroy () {
+        this.editData = null
     },
-    loadButtonTypes() {
-      getButton({
-        nodeType: this.nodeType
-      }).then(response => {
-        const buttonTypeMap = {}
-        response.data.forEach(buttonType => {
-          buttonTypeMap[buttonType.alias] = buttonType
-        })
-        this.buttonTypeMap = buttonTypeMap
-      })
+    methods: {
+        // 新增、编辑变量
+        editButton (index) {
+            const data = this.$utils.isNotEmpty(index) ? this.buttons[index] : {}
+            this.editData = defaultsDeep(JSON.parse(JSON.stringify(data)), this.defaultValue)
+            this.editIndex = this.$utils.isNotEmpty(index) ? index : -1
+            this.title = this.$utils.isNotEmpty(index) ? '编辑按钮' : '添加按钮'
+            this.dialogFormVisible = true
+        },
+        // 删除变量
+        removeButton (index) {
+            this.buttons.splice(index, 1)
+        },
+        // 清空变量
+        cleanButton () {
+            this.$confirm('是否清空按钮?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.buttons.splice(0, this.buttons.length)
+            })
+        },
+        /**
+         * 处理数据
+         */
+        handleData (data) {
+            console.log(this.editIndex, data)
+            this.editIndex
+            if (this.editIndex > -1) {
+                this.buttons.splice(this.editIndex, 1, data)
+            } else {
+                this.buttons.push(data)
+            }
+        },
+        initButton () {
+            initButton({
+                nodeType: this.nodeType
+            }).then(response => {
+                this.buttons.splice(0, this.buttons.length)
+                const buttons = response.data
+                buttons.forEach(button => {
+                    this.buttons.push(button)
+                })
+                ActionUtils.success('初始化按钮成功')
+            })
+        },
+        loadButtonTypes () {
+            getButton({
+                nodeType: this.nodeType
+            }).then(response => {
+                const buttonTypeMap = {}
+                response.data.forEach(buttonType => {
+                    buttonTypeMap[buttonType.alias] = buttonType
+                })
+                this.buttonTypeMap = buttonTypeMap
+            })
+        }
     }
-  }
 }
 </script>
+<style lang="scss" scoped>
+    .button-table-header, .button-table-item{
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        border-bottom: 1px solid #ebeef5;
+        height: 40px;
+        > div {
+            padding: 8px 10px;
+            text-align: center;
+        }
+        .name {
+            width: 45%;
+        }
+        .type {
+            width: 35%;
+            border-left: 1px solid #ebeef5;
+            border-right: 1px solid #ebeef5;
+        }
+        .operate {
+            width: 20%;
+        }
+    }
+    .button-table-header {
+        font-weight: bolder;
+        background-color: #84d5cf;
+    }
+    .button-table-item {
+        border-left: 1px solid #ebeef5;
+        border-right: 1px solid #ebeef5;
+        .operate {
+            display: flex;
+            > button {
+                flex: 1;
+            }
+        }
+    }
+    .no-data {
+        width: 510px;
+        height: 60px;
+        text-align: center;
+        line-height: 60px;
+        color: #909399;
+        font-size: 12px;
+        border-style: solid;
+        border-color: #ebeef5;
+        border-width: 0 1px 1px 1px;
+    }
+</style>

src/business/platform/bpmn/setting/bpmn-setting/types/global.vue

@@ -1,6 +1,8 @@
 <template>
     <div>
-        <div v-sticky class="setting-title" @click="onTitle">全局设置 <i class="el-icon-caret-bottom"></i></div>
+        <div v-sticky class="setting-title" @click="onTitle">
+            全局设置 <i class=" el-icon-caret-bottom" />
+        </div>
         <el-collapse v-model="activeNames">
             <el-collapse-item title="业务对象绑定" name="boSetting">
                 <bo-setting
@@ -66,12 +68,7 @@
             <el-collapse-item name="endNotify">
                 <template slot="title">
                     办结抄送设置
-                    <el-tooltip
-                        class="item"
-                        effect="light"
-                        content="进行设置流程结束时抄送给某批人！"
-                        placement="bottom"
-                    >
+                    <el-tooltip class="item" effect="light" content="进行设置流程结束时抄送给某批人！" placement="bottom">
                         <i class="header-icon el-icon-info" />
                     </el-tooltip>
                 </template>
@@ -146,7 +143,7 @@ export default {
         // 其它属性
         attributes () {
             if (!this.data.attributes) return
-            this.data.attributes.subjectRule = this.data.attributes.subjectRule == '{发起人:startorName}在{发起时间:startTime}发起{流程标题:title}' ? '{发起人:startorName} |启动：{流程标题:title}' : this.data.attributes.subjectRule
+            // this.data.attributes.subjectRule = this.data.attributes.subjectRule == '{发起人:startorName}在{发起时间:startTime}发起{流程标题:title}' ? '{发起人:startorName} |启动：{流程标题:title}' : this.data.attributes.subjectRule
             return this.data ? this.data.attributes || {} : {}
         }
     },

src/business/platform/bpmn/setting/bpmn-setting/types/user-task.vue

@@ -1,127 +1,140 @@
 <template>
-  <div>
-    <div v-sticky class="setting-title" @click="onTitle">
-      用户任务设置<template v-if="$utils.isNotEmpty(data.node_name )">--【{{ data.node_name }}】</template>
-    </div>
-    <el-collapse v-model="activeNames">
-      <el-collapse-item title="用户设置" name="userSetting">
-        <user-setting :data="users" />
-      </el-collapse-item>
-      <el-collapse-item title="表单设置" name="fromSetting">
-        <form-setting
-          :data="formData"
-          :attributes="attributes"
-          :bo-data="boData"
-          :def-key="defKey"
-          :node-id="data.id"
-          form-type="node"
-        />
-      </el-collapse-item>
-      <el-collapse-item v-if="nodeType==='signTask'" title="会签规则" name="signRule">
-        <sign-rule :data="signRule" />
-      </el-collapse-item>
-      <el-collapse-item v-if="nodeType==='signTask'" title="会签特权" name="signPrivileges">
-        <sign-privileges :data.sync="signPrivileges" />
-      </el-collapse-item>
-      <el-collapse-item title="事件设置" name="eventScript">
-        <event-script :data="scripts" :node-type="nodeType" :node-id="data.id" />
-      </el-collapse-item>
-      <el-collapse-item title="按钮设置" name="buttonSetting">
-        <button-setting :data="buttons" :node-type="nodeType" />
-      </el-collapse-item>
-      <el-collapse-item title="跳转规则设置" name="jumpRuleSetting">
-        <jump-rule :data="jumpRules" />
-      </el-collapse-item>
-      <el-collapse-item title="催办设置" name="reminder">
-        <reminder-setting :data="reminders" :def-id="defId" :cur-node="data" />
-      </el-collapse-item>
-      <el-collapse-item title="触发流程设置" name="triggerFlow">
-        <trigger-flow :data="trigerFlows" :def-id="defId" :cur-node="data" :bo-data="boData" />
-      </el-collapse-item>
-      <el-collapse-item name="endNotify">
-        <template slot="title">
-          办理抄送设置
-          <el-tooltip class="item" effect="light" content="进行设置节点结束时抄送给某批人！" placement="bottom">
-            <i class="header-icon el-icon-info" />
-          </el-tooltip>
-        </template>
-        <notify-setting :data="procNotify" type="userTask" />
-      </el-collapse-item>
+    <div>
+        <div v-sticky class="setting-title" @click="onTitle">
+            用户任务设置<template v-if="$utils.isNotEmpty(data.node_name )">--【{{ data.node_name }}】</template>
+        </div>
+        <el-collapse v-model="activeNames">
+            <el-collapse-item title="用户设置" name="userSetting">
+                <user-setting :data="users" />
+            </el-collapse-item>
+            <el-collapse-item title="表单设置" name="fromSetting">
+                <form-setting
+                    :data="formData"
+                    :attributes="attributes"
+                    :bo-data="boData"
+                    :def-key="defKey"
+                    :node-id="data.id"
+                    form-type="node"
+                />
+            </el-collapse-item>
+            <el-collapse-item v-if="nodeType==='signTask'" title="会签规则" name="signRule">
+                <sign-rule :data="signRule" />
+            </el-collapse-item>
+            <el-collapse-item v-if="nodeType==='signTask'" title="会签特权" name="signPrivileges">
+                <sign-privileges :data.sync="signPrivileges" />
+            </el-collapse-item>
+            <el-collapse-item title="事件设置" name="eventScript">
+                <event-script :data="scripts" :node-type="nodeType" :node-id="data.id" />
+            </el-collapse-item>
+            <el-collapse-item title="按钮设置" name="buttonSetting">
+                <button-setting :data="buttons" :node-type="nodeType" @update="updateButton" />
+            </el-collapse-item>
+            <el-collapse-item title="跳转规则设置" name="jumpRuleSetting">
+                <jump-rule :data="jumpRules" />
+            </el-collapse-item>
+            <el-collapse-item title="催办设置" name="reminder">
+                <reminder-setting :data="reminders" :def-id="defId" :cur-node="data" />
+            </el-collapse-item>
+            <el-collapse-item title="触发流程设置" name="triggerFlow">
+                <trigger-flow :data="trigerFlows" :def-id="defId" :cur-node="data" :bo-data="boData" />
+            </el-collapse-item>
+            <el-collapse-item name="endNotify">
+                <template slot="title">
+                    办理抄送设置
+                    <el-tooltip class="item" effect="light" content="进行设置节点结束时抄送给某批人！" placement="bottom">
+                        <i class="header-icon el-icon-info" />
+                    </el-tooltip>
+                </template>
+                <notify-setting :data="procNotify" type="userTask" />
+            </el-collapse-item>
 
-      <el-collapse-item title="其他设置" name="otherOttribute">
-        <other-attribute-node :data="attributes" :cur-node="data" />
-      </el-collapse-item>
-    </el-collapse>
-  </div>
+            <el-collapse-item title="其他设置" name="otherOttribute">
+                <other-attribute-node :data="attributes" :cur-node="data" />
+            </el-collapse-item>
+        </el-collapse>
+    </div>
 </template>
 <script>
 import mixins from '../mixins/type'
 export default {
-  mixins: [mixins],
-  props: {
-    data: Object,
-    defId: String,
-    defKey: String,
-    boData: Object
-  },
-  data() {
-    return {
-      activeNames: ['userSetting', 'fromSetting', 'signRule', 'signPrivileges', 'eventScript', 'buttonSetting', 'jumpRuleSetting', 'reminder', 'triggerFlow', 'endNotify', 'otherOttribute']
-    }
-  },
-  computed: {
-    nodeType() {
-      return this.data ? this.data.node_type || 'userTask' : 'userTask'
-    },
-    // 用户人员
-    users() {
-      return this.data ? this.data.users || [] : []
-    },
-    // 表单
-    formData() {
-      return this.data ? this.data.form || {} : {}
-    },
-    // 会签设置
-    signRule() {
-      return this.data ? this.data.signRule || {} : {}
-    },
-    // 会签特权
-    signPrivileges: {
-      get() {
-        return this.data ? this.data.privileges || {} : {}
-      },
-      set(value) {
-        this.data.privileges = value || {}
-      }
-    },
-    // 脚本
-    scripts() {
-      return this.data ? this.data.scripts || {} : {}
-    },
-    // 按钮
-    buttons() {
-      return this.data ? this.data.buttons || [] : []
-    },
-    // 跳转规则
-    jumpRules() {
-      return this.data ? this.data.jumpRules || [] : []
-    },
-    // 催办
-    reminders() {
-      return this.data ? this.data.reminders || [] : []
+    mixins: [mixins],
+    props: {
+        data: Object,
+        defId: String,
+        defKey: String,
+        boData: Object
     },
-    // 触发流程
-    trigerFlows() {
-      return this.data ? this.data.trigerFlows || [] : []
+    data () {
+        return {
+            activeNames: ['userSetting', 'fromSetting', 'signRule', 'signPrivileges', 'eventScript', 'buttonSetting', 'jumpRuleSetting', 'reminder', 'triggerFlow', 'endNotify', 'otherOttribute']
+        }
     },
-    // 抄送
-    procNotify() {
-      return this.data ? this.data.procNotify || [] : []
+    computed: {
+        nodeType () {
+            return this.data ? this.data.node_type || 'userTask' : 'userTask'
+        },
+        // 用户人员
+        users () {
+            return this.data ? this.data.users || [] : []
+        },
+        // 表单
+        formData () {
+            return this.data ? this.data.form || {} : {}
+        },
+        // 会签设置
+        signRule () {
+            return this.data ? this.data.signRule || {} : {}
+        },
+        // 会签特权
+        signPrivileges: {
+            get () {
+                return this.data ? this.data.privileges || {} : {}
+            },
+            set (value) {
+                this.data.privileges = value || {}
+            }
+        },
+        // 脚本
+        scripts () {
+            return this.data ? this.data.scripts || {} : {}
+        },
+        // 按钮
+        // buttons () {
+        //     return this.data ? this.data.buttons || [] : []
+        // },
+        buttons: {
+            get () {
+                return this.data ? this.data.buttons || [] : []
+            },
+            set (value) {
+                this.data.buttons = value
+            }
+        },
+        // 跳转规则
+        jumpRules () {
+            return this.data ? this.data.jumpRules || [] : []
+        },
+        // 催办
+        reminders () {
+            return this.data ? this.data.reminders || [] : []
+        },
+        // 触发流程
+        trigerFlows () {
+            return this.data ? this.data.trigerFlows || [] : []
+        },
+        // 抄送
+        procNotify () {
+            return this.data ? this.data.procNotify || [] : []
+        },
+        // 其它设置
+        attributes () {
+            return this.data ? this.data.attributes || {} : {}
+        }
     },
-    // 其它设置
-    attributes() {
-      return this.data ? this.data.attributes || {} : {}
+    methods: {
+        updateButton (newValue) {
+            this.buttons = newValue
+        }
     }
-  }
 }
 </script>