From ad484143a31c9eca3f6d3a4f6d642f28318d5e24 Mon Sep 17 00:00:00 2001 From: wl <173@qq.com> Date: 星期四, 29 十二月 2022 17:57:34 +0800 Subject: [PATCH] fix: 设置栏目及其它bug --- .history/src/views/layout/components/Header/index_20221229154133.vue | 423 + .history/src/views/layout/components/Header/index_20221229164620.vue | 427 + src/views/systemSetting/baseSetting/department/updateUser/index.vue | 15 vue.config.js | 4 .history/src/views/layout/components/Header/index_20221229173832.vue | 431 + .history/src/views/layout/components/Header/index_20221229172743.vue | 427 + .history/src/views/layout/components/Header/index_20221229164455.vue | 425 + .history/src/views/layout/components/Header/index_20221229163654.vue | 425 + .history/vue.config_20221215133439.js | 130 .history/src/views/layout/components/Header/index_20221229163914.vue | 425 + .history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229141633.vue | 380 + .history/src/views/layout/components/Header/index_20221229154037.vue | 424 + .history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140604.vue | 380 + .history/src/views/layout/components/Header/index_20221229164422.vue | 425 + src/views/systemSetting/baseSetting/department/index.vue | 6 .history/src/views/layout/components/Header/index_20221229154338.vue | 424 + .history/src/views/layout/components/Header/index_20221229154333.vue | 424 + .history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140400.vue | 380 + .history/src/views/layout/components/Header/index_20221229173413.vue | 429 + .history/src/views/layout/components/Header/index_20221229173350.vue | 429 + .history/src/views/systemSetting/baseSetting/department/index_20221229141750.vue | 599 ++ .history/src/views/layout/components/Header/index_20221229164122.vue | 425 + .history/src/views/layout/components/Header/index_20221229172902.vue | 428 + .history/src/views/layout/components/Header/index_20221229172711.vue | 427 + .history/src/views/layout/components/Header/index_20221229154453.vue | 423 + .history/src/views/layout/components/Header/index_20221229164339.vue | 425 + .history/src/views/layout/components/Header/index_20221229154534.vue | 424 + .history/src/views/layout/components/Header/index_20221229172959.vue | 427 + src/views/layout/components/Header/index.vue | 51 .history/src/views/systemSetting/baseSetting/department/index_20221228101417.vue | 595 ++ .history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229133119.vue | 379 + .history/src/views/systemSetting/baseSetting/department/index_20221229141430.vue | 548 + .history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140539.vue | 380 + .history/vue.config_20221229155819.js | 130 .history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140509.vue | 379 + .history/src/views/layout/components/Header/index_20221229152945.vue | 413 + .history/src/views/layout/components/Header/index_20221229163945.vue | 425 + .history/src/views/systemSetting/baseSetting/department/index_20221229141527.vue | 595 ++ .history/src/views/systemSetting/baseSetting/department/index_20221229141938.vue | 599 ++ .history/src/views/layout/components/Header/index_20221229154407.vue | 423 + .history/src/views/layout/components/Header/index_20221229173856.vue | 431 + .history/src/views/systemSetting/baseSetting/department/index_20221229142222.vue | 599 ++ .history/src/views/layout/components/Header/index_20221221092725.vue | 384 + 43 files changed, 16,730 insertions(+), 12 deletions(-) diff --git a/.history/src/views/layout/components/Header/index_20221221092725.vue b/.history/src/views/layout/components/Header/index_20221221092725.vue new file mode 100644 index 0000000..08c899e --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221221092725.vue @@ -0,0 +1,384 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229152945.vue b/.history/src/views/layout/components/Header/index_20221229152945.vue new file mode 100644 index 0000000..a9bfb10 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229152945.vue @@ -0,0 +1,413 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="tableData" + style="width: 100%" + :row-class-name="tableRowClassName" + @selection-change="tableChange" + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="id" label="閮ㄩ棬ID" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229154037.vue b/.history/src/views/layout/components/Header/index_20221229154037.vue new file mode 100644 index 0000000..da0c97b --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229154037.vue @@ -0,0 +1,424 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <button :pro></button> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="tableData" + style="width: 100%" + :row-class-name="tableRowClassName" + @selection-change="tableChange" + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="id" label="閮ㄩ棬ID" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + console.log(res); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229154133.vue b/.history/src/views/layout/components/Header/index_20221229154133.vue new file mode 100644 index 0000000..90bb5b0 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229154133.vue @@ -0,0 +1,423 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="tableData" + style="width: 100%" + :row-class-name="tableRowClassName" + @selection-change="tableChange" + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="id" label="閮ㄩ棬ID" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + console.log(res); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229154333.vue b/.history/src/views/layout/components/Header/index_20221229154333.vue new file mode 100644 index 0000000..d6faebc --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229154333.vue @@ -0,0 +1,424 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + :row-class-name="tableRowClassName" + @selection-change="tableChange" + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="icolumnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229154338.vue b/.history/src/views/layout/components/Header/index_20221229154338.vue new file mode 100644 index 0000000..ccb385f --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229154338.vue @@ -0,0 +1,424 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="30%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + :row-class-name="tableRowClassName" + @selection-change="tableChange" + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="icolumnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229154407.vue b/.history/src/views/layout/components/Header/index_20221229154407.vue new file mode 100644 index 0000000..1582519 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229154407.vue @@ -0,0 +1,423 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="30%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="icolumnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229154453.vue b/.history/src/views/layout/components/Header/index_20221229154453.vue new file mode 100644 index 0000000..bc74afa --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229154453.vue @@ -0,0 +1,423 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="30%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="icolumnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229154534.vue b/.history/src/views/layout/components/Header/index_20221229154534.vue new file mode 100644 index 0000000..3ab6db9 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229154534.vue @@ -0,0 +1,424 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="30%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="icolumnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229163654.vue b/.history/src/views/layout/components/Header/index_20221229163654.vue new file mode 100644 index 0000000..cc7097b --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229163654.vue @@ -0,0 +1,425 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="30%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="icolumnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:false, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229163914.vue b/.history/src/views/layout/components/Header/index_20221229163914.vue new file mode 100644 index 0000000..d1ec189 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229163914.vue @@ -0,0 +1,425 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="30%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="icolumnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229163945.vue b/.history/src/views/layout/components/Header/index_20221229163945.vue new file mode 100644 index 0000000..eb2ce25 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229163945.vue @@ -0,0 +1,425 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="30%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="columnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229164122.vue b/.history/src/views/layout/components/Header/index_20221229164122.vue new file mode 100644 index 0000000..f064758 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229164122.vue @@ -0,0 +1,425 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="columnName" min-width="5"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229164339.vue b/.history/src/views/layout/components/Header/index_20221229164339.vue new file mode 100644 index 0000000..98e3d2f --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229164339.vue @@ -0,0 +1,425 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229164422.vue b/.history/src/views/layout/components/Header/index_20221229164422.vue new file mode 100644 index 0000000..7f4cdac --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229164422.vue @@ -0,0 +1,425 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 80%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229164455.vue b/.history/src/views/layout/components/Header/index_20221229164455.vue new file mode 100644 index 0000000..71bdcaa --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229164455.vue @@ -0,0 +1,425 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 40%" + + > + <el-checkbox v-model="checked3" label="澶囬�夐」1" ></el-checkbox> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229164620.vue b/.history/src/views/layout/components/Header/index_20221229164620.vue new file mode 100644 index 0000000..bda83d3 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229164620.vue @@ -0,0 +1,427 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55"> + </el-table-column> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn' + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229172711.vue b/.history/src/views/layout/components/Header/index_20221229172711.vue new file mode 100644 index 0000000..0c7c24c --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229172711.vue @@ -0,0 +1,427 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55"> + </el-table-column> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+this.user.id + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229172743.vue b/.history/src/views/layout/components/Header/index_20221229172743.vue new file mode 100644 index 0000000..c334c1d --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229172743.vue @@ -0,0 +1,427 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55"> + </el-table-column> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+this.info.user.id + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229172902.vue b/.history/src/views/layout/components/Header/index_20221229172902.vue new file mode 100644 index 0000000..2d3c454 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229172902.vue @@ -0,0 +1,428 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55"> + </el-table-column> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + console.log(res.data); + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229172959.vue b/.history/src/views/layout/components/Header/index_20221229172959.vue new file mode 100644 index 0000000..56bfa72 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229172959.vue @@ -0,0 +1,427 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55"> + </el-table-column> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229173350.vue b/.history/src/views/layout/components/Header/index_20221229173350.vue new file mode 100644 index 0000000..3b7295c --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229173350.vue @@ -0,0 +1,429 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55"> + </el-table-column> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + <el-button type="text" @click="channelSetting">鏇存柊</el-button> + <el-button type="text" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229173413.vue b/.history/src/views/layout/components/Header/index_20221229173413.vue new file mode 100644 index 0000000..7bb7198 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229173413.vue @@ -0,0 +1,429 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55"> + </el-table-column> + <el-table-column prop="columnName" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鏇存柊</el-button> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229173832.vue b/.history/src/views/layout/components/Header/index_20221229173832.vue new file mode 100644 index 0000000..24b0ae4 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229173832.vue @@ -0,0 +1,431 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="20%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鏇存柊</el-button> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221229173856.vue b/.history/src/views/layout/components/Header/index_20221229173856.vue new file mode 100644 index 0000000..6d55cf9 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221229173856.vue @@ -0,0 +1,431 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鏇存柊</el-button> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/systemSetting/baseSetting/department/index_20221228101417.vue b/.history/src/views/systemSetting/baseSetting/department/index_20221228101417.vue new file mode 100644 index 0000000..a3c8d40 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/index_20221228101417.vue @@ -0,0 +1,595 @@ +<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" + 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 + ref="multipleTable" + :header-cell-style="{ + '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> + </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> + <div class="funsItem funs-sp"> + <el-checkbox v-model="unsame" @change="disSame(tableData)" + >鍙嶉�� + </el-checkbox + > + </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"; + +export default { + 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: { + 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: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁", + }); + } + }, + 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, + }) + } + }) + }) + }, + // 澶氭潯鏁版嵁鍒犻櫎 + 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 = 1) : (status = 0); + this.$axios + .post(`sccg/depart/status`, {id: id, status: status}) + .then((res) => { + if (res.code == 200) { + this.getUserList(); + } + }); + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + 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: white; + // border: 1 pox 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: 1 pox solid #fff; + + .mainTitle { + line-height: 60px; + } + + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs-sp { + // border: 1px solid #17324c; + } + + .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; + } + + span:hover { + cursor: pointer; + } + } + } + + } +} +</style> diff --git a/.history/src/views/systemSetting/baseSetting/department/index_20221229141430.vue b/.history/src/views/systemSetting/baseSetting/department/index_20221229141430.vue new file mode 100644 index 0000000..dad6187 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/index_20221229141430.vue @@ -0,0 +1,548 @@ +<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" 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 ref="multipleTable" :header-cell-style="{ + '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> + <div class="funsItem funs-sp"> + <el-checkbox v-model="unsame" @change="disSame(tableData)">鍙嶉�� + </el-checkbox> + </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"> + l-pagination> + </div> + </div> + </div> + </main> + </div> +</template> +<script> +import createUser from "./createUser"; +import updateUser from "./updateUser"; + +export default { + 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: { + 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: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁", + }); + } + }, + 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, + }) + } + }) + }) + }, + // 澶氭潯鏁版嵁鍒犻櫎 + 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 = 1) : (status = 0); + this.$axios + .post(`sccg/depart/status`, { id: id, status: status }) + .then((res) => { + if (res.code == 200) { + this.getUserList(); + } + }); + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + 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) { + firm("纭鍏抽棴锛�") + + done(); + }) + .catch((_) => { + }); + }, +}, +}; +</script> +<style lang="scss" scoped> +.userList { + text-align: left; + margin: 10px 20px; + // color: #4b9bb7; + + header { + // background-color: white; + // border: 1 pox 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: 1 pox solid #fff; + + .mainTitle { + line-height: 60px; + } + + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs-sp { + // border: 1px solid #17324c; + } + + .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; + } + + span:hover { + cursor: pointer; + } + } + } + + } +} +</style> diff --git a/.history/src/views/systemSetting/baseSetting/department/index_20221229141527.vue b/.history/src/views/systemSetting/baseSetting/department/index_20221229141527.vue new file mode 100644 index 0000000..a3c8d40 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/index_20221229141527.vue @@ -0,0 +1,595 @@ +<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" + 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 + ref="multipleTable" + :header-cell-style="{ + '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> + </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> + <div class="funsItem funs-sp"> + <el-checkbox v-model="unsame" @change="disSame(tableData)" + >鍙嶉�� + </el-checkbox + > + </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"; + +export default { + 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: { + 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: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁", + }); + } + }, + 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, + }) + } + }) + }) + }, + // 澶氭潯鏁版嵁鍒犻櫎 + 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 = 1) : (status = 0); + this.$axios + .post(`sccg/depart/status`, {id: id, status: status}) + .then((res) => { + if (res.code == 200) { + this.getUserList(); + } + }); + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + 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: white; + // border: 1 pox 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: 1 pox solid #fff; + + .mainTitle { + line-height: 60px; + } + + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs-sp { + // border: 1px solid #17324c; + } + + .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; + } + + span:hover { + cursor: pointer; + } + } + } + + } +} +</style> diff --git a/.history/src/views/systemSetting/baseSetting/department/index_20221229141750.vue b/.history/src/views/systemSetting/baseSetting/department/index_20221229141750.vue new file mode 100644 index 0000000..a516313 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/index_20221229141750.vue @@ -0,0 +1,599 @@ +<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" + 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 + ref="multipleTable" + :header-cell-style="{ + '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> + <div class="funsItem funs-sp"> + <el-checkbox v-model="unsame" @change="disSame(tableData)" + >鍙嶉�� + </el-checkbox + > + </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"; + +export default { + 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: { + 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: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁", + }); + } + }, + 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, + }) + } + }) + }) + }, + // 澶氭潯鏁版嵁鍒犻櫎 + 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 = 1) : (status = 0); + this.$axios + .post(`sccg/depart/status`, {id: id, status: status}) + .then((res) => { + if (res.code == 200) { + this.getUserList(); + } + }); + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + 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: white; + // border: 1 pox 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: 1 pox solid #fff; + + .mainTitle { + line-height: 60px; + } + + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs-sp { + // border: 1px solid #17324c; + } + + .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; + } + + span:hover { + cursor: pointer; + } + } + } + + } +} +</style> diff --git a/.history/src/views/systemSetting/baseSetting/department/index_20221229141938.vue b/.history/src/views/systemSetting/baseSetting/department/index_20221229141938.vue new file mode 100644 index 0000000..7f0f8d5 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/index_20221229141938.vue @@ -0,0 +1,599 @@ +<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" + 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 + ref="multipleTable" + :header-cell-style="{ + '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> + <div class="funsItem funs-sp"> + <el-checkbox v-model="unsame" @change="disSame(tableData)" + >鍙嶉�� + </el-checkbox + > + </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"; + +export default { + 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: { + 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: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁", + }); + } + }, + 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, + }) + } + }) + }) + }, + // 澶氭潯鏁版嵁鍒犻櫎 + 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(); + } + }); + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + 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: white; + // border: 1 pox 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: 1 pox solid #fff; + + .mainTitle { + line-height: 60px; + } + + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs-sp { + // border: 1px solid #17324c; + } + + .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; + } + + span:hover { + cursor: pointer; + } + } + } + + } +} +</style> diff --git a/.history/src/views/systemSetting/baseSetting/department/index_20221229142222.vue b/.history/src/views/systemSetting/baseSetting/department/index_20221229142222.vue new file mode 100644 index 0000000..7f0f8d5 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/index_20221229142222.vue @@ -0,0 +1,599 @@ +<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" + 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 + ref="multipleTable" + :header-cell-style="{ + '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> + <div class="funsItem funs-sp"> + <el-checkbox v-model="unsame" @change="disSame(tableData)" + >鍙嶉�� + </el-checkbox + > + </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"; + +export default { + 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: { + 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: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁", + }); + } + }, + 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, + }) + } + }) + }) + }, + // 澶氭潯鏁版嵁鍒犻櫎 + 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(); + } + }); + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + 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: white; + // border: 1 pox 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: 1 pox solid #fff; + + .mainTitle { + line-height: 60px; + } + + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs-sp { + // border: 1px solid #17324c; + } + + .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; + } + + span:hover { + cursor: pointer; + } + } + } + + } +} +</style> diff --git a/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229133119.vue b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229133119.vue new file mode 100644 index 0000000..6c14173 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229133119.vue @@ -0,0 +1,379 @@ +<template> + <div class="updateUser"> + <main> + <div class="mainContent"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" + label-position="right"> + <!-- 閮ㄩ棬鍚嶇О --> + <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName"> + <el-input v-model="user.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" :disabled="!updateFlag"></el-input> + </el-form-item> + <!-- 涓婄骇閮ㄩ棬 --> + <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> + <el-select v-model="user.parentId" placeholder="璇烽�夋嫨涓婄骇閮ㄩ棬" :disabled="!updateFlag"> + <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!-- 閮ㄩ棬绫诲瀷 --> + <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType"> + <el-select v-model="user.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷" :disabled="!updateFlag"> + <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!--娣诲姞浜哄憳 --> + <el-form-item class="optionItem add" label="閮ㄩ棬浜哄憳:"> + <ul class="addPerson"> + <li v-for="(item, index) in checkedList" :key="index" @click="setLeader(index)"> + <div class="li-item"> + <div class="li-icon"> + <i :class="[ + 'el-icon-user-solid', + item.leader ? 'leader' : '', + ]"></i> + </div> + <label style="font-size: 12px" :class="[item.leader ? 'leader' : '']">{{ item.username }}</label> + </div> + </li> + <li class="li-btn" v-if="updateFlag"> + <i class="el-icon-plus" @click="openUser = true"></i> + </li> + </ul> + <div class="card" v-if="openUser"> + <el-card class="box-card"> + <div slot="header" class="myclear"> + <span>宸ヤ綔浜哄憳</span> + <div @click="addUser">纭</div> + </div> + <div class="scrollWrap"> + <el-checkbox-group v-model="checkedUser"> + <el-checkbox v-for="user in userList" :label="user.id" :key="user.id"> + {{ user.username }} + </el-checkbox> + </el-checkbox-group> + </div> + <div class="hidebar"></div> + </el-card> + </div> + </el-form-item> + <el-form-item style="margin-top: -40px"> + <label style="color: #ff0000ab">绾㈣壊浠h〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label> + </el-form-item> + <!-- 閮ㄩ棬鎻忚堪 --> + <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes"> + <el-input type="textarea" :rows="4" v-model="user.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�" :disabled="!updateFlag"> + </el-input> + </el-form-item> + <el-form-item v-if="updateFlag"> + <div class="optionBtn"> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 + </el-button> + </div> + </el-form-item> + </el-form> + </div> + </main> + </div> +</template> +<script> +import { getTypeList } from "@/utils/helper"; +export default { + data() { + const validateNickname = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); + } else { + callback(); + } + }; + const validatePass = (rule, value, callback) => { + if (!value) { + callback(); + } else { + callback(); + } + }; + return { + user: { + id: "", + departName: "", + parentId: "", + departDes: "", + departType: "", + }, + createUserRules: { + departName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], + parentId: [ + { required: false, trigger: "blur", validator: validatePass }, + ], + departDes: [{ required: false, trigger: "blur" }], + departType: [{ required: false, trigger: "blur" }], + }, + userList: [], + departList: [], + typeList: [], + checkedUser: [], + checkedList: [], + openUser: false, + }; + }, + created() { + const that = this; + this.user = JSON.parse(JSON.stringify(that.userInfo)); + console.log(this.user); + this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId; + this.checkedList = this.user.userInfoDTOS; + this.checkedList.forEach((e) => { + this.checkedUser.push(e.userId); + }); + console.log(this.checkedUser) + this.$axios({ + method: "get", + url: "sccg/depart/tree", + }).then((res) => { + that.departList = res.data; + }); + this.getUserList(this.user.id); + // 鑾峰彇閮ㄩ棬绫诲瀷 + this.getDepartType(); + }, + methods: { + handleUser() { + this.$refs["user"].validate((valid) => { + if (valid) { + const { user, checkedList } = this; + const arr = []; + checkedList.forEach((item) => { + arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId }); + }); + if (arr.length === 0) { + this.$message({ + type: 'warning', + message: '璇烽�夋嫨閮ㄩ棬浜哄憳', + }) + } else { + this.$axios + .post("sccg/depart/update", { + id: user.id, + departName: user.departName, + parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId, + departDes: user.departDes, + departManagerList: arr, + }) + .then((res) => { + this.$message({ + message: res.message, + type: res.code === 200 ? "success" : "warning", + }); + this.$emit("changeDialog", { flag: false }); + this.getDepartList(); + }); + } + } else { + return false; + } + }); + }, + // 鑾峰彇閮ㄩ棬绫诲瀷 + async getDepartType() { + this.typeList = await getTypeList(1, "08"); + }, + + // 璁剧疆棰嗗 + setLeader(idx) { + if (this.updateFlag) { + this.checkedList.forEach((item, index) => { + item.leader = index === idx; + }); + } + }, + + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + getUserList(id) { + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => { + if (res.code === 200) { + this.userList = res.data; + } + }); + }, + addUser() { + this.checkedList = []; + this.userList.forEach((item) => { + this.checkedUser.forEach((child) => { + if (item.id == child) { + this.checkedList.push({ + id: item.id, + username: item.username, + leader: false, + }); + } + }); + }); + this.checkedList[0].leader = true; + console.log(this.checkedList); + this.openUser = false; + }, + }, + props: ["userInfo", "updateFlag", "getDepartList", "changeDialog"], +}; +</script> +<style lang="scss" scoped> +.updateUser { + border-radius: 1px; + // background-color: #09152f; + + main { + // border: 1px solid #fff; + text-align: left; + padding: 0 55px; + // background-color: #09152f; + padding-bottom: 50px; + + // .mainTitle { + // color: #4b9bb7; + // font-weight: 600; + // line-height: 100px; + // font-size: 14px; + // } + + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } + } + } +} + +.updateUser::v-deep .el-form-item__label { + // color: #4b9bb7; +} + +.updateUser::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; +} + +.addPerson { + display: flex; + list-style: none; + padding: 0; + flex-wrap: wrap; + max-width: 280px; + + li { + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } +} + +.li-icon { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + margin: 0 auto; +} + +.li-btn { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; +} + +.card { + position: absolute; + z-index: 2000; + right: 0; + + .box-card { + min-height: 240px; + max-height: 260px; + overflow: hidden; + // background-color: #09152f; + position: relative; + max-width: 220px; + + .scrollWrap { + overflow: scroll; + height: 180px; + position: relative; + color: #4b9bb7; + + .el-checkbox-group { + display: flex; + flex-direction: column; + + .el-checkbox { + line-height: 20px; + } + } + } + + .myclear { + width: 100%; + line-height: 20px; + color: #4b9bb7; + display: flex; + justify-content: space-between; + } + + .hidebar { + position: absolute; + top: 77px; + right: 20px; + width: 20px; + height: 180px; + // background-color: #09152f; + } + + .item { + line-height: 40px; + } + } +} + +.leader { + color: red; +} + +.el-input { + width: 280px !important; +} +</style> \ No newline at end of file diff --git a/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140400.vue b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140400.vue new file mode 100644 index 0000000..8251c9b --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140400.vue @@ -0,0 +1,380 @@ +<template> + <div class="updateUser"> + <main> + <div class="mainContent"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" + label-position="right"> + <!-- 閮ㄩ棬鍚嶇О --> + <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName"> + <el-input v-model="user.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" :disabled="!updateFlag"></el-input> + </el-form-item> + <!-- 涓婄骇閮ㄩ棬 --> + <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> + <el-select v-model="user.parentId" placeholder="璇烽�夋嫨涓婄骇閮ㄩ棬" :disabled="!updateFlag"> + <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!-- 閮ㄩ棬绫诲瀷 --> + <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType"> + <el-select v-model="user.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷" :disabled="!updateFlag"> + <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!--娣诲姞浜哄憳 --> + <el-form-item class="optionItem add" label="閮ㄩ棬浜哄憳:"> + <ul class="addPerson"> + <li v-for="(item, index) in checkedList" :key="index" @click="setLeader(index)"> + <div class="li-item"> + <div class="li-icon"> + <i :class="[ + 'el-icon-user-solid', + item.leader ? 'leader' : '', + ]"></i> + </div> + <label style="font-size: 12px" :class="[item.leader ? 'leader' : '']">{{ item.username }}</label> + </div> + </li> + <li class="li-btn" v-if="updateFlag"> + <i class="el-icon-plus" @click="openUser = true"></i> + </li> + </ul> + <div class="card" v-if="openUser"> + <el-card class="box-card"> + <div slot="header" class="myclear"> + <span>宸ヤ綔浜哄憳</span> + <div @click="addUser">纭</div> + </div> + <div class="scrollWrap"> + <el-checkbox-group v-model="checkedUser"> + <el-checkbox v-for="user in userList" :label="user.id" :key="user.id"> + {{ user.username }} + </el-checkbox> + </el-checkbox-group> + </div> + <div class="hidebar"></div> + </el-card> + </div> + </el-form-item> + <el-form-item style="margin-top: -40px"> + <label style="color: #ff0000ab">绾㈣壊浠h〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label> + </el-form-item> + <!-- 閮ㄩ棬鎻忚堪 --> + <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes"> + <el-input type="textarea" :rows="4" v-model="user.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�" :disabled="!updateFlag"> + </el-input> + </el-form-item> + <el-form-item v-if="updateFlag"> + <div class="optionBtn"> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 + </el-button> + </div> + </el-form-item> + </el-form> + </div> + </main> + </div> +</template> +<script> +import { getTypeList } from "@/utils/helper"; +export default { + data() { + const validateNickname = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); + } else { + callback(); + } + }; + const validatePass = (rule, value, callback) => { + if (!value) { + callback(); + } else { + callback(); + } + }; + return { + user: { + id: "", + departName: "", + parentId: "", + departDes: "", + departType: "", + }, + createUserRules: { + departName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], + parentId: [ + { required: false, trigger: "blur", validator: validatePass }, + ], + departDes: [{ required: false, trigger: "blur" }], + departType: [{ required: false, trigger: "blur" }], + }, + userList: [], + departList: [], + typeList: [], + checkedUser: [], + checkedList: [], + openUser: false, + }; + }, + created() { + const that = this; + this.user = JSON.parse(JSON.stringify(that.userInfo)); + console.log(this.user); + this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId; + this.checkedList = this.user.userInfoDTOS; + this.checkedList.forEach((e) => { + this.checkedUser.push(e.userId); + }); + console.log(this.checkedUser) + this.$axios({ + method: "get",handleUser + url: "sccg/depart/tree", + }).then((res) => { + that.departList = res.data; + }); + this.getUserList(this.user.id); + // 鑾峰彇閮ㄩ棬绫诲瀷 + this.getDepartType(); + }, + methods: { + handleUser() { + this.$refs["user"].validate((valid) => { + if (valid) { + const { user, checkedList } = this; + const arr = []; + checkedList.forEach((item) => { + arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId }); + }); + if (arr.length === 0) { + this.$message({ + type: 'warning', + message: '璇烽�夋嫨閮ㄩ棬浜哄憳', + }) + } else { + this.$axios + .post("sccg/depart/update", { + id: user.id, + departName: user.departName, + parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId, + departDes: user.departDes, + departManagerList: arr, + departType: user.departType + }) + .then((res) => { + this.$message({ + message: res.message, + type: res.code === 200 ? "success" : "warning", + }); + this.$emit("changeDialog", { flag: false }); + this.getDepartList(); + }); + } + } else { + return false; + } + }); + }, + // 鑾峰彇閮ㄩ棬绫诲瀷 + async getDepartType() { + this.typeList = await getTypeList(1, "08"); + }, + + // 璁剧疆棰嗗 + setLeader(idx) { + if (this.updateFlag) { + this.checkedList.forEach((item, index) => { + item.leader = index === idx; + }); + } + }, + + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + getUserList(id) { + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => { + if (res.code === 200) { + this.userList = res.data; + } + }); + }, + addUser() { + this.checkedList = []; + this.userList.forEach((item) => { + this.checkedUser.forEach((child) => { + if (item.id == child) { + this.checkedList.push({ + id: item.id, + username: item.username, + leader: false, + }); + } + }); + }); + this.checkedList[0].leader = true; + console.log(this.checkedList); + this.openUser = false; + }, + }, + props: ["userInfo", "updateFlag", "getDepartList", "changeDialog"], +}; +</script> +<style lang="scss" scoped> +.updateUser { + border-radius: 1px; + // background-color: #09152f; + + main { + // border: 1px solid #fff; + text-align: left; + padding: 0 55px; + // background-color: #09152f; + padding-bottom: 50px; + + // .mainTitle { + // color: #4b9bb7; + // font-weight: 600; + // line-height: 100px; + // font-size: 14px; + // } + + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } + } + } +} + +.updateUser::v-deep .el-form-item__label { + // color: #4b9bb7; +} + +.updateUser::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; +} + +.addPerson { + display: flex; + list-style: none; + padding: 0; + flex-wrap: wrap; + max-width: 280px; + + li { + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } +} + +.li-icon { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + margin: 0 auto; +} + +.li-btn { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; +} + +.card { + position: absolute; + z-index: 2000; + right: 0; + + .box-card { + min-height: 240px; + max-height: 260px; + overflow: hidden; + // background-color: #09152f; + position: relative; + max-width: 220px; + + .scrollWrap { + overflow: scroll; + height: 180px; + position: relative; + color: #4b9bb7; + + .el-checkbox-group { + display: flex; + flex-direction: column; + + .el-checkbox { + line-height: 20px; + } + } + } + + .myclear { + width: 100%; + line-height: 20px; + color: #4b9bb7; + display: flex; + justify-content: space-between; + } + + .hidebar { + position: absolute; + top: 77px; + right: 20px; + width: 20px; + height: 180px; + // background-color: #09152f; + } + + .item { + line-height: 40px; + } + } +} + +.leader { + color: red; +} + +.el-input { + width: 280px !important; +} +</style> \ No newline at end of file diff --git a/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140509.vue b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140509.vue new file mode 100644 index 0000000..6c14173 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140509.vue @@ -0,0 +1,379 @@ +<template> + <div class="updateUser"> + <main> + <div class="mainContent"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" + label-position="right"> + <!-- 閮ㄩ棬鍚嶇О --> + <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName"> + <el-input v-model="user.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" :disabled="!updateFlag"></el-input> + </el-form-item> + <!-- 涓婄骇閮ㄩ棬 --> + <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> + <el-select v-model="user.parentId" placeholder="璇烽�夋嫨涓婄骇閮ㄩ棬" :disabled="!updateFlag"> + <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!-- 閮ㄩ棬绫诲瀷 --> + <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType"> + <el-select v-model="user.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷" :disabled="!updateFlag"> + <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!--娣诲姞浜哄憳 --> + <el-form-item class="optionItem add" label="閮ㄩ棬浜哄憳:"> + <ul class="addPerson"> + <li v-for="(item, index) in checkedList" :key="index" @click="setLeader(index)"> + <div class="li-item"> + <div class="li-icon"> + <i :class="[ + 'el-icon-user-solid', + item.leader ? 'leader' : '', + ]"></i> + </div> + <label style="font-size: 12px" :class="[item.leader ? 'leader' : '']">{{ item.username }}</label> + </div> + </li> + <li class="li-btn" v-if="updateFlag"> + <i class="el-icon-plus" @click="openUser = true"></i> + </li> + </ul> + <div class="card" v-if="openUser"> + <el-card class="box-card"> + <div slot="header" class="myclear"> + <span>宸ヤ綔浜哄憳</span> + <div @click="addUser">纭</div> + </div> + <div class="scrollWrap"> + <el-checkbox-group v-model="checkedUser"> + <el-checkbox v-for="user in userList" :label="user.id" :key="user.id"> + {{ user.username }} + </el-checkbox> + </el-checkbox-group> + </div> + <div class="hidebar"></div> + </el-card> + </div> + </el-form-item> + <el-form-item style="margin-top: -40px"> + <label style="color: #ff0000ab">绾㈣壊浠h〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label> + </el-form-item> + <!-- 閮ㄩ棬鎻忚堪 --> + <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes"> + <el-input type="textarea" :rows="4" v-model="user.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�" :disabled="!updateFlag"> + </el-input> + </el-form-item> + <el-form-item v-if="updateFlag"> + <div class="optionBtn"> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 + </el-button> + </div> + </el-form-item> + </el-form> + </div> + </main> + </div> +</template> +<script> +import { getTypeList } from "@/utils/helper"; +export default { + data() { + const validateNickname = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); + } else { + callback(); + } + }; + const validatePass = (rule, value, callback) => { + if (!value) { + callback(); + } else { + callback(); + } + }; + return { + user: { + id: "", + departName: "", + parentId: "", + departDes: "", + departType: "", + }, + createUserRules: { + departName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], + parentId: [ + { required: false, trigger: "blur", validator: validatePass }, + ], + departDes: [{ required: false, trigger: "blur" }], + departType: [{ required: false, trigger: "blur" }], + }, + userList: [], + departList: [], + typeList: [], + checkedUser: [], + checkedList: [], + openUser: false, + }; + }, + created() { + const that = this; + this.user = JSON.parse(JSON.stringify(that.userInfo)); + console.log(this.user); + this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId; + this.checkedList = this.user.userInfoDTOS; + this.checkedList.forEach((e) => { + this.checkedUser.push(e.userId); + }); + console.log(this.checkedUser) + this.$axios({ + method: "get", + url: "sccg/depart/tree", + }).then((res) => { + that.departList = res.data; + }); + this.getUserList(this.user.id); + // 鑾峰彇閮ㄩ棬绫诲瀷 + this.getDepartType(); + }, + methods: { + handleUser() { + this.$refs["user"].validate((valid) => { + if (valid) { + const { user, checkedList } = this; + const arr = []; + checkedList.forEach((item) => { + arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId }); + }); + if (arr.length === 0) { + this.$message({ + type: 'warning', + message: '璇烽�夋嫨閮ㄩ棬浜哄憳', + }) + } else { + this.$axios + .post("sccg/depart/update", { + id: user.id, + departName: user.departName, + parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId, + departDes: user.departDes, + departManagerList: arr, + }) + .then((res) => { + this.$message({ + message: res.message, + type: res.code === 200 ? "success" : "warning", + }); + this.$emit("changeDialog", { flag: false }); + this.getDepartList(); + }); + } + } else { + return false; + } + }); + }, + // 鑾峰彇閮ㄩ棬绫诲瀷 + async getDepartType() { + this.typeList = await getTypeList(1, "08"); + }, + + // 璁剧疆棰嗗 + setLeader(idx) { + if (this.updateFlag) { + this.checkedList.forEach((item, index) => { + item.leader = index === idx; + }); + } + }, + + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + getUserList(id) { + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => { + if (res.code === 200) { + this.userList = res.data; + } + }); + }, + addUser() { + this.checkedList = []; + this.userList.forEach((item) => { + this.checkedUser.forEach((child) => { + if (item.id == child) { + this.checkedList.push({ + id: item.id, + username: item.username, + leader: false, + }); + } + }); + }); + this.checkedList[0].leader = true; + console.log(this.checkedList); + this.openUser = false; + }, + }, + props: ["userInfo", "updateFlag", "getDepartList", "changeDialog"], +}; +</script> +<style lang="scss" scoped> +.updateUser { + border-radius: 1px; + // background-color: #09152f; + + main { + // border: 1px solid #fff; + text-align: left; + padding: 0 55px; + // background-color: #09152f; + padding-bottom: 50px; + + // .mainTitle { + // color: #4b9bb7; + // font-weight: 600; + // line-height: 100px; + // font-size: 14px; + // } + + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } + } + } +} + +.updateUser::v-deep .el-form-item__label { + // color: #4b9bb7; +} + +.updateUser::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; +} + +.addPerson { + display: flex; + list-style: none; + padding: 0; + flex-wrap: wrap; + max-width: 280px; + + li { + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } +} + +.li-icon { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + margin: 0 auto; +} + +.li-btn { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; +} + +.card { + position: absolute; + z-index: 2000; + right: 0; + + .box-card { + min-height: 240px; + max-height: 260px; + overflow: hidden; + // background-color: #09152f; + position: relative; + max-width: 220px; + + .scrollWrap { + overflow: scroll; + height: 180px; + position: relative; + color: #4b9bb7; + + .el-checkbox-group { + display: flex; + flex-direction: column; + + .el-checkbox { + line-height: 20px; + } + } + } + + .myclear { + width: 100%; + line-height: 20px; + color: #4b9bb7; + display: flex; + justify-content: space-between; + } + + .hidebar { + position: absolute; + top: 77px; + right: 20px; + width: 20px; + height: 180px; + // background-color: #09152f; + } + + .item { + line-height: 40px; + } + } +} + +.leader { + color: red; +} + +.el-input { + width: 280px !important; +} +</style> \ No newline at end of file diff --git a/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140539.vue b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140539.vue new file mode 100644 index 0000000..a9611c3 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140539.vue @@ -0,0 +1,380 @@ +<template> + <div class="updateUser"> + <main> + <div class="mainContent"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" + label-position="right"> + <!-- 閮ㄩ棬鍚嶇О --> + <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName"> + <el-input v-model="user.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" :disabled="!updateFlag"></el-input> + </el-form-item> + <!-- 涓婄骇閮ㄩ棬 --> + <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> + <el-select v-model="user.parentId" placeholder="璇烽�夋嫨涓婄骇閮ㄩ棬" :disabled="!updateFlag"> + <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!-- 閮ㄩ棬绫诲瀷 --> + <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType"> + <el-select v-model="user.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷" :disabled="!updateFlag"> + <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!--娣诲姞浜哄憳 --> + <el-form-item class="optionItem add" label="閮ㄩ棬浜哄憳:"> + <ul class="addPerson"> + <li v-for="(item, index) in checkedList" :key="index" @click="setLeader(index)"> + <div class="li-item"> + <div class="li-icon"> + <i :class="[ + 'el-icon-user-solid', + item.leader ? 'leader' : '', + ]"></i> + </div> + <label style="font-size: 12px" :class="[item.leader ? 'leader' : '']">{{ item.username }}</label> + </div> + </li> + <li class="li-btn" v-if="updateFlag"> + <i class="el-icon-plus" @click="openUser = true"></i> + </li> + </ul> + <div class="card" v-if="openUser"> + <el-card class="box-card"> + <div slot="header" class="myclear"> + <span>宸ヤ綔浜哄憳</span> + <div @click="addUser">纭</div> + </div> + <div class="scrollWrap"> + <el-checkbox-group v-model="checkedUser"> + <el-checkbox v-for="user in userList" :label="user.id" :key="user.id"> + {{ user.username }} + </el-checkbox> + </el-checkbox-group> + </div> + <div class="hidebar"></div> + </el-card> + </div> + </el-form-item> + <el-form-item style="margin-top: -40px"> + <label style="color: #ff0000ab">绾㈣壊浠h〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label> + </el-form-item> + <!-- 閮ㄩ棬鎻忚堪 --> + <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes"> + <el-input type="textarea" :rows="4" v-model="user.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�" :disabled="!updateFlag"> + </el-input> + </el-form-item> + <el-form-item v-if="updateFlag"> + <div class="optionBtn"> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 + </el-button> + </div> + </el-form-item> + </el-form> + </div> + </main> + </div> +</template> +<script> +import { getTypeList } from "@/utils/helper"; +export default { + data() { + const validateNickname = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); + } else { + callback(); + } + }; + const validatePass = (rule, value, callback) => { + if (!value) { + callback(); + } else { + callback(); + } + }; + return { + user: { + id: "", + departName: "", + parentId: "", + departDes: "", + departType: "", + }, + createUserRules: { + departName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], + parentId: [ + { required: false, trigger: "blur", validator: validatePass }, + ], + departDes: [{ required: false, trigger: "blur" }], + departType: [{ required: false, trigger: "blur" }], + }, + userList: [], + departList: [], + typeList: [], + checkedUser: [], + checkedList: [], + openUser: false, + }; + }, + created() { + const that = this; + this.user = JSON.parse(JSON.stringify(that.userInfo)); + console.log(this.user); + this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId; + this.checkedList = this.user.userInfoDTOS; + this.checkedList.forEach((e) => { + this.checkedUser.push(e.userId); + }); + console.log(this.checkedUser) + this.$axios({ + method: "get", + url: "sccg/depart/tree", + }).then((res) => { + that.departList = res.data; + }); + this.getUserList(this.user.id); + // 鑾峰彇閮ㄩ棬绫诲瀷 + this.getDepartType(); + }, + methods: { + handleUser() { + this.$refs["user"].validate((valid) => { + if (valid) { + const { user, checkedList } = this; + const arr = []; + checkedList.forEach((item) => { + arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId }); + }); + if (arr.length === 0) { + this.$message({ + type: 'warning', + message: '璇烽�夋嫨閮ㄩ棬浜哄憳', + }) + } else { + this.$axios + .post("sccg/depart/update", { + id: user.id, + departName: user.departName, + parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId, + departDes: user.departDes, + departManagerList: arr, + departType: user.departType + }) + .then((res) => { + this.$message({ + message: res.message, + type: res.code === 200 ? "success" : "warning", + }); + this.$emit("changeDialog", { flag: false }); + this.getDepartList(); + }); + } + } else { + return false; + } + }); + }, + // 鑾峰彇閮ㄩ棬绫诲瀷 + async getDepartType() { + this.typeList = await getTypeList(1, "08"); + }, + + // 璁剧疆棰嗗 + setLeader(idx) { + if (this.updateFlag) { + this.checkedList.forEach((item, index) => { + item.leader = index === idx; + }); + } + }, + + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + getUserList(id) { + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => { + if (res.code === 200) { + this.userList = res.data; + } + }); + }, + addUser() { + this.checkedList = []; + this.userList.forEach((item) => { + this.checkedUser.forEach((child) => { + if (item.id == child) { + this.checkedList.push({ + id: item.id, + username: item.username, + leader: false, + }); + } + }); + }); + this.checkedList[0].leader = true; + console.log(this.checkedList); + this.openUser = false; + }, + }, + props: ["userInfo", "updateFlag", "getDepartList", "changeDialog"], +}; +</script> +<style lang="scss" scoped> +.updateUser { + border-radius: 1px; + // background-color: #09152f; + + main { + // border: 1px solid #fff; + text-align: left; + padding: 0 55px; + // background-color: #09152f; + padding-bottom: 50px; + + // .mainTitle { + // color: #4b9bb7; + // font-weight: 600; + // line-height: 100px; + // font-size: 14px; + // } + + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } + } + } +} + +.updateUser::v-deep .el-form-item__label { + // color: #4b9bb7; +} + +.updateUser::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; +} + +.addPerson { + display: flex; + list-style: none; + padding: 0; + flex-wrap: wrap; + max-width: 280px; + + li { + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } +} + +.li-icon { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + margin: 0 auto; +} + +.li-btn { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; +} + +.card { + position: absolute; + z-index: 2000; + right: 0; + + .box-card { + min-height: 240px; + max-height: 260px; + overflow: hidden; + // background-color: #09152f; + position: relative; + max-width: 220px; + + .scrollWrap { + overflow: scroll; + height: 180px; + position: relative; + color: #4b9bb7; + + .el-checkbox-group { + display: flex; + flex-direction: column; + + .el-checkbox { + line-height: 20px; + } + } + } + + .myclear { + width: 100%; + line-height: 20px; + color: #4b9bb7; + display: flex; + justify-content: space-between; + } + + .hidebar { + position: absolute; + top: 77px; + right: 20px; + width: 20px; + height: 180px; + // background-color: #09152f; + } + + .item { + line-height: 40px; + } + } +} + +.leader { + color: red; +} + +.el-input { + width: 280px !important; +} +</style> \ No newline at end of file diff --git a/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140604.vue b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140604.vue new file mode 100644 index 0000000..a9611c3 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229140604.vue @@ -0,0 +1,380 @@ +<template> + <div class="updateUser"> + <main> + <div class="mainContent"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" + label-position="right"> + <!-- 閮ㄩ棬鍚嶇О --> + <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName"> + <el-input v-model="user.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" :disabled="!updateFlag"></el-input> + </el-form-item> + <!-- 涓婄骇閮ㄩ棬 --> + <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> + <el-select v-model="user.parentId" placeholder="璇烽�夋嫨涓婄骇閮ㄩ棬" :disabled="!updateFlag"> + <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!-- 閮ㄩ棬绫诲瀷 --> + <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType"> + <el-select v-model="user.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷" :disabled="!updateFlag"> + <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!--娣诲姞浜哄憳 --> + <el-form-item class="optionItem add" label="閮ㄩ棬浜哄憳:"> + <ul class="addPerson"> + <li v-for="(item, index) in checkedList" :key="index" @click="setLeader(index)"> + <div class="li-item"> + <div class="li-icon"> + <i :class="[ + 'el-icon-user-solid', + item.leader ? 'leader' : '', + ]"></i> + </div> + <label style="font-size: 12px" :class="[item.leader ? 'leader' : '']">{{ item.username }}</label> + </div> + </li> + <li class="li-btn" v-if="updateFlag"> + <i class="el-icon-plus" @click="openUser = true"></i> + </li> + </ul> + <div class="card" v-if="openUser"> + <el-card class="box-card"> + <div slot="header" class="myclear"> + <span>宸ヤ綔浜哄憳</span> + <div @click="addUser">纭</div> + </div> + <div class="scrollWrap"> + <el-checkbox-group v-model="checkedUser"> + <el-checkbox v-for="user in userList" :label="user.id" :key="user.id"> + {{ user.username }} + </el-checkbox> + </el-checkbox-group> + </div> + <div class="hidebar"></div> + </el-card> + </div> + </el-form-item> + <el-form-item style="margin-top: -40px"> + <label style="color: #ff0000ab">绾㈣壊浠h〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label> + </el-form-item> + <!-- 閮ㄩ棬鎻忚堪 --> + <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes"> + <el-input type="textarea" :rows="4" v-model="user.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�" :disabled="!updateFlag"> + </el-input> + </el-form-item> + <el-form-item v-if="updateFlag"> + <div class="optionBtn"> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 + </el-button> + </div> + </el-form-item> + </el-form> + </div> + </main> + </div> +</template> +<script> +import { getTypeList } from "@/utils/helper"; +export default { + data() { + const validateNickname = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); + } else { + callback(); + } + }; + const validatePass = (rule, value, callback) => { + if (!value) { + callback(); + } else { + callback(); + } + }; + return { + user: { + id: "", + departName: "", + parentId: "", + departDes: "", + departType: "", + }, + createUserRules: { + departName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], + parentId: [ + { required: false, trigger: "blur", validator: validatePass }, + ], + departDes: [{ required: false, trigger: "blur" }], + departType: [{ required: false, trigger: "blur" }], + }, + userList: [], + departList: [], + typeList: [], + checkedUser: [], + checkedList: [], + openUser: false, + }; + }, + created() { + const that = this; + this.user = JSON.parse(JSON.stringify(that.userInfo)); + console.log(this.user); + this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId; + this.checkedList = this.user.userInfoDTOS; + this.checkedList.forEach((e) => { + this.checkedUser.push(e.userId); + }); + console.log(this.checkedUser) + this.$axios({ + method: "get", + url: "sccg/depart/tree", + }).then((res) => { + that.departList = res.data; + }); + this.getUserList(this.user.id); + // 鑾峰彇閮ㄩ棬绫诲瀷 + this.getDepartType(); + }, + methods: { + handleUser() { + this.$refs["user"].validate((valid) => { + if (valid) { + const { user, checkedList } = this; + const arr = []; + checkedList.forEach((item) => { + arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId }); + }); + if (arr.length === 0) { + this.$message({ + type: 'warning', + message: '璇烽�夋嫨閮ㄩ棬浜哄憳', + }) + } else { + this.$axios + .post("sccg/depart/update", { + id: user.id, + departName: user.departName, + parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId, + departDes: user.departDes, + departManagerList: arr, + departType: user.departType + }) + .then((res) => { + this.$message({ + message: res.message, + type: res.code === 200 ? "success" : "warning", + }); + this.$emit("changeDialog", { flag: false }); + this.getDepartList(); + }); + } + } else { + return false; + } + }); + }, + // 鑾峰彇閮ㄩ棬绫诲瀷 + async getDepartType() { + this.typeList = await getTypeList(1, "08"); + }, + + // 璁剧疆棰嗗 + setLeader(idx) { + if (this.updateFlag) { + this.checkedList.forEach((item, index) => { + item.leader = index === idx; + }); + } + }, + + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + getUserList(id) { + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => { + if (res.code === 200) { + this.userList = res.data; + } + }); + }, + addUser() { + this.checkedList = []; + this.userList.forEach((item) => { + this.checkedUser.forEach((child) => { + if (item.id == child) { + this.checkedList.push({ + id: item.id, + username: item.username, + leader: false, + }); + } + }); + }); + this.checkedList[0].leader = true; + console.log(this.checkedList); + this.openUser = false; + }, + }, + props: ["userInfo", "updateFlag", "getDepartList", "changeDialog"], +}; +</script> +<style lang="scss" scoped> +.updateUser { + border-radius: 1px; + // background-color: #09152f; + + main { + // border: 1px solid #fff; + text-align: left; + padding: 0 55px; + // background-color: #09152f; + padding-bottom: 50px; + + // .mainTitle { + // color: #4b9bb7; + // font-weight: 600; + // line-height: 100px; + // font-size: 14px; + // } + + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } + } + } +} + +.updateUser::v-deep .el-form-item__label { + // color: #4b9bb7; +} + +.updateUser::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; +} + +.addPerson { + display: flex; + list-style: none; + padding: 0; + flex-wrap: wrap; + max-width: 280px; + + li { + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } +} + +.li-icon { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + margin: 0 auto; +} + +.li-btn { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; +} + +.card { + position: absolute; + z-index: 2000; + right: 0; + + .box-card { + min-height: 240px; + max-height: 260px; + overflow: hidden; + // background-color: #09152f; + position: relative; + max-width: 220px; + + .scrollWrap { + overflow: scroll; + height: 180px; + position: relative; + color: #4b9bb7; + + .el-checkbox-group { + display: flex; + flex-direction: column; + + .el-checkbox { + line-height: 20px; + } + } + } + + .myclear { + width: 100%; + line-height: 20px; + color: #4b9bb7; + display: flex; + justify-content: space-between; + } + + .hidebar { + position: absolute; + top: 77px; + right: 20px; + width: 20px; + height: 180px; + // background-color: #09152f; + } + + .item { + line-height: 40px; + } + } +} + +.leader { + color: red; +} + +.el-input { + width: 280px !important; +} +</style> \ No newline at end of file diff --git a/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229141633.vue b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229141633.vue new file mode 100644 index 0000000..c5ab3b6 --- /dev/null +++ b/.history/src/views/systemSetting/baseSetting/department/updateUser/index_20221229141633.vue @@ -0,0 +1,380 @@ +<template> + <div class="updateUser"> + <main> + <div class="mainContent"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" + label-position="right"> + <!-- 閮ㄩ棬鍚嶇О --> + <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName"> + <el-input v-model="user.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" :disabled="!updateFlag"></el-input> + </el-form-item> + <!-- 涓婄骇閮ㄩ棬 --> + <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> + <el-select v-model="user.parentId" placeholder="璇烽�夋嫨涓婄骇閮ㄩ棬" :disabled="!updateFlag"> + <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!-- 閮ㄩ棬绫诲瀷 --> + <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType"> + <el-select v-model="user.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷" :disabled="!updateFlag"> + <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!--娣诲姞浜哄憳 --> + <el-form-item class="optionItem add" label="閮ㄩ棬浜哄憳:"> + <ul class="addPerson"> + <li v-for="(item, index) in checkedList" :key="index" @click="setLeader(index)"> + <div class="li-item"> + <div class="li-icon"> + <i :class="[ + 'el-icon-user-solid', + item.leader ? 'leader' : '', + ]"></i> + </div> + <label style="font-size: 12px" :class="[item.leader ? 'leader' : '']">{{ item.username }}</label> + </div> + </li> + <li class="li-btn" v-if="updateFlag"> + <i class="el-icon-plus" @click="openUser = true"></i> + </li> + </ul> + <div class="card" v-if="openUser"> + <el-card class="box-card"> + <div slot="header" class="myclear"> + <span>宸ヤ綔浜哄憳</span> + <div @click="addUser">纭</div> + </div> + <div class="scrollWrap"> + <el-checkbox-group v-model="checkedUser"> + <el-checkbox v-for="user in userList" :label="user.id" :key="user.id"> + {{ user.username }} + </el-checkbox> + </el-checkbox-group> + </div> + <div class="hidebar"></div> + </el-card> + </div> + </el-form-item> + <el-form-item style="margin-top: -40px"> + <label style="color: #ff0000ab">绾㈣壊浠h〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label> + </el-form-item> + <!-- 閮ㄩ棬鎻忚堪 --> + <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes"> + <el-input type="textarea" :rows="4" v-model="user.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�" :disabled="!updateFlag"> + </el-input> + </el-form-item> + <el-form-item v-if="updateFlag"> + <div class="optionBtn"> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 + </el-button> + </div> + </el-form-item> + </el-form> + </div> + </main> + </div> +</template> +<script> +import { getTypeList } from "@/utils/helper"; +export default { + data() { + const validateNickname = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); + } else { + callback(); + } + }; + const validatePass = (rule, value, callback) => { + if (!value) { + callback(); + } else { + callback(); + } + }; + return { + user: { + id: "", + departName: "", + parentId: "", + departDes: "", + departType: "", + }, + createUserRules: { + departName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], + parentId: [ + { required: false, trigger: "blur", validator: validatePass }, + ], + departDes: [{ required: false, trigger: "blur" }], + departType: [{ required: false, trigger: "blur" }], + }, + userList: [], + departList: [], + typeList: [], + checkedUser: [], + checkedList: [], + openUser: false, + }; + }, + created() { + const that = this; + this.user = JSON.parse(JSON.stringify(that.userInfo)); + console.log(this.user); + this.user.parentId = this.user.parentId === 0 ? '鏆傛棤涓婄骇閮ㄩ棬' : this.user.parentId; + this.checkedList = this.user.userInfoDTOS; + this.checkedList.forEach((e) => { + this.checkedUser.push(e.userId); + }); + console.log(this.checkedUser) + this.$axios({ + method: "get", + url: "sccg/depart/tree", + }).then((res) => { + that.departList = res.data; + }); + this.getUserList(this.user.id); + // 鑾峰彇閮ㄩ棬绫诲瀷 + this.getDepartType(); + }, + methods: { + handleUser() { + this.$refs["user"].validate((valid) => { + if (valid) { + const { user, checkedList } = this; + const arr = []; + checkedList.forEach((item) => { + arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId }); + }); + // if (arr.length === 0) { + // this.$message({ + // type: 'warning', + // message: '璇烽�夋嫨閮ㄩ棬浜哄憳', + // }) + // } else { + this.$axios + .post("sccg/depart/update", { + id: user.id, + departName: user.departName, + parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId, + departDes: user.departDes, + departManagerList: arr, + departType: user.departType + }) + .then((res) => { + this.$message({ + message: res.message, + type: res.code === 200 ? "success" : "warning", + }); + this.$emit("changeDialog", { flag: false }); + this.getDepartList(); + }); + // } + } else { + return false; + } + }); + }, + // 鑾峰彇閮ㄩ棬绫诲瀷 + async getDepartType() { + this.typeList = await getTypeList(1, "08"); + }, + + // 璁剧疆棰嗗 + setLeader(idx) { + if (this.updateFlag) { + this.checkedList.forEach((item, index) => { + item.leader = index === idx; + }); + } + }, + + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + getUserList(id) { + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios.get(`/sccg/depart/query_surplus_exist_user?id=`+id).then((res) => { + if (res.code === 200) { + this.userList = res.data; + } + }); + }, + addUser() { + this.checkedList = []; + this.userList.forEach((item) => { + this.checkedUser.forEach((child) => { + if (item.id == child) { + this.checkedList.push({ + id: item.id, + username: item.username, + leader: false, + }); + } + }); + }); + this.checkedList[0].leader = true; + console.log(this.checkedList); + this.openUser = false; + }, + }, + props: ["userInfo", "updateFlag", "getDepartList", "changeDialog"], +}; +</script> +<style lang="scss" scoped> +.updateUser { + border-radius: 1px; + // background-color: #09152f; + + main { + // border: 1px solid #fff; + text-align: left; + padding: 0 55px; + // background-color: #09152f; + padding-bottom: 50px; + + // .mainTitle { + // color: #4b9bb7; + // font-weight: 600; + // line-height: 100px; + // font-size: 14px; + // } + + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } + } + } +} + +.updateUser::v-deep .el-form-item__label { + // color: #4b9bb7; +} + +.updateUser::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; +} + +.addPerson { + display: flex; + list-style: none; + padding: 0; + flex-wrap: wrap; + max-width: 280px; + + li { + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } +} + +.li-icon { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + margin: 0 auto; +} + +.li-btn { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; +} + +.card { + position: absolute; + z-index: 2000; + right: 0; + + .box-card { + min-height: 240px; + max-height: 260px; + overflow: hidden; + // background-color: #09152f; + position: relative; + max-width: 220px; + + .scrollWrap { + overflow: scroll; + height: 180px; + position: relative; + color: #4b9bb7; + + .el-checkbox-group { + display: flex; + flex-direction: column; + + .el-checkbox { + line-height: 20px; + } + } + } + + .myclear { + width: 100%; + line-height: 20px; + color: #4b9bb7; + display: flex; + justify-content: space-between; + } + + .hidebar { + position: absolute; + top: 77px; + right: 20px; + width: 20px; + height: 180px; + // background-color: #09152f; + } + + .item { + line-height: 40px; + } + } +} + +.leader { + color: red; +} + +.el-input { + width: 280px !important; +} +</style> \ No newline at end of file diff --git a/.history/vue.config_20221215133439.js b/.history/vue.config_20221215133439.js new file mode 100644 index 0000000..d97f668 --- /dev/null +++ b/.history/vue.config_20221215133439.js @@ -0,0 +1,130 @@ +// const { defineConfig } = require('@vue/cli-service') +// module.exports = defineConfig({ +// transpileDependencies: true +// }) +const path = require('path') + +function resolve(dir) { + return path.join(__dirname, dir) +} + +const CompressionPlugin = require('compression-webpack-plugin') + +const name = process.env.VUE_APP_TITLE || '閬傛槍鎵ф硶骞冲彴' // 缃戦〉鏍囬 + +const port = process.env.port || process.env.npm_config_port || 80 // 绔彛 + +module.exports = { + // 閮ㄧ讲鐢熶骇鐜鍜屽紑鍙戠幆澧冧笅鐨刄RL銆� + // 榛樿鎯呭喌涓嬶紝Vue CLI 浼氬亣璁句綘鐨勫簲鐢ㄦ槸琚儴缃插湪涓�涓煙鍚嶇殑鏍硅矾寰勪笂 + // 渚嬪 https://www.ruoyi.vip/銆傚鏋滃簲鐢ㄨ閮ㄧ讲鍦ㄤ竴涓瓙璺緞涓婏紝浣犲氨闇�瑕佺敤杩欎釜閫夐」鎸囧畾杩欎釜瀛愯矾寰勩�備緥濡傦紝濡傛灉浣犵殑搴旂敤琚儴缃插湪 https://www.ruoyi.vip/admin/锛屽垯璁剧疆 baseUrl 涓� /admin/銆� + publicPath: process.env.NODE_ENV === "production" ? "/" : "/", + // 鍦╪pm run build 鎴� yarn build 鏃� 锛岀敓鎴愭枃浠剁殑鐩綍鍚嶇О锛堣鍜宐aseUrl鐨勭敓浜х幆澧冭矾寰勪竴鑷达級锛堥粯璁ist锛� + outputDir: 'dist', + // 鐢ㄤ簬鏀剧疆鐢熸垚鐨勯潤鎬佽祫婧� (js銆乧ss銆乮mg銆乫onts) 鐨勶紱锛堥」鐩墦鍖呬箣鍚庯紝闈欐�佽祫婧愪細鏀惧湪杩欎釜鏂囦欢澶逛笅锛� + assetsDir: 'static', + // 鏄惁寮�鍚痚slint淇濆瓨妫�娴嬶紝鏈夋晥鍊硷細ture | false | 'error' + // lintOnSave: process.env.NODE_ENV === 'development', + lintOnSave:false, + // 濡傛灉浣犱笉闇�瑕佺敓浜х幆澧冪殑 source map锛屽彲浠ュ皢鍏惰缃负 false 浠ュ姞閫熺敓浜х幆澧冩瀯寤恒�� + productionSourceMap: false, + // webpack-dev-server 鐩稿叧閰嶇疆 + devServer: { + host: 'localhost', + port: port, + open: true, + headers: { + "Access-Control-Allow-Origin": "*", + }, + proxy: { + // 璺ㄥ煙閰嶇疆 + "/sccg": { + target: `http://42.193.1.25/`, + // target: `http://127.0.0.1:8082/`, + changeOrigin: true + } + }, + // disableHostCheck: true + }, + css: { + loaderOptions: { + sass: { + sassOptions: { outputStyle: "expanded" } + } + } + }, + configureWebpack: { + name: name, + resolve: { + alias: { + '@': resolve('src') + } + }, + plugins: [ + //#浣跨敤gzip瑙e帇缂╅潤鎬佹枃浠� + new CompressionPlugin({ + cache: false, // 涓嶅惎鐢ㄦ枃浠剁紦瀛� + test: /\.(js|css|html)?$/i, // 鍘嬬缉鏂囦欢鏍煎紡 + filename: '[path].gz[query]', // 鍘嬬缉鍚庣殑鏂囦欢鍚� + algorithm: 'gzip', // 浣跨敤gzip鍘嬬缉 + minRatio: 0.8 // 鍘嬬缉鐜囧皬浜�1鎵嶄細鍘嬬缉 + }) + ], + }, + chainWebpack(config) { + config.plugins.delete('preload') // TODO: need test + config.plugins.delete('prefetch') // TODO: need test + + // set svg-sprite-loader + config.module + .rule('svg') + .exclude.add(resolve('src/assets/icons')) + .end() + config.module + .rule('icons') + .test(/\.svg$/) + .include.add(resolve('src/assets/icons')) + .end() + .use('svg-sprite-loader') + .loader('svg-sprite-loader') + .options({ + symbolId: 'icon-[name]' + }) + .end() + + config + .when(process.env.NODE_ENV !== 'development', + config => { + config + .optimization.splitChunks({ + chunks: 'all', + cacheGroups: { + libs: { + name: 'chunk-libs', + test: /[\\/]node_modules[\\/]/, + priority: 10, + chunks: 'initial' // only package third parties that are initially dependent + }, + elementUI: { + name: 'chunk-elementUI', // split elementUI into a single package + priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app + test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm + }, + commons: { + name: 'chunk-commons', + test: resolve('src/components'), // can customize your rules + minChunks: 3, // minimum common number + priority: 5, + reuseExistingChunk: true + } + } + }) + config.optimization.runtimeChunk('single'), + { + from: path.resolve(__dirname, './public/robots.txt'), //闃茬埇铏枃浠� + to: './' //鍒版牴鐩綍涓� + } + } + ) + } +} diff --git a/.history/vue.config_20221229155819.js b/.history/vue.config_20221229155819.js new file mode 100644 index 0000000..f3a4d14 --- /dev/null +++ b/.history/vue.config_20221229155819.js @@ -0,0 +1,130 @@ +// const { defineConfig } = require('@vue/cli-service') +// module.exports = defineConfig({ +// transpileDependencies: true +// }) +const path = require('path') + +function resolve(dir) { + return path.join(__dirname, dir) +} + +const CompressionPlugin = require('compression-webpack-plugin') + +const name = process.env.VUE_APP_TITLE || '閬傛槍鎵ф硶骞冲彴' // 缃戦〉鏍囬 + +const port = process.env.port || process.env.npm_config_port || 80 // 绔彛 + +module.exports = { + // 閮ㄧ讲鐢熶骇鐜鍜屽紑鍙戠幆澧冧笅鐨刄RL銆� + // 榛樿鎯呭喌涓嬶紝Vue CLI 浼氬亣璁句綘鐨勫簲鐢ㄦ槸琚儴缃插湪涓�涓煙鍚嶇殑鏍硅矾寰勪笂 + // 渚嬪 https://www.ruoyi.vip/銆傚鏋滃簲鐢ㄨ閮ㄧ讲鍦ㄤ竴涓瓙璺緞涓婏紝浣犲氨闇�瑕佺敤杩欎釜閫夐」鎸囧畾杩欎釜瀛愯矾寰勩�備緥濡傦紝濡傛灉浣犵殑搴旂敤琚儴缃插湪 https://www.ruoyi.vip/admin/锛屽垯璁剧疆 baseUrl 涓� /admin/銆� + publicPath: process.env.NODE_ENV === "production" ? "/" : "/", + // 鍦╪pm run build 鎴� yarn build 鏃� 锛岀敓鎴愭枃浠剁殑鐩綍鍚嶇О锛堣鍜宐aseUrl鐨勭敓浜х幆澧冭矾寰勪竴鑷达級锛堥粯璁ist锛� + outputDir: 'dist', + // 鐢ㄤ簬鏀剧疆鐢熸垚鐨勯潤鎬佽祫婧� (js銆乧ss銆乮mg銆乫onts) 鐨勶紱锛堥」鐩墦鍖呬箣鍚庯紝闈欐�佽祫婧愪細鏀惧湪杩欎釜鏂囦欢澶逛笅锛� + assetsDir: 'static', + // 鏄惁寮�鍚痚slint淇濆瓨妫�娴嬶紝鏈夋晥鍊硷細ture | false | 'error' + // lintOnSave: process.env.NODE_ENV === 'development', + lintOnSave:false, + // 濡傛灉浣犱笉闇�瑕佺敓浜х幆澧冪殑 source map锛屽彲浠ュ皢鍏惰缃负 false 浠ュ姞閫熺敓浜х幆澧冩瀯寤恒�� + productionSourceMap: false, + // webpack-dev-server 鐩稿叧閰嶇疆 + devServer: { + host: 'localhost', + port: port, + open: true, + headers: { + "Access-Control-Allow-Origin": "*", + }, + proxy: { + // 璺ㄥ煙閰嶇疆 + "/sccg": { + // target: `http://42.193.1.25/`, + target: `http://127.0.0.1:8082/`, + changeOrigin: true + } + }, + // disableHostCheck: true + }, + css: { + loaderOptions: { + sass: { + sassOptions: { outputStyle: "expanded" } + } + } + }, + configureWebpack: { + name: name, + resolve: { + alias: { + '@': resolve('src') + } + }, + plugins: [ + //#浣跨敤gzip瑙e帇缂╅潤鎬佹枃浠� + new CompressionPlugin({ + cache: false, // 涓嶅惎鐢ㄦ枃浠剁紦瀛� + test: /\.(js|css|html)?$/i, // 鍘嬬缉鏂囦欢鏍煎紡 + filename: '[path].gz[query]', // 鍘嬬缉鍚庣殑鏂囦欢鍚� + algorithm: 'gzip', // 浣跨敤gzip鍘嬬缉 + minRatio: 0.8 // 鍘嬬缉鐜囧皬浜�1鎵嶄細鍘嬬缉 + }) + ], + }, + chainWebpack(config) { + config.plugins.delete('preload') // TODO: need test + config.plugins.delete('prefetch') // TODO: need test + + // set svg-sprite-loader + config.module + .rule('svg') + .exclude.add(resolve('src/assets/icons')) + .end() + config.module + .rule('icons') + .test(/\.svg$/) + .include.add(resolve('src/assets/icons')) + .end() + .use('svg-sprite-loader') + .loader('svg-sprite-loader') + .options({ + symbolId: 'icon-[name]' + }) + .end() + + config + .when(process.env.NODE_ENV !== 'development', + config => { + config + .optimization.splitChunks({ + chunks: 'all', + cacheGroups: { + libs: { + name: 'chunk-libs', + test: /[\\/]node_modules[\\/]/, + priority: 10, + chunks: 'initial' // only package third parties that are initially dependent + }, + elementUI: { + name: 'chunk-elementUI', // split elementUI into a single package + priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app + test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm + }, + commons: { + name: 'chunk-commons', + test: resolve('src/components'), // can customize your rules + minChunks: 3, // minimum common number + priority: 5, + reuseExistingChunk: true + } + } + }) + config.optimization.runtimeChunk('single'), + { + from: path.resolve(__dirname, './public/robots.txt'), //闃茬埇铏枃浠� + to: './' //鍒版牴鐩綍涓� + } + } + ) + } +} diff --git a/src/views/layout/components/Header/index.vue b/src/views/layout/components/Header/index.vue index 08c899e..6d55cf9 100644 --- a/src/views/layout/components/Header/index.vue +++ b/src/views/layout/components/Header/index.vue @@ -37,7 +37,7 @@ <el-card class="box-card"> <div class="card-header"> <span>娑堟伅涓績</span> - <el-button type="text">鎺ユ敹璁剧疆</el-button> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> </div> <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> <router-link to='/home/operate/message/messageIndex'> @@ -54,6 +54,31 @@ <i class="el-icon-switch-button"></i> </el-tooltip> </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鏇存柊</el-button> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" :before-close="handleClose"> <updatePassword /> @@ -98,6 +123,8 @@ return { baseInformationVisible: false, updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, menuLeftList: [ { label: '椹鹃┒鑸�', @@ -124,6 +151,7 @@ }, user: '', menuMessageList: [], + channelData: [], messageCounts: 0, keyword: '', info: null, @@ -146,7 +174,18 @@ this.info = res.data.user; }) }, - handleClose(done) { + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { this.$confirm("纭鍏抽棴锛�") .then((_) => { this.dialogUpload = false; @@ -154,6 +193,14 @@ }) .catch((_) => { }); }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, //淇敼瀵嗙爜 updatePassword() { this.updatePasswordDialog = true; diff --git a/src/views/systemSetting/baseSetting/department/index.vue b/src/views/systemSetting/baseSetting/department/index.vue index a3c8d40..7f0f8d5 100644 --- a/src/views/systemSetting/baseSetting/department/index.vue +++ b/src/views/systemSetting/baseSetting/department/index.vue @@ -76,6 +76,10 @@ <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> @@ -318,7 +322,7 @@ // 淇敼鐘舵�� handleChangeStatus(obj) { let {id, status} = obj; - status == true ? (status = 1) : (status = 0); + status == true ? (status = 0) : (status = 1); this.$axios .post(`sccg/depart/status`, {id: id, status: status}) .then((res) => { diff --git a/src/views/systemSetting/baseSetting/department/updateUser/index.vue b/src/views/systemSetting/baseSetting/department/updateUser/index.vue index 6c14173..c5ab3b6 100644 --- a/src/views/systemSetting/baseSetting/department/updateUser/index.vue +++ b/src/views/systemSetting/baseSetting/department/updateUser/index.vue @@ -149,12 +149,12 @@ checkedList.forEach((item) => { arr.push({ leader: item.leader, userId: item.id ? item.id : item.userId }); }); - if (arr.length === 0) { - this.$message({ - type: 'warning', - message: '璇烽�夋嫨閮ㄩ棬浜哄憳', - }) - } else { + // if (arr.length === 0) { + // this.$message({ + // type: 'warning', + // message: '璇烽�夋嫨閮ㄩ棬浜哄憳', + // }) + // } else { this.$axios .post("sccg/depart/update", { id: user.id, @@ -162,6 +162,7 @@ parentId: user.parentId === '鏆傛棤涓婄骇閮ㄩ棬' ? 0 : user.parentId, departDes: user.departDes, departManagerList: arr, + departType: user.departType }) .then((res) => { this.$message({ @@ -171,7 +172,7 @@ this.$emit("changeDialog", { flag: false }); this.getDepartList(); }); - } + // } } else { return false; } diff --git a/vue.config.js b/vue.config.js index d97f668..f3a4d14 100644 --- a/vue.config.js +++ b/vue.config.js @@ -39,8 +39,8 @@ proxy: { // 璺ㄥ煙閰嶇疆 "/sccg": { - target: `http://42.193.1.25/`, - // target: `http://127.0.0.1:8082/`, + // target: `http://42.193.1.25/`, + target: `http://127.0.0.1:8082/`, changeOrigin: true } }, -- Gitblit v1.8.0