From 32a95699e59c5c65e18c08643266c9cbfa380ee4 Mon Sep 17 00:00:00 2001 From: licp <lichunping@guanfang.com.cn> Date: 星期五, 07 六月 2024 09:56:05 +0800 Subject: [PATCH] 优化设备明细、检验任务附件权限 --- src/components/view/person-manage.vue | 829 +++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 639 insertions(+), 190 deletions(-) diff --git a/src/components/view/person-manage.vue b/src/components/view/person-manage.vue index addf22c..5c39a75 100644 --- a/src/components/view/person-manage.vue +++ b/src/components/view/person-manage.vue @@ -1,204 +1,653 @@ <style scoped> - .title { - height: 60px; - line-height: 60px; - } + .person_manage { + padding: 20px 0; + display: flex; + } - .search { - background-color: #fff; - height: 80px; - display: flex; - align-items: center; - } + .left { + width: 270px; + height: calc(100% - 40px); + background-color: white; + padding: 15px; + } - .search_thing { - width: 350px; - display: flex; - align-items: center; - } + .el-tree { + height: calc(100% - 37px); + overflow-y: auto; + } - .search_label { - width: 110px; - font-size: 14px; - text-align: right; - } + .custom-tree-node { + width: 100%; + line-height: 32px; + } - .search_input { - width: calc(100% - 110px); - } + .custom-tree-node .el-icon-delete { + color: #3A7BFA; + opacity: 0; + font-size: 18px; + } - .table { - margin-top: 10px; - background-color: #fff; - width: calc(100% - 40px); - height: calc(100% - 60px - 80px - 10px - 40px); - padding: 20px; - } + .custom-tree-node:hover .el-icon-delete { + opacity: 1; + } + + .node_i { + color: orange; + font-size: 18px; + } + + .right { + margin-left: 5px; + width: calc(100% - 305px); + height: calc(100% - 40px); + } + + .title { + height: 60px; + line-height: 60px; + } + + .search { + background-color: #fff; + height: 60px; + display: flex; + align-items: center; + } + + .search_thing { + width: 250px; + display: flex; + align-items: center; + } + + .search_label { + width: 90px; + font-size: 14px; + text-align: right; + } + + .search_input { + width: calc(100% - 90px); + } + + .table { + margin-top: 4px; + background-color: #fff; + height: calc(100% - 44px); + } </style> +<style> + .el-upload--text { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } +</style> +<style> + .person_manage .el-tree-node__content { + height: 32px; + font-size: 14px; + border-radius: 2px; + } + .person_manage .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { + color: #3A7BFA; + } + + .person_manage .has-gutter .el-table__cell .cell { + line-height: 34px; + background-color: #f8f8f8; + } + + .person_manage .has-gutter .el-table__cell { + background-color: #fafafa !important; + } + + .person_manage .el-table__row .cell { + font-size: 14px; + } + + .person_manage .el-table .warning-row .cell { + color: #bababa; + } +</style> <template> - <div class="person_manage"> - <div> - <el-row class="title"> - <el-col :span="12" style="padding-left: 20px;">浜哄憳绠$悊</el-col> - <el-col :span="12" style="text-align: right;"> - <el-button size="medium" type="primary" @click="opeaAdd" v-if="addPower">鏂板浜哄憳</el-button> - </el-col> - </el-row> - </div> - <div class="search"> - <div class="search_thing"> - <div class="search_label">鐢ㄦ埛鍚嶏細</div> - <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable - v-model="componentData.entity.name" @keyup.enter.native="refreshTable()"></el-input></div> - </div> - <div class="search_thing"> - <div class="search_label">璐﹀彿鐘舵�侊細</div> - <div class="search_input"> - <el-select size="small" v-model="componentData.entity.state" style="width: 100%;"> - <el-option label="鍏ㄩ儴" :value="null"></el-option> - <el-option label="鍚敤" :value="1"></el-option> - <el-option label="鍋滅敤" :value="0"></el-option> - </el-select> - </div> - </div> - <div class="search_thing"> - <div class="search_label">鍏徃鍚嶇О锛�</div> - <div class="search_input"> - <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="componentData.entity.company" @keyup.enter.native="refreshTable()"></el-input> - </div> - </div> - <div class="search_thing" style="padding-left: 30px;"> - <el-button size="small" @click="refresh()">閲� 缃�</el-button> - <el-button size="small" type="primary" @click="refreshTable()">鏌� 璇�</el-button> - </div> - </div> - <div class="table"> - <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :upUrl="$api.user.updateUser" :componentData="componentData" :key="upIndex" @upUser="upUser"/> - </div> - </div> + <div class="person_manage"> + <div class="left"> + <el-row> + <el-col :span="20"> + <el-input placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�" suffix-icon="el-icon-search" v-model="search" size="small" + style="margin-bottom: 5px;" clearable @clear="searchFilter" @keyup.enter.native="searchFilter()"></el-input> + </el-col> + <el-col :span="4" style="text-align: center;line-height: 30px;" v-if="addPower"> + <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="handleAdd"></el-button> + </el-col> + </el-row> + <el-tree :data="list" ref="tree" :props="{ children: 'children', label: 'name' }" node-key="id" + :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen" + @node-collapse="nodeClose" v-loading="treeLoad" :expand-on-click-node="false" default-expand-all> + <div class="custom-tree-node" slot-scope="{ node, data }"> + <el-row style="width: 100%;"> + <el-col :span="21" :class="{sort:node.level>3}"> + <span><i + :class="`node_i ${data.children != undefined&&data.children.length>0 ? 'el-icon-folder-opened' : 'el-icon-tickets'}`"></i> + {{ data.name }}</span> + </el-col> + <el-col :span="2" style="text-align: right;" v-if="delStandardTree&&node.level>1"> + <el-button type="text" size="mini" @click.stop="remove(node, data)"> + <i class="el-icon-delete"></i> + </el-button> + </el-col> + </el-row> + </div> + </el-tree> + </div> + <div class="right"> + <div class="search"> + <div class="search_thing"> + <div class="search_label">鐢ㄦ埛鍚嶏細</div> + <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable + v-model="componentData.entity.name" @keyup.enter.native="refreshTable()"></el-input></div> + </div> + <div class="search_thing"> + <div class="search_label">璐﹀彿鐘舵�侊細</div> + <div class="search_input"> + <el-select size="small" v-model="componentData.entity.state" style="width: 100%;"> + <el-option label="鍏ㄩ儴" :value="null"></el-option> + <el-option label="鍚敤" :value="1"></el-option> + <el-option label="鍋滅敤" :value="0"></el-option> + </el-select> + </div> + </div> + <div class="search_thing"> + <div class="search_label">鍏徃鍚嶇О锛�</div> + <div class="search_input"> + <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="componentData.entity.company" + @keyup.enter.native="refreshTable()"></el-input> + </div> + </div> + <div class="search_thing" style="padding-left: 30px;"> + <el-button size="small" @click="refresh()">閲� 缃�</el-button> + <el-button size="small" type="primary" @click="refreshTable()">鏌� 璇�</el-button> + </div> + <div class="search_thing" style="display: flex;justify-content: right;margin-right: 10px;"> + <el-button size="small" type="primary" @click="openthirdParty" v-if="addUserPower">鑾峰彇涓夋柟浜哄憳</el-button> + <el-button size="small" type="primary" @click="opeaAdd" v-if="addPower">鏂板鐢ㄦ埛</el-button> + </div> + </div> + <div class="table"> + <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :upUrl="$api.user.updateUser" + :componentData="componentData" :key="upIndex" /> + </div> + </div> + <el-dialog title="鏋舵瀯鏂板" :visible.sync="addDia" width="400px"> + <div class="body"> + <el-row style="line-height: 50px;"> + <el-col :span="6" style="text-align: right;"> + <span class="required-span">* </span>鏋舵瀯鍚嶇О锛� + </el-col> + <el-col :span="16" :offset="1"> + <el-input v-model="addOb.name" placeholder="璇疯緭鍏ユ灦鏋勫悕绉�" clearable size="small"></el-input> + </el-col> + </el-row> + </div> + <span slot="footer" class="dialog-footer"> + <el-button @click="addDia = false">鍙� 娑�</el-button> + <el-button type="primary" @click="addStandardTree" :loading="addLoad">纭� 瀹�</el-button> + </span> + </el-dialog> + <el-dialog title="鑾峰彇浜轰簨绯荤粺浜哄憳淇℃伅" :visible.sync="addthirdParty" width="70%"> + <div class="body" v-loading="thirdPartyLoading"> + <el-row> + <el-col :span="8" style="height: 70vh;overflow: hidden;" v-if="companiesList.length!=1"> + <el-input placeholder="杈撳叆鍏抽敭瀛楁悳绱�" v-model="search2" size="small" style="width: 90%;padding: 0 5% 10px 5%;" + clearable @clear="searchFilter2" @keyup.enter.native="searchFilter2()"> + </el-input> + <el-tree :data="datathirdParty" node-key="companyId" :props="defaultProps" @node-click="nodeClick2" + style="height: calc(100% - 42px);" @node-expand="nodeOpen0" :filter-node-method="filterNode2" ref="tree2" + highlight-current> + </el-tree> + </el-col> + <el-col :span="companiesList.length==1?24:16" style="height: 70vh;padding-left: 8px;"> + <div class="search_thing" style="width: 100%;margin-bottom: 10px;justify-content: right;"> + <div class="search_label" style="width: 200px;">鍛樺伐鍙�/鍛樺伐濮撳悕锛�</div> + <div class="search_input" style="width: 250px;"> + <el-input size="small" placeholder="璇疯緭鍏ュ伐鍙�/鍛樺伐濮撳悕" @clear="searchPerson" clearable v-model="userSearch2" + @keyup.enter.native="searchPerson()"></el-input> + </div> + <!-- <div class="search_label" style="width: 200px;">鍛樺伐鍙凤細</div> + <div class="search_input"> + <el-input size="small" placeholder="璇疯緭鍏ュ伐鍙�" @clear="searchPerson" clearable v-model="searchEmployeeID" + @keyup.enter.native="searchPerson2()"></el-input> + </div> --> + </div> + <el-table height="67vh" border stripe :data="personList" v-loading="personLoad" ref="personTable" + @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="50"> + </el-table-column> + <el-table-column prop="employeeID" label="鍛樺伐鍙�"> + </el-table-column> + <el-table-column prop="name" label="鍛樺伐濮撳悕"> + </el-table-column> + <el-table-column prop="department" label="閮ㄩ棬" min-width="200"> + </el-table-column> + <el-table-column prop="isLive" label="宸插瓨鍦�" width="80" align="center"> + <template slot-scope="scope"> + <el-tag type="success" effect="dark" v-if="scope.row.isLive === 1">鈭�</el-tag> + </template> + </el-table-column> + </el-table> + </el-col> + </el-row> + </div> + <div slot="footer" class="dialog-footer"> + <el-button @click="addthirdParty = false" size="mini">鍙� 娑�</el-button> + <el-button type="primary" @click="addUser2" :loading="addLoad" size="mini">纭� 瀹�</el-button> + </div> + </el-dialog> + </div> </template> <script> - import ValueTable from '../tool/value-table.vue' - export default { - components: { - ValueTable - }, - data() { - return { - componentData: { - entity: { - name: null, - state: null, - company: null, - orderBy:{ - field: 'id', - order: 'asc' - } - }, - isIndex: true, - showSelect: false, - select: false, - do: [{ - id: 'update', - font: '缂栬緫', - type: 'text', - method: 'doDiy', - field:['createUserName','updateUserName','roleName','瑙掕壊=roleId','瀵嗙爜=password'] - }], - tagField: { - state: { - select: [{ - value: 1, - type: 'success', - label: '鍚敤' - },{ - value: 0, - type: 'danger', - label: '鍋滅敤' - }] - } - }, - selectField: { - state: { - select: [{ - value: 1, - type: 'success', - label: '鍚敤' - },{ - value: 0, - type: 'danger', - label: '鍋滅敤' - }] - }, - roleId: { - select: [] - } - }, - requiredAdd:['account','name','state','roleId','password'], - addUpload:['pictureUrl','signatureUrl'], - addUploadConfig:{ - accept:'.png, .jpg, .jpeg, .gif', - url:this.$api.deviceScope.uploadFile + import { + compileToFunctions + } from 'vue-template-compiler' + import ValueTable from '../tool/value-table.vue' + export default { + components: { + ValueTable + }, + data() { + return { + datathirdParty: [], + defaultProps: { + children: 'children', + label: 'companyName' + }, + addthirdParty: false, + componentData: { + entity: { + name: null, + state: null, + company: null, + roleId: null, + orderBy: { + field: 'id', + order: 'asc' + } }, - requiredUp:['account','name','state','roleId'] - }, - entityCopy: {}, - upIndex: 0, - addDia: false, - addPower: true - } - }, - mounted() { - this.selectRole() - this.entityCopy = this.HaveJson(this.componentData.entity) - this.getPower() - }, - methods: { - refreshTable() { - this.$refs['ValueTable'].selectList() - }, - refresh() { - this.componentData.entity = this.HaveJson(this.entityCopy) - this.upIndex++ - }, - upUser(row){ - console.log(row); - }, - selectRole(){ - this.$axios.get(this.$api.user.selectRoleList).then(res=>{ - var str = [] - res.data.forEach(a=>{ - str.push({ - label: a.name, - value: a.id - }) - }) - this.componentData.selectField.roleId.select = str - }) - }, - opeaAdd(){ - this.$refs.ValueTable.openAddDia(this.$api.user.addUser); - }, - // 鏉冮檺鍒嗛厤 - getPower(){ - let power = JSON.parse(sessionStorage.getItem('power')) - let up = false - let add = false - for (var i = 0; i < power.length; i++) { - if(power[i].menuMethod=='updateUser'){ - up = true - } - if(power[i].menuMethod=='addUser'){ - add = true - } - } - if(!up){ - this.componentData.do.splice(0, 1) - } - this.addPower = add - } - } - } + row: 2, + isIndex: true, + showSelect: false, + select: false, + init: false, + do: [{ + id: 'update', + font: '缂栬緫', + type: 'text', + method: 'doDiy', + field: ['roleName', '瑙掕壊=roleId', '瀵嗙爜=password', + '濮撳悕EN=nameEn', '骞撮緞=age', '閭=email', '鍗曚綅=company', '绛惧悕=signatureUrl', '涓汉鐓х墖=pictureUrl' + ] + }], + tagField: { + state: { + select: [{ + value: 1, + type: 'success', + label: '鍚敤' + }, { + value: 0, + type: 'danger', + label: '鍋滅敤' + }] + } + }, + selectField: { + state: { + select: [{ + value: 1, + type: 'success', + label: '鍚敤' + }, { + value: 0, + type: 'danger', + label: '鍋滅敤' + }] + }, + roleId: { + select: [] + }, + company: {select: []} + }, + requiredAdd: ['account', 'name', 'state', 'roleId', 'password', 'nameEn', 'phone'], + requiredUp: ['account', 'name', 'state', 'roleId', 'nameEn', 'phone'], + addUpload: ['pictureUrl', 'signatureUrl'], + addUploadConfig: { + accept: '.png, .jpg, .jpeg, .gif', + url: this.$api.deviceScope.uploadFile + }, + }, + entityCopy: {}, + upIndex: 0, + addDia: false, + addPower: true, + addUserPower: true, + delStandardTree: true, + addDia0: false, + addOb: { + fatherId: 10001, + name: '', + }, + search: null, + list: [], + selectTree: '', + treeLoad: false, + addLoad: false, + personList: [], + personListCopy: [], + personLoad: false, + search2: '', + multipleSelection: [], + companiesList: [], + currentCompaniesList: [], + userSearch2: '', + searchEmployeeID: null, + thirdPartyLoading:false + } + }, + // watch: { + // userSearch2(val){} + // }, + mounted() { + this.selectTreeList() + this.selectRole() + this.selectCustomEnum() + this.entityCopy = this.HaveJson(this.componentData.entity) + this.getPower() + }, + methods: { + openthirdParty() { + this.addthirdParty = true; + this.thirdPartyLoading = true; + this.$axios.get(this.$api.companies.selectCompaniesList).then(res => { + this.companiesList = this.HaveJson(res.data); + if(this.companiesList.length ==1){ + this.$axios.post(this.$api.companies.selectSimpleList, { + companyId: this.companiesList[0].companyId + }).then(res => { + this.thirdPartyLoading = false; + this.personListCopy = JSON.parse(JSON.stringify(res.data)) + this.personList = res.data + this.$refs.personTable.doLayout() + }) + }else{ + this.thirdPartyLoading = false; + } + this.datathirdParty = this.tranListToTreeData(res.data, "ROOT"); + }) + if(this.componentData.entity.roleId > 10000)this.$message.warning('鐢变簬鏈�変腑鍏蜂綋瑙掕壊锛屾柊澧炵敤鎴峰皢鎴愪负榛樿瑙掕壊') + }, + tranListToTreeData(list, rootValue) { + const arr = []; + list.forEach((item) => { + if (item.parentCompanyId === rootValue) { + const children = this.tranListToTreeData(list, item.companyId); + if (children.length) { + item.children = children; + } + arr.push(item); + } + }); + return arr; + }, + refreshTable() { + this.$refs['ValueTable'].selectList() + }, + refresh() { + this.componentData.entity = this.HaveJson(this.entityCopy) + // this.upIndex++ + this.refreshTable() + }, + selectRole() { + this.$axios.get(this.$api.user.selectRoleList).then(res => { + var str = [] + res.data.forEach(a => { + str.push({ + label: a.name, + value: a.id + }) + }) + this.componentData.selectField.roleId.select = str + }) + }, + opeaAdd() { + this.$refs.ValueTable.openAddDia(this.$api.user.addUser); + this.$refs['ValueTable'].upData.departId = this.selectTree + }, + handleTree(arr) { + arr.forEach(a => { + if (a.children.length == 0) { + a.children = null; + } else { + this.handleTree(a.children) + } + }) + return arr + }, + // 鏉冮檺鍒嗛厤 + getPower() { + let power = JSON.parse(sessionStorage.getItem('power')) + let up = false + let add = false + let addUserPower = false + let delStandardTree = false + for (var i = 0; i < power.length; i++) { + if (power[i].menuMethod == 'updateUser') { + up = true + } + if (power[i].menuMethod == 'addUser') { + add = true + } + if (power[i].menuMethod == 'delDepartment') { + delStandardTree = true + } + if (power[i].menuMethod == 'selectCompaniesList') { + addUserPower = true + } + } + if (!up) { + this.componentData.do.splice(0, 1) + } + this.delStandardTree = delStandardTree + this.addPower = add + this.addUserPower = addUserPower + }, + handleAdd() { + this.addDia = true; + }, + searchFilter() { + this.$refs.tree.filter(this.search) + }, + searchFilter2() { + this.$refs.tree2.filter(this.search2) + }, + filterNode(value, data) { + if (!value) return true; + return data.name.indexOf(value) !== -1; + }, + filterNode2(value, data) { + if (!value) return true; + return data['companyName'].indexOf(value) !== -1; + }, + handleNodeClick(val, node, el) { //鏍戠殑鍊� + this.selectTree = '' + this.getNodeParent(node) + this.selectTree = this.selectTree.replace(' - ', '') + let data = this.selectTree.split(' - ') + let data2 = '' + for (let index = data.length - 1; index >= 0; index--) { + data2 += " - " + data[index] + } + this.selectTree = data2.replace(' - ', '') + this.componentData.entity.roleId = val.id; + this.refreshTable() + }, + nodeOpen(data, node, el) { + $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened') + }, + nodeOpen0(data, node, el) { + this.currentCompaniesList[node.level - 1] = data.id + }, + nodeClose(data, node, el) { + $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder') + }, + remove(node, data) { + this.$confirm("鏄惁鍒犻櫎璇ュ眰绾�", "鎻愮ず", { + type: "error" + }).then(() => { + this.treeLoad = true + this.$axios.post(this.$api.department.delDepartment, { + id: data.id + }).then(res => { + if (res.code == 201) return + this.$message.success('宸插垹闄�') + this.selectTreeList() + }) + }).catch(e => {}) + }, + selectTreeList() { + this.treeLoad = true + this.$axios.get(this.$api.department.selectDepartment).then(res => { + this.list = res.data + this.treeLoad = false + this.componentData.entity.roleId = this.list[0].id; + this.refreshTable() + }) + }, + addStandardTree() { + if (this.addOb.name == null || this.addOb.factory == '') { + this.$message.error('鏋勬灦鍚嶇О鏄繀濉」') + return + } + this.addLoad = true + this.$axios.post(this.$api.department.addDepartment, this.addOb, { + headers: { + 'Content-Type': 'application/json' + } + }).then(res => { + if (res.code === 201) { + this.addLoad = false + return + } + this.$message.success('娣诲姞鎴愬姛') + this.addDia = false + this.selectTreeList() + this.addLoad = false + this.addOb.name = '' + }).catch(e => { + this.addDia = false + this.addLoad = false + }) + }, + nodeClick2(ob, node, el) { + this.getNodeParent(node) + if (ob.companyId !== 'SC21') { + this.personLoad = true + this.$axios.post(this.$api.companies.selectSimpleList, { + companyId: ob.companyId + }).then(res => { + this.personListCopy = JSON.parse(JSON.stringify(res.data)) + this.personList = res.data + this.personLoad = false + this.$refs.personTable.doLayout() + }) + } + }, + getNodeParent(val) { + this.currentCompaniesList[val.level - 1] = val.data.companyId + if (val.parent != null) { + this.getNodeParent(val.parent) + } + }, + handleSelectionChange(val) { + this.multipleSelection = val; + }, + addUser2() { + if (this.multipleSelection.length === 0) { + return this.$message.error('璇烽�夋嫨浜哄憳') + } + if (this.currentCompaniesList.length === 0) { + return this.$message.error('璇烽�夋嫨缁勭粐') + } + /* for (let index = this.currentCompaniesList.length-1; index >1; index--) { + let obj = this.multipleSelection.find(a=>a.companyId==this.currentCompaniesList[index]) + if(!obj){ + this.currentCompaniesList.splice(index,1) + } + } */ + let arr = [] + this.currentCompaniesList.forEach(b => { + let obj = this.companiesList.find(a => a.companyId == b) + arr.push(obj) + }) + this.addLoad = true + this.$axios.post(this.$api.companies.addPersonUser, { + company: arr, + person: this.multipleSelection, + roleId: this.componentData.entity.roleId + }, { + headers: { + 'Content-Type': 'application/json' + } + }).then(res => { + if (res.code === 201) { + this.addLoad = false + return + } + this.$message.success('鎿嶄綔鎴愬姛') + this.multipleSelection = [] + this.$refs.personTable.clearSelection() + this.addLoad = false + this.userSearch2 = '' + this.selectTreeList() + }).catch(e => { + this.addLoad = false + }) + }, + searchPerson() { + let arr = JSON.parse(JSON.stringify(this.personListCopy)) + this.personList = arr.filter(a => { + if (a.employeeID.includes(this.userSearch2) || a.name.includes(this.userSearch2)) { + return true + } + }) + }, + searchPerson2(){ + if(this.searchEmployeeID===null||this.searchEmployeeID===''){ + this.searchPerson() + return + } + this.$axios.post(this.$api.companies.selectPersonUser, { + code: this.searchEmployeeID + }).then(res=>{ + this.personList = [] + this.personList.push(res.data) + }) + }, + selectCustomEnum(){ + this.$axios.get(this.$api.user.selectCustomEnum).then(res=>{ + this.componentData.selectField.company.select = [] + res.data.forEach(a=>{ + this.componentData.selectField.company.select.push({ + label: a.company, + value: a.id + }) + }) + }) + } + } + } </script> -- Gitblit v1.9.3