DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加添加弹窗

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/views/permissionApplication/components/AuditOperation.vue
+2
View File
@@ -111,8 +111,10 @@ export default {
this.$refs.examineForm.validate((valid) => {
if (valid) {
this.isSubmit = true
return true
} else {
this.$message.warning('请检查表单是否填写正确')
return false
}
})
}
src/views/permissionApplication/components/reportDialog.vue
+401
View File
@@ -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>
src/views/permissionApplication/components/reportTable.vue
+12 -1
View File
@@ -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)
},
src/views/permissionApplication/examine.vue
+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('斤斤计较')
}
}
}
}
src/views/permissionApplication/launch.vue
+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>