增加添加弹窗

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
+59 -164
View File
@@ -15,58 +15,22 @@
:model="searchForm"
inline
class="label-input-form"
label-width="33px"
label-width="55px"
@keyup.enter.native="handleSearch">
<el-row :gutter="24">
<el-col :xl="6" :lg="8">
<el-form-item label="部门" class="search-item">
<el-input v-model="searchForm.orgId" v-show="false"/>
<el-popover
placement="bottom"
popper-class="user-dept-popper"
trigger="click"
:value="false"
>
<el-input
@mouseenter.native="handleMouseEnter"
@mouseleave.native="handleMouseLeave"
slot="reference"
v-model="searchForm.orgName"
placeholder="根据部门查询"
readonly
clearable
id="orgInput">
<i slot="suffix"
class="org el-icon-circle-close"
@click.stop="handleOrgDel"
v-show="visibleOrgClearBtn"></i>
</el-input>
<div class="api">
<laws-tree
:zNodes="orgZNodes"
ref="orgTree"
:editable="false"
treeDivId="orgTreeOrgTable"
deptSelect
@treeDblClick="handleSearchOrgChecked"
style="width: 200px;height: 400px;overflow: auto;">
</laws-tree>
</div>
</el-popover>
</el-form-item>
</el-col>
<el-col :xl="6" :lg="8">
<el-form-item label="姓名" class="search-item">
<!-- <el-input-->
<!-- v-model="searchForm.uname"-->
<!-- placeholder="根据姓名查询"-->
<!-- clearable></el-input>-->
<search-input :placeholder="'根据姓名查询'" class="search-item" v-model="searchForm.uname"/>
<el-input :placeholder="'根据姓名查询'" class="search-item" v-model="searchForm.uname"/>
</el-form-item>
</el-col>
<el-col :xl="6" :lg="8">
<el-form-item label="工号" class="search-item">
<search-input :placeholder="'根据工号查询'" class="search-item" v-model="searchForm.workNum"/>
<el-input :placeholder="'根据工号查询'" class="search-item" v-model="searchForm.workNum"/>
</el-form-item>
</el-col>
<el-col :xl="6" :lg="24">
@@ -123,7 +87,7 @@
<el-table-column
label="工号"
width="120"
prop="workNum"
prop="ACCOUNT"
align="center"
show-overflow-tooltip>
</el-table-column>
@@ -135,7 +99,7 @@
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="email"
prop="EMAIL"
label="邮箱"
align="center"
show-overflow-tooltip>
@@ -158,15 +122,10 @@
label="部门"
align="center"
show-overflow-tooltip>
<template #default="{ row }">{{ row.departmentName || row.departName || row.orgName }}
<template #default="{ row }">{{ row.departmentName || row.DEPATMENT || row.orgName }}
</template>
</el-table-column>
<el-table-column
label="组织管理"
prop="workingGroupName"
align="center"
show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
<pagination
@@ -373,7 +332,7 @@ export default {
tableChecked: null,
tableDataSelectedList: [],
page: 1,
pageSize: this.configContent,
pageSize: 10,
total: 0,
checkedList: [],
loading: {
@@ -393,35 +352,6 @@ export default {
}
},
methods: {
// 查询二级菜单
selectMenu () {
const url = 'sys/org/getTree'
const parmas = {
// sorDivide: 'OUT',
// cancel: 0 // 作废 1 不作废 0
}
this.menuTreeLoading = true
this.$http.get(url, parmas, {
_this: this
}, res => {
this.menuTreeLoading = false
const treeNode = []
res.data.map((item, index) => {
const treeItem = {}
for (const key in item) {
if (key === 'orgName') {
treeItem.name = item[key]
} else {
treeItem[key] = item[key]
}
}
treeNode[OrgTable] = treeItem
})
// console.log(treeNode)
this.zNodesTree = treeNode
}, e => {
})
},
/** 获取选择体系的数据 进行赋值 */
handleEOCheck (checkedList) {
@@ -441,9 +371,7 @@ export default {
console.log(className, 'pppppiiiii')
this.EOCheckList = [treeNode]
},
handleClick (tab) {
tab.name == 'first' ? this.getRoleAndUserByOrgIdPage() : this.selectMenu()
},
handleClose () {
this.searchForm = {
orgId: '',
@@ -462,35 +390,6 @@ export default {
handleCancel () {
this.isVisible = false
},
getUser (ids) {
this.$http.postData('sys/user/UserViewPage', {
pageSize: 1000,
orgIds: ids
}, {
_this: this,
loading: 'loadData'
},
res => {
if (res.ok) {
this.EOCheckList = res.data.list
const orgName = []
this.EOCheckList.forEach(item => {
if (orgName.indexOf(item.orgName) == -1) {
orgName.push(item.orgName)
} else {
// delete item['orgName']
}
item.uname = item.uname + '_' + item.account + '_' + (item.departmentName ? item.departmentName : item.orgName)
item.USNAME = item.USNAME + '_' + item.account + '_' + (item.departmentName ? item.departmentName : item.orgName)
})
console.log(this.EOCheckList)
// 重新整合数组
this.$emit('confirm', this.EOCheckList)
}
}, e => {
})
},
handleConfirm () {
if (this.dialogModel) {
if (this.maxSelected && this.maxSelected > -1 && this.checkedList.length > this.maxSelected) {
@@ -499,29 +398,20 @@ export default {
} else {
const checkedIdList = []
if (this.activeName == 'second') {
console.log(this.EOCheckList, 'popopop')
const ids = []
this.EOCheckList.forEach(item => {
ids.push(item.id)
})
this.getUser(ids.join(','))
// 如果是按照部门 就渲染
} else {
this.checkedList.map(chkItem => {
checkedIdList.push(chkItem.usid || chkItem.USID || chkItem.id)
console.log(chkItem.uname, chkItem)
if (chkItem.uname) {
chkItem.uname = chkItem.uname + '_' + chkItem.account
chkItem.USNAME = chkItem.USNAME + '_' + chkItem.account
chkItem.orgName = chkItem.departmentName ? chkItem.departmentName : chkItem.orgName
} else if (!chkItem.uname && chkItem.USNAME) {
chkItem.uname = chkItem.USNAME
chkItem.USNAME = chkItem.USNAME
}
})
this.$emit('confirm', this.checkedList, checkedIdList)
}
this.checkedList.map(chkItem => {
checkedIdList.push(chkItem.usid || chkItem.USID || chkItem.id)
console.log(chkItem.uname, chkItem)
if (chkItem.uname) {
chkItem.uname = chkItem.uname + '_' + chkItem.account
chkItem.USNAME = chkItem.USNAME + '_' + chkItem.account
chkItem.orgName = chkItem.departmentName ? chkItem.departmentName : chkItem.orgName
} else if (!chkItem.uname && chkItem.USNAME) {
chkItem.uname = chkItem.USNAME
chkItem.USNAME = chkItem.USNAME
}
})
this.$emit('confirm', this.checkedList, checkedIdList)
this.isVisible = false
}
} else {
@@ -618,15 +508,10 @@ export default {
this.searchForm.orgId = this.orgId
}
}
const url = ''
const param = {
page: this.page,
pageNo: this.page,
pageSize: this.pageSize,
...this.searchForm,
roleName: this.roleName,
notUserId: this.notUserId.length > 0 ? this.notUserId.toString() : null,
idList: this.idList.length > 0 ? this.idList.toString() : null,
disableFlag: 0
...this.searchForm
}
// let this.notUserId.length > 0 ? this.notUserId.toString() : null
// getRoleAndUserByOrgIdPage(
@@ -635,8 +520,7 @@ export default {
this.loading.loadData = false
this.loading.searching = false
if (res.ok) {
this.getOrg()
this.total = res.data.count
this.total = res.data.total
this.tableData = res.data.records
const checkedRow = []
this.tableData.map(dataItem => {
@@ -857,32 +741,14 @@ export default {
}
if (val) {
if (this.config.value && this.config.value !== '') {
let idListDepartment = []
let nameListDepartment = []
let idRoleList = []
let nameRoleList = []
const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
if (this.config.valueDepartment) {
idListDepartment = this.config.valueDepartment instanceof Array ? this.config.valueDepartment : (this.config.valueDepartment === '' ? [] : this.config.valueDepartment.split(','))
}
if (this.config.valueNameDepartment) {
nameListDepartment = this.config.valueNameDepartment instanceof Array ? this.config.valueNameDepartment.split(',') : (this.config.valueNameDepartment === '' ? [] : this.config.valueNameDepartment.split(','))
}
if (this.config.valueRole) {
idRoleList = this.config.valueRole instanceof Array ? this.config.valueRole : (this.config.valueRole === '' ? [] : this.config.valueRole.split(','))
nameRoleList = this.config.valueNameRole instanceof Array ? this.config.valueNameRole.split(',') : (this.config.valueNameRole === '' ? [] : this.config.valueNameRole.split(','))
}
this.checkedIdList = idList
const checkedList = []
idList.map((id, index) => {
checkedList.push({
USID: id,
USNAME: nameList[OrgTable],
orgId: idListDepartment[OrgTable],
orgName: nameListDepartment[OrgTable],
roleId: idRoleList[OrgTable],
roleName: nameRoleList[OrgTable]
USNAME: nameList[index]
})
})
@@ -902,7 +768,6 @@ export default {
this.searchForm.orgName = ''
}
this.getRoleAndUserByOrgIdPage()
this.selectMenu()
}
},
isVisible (val) {
@@ -937,7 +802,7 @@ export default {
idList.map((id, index) => {
checkedList.push({
USID: id,
USNAME: nameList[OrgTable]
USNAME: nameList[index]
})
})
this.checkedList = checkedList
@@ -1023,4 +888,34 @@ export default {
}
}
}
.search-new {
//width: 100%;
background: #FFF;
padding: 10px 10px 0;
.el-button + .el-button {
margin-left: 10px;
}
.el-form--inline .el-form-item {
display: flex;
margin-right: 0;
input.el-input__inner {
width: 100%;
}
.el-form-item__content {
//width: 100%;
flex: 1;
.el-select,
.el-range-editor {
width: 100% !important;
}
}
}
}
</style>
+1 -27
View File
@@ -122,7 +122,7 @@
</template>
<script>
import ProcessChooseTree from './ProcessChooseTree'
import { mapGetters } from 'vuex'
export default {
name: 'ProcessFooter',
@@ -230,9 +230,6 @@ export default {
type: String
}
},
components: {
ProcessChooseTree
},
data () {
return {
isSubmit: false,
@@ -243,29 +240,6 @@ export default {
}
},
methods: {
/**
* @description: 委托
* @date: 2020-12-14 15:51:10
* @auth: chenxiaoxi
*/
changeAssigneeNew (treeNode) {
changeAssigneeNew({
taskId: this.$store.getters.getHandleInfo.taskIds, // 任务id
assignee: treeNode.id, // 被委托人
userId: this.$store.getters.userInfo.userId, // 委托人
pId: this.$store.getters.getHandleInfo.prcId // 流程实例
}).then(res => {
if (res.success) {
this.$message.success('委托成功')
setTimeout(() => {
this.$router.push('/processCenter')
}, 100)
this.visibleTree = false
} else {
this.$message.warning(res.message)
}
})
},
handleOver () {
this.$emit('over')
},
@@ -111,8 +111,10 @@ export default {
this.$refs.examineForm.validate((valid) => {
if (valid) {
this.isSubmit = true
return true
} else {
this.$message.warning('请检查表单是否填写正确')
return false
}
})
}
@@ -0,0 +1,401 @@
<template>
<el-dialog
title="添加报告"
:visible.sync="dialogVisible"
width="50%"
:before-close="handleClose">
<div class="tag-search">
<el-row>
<el-col :span="24">
<div class="tag-item">
<label class="tag-title">报告年份</label>
<el-select v-model="q.year" multiple collapse-tags placeholder="请选择报告年份">
<template v-for="item in yearList">
<el-option :label="item" :value="item" :key="item"></el-option>
</template>
</el-select>
</div>
</el-col>
<el-col :span="24">
<div class="tag-item">
<el-tooltip :content="tagData[1].name" placement="top">
<label class="tag-title">{{ tagData[1].name }}</label>
</el-tooltip>
<div class="tag-show" :class="{'active': tagData[1].tagShow}">
<el-checkbox :indeterminate="tagData[1].isIndeterminate" v-model="tagData[1].checkAll"
@change="(val) => handleCheckAllChange(val, 1)">全部
</el-checkbox>
<el-checkbox-group v-model="q.labelOneId"
@change="(val) => handleCheckedTagsChange(val, 1)">
<template v-for="item in tagData[1].tags">
<el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
</template>
</el-checkbox-group>
<i @click="switchTagShow(1)"
:class="{'el-icon-arrow-down': !tagData[1].tagShow, 'el-icon-arrow-up': tagData[1].tagShow}"></i>
</div>
</div>
</el-col>
<el-col :span="24">
<div class="tag-item">
<el-tooltip :content="tagData[2].name" placement="top">
<label class="tag-title">{{ tagData[2].name }}</label>
</el-tooltip>
<div class="tag-show" :class="{'active': tagData[2].tagShow}">
<el-checkbox :indeterminate="tagData[2].isIndeterminate" v-model="tagData[2].checkAll"
@change="(val) => handleCheckAllChange(val, 2)">全部
</el-checkbox>
<el-checkbox-group v-model="q.labelTwoId"
@change="(val) => handleCheckedTagsChange(val, 2)">
<template v-for="item in tagData[2].tags">
<el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
</template>
</el-checkbox-group>
<i @click="switchTagShow(2)"
:class="{'el-icon-arrow-down': !tagData[2].tagShow, 'el-icon-arrow-up': tagData[2].tagShow}"></i>
</div>
</div>
</el-col>
<el-col :span="24">
<div class="tag-item">
<el-tooltip :content="tagData[3].name" placement="top">
<label class="tag-title">{{ tagData[3].name }}</label>
</el-tooltip>
<div class="tag-show" :class="{'active': tagData[3].tagShow}">
<el-checkbox :indeterminate="tagData[3].isIndeterminate" v-model="tagData[3].checkAll"
@change="(val) => handleCheckAllChange(val, 3)">全部
</el-checkbox>
<el-checkbox-group v-model="q.labelThreeId"
@change="(val) => handleCheckedTagsChange(val, 3)">
<template v-for="item in tagData[3].tags">
<el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
</template>
</el-checkbox-group>
<i @click="switchTagShow(3)"
:class="{'el-icon-arrow-down': !tagData[3].tagShow, 'el-icon-arrow-up': tagData[3].tagShow}"></i>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="tag-item">
<label class="tag-title">搜索:</label>
<el-input v-model="q.keyContent" placeholder="请输入搜索内容"></el-input>
</div>
</el-col>
<el-col :span="12" align="right" class="tag-btns">
<el-button type="primary" @click="search">查询</el-button>
<el-button type="default" @click="reset">重置</el-button>
</el-col>
</el-row>
</div>
<div class="table">
<vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe height="auto"
ref="xTable" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelOneName" :title="tagsForm.tags01.name"></vxe-column>
<vxe-column show-overflow show-header-overflow field="name" title="报告名称"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelTwoName" :title="tagsForm.tags02.name"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelThreeName" :title="tagsForm.tags03.name"></vxe-column>
<vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
<vxe-column show-overflow show-header-overflow field="createDate" title="上传时间"></vxe-column>
</vxe-table>
<el-pagination
@size-change="handleLogSizeChange"
@current-change="handleLogCurrentChange"
:current-page="q.pageNo"
:page-sizes="[5, 10, 20]"
:page-size="q.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"/>
</div>
<div class="done">
<el-button type="primary" @click.native="savaCheck">确定</el-button>
<el-button type="default" @click.native="handleClose">取消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'reportDialog',
data () {
return {
tagData: {
1: {
name: '',
tagShow: false,
tags: [],
isIndeterminate: true,
checkAll: false
},
2: {
name: '',
tagShow: false,
tags: [],
isIndeterminate: true,
checkAll: false
},
3: {
name: '',
tagShow: false,
tags: [],
isIndeterminate: true,
checkAll: false
}
},
processTable: [],
total: 0,
q: {
pageSize: 10,
pageNo: 1,
labelOneId: [],
labelTwoId: [],
labelThreeId: []
},
checkIds: [],
dialogVisible: false,
tableData: [],
ids: [], // 存储已经存在的报告
checkList: [],
yearList: []
}
},
props: {
// 获取标签
tagsForm: {
type: Object
},
// 获取已有的数据 在查询全部数据时不展示已有的
alreadyData: {
type: Array
}
},
methods: {
search () {
this.q.pageNo = 1
this.reportList()
},
// 切换展开隐藏
switchTagShow (type) {
this.tagData[type].tagShow = !this.tagData[type].tagShow
},
// 监听group checkbox
handleCheckedTagsChange (val, type) {
console.log(val,this.tagData[type].tags,"this.tagData[type].tags")
this.tagData[type].checkAll = (val.length === this.tagData[type].tags.length)
this.tagData[type].isIndeterminate = val.length < this.tagData[type].tags.length
},
// 监听全选按钮
handleCheckAllChange (val, type) {
switch (type) {
case 1:
this.q.labelOneId = val ? this.tagData[type].tags.map(item => item.id) : []
break
case 2:
this.q.labelTwoId = val ? this.tagData[type].tags.map(item => item.id) : []
break
case 3:
this.q.labelThreeId = val ? this.tagData[type].tags.map(item => item.id) : []
break
}
this.tagData[type].isIndeterminate = !val
},
// 标签列表
labelList () {
console.log(this.tagsForm," console.log(this.tagsForm,\"\")\n")
this.tagData[1].name = this.tagsForm.tags01.name
this.tagData[2].name = this.tagsForm.tags02.name
this.tagData[3].name = this.tagsForm.tags03.name
this.tagData[1].tags = this.tagsForm.tags01.childList
this.tagData[2].tags = this.tagsForm.tags02.childList
this.tagData[3].tags = this.tagsForm.tags03.childList
},
// 日期列表
reportDateList () {
this.$api.report.reportDateList().then(({ data }) => {
this.yearList = data.list
})
},
savaCheck () {
// 点击保存 需要把选中的数据传给父组件
this.$emit('confirm', this.checkList)
this.dialogVisible = false
},
show () {
this.ids = this.alreadyData.map(item => item.id)
this.labelList()
this.reportDateList()
// 调取接口获取数据
this.reportList()
},
// 重置
reset () {
this.q = {
keyContent: '',
year: [],
labelOneId: [],
labelTwoId: [],
labelThreeId: [],
pageNo: 1,
pageSize: 10
}
this.total = 0
this.tableData = []
this.tagData[1].checkAll = false
this.tagData[1].isIndeterminate = true
this.tagData[2].checkAll = false
this.tagData[2].isIndeterminate = true
this.tagData[3].checkAll = false
this.tagData[3].isIndeterminate = true
this.reportList()
},
// 列表
reportList () {
this.$api.report.reportList(this.q).then(({ data }) => {
this.tableData = data.records.filter(item => {
if (this.ids.indexOf(item.id) === -1) {
return item
}
})
this.total = data.total - this.alreadyData.length
this.q.pageNo = data.current
this.q.pageSize = data.size
if (!data.records.length && this.q.pageNo !== 1) {
this.q.pageNo = 1
this.reportList()
}
this.dialogVisible = true
})
},
handleClose () {
this.$refs.xTable.clearSelected()
this.dialogVisible = false
},
handleLogSizeChange (size) {
this.q.pageSize = size
this.reportList()
},
handleLogCurrentChange (page) {
this.q.pageNo = page
this.reportList()
},
selectAllEvent ({ checked }) {
const records = this.$refs.xTable.getCheckboxRecords()
this.checkList = records
this.checkIds = records.map(item => {
return item.id
})
},
selectChangeEvent ({ checked }) {
const records = this.$refs.xTable.getCheckboxRecords()
this.checkList = records
this.checkIds = records.map(item => {
return item.id
})
}
}
}
</script>
<style lang="scss" scoped>
.table{
padding: 10px 20px;
width: 100%;
height: 550px;
}
.done {
margin-top: 10px;
text-align: right;
padding:20px 0 10px ;
::v-deep .el-button {
width: 80px;
height: 36px;
padding: 0;
}
}
.tag-search {
padding-top: 9px;
::v-deep .el-date-picker,
::v-deep .el-input {
width: 240px;
}
.tag-item {
margin-bottom: 15px;
display: flex;
.year {
::v-deep .el-input__inner {
padding: 0 15px !important;
}
}
label.tag-title {
font-size: 14px;
font-weight: normal;
color: #646464;
display: inline-block;
width: 112px;
height: 19px;
line-height: 19px;
padding-left: 48px;
border-right: 1px solid #BFBFBF;
margin-right: 10px;
margin-top: 2.5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tag-show {
flex: 1;
margin-right: 28px;
height: 19px;
overflow: hidden;
position: relative;
&.active {
height: auto;
}
::v-deep .check-active{
.el-checkbox__label{
color: #434343;
}
}
::v-deep .el-checkbox {
margin-right: 15px;
color: #434343;
}
::v-deep .el-checkbox__label {
min-width: 80px;
}
::v-deep .el-checkbox-group {
display: inline;
}
.el-icon-arrow-down,
.el-icon-arrow-up {
color: #C0C4CC;
cursor: pointer;
position: absolute;
right: 0;
top: 2px;
}
}
}
.tag-btns {
padding-right: 15px;
}
}
</style>
@@ -1,6 +1,6 @@
<template>
<div class="reportTable">
<el-button v-if="!disabled" type="primary" size="big">添加报告</el-button>
<el-button v-if="!disabled" type="primary" size="big" @click="addReport">添加报告</el-button>
<el-button v-if="!disabled" type="success" size="big" @click="deleteAll">批量删除</el-button>
<div class="table">
<vxe-table :data="processTable" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="500"
@@ -27,11 +27,13 @@
:page-size="qLog.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"/>
<reportDialog ref="reportDialog" :tagsForm="tagsForm" :alreadyData="value" @confirm="addReportList"></reportDialog>
</div>
</div>
</template>
<script>
import reportDialog from './reportDialog'
export default {
name: 'reportTable',
props: {
@@ -45,6 +47,9 @@ export default {
default: false
}
},
components: {
reportDialog
},
data () {
return {
processTable: [],
@@ -97,6 +102,9 @@ export default {
this.labelList()
},
methods: {
addReportList (list) {
this.$emit('updateTable', [...this.value , ...list])
},
pageChage (current) {
setTimeout(() => {
current = current || this.qLog.pageNo
@@ -149,6 +157,9 @@ export default {
return item.id
})
},
addReport () {
this.$refs.reportDialog.show()
},
deleteAll () {
this.reportDelete(this.checkIds)
},
+7 -1
View File
@@ -41,7 +41,7 @@
</div>
<div class="content">
<span class="base_title">审核信息</span>
<audit-operation></audit-operation>
<audit-operation ref="operationRef"></audit-operation>
</div>
</div>
<process-footer
@@ -156,6 +156,12 @@ export default {
// this.$message.warning(res.message)
// }
// })
},
handleSubmit () {
if (this.$refs.operationRef.submit()) {
// 通过了校验 需要整合参数
console.log('斤斤计较')
}
}
}
}
+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>