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/fivepack/threepack/components/content.vue | 790 +++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 602 insertions(+), 188 deletions(-) diff --git a/src/views/operate/fivepack/threepack/components/content.vue b/src/views/operate/fivepack/threepack/components/content.vue index 766c2ce..d399d6b 100644 --- a/src/views/operate/fivepack/threepack/components/content.vue +++ b/src/views/operate/fivepack/threepack/components/content.vue @@ -1,121 +1,440 @@ <template> - <div class="content"> - <header> - <div class="headerContent"> - <div class="find"> - <div class="search-item"> - <span>杈撳叆鏌ヨ:</span> - <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-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> - </div> + <div class="content"> + <header> + <div class="headerContent"> + <div class="find"> + <div class="search-item"> + <span>杈撳叆鏌ヨ:</span> + <el-input + style="flex: 1" + :placeholder=" + isStorePage() ? '搴楅摵锛堥棬搴楋級鍚嶇О' : '璇疯緭鍏ュ簵閾虹紪鍙�' + " + v-model="storeCode" + /> </div> - <el-button v-if="isStorePage()" type="primary" icon="el-icon-plus" @click="handleView(null, 'create')">娣诲姞</el-button> + <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-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 + > + </div> </div> - </header> - <main> - <!-- 鏁版嵁灞曠ず --> - <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"> - <el-table-column type="selection" min-width="5"> - </el-table-column> - <el-table-column prop="storeNumber" label="搴楅摵缂栧彿" min-width="10"> - </el-table-column> - <el-table-column prop="storeName" label="搴楅摵鍚嶇О" min-width="10"> - </el-table-column> - <el-table-column prop="owner" label="搴楅摵鑱旂郴浜�" min-width="10"> - </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> - <el-table-column prop="videoPoint" label="鍏宠仈鎽勫儚鏈�" min-width="10"> - <template v-if="scope.row.videoId" slot-scope="scope"> - <span>{{ scope.row.videoPoint.name }}</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 class="leftPx" icon="el-icon-edit" :underline="false">鎺ㄩ�佷俊鎭�</el-link> - <el-link class="leftPx" icon="el-icon-edit" :underline="false" @click="handleView(scope.row, 'view')">鏌ョ湅</el-link> + <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 + border + stripe + ref="multipleTable" + :header-cell-style="{ + background: '#F5F5F5', + '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> + <el-table-column prop="storeName" label="搴楅摵鍚嶇О" min-width="10"> + </el-table-column> + <el-table-column prop="owner" label="搴楅摵鑱旂郴浜�" min-width="10"> + </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> + <el-table-column prop="storeScore" label="搴楅摵绉垎" min-width="10"> + </el-table-column> + <el-table-column prop="videoPoint" label="鍏宠仈鎽勫儚鏈�" min-width="10"> + <template v-if="scope.row.videoId" slot-scope="scope"> + <span>{{ scope.row.videoPoint.name }}</span> + </template> + </el-table-column> + <el-table-column prop="status" label="鐘舵��" min-width="10"> + <template slot-scope="scope"> + <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 + class="leftPx" + icon="el-icon-edit" + :underline="false" + @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 + > + </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> + <!-- 鏌ョ湅淇敼椤甸潰 --> + <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> - <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-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> - </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> - <!-- 鍒嗛〉 --> - <div class="pagination"> - <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum" - :page-size="pageSize" @current-change="changeCurrentPage"> - </el-pagination> + </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> - </main> - </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> + </div> + </main> + </div> </template> <script> import updateUser from "@/views/operate/fivepack/threepack/components/updateUser"; -import { getStoreInfoList, deleteStoreInfo } from "@/api/operate/storeManagement"; +import scoreView from "@/views/operate/fivepack/threepack/components/score"; +import { + 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 }, - + components: { updateUser, scoreView, MyEditor }, created() { this.search(); + this.getSMSTemplateList(); }, - props: ['model'], + props: ["model"], data() { + const validateMessageContent = (rule, value, callback) => { + if (!value) { + callback(new Error("璇疯緭鍏ョ煭淇″唴瀹�")); + } else { + callback(); + } + }; return { storeCode: null, storeStatus: null, - options: [{ label: '缁忚惀', value: 1 }, { label: '鍊掗棴', value: 2 }], + options: [ + { label: "鍏ㄩ儴", value: 0 }, + { label: "缁忚惀", value: 1 }, + { label: "鍊掗棴", value: 2 }, + ], tableData: [], dialogUpdate: false, + dialogScore: false, currentPage: 1, totalNum: 0, pageSize: 10, userInfo: null, - dialogType: '', - storeInfo: 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() { - getStoreInfoList({ keyword: this.storeCode }) - .then(({ list, pageSize, totalPage }) => { - this.tableData = list; - this.pageSize = pageSize; - this.totalNum = totalPage; - }) - .catch(err => this.$message({ type: 'error', message: err })); + const status = this.storeStatus === 0 ? null : this.storeStatus; + getStoreInfoList({ keyword: this.storeCode, status }) + .then(({ list, pageSize, totalPage }) => { + this.tableData = list; + console.log(list); + this.pageSize = pageSize; + this.totalNum = totalPage; + }) + .catch((err) => this.$message({ type: "error", message: err })); }, handleReset() { - this.storeCode = ''; + this.storeCode = ""; this.storeStatus = null; this.search(); }, @@ -125,16 +444,22 @@ this.storeInfo = row; this.dialogType = type; }, + handleScoreView(row) { + this.storeInfoScoreView = row; + this.dialogScore = true; + }, handleDelete(id) { deleteStoreInfo(id) - .then(() => { - this.$message({ type: 'success', message: '鎿嶄綔鎴愬姛' }); - this.search(); - }) - .catch(err => this.$message({ type: 'error', message: err })); + .then(() => { + this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" }); + this.search(); + }) + .catch((err) => this.$message({ type: "error", message: err })); }, - + handleCloseScoreView() { + this.dialogScore = false; + }, handleClose() { this.dialogUpdate = false; }, @@ -158,103 +483,192 @@ }, isStorePage() { - return this.model === 'store'; + return this.model === "store"; + }, + }, +}; +</script> +<style lang="scss" scoped> +.content { + flex: 1; + height: 100%; + margin-left: 5px; + padding-left: 20px; + border: 1px solid #ccc; + .headerContent { + display: flex; + line-height: 100px; + justify-content: space-between; + align-items: center; + + .find { + display: flex; + } + + .search-item { + display: flex; + padding: 10px; + } + + .findBtn { + line-height: 100px; + margin-left: 15px; + display: flex; + align-items: center; + + .el-button { + padding: 12px 25px; + } + } + + .addBtn { + padding: 12px 30px; + margin-left: 20%; + } + } + + main { + // background-color: #09152f; + 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; + } + + .el-link { + color: #4b9bb7; + } + + .leftPx { + margin-left: 10px; + } + + .pagination { + margin-top: 50px; + display: flex; + line-height: 50px; + justify-content: right; + + .el-pagination { + &::v-deep li, + &::v-deep .btn-prev, + &::v-deep .btn-next { + // background-color: #071f39; + color: #4b9bb7; + } + } + } + + .el-table { + // color: #4b9bb7; + // font-size: 10px; + + &::v-deep .el-table__empty-block { + // background-color: #09152f; + color: #4b9bb7; + } + + .operation { + display: flex; + color: var(--operation-color); + .el-button { + border: none; + } + + span:hover { + cursor: pointer; + } + } } } } -</script> -<style lang="scss" scoped> -.content{ - flex: 1; - height: 100%; - padding-left: 20px; - - .headerContent { - display: flex; - line-height: 100px; - justify-content: space-between; - align-items: center; - - .find { - display: flex; - } - - .search-item { - display: flex; - padding: 10px; - } - - .findBtn { - line-height: 100px; - margin-left: 15px; - display: flex; - align-items: center; - - .el-button { - padding: 12px 25px; - } - } - - .addBtn { - padding: 12px 30px; - margin-left: 20%; - } - } - - main { - background-color: #09152f; - margin-top: 20px; - padding-bottom: 50px; - - .mainTitle { - line-height: 60px; - } - - .el-link { - color: #4b9bb7; - } - - .leftPx { - margin-left: 10px; - } - - .pagination { - margin-top: 50px; - display: flex; - line-height: 50px; - justify-content: center; - - .el-pagination { - &::v-deep li, - &::v-deep .btn-prev, - &::v-deep .btn-next { - background-color: #071f39; - color: #4b9bb7; - } - } - } - - .el-table { - color: #4b9bb7; - font-size: 10px; - - &::v-deep .el-table__empty-block { - background-color: #09152f; - color: #4b9bb7; - } - - .operation { - display: flex; - - .el-button { - border: none; - } - - span:hover { - cursor: pointer; - } - } - } - } - } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0