增加添加弹窗

This commit is contained in:
zhoulingpo
2023-04-18 14:24:11 +08:00
parent f87f00b2e7
commit bc6177ea3f
7 changed files with 588 additions and 214 deletions
+106 -21
View File
@@ -9,18 +9,18 @@
<report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}"></report-table>
</el-row>
<el-row>
<el-form ref="form" :model="applicationForm" label-width="150px"
<el-form ref="applicationFormRef" :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" placeholder="请输入申请原因"></el-input>
<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 v-model="applicationForm.send" placeholder="请选择申请权限">
<el-select :disabled="formControl" v-model="applicationForm.send" placeholder="请选择申请权限">
<el-option
v-for="item in PERMISSION"
:key="item.value"
@@ -34,18 +34,19 @@
</el-form>
</el-row>
</div>
<div class="content">
<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="form" :model="assignForm" label-width="150px"
<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 v-model="assignForm.name1"></el-input>
<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>
@@ -53,7 +54,21 @@
<el-row>
<el-col :span="9" >
<el-form-item label="选择二级审批人员:" prop="name2">
<el-input v-model="assignForm.name2"></el-input>
<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>
@@ -76,9 +91,13 @@
@reset="handleReset"
@submit="handleSubmit"
></process-footer>
</div>
</div>
</template>
<orgTable :visible.sync="visibleOrgTable" title="人员列表" dialog-model :config="{
value: orgTableVal,
valueName: orgTableValName
}" :workNumFlag="true" :maxSelected="100" @confirm="isTreeOk"></orgTable>
</div>
</div>
</template>
<script>
import processHeader from '@/components/ProcessHeader'
@@ -86,23 +105,32 @@ 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
processApprovalHistory,
orgTable
},
data () {
return {
initShow: false, // 控制审批历史是否显示
treeType: '',
orgTableVal: '',
orgTableValName: '',
visibleOrgTable: false,
isSubmit: false,
resetLoading: false,
isShowReset: true,
isShowSubmit: true,
formControl: false,
assignForm: {},
assignForm: {
name1: '',
name2: ''
},
tableData: [],
applicationForm: {},
q: {
@@ -122,11 +150,13 @@ export default {
assignFormRules: {
name1: [{
required: true,
message: '请选择一级审批人员'
message: '请选择一级审批人员',
trigger: 'change'
}],
name2: [{
required: true,
message: '请选择二级审批人员'
message: '请选择二级审批人员',
trigger: 'change'
}],
remark: [{
max: 1000, message: '说明最多填写1000字符'
@@ -135,12 +165,48 @@ export default {
}
},
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 }) => {
@@ -148,13 +214,32 @@ export default {
})
},
handleReset () {
this.applicationForm = {}
this.assignForm = {}
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
} else {
this.$message.warning('请检查表单填写完整')
}
})
})
}
}
}
</script>
<style scoped>
<style scoped>
</style>
</style>