离职交接审批流程

src/api/changes/dimission/DimissionHandoverService.js

@@ -0,0 +1,32 @@
+import request from '@/utils/httpRequest'
+
+export default class DimissionHandoverService {
+  list (params) {
+    return request({
+      url: '/changes/dimission_handover/list',
+      method: 'get',
+      params: params
+    })
+  }
+  queryById (id) {
+    return request({
+      url: '/changes/dimission_handover/queryById',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  queryInitialize (id) {
+    return request({
+      url: '/changes/dimission_handover/queryInitialize',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  save (inputForm) {
+    return request({
+      url: `/changes/dimission_handover/save`,
+      method: 'post',
+      data: inputForm
+    })
+  }
+}

src/views/modules/changes/dimission/DimissionHandoverForm.vue

@@ -1,14 +1,7 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <div>
-    <el-dialog
-      :title="title"
-      :close-on-click-modal="false"
-      v-dialogDrag
-      width="1000px"
-      @close="close"
-      :visible.sync="visible">
       <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
-               label-width="125px" @submit.native.prevent>
+                @submit.native.prevent>
         <el-row  :gutter="15">
           <el-divider content-position="left"><i class="el-icon-document"></i> 人员信息</el-divider>
           <el-col :span="12">
@@ -39,33 +32,96 @@
               </el-card>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门" prop="soName"
+                          :rules="[]"
+            >
+              <el-card shadow="always">
+                {{inputForm.soName?inputForm.soName:'--'}}
+              </el-card>
+            </el-form-item>
+          </el-col>
         </el-row>
+<!--        <el-row  :gutter="15">-->
+<!--          <el-divider content-position="left"><i class="el-icon-document"></i> 交接内容</el-divider>-->
+<!--          <el-col :span="24" v-for="item in contentList">-->
+<!--            <el-form-item>-->
+<!--            <el-card shadow="always">-->
+<!--              {{item}}-->
+<!--            </el-card>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
         <el-row  :gutter="15">
-          <el-divider content-position="left"><i class="el-icon-document"></i> 交接内容</el-divider>
-          <el-col :span="24" v-for="item in contentList">
+          <el-divider content-position="left"><i class="el-icon-document"></i> 离职交接</el-divider>
+          <el-col :span="24" v-if="false">
             <el-form-item>
-            <el-card shadow="always">
-              {{item}}
-            </el-card>
+              <el-button @click="addLine()" type="primary" icon="el-icon-plus">添加分类</el-button>
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-divider content-position="left"><i class="el-icon-document"></i> 会签对象</el-divider>
           <el-col :span="24">
-            <el-form-item label="选择会签对象" prop="approvalHandoverId"
-                          :rules="[{required: true, message: '会签对象不能为空', trigger: 'blur'},{required: true, message: '会签对象不能为空', trigger: 'change'}]"
-            >
-              <RosterSelectForm :limit='1' :value="inputForm.approvalHandoverId" @getValue='(value) => {inputForm.approvalHandoverId=value}'></RosterSelectForm>
+            <el-form-item>
+              <el-table ref="inputTable" :key="tableKey"  :data="inputForm.handoverDTOList" >
+                <el-table-column label="分类"  >
+                  <template slot-scope="scope">
+                    <el-form-item  :prop="'handoverDTOList.'+scope.$index+'.type'"  :rules="[{required: true, message: '分类不能为空', trigger: 'blur'}]">
+<!--                      {{'交接分类'+(scope.$index+1)+'：'}}-->
+                      <el-input :readonly="true" v-model="scope.row.type" placeholder="请输入交接分类" clearable></el-input>
+                    </el-form-item>
+                    <el-table :ref="'inputTable'+scope.$index" :show-header="true"  :data="inputForm.handoverDTOList[scope.$index].handoverDTOList" >
+                      <el-table-column label="交接内容" >
+                        <template slot-scope="scope1">
+                          <el-form-item :prop="'handoverDTOList['+scope.$index+'].handoverDTOList['+scope1.$index+'].content'" :rules="[{required: true, message: '交接内容不能为空', trigger: 'blur'}]">
+                            <el-input :readonly="true" v-model="scope1.row.content" placeholder="请输入交接内容" clearable></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column width="80" prop="" label="操作" v-if="false">
+                        <template scope="scope1">
+                          <el-form-item>
+                            <el-button v-if="inputForm.handoverDTOList[scope.$index].handoverDTOList.length !== 1" size="small" type="danger" @click="delLine(scope.$index,scope1.$index)">删除</el-button>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+
+                  </template>
+                </el-table-column>
+                <el-table-column width="300" label="会签人员">
+                  <template scope="scope">
+                    <el-form-item :prop="'handoverDTOList.'+scope.$index+'.rosterId'" :rules="[
+                    {required: true, message: '人员姓名不能为空', trigger: 'blur'},{required: true, message: '人员姓名不能为空', trigger: 'change'}]">
+<!--                      <RosterSelectForm :limit='1' :value="inputForm.handoverDTOList[scope.$index].rosterId" @getValue='(value) => {$set(inputForm.handoverDTOList[scope.$index],"rosterId", value)}'></RosterSelectForm>-->
+                      <UserSelect :limit='1' :value="inputForm.handoverDTOList[scope.$index].rosterId" @getValue='(value) => {$set(inputForm.handoverDTOList[scope.$index],"rosterId", value)}'></UserSelect>
+                    </el-form-item>
+                  </template>
+                </el-table-column>
+                <el-table-column width="150" label="操作" v-if="false">
+                  <template scope="scope">
+                    <div>
+                      <el-form-item >
+                        <el-button size="small" type="primary" @click="addLine(scope.$index)">增加</el-button>
+                        <el-button size="small" type="danger" @click="delLine(scope.$index,null)">删除</el-button>
+                      </el-form-item>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
             </el-form-item>
           </el-col>
         </el-row>
+<!--        <el-row>-->
+<!--          <el-divider content-position="left"><i class="el-icon-document"></i> 会签对象</el-divider>-->
+<!--          <el-col :span="24">-->
+<!--            <el-form-item label="选择会签对象" prop="approvalHandoverId"-->
+<!--                          :rules="[{required: true, message: '会签对象不能为空', trigger: 'blur'},{required: true, message: '会签对象不能为空', trigger: 'change'}]"-->
+<!--            >-->
+<!--              <RosterSelectForm :limit='1' :value="inputForm.approvalHandoverId" @getValue='(value) => {inputForm.approvalHandoverId=value}'></RosterSelectForm>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
       </el-form>
-      <span slot="footer" class="dialog-footer">
-      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
-<!--      <el-button size="small" type="primary" v-if="method !== 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>-->
-    </span>
-    </el-dialog>
+
   </div>
 </template>
 
@@ -73,7 +129,19 @@
   import DimissionService from '@/api/changes/dimission/DimissionService'
   import RosterService from '@/api/roster/RosterService'
   import RosterSelectForm from '@/views/common/RosterSelectForm'
+  import UserSelect from '@/components/userSelect'
+  import DimissionHandoverService from '@/api/changes/dimission/DimissionHandoverService'
   export default {
+    props: {
+      businessId: {
+        type: String,
+        default: ''
+      },
+      formReadOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
     data () {
       return {
         title: '',
@@ -88,19 +156,42 @@
           rosterBaseDTO: {
             jobNo: '',
             mobile: ''
-          }
+          },
+          cdId: '',
+          handoverDTOList: []
         },
+        tableKey: 0,
         contentList: ['工作交接', '回收工作邮箱', '回收工作电话', '回收系统账号', '回收门禁等权限', '回收笔记本']
       }
     },
+    watch: {
+      'businessId': {
+        handler (newVal) {
+          if (this.businessId) {
+            if (this.businessId !== 'false') {
+              this.init('handover', this.businessId)
+            }
+          } else {
+            this.$nextTick(() => {
+              this.$refs.inputForm.resetFields()
+            })
+          }
+        },
+        immediate: true,
+        deep: false
+      }
+    },
     dimissionService: null,
     rosterService: null,
+    dimissionHandoverService: null,
     created () {
       this.dimissionService = new DimissionService()
       this.rosterService = new RosterService()
+      this.dimissionHandoverService = new DimissionHandoverService()
     },
     components: {
-      RosterSelectForm
+      RosterSelectForm,
+      UserSelect
     },
     methods: {
       init (method, id) {
@@ -113,7 +204,9 @@
           rosterBaseDTO: {
             jobNo: '',
             mobile: ''
-          }
+          },
+          cdId: '',
+          handoverDTOList: []
         }
         this.inputForm.id = id
         if (method === 'handover') {
@@ -127,16 +220,41 @@
           this.dimissionService.queryById(this.inputForm.id).then(({data}) => {
             this.inputForm = this.recover(this.inputForm, data)
             this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
-            this.loading = false
+            this.dimissionHandoverService.queryById(this.inputForm.id).then(({data}) => {
+              if (!this.commonJS.isEmpty(data)) {
+                this.inputForm.handoverDTOList = data
+                this.inputForm.handoverDTOList = JSON.parse(JSON.stringify(this.inputForm.handoverDTOList))
+                this.inputForm.handoverDTOList.forEach(item => {
+                  if (this.commonJS.isEmpty(item.rosterId)) {
+                    item.rosterId = ''
+                  }
+                })
+                this.tableKey++
+              } else {
+                this.dimissionHandoverService.queryInitialize().then(({data}) => {
+                  this.inputForm.handoverDTOList = data
+                  this.inputForm.handoverDTOList = JSON.parse(JSON.stringify(this.inputForm.handoverDTOList))
+                  this.inputForm.handoverDTOList.forEach(item => {
+                    if (this.commonJS.isEmpty(item.rosterId)) {
+                      item.rosterId = ''
+                    }
+                  })
+                  this.tableKey++
+                })
+              }
+              this.loading = false
+            })
           })
         })
       },
       // 表单提交
       doSubmit () {
+        console.log(this.inputForm)
         this.$refs['inputForm'].validate((valid) => {
           if (valid) {
             this.loading = true
-            this.dimissionService.save(this.inputForm).then(({data}) => {
+            this.inputForm.cdId = this.inputForm.id
+            this.dimissionHandoverService.save(this.inputForm).then(({data}) => {
               this.close()
               this.$message.success(data)
               this.$emit('refreshDataList')
@@ -151,6 +269,30 @@
         this.selectData = []
         this.$refs.inputForm.resetFields()
         this.visible = false
+      },
+      delLine (index, childIndex) {
+        if (childIndex !== null && childIndex !== undefined && childIndex !== '') {
+          this.inputForm.handoverDTOList[index].handoverDTOList.splice(childIndex, 1)
+        } else {
+          this.inputForm.handoverDTOList.splice(index, 1)
+        }
+      },
+      addLine (rowIndex) {
+        const newLine = {
+          id: '',
+          cdId: '',
+          parentId: '',
+          type: '',
+          content: '',
+          rosterId: ''
+        }
+        if (!this.commonJS.isEmpty(rowIndex)) {
+          this.inputForm.handoverDTOList[rowIndex].handoverDTOList.push(newLine)
+        } else {
+          this.inputForm.handoverDTOList.push({type: '', rosterId: ''})
+          this.$set(this.inputForm.handoverDTOList[this.inputForm.handoverDTOList.length - 1], 'handoverDTOList', [newLine])
+        }
+        this.tableKey++
       }
     }
   }

src/views/modules/changes/dimission/DimissionHandoverFormDialog.vue

@@ -0,0 +1,318 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+  <div>
+    <el-dialog
+      :title="title"
+      :close-on-click-modal="false"
+      v-dialogDrag
+      width="1000px"
+      @close="close"
+      :visible.sync="visible">
+      <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
+                @submit.native.prevent>
+        <el-row  :gutter="15">
+          <el-divider content-position="left"><i class="el-icon-document"></i> 人员信息</el-divider>
+          <el-col :span="12">
+            <el-form-item label="姓名" prop="rosterBaseDTO.name"
+                          :rules="[]"
+            >
+              <el-card shadow="always">
+                {{inputForm.rosterBaseDTO.name?inputForm.rosterBaseDTO.name:'--'}}
+              </el-card>
+
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工号" prop="rosterBaseDTO.jobNo"
+                          :rules="[]"
+            >
+              <el-card shadow="always">
+                {{inputForm.rosterBaseDTO.jobNo?inputForm.rosterBaseDTO.jobNo:'--'}}
+              </el-card>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="电话" prop="rosterBaseDTO.mobile"
+                          :rules="[]"
+            >
+              <el-card shadow="always">
+                {{inputForm.rosterBaseDTO.mobile?inputForm.rosterBaseDTO.mobile:'--'}}
+              </el-card>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门" prop="soName"
+                          :rules="[]"
+            >
+              <el-card shadow="always">
+                {{inputForm.soName?inputForm.soName:'--'}}
+              </el-card>
+            </el-form-item>
+          </el-col>
+        </el-row>
+<!--        <el-row  :gutter="15">-->
+<!--          <el-divider content-position="left"><i class="el-icon-document"></i> 交接内容</el-divider>-->
+<!--          <el-col :span="24" v-for="item in contentList">-->
+<!--            <el-form-item>-->
+<!--            <el-card shadow="always">-->
+<!--              {{item}}-->
+<!--            </el-card>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
+        <el-row  :gutter="15">
+          <el-divider content-position="left"><i class="el-icon-document"></i> 离职交接</el-divider>
+          <el-col :span="24" v-if="false">
+            <el-form-item>
+              <el-button @click="addLine()" type="primary" icon="el-icon-plus">添加分类</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item>
+              <el-table ref="inputTable" :key="tableKey"  :data="inputForm.handoverDTOList" >
+                <el-table-column label="分类"  >
+                  <template slot-scope="scope">
+                    <el-form-item  :prop="'handoverDTOList.'+scope.$index+'.type'"  :rules="[{required: true, message: '分类不能为空', trigger: 'blur'}]">
+<!--                      {{'交接分类'+(scope.$index+1)+'：'}}-->
+                      <el-input :readonly="true" v-model="scope.row.type" placeholder="请输入交接分类" clearable></el-input>
+                    </el-form-item>
+                    <el-table :ref="'inputTable'+scope.$index" :show-header="true"  :data="inputForm.handoverDTOList[scope.$index].handoverDTOList" >
+                      <el-table-column label="交接内容" >
+                        <template slot-scope="scope1">
+                          <el-form-item :prop="'handoverDTOList['+scope.$index+'].handoverDTOList['+scope1.$index+'].content'" :rules="[{required: true, message: '交接内容不能为空', trigger: 'blur'}]">
+                            <el-input :readonly="true" v-model="scope1.row.content" placeholder="请输入交接内容" clearable></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column width="80" prop="" label="操作" v-if="false">
+                        <template scope="scope1">
+                          <el-form-item>
+                            <el-button v-if="inputForm.handoverDTOList[scope.$index].handoverDTOList.length !== 1" size="small" type="danger" @click="delLine(scope.$index,scope1.$index)">删除</el-button>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+
+                  </template>
+                </el-table-column>
+                <el-table-column width="300" label="会签人员">
+                  <template scope="scope">
+                    <el-form-item :prop="'handoverDTOList.'+scope.$index+'.rosterId'" :rules="[
+                    {required: true, message: '人员姓名不能为空', trigger: 'blur'},{required: true, message: '人员姓名不能为空', trigger: 'change'}]">
+<!--                      <RosterSelectForm :limit='1' :value="inputForm.handoverDTOList[scope.$index].rosterId" @getValue='(value) => {$set(inputForm.handoverDTOList[scope.$index],"rosterId", value)}'></RosterSelectForm>-->
+                      <UserSelect :limit='1' :value="inputForm.handoverDTOList[scope.$index].rosterId" @getValue='(value) => {$set(inputForm.handoverDTOList[scope.$index],"rosterId", value)}'></UserSelect>
+                    </el-form-item>
+                  </template>
+                </el-table-column>
+                <el-table-column width="150" label="操作" v-if="false">
+                  <template scope="scope">
+                    <div>
+                      <el-form-item >
+                        <el-button size="small" type="primary" @click="addLine(scope.$index)">增加</el-button>
+                        <el-button size="small" type="danger" @click="delLine(scope.$index,null)">删除</el-button>
+                      </el-form-item>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-col>
+        </el-row>
+<!--        <el-row>-->
+<!--          <el-divider content-position="left"><i class="el-icon-document"></i> 会签对象</el-divider>-->
+<!--          <el-col :span="24">-->
+<!--            <el-form-item label="选择会签对象" prop="approvalHandoverId"-->
+<!--                          :rules="[{required: true, message: '会签对象不能为空', trigger: 'blur'},{required: true, message: '会签对象不能为空', trigger: 'change'}]"-->
+<!--            >-->
+<!--              <RosterSelectForm :limit='1' :value="inputForm.approvalHandoverId" @getValue='(value) => {inputForm.approvalHandoverId=value}'></RosterSelectForm>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
+      <el-button size="small" type="primary"  @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>交接审批发起</el-button>
+    </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import DimissionService from '@/api/changes/dimission/DimissionService'
+  import RosterService from '@/api/roster/RosterService'
+  import RosterSelectForm from '@/views/common/RosterSelectForm'
+  import UserSelect from '@/components/userSelect'
+  import DimissionHandoverService from '@/api/changes/dimission/DimissionHandoverService'
+  export default {
+    props: {
+      businessId: {
+        type: String,
+        default: ''
+      },
+      formReadOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        title: '',
+        method: '',
+        visible: false,
+        loading: false,
+        inputForm: {
+          id: '',
+          rosterId: '',
+          name: '',
+          approvalHandoverId: '',
+          rosterBaseDTO: {
+            jobNo: '',
+            mobile: ''
+          },
+          cdId: '',
+          handoverDTOList: []
+        },
+        tableKey: 0,
+        contentList: ['工作交接', '回收工作邮箱', '回收工作电话', '回收系统账号', '回收门禁等权限', '回收笔记本']
+      }
+    },
+    watch: {
+      'businessId': {
+        handler (newVal) {
+          if (this.businessId) {
+            if (this.businessId !== 'false') {
+              this.init('edit', this.businessId)
+            }
+          } else {
+            // this.$nextTick(() => {
+            //   this.$refs.inputForm.resetFields()
+            // })
+          }
+        },
+        immediate: true,
+        deep: false
+      }
+    },
+    dimissionService: null,
+    rosterService: null,
+    dimissionHandoverService: null,
+    created () {
+      this.dimissionService = new DimissionService()
+      this.rosterService = new RosterService()
+      this.dimissionHandoverService = new DimissionHandoverService()
+    },
+    components: {
+      RosterSelectForm,
+      UserSelect
+    },
+    methods: {
+      init (method, id) {
+        this.method = method
+        this.inputForm = {
+          id: '',
+          rosterId: '',
+          name: '',
+          approvalHandoverId: '',
+          rosterBaseDTO: {
+            jobNo: '',
+            mobile: ''
+          },
+          cdId: '',
+          handoverDTOList: []
+        }
+        this.inputForm.id = id
+        if (method === 'handover') {
+          this.title = '发起工作交接审批'
+        }
+        this.visible = true
+        this.loading = false
+        this.$nextTick(() => {
+          this.$refs.inputForm.resetFields()
+          this.loading = true
+          this.dimissionService.queryById(this.inputForm.id).then(({data}) => {
+            this.inputForm = this.recover(this.inputForm, data)
+            this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
+            this.dimissionHandoverService.queryById(this.inputForm.id).then(({data}) => {
+              if (!this.commonJS.isEmpty(data)) {
+                this.inputForm.handoverDTOList = data
+                this.inputForm.handoverDTOList = JSON.parse(JSON.stringify(this.inputForm.handoverDTOList))
+                this.inputForm.handoverDTOList.forEach(item => {
+                  if (this.commonJS.isEmpty(item.rosterId)) {
+                    item.rosterId = ''
+                  }
+                })
+                this.tableKey++
+              } else {
+                this.dimissionHandoverService.queryInitialize().then(({data}) => {
+                  this.inputForm.handoverDTOList = data
+                  this.inputForm.handoverDTOList = JSON.parse(JSON.stringify(this.inputForm.handoverDTOList))
+                  this.inputForm.handoverDTOList.forEach(item => {
+                    if (this.commonJS.isEmpty(item.rosterId)) {
+                      item.rosterId = ''
+                    }
+                  })
+                  this.tableKey++
+                })
+              }
+              this.loading = false
+            })
+          })
+        })
+      },
+      // 表单提交
+      doSubmit () {
+        console.log(this.inputForm)
+        this.$refs['inputForm'].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            this.inputForm.cdId = this.inputForm.id
+            this.dimissionHandoverService.save(this.inputForm).then(({data}) => {
+              this.close()
+              this.$message.success(data)
+              this.$emit('refreshDataList')
+              this.loading = false
+            }).catch(() => {
+              this.loading = false
+            })
+          }
+        })
+      },
+      close () {
+        this.selectData = []
+        this.$refs.inputForm.resetFields()
+        this.visible = false
+      },
+      delLine (index, childIndex) {
+        if (childIndex !== null && childIndex !== undefined && childIndex !== '') {
+          this.inputForm.handoverDTOList[index].handoverDTOList.splice(childIndex, 1)
+        } else {
+          this.inputForm.handoverDTOList.splice(index, 1)
+        }
+      },
+      addLine (rowIndex) {
+        const newLine = {
+          id: '',
+          cdId: '',
+          parentId: '',
+          type: '',
+          content: '',
+          rosterId: ''
+        }
+        if (!this.commonJS.isEmpty(rowIndex)) {
+          this.inputForm.handoverDTOList[rowIndex].handoverDTOList.push(newLine)
+        } else {
+          this.inputForm.handoverDTOList.push({type: '', rosterId: ''})
+          this.$set(this.inputForm.handoverDTOList[this.inputForm.handoverDTOList.length - 1], 'handoverDTOList', [newLine])
+        }
+        this.tableKey++
+      }
+    }
+  }
+</script>
+<style scoped>
+  /deep/ .el-card__body {
+    padding: 0px 10px;
+  }
+  /deep/ .el-form-item {
+    margin-bottom: 10px;
+  }
+</style>

src/views/modules/changes/dimission/DimissionList.vue

@@ -103,7 +103,7 @@
                   <el-dropdown-item v-if="hasPermission('changes:dimission:edit')&&scope.row.status === '2'" :command="{method:'removeSure', id:scope.row.id}">
                     取消确认
                   </el-dropdown-item>
-                  <el-dropdown-item v-if="hasPermission('changes:dimission:edit')&&scope.row.status === '2'" :command="{method:'handover', id:scope.row.id}">
+                  <el-dropdown-item v-if="hasPermission('changes:dimission:edit')&&scope.row.status === '2'" :command="{method:'handover', row:scope.row}">
                     发起工作交接审批
                   </el-dropdown-item>
                 </el-dropdown-menu>
@@ -125,14 +125,15 @@
     </div>
     <!-- 弹窗, 新增 / 修改 -->
     <component is="DimissionForm"  ref="dimissionForm" @refreshDataList="refreshList"></component>
-    <component is="DimissionHandoverForm"  ref="dimissionHandoverForm" @refreshDataList="refreshList"></component>
+    <component is="DimissionHandoverFormDialog"  ref="dimissionHandoverFormDialog" @refreshDataList="refreshList"></component>
   </div>
 </template>
 
 <script>
   import DimissionService from '@/api/changes/dimission/DimissionService'
   import DimissionForm from './DimissionForm'
-  import DimissionHandoverForm from './DimissionHandoverForm'
+  import DimissionHandoverFormDialog from './DimissionHandoverFormDialog'
+  import TaskService from '@/api/flowable/TaskService'
   export default {
     data () {
       return {
@@ -152,12 +153,19 @@
       }
     },
     dimissionService: null,
+    taskService: null,
     created () {
       this.dimissionService = new DimissionService()
+      this.taskService = new TaskService()
+    },
+    computed: {
+      userName () {
+        return JSON.parse(localStorage.getItem('user')).name
+      }
     },
     components: {
       DimissionForm,
-      DimissionHandoverForm
+      DimissionHandoverFormDialog
     },
     activated () {
       this.refreshList()
@@ -211,8 +219,30 @@
         this.$refs.dimissionForm.init('sure', id)
       },
       // 发起工作交接审批
-      handover (id) {
-        this.$refs.dimissionHandoverForm.init('handover', id)
+      handover (row) {
+        // this.$refs.dimissionHandoverFormDialog.init('handover', id)
+        // 读取流程表单
+        let title = `发起流程【离职归档交接审批】`
+        let processTitle = `${this.userName} 在 ${this.moment(new Date()).format('YYYY-MM-DD HH:mm')} 发起了 [离职归档交接审批]`
+        this.taskService.getTaskDef({ procDefId: 'Process_1663572940585:6:ea3bdc78-37f5-11ed-84f6-f266559b56cb',
+          businessId: row.id,
+          businessTable: 'dimission_handover_info',
+          status: 'startAndHold'}).then((data) => {
+            this.$router.push({
+              path: '/flowable/task/TaskForm',
+              query: {
+                procDefId: 'Process_1663572940585:6:ea3bdc78-37f5-11ed-84f6-f266559b56cb',
+                procDefKey: 'Process_1663572940585',
+                status: 'startAndHold',
+                title: title,
+                formType: data.data.formType,
+                formUrl: data.data.formUrl,
+                formTitle: processTitle,
+                businessTable: 'dimission_handover_info',
+                businessId: row.id
+              }
+            })
+          })
       },
       // 删除
       del (id) {
@@ -259,7 +289,7 @@
         } else if (command.method === 'removeSure') {
           this.removeSure(command.id)
         } else if (command.method === 'handover') {
-          this.handover(command.id)
+          this.handover(command.row)
         }
       },
       async removeSure (id) {