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