优化

src/api/workflow.js

@@ -0,0 +1,24 @@
+import request from '@/utils/httpRequest'
+
+export function workflowUpdate (data) {
+  return request({
+    url: request.adornUrl('/workflow-service/workflow/update'),
+    method: 'POST',
+    data
+  })
+}
+
+export function workflowList (params) {
+  return request({
+    url: request.adornUrl('/workflow-service/workflow/list'),
+    method: 'get',
+    params
+  })
+}
+
+export function workflowInfot (modelId) {
+  return request({
+    url: request.adornUrl(`/workflow-service/workflow/info/${modelId}`),
+    method: 'get'
+  })
+}

src/views/modules/common/user-components.vue

@@ -0,0 +1,115 @@
+<template>
+    <div>
+      <el-select
+        v-model="value"
+        ref="select"
+        placeholder="请输入姓名"
+        clearable
+        filterable
+        remote
+        multiple
+        :disabled="disabled"
+        :remote-method="remoteMethod"
+        @change = "onChange">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+        <el-option v-if="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
+      </el-select>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'user-component',
+    props: {
+      userIds: {
+        type: Array,
+        default: () => []
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        value: [],
+        current: 1,
+        size: 10,
+        name: '',
+        options: [],
+        loading: false,
+        noMore: false
+      }
+    },
+    watch: {
+      userIds (value) {
+        this.value = value
+      }
+    },
+    mounted () {
+      this.init()
+    },
+    methods: {
+      async init () {
+        this.getList()
+      },
+      remoteMethod (query) {
+        this.options = []
+        this.current = 1
+        this.name = query
+        this.getList()
+      },
+      getList () {
+        this.$http({
+          url: this.$http.adornUrl(`/user-service/user/list`),
+          method: 'get',
+          params: this.$http.adornParams({
+            'current': this.current,
+            'size': this.size,
+            'name': this.name
+          })
+        }).then(({data}) => {
+          if (data && data.code === '200') {
+            if (this.current > data.data.pages) {
+              return
+            }
+            if (data.data.records.length < 10) {
+              this.noMore = false
+            } else {
+              this.noMore = true
+            }
+            data.data.records.forEach(item => {
+              this.options.push({
+                label: item.name + ' (' + item.orgName + ')',
+                value: item.userId
+              })
+            })
+          } else {
+            this.options = []
+          }
+        })
+      },
+      handleClick () {
+        this.loadMore()
+      },
+      loadMore () {
+        this.current ++
+        this.getList()
+      },
+      onChange (item) {
+        this.$emit('change', item)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.el-select{
+  width: 100%;
+}
+</style>

src/views/modules/process/process.vue

@@ -2,7 +2,7 @@
   <div class="mod-menu">
     <div class="my-menu">
       <div class="menu-head">流程类别</div>
-      <div v-for="(item, index) in menuList" :key="index" :class="{'menu-item': true, 'menu-active': active === index}">{{ item }}</div>
+      <div v-for="(item, index) in menuList" :key="item.id" @click="choseOne(index, item.id)" :class="{'menu-item': true, 'menu-active': active === index}">{{ item.name }}</div>
     </div>
     <div class="my-process">
       <div class="template_box">
@@ -32,22 +32,20 @@
                     <el-input v-model="stepForm.step_name" @change='stepnameChange' :disabled="templateAddDisable" placeholder='请输入步骤名称' />
                   </el-form-item>
                   <el-form-item label="审批类型:" prop="step_type">
-                    <el-radio-group v-model="stepForm.step_type" :disabled="templateAddDisable">
+                    <el-radio-group v-model="stepForm.step_type" @change='steptypeChange' :disabled="templateAddDisable">
                       <el-radio label="1">会签</el-radio>
                       <el-radio label="2">或签</el-radio>
                     </el-radio-group>
                   </el-form-item>
                   <el-form-item label="节点审批员:" prop="step_func">
-                    <el-select class='typeBox' v-model='stepForm.step_func' placeholder='节点审批员' @change='featureChange' :disabled="templateAddDisable">
-                      <el-option v-for='i in featureItem' :key='i.id' :label='i.label' :value='i.value' />
-                    </el-select>
+                    <user-components v-model="stepForm.step_func" :userIds="stepForm.step_func" @change='featureChange' :disabled="templateAddDisable" style="width:100%;"/>
                   </el-form-item>
                 </el-form>
                 </div>
           </div>
           <div class='confirmBox'>
-              <el-button type='primary' size='medium' style='padding:8px 18px; margin-left:20px; font-size:14px;' @click="replace">重置</el-button>
-              <el-button type='success' size='medium' style='padding:8px 18px; margin-left:20px; font-size:14px;' @click="confirm">提交</el-button>
+              <el-button :disabled="list.length == 0" type='primary' size='medium' style='padding:8px 18px; margin-left:20px; font-size:14px;' @click="replace">重置</el-button>
+              <el-button :disabled="list.length == 0" type='success' size='medium' style='padding:8px 18px; margin-left:20px; font-size:14px;' @click="confirm">提交</el-button>
           </div>
         </div>
       </div>
@@ -63,6 +61,8 @@
 <script>
   // import AddOrUpdate from './menu-add-or-update'
   import draggable from 'vuedraggable'
+  import { workflowUpdate, workflowList, workflowInfot } from '@/api/workflow'
+  import UserComponents from '../common/user-components'
   export default {
     data () {
       return {
@@ -70,7 +70,7 @@
         showEndSteps: true,
         dragging: false,
         active: 0,
-        menuList: ['订单流程', '采购流程'],
+        menuList: [],
         list: [],
         templateAddDisable: true,
         featureItem: [
@@ -83,20 +83,22 @@
           new_or_edit: 'new',
           step_name: '',
           step_type: '',
-          step_func: ''
+          step_func: []
         },
         stepRules: {
-          step_name: [{ required: true, message: '步骤名不能为空', trigger: 'blur' }],
-          step_type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
-          step_func: [{ required: true, message: '功能不能为空', trigger: 'blur' }]
+          step_name: [{ required: true, message: '步骤名称不能为空', trigger: 'blur' }],
+          step_type: [{ required: true, message: '审批类型不能为空', trigger: 'blur' }],
+          step_func: [{ required: true, message: '节点审批员不能为空', trigger: 'change' }]
         },
         index: '',
         selectValue: '',
-        addOrUpdateVisible: false
+        addOrUpdateVisible: false,
+        item: {}
       }
     },
     components: {
-      draggable
+      draggable,
+      UserComponents
     },
     activated () {
       this.getDataList()
@@ -104,31 +106,41 @@
     methods: {
       // 获取数据列表
       getDataList () {
-        this.dataListLoading = true
-        this.$http({
-          url: this.$http.adornUrl('/user-service/menu/tree'),
-          method: 'get',
-          params: this.$http.adornParams()
-        }).then(({data}) => {
+        workflowList({ current: 1, size: 100 }).then(({ data }) => {
           if (data.code === '200') {
-            this.dataList = JSON.parse(JSON.stringify(data.data).replace(/"list":/g, '"children":').replace(/"children":null/g, '"children":[]'))
-            console.log(this.dataList)
+            this.menuList = data.data.records
+            this.workflowInfot(this.menuList[0].id)
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
+      },
+      workflowInfot (id) {
+        this.list = []
+        workflowInfot(id).then(({ data }) => {
+          if (data.code === '200') {
+            this.item = data.data
+          } else {
+            this.$message.error(data.msg || '未获取到数据')
           }
-          this.dataListLoading = false
         })
       },
+      choseOne (index, id) {
+        this.active = index
+        this.workflowInfot(id)
+      },
       // 添加
       addBefore (i) {
         this.templateAddDisable = false
         this.stepForm.step_name = ''
         this.stepForm.step_type = ''
-        this.stepForm.step_func = ''
+        this.stepForm.step_func = []
         this.list.splice(i, 0, {
           id: this.id++,
           new_or_edit: 'new',
           step_name: '',
           step_type: '',
-          step_func: ''
+          step_func: []
         })
         if (this.list.length !== 0) {
           this.showEndSteps = false
@@ -148,7 +160,7 @@
       addAfter (i) {
         this.stepForm.step_name = ''
         this.stepForm.step_type = ''
-        this.stepForm.step_func = ''
+        this.stepForm.step_func = []
         let stepsArrey = document.getElementsByTagName('textarea')
         if (i === 0) {
           i = i + 1
@@ -162,7 +174,7 @@
           new_or_edit: 'new',
           step_name: '',
           step_type: '',
-          step_func: ''
+          step_func: []
         })
       },
       deleteStep (i) {
@@ -170,7 +182,7 @@
         if (this.list.length === 0) {
           this.showEndSteps = true
           this.templateAddDisable = true
-          this.stepForm = { new_or_edit: 'new', step_name: '', step_type: '', step_func: '' }
+          this.stepForm = { new_or_edit: 'new', step_name: '', step_type: '', step_func: [] }
         }
         let stepsArrey = document.querySelectorAll('textarea')
         for (let i = 0; i < stepsArrey.length; i++) {
@@ -203,11 +215,12 @@
       },
       featureChange (selVal) {
         this.list[this.index].step_func = selVal
+        this.stepForm.step_func = selVal
       },
       confirm () {
         if (this.stepForm.step_name === '') return this.$message.error('步骤名称不能为空')
         if (this.stepForm.step_type === '') return this.$message.error('审批类型不能为空')
-        if (this.stepForm.step_func === '') return this.$message.error('节点审批员不能为空')
+        if (this.stepForm.step_func.length === 0) return this.$message.error('节点审批员不能为空')
         let stepsMessage = []
         let stepsArrey = document.querySelectorAll('textarea')
         for (let i = 0; i < stepsArrey.length; i++) {
@@ -227,13 +240,28 @@
             return this.$message({type: 'error', message: '请填写完整的流程'})
           }
         }
+        const myList = []
+        this.list.forEach((v, index) => {
+          myList.push({
+            assigneeIds: v.step_func,
+            assigneeType: 1,
+            name: v.step_name,
+            type: v.step_type,
+            sort: index + 1
+          })
+        })
         let params = {
-          id: 0,
-          name: this.templateForm.name,
-          msg: this.templateForm.msg,
-          steps: this.list
+          name: this.menuList[this.active],
+          content: this.menuList[this.active],
+          workFlowStepVOs: myList
         }
-        console.log(params)
+        workflowUpdate(params).then(({ data }) => {
+          if (data.code === '200') {
+
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
       },
       replace () {
         this.list = []
@@ -264,7 +292,6 @@
     line-height: 30px;
     font-size: 14px;
     &:hover{
-      background-color: #efefef;
       cursor: pointer;
     }
   }