From a3b4eb017a0f948348ef7732267c7ed0d4bca8c0 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期二, 12 三月 2024 16:15:27 +0800 Subject: [PATCH] bug修改 --- src/views/operate/message/myIndex/index.vue | 328 ++++++++++++++++++++++++------------------------------ 1 files changed, 148 insertions(+), 180 deletions(-) diff --git a/src/views/operate/message/myIndex/index.vue b/src/views/operate/message/myIndex/index.vue index 0bfa339..cda0e44 100644 --- a/src/views/operate/message/myIndex/index.vue +++ b/src/views/operate/message/myIndex/index.vue @@ -3,26 +3,30 @@ <header> <div class="header-nav"> <span class="nav-left">鏁版嵁绛涢��</span> - <span class="nav-right" @click="showMoreParamsDialog">楂樼骇鎼滅储</span> </div> <div class="header-content"> <div class="search"> <span>杈撳叆鏌ヨ:</span> <el-input placeholder="娑堟伅鏍囬" v-model="context"></el-input> </div> - <div class="message-status"> + <div class="search"> <span>娑堟伅鐘舵��:</span> <el-select v-model="messageStatus" placeholder="璇烽�夋嫨娑堟伅鐘舵��"> <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> - <div class="message-kind"> + <div class="search"> <span>娑堟伅鍒嗙被:</span> <el-select v-model="messageType" placeholder="璇烽�夋嫨娑堟伅鍒嗙被"> <el-option v-for="item in typeList" :key="item.id" :label="item.columnName" :value="item.id"> </el-option> </el-select> + </div> + <div class="search"> + <span>鍒涘缓鏃堕棿:</span> + <el-date-picker style="width: 200px" type="datetimerange" v-model="datetime" + value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> </div> <div class="find"> <el-button type="primary" icon="el-icon-search" @click="handleSearch">鏌ヨ</el-button> @@ -34,13 +38,16 @@ <div class="mainContent"> <div class="main-nav"> <span>鏁版嵁鍒楄〃</span> - <el-button type="primary" icon="el-icon-plus" @click="dialogCreate = true">娣诲姞</el-button> + <el-button class="button-addition" type="primary" icon="el-icon-plus" + @click="handleOpera(null, 'create')">娣诲姞</el-button> </div> <!-- 鏁版嵁灞曠ず --> - <el-table ref="multipleTable" - :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" - :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" - @selection-change="tableChange"> + <el-table + border + stripe + ref="multipleTable" + :header-cell-style="{ 'background':'#F5F5F5', '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 label="ID" min-width="5"> @@ -48,28 +55,24 @@ </el-table-column> <el-table-column prop="head" label="鏍囬" min-width="10"> </el-table-column> - <el-table-column prop="updateTime" label="淇敼鏃堕棿" min-width="10"> - <template slot-scope="scope"> - <span>{{changeTime(scope.row)}}</span> - </template> + <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> </el-table-column> <el-table-column prop="targetFrom" label="鍙戝竷浜哄憳" min-width="15"> </el-table-column> - <el-table-column prop="channelCode" label="娑堟伅鍒嗙被" min-width="10"> - <template slot-scope="scope"> - <span>{{ getMessageType(scope.row.channelCode) }}</span> - </template> + <el-table-column prop="messageTypeName" label="娑堟伅鏍忕洰" min-width="10"> </el-table-column> <el-table-column prop="status" label="鍙戝竷鐘舵��" min-width="5"> <template slot-scope="scope"> - {{scope.row.status === 0 ? '鏈彂甯�' :'宸插彂甯�'}} + {{ scope.row.status == 0 ? '鏈彂甯�' : '宸插彂甯�' }} </template> </el-table-column> <el-table-column prop="operation" label="鎿嶄綔" min-width="15"> <template slot-scope="scope"> <div class="operation"> - <el-link icon="el-icon-view" :underline="false" @click="handleView(scope.row)">鏌ョ湅</el-link> - <el-link icon="el-icon-edit" class="leftPx" :underline="false" @click="handleEdit(scope.row)">缂栬緫</el-link> + <el-link icon="el-icon-view" :underline="false" + @click="handleOpera(scope.row, 'view')">鏌ョ湅</el-link> + <el-link icon="el-icon-edit" class="leftPx" :underline="false" + @click="handleOpera(scope.row, 'update')">缂栬緫</el-link> <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false" @click="handleDelete([scope.row.id])">鍒犻櫎</el-link> </div> @@ -77,24 +80,15 @@ </el-table-column> </el-table> <!-- 鏂板缓娑堟伅 --> - <el-dialog title="鏂板缓娑堟伅" :visible.sync="dialogCreate" width="80%" - :before-close="handleConfirmClose"> - <MyEdit @closeMyDialog="closeDialog" :type="'create'" :myDataRow="null"></MyEdit> - </el-dialog> - <!-- 娑堟伅璇︽儏 --> - <el-dialog title="娑堟伅璇︽儏" :visible.sync="dialogView" v-if="dialogView" width="45%" - :before-close="handleClose"> - <MyView @closeDialog="closeDialog" :myDataRow="tableRowData">></MyView> - </el-dialog> - <!-- 缂栬緫椤甸潰 --> - <el-dialog title="缂栬緫娑堟伅" :visible.sync="dialogEdit" width="80%" - :before-close="handleClose"> - <MyEdit @closeDialog="closeDialog" :myDataRow="tableRowData" :type="'update'"></MyEdit> + <el-dialog :destroy-on-close="true" :key="dialogType" :title="getDialogTitle" + :visible.sync="isShowDialog" width="80%"> + <my-edit v-if="isShowDialog" @closeMyDialog="closeDialog" :type="dialogType" + :myDataRow="tableRowData"></my-edit> </el-dialog> <!-- tools --> <div class="tools"> <div class="funs"> - <div class="funsItem funs-sp"> + <div class="funsItem funs-sp funs-first"> <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox> </div> <div class="funsItem funs-sp"> @@ -115,34 +109,39 @@ </div> </div> </div> - - <el-dialog - title="楂樼骇鍙傛暟" - :visible.sync="isShowMoreParams" - width="30%" - :before-close="handleClose"> - </el-dialog> </main> </div> </template> <script> -import helper from '@/utils/mydate' import MyView from './myview' import MyEdit from './update' import { deleteMessage, getMessageById, getMessageList } from "@/api/operate/messageManagement"; -import {SUCCESS_CODE} from "@/utils"; export default { components: { MyView, MyEdit }, + computed: { + getDialogTitle() { + if (this.dialogType === 'create') { + return '鍒涘缓'; + } + + if (this.dialogType === 'update') { + return '鏇存柊'; + } + + if (this.dialogType === 'view') { + return '鏌ョ湅'; + } + } + }, data() { return { tableData: [], tableRowData: null, isShowMoreParams: false, - context: '', - dialogEdit: false, - dialogCreate: false, - dialogView: false, + context: null, + isShowDialog: false, + dialogType: false, totalNum: null, pageSize: 10, currentPage: 1, @@ -150,20 +149,21 @@ unsame: false, myIdx: 0, preMyIdx: 0, + datetime: null, options: [ { value: 0, label: '鎵归噺鎿嶄綔', disabled: true, }, - { - value: 1, - label: '鎵归噺鍚敤', - }, - { - value: 2, - label: '鎵归噺绂佺敤', - }, + // { + // value: 1, + // label: '鎵归噺鍚敤', + // }, + // { + // value: 2, + // label: '鎵归噺绂佺敤', + // }, { value: 3, label: '鎵归噺鍒犻櫎', @@ -188,86 +188,83 @@ ], typeList: [ { - id:'00', - columnName:'鍏ㄩ儴', + id: '00', + columnName: '鍏ㄩ儴', }, { - id:'01', - columnName:'绔欏唴淇�', + id: '01', + columnName: '绔欏唴淇�', }, { - id:'02', - columnName:'閭欢', + id: '03', + columnName: '閭欢', }, { - id:'03', - columnName:'鐭俊', + id: '02', + columnName: '鐭俊', } ] } }, created() { - this.getMessageList(); + this.getMessageList(); }, methods: { // 鏌ヨ - handleSearch(){ + handleSearch() { this.getMessageList(); }, // 閲嶇疆 - handleReset(){ - this.messageStatus = 2; - this.messageType = '00'; - this.context = ''; + handleReset() { + this.messageStatus = 2; + this.messageType = '00'; + this.context = ''; + this.getMessageList(); }, // 鏌ョ湅 - handleView(data){ + handleOpera(data, type) { this.tableRowData = data; - this.dialogView = true; - }, - - // 缂栬緫 - handleEdit(data){ - this.tableRowData = data; - this.dialogEdit = true; + this.dialogType = type; + this.isShowDialog = true; }, // 鍒犻櫎淇℃伅 handleDelete(idarr) { this.$confirm('纭鍒犻櫎?') .then(() => { - deleteMessage(idarr) - .then(({ code, message }) => { - if (code === SUCCESS_CODE) { - this.getMessageList(); - this.$message({ type: 'success', message }); - } else { - this.$message({ type: 'error', message }); - } - }) - .catch(err => { this.$message({ type: 'error', message: err }) }); + deleteMessage({ ids: idarr.join(',') }) + .then(() => { + this.getMessageList(); + this.$message.success('鎿嶄綔鎴愬姛'); + }) + .catch(err => { this.$message({ type: 'error', message: err }) }); }) }, // 鑾峰彇娑堟伅鏁版嵁 getMessageList() { - const messageParam = { - current: this.currentPage, - size: this.pageSize, - channelCode: this.messageType, - status: this.messageStatus, - head: this.context - } - getMessageList(messageParam) - .then(({ data }) => { - this.tableData = []; - }) - .catch(err => { - this.$message({ type: 'error', message: err }); - }); + const messageParam = { + current: this.currentPage, + pageSize: this.pageSize, + channelCode: this.messageType === '00' ? null : this.messageType, + status: this.messageStatus === 2 ? null : this.messageStatus, + head: this.context, + startTime: this.datetime ? this.datetime[0] : null, + endTime: this.datetime ? this.datetime[1] : null + } + + getMessageList(messageParam) + .then(({ records, total, size }) => { + this.tableData = records; + this.totalNum = total; + this.pageSize = size; + }) + .catch(err => { + this.$message({ type: 'error', message: err }); + }); }, // 鎵归噺涓嬫媺妗嗘搷浣� @@ -314,7 +311,7 @@ } }) }) - .catch(err => { }) + .catch(err => { }) }, // 琛ㄦ牸鐩戝惉 @@ -325,12 +322,6 @@ }) this.all = list.length === this.tableData.length; }, - - // 淇敼鏃堕棿鏍煎紡 - changeTime({ updateTime }) { - return helper(updateTime); - }, - // 鍏ㄩ�� selectAll() { this.$refs.multipleTable.toggleAllSelection(); @@ -358,37 +349,10 @@ this.getMessageList(); }, - showMoreParamsDialog() { - this.isShowMoreParams = true; - }, - - // 鍏抽棴寮圭獥 - handleClose(done) { - done(); - }, - - // 纭鍏抽棴寮圭獥 - handleConfirmClose(done) { - this.$confirm('纭鍏抽棴?') - .then(_ => { - done(); - }) - .catch(err => { - }) - }, - // 鑷畾涔夊叧闂脊绐� - closeDialog({ flag, index }) { - this.dialogCreate = flag; - this.dialogView = flag; - if (index === 1) { - this.getMessageList(); - } - }, - - getMessageType(id) { - const result = this.typeList.find(item => item.id === id); - return result.columnName; + closeDialog() { + this.isShowDialog = false; + this.getMessageList(); } } } @@ -396,32 +360,31 @@ <style lang="scss" scoped> .userList { text-align: left; - margin: 10px 20px; - color: #4b9bb7; - + padding: 10px 20px; + color: #606266; + border: 1px solid #ccc; header { - background-color: #09152f; + background-color: white; .header-nav { line-height: 40px; - padding: 0 30px; + //padding: 0 30px; display: flex; justify-content: space-between; font-weight: 650; } .header-content { - padding: 0 40px; + padding: 0; display: flex; line-height: 100px; justify-content: space-between; align-items: center; - - .search, - .message-status, - .message-kind { + flex-wrap: wrap; + .search { display: flex; - justify-content: flex-start; + justify-content: space-between; + align-items: center; span { flex: 1; @@ -432,8 +395,8 @@ color: #1d3f57; &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; + //background-color: #09152f; + //border: 1px solid #17324c; } } @@ -455,7 +418,7 @@ } main { - background-color: #09152f; + background-color: white; margin-top: 20px; padding-bottom: 50px; @@ -482,20 +445,22 @@ display: flex; justify-content: space-between; align-items: center; - padding: 0 20px; + //padding: 0 20px; .funs { display: flex; - + .funs-first{ + margin-left: 0!important; + } .funs-sp { - border: 1px solid #17324c; + //border: 1px solid #DCDFE6; } .funsItem { line-height: 28px; display: flex; align-items: center; - + border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; margin-left: 10px; @@ -511,7 +476,7 @@ &::v-deep .el-input__inner { border: none; - background-color: #09152f; + //background-color: #09152f; } &:hover { @@ -531,29 +496,29 @@ 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-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; + // color: #606266; + // font-size: 10px; &::v-deep .el-table__empty-block { - background-color: #09152f; + //background-color: #09152f; } &::v-deep .el-table__empty-block { @@ -566,7 +531,7 @@ .line { padding: 0 5px; } - + color: var(--operation-color); span:hover { cursor: pointer; } @@ -574,11 +539,11 @@ } .el-table::v-deep .warning-row { - background: #06122c; + //background: #06122c; } .el-table::v-deep .success-row { - background: #071f39; + //background: #071f39; } &::v-deep .switchStyle .el-switch__label { @@ -613,7 +578,7 @@ &::v-deep .el-dialog__header, &::v-deep .el-dialog__body { - background-color: #06122c; + //background-color: #06122c; } &::v-deep .el-dialog__header { @@ -625,17 +590,20 @@ } &::v-deep .el-dialog__title { - color: #4b9bb7; + color: #606266; } &::v-deep .el-dialog__close { width: 20px; height: 20px; - // color: #fff; } &::v-deep .el-dialog__body { padding: 0; } + + :deep(.el-range-input) { + //background-color: #09152f; + } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0