From cc512dff1a5d7e45a2c2b628fcd45019ed3b5c0e Mon Sep 17 00:00:00 2001 From: wl <173@qq.com> Date: 星期五, 06 一月 2023 15:24:23 +0800 Subject: [PATCH] fix: 修复发送消息按钮不能点击 --- src/views/operate/fivepack/threepack/components/content.vue | 389 ++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 280 insertions(+), 109 deletions(-) diff --git a/src/views/operate/fivepack/threepack/components/content.vue b/src/views/operate/fivepack/threepack/components/content.vue index 9e7e0b5..c7b2580 100644 --- a/src/views/operate/fivepack/threepack/components/content.vue +++ b/src/views/operate/fivepack/threepack/components/content.vue @@ -5,56 +5,31 @@ <div class="find"> <div class="search-item"> <span>杈撳叆鏌ヨ:</span> - <el-input - style="flex: 1" - :placeholder=" - isStorePage() ? '搴楅摵锛堥棬搴楋級鍚嶇О' : '璇疯緭鍏ュ簵閾虹紪鍙�' - " - v-model="storeCode" - /> + <el-input style="flex: 1" :placeholder=" + isStorePage() ? '搴楅摵锛堥棬搴楋級鍚嶇О' : '璇疯緭鍏ュ簵閾虹紪鍙�' + " v-model="storeCode" /> </div> <div class="search-item"> <span>搴楅摵鐘舵��:</span> <el-select v-model="storeStatus" placeholder="閫夋嫨搴楅摵鐘舵��"> - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value" - /> + <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> <div class="findBtn"> - <el-button type="primary" @click="search" icon="el-icon-search" - >鏌ヨ</el-button - > - <el-button icon="el-icon-delete-solid" @click="handleReset" - >閲嶇疆</el-button - > + <el-button type="primary" @click="search" icon="el-icon-search">鏌ヨ</el-button> + <el-button icon="el-icon-delete-solid" @click="handleReset">閲嶇疆</el-button> </div> </div> - <el-button - v-if="isStorePage()" - type="primary" - icon="el-icon-plus" - class="button-addition" - @click="handleView(null, 'create')" - >娣诲姞</el-button - > + <el-button v-if="isStorePage()" type="primary" icon="el-icon-plus" class="button-addition" + @click="handleView(null, 'create')">娣诲姞</el-button> </div> </header> <main> <!-- 鏁版嵁灞曠ず --> - <el-table - ref="multipleTable" - :header-cell-style="{ - 'font-weight': '650', - 'line-height': '45px', - }" - :data="tableData" - style="width: 100%" - :row-class-name="tableRowClassName" - > + <el-table ref="multipleTable" :header-cell-style="{ + 'font-weight': '650', + 'line-height': '45px', + }" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> <el-table-column type="selection" min-width="5"> </el-table-column> <el-table-column prop="storeNumber" label="搴楅摵缂栧彿" min-width="10"> </el-table-column> @@ -64,11 +39,7 @@ </el-table-column> <el-table-column prop="contact" label="搴楅摵鑱旂郴鐢佃瘽" min-width="10"> </el-table-column> - <el-table-column - prop="storeAddress" - label="搴楅摵璇︾粏鍦板潃" - min-width="10" - > + <el-table-column prop="storeAddress" label="搴楅摵璇︾粏鍦板潃" min-width="10"> </el-table-column> <el-table-column prop="storeScore" label="搴楅摵绉垎" min-width="10"> </el-table-column> @@ -79,90 +50,94 @@ </el-table-column> <el-table-column prop="status" label="鐘舵��" min-width="10"> <template slot-scope="scope"> - <span>{{ scope.row.status==1?'缁忚惀':'鍊掗棴' }}</span> + <span>{{ scope.row.status == 1 ? '缁忚惀' : '鍊掗棴' }}</span> </template> </el-table-column> <el-table-column prop="operation" label="鎿嶄綔" min-width="20"> <template slot-scope="scope"> <div v-if="!isStorePage()" class="operation"> - <el-link - icon="el-icon-edit" - :underline="false" - @click="handleView(scope.row, 'update')" - >缂栬緫</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" :underline="false" @click="handleView(scope.row, 'update')">缂栬緫</el-link> + <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false" + @click="handleDelete(scope.row.id)">鍒犻櫎</el-link> <el-link class="leftPx" icon="el-icon-edit" :underline="false" - >鎺ㄩ�佷俊鎭�</el-link - > - <el-link - class="leftPx" - icon="el-icon-edit" - :underline="false" - @click="handleScoreView(scope.row, 'view')" - >鏌ョ湅</el-link - > + @click="sendMessage(scope.row.contact)">鎺ㄩ�佷俊鎭�</el-link> + <el-link class="leftPx" icon="el-icon-edit" :underline="false" + @click="handleScoreView(scope.row, 'view')">鏌ョ湅</el-link> </div> <div v-else class="operation"> - <el-link - icon="el-icon-edit" - :underline="false" - @click="handleView(scope.row, 'update')" - >缂栬緫</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" :underline="false" @click="handleView(scope.row, 'update')">缂栬緫</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> </el-table> <!-- 鏌ョ湅淇敼椤甸潰 --> - <el-dialog - :visible.sync="dialogUpdate" - width="45%" - :destroy-on-close="true" - :title="dialogType === 'view' ? '鏌ョ湅搴楅摵淇℃伅' : '淇敼搴楅摵淇℃伅'" - :before-close="handleClose" - > - <updateUser - v-if="dialogUpdate" - :dialogType="dialogType" - :storeInfo="storeInfo" - :isStorePage="isStorePage()" - @closeDialog="closeDialog" - /> + <el-dialog :visible.sync="dialogUpdate" width="45%" :destroy-on-close="true" + :title="dialogType === 'view' ? '鏌ョ湅搴楅摵淇℃伅' : '淇敼搴楅摵淇℃伅'" :before-close="handleClose"> + <updateUser v-if="dialogUpdate" :dialogType="dialogType" :storeInfo="storeInfo" :isStorePage="isStorePage()" + @closeDialog="closeDialog" /> </el-dialog> <!-- 鏌ョ湅淇敼椤甸潰 --> - <el-dialog - :visible.sync="dialogScore" - width="60%" - :destroy-on-close="true" - title="鏌ョ湅绉垎" - :before-close="handleCloseScoreView" - > + <el-dialog :visible.sync="dialogScore" width="60%" :destroy-on-close="true" title="鏌ョ湅绉垎" + :before-close="handleCloseScoreView"> <scoreView v-if="dialogScore" :storeInfo="storeInfoScoreView" /> + </el-dialog> + <!-- 鏂板缓娑堟伅 --> + <el-dialog title="鏂板缓娑堟伅" :destroy-on-close="true" :key="dialogType" :visible.sync="isShowDialog" width="80%" + :before-close="handleConfirmClose"> + <div class="mainContent"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="role" :rules="rules" label-position="right"> + <!-- 娑堟伅鏍忕洰 --> + <el-form-item class="optionItem" label="鐭俊妯℃澘:" prop="messageType"> + <div class="message-item"> + <div class="message-item__left"> + <el-select v-model="role.messageType" placeholder="璇烽�夋嫨鐭俊妯℃澘" @change="setTemplateValue"> + <el-option v-for="item in colList" :key="item.id" :label="item.title" :value="item.id"> + </el-option> + </el-select> + </div> + </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 node-key="id"> + </el-tree> + </el-option> + </el-select> --> + <!-- </div> --> + <div class="message-item__left"> + <el-input v-model="role.phoneNumber"></el-input> + </div> + </el-form-item> + <!-- 娑堟伅鍐呭 --> + <el-form-item class="optionItem" label="娑堟伅鍐呭:" prop="body"> + <MyEditor ref="edit"></MyEditor> + </el-form-item> + + <el-form-item> + <div class="optionBtn"> + <el-button type="primary" @click.native.prevent="handleSubmit(2)" class="btn submit">鍙戝竷</el-button> + <el-button class="btn cancel" @click.native.prevent="handleResetq">閲嶇疆</el-button> + </div> + </el-form-item> + </el-form> + </div> </el-dialog> <!-- 鍒嗛〉 --> <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> </main> @@ -175,17 +150,27 @@ getStoreInfoList, deleteStoreInfo, } from "@/api/operate/storeManagement"; +import { sendMessageByMobileNumber } from "@/api/operate/messageManagement"; +import MyEditor from '@/components/edit'; +import SMS from "@/api/operate/SMS"; export default { - components: { updateUser, scoreView }, - + components: { updateUser, scoreView, MyEditor }, created() { this.search(); + this.getSMSTemplateList(); }, props: ["model"], data() { + const validateMessageContent = (rule, value, callback) => { + if (!value) { + callback(new Error('璇疯緭鍏ョ煭淇″唴瀹�')); + } else { + callback(); + } + } return { storeCode: null, storeStatus: null, @@ -202,12 +187,109 @@ pageSize: 10, userInfo: null, dialogType: "", + isShowDialog: false, storeInfo: null, storeInfoScoreView: {}, + role: { + messageType: '', + head: '', + targetTo: '', + targetFrom: null, + body: '', + channelCode: '02', + phoneNumber: null, + }, + rules: { + messageType: [ + { required: true, trigger: ['blur', 'change'], message: '璇烽�夋嫨鐭俊妯℃澘' }, + ], + head: [ + { required: true, trigger: "blur", message: '璇疯緭鍏ョ煭淇℃爣棰�' }, + ], + body: [ + { required: true, trigger: ['blur', 'change'], validator: validateMessageContent } + ] + }, + colList: [], + departList: [], + typeList: [], + dialogCreate: false, + dialogView: false, + defaultProps: { + children: 'children', + label: 'departName' + }, + checkedList: [], + tempNameArr: [], + info: {}, + sendUser: "" }; }, methods: { + // 鏂板缓/淇濆瓨娑堟伅(1:鏂板缓,0淇濆瓨娑堟伅) + handleSubmit(mystatus) { + this.role.body = this.$refs.edit.editor.txt.html(); + this.$refs.user.validate((valid) => { + if (valid) { + const params = Object.assign({}, this.role); + params.targetTo = this.checkedList.join(','); + params.status = mystatus; + sendMessageByMobileNumber(params) + .then(() => { + this.$message({ type: 'success', message: '鎿嶄綔鎴愬姛' }); + this.isShowDialog = false; + this.role.body = ''; + this.role.head = ''; + this.$refs.edit.editor.txt.clear(); + this.search(); + this.$refs.user.resetFields(); + }) + .catch(err => this.$message({ type: 'error', message: err })); + } else { + this.$message.warning('璇锋鏌ュ繀濉」'); + } + }) + }, + setTemplateValue(obj) { + var _this = this + SMS.getSMSTemplateById(obj).then((result) => { + _this.role.head = result.title + _this.role.body = result.body + _this.$refs.edit.editor.txt.html(result.body) + }) + }, + getSMSTemplateList() { + SMS.getSMSTemplateList({ current: 1, pageSize: 100 }) + .then(({ records }) => { + this.colList = records; + }) + .catch(err => this.$message.error(err)) + }, + // 纭鍏抽棴寮圭獥 + handleConfirmClose(done) { + this.$confirm("纭鍏抽棴?").then(() => { + done(); + this.search(); + this.role.body = ''; + this.role.head = ''; + this.$refs.edit.editor.txt.clear(); + this.search(); + this.$refs.user.resetFields(); + }); + }, + // 閲嶇疆琛ㄥ崟 + handleResetq() { + this.$refs.edit.editor.txt.clear(); + this.search(); + this.$refs.user.resetFields(); + this.role.body = ''; + this.role.head = ''; + }, + sendMessage(val) { + this.isShowDialog = true; + this.role.phoneNumber = val; + }, search() { const status = this.storeStatus === 0 ? null : this.storeStatus; getStoreInfoList({ keyword: this.storeCode, status }) @@ -318,6 +400,94 @@ margin-top: 20px; padding-bottom: 50px; + .mainContent { + 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-input__inner { + // width: 400px; + // background-color: #09152f; + // border: 1px solid #17324c; + //} + + .message-item__left { + width: 400px; + } + + .message-add { + &:hover { + cursor: pointer; + } + } + + .el-form-item__content :deep(.el-select) { + width: 400px; + } + + //:deep(.el-input) { + // width: 400px; + //} + + .message-item { + display: flex; + + span { + margin-left: 20px; + color: #4b9bb7; + } + } + + .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; + } + } + } + .mainTitle { line-height: 60px; } @@ -337,6 +507,7 @@ justify-content: center; .el-pagination { + &::v-deep li, &::v-deep .btn-prev, &::v-deep .btn-next { -- Gitblit v1.8.0