From a786409d7f6769f43c107159dd84faf4a2927a9a Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期一, 03 六月 2024 17:07:59 +0800 Subject: [PATCH] 1 --- src/views/master/person/main/personPerson.vue | 747 +++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 486 insertions(+), 261 deletions(-) diff --git a/src/views/master/person/main/personPerson.vue b/src/views/master/person/main/personPerson.vue index 2c196d1..a7f15ab 100644 --- a/src/views/master/person/main/personPerson.vue +++ b/src/views/master/person/main/personPerson.vue @@ -2,317 +2,542 @@ * @Author: lzhe lzhe@example.com * @Date: 2024-03-26 10:28:33 * @LastEditors: lzhe lzhe@example.com - * @LastEditTime: 2024-03-28 18:08:51 - * @FilePath: /smart-web/src/views/master/person/main/index.vue + * @LastEditTime: 2024-06-03 17:07:14 + * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/master/person/main/personPerson.vue * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="person-person"> <div class="person-person-left"> <div class="person-left-title"> - <div :class="{'person-left-active': leftActive}" @click="changeTab(1)">閮ㄩ棬</div> - <div :class="{'person-left-active': !leftActive}" @click="changeTab(2)">宀椾綅</div> + <div :class="{ 'person-left-active': leftActive }" @click="changeTab(1)">閮ㄩ棬</div> + <div :class="{ 'person-left-active': !leftActive }" @click="changeTab(2)">宀椾綅</div> </div> <div class="person-left-search"> <el-input v-model="input" placeholder="璇疯緭鍏ュ唴瀹�" size="small"></el-input> </div> <div class="person-tree"> - 鍗冩枃绉戞妧 + <!-- 閮ㄩ棬 --> + <el-tree style="max-width: 600px" :data="titleList" :expand-on-click-node="false" default-expand-all + :props="{ label: 'name', children: 'children' }" class="treeActive" @node-click="titleListNode" v-if="leftActive"/> + <!-- 宀椾綅 --> + <div v-for="(item, index) in titleList" :data-id="item.id" v-if="!leftActive" + :class="{ treeActive: item.active }" @click="selectbtn(index)">{{ item.postName }}</div> </div> </div> <div class="person-person-right"> <div class="right-top"> - <div class="right-title">閮ㄩ棬锛氬崈鏂囩鎶�</div> + <div class="right-title"><span v-if="leftActive">閮ㄩ棬锛氬崈鏂囩鎶�</span></div> <div> - <el-select v-model="input3" placeholder="鐘舵��" class="searchStatus"> - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value" - size="small" - /> + <el-select v-model="searchData.status" placeholder="鐘舵��" class="searchStatus"> + <el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue" + :value="item.dictKey" size="small" /> </el-select> - <el-input - v-model="input3" - style="width: 200px" - size="small" - placeholder="璇疯緭鍏ュ叧閿瓧杩涜杩囨护" - class="input-with-select" - > + <el-input v-model="searchData.keywords" style="width: 200px" size="small" placeholder="璇疯緭鍏ュ叧閿瓧杩涜杩囨护"> <template #append> - <el-button :icon="Search" /> + <el-button :icon="searchIcon" @click="searchPerson" /> </template> </el-input> </div> </div> - <div class="right-bottom"> + <div class="right-bottom"> <el-button type="primary" @click="addPerson">+ 娣诲姞鍛樺伐</el-button> <el-button type="primary" @click="changeDepartment">閮ㄩ棬璋冩暣</el-button> + <!-- 瀵煎叆 --> + <import-table class="exportBtn" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table> + <!-- 瀵煎嚭 --> + <el-button type="primary" @click="getExport">瀵煎嚭</el-button> <el-button type="danger" plain @click="delPerson">鍒犻櫎</el-button> </div> <div class="right-table"> - <el-table - ref="multipleTableRef" - :data="tableData" - border - style="width: 100%" - class="multipleTableRef" - @selection-change="handleSelectionChange" - > + <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" + @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" /> - <el-table-column - prop="date" - label="寮犱笁" - width="150"> + <el-table-column prop="name" label="濮撳悕" width="150"></el-table-column> + <el-table-column prop="jobNumber" label="宸ュ彿" width="150"></el-table-column> + <el-table-column label="鍏宠仈璐﹀彿" width="120"> + <template #default="scope"> + <span>{{ scope.row.account ? scope.row.account : '-' }}</span> + </template> </el-table-column> - <el-table-column - prop="name" - label="鍏宠仈璐﹀彿" - width="120"> + <el-table-column label="閮ㄩ棬" width="120"> + <template #default="scope"> + <span>{{ scope.row.organizationName ? scope.row.organizationName : '-' }}</span> + </template> </el-table-column> - <el-table-column - prop="province" - label="閮ㄩ棬" - width="120"> + <el-table-column label="宀椾綅" width="120"> + <template #default="scope"> + <span>{{ scope.row.postName ? scope.row.postName : '-' }}</span> + </template> </el-table-column> - <el-table-column - prop="city" - label="宀椾綅" - width="120"> + <el-table-column label="閭" width="120"> + <template #default="scope"> + <span>{{ scope.row.email ? scope.row.email : '-' }}</span> + </template> </el-table-column> - <el-table-column - prop="address" - label="閭" - width="300"> + <el-table-column prop="tel" label="鎵嬫満鍙�" width="120"></el-table-column> + <el-table-column prop="tel" label="鐘舵��" width="120"> + <template #default="scope"> + <span>{{ scope.row.status == "1" ? "鍦ㄨ亴" : '绂昏亴' }}</span> + </template> </el-table-column> - <el-table-column - prop="zip" - label="鎵嬫満鍙�" - width="120"> - </el-table-column> - <el-table-column - prop="zip" - label="鐘舵��" - width="120"> - </el-table-column> - <el-table-column - fixed="right" - label="鎿嶄綔" - width="140"> - <template #default="scope"> - <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button> - <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">鏌ョ湅</el-button> - </template> + <el-table-column fixed="right" label="鎿嶄綔" width="140"> + <template #default="scope"> + <el-button type="text" size="small" + @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button> + <el-button text type="primary" size="small" + @click="table_del(scope.row, scope.$index)">鍒犻櫎</el-button> + </template> </el-table-column> </el-table> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage4" - :page-sizes="[100, 200, 300, 400]" - :page-size="100" - layout="total, sizes, prev, pager, next, jumper" - :total="400"> + <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" + :current-page="currentPage4" :page-sizes="[15, 50, 100]" :page-size="15" + layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> - </div> </div> - <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog> + <el-dialog title="閮ㄩ棬璋冩暣" v-model="departmentVisible" :width="400" destroy-on-close> + <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode == 'show'" ref="dialogForm" + label-width="80px" label-position="center"> + <el-row> + <el-col :span="24"> + <el-form-item label="閮ㄩ棬" prop="parentId"> + <el-tree-select @change="parentIdChange" v-model="departmentFrom.parentId" clearable + placeholder="閮ㄩ棬" default-expand-all check-on-click-nod :data="titleList" check-strictly + :props="{ label: 'name' }" node-key="id" ref="parentTree" /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <el-button @click="departmentVisible = false">鍙� 娑�</el-button> + <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">淇� + 瀛�</el-button> + </template> + </el-dialog> + <!-- 鍒犻櫎 --> + <el-dialog title="" v-model="delPersonModel" :width="300" destroy-on-close> + <div> + <div style="margin-bottom: 6px;"><span class="delIcon">!</span>璇蜂綘璋ㄦ厧閫夋嫨锛�</div> + <div style="text-indent: 24px;">鍒犻櫎鏁版嵁浼氬奖鍝嶅凡鍏宠仈鐨勪笟鍔� ,鑻ユ偍鎯冲湪宸插叧鑱旂殑涓氬姟涓緷鐒舵樉绀鸿繖浜涙暟鎹�, 鎮ㄥ彲浠ラ�夋嫨 鍋滅敤 鎿嶄綔銆傚仠鐢ㄥ悗姝ゆ暟鎹皢涓嶈兘鍐嶈鏂颁笟鍔′娇鐢ㄣ��</div> + </div> + <template #footer> + <div class="footerDiv"> + <div class="delBtn" @click="delData(0)">鍒犻櫎</div> + <div class="delBtn" @click="delData(1)">鍋滅敤</div> + </div> + </template> + </el-dialog> + + <save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess" + @closed="dialog.save = false"></save-dialog> </template> <script> - import saveDialog from './save' - export default { - name: "bakalaka", - data(){ - return { - dialog: { - save: false - }, - leftActive: true, - input: '', - options: [{ - value: '閫夐」1', - label: '榛勯噾绯�' - }], - input3: '', - tableData: [{ - date: '2016-05-02', - name: '鐜嬪皬铏�', - province: '涓婃捣', - city: '鏅檧鍖�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�', - zip: 200333 - }, { - date: '2016-05-04', - name: '鐜嬪皬铏�', - province: '涓婃捣', - city: '鏅檧鍖�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�', - zip: 200333 - }, { - date: '2016-05-01', - name: '鐜嬪皬铏�', - province: '涓婃捣', - city: '鏅檧鍖�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�', - zip: 200333 - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - province: '涓婃捣', - city: '鏅檧鍖�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�', - zip: 200333 - }] - } - }, - created(){ - - }, - mounted(){ - - }, - components: { - saveDialog - }, - methods: { - //娣诲姞 - addPerson(){ - this.dialog.save = true - this.$nextTick(() => { - this.$refs.saveDialog.open() - }) +import importTable from '@/layout/components/importTable.vue' +import saveDialog from './save' +export default { + name: "personPerson", + data() { + return { + uploadUrl: "/api/blade-cps/employee/import-employee", + exportUrl: "/api/blade-cps/employee/export-template", + titleList: [], + delPersonModel: false, + searchIcon: "el-icon-search", + searchData: { + current: 1, + size: 15, + status: "1", + total: "1", + keywords: "", + postId: "", //postId + organizationCode: "" //缁勭粐code }, - table_edit(row){ - this.dialog.save = true - this.$nextTick(() => { - this.$refs.saveDialog.open('edit').setData(row) - }) + total: 0, + isSaveing: false, + groups: [], + departmentFrom: { + department: "" }, - //鏌ョ湅 - table_show(row){ - this.dialog.save = true - this.$nextTick(() => { - this.$refs.saveDialog.open('show').setData(row) - }) + departmentVisibleRules: { + parentId: [{ required: true, message: '璇烽�夋嫨閮ㄩ棬' }] }, - handleSelectionChange() {}, - delPerson() {}, - changeDepartment() {}, - changeTab(name) { - if(name == 1) { - this.leftActive = true; - }else { - this.leftActive = false; - } + departmentVisible: false, + dialog: { + save: false }, - handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉); - }, - handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`); + leftActive: true, + input: '', + statusList: [], + input3: '', + tableData: [], + selection: [], + departmentFrom: { + parentId: "" } } + }, + created() { + + }, + mounted() { + this.getStatus(); + this.getOrganizationList(); //閮ㄩ棬 + }, + components: { + saveDialog, importTable + }, + methods: { + getExport() { + this.$HTTP.get(`/api/blade-cps/employee/export-employee?` + this.$TOOL.qsStringify(this.searchData)).then(res => { + if (res.code == 200) { + window.open(res.data.link); + } + }) + }, + parentIdChange(val) { + // var $parentId = this.$refs.parentTree.getCurrentNode().title; + // this.depatmentForm.$parentId = $parentId; + }, + titleListNode(data) { + this.searchData.organizationCode = data.code; + this.searchPerson(); + }, + selectbtn(index) { + this.titleList.forEach(item => { + item.active = false; + }) + this.titleList[index].active = true; + if (this.leftActive) { //閮ㄩ棬 + this.searchData.organizationCode = this.titleList[index].code; + this.searchData.postId = ""; + } else { //宀椾綅 + this.searchData.organizationCode = ""; + this.searchData.postId = this.titleList[index].id; + } + this.searchPerson(); + }, + getOrganizationList() { //閮ㄩ棬 + this.$HTTP.get(`/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1`).then(res => { + if (res.code == 200) { + this.titleList = res.data; + this.titleList[0].active = true; + this.searchData.organizationCode = res.data[0].code; + this.searchPerson(); + } + }) + }, + getPost() { //宀椾綅 + var obj = { + current: 1, + size: -1, + } + this.$HTTP.get(`/api/blade-system/post/page?` + this.$TOOL.qsStringify(obj)).then(res => { + if (res.code == 200) { + this.titleList = res.data.records; + this.titleList[0].active = true; + this.searchData.postId = res.data.records[0].id; + this.searchPerson(); + } + }) + }, + delData(type) { + this.$HTTP.post(`/api/blade-cps/employee/remove?ids=${this.selectId}&type=${type}`).then(res => { + if (res.code == 200) { + this.$message.success("鎿嶄綔鎴愬姛"); + this.delPersonModel = false; + this.selectId = ""; + this.getOrganizationList(); + } + }) + }, + personHandleSuccess() { + if (this.leftActive) { + this.changeTab(1); + } else { + this.changeTab(2); + } + this.searchPerson(); + }, + searchPerson() { + this.$HTTP.get(`/api/blade-cps/employee/list?` + this.$TOOL.qsStringify(this.searchData)).then(res => { + if (res.code == 200) { + res.data.records.forEach(item => { + if (item.dictValue == "鍦ㄨ亴") { + this.searchData.status = item.dictKey; + } + }) + this.tableData = res.data.records; + this.total = res.data.total; + } + }) + }, + getStatus() { //鑾峰彇鍏ㄩ儴璐﹀彿 + this.$HTTP.get(`/api/blade-system/dict/dictionary?code=employee_status`).then(res => { + if (res.code == 200) { + this.statusList = res.data; + } + }) + }, + departmentSubmit() { + var employeeIds = []; + this.selection.forEach(item => { + employeeIds.push(item.id); + }) + this.$refs.dialogForm.validate(async (valid) => { + if (valid) { + this.$HTTP.put(`/api/blade-cps/employee/change-organization?organizationId=${this.departmentFrom.parentId}&employeeIds=${employeeIds.join(",")}`).then(res => { + if (res.code == 200) { + this.searchPerson(); + this.departmentVisible = false; //閮ㄩ棬璋冩暣 + this.departmentFrom.parentId = ""; + this.$message.success("鎿嶄綔鎴愬姛"); + } else { + this.$alert(res.message, "鎻愮ず", { type: 'error' }); + } + }) + } else { + return false; + } + }) + }, + //娣诲姞 + addPerson() { + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open() + }) + }, + table_edit(row) { + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open('edit').setData(row) + }) + }, + //鍒犻櫎 + table_del(row) { + this.selectId = row.id; + this.delPersonModel = true; + }, + handleSelectionChange(selection) { + this.selection = selection; + }, + delPerson() { + if (this.selection.length == 0) { + this.$message({ + message: '璇烽�夋嫨鑷冲皯涓�鏉℃暟鎹�', + type: 'warning' + }); + return; + } + var selStr = ""; + this.selection.map(item => { + selStr += item.id + "," + }) + this.selectId = selStr.replace(/,$/, ''); + this.delPersonModel = true; + }, + changeDepartment() { + if (this.selection.length == 0) { + this.$message({ + message: '璇烽�夋嫨鑷冲皯涓�鏉℃暟鎹�', + type: 'warning' + }); + return; + } + var selStr = ""; + this.selection.map(item => { + selStr += item.id + "," + }) + this.selectId = selStr.replace(/,$/, ''); + this.departmentVisible = true; + }, + changeTab(name) { + this.searchData.current = 1; + this.searchData.size = 15; + this.searchData.organizationCode = ""; + this.searchData.postId = ""; + if (name == 1) { + this.searchData.total = '0'; + this.leftActive = true; + this.getOrganizationList(); + } else { //宀椾綅 + this.searchData.total = '1'; + this.leftActive = false; + this.getPost(); + } + }, + handleSizeChange(val) { + console.log(`姣忛〉 ${val} 鏉); + }, + handleCurrentChange(val) { + console.log(`褰撳墠椤�: ${val}`); + } } +} </script> <style scoped> - .person-person { - width: 100%; - background-color: #f9fafb; - border: 1px solid #dcdfe6; - box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04); - display: flex; - } - .person-person-left { - background-color: #fff; - width: 300px; - min-width: 300px; - margin: 8px; - overflow: hidden; - border-radius: 4px; - padding: 8px; - } - .person-person-right { - background-color: #fff; - flex: 1; - margin-top: 8px; - margin-bottom: 8px; - overflow: hidden; - border-radius: 4px; - padding-top: 8px; - padding-bottom: 8px; - } - .person-left-title { - text-align: center; - vertical-align: middle; - padding-left: 8px; - } - .person-left-title div { - display: inline-block; - width: 55px; - height: 28px; - line-height: 28px; - border: 1px solid #dcdfe6; - cursor: pointer; - } - .person-left-title div:nth-child(1) { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - border-right: 0px; - } - .person-left-title div:nth-child(2) { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - border-left: 0px; - } - .person-left-active { - background-color: #3b8e8e; - color: #fff; - } - .person-left-search { - padding-top: 8px; - padding-bottom: 8px; - } - .person-tree { - background-color: #d8e8e8; - padding: 4px 18px; - font-size: 14px; - font-weight: 400; - } - .right-top { - display: flex; - justify-content: space-between; - border-bottom: 1px solid #dcdfe6; - margin-bottom: 8px; - padding-left: 8px; - padding-right: 8px; - } - .right-title { - font-size: 18px; - font-weight: bold; - padding-bottom: 12px; - margin-bottom: 8px; - } - .searchStatus { - margin-right: 6px; - width: 200px; - } - .right-bottom { - padding-left: 8px; - padding-right: 8px; - margin-bottom: 8px; - } - .right-table { - padding-left: 8px; - padding-right: 8px; - margin-bottom: 8px; - - } - .multipleTableRef { - margin-bottom: 8px; - } +.person-person { + width: 100%; + background-color: #f9fafb; + border: 1px solid #dcdfe6; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04); + display: flex; +} + +.person-person-left { + background-color: #fff; + width: 300px; + min-width: 300px; + margin: 8px; + overflow: hidden; + border-radius: 4px; + padding: 8px; +} + +.person-person-right { + background-color: #fff; + flex: 1; + margin-top: 8px; + margin-bottom: 8px; + overflow: hidden; + border-radius: 4px; + padding-top: 8px; + padding-bottom: 8px; +} + +.person-left-title { + text-align: center; + vertical-align: middle; + padding-left: 8px; +} + +.person-left-title div { + display: inline-block; + width: 55px; + height: 28px; + line-height: 28px; + border: 1px solid #dcdfe6; + cursor: pointer; +} + +.person-left-title div:nth-child(1) { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-right: 0px; +} + +.person-left-title div:nth-child(2) { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-left: 0px; +} + +.person-left-active { + background-color: #409eff; + color: #fff; +} + +.person-left-search { + padding-top: 8px; + padding-bottom: 8px; +} + +.person-tree { + font-size: 14px; + font-weight: 400; +} + +.person-tree div { + margin-bottom: 8px; + padding: 4px 18px; + cursor: pointer; +} + +.right-top { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #dcdfe6; + margin-bottom: 8px; + padding-left: 8px; + padding-right: 8px; +} + +.right-title { + font-size: 18px; + font-weight: bold; + padding-bottom: 12px; + margin-bottom: 8px; + height: 37px; +} + +.searchStatus { + margin-right: 6px; + width: 200px; +} + +.right-bottom { + padding-left: 8px; + padding-right: 8px; + margin-bottom: 8px; +} + +.right-table { + padding-left: 8px; + padding-right: 8px; + margin-bottom: 8px; + +} + +.multipleTableRef { + margin-bottom: 8px; +} + +.footerDiv { + text-align: center; +} + +.delBtn { + color: #fff; + width: 112px; + height: 32px; + display: inline-block; + color: #fa554c; + background-color: #fff; + border: 1px solid #fdbbb7; + text-align: center; + line-height: 32px; + cursor: pointer; +} + +.delBtn:nth-child(1) { + margin-right: 4px; +} + +.delBtn:hover { + background-color: #f34d5b; + border-color: #f34d5b; + color: #fff; +} + +.delIcon { + color: #fff; + background: red; + border-radius: 50%; + display: inline-block; + width: 20px; + height: 20px; + font-size: 14px; + text-align: center; + line-height: 20px; + margin-right: 6px; +} + +.exportBtn { + margin-left: 8px; + margin-right: 8px; +} </style> -- Gitblit v1.9.3