2023/2/9 肖辉 修改部门管理

odc.xiaohui

2023-02-09 085fa2fb257e9f11f8f6d34bf12e2dc281c36b4d

 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>
</style>