252 lines
8.6 KiB
Vue
252 lines
8.6 KiB
Vue
<template>
|
|
<div class="process">
|
|
<div class="process_box">
|
|
<process-header :title="'发起流程'"></process-header>
|
|
<div class="procedure">
|
|
<div class="content">
|
|
<span class="base_title">基础信息</span>
|
|
<el-row>
|
|
<report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}"></report-table>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form ref="applicationFormRef" :model="applicationForm" label-width="150px"
|
|
class="label-input-form" size="medium" :rules="applicationFormRule"
|
|
>
|
|
<el-row>
|
|
<el-col :span="9">
|
|
<el-form-item label="申请原因:" prop="name">
|
|
<el-input :disabled="formControl" type="textarea" v-model="applicationForm.name" placeholder="请输入申请原因"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="9" :offset="6">
|
|
<el-form-item label="选择申请权限:" prop="send">
|
|
<el-select :disabled="formControl" v-model="applicationForm.send" placeholder="请选择申请权限">
|
|
<el-option
|
|
v-for="item in PERMISSION"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-row>
|
|
</div>
|
|
<div class="content" v-if="initShow">
|
|
<span class="base_title">审批历史</span>
|
|
<process-approval-history></process-approval-history>
|
|
</div>
|
|
<div class="content">
|
|
<span class="base_title">指派信息</span>
|
|
<el-form ref="assignFormRef" :model="assignForm" label-width="150px"
|
|
:rules="assignFormRules" class="label-input-form" size="medium">
|
|
<el-row>
|
|
<el-col :span="9">
|
|
<el-form-item label="选择一级审批人员:" prop="name1">
|
|
<el-input readonly :disabled="formControl" v-model="assignForm.name1" @click.native="handleCheck('spr1')"
|
|
placeholder="请选择一级审批人员"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="9" >
|
|
<el-form-item label="选择二级审批人员:" prop="name2">
|
|
<el-input readonly :disabled="formControl" v-model="assignForm.name2" @click.native="handleCheck('spr2')"
|
|
placeholder="请选择二级审批人员"></el-input>
|
|
<!-- <el-input v-model="assignForm.name2" placeholder="请选择二级审批人员"></el-input>-->
|
|
<!-- <el-select v-model="assignForm.name2"-->
|
|
<!-- class="icon-auth"-->
|
|
<!-- multiple-->
|
|
<!-- collapse-tags-->
|
|
<!-- @change="changeSelect"-->
|
|
<!-- @visible-change="changeSelect"-->
|
|
<!-- placeholder="请选择">-->
|
|
<!-- <el-checkbox class="check-all" v-model="checked" @change="selectAll">全选</el-checkbox>-->
|
|
<!-- <template v-for="item in userList">-->
|
|
<!-- <el-option :label="item.USNAME" :value="item.USID" :key="item.USID"></el-option>-->
|
|
<!-- </template>-->
|
|
<!-- </el-select>-->
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24" >
|
|
<el-form-item label="说明:">
|
|
<el-input type="textarea" v-model="assignForm.remark" placeholder="请输入说明"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<process-footer
|
|
showCancel
|
|
:show-reset="isShowReset"
|
|
:show-submit="isShowSubmit"
|
|
:submitLoading="isSubmit"
|
|
:resetLoading="resetLoading"
|
|
@reset="handleReset"
|
|
@submit="handleSubmit"
|
|
></process-footer>
|
|
<orgTable :visible.sync="visibleOrgTable" title="人员列表" dialog-model :config="{
|
|
value: orgTableVal,
|
|
valueName: orgTableValName
|
|
}" :workNumFlag="true" :maxSelected="1" @confirm="isTreeOk"></orgTable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import processHeader from '@/components/ProcessHeader'
|
|
import processFooter from '@/components/ProcessFooter'
|
|
import processApprovalHistory from '@/components/ProcessApprovalHistory'
|
|
import reportTable from './components/reportTable'
|
|
import { PERMISSION } from '@/utils/Enum/enum'
|
|
import orgTable from '../../components/OrgTable'
|
|
export default {
|
|
name: 'launch',
|
|
components: {
|
|
processHeader,
|
|
reportTable,
|
|
processFooter,
|
|
processApprovalHistory,
|
|
orgTable
|
|
},
|
|
data () {
|
|
return {
|
|
initShow: false, // 控制审批历史是否显示
|
|
treeType: '',
|
|
orgTableVal: '',
|
|
orgTableValName: '',
|
|
visibleOrgTable: false,
|
|
isSubmit: false,
|
|
resetLoading: false,
|
|
isShowReset: true,
|
|
isShowSubmit: true,
|
|
formControl: false,
|
|
assignForm: {
|
|
name1: '',
|
|
name2: ''
|
|
},
|
|
tableData: [],
|
|
applicationForm: {},
|
|
q: {
|
|
pageSize: 10000,
|
|
pageNo: 1
|
|
},
|
|
PERMISSION,
|
|
applicationFormRule: {
|
|
name: [{
|
|
max: 1000, message: '申请原因最多填写1000字符'
|
|
}],
|
|
send: [{
|
|
required: true,
|
|
message: '请选择申请权限'
|
|
}]
|
|
},
|
|
assignFormRules: {
|
|
name1: [{
|
|
required: true,
|
|
message: '请选择一级审批人员',
|
|
trigger: 'change'
|
|
}],
|
|
name2: [{
|
|
required: true,
|
|
message: '请选择二级审批人员',
|
|
trigger: 'change'
|
|
}],
|
|
remark: [{
|
|
max: 1000, message: '说明最多填写1000字符'
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
// 第一次进入此页面 需要清楚校验
|
|
if (this.$route.query.ids) {
|
|
this.reportList(this.$route.query.ids)
|
|
this.handleReset()
|
|
}
|
|
console.log(this.PERMISSION, 'ddd')
|
|
},
|
|
methods: {
|
|
|
|
handleCheck (name) {
|
|
this.treeType = name
|
|
this.orgTableVal = ''
|
|
this.orgTableValName = ''
|
|
if (name === 'spr1') {
|
|
this.orgTableVal = this.assignForm.name1Id
|
|
this.orgTableValName = this.assignForm.name1
|
|
} else {
|
|
this.orgTableVal = this.assignForm.name2Id
|
|
this.orgTableValName = this.assignForm.name2
|
|
}
|
|
this.visibleOrgTable = true
|
|
},
|
|
// 树点击
|
|
isTreeOk (checkedList) {
|
|
// console.log(checkedList)
|
|
const parts = []
|
|
const partsName = []
|
|
console.log(checkedList, '0009999')
|
|
checkedList.map((item, index) => {
|
|
parts.push(item.userId || item.USID)
|
|
partsName.push(item.uname)
|
|
})
|
|
this.qcrList = checkedList
|
|
if (this.treeType === 'spr1') {
|
|
this.assignForm.name1Id = parts.toString()
|
|
this.assignForm.name1 = partsName.toString()
|
|
} else if (this.treeType === 'spr2') {
|
|
this.assignForm.name2Id = parts.toString()
|
|
this.assignForm.name2 = partsName.toString()
|
|
}
|
|
console.log(this.assignForm.name1Id, this.assignForm.name2Id)
|
|
},
|
|
// 获取表格列表 吧查询到的值传给子组件
|
|
reportList (ids) {
|
|
this.$api.report.reportList({ id: ids }).then(({ data }) => {
|
|
this.tableData = data.records
|
|
})
|
|
},
|
|
handleReset () {
|
|
this.applicationForm = {
|
|
}
|
|
this.assignForm = {
|
|
name1: '',
|
|
name2: ''
|
|
}
|
|
this.$refs.applicationFormRef.clearValidate()
|
|
this.$refs.assignFormRef.clearValidate()
|
|
},
|
|
// 提交
|
|
handleSubmit () {
|
|
this.$refs.assignFormRef.validate(v => {
|
|
this.$refs.applicationFormRef.validate(m => {
|
|
if (v && m) {
|
|
// 过了校验 需要把数据都整合 this.tableData this.applicationForm this.assignForm
|
|
// 表格数据没有不能提交 需要提示
|
|
if (this.tableData.length > 0) {
|
|
this.$message.warning('至少需要选择一条报告数据')
|
|
} else {
|
|
// 调用流程数据
|
|
console.log("发送数据")
|
|
}
|
|
} else {
|
|
this.$message.warning('请检查表单填写完整')
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|