From 5173f8e31d106abd003e123c8679cf53c7940b33 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 30 一月 2023 11:54:12 +0800
Subject: [PATCH] 网格绘制
---
src/views/operate/fivepack/threepack/components/content.vue | 425 +++++++++++++++++++++++++++++++++++++---------------
1 files changed, 303 insertions(+), 122 deletions(-)
diff --git a/src/views/operate/fivepack/threepack/components/content.vue b/src/views/operate/fivepack/threepack/components/content.vue
index 7275754..fe4bbae 100644
--- a/src/views/operate/fivepack/threepack/components/content.vue
+++ b/src/views/operate/fivepack/threepack/components/content.vue
@@ -5,58 +5,35 @@
<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"
- @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="{
- background: '#06122c',
- 'font-size': '12px',
- color: '#4b9bb7',
- 'font-weight': '650',
- 'line-height': '45px',
- }"
- :data="tableData"
- style="width: 100%"
- :row-class-name="tableRowClassName"
- >
+ 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>
@@ -66,11 +43,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,87 +52,96 @@
<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 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="45%"
- :destroy-on-close="true"
- title="鏌ョ湅绉垎"
- :before-close="handleClose"
- >
- <scoreView :storeInfo="storeInfo" @closeDialog="closeDialog" />
+ <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>
@@ -172,17 +154,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,
@@ -199,16 +191,115 @@
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 })
.then(({ list, pageSize, totalPage }) => {
this.tableData = list;
+ console.log(list);
this.pageSize = pageSize;
this.totalNum = totalPage;
})
@@ -227,8 +318,8 @@
this.dialogType = type;
},
handleScoreView(row) {
+ this.storeInfoScoreView = row;
this.dialogScore = true;
- this.storeInfo = row;
},
handleDelete(id) {
@@ -239,15 +330,15 @@
})
.catch((err) => this.$message({ type: "error", message: err }));
},
-
+ handleCloseScoreView() {
+ this.dialogScore = false;
+ },
handleClose() {
this.dialogUpdate = false;
- this.dialogScore = false;
},
closeDialog() {
this.dialogUpdate = false;
- this.dialogScore = false;
this.search();
},
@@ -274,8 +365,9 @@
.content {
flex: 1;
height: 100%;
+ margin-left: 5px;
padding-left: 20px;
-
+ border: 1px solid #ccc;
.headerContent {
display: flex;
line-height: 100px;
@@ -309,9 +401,97 @@
}
main {
- background-color: #09152f;
+ // 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;
@@ -329,24 +509,25 @@
margin-top: 50px;
display: flex;
line-height: 50px;
- justify-content: center;
+ justify-content: right;
.el-pagination {
+
&::v-deep li,
&::v-deep .btn-prev,
&::v-deep .btn-next {
- background-color: #071f39;
+ // background-color: #071f39;
color: #4b9bb7;
}
}
}
.el-table {
- color: #4b9bb7;
- font-size: 10px;
+ // color: #4b9bb7;
+ // font-size: 10px;
&::v-deep .el-table__empty-block {
- background-color: #09152f;
+ // background-color: #09152f;
color: #4b9bb7;
}
@@ -364,4 +545,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0