From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 16 七月 2025 22:39:23 +0800 Subject: [PATCH] 添加时间筛选 --- src/views/systemSetting/baseSetting/department/index.vue | 966 ++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 646 insertions(+), 320 deletions(-) diff --git a/src/views/systemSetting/baseSetting/department/index.vue b/src/views/systemSetting/baseSetting/department/index.vue index ca0a571..eab00aa 100644 --- a/src/views/systemSetting/baseSetting/department/index.vue +++ b/src/views/systemSetting/baseSetting/department/index.vue @@ -1,334 +1,660 @@ <template> - <div class="userList"> - <header> - <div class="headerContent"> - <div class="search"> - <span>绛涢�夋潯浠�:</span> - <el-input v-model="context" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> - <div class="findBtn"> - <el-button type="primary" @click="search()" >鏌ヨ</el-button> - </div> - </div> - <div class="addUser"> - <el-button class="addBtn" type="primary" @click="dialogCreate = true">娣诲姞鐢ㄦ埛</el-button> - <el-dialog :visible.sync="dialogCreate" width="45%"> - <createUser :refresh="getUserList" /> - </el-dialog> - </div> + <div class="userList"> + <header> + <div class="headerContent"> + <div class="search"> + <span>绛涢�夋潯浠�:</span> + <el-input v-model="context" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> + <div class="findBtn"> + <el-button type="primary" @click="search()">鏌ヨ</el-button> + <el-upload + class="department-margin-left10" + action="" + ref="uploadFile" + :http-request="importTable" + :show-file-list="false" + :auto-upload="true" + :limit="1" + > + <el-button type="primary">瀵煎叆</el-button> + </el-upload> + <el-button class="department-margin-left10" type="primary" @click="exportTable()">瀵煎嚭</el-button> + </div> + </div> + <div class="addUser"> + <el-button class="addBtn" type="primary" @click="dialogCreate = true" + >鏂板閮ㄩ棬 + </el-button + > + <el-dialog + :visible.sync="dialogCreate" + title="鏂板閮ㄩ棬淇℃伅" + width="45%" + v-if="dialogCreate" + :before-close="handleClose2" + > + <createUser + :refresh="context === '' ? getUserList : search" + @changMyDialog="changMyDialog" + /> + </el-dialog> + </div> + </div> + </header> + <main> + <div class="mainContent"> + <!-- 鏁版嵁灞曠ず --> + <el-table + border + stripe + ref="multipleTable" + :header-cell-style="{ + 'background':'#F5F5F5', + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="tableData" + style="width: 100%" + :row-class-name="tableRowClassName" + @selection-change="tableChange" + > + <el-table-column type="selection" min-width="5"></el-table-column> + <el-table-column prop="id" label="閮ㄩ棬ID" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + <el-table-column prop="departName" label="閮ㄩ棬鍚嶇О" min-width="10"> + </el-table-column> + <el-table-column prop="departTypeName" label="閮ㄩ棬绫诲瀷" min-width="10"> + </el-table-column> + <el-table-column prop="parentDepartName" label="涓婄骇閮ㄩ棬" min-width="10"> + </el-table-column> + <el-table-column prop="departDes" label="閮ㄩ棬鎻忚堪" min-width="30"> + </el-table-column> + <el-table-column prop="status" label="鍚敤" min-width="5"> + <template slot-scope="scope"> + <el-switch + class="switchStyle" + v-model="scope.row.status" + active-color="#3fef9a" + inactive-color="#000212" + disabled + > + </el-switch> + </template> + </el-table-column> + <el-table-column prop="operation" label="鎿嶄綔" min-width="15"> + <template slot-scope="scope"> + <div class="operation"> + <span @click="handleFind(scope.row)">鏌ョ湅</span> + <span class="line">|</span> + <span @click="handleUpdate(scope.row)">淇敼</span> + <span class="line">|</span> + <span @click="handleDelete(scope.row)">鍒犻櫎</span> + <span class="line">|</span> + <span @click="handleChangeStatus(scope.row)">{{ + scope.row.status === true ? "鍋滅敤" : "鍚敤" + }}</span> + </div> + </template> + </el-table-column> + </el-table> + <!-- 鏌ョ湅淇敼椤甸潰 --> + <el-dialog + :visible.sync="dialogUpdate" + width="45%" + :title="updateFlag ? '淇敼閮ㄩ棬淇℃伅' : '鏌ョ湅閮ㄩ棬淇℃伅'" + v-if="dialogUpdate" + :before-close="handleClose" + > + <updateUser + :updateFlag="updateFlag" + :userInfo="userInfo" + :getDepartList="context === '' ? getUserList : search" + @changeDialog="changMyDialog" + /> + </el-dialog> + <!-- tools --> + <div class="tools"> + <div class="funs"> + <div class="funsItem funs-sp"> + <el-checkbox v-model="all" @change="selectAll()" + >鍏ㄩ�� + </el-checkbox + > </div> - </header> - <main> - <div class="mainContent"> - <!-- 鏁版嵁灞曠ず --> - <el-table ref="multipleTable" - :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" - :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> - <el-table-column type="selection" min-width="5"> - </el-table-column> - <el-table-column prop="id" label="閮ㄩ棬ID" min-width="5"> - <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> - </el-table-column> - <el-table-column prop="departName" label="閮ㄩ棬鍚嶇О" min-width="10"> - </el-table-column> - <el-table-column prop="departType" label="閮ㄩ棬绫诲瀷" min-width="10"> - </el-table-column> - <el-table-column prop="departDes" label="閮ㄩ棬鎻忚堪" min-width="10"> - </el-table-column> - <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> - </el-table-column> - <el-table-column prop="status" label="鍚敤" min-width="5"> - <template slot-scope="scope"> - <el-switch class="switchStyle" v-model="scope.row.status" active-text="寮�" inactive-text="鍏�" - active-color="#3fef9a" inactive-color="#000212" @change="handleChangeStatus(scope.row)"> - </el-switch> - </template> - </el-table-column> - <el-table-column prop="operation" label="鎿嶄綔" min-width="15"> - <template slot-scope="scope"> - <div class="operation"> - <!-- <span @click="handleChangeRole(scope.row)">淇敼瑙掕壊</span> --> - <span @click="handleFind(scope.row)">鏌ョ湅</span> - <span class="line">|</span> - <!-- <span>淇敼瀵嗙爜</span> --> - <!-- <span>鍒犻櫎</span> --> - <span @click="handleUpdate(scope.row)">淇敼閮ㄩ棬</span> - </div> - </template> - </el-table-column> - </el-table> - <!-- 鏌ョ湅淇敼椤甸潰 --> - <el-dialog :visible.sync="dialogUpdate" width="45%"> - <updateUser :updateFlag="updateFlag" :userInfo=userInfo /> - </el-dialog> - <!-- 鍒嗛〉 --> - <div class="pagination"> - <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum" - :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev" - @next-click="handleNext"> - </el-pagination> - </div> + <div class="funsItem funs-sp"> + <el-checkbox v-model="unsame" @change="disSame(tableData)" + >鍙嶉�� + </el-checkbox + > </div> - </main> - </div> + <div class="funsItem"> + <el-select + v-model="myIdx" + placeholder="鎵归噺鎿嶄綔" + @change="selectChange" + > + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + :disabled="item.disabled" + > + </el-option> + </el-select> + </div> + </div> + <div class="pagination"> + <el-pagination + background + :current-page="currentPage" + layout="prev, pager, next" + :total="totalNum" + :page-size="pageSize" + @current-change="changeCurrentPage" + @prev-click="handlePrev" + @next-click="handleNext" + > + </el-pagination> + </div> + </div> + </div> + </main> + </div> </template> <script> -import createUser from "./createUser" -import updateUser from "./updateUser" -import helper from "@/utils/mydate.js" +import createUser from "./createUser"; +import updateUser from "./updateUser"; +import {exportTeamInfo, importTeamInfo} from "@/api/system/portal/teamConstruction"; +import {downloadFile} from "@/utils/helper"; +import {exportTeamInfoDepartment, importTeamInfoDepartment} from "@/api/system/department"; + export default { - components: { - createUser, updateUser + components: { + createUser, + updateUser, + }, + data() { + return { + tableData: [], + dialogCreate: false, + dialogUpdate: false, + updateFlag: false, + userInfo: "", + totalNum: 0, + pageSize: 10, + currentPage: 1, + context: "", + all: false, + unsame: false, + myIdx: 0, + preMyIdx: 0, + options: [ + { + value: 0, + label: "鎵归噺鎿嶄綔", + disabled: true, + }, + { + value: 1, + label: "鎵归噺鍚敤", + }, + { + value: 2, + label: "鎵归噺绂佺敤", + }, + { + value: 3, + label: "鎵归噺鍒犻櫎", + }, + ], + tempList: [], + }; + }, + created() { + this.getUserList(); + }, + methods: { + // 瀵煎嚭 + exportTable() { + // const status = this.searchStatus === 2 ? null : this.searchStatus; + exportTeamInfoDepartment({ + // current: this.currentPage, + // size: this.pageSize, + // departName: this.searchDepartment, + // status, + }) + .then((res) => { + console.log(res) + downloadFile(res); + this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" }); + }) + .catch((err) => { + this.$message({ type: "error", message: err }); + }); }, - data() { - return { - tableData: [], - dialogCreate: false, - dialogUpdate: false, - updateFlag: false, - userInfo: '', - totalNum: 200, - pageSize: 10, - currentPage: 1, - context:'' + + // 瀵煎叆 + importTable(file) { + const formData = new FormData(); + formData.append("file", file.file); + console.log(formData) + console.log(file) + importTeamInfoDepartment(formData) + .then(() => { + this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" }); + this.getUserList(); + this.$refs.uploadFile.clearFiles(); + }) + .catch((err) => { + this.$message({ type: "error", message: err }); + this.$refs.uploadFile.clearFiles(); + }); + }, + + selectChange(list) { + console.log(this.tempList); + if (this.tempList.length !== 0) { + if (list === 1) { + this.preMyIdx = list; + this.mulPut(this.tempList, list); } + if (list === 2) { + this.preMyIdx = list; + this.mulPut(this.tempList); + } + if (list === 3) { + this.preMyIdx = list; + this.mulDelete(this.tempList, list); + } + } else { + this.myIdx = this.preMyIdx; + this.$message({ + type: "warning", + message: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁", + }); + } }, - created() { - this.getUserList(); + mulPut(idArr, option) { + const status = option === 1 ? 1 : 0 + const tag = option === 1 ? "鍚敤" : "绂佺敤" + let list = JSON.parse(JSON.stringify(this.tableData)) + list = list.filter(x => idArr.indexOf(x.id) > -1) + list.forEach(x => x.status = status) + console.log(list) + this.$confirm(`鎮ㄧ‘瀹氳鎵归噺${tag}閮ㄩ棬鍚�?`) + .then((_) => { + this.$axios({ + method: "PUT", + url: "sccg/depart/batch_status", + data: list + }).then(res => { + console.log(res) + if (res.code === 200) { + this.$message({ + type: "success", + message: `鎵归噺${tag}閮ㄩ棬鎴愬姛` + }) + this.getUserList() + } else { + this.$message({ + type: "error", + message: res.message, + }) + } + }) + }) }, - methods: { - // 淇敼瑙掕壊 - handleChangeRole(obj) { - this.dialogUpdate = true - this.user = obj; - // console.log(obj) - }, - // 淇敼鐢ㄦ埛鐘舵�� - handleChangeStatus(obj) { - let { id, status } = obj; - status == true ? status = 1 : status = 0; - console.log(id, status); - this.$axios.post(`sccg/depart/status` ,{id:id,status:status}).then(res => { - console.log(res); - }) - }, - // 鑾峰彇鐢ㄦ埛鍒楄〃 - getUserList() { - const that = this; - this.dialogCreate = false; - // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� - this.$axios.get('sccg/depart/page').then(res => { - if (res.code === 200) { - res.data.records.forEach(item => { - item.createTime = helper(item.createTime); - item.status == 1 ? item.status = true : item.status = false; - }) - that.totalNum = res.data.records.length; - that.tableData = res.data.records.slice((that.currentPage - 1) * 10, that.currentPage * 10) - } - }) - }, - search() { - const that = this; - this.dialogCreate = false; - // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� - this.$axios.get('sccg/depart/page',{params:{currentPage:this.currentPage,pageSize:this.pageSize,departName:this.context}}).then(res => { - if (res.code === 200) { - res.data.records.forEach(item => { - item.createTime = helper(item.createTime); - item.status == 1 ? item.status = true : item.status = false; - }) - that.totalNum = res.data.records.length; - that.tableData = res.data.records.slice((that.currentPage-1)*10,that.currentPage*10) - } - }) - }, - // 璁剧疆琛ㄦ牸鏂戦┈绾� - tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 == 0) { - return 'warning-row'; - } else { - return 'success-row'; + // 澶氭潯鏁版嵁鍒犻櫎 + mulDelete(idArr) { + this.$confirm("鎮ㄧ‘瀹氳鎵归噺鍒犻櫎閮ㄩ棬鍚�?") + .then((_) => { + this.$axios({ + method: "post", + url: "sccg/depart/batch_deletion?ids=" + idArr, + }).then((res) => { + if (res.code === 200) { + this.$message({ + type: "success", + message: "鎵归噺鍒犻櫎閮ㄩ棬鎴愬姛", + }); + this.getUserList(); + } else { + this.$message({ + type: "error", + message: res.message, + }); + } + }); + }) + .catch((err) => { + console.log(err); + }); + }, + tableChange(list) { + this.tempList = []; + list.forEach((item) => { + this.tempList.push(item.id); + }); + if (list.length === this.tableData.length) { + this.all = true; + } else { + this.all = false; + } + }, + selectAll() { + this.$refs.multipleTable.toggleAllSelection(); + }, + disSame(list) { + list.forEach((row) => { + this.$refs.multipleTable.toggleRowSelection(row); + }); + }, + // 鍗曟潯鏁版嵁鍒犻櫎 + handleDelete({id}) { + this.$confirm("纭鍒犻櫎锛�") + .then((_) => { + this.$axios({ + method: "post", + url: "sccg/depart/delete", + data: { + id, + }, + }).then((res) => { + this.$message({ + type: res.code === 404 ? "warning" : "success", + message: res.message, + }); + + this.getUserList(); + }); + }) + .catch((_) => { + }); + }, + // 淇敼鐘舵�� + handleChangeStatus(obj) { + let {id, status} = obj; + status == true ? (status = 0) : (status = 1); + this.$axios + .post(`sccg/depart/status`, {id: id, status: status}) + .then((res) => { + if (res.code == 200) { + this.getUserList(); } - return ''; - }, - // 鏌ョ湅鐢ㄦ埛淇℃伅(涓嶅彲淇敼) - handleFind(rowData) { - this.dialogUpdate = true; - this.updateFlag = false; - this.userInfo = rowData; - }, - // 淇敼鐢ㄦ埛閮ㄩ棬淇℃伅 - handleUpdate(rowData) { - this.dialogUpdate = true; - this.updateFlag = true; - this.userInfo = rowData - }, - // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� - changeCurrentPage(page){ - this.currentPage = page; - this.search(); - }, - // 涓婁竴椤电偣鍑讳簨浠� - handlePrev(page){ - this.currentPage = page; - this.search(); - }, - // 涓嬩竴椤电偣鍑讳簨浠� - handleNext(page){ - this.currentPage = page; - this.search(); - }} -} + }); + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + getUserList() { + const that = this; + this.dialogCreate = false; + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + this.$axios + .get("sccg/depart/page", { + params: { + currentPage: this.currentPage, + pageSize: this.pageSize, + departName: this.context, + }, + }) + .then((res) => { + if (res.code === 200) { + res.data.records.forEach((item) => { + item.status == 0 ? (item.status = false) : (item.status = true); + }); + that.totalNum = res.data.total; + that.tableData = res.data.records; + } + }); + }, + search() { + const that = this; + this.dialogCreate = false; + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + this.$axios + .get("sccg/depart/page", { + params: { + currentPage: this.currentPage, + pageSize: this.pageSize, + departName: this.context, + }, + }) + .then((res) => { + if (res.code === 200) { + res.data.records.forEach((item) => { + item.status == 1 ? (item.status = true) : (item.status = false); + }); + that.totalNum = res.data.total; + that.tableData = res.data.records; + } + }); + }, + // 璁剧疆琛ㄦ牸鏂戦┈绾� + tableRowClassName({row, rowIndex}) { + if ((rowIndex + 1) % 2 == 0) { + return "warning-row"; + } else { + return "success-row"; + } + return ""; + }, + // 鏌ョ湅鐢ㄦ埛淇℃伅(涓嶅彲淇敼) + handleFind(rowData) { + this.dialogUpdate = true; + this.updateFlag = false; + this.userInfo = rowData; + }, + // 淇敼鐢ㄦ埛閮ㄩ棬淇℃伅 + handleUpdate(rowData) { + this.dialogUpdate = true; + this.updateFlag = true; + this.userInfo = rowData; + }, + // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� + changeCurrentPage(page) { + this.currentPage = page; + this.search(); + }, + // 涓婁竴椤电偣鍑讳簨浠� + handlePrev(page) { + this.currentPage = page; + this.search(); + }, + // 涓嬩竴椤电偣鍑讳簨浠� + handleNext(page) { + this.currentPage = page; + this.search(); + }, + // 鍏抽棴dialog + changMyDialog({flag}) { + this.dialogUpdate = flag; + this.dialogCreate = flag; + }, + handleClose(done) { + if (this.updateFlag) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpdate = false; + this.dialogCreate = false; + done(); + }) + .catch((_) => { + }); + } else { + done(); + } + }, + handleClose2(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + done(); + }) + .catch((_) => { + }); + }, + }, +}; </script> <style lang="scss" scoped> -.userList { - text-align: left; - margin: 10px 20px; - color: #4b9bb7; - - header { - background-color: #09152f; - border: 1pox solid #fff; - - .headerContent { - padding: 0 40px; - display: flex; - line-height: 100px; - justify-content: space-between; - align-items: center; - - .search { - display: flex; - justify-content: flex-start; - - span { - flex: 1; - } - - .el-input { - flex: 2; - color: #1d3f57; - - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } - } - - } - - .findBtn { - line-height: 100px; - margin-left: 15px; - display: flex; - align-items: center; - margin-top: -2px; - - .el-button { - padding: 12px 25px; - border-radius: 20px; - } - } - - .addBtn { - background-color: #eb5d01; - border: none; - border-radius: 20px; - padding: 12px 30px; - } - } - } - - main { - background-color: #09152f; - margin-top: 20px; - padding-bottom: 50px; - border: 1pox solid #fff; - - .mainTitle { - line-height: 60px; - } - - .pagination { - margin-top: 50px; - display: flex; - line-height: 50px; - justify-content: center; - - &::v-deep li, - &::v-deep .btn-prev, - &::v-deep .btn-next { - background-color: #071f39; - color: #4b9bb7; - } - } - - .el-table { - color: #4b9bb7; - font-size: 10px; - - &::v-deep .el-table__empty-block { - background-color: #09152f; - } - - &::v-deep .el-table__empty-block { - color: #4b9bb7; - } - - .operation { - display: flex; - - .line { - padding: 0 5px; - } - - span:hover { - cursor: pointer; - } - } - } - - .el-table::v-deep .warning-row { - background: #06122c; - } - - .el-table::v-deep .success-row { - background: #071f39; - } - - &::v-deep .switchStyle .el-switch__label { - position: absolute; - display: none; - color: #fff; - } - - &::v-deep .el-switch__core { - background-color: rgba(166, 166, 166, 1); - } - - &::v-deep .switchStyle .el-switch__label--left { - z-index: 9; - left: 20px; - } - - &::v-deep .switchStyle .el-switch__label--right { - z-index: 9; - left: 4px; - } - - &::v-deep .switchStyle .el-switch__label.is-active { - display: block; - } - - &::v-deep .switchStyle.el-switch .el-switch__core, - &::v-deep .el-switch .el-switch__label { - width: 50px !important; - } - } - - &::v-deep .el-dialog__header, - &::v-deep .el-dialog__body { - background-color: #06122c; - } +.department-margin-left10{ + margin-left: 10px; } -</style> \ No newline at end of file +.userList { + text-align: left; + padding: 10px 20px; + // color: #4b9bb7; + //height: 100%; + border: 1px solid #ccc; + header { + // background-color: white; + // border: 1 pox solid #fff; + + .headerContent { + padding: 0; + display: flex; + line-height: 100px; + justify-content: space-between; + align-items: center; + + .search { + display: flex; + justify-content: flex-start; + + span { + flex: 1; + } + + .el-input { + flex: 2; + // color: #1d3f57; + + // &::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; + // } + } + } + + .findBtn { + line-height: 100px; + margin-left: 15px; + display: flex; + align-items: center; + margin-top: -2px; + + .el-button { + padding: 12px 25px; + //border-radius: 20px; + } + } + + .addBtn { + //background-color: #eb5d01; + border: none; + //border-radius: 20px; + padding: 12px 30px; + } + } + } + + main { + // background-color: #09152f; + margin-top: 20px; + padding-bottom: 50px; + // border: 1 pox solid #fff; + + .mainTitle { + line-height: 60px; + } + + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0; + + .funs-sp { + // border: 1px solid #17324c; + border: 1px solid #DCDFE6; + background-color: #fff; + } + + .funs { + display: flex; + + .funsItem { + line-height: 28px; + display: flex; + align-items: center; + border-radius: 4px; + font-size: 12px; + margin-left: 10px; + + .el-checkbox { + width: 80px; + padding: 0 10px; + } + + .el-select { + width: 120px; + } + + // &::v-deep .el-input__inner { + // border: none; + // background-color: #09152f; + // } + + // &:hover { + // border: 1px solid #4b9bb7; + // } + + // &:hover .el-checkbox { + // color: #4b9bb7; + // } + } + } + + .pagination { + margin-top: 50px; + display: flex; + line-height: 50px; + justify-content: center; + + .el-pagination { + // &::v-deep li, + // &::v-deep .btn-prev, + // &::v-deep .btn-next { + // background-color: #071f39; + // color: #4b9bb7; + // } + + // &::v-deep .active { + // background-color: #409eff; + // color: #fff; + // } + } + } + } + + .el-table { + // color: #4b9bb7; + // font-size: 10px; + + .operation { + display: flex; + + .line { + padding: 0 5px; + } + color: var(--operation-color); + span:hover { + cursor: pointer; + } + } + } + + } +} +</style> -- Gitblit v1.8.0