From ebe7bf1b9118958f6a93406305f5728bfd5d90c9 Mon Sep 17 00:00:00 2001 From: 小小儁爺 <1694218219@qq.com> Date: 星期一, 03 三月 2025 10:33:24 +0800 Subject: [PATCH] 1. 综合看板修改编码 --- src/views/basicSettings/postList.vue | 739 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 372 insertions(+), 367 deletions(-) diff --git a/src/views/basicSettings/postList.vue b/src/views/basicSettings/postList.vue index 042d3cc..0098b22 100644 --- a/src/views/basicSettings/postList.vue +++ b/src/views/basicSettings/postList.vue @@ -1,367 +1,372 @@ -<template> - <div> - <div class="body" :style="{height:mainHeight+'px'}"> - <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=1')" - >瀵煎叆 - </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.postcode" placeholder="璇疯緭鍏�" style="width: 200px" /> - </el-form-item> - <el-form-item label="宀椾綅鍚嶇О" style=" display: flex;"> - <el-input v-model="form.postname" 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="getPostData">鏌ヨ</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="tableHeight+'px'" - border - row-class-name="custom-row" - :style="{width: 100+'%',height:tableHeight+'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="postcode" - label="宀椾綅缂栫爜" - sortable="custom" - /> - <el-table-column - prop="postname" - label="宀椾綅鍚嶇О" - sortable="custom" - /> - <el-table-column - prop="status" - label="鐘舵��" - sortable="custom" - > - <template slot-scope="{row}"> - <el-tag v-if="row.status==='Y'" size="small" type="success">姝e父</el-tag> - <el-tag v-if="row.status==='N'" size="small" type="danger">鍋滅敤</el-tag> - </template> - </el-table-column> - <el-table-column - prop="description" - label="鎻忚堪" - sortable="custom" - > - <template slot-scope="{row}"> - {{ row.description ? row.description : '/' }} - </template> - </el-table-column> - <el-table-column - prop="username" - 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.leve!==0" - 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.leve!==0" - 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="getPostData" - /> - </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="postcode"> - <el-input v-model="dialogForm.postcode" :disabled="operation!=='add'" style="width: 200px" /> - </el-form-item> - <el-form-item label="宀椾綅鍚嶇О" prop="postname"> - <el-input v-model="dialogForm.postname" style="width: 200px" /> - </el-form-item> - <el-form-item label="鎻忚堪"> - <el-input - v-model="dialogForm.description" - type="textarea" - style="width: 200px" - /> - </el-form-item> - <el-form-item required label="宀椾綅鐘舵��"> - <el-radio-group v-model="dialogForm.status"> - <el-radio label="Y">姝e父</el-radio> - <el-radio label="N">鍋滅敤</el-radio> - </el-radio-group> - </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 { AddUpdatePost, DeletePost, PostData } from '@/api/basicSettings' -import { validateCode } from '@/utils/global' -import elDragDialog from '@/directive/el-drag-dialog' -import waves from '@/directive/waves' - -export default { - name: 'PersonList', - components: { - Pagination - }, - directives: { elDragDialog, waves }, - data() { - return { - mainHeight: 0, - tableHeight: 0, - form: { - postcode: '', // 缁勭粐鏋舵瀯缂栫爜 - postname: '', // 缁勭粐鏋舵瀯鍚嶇О - prop: 'lm_date', // 鎺掑簭瀛楁 - order: 'desc', // 鎺掑簭瀛楁 - page: 1, // 绗嚑椤� - rows: 20 // 姣忛〉澶氬皯鏉� - }, - total: 10, - tableData: [], - dialogVisible: false, - dialogForm: { - postcode: '', // 缁勭粐缂栫爜 - postname: '', // 缁勭粐鍚嶇О - description: '', // 鎻忚堪 - status: 'Y'// 鐘舵�� - }, - operation: '', - dialogFormRules: { - postcode: [ - { required: true, validator: validateCode, trigger: ['blur', 'change'] } - ], - postname: [ - { required: true, message: '璇疯緭鍏ュ矖浣嶅悕绉�', trigger: ['blur', 'change'] } - ] - } - - } - }, - activated() { window.addEventListener('resize', this.getHeight) this.getHeight() }, created() { - this.getPostData() - }, - mounted() { - window.addEventListener('resize', this.getHeight) - this.getHeight() - }, - methods: { - // 缁勭粐鏋舵瀯澶у垪琛ㄦ煡璇� - async getPostData() { - const res = await PostData(this.form) - this.tableData = res.data - this.total = res.count - }, - - // 鎺掑簭鏀瑰彉鏃� - 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.getPostData() - }, - // 閲嶇疆 - reset() { - this.form.postcode = '' - this.form.postname = '' - this.getPostData() - }, - // 鏂板鎸夐挳 - 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.$nextTick(() => { - this.dialogForm.postcode = row.postcode - this.dialogForm.postname = row.postname - this.dialogForm.description = row.description - this.dialogForm.status = row.status - }) - }, - // 鍒犻櫎鎸夐挳 - async del(row) { - this.$confirm('鏄惁纭鍒犻櫎?', '鎻愮ず', { - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - type: 'warning' - }).then(() => { - DeletePost({ postcode: row.postcode }).then(res => { - if (res.code === '200') { - this.$notify.success('鍒犻櫎鎴愬姛!') - if (this.form.page > 1 && this.tableData.length === 1) { - this.form.page-- - } - this.getPostData() - } - }) - }).catch(() => { - this.$notify.info('宸插彇娑堝垹闄�') - }) - }, - // 瀵硅瘽妗嗗叧闂簨浠� - handleClose() { - this.dialogForm.postcode = '' - this.dialogForm.postname = '' - this.dialogForm.status = 'Y' - this.dialogForm.description = '' - this.$refs.dialogForm.clearValidate() - }, - // 瀵硅瘽妗嗗彇娑� - dialogVisibleCancel() { - this.dialogVisible = false - }, - // 瀵硅瘽妗嗙‘璁� - dialogVisibleConfirm() { - this.$refs.dialogForm.validate(valid => { - if (valid) { - this.$store.state.app.buttonIsDisabled = true - AddUpdatePost(this.dialogForm).then(res => { - if (res.code === '200') { - this.$notify.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�') - this.dialogVisible = false - this.$store.state.app.buttonIsDisabled = false - this.getPostData() - } 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 - 200 - this.$refs.tableDataRef.doLayout() - }) - } - } -} -</script> +<template> + <div> + <div class="body" :style="{height:mainHeight+'px'}"> + <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=1')" + >瀵煎叆 + </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.postcode" placeholder="璇疯緭鍏�" style="width: 200px" /> + </el-form-item> + <el-form-item label="宀椾綅鍚嶇О" style=" display: flex;"> + <el-input v-model="form.postname" 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="getPostData">鏌ヨ</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="tableHeight+'px'" + border + row-class-name="custom-row" + :style="{width: 100+'%',height:tableHeight+'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="postcode" + label="宀椾綅缂栫爜" + sortable="custom" + /> + <el-table-column + prop="postname" + label="宀椾綅鍚嶇О" + sortable="custom" + /> + <el-table-column + prop="status" + label="鐘舵��" + sortable="custom" + > + <template slot-scope="{row}"> + <el-tag v-if="row.status==='Y'" size="small" type="success">姝e父</el-tag> + <el-tag v-if="row.status==='N'" size="small" type="danger">鍋滅敤</el-tag> + </template> + </el-table-column> + <el-table-column + prop="description" + label="鎻忚堪" + sortable="custom" + > + <template slot-scope="{row}"> + {{ row.description ? row.description : '/' }} + </template> + </el-table-column> + <el-table-column + prop="username" + 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.leve!==0" + 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.leve!==0" + 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="getPostData" + /> + </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="postcode"> + <el-input v-model="dialogForm.postcode" :disabled="operation!=='add'" style="width: 200px" /> + </el-form-item> + <el-form-item label="宀椾綅鍚嶇О" prop="postname"> + <el-input v-model="dialogForm.postname" style="width: 200px" /> + </el-form-item> + <el-form-item label="鎻忚堪"> + <el-input + v-model="dialogForm.description" + type="textarea" + style="width: 200px" + /> + </el-form-item> + <el-form-item required label="宀椾綅鐘舵��"> + <el-radio-group v-model="dialogForm.status"> + <el-radio label="Y">姝e父</el-radio> + <el-radio label="N">鍋滅敤</el-radio> + </el-radio-group> + </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 { AddUpdatePost, DeletePost, PostData } from '@/api/basicSettings' +import { validateCode } from '@/utils/global' +import elDragDialog from '@/directive/el-drag-dialog' +import waves from '@/directive/waves' + +export default { + name: 'PersonList', + components: { + Pagination + }, + directives: { elDragDialog, waves }, + data() { + return { + mainHeight: 0, + tableHeight: 0, + form: { + postcode: '', // 缁勭粐鏋舵瀯缂栫爜 + postname: '', // 缁勭粐鏋舵瀯鍚嶇О + prop: 'lm_date', // 鎺掑簭瀛楁 + order: 'desc', // 鎺掑簭瀛楁 + page: 1, // 绗嚑椤� + rows: 20 // 姣忛〉澶氬皯鏉� + }, + total: 10, + tableData: [], + dialogVisible: false, + dialogForm: { + postcode: '', // 缁勭粐缂栫爜 + postname: '', // 缁勭粐鍚嶇О + description: '', // 鎻忚堪 + status: 'Y'// 鐘舵�� + }, + operation: '', + dialogFormRules: { + postcode: [ + { required: true, validator: validateCode, trigger: ['blur', 'change'] } + ], + postname: [ + { required: true, message: '璇疯緭鍏ュ矖浣嶅悕绉�', trigger: ['blur', 'change'] } + ] + } + + } + }, + activated() { + window.addEventListener('resize', this.getHeight) + this.getHeight() + this.getPostData() + }, + created() { + this.getPostData() + }, + mounted() { + window.addEventListener('resize', this.getHeight) + this.getHeight() + }, + methods: { + // 缁勭粐鏋舵瀯澶у垪琛ㄦ煡璇� + async getPostData() { + const res = await PostData(this.form) + this.tableData = res.data + this.total = res.count + }, + + // 鎺掑簭鏀瑰彉鏃� + 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.getPostData() + }, + // 閲嶇疆 + reset() { + this.form.postcode = '' + this.form.postname = '' + this.getPostData() + }, + // 鏂板鎸夐挳 + 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.$nextTick(() => { + this.dialogForm.postcode = row.postcode + this.dialogForm.postname = row.postname + this.dialogForm.description = row.description + this.dialogForm.status = row.status + }) + }, + // 鍒犻櫎鎸夐挳 + async del(row) { + this.$confirm('鏄惁纭鍒犻櫎?', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + DeletePost({ postcode: row.postcode }).then(res => { + if (res.code === '200') { + this.$notify.success('鍒犻櫎鎴愬姛!') + if (this.form.page > 1 && this.tableData.length === 1) { + this.form.page-- + } + this.getPostData() + } + }) + }).catch(() => { + this.$notify.info('宸插彇娑堝垹闄�') + }) + }, + // 瀵硅瘽妗嗗叧闂簨浠� + handleClose() { + this.dialogForm.postcode = '' + this.dialogForm.postname = '' + this.dialogForm.status = 'Y' + this.dialogForm.description = '' + this.$refs.dialogForm.clearValidate() + }, + // 瀵硅瘽妗嗗彇娑� + dialogVisibleCancel() { + this.dialogVisible = false + }, + // 瀵硅瘽妗嗙‘璁� + dialogVisibleConfirm() { + this.$refs.dialogForm.validate(valid => { + if (valid) { + this.$store.state.app.buttonIsDisabled = true + AddUpdatePost(this.dialogForm).then(res => { + if (res.code === '200') { + this.$notify.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�') + this.dialogVisible = false + this.$store.state.app.buttonIsDisabled = false + this.getPostData() + } 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 - 200 + this.$refs.tableDataRef.doLayout() + }) + } + } +} +</script> -- Gitblit v1.9.3