From 085fa2fb257e9f11f8f6d34bf12e2dc281c36b4d Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期四, 09 二月 2023 11:28:21 +0800 Subject: [PATCH] 2023/2/9 肖辉 修改部门管理 --- src/views/operate/sms/smsIndex/index.vue | 598 +++++++++++++++++++++++++++++++++++------------------------ 1 files changed, 358 insertions(+), 240 deletions(-) diff --git a/src/views/operate/sms/smsIndex/index.vue b/src/views/operate/sms/smsIndex/index.vue index c723854..c7ea05c 100644 --- a/src/views/operate/sms/smsIndex/index.vue +++ b/src/views/operate/sms/smsIndex/index.vue @@ -12,24 +12,15 @@ <div class="message-status"> <span>鐭俊鍥炴墽:</span> <el-select v-model="messageStatus" placeholder="璇烽�夋嫨"> - <el-option - v-for="item in statusList" - :key="item.value" - :label="item.label" - :value="item.label" - > + <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.label"> </el-option> </el-select> </div> <div class="find"> - <el-button type="primary" icon="el-icon-search" @click="getTableData" - >鏌ヨ - </el-button - > - <el-button icon="el-icon-delete-solid" @click="handleReset" - >閲嶇疆 - </el-button - > + <el-button type="primary" icon="el-icon-search" @click="getTableData">鏌ヨ + </el-button> + <el-button icon="el-icon-delete-solid" @click="handleReset">閲嶇疆 + </el-button> </div> </div> </header> @@ -37,30 +28,21 @@ <div class="mainContent"> <div class="main-nav"> <span>鏁版嵁鍒楄〃</span> - <el-button - class="button-addition" - type="primary" - icon="el-icon-plus" - @click="isShowDialog = true" - >娣诲姞 - </el-button - > + <el-button class="button-addition" type="primary" icon="el-icon-plus" @click="isShowDialog = true">娣诲姞 + </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" - > + border + stripe + ref="multipleTable" :header-cell-style="{ + // background: '#06122c', + 'background':'#F5F5F5', + 'font-size': '12px', + color: '#606266', + '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" prop="id"> <template slot-scope="scope">{{ scope.row.id }}</template> @@ -71,86 +53,125 @@ </el-table-column> <el-table-column prop="targetFrom" label="鍙戦�佽处鍙�" min-width="15"> </el-table-column> - <el-table-column prop="status" label="鍙戝竷鐘舵��" min-width="5"> - <template slot-scope="scope"> - <span>{{ - statusList.find((item) => item.value === scope.row.status).label - }}</span> - </template> + <el-table-column prop="respondResult" label="鐭俊鍥炴墽" min-width="5"> </el-table-column> <el-table-column prop="operation" label="鎿嶄綔" min-width="15"> <template slot-scope="scope"> <div class="operation"> - <el-link - class="leftPx" - icon="el-icon-delete-solid" - :underline="false" - @click="handleDelete([scope.row.id])" - >鍒犻櫎 - </el-link - > - <el-link - icon="el-icon-edit" - class="leftPx" - :underline="false" - @click="resend(scope.row)" - >閲嶆柊鍙戦�� - </el-link - > + <el-link class="leftPx" icon="el-icon-view" :underline="false" @click="handleView(scope.row)">鏌ョ湅 + </el-link> + <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false" + @click="handleDelete([scope.row.id])">鍒犻櫎 + </el-link> + <el-link icon="el-icon-edit" class="leftPx" :underline="false" @click="resend(scope.row)">閲嶆柊鍙戦�� + </el-link> </div> </template> </el-table-column> </el-table> <!-- 鏂板缓娑堟伅 --> - <el-dialog - title="鏂板缓娑堟伅" - :destroy-on-close="true" - :key="dialogType" - :visible.sync="isShowDialog" - width="80%" - :before-close="handleConfirmClose" - > + <el-dialog title="鏂板缓娑堟伅" :destroy-on-close="true" :key="dialogType" :visible.sync="isShowDialog" width="80%" + :before-close="handleConfirmClose"> <MyCreate @closeMyDialog="closeDialog" :type="dialogType"></MyCreate> + </el-dialog> + <el-dialog :destroy-on-close="true" :key="dialogType" title="鏌ョ湅娑堟伅" :visible.sync="isViewDialog" width="50%" + :before-close="handleConfirmClose"> + + <div class="mainContent1"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="role" + label-position="right" disabled=false> + <!-- 鎻愰啋鏂瑰紡 + <el-form-item class="optionItem" label="鎻愰啋鏂瑰紡:" prop="channelCode"> + <el-radio-group v-model="role.channelCode"> + <el-radio label="01">绔欏唴淇�</el-radio> + <el-radio label="03">閭欢</el-radio> + </el-radio-group> + <span class="message-tip">(鐭俊鍙敤鏁�: 1000鏉�)</span> + </el-form-item> --> + <!-- 娑堟伅鏍忕洰 --> + <!-- <el-form-item v-if="role.channelCode === '01'" class="optionItem" label="娑堟伅鏍忕洰:" prop="messageType"> + <div class="message-item"> + <div class="message-item__left"> + <el-select v-model="role.messageType" placeholder="璇烽�夋嫨娑堟伅鏍忕洰"> + <el-option v-for="item in colList" :key="item.id" :label="item.columnName" :value="item.id"> + </el-option> + </el-select> + </div> + <span class="message-add" @click="dialogCreate = true"> + 娣诲姞鏍忕洰</span> + </div> + </el-form-item> --> + <!-- 娑堟伅鏍囬 --> + <el-form-item class="optionItems" label="娑堟伅鏍囬:" prop="head"> + <div class="message-item__left"> + <el-input v-model="role.head" placeholder="璇烽�夋嫨娑堟伅鏍囬"></el-input> + </div> + </el-form-item> + <!-- 鎺ユ敹瀵硅薄 --> + <!-- <el-form-item class="optionItem" label="鎺ユ敹瀵硅薄:" prop="targetTo"> + <div class="message-item__left"> + <el-select v-model="role.targetTo" placeholder="璇烽�夋嫨鎺ユ敹瀵硅薄"> + <el-option :value="role.targetTo"> + <el-tree ref="tree" :data="departList" :props="defaultProps" show-checkbox @check="handleCheck" + default-expand-all :default-checked-keys="checkedList" node-key="id"> + </el-tree> + </el-option> + </el-select> + </div> + </el-form-item> --> + <!-- 娑堟伅鍐呭 --> + <el-form-item class="optionItems" label="娑堟伅鍐呭:" prop="body" > + <el-input type="textarea" v-model="role.body" ></el-input> + </el-form-item> + <el-form-item class="optionItems" label="鍙戦�佽处鍙�:" prop="head"> + <div class="message-item__left"> + <el-input v-model="role.targetFrom"></el-input> + </div> + </el-form-item> + <el-form-item class="optionItems" label="鍙戦�佹椂闂�:" prop="head"> + <div class="message-item__left"> + <el-input v-model="role.sendTime"></el-input> + </div> + </el-form-item> + <el-form-item class="optionItems" label="鍙戦�佸彿鐮�:" prop="head"> + <div class="message-item__left"> + <el-input v-model="role.head"></el-input> + </div> + </el-form-item> + <el-form-item class="optionItems" label="鎺ュ彈鎵嬫満鍙�:" prop="head"> + <div class="message-item__left"> + <el-input v-model="role.phoneNumber"></el-input> + </div> + </el-form-item> <el-form-item class="optionItems" label="鍥炴墽鐘舵��:" prop="head"> + <div class="message-item__left"> + <el-input v-model="role.respondResult"></el-input> + </div> + </el-form-item> + </el-form> + </div> + + </el-dialog> <div class="tools"> <div class="funs"> - <div class="funsItem funs-sp"> - <el-checkbox v-model="all" @change="selectAll()" - >鍏ㄩ�� - </el-checkbox - > + <div class="funsItem funs-sp funs-first"> + <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ�� + </el-checkbox> </div> <div class="funsItem funs-sp"> - <el-checkbox v-model="unsame" @change="disSame(tableData)" - >鍙嶉�� - </el-checkbox - > + <el-checkbox v-model="unsame" @change="disSame(tableData)">鍙嶉�� + </el-checkbox> </div> <div class="funsItem"> - <el-select - v-model="myIdx" - placeholder="鎵归噺鎿嶄綔" - @change="selectChange" - > - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value" - > + <el-select v-model="myIdx" placeholder="鎵归噺鎿嶄綔" @change="selectChange"> + <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </div> <div class="pagination"> - <el-pagination - background - :current-page="currentPage" - layout="prev, pager, next" - :total="totalNum" - :page-size="pageSize" - @current-change="changeCurrentPage" - > + <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum" + :page-size="pageSize" @current-change="changeCurrentPage"> </el-pagination> </div> </div> @@ -161,6 +182,8 @@ <script> import helper from "@/utils/mydate"; import MyCreate from "./createSms"; +import MyEditor from "@/components/edit"; + import { getMessageList, deleteMessage, @@ -169,13 +192,15 @@ export default { components: { - MyCreate, + MyCreate,MyEditor }, data() { return { + role: {}, tableData: [], context: null, isShowDialog: false, + isViewDialog: false, totalNum: null, pageSize: 10, currentPage: 1, @@ -189,14 +214,14 @@ label: "鎵归噺鎿嶄綔", disabled: true, }, - { - value: 1, - label: "鎵归噺鍚敤", - }, - { - value: 2, - label: "鎵归噺绂佺敤", - }, + // { + // value: 1, + // label: "鎵归噺鍚敤", + // }, + // { + // value: 2, + // label: "鎵归噺绂佺敤", + // }, { value: 3, label: "鎵归噺鍒犻櫎", @@ -207,17 +232,13 @@ messageKind: "00", statusList: [ { - label: "鍏ㄩ儴", - value: 2, - }, - { label: "鍙戦�佸け璐�", - value: 0, + value: 3, }, { label: "鍙戦�佹垚鍔�", - value: 1, - }, + value: 2, + } ], kindList: [ { @@ -244,6 +265,10 @@ this.getTableData(); }, methods: { + handleView(val) { + this.isViewDialog = true + this.role = val; + }, // 閲嶇疆 handleReset() { this.context = null; @@ -254,18 +279,18 @@ // 鍒犻櫎淇℃伅 handleDelete(ids) { this.$confirm("纭鍒犻櫎?").then(() => { - deleteMessage({ids: ids.join(",")}) - .then(() => { - this.$message({type: "success", message: "鎿嶄綔鎴愬姛"}); - this.getTableData(); - }) - .catch((err) => this.$message({type: "error", message: err})); + deleteMessage({ ids: ids.join(",") }) + .then(() => { + this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" }); + this.getTableData(); + }) + .catch((err) => this.$message({ type: "error", message: err })); }); }, getTableData() { const respondResult = - this.messageStatus === "鍏ㄩ儴" ? null : this.messageStatus; + this.messageStatus === "鍏ㄩ儴" ? null : this.messageStatus; getMessageList({ channelCode: "02", current: this.currentPage, @@ -273,20 +298,23 @@ pageSize: this.pageSize, head: this.context, }) - .then(({records, total}) => { - this.tableData = records; - this.totalNum = total; - }) - .catch((err) => { - this.$message({type: "error", message: err}); - }); + .then(({ records, total }) => { + this.tableData = records; + this.totalNum = total; + }) + .catch((err) => { + this.$message({ type: "error", message: err }); + }); }, resend(data) { - if (data.status === 1) { + if (data.status === 2) { return; } - sendMessage(data) + data.createTime = '', + data.sendTime = '', + data.createUser = null, + sendMessage(data) .then(() => { this.$message.success("鎿嶄綔鎴愬姛"); this.getTableData(); @@ -317,25 +345,25 @@ // 鎵归噺鎿嶄綔 mulUpdateStatus(idArr, flag) { this.$confirm( - flag === 1 - ? "鎮ㄧ‘瀹氳杩涜鎵归噺鍚敤瑙掕壊鍚�?" - : "鎮ㄧ‘瀹氳杩涜鎵归噺绂佺敤瑙掕壊鍚�?" + flag === 1 + ? "鎮ㄧ‘瀹氳杩涜鎵归噺鍚敤瑙掕壊鍚�?" + : "鎮ㄧ‘瀹氳杩涜鎵归噺绂佺敤瑙掕壊鍚�?" ) - .then((_) => { - this.$axios({ - method: "post", - url: "sccg/role/updateStatusBatch?ids=" + idArr + "&status=" + flag, - }) - .then(() => { - this.getTableData(); - this.$message({type: "success", message: "鎿嶄綔鎴愬姛"}); - }) - .catch((err) => { - this.$message({type: "error", message: err}); - }); + .then((_) => { + this.$axios({ + method: "post", + url: "sccg/role/updateStatusBatch?ids=" + idArr + "&status=" + flag, }) - .catch((err) => { - }); + .then(() => { + this.getTableData(); + this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" }); + }) + .catch((err) => { + this.$message({ type: "error", message: err }); + }); + }) + .catch((err) => { + }); }, // 琛ㄦ牸鐩戝惉 tableChange(list) { @@ -346,7 +374,7 @@ this.all = list.length === this.tableData.length; }, // 淇敼鏃堕棿鏍煎紡 - changeTime({updateTime}) { + changeTime({ updateTime }) { return helper(updateTime); }, // 鍏ㄩ�� @@ -360,7 +388,7 @@ }); }, // 璁剧疆琛ㄦ牸鏂戦┈绾� - tableRowClassName({row, rowIndex}) { + tableRowClassName({ row, rowIndex }) { if ((rowIndex + 1) % 2 === 0) { return "warning-row"; } else { @@ -389,22 +417,22 @@ <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 10px; display: flex; justify-content: space-between; font-weight: 650; } .header-content { - padding: 0 40px; + //padding: 0 40px; display: flex; line-height: 100px; // justify-content: space-between; @@ -427,12 +455,12 @@ .el-input { flex: 2; - color: #1d3f57; + color: #606266; - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } + //&::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; + //} } } @@ -456,7 +484,7 @@ } main { - background-color: #09152f; + background-color: white; margin-top: 20px; padding-bottom: 50px; @@ -483,13 +511,15 @@ 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 { @@ -510,10 +540,10 @@ width: 120px; } - &::v-deep .el-input__inner { - border: none; - background-color: #09152f; - } + //&::v-deep .el-input__inner { + // border: none; + // background-color: #09152f; + //} &:hover { border: 1px solid #4b9bb7; @@ -531,33 +561,33 @@ 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; - } - - &::v-deep .el-table__empty-block { - color: #4b9bb7; - } + //&::v-deep .el-table__empty-block { + // background-color: #09152f; + //} + // + //&::v-deep .el-table__empty-block { + // color: #4b9bb7; + //} .operation { display: flex; @@ -565,76 +595,164 @@ .line { padding: 0 5px; } - + color: var(--operation-color); span:hover { cursor: pointer; } } } - .el-table::v-deep .warning-row { - background: #06122c; - } + //.el-table::v-deep .warning-row { + // background: #06122c; + //} + // + //.el-table::v-deep .success-row { + // background: #071f39; + //} - .el-table::v-deep .success-row { - background: #071f39; - } + //&::v-deep .switchStyle .el-switch__label { + // position: absolute; + // display: none; + // color: #fff; + //} + // + //&::v-deep .el-switch__core { + // background-color: rgba(166, 166, 166, 1); + //} + // + //&::v-deep .switchStyle .el-switch__label--left { + // z-index: 9; + // left: 20px; + //} + // + //&::v-deep .switchStyle .el-switch__label--right { + // z-index: 9; + // left: 4px; + //} + // + //&::v-deep .switchStyle .el-switch__label.is-active { + // display: block; + //} + // + //&::v-deep .switchStyle.el-switch .el-switch__core, + //&::v-deep .el-switch .el-switch__label { + // width: 50px !important; + //} - &::v-deep .switchStyle .el-switch__label { - position: absolute; - display: none; - color: #fff; - } + .mainContent1 { + display: flex; + justify-content: center; + padding-top: 50px; + &:deep(.el-dialog__title) { + //color: #4b9bb7; + } + &::v-deep .el-form-item__label { + //color: #4b9bb7; + } - &::v-deep .el-switch__core { - background-color: rgba(166, 166, 166, 1); - } + &::v-deep .el-input__inner { + width: 400px; + //background-color: #09152f; + //border: 1px solid #17324c; + } - &::v-deep .switchStyle .el-switch__label--left { - z-index: 9; - left: 20px; - } + .message-item__left { + width: 400px; + } - &::v-deep .switchStyle .el-switch__label--right { - z-index: 9; - left: 4px; - } + .message-add { + &:hover { + cursor: pointer; + } + } - &::v-deep .switchStyle .el-switch__label.is-active { - display: block; - } + .el-form-item__content :deep(.el-select) { + width: 400px; + } - &::v-deep .switchStyle.el-switch .el-switch__core, - &::v-deep .el-switch .el-switch__label { - width: 50px !important; + :deep(.el-input) { + width: 400px; + } + + .message-item { + display: flex; + + span { + margin-left: 20px; + color: #606266; + } + } + + .message-tip { + margin-left: 20px; + } + + :deep(.el-input--suffix) { + width: 400px; + } + + // &::v-deep .el-textarea__inner { + // //background-color: #09152f; + // //border: 1px solid #17324c; + // } + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } } } - &::v-deep .el-dialog__header, - &::v-deep .el-dialog__body { - background-color: #06122c; - } - - &::v-deep .el-dialog__header { - display: flex; - align-items: center; - background-color: #fff; - padding: 20px; - line-height: 60px; - } - - &::v-deep .el-dialog__title { - color: #4b9bb7; - } - - &::v-deep .el-dialog__close { - width: 20px; - height: 20px; - // color: #fff; - } - - &::v-deep .el-dialog__body { - padding: 0; - } + //&::v-deep .el-dialog__header, + //&::v-deep .el-dialog__body { + // background-color: #06122c; + //} + // + //&::v-deep .el-dialog__header { + // display: flex; + // align-items: center; + // background-color: #fff; + // padding: 20px; + // line-height: 60px; + //} + // + //&::v-deep .el-dialog__title { + // color: #4b9bb7; + //} + // + //&::v-deep .el-dialog__close { + // width: 20px; + // height: 20px; + // // color: #fff; + //} + // + //&::v-deep .el-dialog__body { + // padding: 0; + //} } </style> -- Gitblit v1.8.0