From bc2023d47d12934448b343221dac69fecde20b9f Mon Sep 17 00:00:00 2001 From: value <z1292839451@163.com> Date: 星期三, 22 五月 2024 17:22:49 +0800 Subject: [PATCH] 人员明细功能修改 --- src/components/view/a6-personnel-detail.vue | 709 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 359 insertions(+), 350 deletions(-) diff --git a/src/components/view/a6-personnel-detail.vue b/src/components/view/a6-personnel-detail.vue index 3778dec..21aeb35 100644 --- a/src/components/view/a6-personnel-detail.vue +++ b/src/components/view/a6-personnel-detail.vue @@ -1,404 +1,413 @@ <style scoped> - .standard { - padding: 20px 0; - display: flex; - } + .standard { + padding: 20px 0; + display: flex; + } - .left { - width: 270px; - height: calc(100% - 40px - 25px); - background-color: white; - padding: 15px; - } - .el-tree{ + .left { + width: 270px; + height: calc(100% - 40px - 25px); + background-color: white; + padding: 15px; + } + + .el-tree { height: calc(100% - 37px); overflow-y: auto; } - .custom-tree-node { - width: 100%; - line-height: 32px; - } + .custom-tree-node { + width: 100%; + line-height: 32px; + } - .custom-tree-node .el-icon-delete { - color: #3A7BFA; - opacity: 0; - font-size: 18px; - } + .custom-tree-node .el-icon-delete { + color: #3A7BFA; + opacity: 0; + font-size: 18px; + } - .custom-tree-node:hover .el-icon-delete { - opacity: 1; - } + .custom-tree-node:hover .el-icon-delete { + opacity: 1; + } - .node_i { - color: orange; - font-size: 18px; - } + .node_i { + color: orange; + font-size: 18px; + } - .right { - margin-left: 5px; - width: calc(100% - 305px); - height: calc(100% - 40px); - } + .right { + margin-left: 5px; + width: calc(100% - 305px); + height: calc(100% - 40px); + } - .right .title { - height: 50px; - line-height: 50px; - padding: 0 10px; - background-color: white; - } + .right .title { + height: 50px; + line-height: 50px; + padding: 0 10px; + background-color: white; + } - .standard_table { - border-top: 1px solid #ebeef5; - height: calc(100% - 50px); - margin-top: 5px; - background-color: white; - user-select: none; + .standard_table { + border-top: 1px solid #ebeef5; + height: calc(100% - 50px); + margin-top: 5px; + background-color: white; + user-select: none; overflow-y: auto; - } - .sort{ + } + + .sort { width: 80% !important; overflow: hidden; } .search { - background-color: #fff; - height: 100%; - display: flex; - align-items: center; + background-color: #fff; + height: 100%; + display: flex; + align-items: center; justify-content: end; - } + } - .search_thing { - width: 350px; - display: flex; - align-items: center; - } + .search_thing { + width: 350px; + display: flex; + align-items: center; + } - .search_label { - width: 110px; - font-size: 14px; - text-align: right; - } + .search_label { + width: 110px; + font-size: 14px; + text-align: right; + } - .search_input { - width: calc(100% - 110px); - } + .search_input { + width: calc(100% - 110px); + } </style> <style> - .standard .el-tree-node__content { - height: 32px; - font-size: 14px; - border-radius: 2px; - } + .standard .el-tree-node__content { + height: 32px; + font-size: 14px; + border-radius: 2px; + } - .standard .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { - color: #3A7BFA; - } + .standard .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { + color: #3A7BFA; + } </style> <template> - <div class="standard"> - <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 @blur="searchFilter" @clear="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-expanded-keys="expandedKeys" - :default-checked-keys="[1]"> - <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"> - <el-row class="title"> - <el-col :span="14" style="font-size: 14px;color: #999;">{{selectTree}}</el-col> - <el-col :span="selectTree==''?24:10" style="text-align: right;" v-if="selectTree!=''"> + <div class="standard"> + <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 @blur="searchFilter" @clear="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-expanded-keys="expandedKeys" :default-checked-keys="[1]"> + <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"> + <el-row class="title"> + <el-col :span="14" style="font-size: 14px;color: #999;">{{selectTree}}</el-col> + <el-col :span="selectTree==''?24:10" style="text-align: right;" v-if="selectTree!=''"> <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"></el-input></div> - </div> - <div class="search_thing" style="padding-left: 30px;width: 120px;"> - <el-button size="small" @click="refresh()">閲� 缃�</el-button> - <el-button size="small" type="primary" @click="refreshTable()">鏌� 璇�</el-button> + <div class="search_input"> + <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="componentData.entity.name" + @keyup.enter.native="refreshTable()" @clear="refreshTable"></el-input> + </div> + <div class="search_label"> + <el-button type="primary" size="small" @click="selectUserDia = true">娣诲姞</el-button> + </div> </div> </div> - </el-col> - </el-row> - <el-row class="standard_table" v-loading="tableLoad"> - <ValueTable ref="ValueTable" :url="$api.department.showUserById" :componentData="componentData" /> - </el-row> - </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> - </div> + </el-col> + </el-row> + <el-row class="standard_table" v-loading="tableLoad"> + <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :componentData="componentData" /> + </el-row> + </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="selectUserDia" width="70%"> + <div class="body" style="height: 60vh;" v-if="selectUserDia"> + <ValueTable ref="ValueTable2" :url="$api.user.selectUserList" :componentData="componentData2" /> + </div> + <span slot="footer" class="dialog-footer"> + <el-button @click="selectUserDia = false">鍙� 娑�</el-button> + <el-button type="primary" @click="selectUser">纭� 瀹�</el-button> + </span> + </el-dialog> + </div> </template> <script> - import ValueTable from '../tool/value-table.vue' - export default { - components: { - ValueTable - }, - data() { - return { - datathirdParty:[{ - id: 1, - label: '涓�绾� 1', - children: [{ - id: 4, - label: '浜岀骇 1-1', - children: [{ - id: 9, - label: '涓夌骇 1-1-1' - }, { - id: 10, - label: '涓夌骇 1-1-2' - }] - }] - }, { - id: 2, - label: '涓�绾� 2', - children: [{ - id: 5, - label: '浜岀骇 2-1' - }, { - id: 6, - label: '浜岀骇 2-2' - }] - }, { - id: 3, - label: '涓�绾� 3', - children: [{ - id: 7, - label: '浜岀骇 3-1' - }, { - id: 8, - label: '浜岀骇 3-2' - }] - }], + import ValueTable from '../tool/value-table.vue' + export default { + components: { + ValueTable + }, + data() { + return { + datathirdParty: [], defaultProps: { children: 'children', label: 'label' }, - addthirdParty:false, - search: null, - list: [], - selectTree: '', - addDia: false, - addOb: { - name:'', - fatherId:'' - }, - addLoad: false, - treeLoad: false, - addPower: false, - tableLoad: false, - delStandardProduct: false, - addStandardProduct: false, - componentData: { - entity: { - name:'', - departId:'', - orderBy: { - field: 'id', - order: 'asc' - } - }, - init:false, - isIndex: true, - showSelect: false, - select: false, - do: [], - isPage: false, - tagField: { - }, - selectField: {}, - }, - expandedKeys: [] - } - }, - mounted() { - this.getPower() - this.selectTreeList() - }, - methods: { - - filterNode(value, data) { - if (!value) return true; - return data.name.indexOf(value) !== -1; - }, - searchFilter() { - this.$refs.tree.filter(this.search) - }, + addthirdParty: false, + search: null, + list: [], + selectTree: '', + addDia: false, + addOb: { + name: '', + fatherId: '' + }, + addLoad: false, + treeLoad: false, + addPower: false, + tableLoad: false, + addStandardProduct: false, + componentData: { + entity: { + name: '', + departLimsId: '', + orderBy: { + field: 'id', + order: 'asc' + } + }, + init: false, + isIndex: true, + showSelect: false, + select: false, + do: [], + tagField: { + state: { + select: [{ + value: 1, + type: 'success', + label: '鍚敤' + }, { + value: 0, + type: 'danger', + label: '鍋滅敤' + }] + } + }, + selectField: {}, + }, + expandedKeys: [], + selectUserDia: false, + componentData2: { + entity: { + isCustom: 0, + orderBy: { + field: 'id', + order: 'asc' + } + }, + isIndex: true, + showSelect: true, + select: false, + do: [], + tagField: { + state: { + select: [{ + value: 1, + type: 'success', + label: '鍚敤' + }, { + value: 0, + type: 'danger', + label: '鍋滅敤' + }] + } + }, + selectField: {}, + } + } + }, + mounted() { + this.getPower() + this.selectTreeList() + }, + methods: { + filterNode(value, data) { + if (!value) return true; + return data.name.indexOf(value) !== -1; + }, + searchFilter() { + this.$refs.tree.filter(this.search) + }, refreshTable() { this.$refs.ValueTable.selectList() - }, - refresh() { - this.upIndex++; + }, + refresh() { + this.upIndex++; this.componentData.entity.departId = this.list[0].id; this.refreshTable() - }, - 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(' - ', '') + }, + 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.addOb.fatherId = val.id; - this.componentData.entity.departId = val.id; + this.componentData.entity.departLimsId = val.id; this.refreshTable() - }, - getNodeParent(val) { - if (val.parent != null) { - this.selectTree += ' - ' + val.label - this.getNodeParent(val.parent) - } - }, - 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 => {}) - }, - nodeOpen(data, node, el) { - $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened') - }, - nodeClose(data, node, el) { - $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder') - }, - selectTreeList() { - this.treeLoad = true - this.$axios.get(this.$api.department.selectDepartment).then(res => { - this.list = res.data - this.list.forEach(a => { - a.children.forEach(b => { - b.children.forEach(c => { - this.expandedKeys.push(c.id) - }) - }) - }) - this.treeLoad = false - this.componentData.entity.departId = this.list[0].id; - this.selectTree = '鍏ㄩ儴' + }, + getNodeParent(val) { + if (val.parent != null) { + this.selectTree += ' - ' + val.label + this.getNodeParent(val.parent) + } + }, + remove(node, data) { + this.$confirm("鏄惁鍒犻櫎璇ュ眰绾�", "鎻愮ず", { + type: "error" + }).then(() => { + this.treeLoad = true + this.$axios.post(this.$api.department.delDepartmentLims, { + id: data.id + }).then(res => { + if (res.code == 201) return + this.$message.success('宸插垹闄�') + this.selectTreeList() + }) + }).catch(e => {}) + }, + nodeOpen(data, node, el) { + $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened') + }, + nodeClose(data, node, el) { + $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder') + }, + selectTreeList() { + this.treeLoad = true + this.$axios.get(this.$api.department.selectDepartmentLim).then(res => { + this.list = res.data + this.list.forEach(a => { + a.children.forEach(b => { + this.expandedKeys.push(b.id) + }) + }) + this.treeLoad = false + this.componentData.entity.departLimsId = this.list[0].id; + this.selectTree = this.list[0].name 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 + }) + }, + addStandardTree() { + if (this.addOb.name == null || this.addOb.factory == '') { + this.$message.error('鏋勬灦鍚嶇О鏄繀濉」') + return + } + this.addLoad = true + this.$axios.post(this.$api.department.addDepartmentLims, 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 = '' this.addOb.fatherId = '' - }).catch(e => { - this.addDia = false - this.addLoad = false - }) - }, - handleAdd(){ - if(this.addOb.fatherId){ + }).catch(e => { + this.addDia = false + this.addLoad = false + }) + }, + handleAdd() { + if (this.addOb.fatherId) { this.addDia = true; - }else{ + } else { this.$message.error('璇烽�夋嫨涓�涓灦鏋勫眰绾�') } }, - getPower() { - let power = JSON.parse(sessionStorage.getItem('power')) - let add = false - let upStandardProduct = false - let delStandardMethod = false - let delStandardProduct = false - let addStandardProduct = false - let delStandardTree = false - for (var i = 0; i < power.length; i++) { - if (power[i].menuMethod == 'addStandardTree') { - add = true - } - if (power[i].menuMethod == 'upStandardProductList') { - upStandardProduct = true - } - if (power[i].menuMethod == 'delStandardMethodByFLSSM') { - delStandardMethod = true - } - if (power[i].menuMethod == 'delStandardProductByIds') { - delStandardProduct = true - } - if (power[i].menuMethod == 'addStandardProduct') { - addStandardProduct = true - } - if (power[i].menuMethod == 'delStandardTree') { - delStandardTree = true - } - } - this.addPower = add - this.upStandardProduct = upStandardProduct - this.delStandardMethod = delStandardMethod - this.delStandardProduct = delStandardProduct - this.addStandardProduct = addStandardProduct - this.delStandardTree = delStandardTree - }, - } - } + getPower() { + let power = JSON.parse(sessionStorage.getItem('power')) + let add = false + let addStandardProduct = false + let delStandardTree = false + for (var i = 0; i < power.length; i++) { + if (power[i].menuMethod == 'addDepartmentLims') { + add = true + } + if (power[i].menuMethod == 'addStandardProduct') { + addStandardProduct = true + } + if (power[i].menuMethod == 'delDepartmentLims') { + delStandardTree = true + } + } + this.addPower = add + this.addStandardProduct = addStandardProduct + this.delStandardTree = delStandardTree + }, + selectUser() { + let selects = this.$refs.ValueTable2.multipleSelection + if (selects.length == 0) { + this.$message.error('鏈�夋嫨鏁版嵁') + return + } + delete selects['orderBy'] + delete selects['updateUser'] + delete selects['updateTime'] + this.user = selects + this.selectUserDia = false + } + } + } </script> -- Gitblit v1.9.3