|
|
<template> <div class="mod-config"> <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList"> <el-form-item :label="'BU'"> <el-select v-model="searchData.bu" placeholder="请选择" clearable style="width: 130px"> <el-option v-for = "i in userBuList" :key = "i.buNo" :label = "i.buDesc" :value = "i.buNo"> </el-option> </el-select> </el-form-item> <el-form-item :label="'审批组编码'"> <el-input v-model="searchData.groupNo" clearable style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'审批组名称'"> <el-input v-model="searchData.groupDesc" clearable style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'状态'"> <el-select clearable v-model="searchData.active" style="width: 120px"> <el-option label="启用" value="Y"></el-option> <el-option label="禁用" value="N"></el-option> </el-select> </el-form-item> <el-form-item :label="' '"> <el-button @click="getDataList">查询</el-button> <el-button type="primary" @click="addModal">新增</el-button> </el-form-item> </el-form>
<el-table :height="height" :data="dataList" border style="width: 100%;"> <el-table-column v-for="(item,index) in columnList" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed==''?false:item.fixed" :min-width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="160" label="操作"> <template slot-scope="scope"> <el-link style="cursor: pointer" @click="updateModal(scope.row)">修改</el-link> <el-link style="cursor: pointer" @click="delModal(scope.row)">删除</el-link> <el-link style="cursor: pointer" @click="updateGroupBusinessModal(scope.row)">组成员</el-link> </template> </el-table-column> </el-table>
<!-- 分页栏 --> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20, 50, 100, 200, 500]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
<el-dialog :title="modalData.title" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="495px"> <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="审批组编码" prop="groupNo" :rules="rules.groupNo"> <el-input v-model="modalData.groupNo" :disabled="modalDisableFlag" style="width: 110px"></el-input> </el-form-item> <el-form-item label="审批组名称" prop="groupDesc" :rules="rules.groupDesc"> <el-input v-model="modalData.groupDesc" :disabled="modalDisableFlag" style="width: 210px"></el-input> </el-form-item> <el-form-item label="BU" prop="bu" :rules="rules.bu"> <el-select v-model="modalData.bu" placeholder="请选择" :disabled="modalDisableFlag" style="width: 110px"> <el-option v-for = "i in userBuList" :key = "i.buNo" :label = "i.buDesc" :value = "i.buNo"> <span style="float: left;width: 100px">{{ i.sitename }}</span> <span style="float: right; color: #8492a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size: 11px;width: 60px"> {{ i.buDesc }} </span> </el-option> </el-select> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="状态" prop="active" :rules="rules.active"> <el-select v-model="modalData.active" style="width: 110px"> <el-option label="启用" value="Y"></el-option> <el-option label="禁用" value="N"></el-option> </el-select> </el-form-item> <el-form-item label="邮箱" prop="groupEmailAddress" :rules="rules.groupEmailAddress"> <el-input v-model="modalData.groupEmailAddress" style="width: 210px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="备注"> <el-input type="textarea" v-model="modalData.remark" style="width: 458px"></el-input> </el-form-item> </el-form> <el-footer style="height:30px;margin-top: 28px;text-align:center"> <el-button type="primary" @click="saveData">保存</el-button> <el-button type="primary" @click="modalFlag = false">关闭</el-button> </el-footer> </el-dialog>
<!-- 新增用户角色 --> <el-dialog title="审批组操作" :close-on-click-modal="false" v-drag :visible.sync="authGroupMemberSaveDialog" width="900px"> <div style="font-size: 12px"> <el-form :inline="true" label-position="top" :model="searchAuthBusinessData"> <el-form-item :label="'用户名'"> <el-input v-model="searchAuthBusinessData.username" clearable style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'用户名称'"> <el-input v-model="searchAuthBusinessData.userDisplay" clearable style="width: 200px"></el-input> </el-form-item> <el-form-item :label="' '"> <el-button type="primary" @click="authGroupBusinessSearch()">查询</el-button> </el-form-item> </el-form> </div> <el-container style="margin-top: 0px;"> <el-main style="width: 400px; padding: 1px"> <span style="font-size: 12px" >可选审批人</span> <el-table height="400px" :data="allAuthBusinessList" border ref="allAuthBusinessTable" @row-click="allAuthBusinessClickRow" @selection-change="selectionAllAuthBusiness" highlight-current-row style="width: 100%"> <el-table-column type="selection" header-align="center" align="center" :selectable="selectFlag" width="50"> </el-table-column> <el-table-column prop="username" header-align="center" align="center" min-width="80" label="用户名"> </el-table-column> <el-table-column prop="userDisplay" header-align="center" align="center" min-width="120" label="用户名称"> </el-table-column> </el-table> </el-main> <el-main style="width: 111px;padding: 1px"> <div style="margin-top: 182px;margin-left: 18px"> <el-button type="primary" @click="addAuthGroupMemberBusiness()">添加>></el-button> </div> <div style="margin-top: 15px;margin-left: 18px"> <el-button type="primary" @click="deleteAuthGroupMemberBusiness()">删除<<</el-button> </div> </el-main> <el-main style="width: 400px;padding: 1px"> <span style="font-size: 12px" >已有审批人</span> <el-table height="400px" :data="isAuthBusinessList" border ref="isAuthBusinessTable" @row-click="isAuthBusinessClickRow" @selection-change="selectionIsAuthBusiness" highlight-current-row style="width: 100%"> <el-table-column type="selection" header-align="center" align="center" :selectable="selectFlag" width="50"> </el-table-column> <el-table-column prop="username" header-align="center" align="center" min-width="80" label="用户名"> </el-table-column> <el-table-column prop="userDisplay" header-align="center" align="center" min-width="120" label="用户名称"> </el-table-column> </el-table> </el-main> </el-container> <el-footer style="height:40px;margin-top: 20px;text-align:center"> <el-button type="primary" @click="authGroupMemberSaveDialog = false">关闭</el-button> </el-footer> </el-dialog> </div></template>
<script>import { authGroupSearch, // 审批组信息列表查询
authGroupSave, // 审批组信息新增
authGroupEdit, // 审批组信息编辑
authGroupDelete // 审批组信息删除
} from '@/api/auth/auth'import {getSiteAndBuByUserName} from "@/api/eam/eam.js"import {getTableDefaultListLanguage, getTableUserListLanguage} from "@/api/table.js"import Chooselist from '@/views/modules/common/Chooselist_eam'import TransferTable from "../common/transferTable.vue";import { addAuthGroupMemberBusiness, authBusinessSearch, authGroupBusinessSearch, deleteAuthGroupMemberBusiness, getAuthGroupBusinessList} from "../../../api/auth/auth";export default { components: { TransferTable, Chooselist }, watch: { searchData: { deep: true, handler: function (newV, oldV) { this.searchData.groupNo = this.searchData.groupNo.toUpperCase() } }, modalData: { deep: true, handler: function (newV, oldV) { this.modalData.groupNo = this.modalData.groupNo.toUpperCase() } } }, data () { return { // 导出
resultList: [], userBuList: [], // ======== 行高 ========
height: 200, // ======== 分页 ========
pageIndex: 1, pageSize: 50, totalPage: 0, authGroupMemberSaveDialog: false, searchAuthBusinessData:{ site: this.$store.state.user.site, userName: this.$store.state.user.name, username:'', userDisplay:'', }, authBusinessList:[], isAuthBusinessList:[], allAuthBusinessList:[], allAuthBusinessSelections:[], isAuthBusinessSelections:[], rowData:{}, // 条件查询
searchData: { site: this.$store.state.user.site, userName: this.$store.state.user.name, bu: '', buNo: '', groupNo: '', groupDesc: '', active: '', page: 1, limit: 10 }, modalData: { flag: '', title: '', bu: '', site: this.$store.state.user.site, userName: this.$store.state.user.name, buNo: '', recordType: '', authGroupId: '', groupNo: '', groupDesc: '', groupEmailAddress: '', remark: '', active: '', createBy: '', updateBy: '', createDate: '', updateDate: '' }, // ======== 数据列表 ========
dataList: [], // 展示列集
columnList: [ { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1BU', tableId: "601005Table1", tableName: "审批组信息表", columnProp: 'buDesc', headerAlign: "center", align: "left", columnLabel: 'BU', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1GroupNo', tableId: "601005Table1", tableName: "审批组信息表", columnProp: 'groupNo', headerAlign: "center", align: "center", columnLabel: '审批组编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1GroupDesc', tableId: "601005Table1", tableName: "审批组表", columnProp: 'groupDesc', headerAlign: "center", align: "left", columnLabel: '审批组名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 300 }, { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1GroupEmailAddress', tableId: "601005Table1", tableName: "审批组表", columnProp: 'groupEmailAddress', headerAlign: "center", align: "left", columnLabel: '邮箱', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 300 }, { functionId: 601005, serialNumber: '601005Table1Active', tableId: '601005Table1', tableName: '审批组信息表', columnProp: 'active', headerAlign: 'center', align: 'center', columnLabel: '状态', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1Remark', tableId: "601005Table1", tableName: "审批组表", columnProp: 'remark', headerAlign: "center", align: "left", columnLabel: '备注', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 300 }, { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1CreateDate', tableId: '601005Table1', tableName: '审批组表', columnProp: 'createDate', headerAlign: 'center', align: 'center', columnLabel: '创建时间', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 170 }, { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1CreateBy', tableId: "601005Table1", tableName: "审批组表", columnProp: 'createBy', headerAlign: "center", align: "center", columnLabel: '创建人', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1UpdateDate', tableId: "601005Table1", tableName: "审批组表", columnProp: 'updateDate', headerAlign: "center", align: "center", columnLabel: '更新时间', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 170 }, { userId: this.$store.state.user.name, functionId: 601005, serialNumber: '601005Table1UpdateBy', tableId: "601005Table1", tableName: "审批组表", columnProp: 'updateBy', headerAlign: "center", align: "center", columnLabel: '更新人', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, ], rules: { bu: [ { required: true, message: ' ', trigger: ['blur','change'] } ], groupNo:[ { required: true, message: ' ', trigger: 'change' } ], groupDesc:[ { required: true, message: ' ', trigger: 'change' } ], active:[ { required: true, message: ' ', trigger: 'change' } ], groupEmailAddress:[ { required: true, message: ' ', trigger: 'change' } ] }, // ======== 模态框开关控制 ========
authSearch: false, authSave: false, authUpdate: false, authDelete: false, modalFlag: false, modalDisableFlag: false, menuId: this.$route.meta.menuId, } },
mounted () { this.$nextTick(() => { this.height = window.innerHeight - 180 }) },
created () { // 按钮控制
this.getButtonAuthData() // 获取用户的 site 和 bu
this.getSiteAndBuByUserName() // 校验用户是否收藏
// this.favoriteIsOk()
// 动态列
this.getTableUserColumn(this.$route.meta.menuId+'table1',1) // 获取数据列表
this.getDataList() }, methods: {
// 获取用户的bu
getSiteAndBuByUserName () { let tempData = { username: this.$store.state.user.name, } getSiteAndBuByUserName(tempData).then(({data}) => { if (data.code === 0) { this.userBuList = data.rows } }) },
// 每页数
sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() },
// 当前页
currentChangeHandle (val) { this.pageIndex = val this.getDataList() },
// 获取数据列表
getDataList () { if (this.searchData.bu != null && this.searchData.bu !== '') { this.searchData.buNo = this.searchData.bu.split('_')[1] } this.searchData.limit = this.pageSize this.searchData.page = this.pageIndex authGroupSearch(this.searchData).then(({data}) => { if (data.code === 0) { this.dataList = data.page.list this.pageIndex = data.page.currPage this.pageSize = data.page.pageSize this.totalPage = data.page.totalCount } }) },
addModal () { this.modalData = { flag: '1', title: '审批组新增', bu: this.userBuList[0].buNo, buNo: '', groupNo: '', groupDesc: '', active: 'Y', createBy: this.$store.state.user.name, } this.modalDisableFlag = false this.modalFlag = true },
/** * 审批组信息编辑模态框 * @param row */ updateModal (row) { this.modalData = { flag: '2', title: '审批组编辑', site: row.site, authGroupId: row.authGroupId, recordType: row.recordType, bu: row.site + '_' + row.buNo, buNo: row.buNo, groupNo: row.groupNo, groupDesc: row.groupDesc, groupEmailAddress: row.groupEmailAddress, remark: row.remark, active: row.active, createBy: row.createBy, createDate: row.createDate, updateBy: this.$store.state.user.name, updateDate: '' } this.modalDisableFlag = true this.modalFlag = true },
// ======== 新增/编辑/删除方法 ========
/** * 审批组信息新增/编辑 */ saveData () { if (this.modalData.bu === '' || this.modalData.bu == null) { this.$message.warning('请选择BU!') return } if (this.modalData.groupNo === '' || this.modalData.groupNo == null) { this.$message.warning('请填写审批组编码!') return } if (this.modalData.groupDesc === '' || this.modalData.groupDesc == null) { this.$message.warning('请填写审批组名称!') return } if (this.modalData.active === '' || this.modalData.active == null) { this.$message.warning('请选择状态!') return } if (this.modalData.groupEmailAddress === '' || this.modalData.groupEmailAddress == null) { this.$message.warning('请填写邮箱!') return } if (this.modalData.flag === '1') { this.modalData.buNo = this.modalData.bu.split('_')[1] this.modalData.site = this.$store.state.user.site authGroupSave(this.modalData).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.modalFlag = false this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => {} }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) } else { let inData = { authGroupId: this.modalData.authGroupId, recordType: this.modalData.recordType, bu: this.modalData.bu, groupNo: this.modalData.groupNo, groupDesc: this.modalData.groupDesc, groupEmailAddress: this.modalData.groupEmailAddress, remark: this.modalData.remark, active: this.modalData.active, createBy: this.modalData.createBy, updateBy: this.$store.state.user.name, } authGroupEdit(this.modalData).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.modalFlag = false this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => {} }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) } },
/** * 审批组信息删除 */ delModal (row) { this.$confirm(`是否删除这条审批组信息?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { authGroupDelete(row).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.partSelections = [] this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => {} }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }).catch(() => { }) },
updateGroupBusinessModal (row) { this.rowData = JSON.parse(JSON.stringify(row)) this.searchAuthBusinessData = { site: '', userDisplay: '', active: '', username: '' } this.allAuthBusinessSelections = null this.isAuthBusinessSelections = null getAuthGroupBusinessList(row).then(({data}) => { this.allAuthBusinessList = data.row1 this.isAuthBusinessList = data.row2 }) this.authGroupMemberSaveDialog = true }, /** * 查询可用角色 */ authGroupBusinessSearch () { authGroupBusinessSearch(this.rowData).then(({data}) => { if (data.code === 0) { this.allAuthBusinessList = data.rows } }) }, //可选角色
allAuthBusinessClickRow (row) { this.$refs.allAuthBusinessTable.toggleRowSelection(row) }, //已有角色
isAuthBusinessClickRow (row) { this.$refs.isAuthBusinessTable.toggleRowSelection(row) }, selectionAllAuthBusiness (val) { this.allAuthBusinessSelections = val }, selectionIsAuthBusiness (val) { this.isAuthBusinessSelections = val }, //添加角色
addAuthGroupMemberBusiness () { if (this.allAuthBusinessSelections == null || this.allAuthBusinessSelections.length === 0) { this.$message.warning('请选择可选角色!') return } this.rowData.authBusinessList = this.allAuthBusinessSelections this.rowData.createBy = this.$store.state.user.name addAuthGroupMemberBusiness(this.rowData).then(({data}) => { if (data && data.code === 0) { getAuthGroupBusinessList(this.rowData).then(({data}) => { this.allAuthBusinessList = data.row1 this.isAuthBusinessList = data.row2 }) this.allAuthBusinessSelections = [] } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }, //删除角色
deleteAuthGroupMemberBusiness () { if (this.isAuthBusinessSelections == null || this.isAuthBusinessSelections.length === 0) { this.$message.warning('请选择已有角色!') return } this.rowData.authBusinessList = this.isAuthBusinessSelections deleteAuthGroupMemberBusiness(this.rowData).then(({data}) => { if (data && data.code === 0) { getAuthGroupBusinessList(this.rowData).then(({data}) => { this.allAuthBusinessList = data.row1 this.isAuthBusinessList = data.row2 }) this.isAuthBusinessSelections = [] } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }, selectFlag () { return true }, // 动态列开始 获取 用户保存的 格式列
async getTableUserColumn(tableId, columnId) { let queryTableUser = { userId: this.$store.state.user.name, functionId: this.$route.meta.menuId, tableId: tableId, status: true, languageCode: this.$i18n.locale } await getTableUserListLanguage(queryTableUser).then(({data}) => { if (data.rows.length > 0) { switch (columnId) { case 1: this.columnList = data.rows break; } } else { this.getColumnList(tableId, columnId) } }) },
// 获取 tableDefault 列
async getColumnList (tableId, columnId) { let queryTable= { functionId: this.$route.meta.menuId, tableId: tableId, languageCode: this.$i18n.locale } await getTableDefaultListLanguage(queryTable).then(({data}) => { if (!data.rows.length === 0) { switch (columnId) { case 1: this.columnList = data.rows break; } } }) },
//获取按钮的权限数据
getButtonAuthData () { let searchFlag = this.isAuth(this.menuId+":search") let saveFlag = this.isAuth(this.menuId+":save") let updateFlag = this.isAuth(this.menuId+":update") let deleteFlag = this.isAuth(this.menuId+":delete") //处理页面的权限数据
this.authSearch = !searchFlag this.authSave = !saveFlag this.authUpdate = !updateFlag this.authDelete = !deleteFlag }, }}</script>
<style scoped lang="scss">/deep/ .customer-tab .el-tabs__content { padding: 0px !important; height: 459px;}</style>
|