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 | 544 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 336 insertions(+), 208 deletions(-)
diff --git a/src/views/operate/sms/smsIndex/index.vue b/src/views/operate/sms/smsIndex/index.vue
index 0684d13..c7ea05c 100644
--- a/src/views/operate/sms/smsIndex/index.vue
+++ b/src/views/operate/sms/smsIndex/index.vue
@@ -12,22 +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>
@@ -35,30 +28,22 @@
<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: '#4b9bb7',
- '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>
+ 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>
</el-table-column>
@@ -68,82 +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>
@@ -154,6 +182,8 @@
<script>
import helper from "@/utils/mydate";
import MyCreate from "./createSms";
+import MyEditor from "@/components/edit";
+
import {
getMessageList,
deleteMessage,
@@ -162,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,
@@ -182,14 +214,14 @@
label: "鎵归噺鎿嶄綔",
disabled: true,
},
- {
- value: 1,
- label: "鎵归噺鍚敤",
- },
- {
- value: 2,
- label: "鎵归噺绂佺敤",
- },
+ // {
+ // value: 1,
+ // label: "鎵归噺鍚敤",
+ // },
+ // {
+ // value: 2,
+ // label: "鎵归噺绂佺敤",
+ // },
{
value: 3,
label: "鎵归噺鍒犻櫎",
@@ -200,17 +232,13 @@
messageKind: "00",
statusList: [
{
- label: "鍏ㄩ儴",
- value: 2,
- },
- {
label: "鍙戦�佸け璐�",
- value: 0,
+ value: 3,
},
{
label: "鍙戦�佹垚鍔�",
- value: 1,
- },
+ value: 2,
+ }
],
kindList: [
{
@@ -237,6 +265,10 @@
this.getTableData();
},
methods: {
+ handleView(val) {
+ this.isViewDialog = true
+ this.role = val;
+ },
// 閲嶇疆
handleReset() {
this.context = null;
@@ -276,15 +308,18 @@
},
resend(data) {
- if (data.status === 1) {
+ if (data.status === 2) {
return;
}
- sendMessage(data)
- .then(() => {
- this.$message.success("鎿嶄綔鎴愬姛");
- this.getTableData();
- })
- .catch((err) => this.$message.error(`${err}`));
+ data.createTime = '',
+ data.sendTime = '',
+ data.createUser = null,
+ sendMessage(data)
+ .then(() => {
+ this.$message.success("鎿嶄綔鎴愬姛");
+ this.getTableData();
+ })
+ .catch((err) => this.$message.error(`${err}`));
},
// 鎵归噺涓嬫媺妗嗘搷浣�
@@ -327,7 +362,8 @@
this.$message({ type: "error", message: err });
});
})
- .catch((err) => {});
+ .catch((err) => {
+ });
},
// 琛ㄦ牸鐩戝惉
tableChange(list) {
@@ -381,22 +417,22 @@
<style lang="scss" scoped>
.userList {
text-align: left;
- margin: 10px 20px;
- color: #4b9bb7;
-
+ padding: 10px 20px;
+ color: #606266;
+ border: 1px solid #ccc;
header {
- background-color: #09152f;
+ 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;
@@ -406,6 +442,7 @@
min-width: 120px;
padding-left: 15px;
}
+
.search,
.message-status,
.message-kind {
@@ -418,18 +455,19 @@
.el-input {
flex: 2;
- color: #1d3f57;
+ color: #606266;
- &::v-deep .el-input__inner {
- background-color: #09152f;
- border: 1px solid #17324c;
- }
+ //&::v-deep .el-input__inner {
+ // background-color: #09152f;
+ // border: 1px solid #17324c;
+ //}
}
}
.find {
margin-left: 15px;
}
+
.findBtn {
line-height: 100px;
margin-left: 15px;
@@ -446,7 +484,7 @@
}
main {
- background-color: #09152f;
+ background-color: white;
margin-top: 20px;
padding-bottom: 50px;
@@ -473,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 {
@@ -500,10 +540,10 @@
width: 120px;
}
- &::v-deep .el-input__inner {
- border: none;
- background-color: #09152f;
- }
+ //&::v-deep .el-input__inner {
+ // border: none;
+ // background-color: #09152f;
+ //}
&:hover {
border: 1px solid #4b9bb7;
@@ -521,33 +561,33 @@
line-height: 50px;
justify-content: center;
- .el-pagination {
- &::v-deep li,
- &::v-deep .btn-prev,
- &::v-deep .btn-next {
- background-color: #071f39;
- color: #4b9bb7;
- }
-
- &::v-deep .active {
- background-color: #409eff;
- color: #fff;
- }
- }
+ //.el-pagination {
+ // &::v-deep li,
+ // &::v-deep .btn-prev,
+ // &::v-deep .btn-next {
+ // background-color: #071f39;
+ // color: #4b9bb7;
+ // }
+ //
+ // &::v-deep .active {
+ // background-color: #409eff;
+ // color: #fff;
+ // }
+ //}
}
}
.el-table {
- color: #4b9bb7;
- font-size: 10px;
+ // color: #606266;
+ // font-size: 10px;
- &::v-deep .el-table__empty-block {
- background-color: #09152f;
- }
-
- &::v-deep .el-table__empty-block {
- color: #4b9bb7;
- }
+ //&::v-deep .el-table__empty-block {
+ // background-color: #09152f;
+ //}
+ //
+ //&::v-deep .el-table__empty-block {
+ // color: #4b9bb7;
+ //}
.operation {
display: flex;
@@ -555,76 +595,164 @@
.line {
padding: 0 5px;
}
-
+ color: var(--operation-color);
span:hover {
cursor: pointer;
}
}
}
- .el-table::v-deep .warning-row {
- background: #06122c;
- }
+ //.el-table::v-deep .warning-row {
+ // background: #06122c;
+ //}
+ //
+ //.el-table::v-deep .success-row {
+ // background: #071f39;
+ //}
- .el-table::v-deep .success-row {
- background: #071f39;
- }
+ //&::v-deep .switchStyle .el-switch__label {
+ // position: absolute;
+ // display: none;
+ // color: #fff;
+ //}
+ //
+ //&::v-deep .el-switch__core {
+ // background-color: rgba(166, 166, 166, 1);
+ //}
+ //
+ //&::v-deep .switchStyle .el-switch__label--left {
+ // z-index: 9;
+ // left: 20px;
+ //}
+ //
+ //&::v-deep .switchStyle .el-switch__label--right {
+ // z-index: 9;
+ // left: 4px;
+ //}
+ //
+ //&::v-deep .switchStyle .el-switch__label.is-active {
+ // display: block;
+ //}
+ //
+ //&::v-deep .switchStyle.el-switch .el-switch__core,
+ //&::v-deep .el-switch .el-switch__label {
+ // width: 50px !important;
+ //}
- &::v-deep .switchStyle .el-switch__label {
- position: absolute;
- display: none;
- color: #fff;
- }
+ .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-switch__core {
- background-color: rgba(166, 166, 166, 1);
- }
+ &::v-deep .el-input__inner {
+ width: 400px;
+ //background-color: #09152f;
+ //border: 1px solid #17324c;
+ }
- &::v-deep .switchStyle .el-switch__label--left {
- z-index: 9;
- left: 20px;
- }
+ .message-item__left {
+ width: 400px;
+ }
- &::v-deep .switchStyle .el-switch__label--right {
- z-index: 9;
- left: 4px;
- }
+ .message-add {
+ &:hover {
+ cursor: pointer;
+ }
+ }
- &::v-deep .switchStyle .el-switch__label.is-active {
- display: block;
- }
+ .el-form-item__content :deep(.el-select) {
+ width: 400px;
+ }
- &::v-deep .switchStyle.el-switch .el-switch__core,
- &::v-deep .el-switch .el-switch__label {
- width: 50px !important;
+ :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,
- &::v-deep .el-dialog__body {
- background-color: #06122c;
- }
-
- &::v-deep .el-dialog__header {
- display: flex;
- align-items: center;
- background-color: #fff;
- padding: 20px;
- line-height: 60px;
- }
-
- &::v-deep .el-dialog__title {
- color: #4b9bb7;
- }
-
- &::v-deep .el-dialog__close {
- width: 20px;
- height: 20px;
- // color: #fff;
- }
-
- &::v-deep .el-dialog__body {
- padding: 0;
- }
+ //&::v-deep .el-dialog__header,
+ //&::v-deep .el-dialog__body {
+ // background-color: #06122c;
+ //}
+ //
+ //&::v-deep .el-dialog__header {
+ // display: flex;
+ // align-items: center;
+ // background-color: #fff;
+ // padding: 20px;
+ // line-height: 60px;
+ //}
+ //
+ //&::v-deep .el-dialog__title {
+ // color: #4b9bb7;
+ //}
+ //
+ //&::v-deep .el-dialog__close {
+ // width: 20px;
+ // height: 20px;
+ // // color: #fff;
+ //}
+ //
+ //&::v-deep .el-dialog__body {
+ // padding: 0;
+ //}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0