From 1e07cfd8ac6c3e31e94c0ea98dcff61db51e49d1 Mon Sep 17 00:00:00 2001
From: wl <173@qq.com>
Date: 星期一, 09 一月 2023 16:54:39 +0800
Subject: [PATCH] fix: 单选框展示
---
src/views/operate/fivepack/threepack/components/content.vue | 657 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 470 insertions(+), 187 deletions(-)
diff --git a/src/views/operate/fivepack/threepack/components/content.vue b/src/views/operate/fivepack/threepack/components/content.vue
index 766c2ce..c7b2580 100644
--- a/src/views/operate/fivepack/threepack/components/content.vue
+++ b/src/views/operate/fivepack/threepack/components/content.vue
@@ -1,121 +1,309 @@
<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 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>
+ <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 +313,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 +352,192 @@
},
isStorePage() {
- return this.model === 'store';
+ return this.model === "store";
+ },
+ },
+};
+</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;
+
+ .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: 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;
+ }
+ }
}
}
}
-</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
--
Gitblit v1.8.0