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 | 394 +++++++++++++++++++++++++++----------------------------- 1 files changed, 191 insertions(+), 203 deletions(-) diff --git a/src/views/operate/message/myIndex/index.vue b/src/views/operate/message/myIndex/index.vue index 1c0cd18..cda0e44 100644 --- a/src/views/operate/message/myIndex/index.vue +++ b/src/views/operate/message/myIndex/index.vue @@ -3,30 +3,34 @@ <header> <div class="header-nav"> <span class="nav-left">鏁版嵁绛涢��</span> - <span class="nav-right">楂樼骇鎼滅储</span> </div> <div class="header-content"> <div class="search"> <span>杈撳叆鏌ヨ:</span> - <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="context"></el-input> + <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="messageStatus" placeholder="璇烽�夋嫨娑堟伅鍒嗙被"> - <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"> + <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">鏌ヨ</el-button> - <el-button icon="el-icon-delete-solid">閲嶇疆</el-button> + <el-button type="primary" icon="el-icon-search" @click="handleSearch">鏌ヨ</el-button> + <el-button icon="el-icon-delete-solid" @click="handleReset">閲嶇疆</el-button> </div> </div> </header> @@ -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,29 +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>{{scope.row.channelCode === '01' ? '绔欏唴淇�':scope.row.channelCode - ==='02'?"閭欢":'鐭俊'}}</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="dialogView = true">鏌ョ湅</el-link> - <el-link icon="el-icon-edit" class="leftPx" :underline="false">缂栬緫</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> @@ -78,19 +80,15 @@ </el-table-column> </el-table> <!-- 鏂板缓娑堟伅 --> - <el-dialog title="鏂板缓娑堟伅" :visible.sync="dialogCreate" v-if="dialogCreate" width="80%" - :before-close="handleConfirmClose"> - <MyCreate @closeMyDialog="closeDialog"></MyCreate> - </el-dialog> - <!-- 娑堟伅璇︽儏 --> - <el-dialog title="娑堟伅璇︽儏" :visible.sync="dialogView" v-if="dialogView" width="45%" - :before-close="handleClose"> - <MyView></MyView> + <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"> @@ -106,8 +104,7 @@ </div> <div class="pagination"> <el-pagination background :current-page="currentPage" layout="prev, pager, next" - :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage" - > + :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage"> </el-pagination> </div> </div> @@ -116,19 +113,35 @@ </div> </template> <script> -import helper from '@/utils/mydate' import MyView from './myview' -import MyCreate from './createUser' +import MyEdit from './update' +import { deleteMessage, getMessageById, getMessageList } from "@/api/operate/messageManagement"; + export default { - components: { - MyView, MyCreate + components: { MyView, MyEdit }, + computed: { + getDialogTitle() { + if (this.dialogType === 'create') { + return '鍒涘缓'; + } + + if (this.dialogType === 'update') { + return '鏇存柊'; + } + + if (this.dialogType === 'view') { + return '鏌ョ湅'; + } + } }, data() { return { tableData: [], - context: "", - dialogCreate: false, - dialogView: false, + tableRowData: null, + isShowMoreParams: false, + context: null, + isShowDialog: false, + dialogType: false, totalNum: null, pageSize: 10, currentPage: 1, @@ -136,122 +149,126 @@ 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: '鎵归噺鍒犻櫎', } ], tempList: [], - messageStatus: 0, - messageKind: 0, + messageStatus: 2, + messageType: '00', statusList: [ { label: '鍏ㄩ儴', - value: 0, + value: 2, }, { label: '鏈彂甯�', - value: 1, + value: 0, }, { label: '宸插彂甯�', - value: 2, + value: 1, } ], - kindList: [ + typeList: [ { - label: '鍏ㄩ儴', - value: 0, + id: '00', + columnName: '鍏ㄩ儴', }, { - label: '鍏ㄩ儴', - value: 0, + id: '01', + columnName: '绔欏唴淇�', }, { - label: '鍏ㄩ儴', - value: 0, + id: '03', + columnName: '閭欢', }, + { + id: '02', + columnName: '鐭俊', + } ] } }, created() { - this.setTableData(); + this.getMessageList(); }, + methods: { + // 鏌ヨ + handleSearch() { + this.getMessageList(); + }, + + // 閲嶇疆 + handleReset() { + this.messageStatus = 2; + this.messageType = '00'; + this.context = ''; + this.getMessageList(); + }, + + // 鏌ョ湅 + handleOpera(data, type) { + this.tableRowData = data; + this.dialogType = type; + this.isShowDialog = true; + }, + + // 鍒犻櫎淇℃伅 handleDelete(idarr) { this.$confirm('纭鍒犻櫎?') - .then(_ => { - this.$axios({ - method: 'post', - url: 'sccg/message/delete?ids=' + idarr, - }) - .then(res => { - if (res.code === 200) { - this.$message({ - type: 'success', - message: '鍒犻櫎鎴愬姛', - }) - this.setTableData(); - } else { - this.$message({ - type: 'error', - message: res.message - }) - } + .then(() => { + deleteMessage({ ids: idarr.join(',') }) + .then(() => { + this.getMessageList(); + this.$message.success('鎿嶄綔鎴愬姛'); }) + .catch(err => { this.$message({ type: 'error', message: err }) }); }) }, - // 璁剧疆琛ㄦ牸鏁版嵁 - async setTableData() { - const arr = await this.getMessageList(); - this.tableData = arr.records; - this.totalNum = arr.total - }, + // 鑾峰彇娑堟伅鏁版嵁 - async getMessageList() { - let arr = []; - const { currentPage, pageSize } = this; - await this.$axios({ - method: 'post', - url: 'sccg/message/list', - data: { - body: "", - channelCode: "", - createUser: 0, - current: currentPage, - head: "", - messageType: 0, - pageSize: pageSize, - randomCode: "", - remark: "", - sendTime: "", - status: 0, - targetFrom: "", - targetTo: "" - } - }) - .then(res => { - arr = res.data; + getMessageList() { + 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; }) - return arr; + .catch(err => { + this.$message({ type: 'error', message: err }); + }); }, + // 鎵归噺涓嬫媺妗嗘搷浣� async selectChange(list) { - console.log(this.tempList); if (this.tempList.length !== 0) { this.preMyIdx = list; if (list === 3) { @@ -270,6 +287,7 @@ }) } }, + // 鎵归噺鎿嶄綔 mulUpdateStatus(idArr, flag) { this.$confirm(flag === 1 ? "鎮ㄧ‘瀹氳杩涜鎵归噺鍚敤瑙掕壊鍚�?" : '鎮ㄧ‘瀹氳杩涜鎵归噺绂佺敤瑙掕壊鍚�?') @@ -291,82 +309,50 @@ message: res.message }) } - console.log(res); }) }) - .catch(err => { console.log(err) }) + .catch(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 - } - }, - // 淇敼鏃堕棿鏍煎紡 - changeTime({ updateTime }) { - return helper(updateTime); + this.all = list.length === this.tableData.length; }, // 鍏ㄩ�� selectAll() { this.$refs.multipleTable.toggleAllSelection(); }, + // 鍙嶉�� disSame(list) { list.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row) }) }, + // 璁剧疆琛ㄦ牸鏂戦┈绾� tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 == 0) { + if ((rowIndex + 1) % 2 === 0) { return 'warning-row'; } else { return 'success-row'; } - return ''; }, + // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� changeCurrentPage(page) { this.currentPage = page; - this.setTableData(); + this.getMessageList(); }, - // // 涓婁竴椤电偣鍑讳簨浠� - // handlePrev(page) { - // this.currentPage = page; - // this.search(); - // }, - // // 涓嬩竴椤电偣鍑讳簨浠� - // handleNext(page) { - // this.currentPage = page; - // this.search(); - // }, - // 鍏抽棴寮圭獥 - handleClose(done) { - done(); - }, - // 纭鍏抽棴寮圭獥 - handleConfirmClose(done) { - this.$confirm('纭鍏抽棴?') - .then(_ => { - done(); - }) - .catch(err => { - console.log(err); - }) - }, + // 鑷畾涔夊叧闂脊绐� - closeDialog({ flag, index }) { - this.dialogCreate = flag; - this.dialogView = flag; - if (index === 1) { - this.setTableData(); - } + closeDialog() { + this.isShowDialog = false; + this.getMessageList(); } } } @@ -374,33 +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; - border: 1pox solid #fff; + 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; @@ -411,8 +395,8 @@ color: #1d3f57; &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; + //background-color: #09152f; + //border: 1px solid #17324c; } } @@ -434,10 +418,9 @@ } main { - background-color: #09152f; + background-color: white; margin-top: 20px; padding-bottom: 50px; - border: 1pox solid #fff; .el-link { color: #4b9bb7; @@ -462,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; @@ -491,7 +476,7 @@ &::v-deep .el-input__inner { border: none; - background-color: #09152f; + //background-color: #09152f; } &:hover { @@ -511,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 { @@ -546,7 +531,7 @@ .line { padding: 0 5px; } - + color: var(--operation-color); span:hover { cursor: pointer; } @@ -554,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 { @@ -593,7 +578,7 @@ &::v-deep .el-dialog__header, &::v-deep .el-dialog__body { - background-color: #06122c; + //background-color: #06122c; } &::v-deep .el-dialog__header { @@ -605,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