From 32107ca1dd2c3930dcedf768e3dff163ff3bca35 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期四, 09 二月 2023 11:56:29 +0800
Subject: [PATCH] 封装选择部门组件
---
src/views/operate/sms/smsIndex/index.vue | 422 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 270 insertions(+), 152 deletions(-)
diff --git a/src/views/operate/sms/smsIndex/index.vue b/src/views/operate/sms/smsIndex/index.vue
index fe62718..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: '#606266',
- '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;
+ padding: 10px 20px;
color: #606266;
-
+ border: 1px solid #ccc;
header {
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;
@@ -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 {
@@ -565,7 +595,7 @@
.line {
padding: 0 5px;
}
-
+ color: var(--operation-color);
span:hover {
cursor: pointer;
}
@@ -608,6 +638,94 @@
//&::v-deep .el-switch .el-switch__label {
// width: 50px !important;
//}
+
+ .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-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: #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,
--
Gitblit v1.8.0