From 2146654ce466348808bd11218d5a71756d03abc4 Mon Sep 17 00:00:00 2001 From: 小小儁爺 <1694218219@qq.com> Date: 星期四, 13 三月 2025 16:46:05 +0800 Subject: [PATCH] 1.打印模板修改2.新增打印次数字段 --- src/views/basicSettings/personList.vue | 1487 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 772 insertions(+), 715 deletions(-) diff --git a/src/views/basicSettings/personList.vue b/src/views/basicSettings/personList.vue index 636a649..1505d2b 100644 --- a/src/views/basicSettings/personList.vue +++ b/src/views/basicSettings/personList.vue @@ -1,715 +1,772 @@ -<template> - <div> - <div class="body" :style="{height:mainHeight+'px'}"> - <div style="display: flex"> - <!-- background:rgba(248,248,250,1);--> - <div style="width: 300px;margin: 10px 10px 0 0;background: #fff"> - - <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;"> - <div style="display: flex;"> - <div - style="width: 5px;height: 100%;border-radius: 5px;" - :style="{background:$store.state.settings.theme}" - /> - <div style="margin-left: 8px;">缁勭粐鏋舵瀯</div> - </div> - - <!-- <div style="margin-right:10px">--> - <!-- <i class="el-icon-plus" style="cursor: pointer;color: #999" />--> - <!-- </div>--> - - </div> - - <el-tree - ref="treeLeftRef" - key="treeLeftKey" - style="padding: 10px;overflow: auto;" - :style="{height:(tableHeight+180)+'px'}" - :data="treeLeft" - node-key="torg_code" - highlight-current - :props="defaultPropsLeft" - :default-expand-all="true" - :expand-on-click-node="false" - @node-click="nodeClick" - /> - - </div> - - <div style="width: calc(100% - 300px)"> - <div class="bodyTopButtonGroup" style="justify-content: space-between"> - <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button> - <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=3')">瀵煎叆</el-button> - </div> - - <div class="bodyTopFormGroup"> - <el-form - ref="form" - :model="form" - label-width="100px" - inline - style="display: flex;" - > - <div class="elForm"> - <el-form-item label="鐢ㄦ埛缂栫爜" style=" display: flex;"> - <el-input v-model="form.usercode" placeholder="璇疯緭鍏�" style="width: 200px" /> - </el-form-item> - <el-form-item label="鐢ㄦ埛鍚嶇О" style=" display: flex;"> - <el-input v-model="form.username" placeholder="璇疯緭鍏�" style="width: 200px" /> - </el-form-item> - <!-- <el-form-item label="鐢ㄦ埛缂栫爜" style=" display: flex;">--> - <!-- <el-input v-model="form.usercode" placeholder="璇疯緭鍏�" style="width: 200px" />--> - <!-- </el-form-item>--> - <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛鍚嶇О" style=" display: flex;">--> - <!-- <el-input v-model="form.username" placeholder="璇疯緭鍏�" style="width: 200px" />--> - <!-- </el-form-item>--> - <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛缂栫爜" style=" display: flex;">--> - <!-- <el-input v-model="form.usercode" placeholder="璇疯緭鍏�" style="width: 200px" />--> - <!-- </el-form-item>--> - <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛鍚嶇О" style=" display: flex;">--> - <!-- <el-input v-model="form.username" placeholder="璇疯緭鍏�" style="width: 200px" />--> - <!-- </el-form-item>--> - <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛缂栫爜" style=" display: flex;">--> - <!-- <el-input v-model="form.usercode" placeholder="璇疯緭鍏�" style="width: 200px" />--> - <!-- </el-form-item>--> - <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛鍚嶇О" style=" display: flex;">--> - <!-- <el-input v-model="form.username" placeholder="璇疯緭鍏�" style="width: 200px" />--> - <!-- </el-form-item>--> - </div> - <div - class="bodySearchReset" - :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}" - > - <el-button v-waves type="primary" icon="el-icon-search" @click="getUserData">鏌ヨ</el-button> - <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">閲嶇疆</el-button> - </div> - </el-form> - <div - class="bodyTopFormExpand" - style="height: 5px;" - > - <!-- <svg-icon--> - <!-- v-show="mouseHoverType==='mouseout'"--> - <!-- style="cursor: pointer"--> - <!-- :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"--> - <!-- @mouseenter="mouseHoverType=$event.type"--> - <!-- />--> - <!-- <svg-icon--> - <!-- v-show="mouseHoverType==='mouseenter'"--> - <!-- style="cursor: pointer"--> - <!-- :icon-class="!isExpandForm?'doubleDown':'doubleUp'"--> - <!-- @click="isExpandForm=!isExpandForm"--> - <!-- @mouseout="mouseHoverType=$event.type"--> - <!-- />--> - </div> - </div> - - <div class="elTableDiv"> - <el-table - ref="tableDataRef" - class="tableFixed" - :data="tableData" - :height="isExpandForm?tableHeight:(tableHeight+80)+'px'" - border - row-class-name="custom-row" - :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}" - highlight-current-row - :header-cell-style="this.$headerCellStyle" - :cell-style="this.$cellStyle" - @sort-change="sortChange" - > - <el-table-column - prop="rowNum" - width="50" - fixed - label="搴忓彿" - /> - <el-table-column - prop="usercode" - label="鐢ㄦ埛缂栫爜" - sortable="custom" - show-overflow-tooltip - /> - <el-table-column - prop="username" - label="鐢ㄦ埛鍚嶇О" - sortable="custom" - show-overflow-tooltip - /> - <el-table-column - prop="storg_name" - label="鎵�灞炵粍缁�" - show-overflow-tooltip - sortable="custom" - > - <template slot-scope="{row}"> - <div v-if="row.storg_name">{{ row.storg_name }}</div> - <div v-else>/</div> - </template> - </el-table-column> - <el-table-column - prop="status" - label="鐘舵��" - show-overflow-tooltip - sortable="custom" - > - <template slot-scope="{row}"> - <el-tag v-if="row.status==='Y'" size="small" type="success">鍦ㄨ亴</el-tag> - <el-tag v-if="row.status==='N'" size="small" type="danger">绂昏亴</el-tag> - </template> - </el-table-column> - <el-table-column - prop="email" - label="閭" - sortable="custom" - show-overflow-tooltip - > - <template slot-scope="{row}"> - {{ row.email ? row.email : '/' }} - </template> - </el-table-column> - <el-table-column - prop="mobile" - label="鍙风爜" - sortable="custom" - show-overflow-tooltip - > - <template slot-scope="{row}"> - {{ row.mobile ? row.mobile : '/' }} - </template> - </el-table-column> - <el-table-column - prop="postname" - label="宀椾綅" - sortable="custom" - show-overflow-tooltip - > - <template slot-scope="{row}"> - {{ row.postname ? row.postname : '/' }} - </template> - </el-table-column> - <el-table-column - prop="rolename" - label="瑙掕壊" - sortable="custom" - show-overflow-tooltip - > - <template slot-scope="{row}"> - {{ row.rolename ? row.rolename : '/' }} - </template> - </el-table-column> - <el-table-column - prop="group_name" - label="鐝粍" - sortable="custom" - show-overflow-tooltip - > - <template slot-scope="{row}"> - {{ row.group_name ? row.group_name : '/' }} - </template> - </el-table-column> - <el-table-column - prop="createusername" - label="鍒涘缓浜哄憳" - sortable="custom" - /> - <el-table-column - prop="lm_date" - label="鍒涘缓鏃堕棿" - width="160" - sortable="custom" - /> - <el-table-column - label="鎿嶄綔" - width="120" - fixed="right" - > - <template slot-scope="{row}"> - <div class="operationClass"> - <el-tooltip class="item" effect="dark" content="缂栬緫" placement="top"> - <i - v-if="row.usercode!=='9999'" - class="el-icon-edit-outline" - :style="{color:$store.state.settings.theme}" - @click="edit('edit',row)" - /> - </el-tooltip> - <el-tooltip v-del-tab-index class="item" effect="dark" content="鍒犻櫎" placement="top"> - <i - v-if="row.usercode!=='9999'" - class="el-icon-delete" - :style="{color:$store.state.settings.theme}" - @click="del(row)" - /> - </el-tooltip> - </div> - </template> - </el-table-column> - </el-table> - </div> - <!--鍒嗛〉--> - <pagination - :total="total" - :page.sync="form.page" - :limit.sync="form.rows" - align="right" - layout="total,prev, pager, next,sizes,jumper" - popper-class="select_bottom" - @pagination="getUserData" - /> - </div> - - </div> - - </div> - - <el-dialog - v-el-drag-dialog - :title="operation==='add'?'鏂板':'缂栬緫'" - :visible.sync="dialogVisible" - width="800px" - :close-on-click-modal="false" - top="15vh" - @closed="handleClose" - @close="handleClose" - > - <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px"> - <el-form-item label="鐢ㄦ埛缂栫爜" prop="usercode"> - <el-input v-model="dialogForm.usercode" :disabled="operation!=='add'" style="width: 200px" /> - </el-form-item> - <el-form-item label="鐢ㄦ埛鍚嶇О" prop="username"> - <el-input v-model="dialogForm.username" style="width: 200px" /> - </el-form-item> - - <el-form-item label="鐢ㄦ埛瀵嗙爜" prop="password"> - <el-input v-model="dialogForm.password" style="width: 200px" /> - </el-form-item> - - <el-form-item label="鎵�灞炵粍缁�" prop="storg_code"> - <el-cascader - ref="cascader" - v-model="dialogForm.storg_code" - :options="cascaderOptions" - filterable - :props="defaultProps" - :show-all-levels="false" - /> - </el-form-item> - - <el-form-item label="鎵嬫満鍙�" prop="mobile"> - <el-input v-model="dialogForm.mobile" style="width: 200px" /> - </el-form-item> - <el-form-item label="閭" prop="email"> - <el-input v-model="dialogForm.email" style="width: 200px" /> - </el-form-item> - - <el-form-item required label="鐢ㄦ埛鐘舵��"> - <el-radio-group v-model="dialogForm.status" style="width: 200px;"> - <el-radio label="Y">鍦ㄨ亴</el-radio> - <el-radio label="N">绂昏亴</el-radio> - </el-radio-group> - </el-form-item> - - <el-form-item prop="post_code" label="宀椾綅"> - <el-select - v-model="dialogForm.post_code" - style="width:490px" - placeholder="璇烽�夋嫨" - multiple - filterable - clearable - collapse-tags - :popper-append-to-body="false" - > - <el-option - v-for="item in postArr" - :key="item.postcode" - :label="item.postname" - :value="item.postcode" - /> - </el-select> - </el-form-item> - - <el-form-item prop="role_code" label="瑙掕壊"> - <el-select - v-model="dialogForm.role_code" - style="width:490px" - multiple - filterable - clearable - collapse-tags - placeholder="璇烽�夋嫨" - :popper-append-to-body="false" - > - <el-option - v-for="item in roleArr" - :key="item.rolecode" - :label="item.rolename" - :value="item.rolecode" - /> - </el-select> - </el-form-item> - <el-form-item prop="group_code" label="鐝粍"> - <el-select - v-model="dialogForm.group_code" - style="width: 490px" - placeholder="璇烽�夋嫨" - :popper-append-to-body="false" - multiple - filterable - collapse-tags - clearable - > - <el-option - v-for="item in groupArr" - :key="item.usergroupcode" - :label="item.usergroupname" - :value="item.usergroupcode" - /> - </el-select> - </el-form-item> - - </el-form> - <span slot="footer" class="dialog-footer"> - <div class="footerButton"> - <el-button v-waves @click="dialogVisibleCancel">鍙� 娑�</el-button> - <el-button - v-waves - type="primary" - :loading="$store.state.app.buttonIsDisabled" - :disabled="$store.state.app.buttonIsDisabled" - @click="dialogVisibleConfirm" - >纭� 瀹�</el-button> - </div> - </span> - </el-dialog> - - </div> -</template> - -<script> -import Pagination from '@/components/Pagination' -import { - AddUpdateUserSave, - DeleteUserSave, UserData -} from '@/api/basicSettings' -import { validateCode } from '@/utils/global' -import elDragDialog from '@/directive/el-drag-dialog' -import waves from '@/directive/waves' -import arrayToTree from 'array-to-tree' -import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData' - -export default { - name: 'PersonList', - components: { - Pagination - }, - directives: { elDragDialog, waves }, - data() { - const validateMobile = (rule, value, callback) => { - if (!value) { - callback() - // return callback(new Error('璇疯緭鍏ョ數璇濆彿鐮�')) - } else { - const mobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 闀垮彿 - const mobile2 = /^[0-9]{6}$/ // 鐭彿 - if (mobile.test(value) || mobile2.test(value)) { - callback() - // return callback(new Error('鐢佃瘽鍙风爜涓嶇鍚堣鍒�')) - } else { - return callback(new Error('鐢佃瘽鍙风爜涓嶇鍚堣鍒�')) - // callback() - } - } - } - const validateEmail = (rule, value, callback) => { - if (!value) { - callback() - // return callback(new Error('璇疯緭鍏ョ數瀛愰偖绠�')) - } else { - const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/ - if (email.test(value)) { - callback() - } else { - return callback(new Error('鐢靛瓙閭涓嶇鍚堣鍒�')) - } - } - } - return { - mouseHoverType: 'mouseout', - isExpandForm: false, - mainHeight: 0, - tableHeight: 0, - form: { - usercode: '', - username: '', - storgcode: '', // 缁勭粐缂栫爜 - prop: 'lm_date', // 鎺掑簭瀛楁 - order: 'desc', // 鎺掑簭瀛楁 - page: 1, // 绗嚑椤� - rows: 20 // 姣忛〉澶氬皯鏉� - }, - total: 10, - tableData: [], - dialogVisible: false, - dialogForm: { - usercode: '', // 鐢ㄦ埛缂栫爜 - username: '', // 鐢ㄦ埛鍚嶇О - post_code: [], // 宀椾綅 - role_code: [], // 瑙掕壊 - group_code: [], // 鐝粍 - password: '123456', // 瀵嗙爜 - storg_code: '', // 鎵�灞炵粍缁� - mobile: '', // 鍙风爜 - email: '', // 閭 - status: 'Y'// 鐘舵�� - }, - operation: '', - dialogFormRules: { - usercode: [ - { required: true, validator: validateCode, trigger: ['blur', 'change'] } - ], - username: [ - { required: true, message: '璇疯緭鍏ョ粍缁囧悕绉�', trigger: ['blur', 'change'] } - ], - password: [ - { required: true, message: '璇疯緭鍏ョ敤鎴峰瘑鐮�', trigger: ['blur', 'change'] } - ], - mobile: [ - { required: false, validator: validateMobile, trigger: ['blur', 'change'] } - ], - email: [ - { required: false, validator: validateEmail, trigger: ['blur', 'change'] } - ], - storg_code: [ - { required: true, message: '璇烽�夋嫨鎵�灞炵粍缁�', trigger: ['blur', 'change'] } - ] - }, - defaultProps: { - checkStrictly: true, - expandTrigger: 'hover', - value: 'torg_code', - label: 'torg_name' - }, - Options: [], - cascaderOptions: [], - - postArr: [], - roleArr: [], - groupArr: [], - - defaultPropsLeft: { - children: 'children', - label: 'torg_name' - }, - treeLeft: [] - - } - }, - activated() { window.addEventListener('resize', this.getHeight) this.getHeight() }, created() { - this.getUserData() - }, - mounted() { - window.addEventListener('resize', this.getHeight) - this.getHeight() - - this.getPrentOrganization() - this.getAllSelectData() - }, - methods: { - // 缁勭粐鏋舵瀯澶у垪琛ㄦ煡璇� - async getUserData() { - const res = await UserData(this.form) - this.tableData = res.data - this.total = res.count - }, - // 缁勭粐鏋舵瀯绾ц仈閫夋嫨鍣� - async getPrentOrganization() { - const { data: res } = await PrentOrganization() - this.Options = res - this.cascaderOptions = arrayToTree(res, { - parentProperty: 'parent_id', - customID: 'torg_code', - childrenProperty: 'children' - }) - this.$nextTick(() => { - this.treeLeft = this.cascaderOptions - this.$forceUpdate() - }) - }, - // 宀椾綅 瑙掕壊 鐝粍 - async getAllSelectData() { - const { data: res1 } = await PostPermissions() - this.postArr = res1 - - const { data: res2 } = await RolePermissions() - this.roleArr = res2 - - const { data: res3 } = await GroupsPermissions() - this.groupArr = res3 - }, - - // 鎺掑簭鏀瑰彉鏃� - sortChange({ column, prop, order }) { - if (order === 'descending') { - order = 'desc' - } else if (order === 'ascending') { - order = 'asc' - } else { - order = 'desc' - } - this.form.order = order - this.form.prop = prop - this.getUserData() - }, - nodeClick(obj, Node, VueComponent) { - this.form.storgcode = obj.torg_code - this.getUserData() - }, - // 閲嶇疆 - reset() { - this.form.usercode = '' - this.form.username = '' - this.form.storgcode = '' - this.$refs.treeLeftRef.setCurrentKey(null) - this.getUserData() - }, - // 鏂板鎸夐挳 - add(operation) { - this.operation = operation - this.dialogVisible = true - this.dialogForm.OperType = 'Add' - }, - // 淇敼鎸夐挳 - async edit(operation, row) { - this.operation = operation - this.dialogVisible = true - this.dialogForm.OperType = 'Update' - - // this.cascaderOptions = this.filterChildren(this.cascaderOptions, row.storg_code) - this.$nextTick(() => { - this.dialogForm.usercode = row.usercode - this.dialogForm.username = row.username - this.dialogForm.password = row.password - this.dialogForm.mobile = row.mobile - this.dialogForm.email = row.email - this.dialogForm.status = row.status - this.dialogForm.storg_code = this.findParent([], row.storg_code, this.cascaderOptions).reverse() - - this.dialogForm.post_code = row.post_code ? row.post_code.split(',') : [] - this.dialogForm.role_code = row.role_code ? row.role_code.split(',') : [] - this.dialogForm.group_code = row.group_code ? row.group_code.split(',') : [] - }) - }, - filterChildren(treeData, code) { - treeData.forEach(item => { - if (code.split(',').includes(item.torg_code)) { - item.disabled = true - if (item.children && item.children.length > 0) { - this.filterChildren(item.children, item.children.map(it => it.torg_code).join(',')) - } - } else { - if (item.children && item.children.length > 0) { - this.filterChildren(item.children, code) - } - } - }) - return treeData - }, - // parents:鐢ㄤ簬杩斿洖鐨勬暟缁勶紝childNode:瑕佹煡璇㈢殑鑺傜偣锛宼reeData锛歫son鏍戝舰鏁版嵁 - findParent(parents, childNode, treeData) { - // console.log(parents, childNode, treeData, 2) - - for (let i = 0; i < treeData.length; i++) { - // 鐖惰妭鐐规煡璇㈡潯浠� - if (treeData[i].torg_code === childNode) { - // 濡傛灉鎵惧埌缁撴灉,淇濆瓨褰撳墠鑺傜偣 - parents.push(treeData[i].torg_code) - // 鐢ㄥ綋鍓嶈妭鐐瑰啀鍘诲師鏁版嵁鏌ユ壘褰撳墠鑺傜偣鐨勭埗鑺傜偣 - this.findParent(parents, treeData[i].parent_id, this.cascaderOptions) - break - } else { - if (treeData[i].children instanceof Array) { - // 娌℃壘鍒帮紝閬嶅巻璇ヨ妭鐐圭殑瀛愯妭鐐� - this.findParent(parents, childNode, treeData[i].children) - } - } - } - return parents - }, - // 鍒犻櫎鎸夐挳 - async del(row) { - this.$confirm('鏄惁纭鍒犻櫎?', '鎻愮ず', { - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - type: 'warning' - }).then(() => { - DeleteUserSave({ usercode: row.usercode }).then(res => { - if (res.code === '200') { - this.$notify.success('鍒犻櫎鎴愬姛!') - if (this.form.page > 1 && this.tableData.length === 1) { - this.form.page-- - } - this.getUserData() - } - }) - }).catch(() => { - this.$notify.info('宸插彇娑堝垹闄�') - }) - }, - // 瀵硅瘽妗嗗叧闂簨浠� - handleClose() { - this.dialogForm.usercode = '' - this.dialogForm.username = '' - this.dialogForm.status = 'Y' - - this.dialogForm.post_code = [] - this.dialogForm.role_code = [] - this.dialogForm.group_code = [] - this.dialogForm.password = '123456' - this.dialogForm.mobile = '' - this.dialogForm.email = '' - - // this.dialogForm.storg_code = '' - - this.$refs.cascader.checkedValue = '' - this.$refs.dialogForm.clearValidate() - }, - // 瀵硅瘽妗嗗彇娑� - dialogVisibleCancel() { - this.dialogVisible = false - }, - // 瀵硅瘽妗嗙‘璁� - dialogVisibleConfirm() { - this.$refs.dialogForm.validate(valid => { - if (valid) { - this.$store.state.app.buttonIsDisabled = true - this.dialogForm.group_code = this.dialogForm.group_code.join(',') - this.dialogForm.post_code = this.dialogForm.post_code.join(',') - this.dialogForm.role_code = this.dialogForm.role_code.join(',') - this.dialogForm.storg_code = this.dialogForm.storg_code[this.dialogForm.storg_code.length - 1] - AddUpdateUserSave(this.dialogForm).then(res => { - if (res.code === '200') { - this.$notify.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�') - this.dialogVisible = false - this.$store.state.app.buttonIsDisabled = false - this.getUserData() - } else { - this.$store.state.app.buttonIsDisabled = false - this.$notify.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '淇敼澶辫触锛�') - } - }) - } - }) - }, - // 鑾峰彇椤甸潰楂樺害 - getHeight() { - this.$nextTick(() => { - this.mainHeight = window.innerHeight - 85 - this.tableHeight = this.mainHeight - 280 - this.$refs.tableDataRef.doLayout() - }) - } - } -} -</script> +<template> + <div> + <div class="body" :style="{height:mainHeight+'px'}"> + <div style="display: flex"> + <!-- background:rgba(248,248,250,1);--> + <div style="width: 220px;margin: 10px 10px 0 0;background: #fff"> + + <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;"> + <div style="display: flex;"> + <div + style="width: 5px;height: 100%;border-radius: 5px;" + :style="{background:$store.state.settings.theme}" + /> + <div style="margin-left: 8px;">缁勭粐鏋舵瀯</div> + </div> + + <!-- <div style="margin-right:10px">--> + <!-- <i class="el-icon-plus" style="cursor: pointer;color: #999" />--> + <!-- </div>--> + + </div> + + <el-tree + ref="treeLeftRef" + key="treeLeftKey" + style="padding: 10px;overflow: auto;" + :style="{height:(tableHeight+180)+'px'}" + :data="treeLeft" + node-key="torg_code" + highlight-current + :props="defaultPropsLeft" + :default-expand-all="true" + :expand-on-click-node="false" + @node-click="nodeClick" + /> + + </div> + + <div style="width: calc(100% - 220px)"> + <div class="bodyTopButtonGroup" style="justify-content: space-between"> + <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button> + <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=3')">瀵煎叆</el-button> + </div> + + <div class="bodyTopFormGroup"> + <el-form + ref="form" + :model="form" + label-width="100px" + inline + style="display: flex;" + > + <div class="elForm"> + <el-form-item label="鐢ㄦ埛缂栫爜" style=" display: flex;"> + <el-input v-model="form.usercode" placeholder="璇疯緭鍏�" style="width: 200px" /> + </el-form-item> + <el-form-item label="鐢ㄦ埛鍚嶇О" style=" display: flex;"> + <el-input v-model="form.username" placeholder="璇疯緭鍏�" style="width: 200px" /> + </el-form-item> + <!-- <el-form-item label="鐢ㄦ埛缂栫爜" style=" display: flex;">--> + <!-- <el-input v-model="form.usercode" placeholder="璇疯緭鍏�" style="width: 200px" />--> + <!-- </el-form-item>--> + <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛鍚嶇О" style=" display: flex;">--> + <!-- <el-input v-model="form.username" placeholder="璇疯緭鍏�" style="width: 200px" />--> + <!-- </el-form-item>--> + <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛缂栫爜" style=" display: flex;">--> + <!-- <el-input v-model="form.usercode" placeholder="璇疯緭鍏�" style="width: 200px" />--> + <!-- </el-form-item>--> + <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛鍚嶇О" style=" display: flex;">--> + <!-- <el-input v-model="form.username" placeholder="璇疯緭鍏�" style="width: 200px" />--> + <!-- </el-form-item>--> + <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛缂栫爜" style=" display: flex;">--> + <!-- <el-input v-model="form.usercode" placeholder="璇疯緭鍏�" style="width: 200px" />--> + <!-- </el-form-item>--> + <!-- <el-form-item v-show="isExpandForm" label="鐢ㄦ埛鍚嶇О" style=" display: flex;">--> + <!-- <el-input v-model="form.username" placeholder="璇疯緭鍏�" style="width: 200px" />--> + <!-- </el-form-item>--> + </div> + <div + class="bodySearchReset" + :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}" + > + <el-button v-waves type="primary" icon="el-icon-search" @click="getUserData">鏌ヨ</el-button> + <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">閲嶇疆</el-button> + </div> + </el-form> + <div + class="bodyTopFormExpand" + style="height: 5px;" + > + <!-- <svg-icon--> + <!-- v-show="mouseHoverType==='mouseout'"--> + <!-- style="cursor: pointer"--> + <!-- :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"--> + <!-- @mouseenter="mouseHoverType=$event.type"--> + <!-- />--> + <!-- <svg-icon--> + <!-- v-show="mouseHoverType==='mouseenter'"--> + <!-- style="cursor: pointer"--> + <!-- :icon-class="!isExpandForm?'doubleDown':'doubleUp'"--> + <!-- @click="isExpandForm=!isExpandForm"--> + <!-- @mouseout="mouseHoverType=$event.type"--> + <!-- />--> + </div> + </div> + + <div class="elTableDiv"> + <el-table + ref="tableDataRef" + class="tableFixed" + :data="tableData" + :height="isExpandForm?tableHeight:(tableHeight+80)+'px'" + border + row-class-name="custom-row" + :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}" + highlight-current-row + :header-cell-style="this.$headerCellStyle" + :cell-style="this.$cellStyle" + @sort-change="sortChange" + > + <el-table-column + prop="rowNum" + width="50" + fixed + label="搴忓彿" + /> + <el-table-column + prop="usercode" + label="鐢ㄦ埛缂栫爜" + sortable="custom" + min-width="105" + show-overflow-tooltip + /> + <el-table-column + prop="username" + label="鐢ㄦ埛鍚嶇О" + min-width="105" + sortable="custom" + show-overflow-tooltip + /> + <el-table-column + prop="storg_name" + label="鎵�灞炵粍缁�" + min-width="105" + show-overflow-tooltip + sortable="custom" + > + <template slot-scope="{row}"> + <div v-if="row.storg_name">{{ row.storg_name }}</div> + <div v-else>/</div> + </template> + </el-table-column> + <el-table-column + prop="status" + min-width="105" + label="鐘舵��" + show-overflow-tooltip + sortable="custom" + > + <template slot-scope="{row}"> + <el-tag v-if="row.status==='Y'" size="small" type="success">鍦ㄨ亴</el-tag> + <el-tag v-if="row.status==='N'" size="small" type="danger">绂昏亴</el-tag> + </template> + </el-table-column> + + <el-table-column + prop="payrate" + min-width="105" + label="钖祫绫诲瀷" + show-overflow-tooltip + sortable="custom" + > + <template slot-scope="{row}"> + {{ row.payrate ? PayRateArr.find(i=>i.code === row.payrate).name : '/' }} + </template> + </el-table-column> + + <el-table-column + prop="email" + label="閭" + min-width="105" + sortable="custom" + show-overflow-tooltip + > + <template slot-scope="{row}"> + {{ row.email ? row.email : '/' }} + </template> + </el-table-column> + <el-table-column + prop="mobile" + label="鍙风爜" + min-width="105" + sortable="custom" + show-overflow-tooltip + > + <template slot-scope="{row}"> + {{ row.mobile ? row.mobile : '/' }} + </template> + </el-table-column> + <el-table-column + prop="postname" + label="宀椾綅" + sortable="custom" + min-width="105" + show-overflow-tooltip + > + <template slot-scope="{row}"> + {{ row.postname ? row.postname : '/' }} + </template> + </el-table-column> + <el-table-column + prop="rolename" + label="瑙掕壊" + sortable="custom" + min-width="105" + show-overflow-tooltip + > + <template slot-scope="{row}"> + {{ row.rolename ? row.rolename : '/' }} + </template> + </el-table-column> + <el-table-column + prop="group_name" + label="鐝粍" + min-width="105" + sortable="custom" + show-overflow-tooltip + > + <template slot-scope="{row}"> + {{ row.group_name ? row.group_name : '/' }} + </template> + </el-table-column> + <el-table-column + prop="createusername" + label="鍒涘缓浜哄憳" + sortable="custom" + min-width="105" + /> + <el-table-column + prop="lm_date" + label="鍒涘缓鏃堕棿" + width="160" + sortable="custom" + /> + <el-table-column + label="鎿嶄綔" + width="80" + fixed="right" + > + <template slot-scope="{row}"> + <div class="operationClass"> + <el-tooltip class="item" effect="dark" content="缂栬緫" placement="top"> + <i + v-if="row.usercode!=='9999'" + class="el-icon-edit-outline" + :style="{color:$store.state.settings.theme}" + @click="edit('edit',row)" + /> + </el-tooltip> + <el-tooltip v-del-tab-index class="item" effect="dark" content="鍒犻櫎" placement="top"> + <i + v-if="row.usercode!=='9999'" + class="el-icon-delete" + :style="{color:$store.state.settings.theme}" + @click="del(row)" + /> + </el-tooltip> + </div> + </template> + </el-table-column> + </el-table> + </div> + <!--鍒嗛〉--> + <pagination + :total="total" + :page.sync="form.page" + :limit.sync="form.rows" + align="right" + layout="total,prev, pager, next,sizes,jumper" + popper-class="select_bottom" + @pagination="getUserData" + /> + </div> + + </div> + + </div> + + <el-dialog + v-el-drag-dialog + :title="operation==='add'?'鏂板':'缂栬緫'" + :visible.sync="dialogVisible" + width="800px" + :close-on-click-modal="false" + top="15vh" + @closed="handleClose" + @close="handleClose" + > + <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px"> + <el-form-item label="鐢ㄦ埛缂栫爜" prop="usercode"> + <el-input v-model="dialogForm.usercode" :disabled="operation!=='add'" style="width: 200px" /> + </el-form-item> + <el-form-item label="鐢ㄦ埛鍚嶇О" prop="username"> + <el-input v-model="dialogForm.username" style="width: 200px" /> + </el-form-item> + + <el-form-item label="鐢ㄦ埛瀵嗙爜" prop="password"> + <el-input v-model="dialogForm.password" style="width: 200px" /> + </el-form-item> + + <el-form-item label="鎵�灞炵粍缁�" prop="storg_code"> + <el-cascader + ref="cascader" + v-model="dialogForm.storg_code" + :options="cascaderOptions" + filterable + :props="defaultProps" + :show-all-levels="false" + /> + </el-form-item> + + <el-form-item label="鎵嬫満鍙�" prop="mobile"> + <el-input v-model="dialogForm.mobile" style="width: 200px" /> + </el-form-item> + <el-form-item label="閭" prop="email"> + <el-input v-model="dialogForm.email" style="width: 200px" /> + </el-form-item> + + <el-form-item required label="鐢ㄦ埛鐘舵��"> + <el-radio-group v-model="dialogForm.status" style="width: 200px;"> + <el-radio label="Y">鍦ㄨ亴</el-radio> + <el-radio label="N">绂昏亴</el-radio> + </el-radio-group> + </el-form-item> + + <el-form-item prop="payrate" label="钖祫绫诲瀷"> + <el-select + v-model="dialogForm.payrate" + style="width:200px" + placeholder="璇烽�夋嫨" + :popper-append-to-body="false" + > + <el-option + v-for="item in PayRateArr" + :key="item.code" + :label="item.name" + :value="item.code" + /> + </el-select> + </el-form-item> + + <el-form-item prop="post_code" label="宀椾綅"> + <el-select + v-model="dialogForm.post_code" + style="width:490px" + placeholder="璇烽�夋嫨" + multiple + filterable + clearable + collapse-tags + :popper-append-to-body="false" + > + <el-option + v-for="item in postArr" + :key="item.postcode" + :label="item.postname" + :value="item.postcode" + /> + </el-select> + </el-form-item> + + <el-form-item prop="role_code" label="瑙掕壊"> + <el-select + v-model="dialogForm.role_code" + style="width:490px" + multiple + filterable + clearable + collapse-tags + placeholder="璇烽�夋嫨" + :popper-append-to-body="false" + > + <el-option + v-for="item in roleArr" + :key="item.rolecode" + :label="item.rolename" + :value="item.rolecode" + /> + </el-select> + </el-form-item> + <el-form-item prop="group_code" label="鐝粍"> + <el-select + v-model="dialogForm.group_code" + style="width: 490px" + placeholder="璇烽�夋嫨" + :popper-append-to-body="false" + multiple + filterable + collapse-tags + clearable + > + <el-option + v-for="item in groupArr" + :key="item.usergroupcode" + :label="item.usergroupname" + :value="item.usergroupcode" + /> + </el-select> + </el-form-item> + + </el-form> + <span slot="footer" class="dialog-footer"> + <div class="footerButton"> + <el-button v-waves @click="dialogVisibleCancel">鍙� 娑�</el-button> + <el-button + v-waves + type="primary" + :loading="$store.state.app.buttonIsDisabled" + :disabled="$store.state.app.buttonIsDisabled" + @click="dialogVisibleConfirm" + >纭� 瀹�</el-button> + </div> + </span> + </el-dialog> + + </div> +</template> + +<script> +import Pagination from '@/components/Pagination' +import { + AddUpdateUserSave, + DeleteUserSave, UserData +} from '@/api/basicSettings' +import { validateCode } from '@/utils/global' +import elDragDialog from '@/directive/el-drag-dialog' +import waves from '@/directive/waves' +import arrayToTree from 'array-to-tree' +import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData' + +export default { + name: 'PersonList', + components: { + Pagination + }, + directives: { elDragDialog, waves }, + data() { + const validateMobile = (rule, value, callback) => { + if (!value) { + callback() + // return callback(new Error('璇疯緭鍏ョ數璇濆彿鐮�')) + } else { + const mobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 闀垮彿 + const mobile2 = /^[0-9]{6}$/ // 鐭彿 + if (mobile.test(value) || mobile2.test(value)) { + callback() + // return callback(new Error('鐢佃瘽鍙风爜涓嶇鍚堣鍒�')) + } else { + return callback(new Error('鐢佃瘽鍙风爜涓嶇鍚堣鍒�')) + // callback() + } + } + } + const validateEmail = (rule, value, callback) => { + if (!value) { + callback() + // return callback(new Error('璇疯緭鍏ョ數瀛愰偖绠�')) + } else { + const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/ + if (email.test(value)) { + callback() + } else { + return callback(new Error('鐢靛瓙閭涓嶇鍚堣鍒�')) + } + } + } + return { + mouseHoverType: 'mouseout', + isExpandForm: false, + mainHeight: 0, + tableHeight: 0, + form: { + usercode: '', + username: '', + storgcode: '', // 缁勭粐缂栫爜 + prop: 'lm_date', // 鎺掑簭瀛楁 + order: 'desc', // 鎺掑簭瀛楁 + page: 1, // 绗嚑椤� + rows: 20 // 姣忛〉澶氬皯鏉� + }, + total: 10, + tableData: [], + dialogVisible: false, + dialogForm: { + usercode: '', // 鐢ㄦ埛缂栫爜 + username: '', // 鐢ㄦ埛鍚嶇О + post_code: [], // 宀椾綅 + role_code: [], // 瑙掕壊 + group_code: [], // 鐝粍 + password: '123456', // 瀵嗙爜 + storg_code: '', // 鎵�灞炵粍缁� + mobile: '', // 鍙风爜 + email: '', // 閭 + status: 'Y', // 鐘舵�� + payrate: ''// 钖祫绫诲瀷 + }, + operation: '', + dialogFormRules: { + usercode: [ + { required: true, validator: validateCode, trigger: ['blur', 'change'] } + ], + username: [ + { required: true, message: '璇疯緭鍏ョ粍缁囧悕绉�', trigger: ['blur', 'change'] } + ], + password: [ + { required: true, message: '璇疯緭鍏ョ敤鎴峰瘑鐮�', trigger: ['blur', 'change'] } + ], + mobile: [ + { required: false, validator: validateMobile, trigger: ['blur', 'change'] } + ], + email: [ + { required: false, validator: validateEmail, trigger: ['blur', 'change'] } + ], + storg_code: [ + { required: true, message: '璇烽�夋嫨鎵�灞炵粍缁�', trigger: ['blur', 'change'] } + ], + payrate: [ + { required: true, message: '璇烽�夋嫨钖祫绫诲瀷', trigger: ['blur', 'change'] } + ] + }, + defaultProps: { + checkStrictly: true, + expandTrigger: 'hover', + value: 'torg_code', + label: 'torg_name' + }, + Options: [], + cascaderOptions: [], + + postArr: [], + roleArr: [], + groupArr: [], + PayRateArr: [ + { code: 'S', name: '璁′欢' }, + { code: 'T', name: '璁℃椂' }, + { code: 'M', name: '鎸夋湀' } + ], + + defaultPropsLeft: { + children: 'children', + label: 'torg_name' + }, + treeLeft: [] + + } + }, + activated() { + window.addEventListener('resize', this.getHeight) + this.getHeight() + this.getUserData() + this.getPrentOrganization() + this.getAllSelectData() + }, + created() { + this.getUserData() + }, + mounted() { + window.addEventListener('resize', this.getHeight) + this.getHeight() + + this.getPrentOrganization() + this.getAllSelectData() + }, + methods: { + // 缁勭粐鏋舵瀯澶у垪琛ㄦ煡璇� + async getUserData() { + const res = await UserData(this.form) + this.tableData = res.data + this.total = res.count + }, + // 缁勭粐鏋舵瀯绾ц仈閫夋嫨鍣� + async getPrentOrganization() { + const { data: res } = await PrentOrganization() + this.Options = res + this.cascaderOptions = arrayToTree(res, { + parentProperty: 'parent_id', + customID: 'torg_code', + childrenProperty: 'children' + }) + this.$nextTick(() => { + this.treeLeft = this.cascaderOptions + this.$forceUpdate() + }) + }, + // 宀椾綅 瑙掕壊 鐝粍 + async getAllSelectData() { + const { data: res1 } = await PostPermissions() + this.postArr = res1 + + const { data: res2 } = await RolePermissions() + this.roleArr = res2 + + const { data: res3 } = await GroupsPermissions() + this.groupArr = res3 + }, + + // 鎺掑簭鏀瑰彉鏃� + sortChange({ column, prop, order }) { + if (order === 'descending') { + order = 'desc' + } else if (order === 'ascending') { + order = 'asc' + } else { + order = 'desc' + } + this.form.order = order + this.form.prop = prop + this.getUserData() + }, + nodeClick(obj, Node, VueComponent) { + this.form.storgcode = obj.torg_code + this.getUserData() + }, + // 閲嶇疆 + reset() { + this.form.usercode = '' + this.form.username = '' + this.form.storgcode = '' + this.$refs.treeLeftRef.setCurrentKey(null) + this.getUserData() + }, + // 鏂板鎸夐挳 + add(operation) { + this.operation = operation + this.dialogVisible = true + this.dialogForm.OperType = 'Add' + }, + // 淇敼鎸夐挳 + async edit(operation, row) { + this.operation = operation + this.dialogVisible = true + this.dialogForm.OperType = 'Update' + + // this.cascaderOptions = this.filterChildren(this.cascaderOptions, row.storg_code) + this.$nextTick(() => { + this.dialogForm.usercode = row.usercode + this.dialogForm.username = row.username + this.dialogForm.password = row.password + this.dialogForm.mobile = row.mobile + this.dialogForm.email = row.email + this.dialogForm.status = row.status + this.dialogForm.payrate = row.payrate + this.dialogForm.storg_code = this.findParent([], row.storg_code, this.cascaderOptions).reverse() + + this.dialogForm.post_code = row.post_code ? row.post_code.split(',') : [] + this.dialogForm.role_code = row.role_code ? row.role_code.split(',') : [] + this.dialogForm.group_code = row.group_code ? row.group_code.split(',') : [] + }) + }, + filterChildren(treeData, code) { + treeData.forEach(item => { + if (code.split(',').includes(item.torg_code)) { + item.disabled = true + if (item.children && item.children.length > 0) { + this.filterChildren(item.children, item.children.map(it => it.torg_code).join(',')) + } + } else { + if (item.children && item.children.length > 0) { + this.filterChildren(item.children, code) + } + } + }) + return treeData + }, + // parents:鐢ㄤ簬杩斿洖鐨勬暟缁勶紝childNode:瑕佹煡璇㈢殑鑺傜偣锛宼reeData锛歫son鏍戝舰鏁版嵁 + findParent(parents, childNode, treeData) { + // console.log(parents, childNode, treeData, 2) + + for (let i = 0; i < treeData.length; i++) { + // 鐖惰妭鐐规煡璇㈡潯浠� + if (treeData[i].torg_code === childNode) { + // 濡傛灉鎵惧埌缁撴灉,淇濆瓨褰撳墠鑺傜偣 + parents.push(treeData[i].torg_code) + // 鐢ㄥ綋鍓嶈妭鐐瑰啀鍘诲師鏁版嵁鏌ユ壘褰撳墠鑺傜偣鐨勭埗鑺傜偣 + this.findParent(parents, treeData[i].parent_id, this.cascaderOptions) + break + } else { + if (treeData[i].children instanceof Array) { + // 娌℃壘鍒帮紝閬嶅巻璇ヨ妭鐐圭殑瀛愯妭鐐� + this.findParent(parents, childNode, treeData[i].children) + } + } + } + return parents + }, + // 鍒犻櫎鎸夐挳 + async del(row) { + this.$confirm('鏄惁纭鍒犻櫎?', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + DeleteUserSave({ usercode: row.usercode }).then(res => { + if (res.code === '200') { + this.$notify.success('鍒犻櫎鎴愬姛!') + if (this.form.page > 1 && this.tableData.length === 1) { + this.form.page-- + } + this.getUserData() + } + }) + }).catch(() => { + this.$notify.info('宸插彇娑堝垹闄�') + }) + }, + // 瀵硅瘽妗嗗叧闂簨浠� + handleClose() { + this.dialogForm.usercode = '' + this.dialogForm.username = '' + this.dialogForm.status = 'Y' + + this.dialogForm.post_code = [] + this.dialogForm.role_code = [] + this.dialogForm.group_code = [] + this.dialogForm.password = '123456' + this.dialogForm.mobile = '' + this.dialogForm.email = '' + this.dialogForm.payrate = '' + + // this.dialogForm.storg_code = '' + + this.$refs.cascader.checkedValue = '' + this.$refs.dialogForm.clearValidate() + }, + // 瀵硅瘽妗嗗彇娑� + dialogVisibleCancel() { + this.dialogVisible = false + }, + // 瀵硅瘽妗嗙‘璁� + dialogVisibleConfirm() { + this.$refs.dialogForm.validate(valid => { + if (valid) { + this.$store.state.app.buttonIsDisabled = true + this.dialogForm.group_code = this.dialogForm.group_code.join(',') + this.dialogForm.post_code = this.dialogForm.post_code.join(',') + this.dialogForm.role_code = this.dialogForm.role_code.join(',') + this.dialogForm.storg_code = this.dialogForm.storg_code[this.dialogForm.storg_code.length - 1] + AddUpdateUserSave(this.dialogForm).then(res => { + if (res.code === '200') { + this.$notify.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�') + this.dialogVisible = false + this.$store.state.app.buttonIsDisabled = false + this.getUserData() + } else { + this.$store.state.app.buttonIsDisabled = false + this.$notify.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '淇敼澶辫触锛�') + } + }) + } + }) + }, + // 鑾峰彇椤甸潰楂樺害 + getHeight() { + this.$nextTick(() => { + this.mainHeight = window.innerHeight - 85 + this.tableHeight = this.mainHeight - 280 + this.$refs.tableDataRef.doLayout() + }) + } + } +} +</script> -- Gitblit v1.9.3