From 3286dd82b83adf92cc576300e9e73a4dfb2aa880 Mon Sep 17 00:00:00 2001 From: luobisheng <727299681@qq.com> Date: 星期四, 10 十一月 2022 11:12:03 +0800 Subject: [PATCH] 店铺管理 --- src/views/operate/message/myIndex/index.vue | 277 ++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 182 insertions(+), 95 deletions(-) diff --git a/src/views/operate/message/myIndex/index.vue b/src/views/operate/message/myIndex/index.vue index e939aee..2cbc3ed 100644 --- a/src/views/operate/message/myIndex/index.vue +++ b/src/views/operate/message/myIndex/index.vue @@ -3,24 +3,30 @@ <header> <div class="header-nav"> <span class="nav-left">鏁版嵁绛涢��</span> - <span class="nav-right">楂樼骇鎼滅储</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> + <el-input placeholder="娑堟伅鏍囬" v-model="context"></el-input> </div> <div class="message-status"> <span>娑堟伅鐘舵��:</span> - <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="context"></el-input> + <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"> <span>娑堟伅鍒嗙被:</span> - <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="context"></el-input> + <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="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> @@ -47,27 +53,25 @@ <span>{{changeTime(scope.row)}}</span> </template> </el-table-column> - <el-table-column prop="targetFrom" label="鍙戝竷浜哄憳" min-width="10"> + <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> + <span>{{ getMessageType(scope.row.channelCode) }}</span> </template> </el-table-column> <el-table-column prop="status" label="鍙戝竷鐘舵��" min-width="5"> <template slot-scope="scope"> {{scope.row.status === 0 ? '鏈彂甯�' :'宸插彂甯�'}} - <!-- <el-switch class="switchStyle" v-model="scope.row.status" active-text="寮�" inactive-text="鍏�" - active-color="#3fef9a" inactive-color="#000212" @change="handleChangeStatus(scope.row)"> - </el-switch> --> </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 class="leftPx" icon="el-icon-delete-solid" :underline="false">鍒犻櫎</el-link> + <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 class="leftPx" icon="el-icon-delete-solid" :underline="false" + @click="handleDelete([scope.row.id])">鍒犻櫎</el-link> </div> </template> </el-table-column> @@ -75,20 +79,25 @@ <!-- 鏂板缓娑堟伅 --> <el-dialog title="鏂板缓娑堟伅" :visible.sync="dialogCreate" v-if="dialogCreate" width="80%" :before-close="handleConfirmClose"> - <MyCreate></MyCreate> + <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></MyView> + <MyView @closeDialog="closeDialog" :myDataRow="tableRowData">></MyView> + </el-dialog> + <!-- 缂栬緫椤甸潰 --> + <el-dialog title="缂栬緫娑堟伅" :visible.sync="dialogEdit" v-if="dialogEdit" width="80%" + :before-close="handleClose"> + <MyEdit @closeDialog="closeDialog" :myDataRow="tableRowData" :type="'update'"></MyEdit> </el-dialog> <!-- tools --> <div class="tools"> <div class="funs"> - <div class="funsItem"> + <div class="funsItem funs-sp"> <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox> </div> - <div class="funsItem"> + <div class="funsItem funs-sp"> <el-checkbox v-model="unsame" @change="disSame(tableData)">鍙嶉��</el-checkbox> </div> <div class="funsItem"> @@ -101,29 +110,39 @@ </div> <div class="pagination"> <el-pagination background :current-page="currentPage" layout="prev, pager, next" - :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage" - @prev-click="handlePrev" @next-click="handleNext"> + :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage"> </el-pagination> </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 MyCreate from './createUser' +import MyEdit from './update' +import { deleteMessage, getMessageById, getMessageList } from "@/api/operate/messageManagement"; +import {SUCCESS_CODE} from "@/utils"; + export default { - components: { - MyView,MyCreate - }, + components: { MyView, MyEdit }, data() { return { tableData: [], - context: "", - dialogCreate:false, - dialogView:false, + tableRowData: null, + isShowMoreParams: false, + context: '', + dialogEdit: false, + dialogCreate: false, + dialogView: false, totalNum: null, pageSize: 10, currentPage: 1, @@ -150,50 +169,109 @@ label: '鎵归噺鍒犻櫎', } ], - tempList: [] + tempList: [], + messageStatus: 2, + messageType: '00', + statusList: [ + { + label: '鍏ㄩ儴', + value: 2, + }, + { + label: '鏈彂甯�', + value: 0, + }, + { + label: '宸插彂甯�', + value: 1, + } + ], + typeList: [ + { + id:'00', + columnName:'鍏ㄩ儴', + }, + { + id:'01', + columnName:'绔欏唴淇�', + }, + { + id:'02', + columnName:'閭欢', + }, + { + id:'03', + columnName:'鐭俊', + } + ] } }, created() { - this.setTableData(); + this.getMessageList(); }, + methods: { - // 璁剧疆琛ㄦ牸鏁版嵁 - async setTableData() { - const arr = await this.getMessageList(); - this.tableData = arr.records; - this.totalNum = arr.total + // 鏌ヨ + handleSearch(){ + this.getMessageList(); }, - // 鑾峰彇娑堟伅鏁版嵁 - 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; + + // 閲嶇疆 + handleReset(){ + this.messageStatus = 2; + this.messageType = '00'; + this.context = ''; + }, + + // 鏌ョ湅 + handleView(data){ + this.tableRowData = data; + this.dialogView = true; + }, + + // 缂栬緫 + handleEdit(data){ + this.tableRowData = data; + this.dialogEdit = 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 }) }); }) - return arr; }, + + // 鑾峰彇娑堟伅鏁版嵁 + 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 }); + }); + }, + // 鎵归噺涓嬫媺妗嗘搷浣� async selectChange(list) { - console.log(this.tempList); if (this.tempList.length !== 0) { this.preMyIdx = list; if (list === 3) { @@ -212,6 +290,7 @@ }) } }, + // 鎵归噺鎿嶄綔 mulUpdateStatus(idArr, flag) { this.$confirm(flag === 1 ? "鎮ㄧ‘瀹氳杩涜鎵归噺鍚敤瑙掕壊鍚�?" : '鎮ㄧ‘瀹氳杩涜鎵归噺绂佺敤瑙掕壊鍚�?') @@ -233,81 +312,84 @@ message: res.message }) } - console.log(res); }) }) .catch(err => { console.log(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 - } + this.all = list.length === this.tableData.length; }, + // 淇敼鏃堕棿鏍煎紡 changeTime({ updateTime }) { return helper(updateTime); }, + // 鍏ㄩ�� 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.search(); + this.getMessageList(); }, - // 涓婁竴椤电偣鍑讳簨浠� - handlePrev(page) { - this.currentPage = page; - this.search(); + + showMoreParamsDialog() { + this.isShowMoreParams = true; }, - // 涓嬩竴椤电偣鍑讳簨浠� - handleNext(page) { - this.currentPage = page; - this.search(); - }, + // 鍏抽棴寮圭獥 - handleClose(done){ + handleClose(done) { done(); }, + // 纭鍏抽棴寮圭獥 - handleConfirmClose(done){ + handleConfirmClose(done) { this.$confirm('纭鍏抽棴?') - .then(_=>{ - done(); - }) - .catch(err=>{ - console.log(err); - }) + .then(_ => { + done(); + }) + .catch(err => { + console.log(err); + }) }, + // 鑷畾涔夊叧闂脊绐� - closeDialog({flag,index}){ + closeDialog({ flag, index }) { + this.dialogCreate = flag; this.dialogView = flag; - if(index ===1 ){ - this.setTableData(); + if (index === 1) { + this.getMessageList(); } + }, + + getMessageType(id) { + const result = this.typeList.find(item => item.id === id); + return result.columnName; } } } @@ -320,7 +402,6 @@ header { background-color: #09152f; - border: 1pox solid #fff; .header-nav { line-height: 40px; @@ -378,13 +459,15 @@ background-color: #09152f; margin-top: 20px; padding-bottom: 50px; - border: 1pox solid #fff; - .el-link{ + + .el-link { color: #4b9bb7; } - .leftPx{ + + .leftPx { margin-left: 10px; } + .mainTitle { line-height: 60px; } @@ -405,11 +488,15 @@ .funs { display: flex; + .funs-sp { + border: 1px solid #17324c; + } + .funsItem { line-height: 28px; display: flex; align-items: center; - border: 1px solid #17324c; + border-radius: 4px; font-size: 12px; margin-left: 10px; -- Gitblit v1.8.0