From ba5f8ce99b414a89d1e21a650321bf373773e7ae Mon Sep 17 00:00:00 2001 From: MrShi <1878285526@qq.com> Date: 星期五, 22 十一月 2024 09:03:02 +0800 Subject: [PATCH] 优化 --- company/src/views/system/user.vue | 338 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 169 insertions(+), 169 deletions(-) diff --git a/company/src/views/system/user.vue b/company/src/views/system/user.vue index 0b144fc..26bceaf 100644 --- a/company/src/views/system/user.vue +++ b/company/src/views/system/user.vue @@ -1,180 +1,180 @@ <template> - <TableLayout :permissions="['system:user:query']"> - <!-- 鎼滅储琛ㄥ崟 --> - <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="80px" inline> - <el-form-item label="濮撳悕" prop="realname"> - <el-input v-model="searchForm.realname" v-trim placeholder="璇疯緭鍏�" @keypress.enter.native="search"/> - </el-form-item> - <el-form-item label="鎵�灞為儴闂�" prop="companyDepartmentPathName"> - <el-input v-model="searchForm.companyDepartmentPathName" v-trim placeholder="璇疯緭鍏�" @keypress.enter.native="search"/> - </el-form-item> - <section> - <el-button type="primary" icon="el-icon-search" @click="search">鎼滅储</el-button> - <el-button @click="reset">閲嶇疆</el-button> - </section> - </el-form> - <!-- 琛ㄦ牸鍜屽垎椤� --> - <template v-slot:table-wrap> - <ul class="toolbar" v-permissions="['system:user:create', 'system:user:delete']"> - <li v-permissions="['system:user:create']"><el-button type="primary" @click="$refs.operaUserWindow.open('鏂板璐﹀彿')">鏂板璐﹀彿</el-button></li> -<!-- <li v-permissions="['system:user:delete']"><el-button icon="el-icon-delete" @click="deleteByIdInBatch">鍒犻櫎</el-button></li>--> - </ul> -<!-- @selection-change="handleSelectionChange"--> - <el-table - v-loading="isWorking.search" - :data="tableData.list" - :default-sort = "{prop: 'createTime', order: 'descending'}" - stripe - @sort-change="handleSortChange" - > - <el-table-column label="搴忓彿" width="80px"> - <template slot-scope="scope"> - <span>{{scope.$index + 1}}</span> - </template> - </el-table-column> - <el-table-column prop="username" label="璐﹀彿" min-width="120px"></el-table-column> - <el-table-column prop="realname" label="濮撳悕" min-width="100px"></el-table-column> - <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" min-width="100px"></el-table-column> - <el-table-column label="涓荤" min-width="100px"> - <template slot-scope="{ row }"> - <el-switch - v-model="row.headStatus" - @change="setHeadStatus($event, row)" - active-color="#13ce66" - inactive-color="#ff4949" - :active-value="1" - :inactive-value="0"> - </el-switch> - </template> - </el-table-column> - <el-table-column prop="companyDepartmentPathName" label="鎵�鍦ㄩ儴闂�" min-width="100px"></el-table-column> - <el-table-column prop="roles" label="瑙掕壊" min-width="160px" class-name="table-column-strings"> - <template slot-scope="{row}"> - <ul> - <li v-for="role in row.roles" :key="role.id">{{role.name}}</li> - </ul> - </template> - </el-table-column> - <el-table-column label="鍚敤鐘舵��" min-width="100px"> - <template slot-scope="{row}"> - <el-switch - v-if="!row.fixed" - @change="changeStatus($event, row)" - v-model="row.status" - active-color="#13ce66" - inactive-color="#ff4949" - :active-value="0" - :inactive-value="1"> - </el-switch> - </template> - </el-table-column> - <el-table-column - v-if="containPermissions(['system:user:update', 'system:user:createUserRole', 'system:user:resetPwd', 'system:user:delete'])" - label="鎿嶄綔" - width="270" - fixed="right" - > -<!-- row.id !== userInfo.id &&--> - <template v-if="isAdmin || (row.roles.findIndex(r => r.code === adminCode) === -1)" slot-scope="{row}"> - <el-button type="text" icon="el-icon-edit" @click="$refs.operaUserWindow.open('缂栬緫鐢ㄦ埛', {...row, departmentId: row.companyDepartmentPathId.substring(0, row.companyDepartmentPathId.length - 1).split('/').map(val => +val)})" v-permissions="['system:user:update']">缂栬緫</el-button> - <el-button type="text" @click="$refs.allocationEnterprises.open('鍒嗛厤浼佷笟', row)" v-if="[0,2].includes(userInfo.type)">鍒嗛厤浼佷笟</el-button> - <el-button type="text" icon="el-icon-s-custom" @click="$refs.roleConfigWindow.open(row)" v-permissions="['system:user:createUserRole']">閰嶇疆瑙掕壊</el-button> - <el-button type="text" @click="$refs.resetPwdWindow.open(row)" v-permissions="['system:user:resetPwd']">閲嶇疆瀵嗙爜</el-button> -<!-- <el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['system:user:delete']">鍒犻櫎</el-button>--> - </template> - </el-table-column> - </el-table> - <pagination - @size-change="handleSizeChange" - @current-change="handlePageChange" - :pagination="tableData.pagination" - ></pagination> - </template> - <!-- 鏂板缓/淇敼 --> - <OperaUserWindow ref="operaUserWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/> - <!-- 閰嶇疆瑙掕壊 --> - <RoleConfigWindow ref="roleConfigWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/> - <!-- 閲嶇疆瀵嗙爜 --> - <ResetPwdWindow ref="resetPwdWindow"/> - <!-- 鍒嗛厤浼佷笟 --> - <allocationEnterprises ref="allocationEnterprises" @success="handlePageChange(tableData.pagination.pageIndex)"/> - </TableLayout> + <TableLayout :permissions="['system:user:query']"> + <!-- 鎼滅储琛ㄥ崟 --> + <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="80px" inline> + <el-form-item label="濮撳悕" prop="realname"> + <el-input v-model="searchForm.realname" v-trim placeholder="璇疯緭鍏�" @keypress.enter.native="search"/> + </el-form-item> + <el-form-item label="鎵�灞為儴闂�" prop="companyDepartmentPathName"> + <el-input v-model="searchForm.companyDepartmentPathName" v-trim placeholder="璇疯緭鍏�" @keypress.enter.native="search"/> + </el-form-item> + <section> + <el-button type="primary" icon="el-icon-search" @click="search">鎼滅储</el-button> + <el-button @click="reset">閲嶇疆</el-button> + </section> + </el-form> + <!-- 琛ㄦ牸鍜屽垎椤� --> + <template v-slot:table-wrap> + <ul class="toolbar" v-permissions="['system:user:create', 'system:user:delete']"> + <li v-permissions="['system:user:create']"><el-button type="primary" @click="$refs.operaUserWindow.open('鏂板璐﹀彿')">鏂板璐﹀彿</el-button></li> + <!-- <li v-permissions="['system:user:delete']"><el-button icon="el-icon-delete" @click="deleteByIdInBatch">鍒犻櫎</el-button></li>--> + </ul> + <!-- @selection-change="handleSelectionChange"--> + <el-table + v-loading="isWorking.search" + :data="tableData.list" + :default-sort = "{prop: 'createTime', order: 'descending'}" + stripe + @sort-change="handleSortChange" + > + <el-table-column label="搴忓彿" width="80px"> + <template slot-scope="scope"> + <span>{{scope.$index + 1}}</span> + </template> + </el-table-column> + <el-table-column prop="username" label="璐﹀彿" min-width="120px"></el-table-column> + <el-table-column prop="realname" label="濮撳悕" min-width="100px"></el-table-column> + <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" min-width="100px"></el-table-column> + <el-table-column label="涓荤" min-width="100px"> + <template slot-scope="{ row }"> + <el-switch + v-model="row.headStatus" + @change="setHeadStatus($event, row)" + active-color="#13ce66" + inactive-color="#ff4949" + :active-value="1" + :inactive-value="0"> + </el-switch> + </template> + </el-table-column> + <el-table-column prop="companyDepartmentPathName" label="鎵�鍦ㄩ儴闂�" min-width="100px"></el-table-column> + <el-table-column prop="roles" label="瑙掕壊" min-width="160px" class-name="table-column-strings"> + <template slot-scope="{row}"> + <ul> + <li v-for="role in row.roles" :key="role.id">{{role.name}}</li> + </ul> + </template> + </el-table-column> + <el-table-column label="鍚敤鐘舵��" min-width="100px"> + <template slot-scope="{row}"> + <el-switch + v-if="!row.fixed" + @change="changeStatus($event, row)" + v-model="row.status" + active-color="#13ce66" + inactive-color="#ff4949" + :active-value="0" + :inactive-value="1"> + </el-switch> + </template> + </el-table-column> + <el-table-column + v-if="containPermissions(['system:user:update', 'system:user:createUserRole', 'system:user:resetPwd', 'system:user:delete'])" + label="鎿嶄綔" + width="270" + fixed="right" + > + <!-- row.id !== userInfo.id &&--> + <template v-if="isAdmin || (row.roles.findIndex(r => r.code === adminCode) === -1)" slot-scope="{row}"> + <el-button type="text" icon="el-icon-edit" @click="$refs.operaUserWindow.open('缂栬緫鐢ㄦ埛', {...row, departmentId: row.companyDepartmentPathId ? row.companyDepartmentPathId.substring(0, row.companyDepartmentPathId.length - 1).split('/').map(val => +val) : '' })" v-permissions="['system:user:update']">缂栬緫</el-button> + <el-button type="text" @click="$refs.allocationEnterprises.open('鍒嗛厤浼佷笟', row)" v-if="[0,2].includes(userInfo.type)">鍒嗛厤浼佷笟</el-button> + <el-button type="text" icon="el-icon-s-custom" @click="$refs.roleConfigWindow.open(row)" v-permissions="['system:user:createUserRole']">閰嶇疆瑙掕壊</el-button> + <el-button type="text" @click="$refs.resetPwdWindow.open(row)" v-permissions="['system:user:resetPwd']">閲嶇疆瀵嗙爜</el-button> + <!-- <el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['system:user:delete']">鍒犻櫎</el-button>--> + </template> + </el-table-column> + </el-table> + <pagination + @size-change="handleSizeChange" + @current-change="handlePageChange" + :pagination="tableData.pagination" + ></pagination> + </template> + <!-- 鏂板缓/淇敼 --> + <OperaUserWindow ref="operaUserWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/> + <!-- 閰嶇疆瑙掕壊 --> + <RoleConfigWindow ref="roleConfigWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/> + <!-- 閲嶇疆瀵嗙爜 --> + <ResetPwdWindow ref="resetPwdWindow"/> + <!-- 鍒嗛厤浼佷笟 --> + <allocationEnterprises ref="allocationEnterprises" @success="handlePageChange(tableData.pagination.pageIndex)"/> + </TableLayout> </template> <script> -import Pagination from '@/components/common/Pagination' -import TableLayout from '@/layouts/TableLayout' -import BaseTable from '@/components/base/BaseTable' -import OperaUserWindow from '@/components/system/user/OperaUserWindow' -import allocationEnterprises from '@/components/system/user/allocationEnterprises' -import RoleConfigWindow from '@/components/system/user/RoleConfigWindow' -import ResetPwdWindow from '@/components/system/user/ResetPwdWindow' -import DepartmentSelect from '@/components/common/DepartmentSelect' -import PositionSelect from '@/components/common/PositionSelect' -import { updUserStatus, updateHead } from '@/api/system/user' -import { mapState } from 'vuex' -export default { - name: 'SystemUser', - extends: BaseTable, - computed: { - ...mapState(['userInfo']) - }, - components: { allocationEnterprises, PositionSelect, DepartmentSelect, ResetPwdWindow, RoleConfigWindow, OperaUserWindow, TableLayout, Pagination }, - data () { - return { - // 鎼滅储 - searchForm: { - username: '', // 鍚嶅瓧 - realname: '', // 濮撳悕 - rootDeptId: null, // 閮ㄩ棬ID - positionId: null, // 宀椾綅ID - mobile: '', // 鎵嬫満鍙风爜 - type: '', - companyDepartmentPathName: '' // 閮ㄩ棬鍚嶇О + import Pagination from '@/components/common/Pagination' + import TableLayout from '@/layouts/TableLayout' + import BaseTable from '@/components/base/BaseTable' + import OperaUserWindow from '@/components/system/user/OperaUserWindow' + import allocationEnterprises from '@/components/system/user/allocationEnterprises' + import RoleConfigWindow from '@/components/system/user/RoleConfigWindow' + import ResetPwdWindow from '@/components/system/user/ResetPwdWindow' + import DepartmentSelect from '@/components/common/DepartmentSelect' + import PositionSelect from '@/components/common/PositionSelect' + import { updUserStatus, updateHead } from '@/api/system/user' + import { mapState } from 'vuex' + export default { + name: 'SystemUser', + extends: BaseTable, + computed: { + ...mapState(['userInfo']) + }, + components: { allocationEnterprises, PositionSelect, DepartmentSelect, ResetPwdWindow, RoleConfigWindow, OperaUserWindow, TableLayout, Pagination }, + data () { + return { + // 鎼滅储 + searchForm: { + username: '', // 鍚嶅瓧 + realname: '', // 濮撳悕 + rootDeptId: null, // 閮ㄩ棬ID + positionId: null, // 宀椾綅ID + mobile: '', // 鎵嬫満鍙风爜 + type: '', + companyDepartmentPathName: '' // 閮ㄩ棬鍚嶇О + } + } + }, + created () { + this.config({ + module: '鐢ㄦ埛', + api: '/system/user', + 'field.main': 'realname', + sorts: [{ + property: 'CREATE_TIME', + direction: 'DESC' + }] + }) + this.searchForm.type = this.userInfo.type + this.search() + }, + methods: { + // 璁剧疆鍙栨秷涓荤 + setHeadStatus(e, row) { + updateHead({ id: row.id, headStatus: row.headStatus }) + .then(res => { + this.search() + }) + }, + changeStatus(status, row) { + updUserStatus({ + id: row.id, + status + }).then(res => { + this.search() + }).catch(err => { + row.status = row.status === 0 ? 1 : 0 + }) } } - }, - created () { - this.config({ - module: '鐢ㄦ埛', - api: '/system/user', - 'field.main': 'realname', - sorts: [{ - property: 'CREATE_TIME', - direction: 'DESC' - }] - }) - this.searchForm.type = this.userInfo.type - this.search() - }, - methods: { - // 璁剧疆鍙栨秷涓荤 - setHeadStatus(e, row) { - updateHead({ id: row.id, headStatus: row.headStatus }) - .then(res => { - this.search() - }) - }, - changeStatus(status, row) { - updUserStatus({ - id: row.id, - status - }).then(res => { - this.search() - }).catch(err => { - row.status = row.status === 0 ? 1 : 0 - }) - } } -} </script> <style scoped lang="scss"> -@import "@/assets/style/variables.scss"; -// 鍒楄〃澶村儚澶勭悊 -.table-column-avatar { - img { - width: 48px; - } -} + @import "@/assets/style/variables.scss"; + // 鍒楄〃澶村儚澶勭悊 + .table-column-avatar { + img { + width: 48px; + } + } </style> -- Gitblit v1.9.3