增加流程页面包括样式

This commit is contained in:
zhoulingpo
2023-04-17 15:50:28 +08:00
parent 61e01291fd
commit c8db1229dc
15 changed files with 1901 additions and 619 deletions
+30 -4
View File
@@ -87,9 +87,14 @@
</el-col>
</el-row>
</div>
<el-row class="tag-btn">
<el-button type="primary" size="big" @click="permissionApp">权限申请</el-button>
</el-row>
<div class="table">
<vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'"
@checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
</template>
@@ -208,10 +213,29 @@ export default {
}
},
dialogPreview: false, // 预览
content: ''
content: '',
checkIds: []
}
},
methods: {
selectAllEvent ({ checked }) {
const records = this.$refs.xTable.getCheckboxRecords()
this.checkIds = records.map(item => {
return item.id
})
},
selectChangeEvent ({ checked }) {
const records = this.$refs.xTable.getCheckboxRecords()
this.checkIds = records.map(item => {
return item.id
})
},
permissionApp () {
this.$router.push({
path: '/permission/step1',
query: { id: 'AEHJB8YNJ3', ids: this.checkIds.toString() }
})
},
init () {
this.labelList()
this.reportDateList()
@@ -354,7 +378,9 @@ export default {
color: #262626;
}
}
.tag-btn{
padding: 10px 13px;
}
.tag-search {
padding-top: 9px;
+13 -2
View File
@@ -50,8 +50,7 @@
</el-row>
</div>
<div class="table">
{{tagsForm}}
<vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'">
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
@@ -488,6 +487,18 @@ export default {
}
},
methods: {
selectAllEvent ({ checked }) {
const records = this.$refs.xTable.getCheckboxRecords()
this.checkIds = records.map(item => {
return item.id
})
},
selectChangeEvent ({ checked }) {
const records = this.$refs.xTable.getCheckboxRecords()
this.checkIds = records.map(item => {
return item.id
})
},
/* 权限全选 */
selectAll () {
this.reportF.reportUserIdList = []
@@ -1,211 +0,0 @@
<template>
<div class="box">
<el-divider content-position="left">指派信息</el-divider>
<el-form
ref="processForms"
:model="processForm"
:rules="processFormRules" label-width="230px"
class="label-input-form prc-content-border">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="选择牵头人:" prop="personLiable" class="add-form-item"
:class="{'form-item-disabled': formdisableflag}">
<el-input :maxlength='100'
readonly
@click.native="handleDrafterName('xzqtr')"
v-model="processForm.personLiableName"
:disabled="formdisableflag"
placeholder="请选择牵头人"
clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="选择会签人员:" prop="countersign" class="add-form-item"
:class="{'form-item-disabled': formdisableflag}">
<el-input :maxlength='100'
readonly
@click.native="handleDrafterName('hqry')"
v-model="processForm.countersignName"
:disabled="formdisableflag"
placeholder="请选择会签人员"
clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" v-if="processNode.length > 0" v-for="item in processNode" :key="item.id"
>
<el-col :span="24">
<el-form-item :label="item.remark + ''" prop="" class="add-form-item"
required :class="{'form-item-disabled': formdisableflag, 'add-form-item': true}">
<el-input :maxlength='100'
readonly
v-model="item.userName"
:disabled="true"
:placeholder="'请选择' + item.remark"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="说明:" prop="" class="add-form-item"
:class="{'form-item-disabled': formdisableflag}">
<el-input :maxlength='1000'
type="textarea"
v-model="processForm.remarks"
:disabled="formdisableflag"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入说明"
clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<org-table :visible.sync="visibleOrgTable" title="人员列表" dialog-model :config="{
value: orgTableVal,
valueName: orgTableValName
}" :workNumFlag="true" :maxSelected="100" @confirm="isTreeOk">
</org-table>
</div>
</template>
<script>
export default {
name: "Assign",
props: {
processNode:{
required:true
},
personLiable:{
type:String
},
personLiableName:{
type:String
},
countersign:{},
countersignName:{},
remarks:{}
}
,
data(){
return {
formdisableflag:false,
visibleOrgTable:false,
processForm: {
personLiable: this.personLiable ||'',
personLiableName:this.personLiableName||'',
countersign:this.countersign||'',
countersignName:this.countersignName||''
},
processFormRules: {
procedureName: [
{required: true, type: 'string', message: '流程名称不能为空', trigger: 'change'},
],
personLiable:[
{required:true,message: '牵头人不能为空', trigger: 'change'}
],
countersign:[
{required:true,message: '会签人员不能为空', trigger: 'change'}
]
},
orgTableVal: '',
orgTableValName: '',
}
},
methods:{
handleDrafterName(val) {
// if (this.disabled) return false;
this.treeType = val;
this.orgTableVal = '';
this.orgTableValName = '';
this.sarTask = ''
this.len = 1
if(val==='cyqcdw'){
this.len=100
}
this.visibleOrgTable = true
},
isTreeOk(checkedList) {
// console.log(checkedList)
const parts = []
const partsName = []
const departmentName = []
let department=[]
let partsWorknum=[]
// const departments = []
// if (checkedList.length === 0) {
// this.$message({
// message: '请选择要分享的人!',
// type: 'warning'
// })
// }
checkedList.map((item, index) => {
parts.push(item.userId);
partsName.push(item.uname);
// if(!departments.includes(item.orgId) && item.orgId){
// departments.push(item.orgId)
// }
partsWorknum.push(item.account)
if(!departmentName.includes(item.orgName) && item.orgName){
departmentName.push(item.orgName)
department.push(item.orgId)
}
})
this.qcrList = checkedList
if (this.treeType == 'zrr') {
this.projectList.responsiblePerson =parts.toString()
this.projectList.responsiblePersonName= partsName.toString()
// // this.standardsFrom.drafter = parts.toString()
// this.budget.applicantOrgName = this.budget.applicantOrgName ? departmentName.toString() : departmentName.toString()
this.projectList.responsiblePersonWorkNum = partsWorknum.toString()
// // this.orgTableVal = this.standardsFrom.drafter
} else if (this.treeType == 'zrld') {
this.projectList.responsibleLeadership =parts.toString()
this.projectList.responsibleLeadershipName= partsName.toString()
this.projectList.responsibleLeadershipWorkNum = partsWorknum.toString()
} else if (this.treeType == 'bzzrr') {
this.projectList.standardizationResponsiblePerson =parts.toString()
this.projectList.standardizationResponsiblePersonName= partsName.toString()
this.projectList.standardizationResponsiblePersonWorkNum = partsWorknum.toString()
} else if (this.treeType == 'zyqcdw') {
this.projectList.mainDraftingUnit =department.toString()
this.projectList.mainDraftingUnitName= departmentName.toString()
}
else if (this.treeType == 'cyqcdw') {
this.projectList.unitsInvolvedInDrafting= department.toString()
this.projectList.unitsInvolvedInDraftingName= departmentName.toString()
}else if (this.treeType == 'qtr') {
this.projectList.leader =parts.toString()
this.projectList.leaderName= partsName.toString()
this.projectList.leaderWorkNum = partsWorknum.toString()
}
else if (this.treeType == 'xzqtr') {
this.processForm.personLiable =parts.toString()
this.processForm.personLiableName= partsName.toString()
this.processForm.personLiableWorkNum = partsWorknum.toString()
}
else if (this.treeType == 'hqry') {
this.processForm.countersign =parts.toString()
this.processForm.countersignName= partsName.toString()
}
},
}
}
</script>
<style scoped>
</style>
@@ -5,12 +5,25 @@
:model="examineForm"
:rules="examineFormRules"
class="label-input-form prc-content-border">
<el-row :gutter="24">
<el-col :span="9">
<el-form-item label="选择赋权时间" prop="date"
label-width="132px" class="add-form-item"
:class="{'form-item-disabled': formdisableflag}">
<el-date-picker
v-model="examineForm.date"
type="date"
placeholder="选择赋权时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="审批结果" prop="flag"
label-width="132px" class="add-form-item"
:class="{'form-item-disabled': formdisableflag}">
<el-radio-group :disabled="formdisableflag" v-model="examineForm.flag" style="margin-top: 8px">
<el-radio-group :disabled="formdisableflag" v-model="examineForm.flag" >
<el-radio :label="'1'">同意</el-radio>
<el-radio :label="'2'">不同意</el-radio>
</el-radio-group>
@@ -47,394 +60,61 @@
<!-- </el-col>-->
<!-- </el-row>-->
</el-form>
<el-drawer
title="责任部门"
:wrapperClosable="false"
:visible.sync="visible.visibleTree">
<div class="demo-drawer-content">
<dept-tree
v-if="visible.visibleTree"
deptSelect
allDept
check-enable
treeDivId="deptTreeOrg"
only-checked
:chkboxType="{ 'Y': '', 'N': '' }"
:editable="false"
:checkIdList="checkIdList"
orgType="DEPART"
ref="deptTreeOrg"
@treeOnCheck="handleEOCheck">
</dept-tree>
</div>
<div class="demo-drawer-footer">
<el-button size="small"
class="common-button-primary"
type="primary"
@click="handleTaskBreakDrawerConfirm">确定
</el-button>
<el-button
class="common-button-default"
size="small"
@click="handleTaskBreakDrawerCancel">取消
</el-button>
</div>
</el-drawer>
<el-drawer
title="指派人员"
:wrapperClosable="false"
:visible.sync="visible.visibleLLRTree"
@closed="onLLRTreeClosed">
<div class="demo-drawer-content">
<laws-tree
ref="manageTree"
:zNodes="manageZNodes"
treeDivId="manageTree"
:editable="false"
expandAll
onlyChecked
initExpand
check-enable
personCheck
:chkboxType="{ 'Y': '', 'N': '' }"
:check-id-list="manageId"
@treeOnCheck="dblClick"
></laws-tree>
</div>
<div class="demo-drawer-footer">
<el-button size="small"
class="common-button-primary"
type="primary"
@click="handleLLRTreeConfirm">确定
</el-button>
<el-button size="small"
class="common-button-default"
@click="handleLLRTreeCancel">取消
</el-button>
</div>
</el-drawer>
<upload ref="upload" :disabled="formdisableflag" :uploadPath="uploadPath" :title="'上传文件'" @uploadSuccess="uploadSuccess"/>
</div>
</template>
<script>
import upload from '@/components/upload/upload'
import {
getRoleAndUserByOrgId,
} from 'api/process'
import {mapGetters} from "vuex";
export default {
name: "AuditOperation",
props: ['query'],
components: {
upload
},
computed: {
...mapGetters(['userInfo']),
},
data() {
return {
examineForm: {
planReasonFile: '',
oldName:'',
flag: '1',
},
examineFormRules: {
oldName: [
{required: true, message: '添加指派不能为空', trigger: 'change'}
],
flag: [
{required: true, message: '审核结果不能为空', trigger: 'change'}
],
approvalOpinion: [
{type: 'string', max: 1000, message: '审批意见不能超过1000个字符', trigger: 'blur'}
],
},
formdisableflag: false,
uploadPath: 'api/att/attFile/upload',//上传文件的接口
uploadName: '', //当前表单对应的文件名称
isTaskReception: false, //是否显示指派人员以及确认任务
isDesignated: false, //是否显示指派人员
isInitiation: false, //是的显示指派部门
visible: {
visibleTree: false,
visibleLLRTree: false,
},
checkIdList: [],
LLRTreeChecked: [],
FGLLRRoleId: [],
manageZNodes: [],
manageId: [],
userList: [],
isApproval: false,
}
},
created() {
if (this.query) {
if (this.query.type == '1' ||
!this.query.taskDefinitionKey ||
this.query.taskDefinitionKey == 'null' ||
this.query.taskDefinitionKey == 'fqrxg' ||
this.query.taskDefinitionKey == 'bzfggcsfq' ||
this.query.taskDefinitionKey == 'bzfggcsfq-1' ||
this.query.taskDefinitionKey == 'bzfggcsfq-2' ||
this.query.taskDefinitionKey == 'bzfggcsfq-3') {
this.isInitiation = true
} else {
this.isInitiation = false
}
if (this.query.taskDefinitionKey == 'bzhskzshlc' ||
this.query.taskDefinitionKey == 'bzhskzsh-1' ||
this.query.taskDefinitionKey == 'bzhskzsh-2' ||
this.query.taskDefinitionKey == 'bzhskzsh-3' ||
this.query.taskDefinitionKey == 'bzhskzsh' ||
this.query.taskDefinitionKey == 'sjbskzsh' ||
this.query.taskDefinitionKey == 'cpfxzxkzsh' ||
this.query.taskDefinitionKey == 'bzhsszpz' ||
this.query.taskDefinitionKey == 'sjbsszpz' ||
this.query.taskDefinitionKey == 'cpfxzxkzpz') {
this.isApproval = true
} else {
this.isApproval = false
}
if (this.query.taskDefinitionKey == 'bzhsszqr' ||
this.query.taskDefinitionKey == 'sjbsszqr' ||
this.query.taskDefinitionKey == 'cpfxzxszqr') {
this.isTaskReception = true
} else {
this.isTaskReception = false
}
}
if (this.query.isViewDetails && this.query.isViewDetails == 1) {
this.examineForm = this.query
this.formdisableflag = true
if (this.isTaskReception && this.query.flag == '1'){
this.isDesignated = true
}
}
this.getRoleAndUserByOrgId()
},
methods: {
getData(data){
this.examineForm.oldName = data.oldName
this.examineForm.userName = data.userName
this.examineForm.orgId = data.orgId
this.examineForm.userId = data.userId
},
/** 上传文件的回调
* 获取接口中的数据进行反显
* */
clickButtonToUpload(current) {
this.$refs.upload.importModalshowflagtemp = true
this.uploadName = current
if (this.examineForm[current]) {
this.$http.get('att/attFile/getMultiFileInfos', {
fileIds: this.examineForm[current]
}, {
_this: this
}, res => {
this.$refs.upload.ids = []
res.data.map(item => {
item.name = item.oldFileName
this.$refs.upload.ids.push(item.id)
})
this.$refs.upload.defaultFileList = res.data || []
}, e => {
})
} else {
this.$refs.upload.defaultFileList = []
}
},
export default {
name: 'AuditOperation',
props: ['query'],
/** 上传文件的回调 */
uploadSuccess(data) {
/** 赋值给当前对应的表单文件 */
this.examineForm[this.uploadName] = data
this.examineForm = {...this.examineForm}
},
data () {
return {
examineForm: {
planReasonFile: '',
oldName: '',
flag: '1'
},
examineFormRules: {
oldName: [
{ required: true, message: '添加指派不能为空', trigger: 'change' }
],
flag: [
{ required: true, message: '审核结果不能为空', trigger: 'change' }
],
approvalOpinion: [
{ type: 'string', max: 1000, message: '审批意见不能超过1000个字符', trigger: 'blur' }
]
},
formdisableflag: false
/** 审核时通过或不通过的事件;显示 */
flagchange(value) {
this.isDesignated = value == 1 ? true : false
if (this.isDesignated) {
/** 必填或者部必填 */
this.examineFormRules.userName = [
{required: true, message: '指派人员不能为空', trigger: 'change'}
]
} else {
this.examineFormRules.userName = [
{required: false, message: '指派人员不能为空', trigger: 'change'}
]
}
},
/** 在选择完责任部门点击确定的事件 */
handleTaskBreakDrawerConfirm() {
if (this.EOCheckList.length) {
this.handleQueryPersonByDept()
} else {
this.$message.warning('请选择责任部门')
}
},
/** 在选择完责任部门点击取消的事件 */
handleTaskBreakDrawerCancel() {
this.visible.visibleTree = false
this.EOCheckList = []
this.EOCheckId = []
},
/** 在选择完责任部门点击确定的事件
* 调用此方法获取到当前的选中数据的id;通过id去查找人员进行反显
* */
async handleQueryPersonByDept() {
const parts = []
const partsName = []
this.EOCheckList.map(item => {
parts.push(item.id)
if (item.oldname) {
partsName.push(item.oldname)
} else {
partsName.push(item.name)
}
})
this.examineForm.oldName = partsName.join(',')
this.examineForm.orgId = parts.join(',')
const orgIds = parts.join(',')
const res = await getRoleAndUserByOrgId({
orgId: orgIds,
pageNo: 1,
pageSize: 10000
})
const userId = []
const userName = []
/** 遍历截取所长和部长 */
let nodeUserInfoEOs = []
for (let i = 0; i < parts.length; i++) {
res.data.map(person => {
if (person.pOrgId === parts[i]) {
if (person.roleName.slice(person.roleName.length - 2, person.roleName.length) == '所长' ||
person.roleName.slice(person.roleName.length - 2, person.roleName.length) == '部长') {
console.log(person);
if (person.roleName == '标准化所所长') {
nodeUserInfoEOs.push({
"nodeId": "zijsglbbzqr", "parentFlow": "zcfgrklc", "userId": person.userId,
})
} else if (person.roleName == '产品分析中心所长') {
nodeUserInfoEOs.push({
"nodeId": "zicpfxzxszqr", "parentFlow": "zcfgrklc", "userId": person.userId,
})
} else if (person.roleName == '设计部所所长') {
nodeUserInfoEOs.push({
"nodeId": "zisjbsszqr", "parentFlow": "zcfgrklc", "userId": person.userId,
})
}
userId.push(person.userId)
userName.push(person.userName)
}
}
})
}
this.examineForm.userName = userName.join(',')
this.examineForm.userId = userId.join(',')
this.examineForm.nodeUserInfoEOs = nodeUserInfoEOs
this.examineForm = {...this.examineForm}
this.visible.visibleTree = false
},
/** 点击选择部门的弹框 */
handleVisibleDept(id) {
/** 如果有数据进行反显 */
this.checkIdList = id === undefined ? [] : id.split(',')
this.visible.visibleTree = true
},
/** 获取选中部门的数据 进行赋值*/
handleEOCheck(checkedList) {
this.EOCheckList = checkedList
},
/** 关闭指派人员的弹框*/
onLLRTreeClosed() {
this.LLRTreeChecked = []
},
/** 关闭指派人员的弹框*/
handleLLRTreeCancel() {
this.visible.visibleLLRTree = false
},
/** 在提交表单的校验 通过继续执行 */
submit() {
this.isSubmit = false
this.$refs['examineForm'].validate((valid) => {
if (valid) {
this.isSubmit = true
} else {
this.$message.warning('请检查表单是否填写正确')
}
})
},
/** 打开选择人员的弹框 */
handleVisiblePersonnel(id) {
/** 有数据时赋值 */
this.manageId = id === undefined ? [] : id.split(',')
this.visible.visibleLLRTree = true
},
/** 获取当前选中的人员的数据 */
dblClick(checkedList) {
this.userList = checkedList
},
/** 点击选择人员弹框的确认按钮 进行遍历选中数据反显表单*/
handleLLRTreeConfirm() {
if (this.userList.length > 0) {
let parts = []
let partsName = []
this.userList.map(item => {
parts.push(item.id)
if (item.oldname) {
partsName.push(item.oldname)
} else {
partsName.push(item.name)
}
})
this.examineForm.userName = partsName.join(',')
this.examineForm.userId = parts.join(',')
this.examineForm = {...this.examineForm}
this.visible.visibleLLRTree = false
} else {
this.$message.warning('请选择指派人员')
}
},
/** 通过当前登录人的orgId去获取这个部门下面的人员*/
getRoleAndUserByOrgId() {
getRoleAndUserByOrgId({
orgId: this.userInfo.orgId,
}).then(res => {
const manageIdList = []
const manageNameList = []
const zNodes = JSON.parse(JSON.stringify(res.data))
res.data.map(item => {
manageIdList.push(item.userId)
manageNameList.push(item.userName)
})
/** 重组数据*/
zNodes.map(item => {
item.name = item.userName
item.id = item.userId
item.icon = 'static/images/user.png'
item.iconSkin = 'org-user'
item.pId = item.orgId
})
this.manageZNodes = zNodes
})
},
},
}
},
created () {
// 判断穿过来的query里的参数 是不是查看
if (this.query.isViewDetails && this.query.isViewDetails === 1) {
this.examineForm = this.query
this.formdisableflag = true
}
},
methods: {
/** 在提交表单的校验 通过继续执行 */
submit () {
this.isSubmit = false
this.$refs.examineForm.validate((valid) => {
if (valid) {
this.isSubmit = true
} else {
this.$message.warning('请检查表单是否填写正确')
}
})
}
}
}
</script>
<style scoped>
+139
View File
@@ -0,0 +1,139 @@
<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="form" :model="applicationForm" label-width="150px"
class="label-input-form" size="medium" :rules="applicationFormRule"
:disabled="formControl">
<el-row>
<el-col :span="9">
<el-form-item label="申请原因:" prop="name">
<el-input type="textarea" v-model="applicationForm.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="9" :offset="6">
<el-form-item label="选择申请权限:" prop="send">
<el-select 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">
<span class="base_title">审批历史</span>
<process-approval-history></process-approval-history>
</div>
<div class="content">
<span class="base_title">审核信息</span>
<audit-operation></audit-operation>
</div>
</div>
<process-footer
showCancel
:show-transfer="isShowTran"
:show-submit="isShowSubmit"
:submitLoading="isSubmit"
:TransferLoading="tranLoading"
@reset="handleReset"
@submit="handleSubmit"
></process-footer>
</div>
</div>
</template>
<script>
import processHeader from '@/components/ProcessHeader'
import processFooter from '@/components/ProcessFooter'
import processApprovalHistory from '@/components/ProcessApprovalHistory'
import auditOperation from './components/AuditOperation'
import reportTable from './components/reportTable'
import { PERMISSION } from '@/utils/Enum/enum'
export default {
name: 'launch',
components: {
processHeader,
reportTable,
processFooter,
processApprovalHistory,
auditOperation
},
data () {
return {
isSubmit: false,
tranLoading: false,
isShowTran: true,
isShowSubmit: true,
formControl: false,
assignForm: {},
tableData: [],
applicationForm: {},
q: {
pageSize: 10000,
pageNo: 1
},
PERMISSION,
applicationFormRule: {
name: [{
max: 1000, message: '申请原因最多填写1000字符'
}],
send: [{
required: true,
message: '请选择申请权限'
}]
},
assignFormRules: {
name1: [{
required: true,
message: '请选择一级审批人员'
}],
name2: [{
required: true,
message: '请选择二级审批人员'
}],
remark: [{
max: 1000, message: '说明最多填写1000字符'
}]
}
}
},
created () {
if (this.$route.query.ids) {
this.reportList(this.$route.query.ids)
}
console.log(this.PERMISSION, 'ddd')
},
methods: {
// 获取表格列表 吧查询到的值传给子组件
reportList (ids) {
this.$api.report.reportList({ id: ids }).then(({ data }) => {
this.tableData = data.records
})
},
handleReset () {
this.applicationForm = {}
this.assignForm = {}
}
}
}
</script>
<style scoped>
</style>
+81 -18
View File
@@ -6,22 +6,23 @@
<div class="content">
<span class="base_title">基础信息</span>
<el-row>
<report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}"> </report-table>
<report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}"></report-table>
</el-row>
<el-row>
<el-form ref="form" :model="applicationForm" label-width="150px"
class="label-input-form" size="medium">
class="label-input-form" size="medium" :rules="applicationFormRule"
:disabled="formControl">
<el-row>
<el-col :span="9">
<el-form-item label="申请原因">
<el-form-item label="申请原因:" prop="name">
<el-input type="textarea" v-model="applicationForm.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="9" :offset="6">
<el-form-item label="选择申请权限">
<el-select v-model="value" placeholder="请选择">
<el-form-item label="选择申请权限:" prop="send">
<el-select v-model="applicationForm.send" placeholder="">
<el-option
v-for="item in options"
v-for="item in PERMISSION"
:key="item.value"
:label="item.label"
:value="item.value">
@@ -33,62 +34,124 @@
</el-form>
</el-row>
</div>
<div class="content">
<span class="base_title">审批历史</span>
<process-approval-history></process-approval-history>
</div>
<div class="content">
<span class="base_title">指派信息</span>
<el-form ref="form" :model="assignForm" label-width="150px"
class="label-input-form" size="medium">
:rules="assignFormRules" class="label-input-form" size="medium">
<el-row>
<el-col :span="9">
<el-form-item label="活动名称">
<el-input v-model="assignForm.name"></el-input>
<el-form-item label="选择一级审批人员:" prop="name1">
<el-input v-model="assignForm.name1"></el-input>
</el-form-item>
</el-col>
<el-col :span="9" :offset="6">
<el-form-item label="活动名称">
<el-input v-model="assignForm.name"></el-input>
</el-row>
<el-row>
<el-col :span="9" >
<el-form-item label="选择二级审批人员:" prop="name2">
<el-input v-model="assignForm.name2"></el-input>
</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"></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>
</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'
export default {
name: 'launch',
components: {
processHeader,
reportTable
reportTable,
processFooter,
processApprovalHistory
},
data () {
return {
isSubmit: false,
resetLoading: false,
isShowReset: true,
isShowSubmit: true,
formControl: false,
assignForm: {},
tableData: [],
applicationForm: {},
q: {
pageSize: 10000,
pageNo: 1
},
PERMISSION,
applicationFormRule: {
name: [{
max: 1000, message: '申请原因最多填写1000字符'
}],
send: [{
required: true,
message: '请选择申请权限'
}]
},
assignFormRules: {
name1: [{
required: true,
message: '请选择一级审批人员'
}],
name2: [{
required: true,
message: '请选择二级审批人员'
}],
remark: [{
max: 1000, message: '说明最多填写1000字符'
}]
}
}
},
created () {
this.reportList()
if (this.$route.query.ids) {
this.reportList(this.$route.query.ids)
}
console.log(this.PERMISSION, 'ddd')
},
methods: {
// 获取表格列表 吧查询到的值传给子组件
reportList () {
this.$api.report.reportList(this.q).then(({ data }) => {
reportList (ids) {
this.$api.report.reportList({ id: ids }).then(({ data }) => {
this.tableData = data.records
})
},
handleReset () {
this.applicationForm = {}
this.assignForm = {}
}
}
}
</script>