新增短信页面

mg

2022-11-01 23f51413f48f45741862d1ab100324e510a59b4d

 src/views/operate/management/message/index.vue

@@ -1,320 +1,378 @@
<template>
    <div class="message">
        <header>
            <div class="header-title">筛选条件</div>
            <div class="header-content">
                <div class="search">
                    <span>ID:</span>
                    <el-input placeholder="ID" v-model="context"></el-input>
                </div>
                <div class="status">
                    <span>短信状态:</span>
                    <el-radio-group v-model="status">
                        <el-radio :label="0">待审核</el-radio>
                        <el-radio :label="1">已审核</el-radio>
                    </el-radio-group>
                </div>
                <div class="btns">
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    <el-button icon="el-icon-delete-solid">重置</el-button>
                </div>
            </div>
        </header>
        <main>
            <div class="main-content">
                <div class="main-title">
                    数据列表
                </div>      
                <!-- 数据展示 -->
                <MyTable :tableOption="tableOption" :tableData="tableData" :pageShow="false">
                    <template #operation="info">
                        <el-link :underline="false" style="color:#4b9bb7">编辑</el-link>
                    </template>
                </MyTable>
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem funs-sp">
                           
                        </div>
                        <div class="funsItem funs-sp">
                          
                        </div>
                        <div class="funsItem">            
                        </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>
                    </div>
                </div>
                
            </div>
        </main>
        <footer>

        </footer>
    </div>
  <div class="message">
    <header>
      <div class="header-title">筛选条件</div>
      <div class="header-content">
        <div class="search">
          <span>ID:</span>
          <el-input placeholder="ID" v-model="context"></el-input>
        </div>
        <div class="status">
          <span>短信状态:</span>
          <el-radio-group v-model="status">
            <el-radio :label="0">待审核</el-radio>
            <el-radio :label="1">已审核</el-radio>
          </el-radio-group>
        </div>
        <div class="btns">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >查询</el-button
          >
          <el-button icon="el-icon-delete-solid" @click="handleReset"
            >重置</el-button
          >
        </div>
      </div>
    </header>
    <main>
      <div class="main-content">
        <div class="main-title">数据列表</div>
        <!-- 数据展示 -->
        <MyTable
          :tableOption="tableOption"
          :tableData="tableData"
          :pageShow="false"
        >
          <template #operation="info">
            <el-link
              :underline="false"
              style="color: #4b9bb7"
              @click="handleCheckSms(info)"
              >审核</el-link
            >
          </template>
          <template #time="{timeobj}">
            <span>{{ changeUpdateTime(timeobj.row.updateTime)}}</span>
          </template>
        </MyTable>
        <div class="tools">
          <div class="funs">
            <div class="funsItem funs-sp"></div>
            <div class="funsItem funs-sp"></div>
            <div class="funsItem"></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>
          </div>
        </div>
        <!-- 审核页面 -->
        <el-dialog
          :visible.sync="dialogCheckSms"
          width="80%"
          title="消息详情"
          v-if="dialogCheckSms"
          :before-close="handleClose"
        >
          <MyCheckSms
            :messageData="messageData"
            @closeDialog="closeDialog"
          ></MyCheckSms>
        </el-dialog>
      </div>
    </main>
    <footer></footer>
  </div>
</template>
<script>
import MyTable from '@/components/Table';
import { myDownLoad } from '@/utils/helper';
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("shortMessage");
import helper from "@/utils/mydate";
import MyTable from "@/components/Table";
import MyCheckSms from "./checkSms";
export default {
    components: {
        MyTable
  components: {
    MyTable,
    MyCheckSms,
  },
  data() {
    return {
      tableData: [],
      dialogCheckSms: false,
      messageData: {},
      totalNum: null,
      context: "",
      status: 0,
      list: [],
      pageSize: 10,
      currentPage: 1,
      tableOption: {
        group: [
          {
            label: "ID",
            type: "text",
            prop: "messageId",
            "min-width": 8,
          },
          {
            label: "短信标题",
            type: "text",
            prop: "title",
            "min-width": 12,
          },
          {
            label: "短信内容",
            type: "text",
            prop: "body",
            "min-width": 12,
          },
          {
            label: "短信签名",
            type: "text",
            prop: "ipAddress",
            "min-width": 10,
          },
          {
            label: "审核状态",
            type: "text",
            prop: "auditStatusText",
            "min-width": 12,
          },
          {
            label: "更新时间",
            type: "time",
            prop: "updateTime",
            "min-width": 12,
          },
          {
            label: "更新人",
            type: "text",
            prop: "realAuditText",
            "min-width": 8,
          },
          {
            label: "操作",
            type: "operation",
            prop: "operation",
            "min-width": 15,
          },
        ],
      },
    };
  },
  created() {
    const { setTableData } = this;
    this.setTableData();
  },
  methods: {
    handleSearch() {
      this.setTableData();
    },
    data() {
        return {
            tableData: [],
            totalNum: null,
            context: "",
            status:0,
            list: [],
            pageSize: 10,
            currentPage: 1,
            tableOption: {
                group: [
                    {
                        label: 'ID',
                        type: 'text',
                        prop: 'messageId',
                        'min-width':8
                    },
                    {
                        label: '短信标题',
                        type: 'text',
                        prop: 'title',
                        'min-width':12
                    },
                    {
                        label: '短信内容',
                        type: 'text',
                        prop: 'body',
                        'min-width':12
                    },
                    {
                        label: '短信签名',
                        type: 'text',
                        prop: 'ipAddress',
                        'min-width':10
                    },
                    {
                        label: '审核状态',
                        type: 'text',
                        prop: 'auditStatus',
                        'min-width':12
                    },
                    {
                        label: '更新时间',
                        type: 'time',
                        prop: 'updateTime',
                        'min-width':12
                    },
                    {
                        label: '更新人',
                        type: 'text',
                        prop: 'auditText',
                        'min-width':8
                    },
                    {
                        label: '操作',
                        type: 'operation',
                        prop: 'operation',
                        'min-width':15
                    },
                ]
            },
        }
    }, 
    created() {
        const { setTableData } = this;
        setTableData();
    },    
    methods: {  
    handleSearch(){
            const {setTableData} = this
            setTableData();
     },
     // 设置表格数据
     async setTableData() {
            const arr = await this.getMessageAuditList();
            this.tableData = arr.records;
            this.totalNum = arr.total;
    // 重置
    handleReset() {},
    // 设置表格数据
    async setTableData() {
      const arr = await this.getMessageAuditList();
      this.tableData = arr.records;
      this.totalNum = arr.total;
    },
    // 获取消息数据
    async getMessageAuditList() {
      let arr = [];
      const { currentPage, pageSize, context, status } = this;
      await this.$axios({
        method: "post",
        url: "sccg/message_audit/list",
        data: {
          messageId: context,
          auditId:this.auditId,
          auditStatus: status,
          current: currentPage,
          pageSize: pageSize,
        },
        // 获取消息数据
        async getMessageAuditList() {
            let arr = [];
            const { currentPage, pageSize,context,status} = this;
            await this.$axios({
                method: 'post',
                url: 'sccg/message_audit/list',
                data: {
                    messageId: context,
                    auditStatus:status,
                    current: currentPage,
                    pageSize: pageSize
                }
      }).then((res) => {
        arr = res.data;
      });
      return arr;
    },
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭?").then((_) => {
        done();
      });
    },
    // 当前页改变触发事件
    changeCurrentPage(page) {
      this.currentPage = page;
      this.setTableData();
    },
    // 去审核
    handleCheckSms(info) {
      this.messageData = info;
      if (this.messageData.info.row.auditStatus === 1) {
        this.$message({ message: "该消息已被审核！" });
        this.dialogCheckSms = false;
      } else {
        this.dialogCheckSms = true;
      }
    },
    // 获取当前登录用户信息
    getLoginUserInfo() {
            const name = sessionStorage.getItem('name');
            this.$axios({
                method: 'get',
                url: 'sccg/admin/info?name=' + name,
            })
                .then(res => {
                    arr = res.data;
                    this.auditId = res.data.userId
                })
            return arr;
        },
        // 弹窗关闭
        handleClose(done) {
            this.$confirm('确认关闭?')
                .then(_ => {
                    done();
                })
        },
        ...mapActions(['getMessageList']),
         // 当前页改变触发事件
         changeCurrentPage(page) {
            this.currentPage = page;
            this.setTableData();
        },
    }
}
     },
    // 关闭dialog
    closeDialog({ flag, index }) {
      this.dialogCheckSms = flag;
      if (index === 1) {
        this.setTableData();
      }
    },
    // 改变更新时间
    changeUpdateTime(time) {
        console.log(time)
      if (time) {
        return helper(time);
      }
      return "";
    },
  },
};
</script>
<style lang="scss" scoped>
.message {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7;
  text-align: left;
  margin: 10px 20px;
  color: #4b9bb7;

    header {
        background-color: #09152f;
        border: 1pox solid #fff;
        .header-title{
            line-height: 40px;
            padding: 0 20px;
            border-bottom: 1px solid #4b9bb7;
  header {
    background-color: #09152f;
    border: 1pox solid #fff;
    .header-title {
      line-height: 40px;
      padding: 0 20px;
      border-bottom: 1px solid #4b9bb7;
    }
    .header-content {
      padding: 0 40px;
      display: flex;
      line-height: 100px;
      justify-content: space-between;
      align-items: center;

      .search {
        display: flex;
        justify-content: flex-start;

        span {
          flex: 1;
        }
        .header-content {
            padding: 0 40px;
            display: flex;
            line-height: 100px;
            justify-content: space-between;
            align-items: center;

            .search {
                display: flex;
                justify-content: flex-start;
        .el-input {
          flex: 2;
          color: #1d3f57;

                span {
                    flex: 1;
                }

                .el-input {
                    flex: 2;
                    color: #1d3f57;

                    &::v-deep .el-input__inner {
                        background-color: #09152f;
                        border: 1px solid #17324c;
                    }
                }

            }
          &::v-deep .el-input__inner {
            background-color: #09152f;
            border: 1px solid #17324c;
          }
        }
      }
    }
  }

  main {
    background-color: #09152f;
    margin-top: 20px;
    padding-bottom: 50px;
    border: 1pox solid #fff;

    .main-title {
      line-height: 60px;
      padding: 10px 20px;
    }

    main {
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;
        border: 1pox solid #fff;
    .tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

        .main-title {
            line-height: 60px;
            padding: 10px 20px;
        }
      .funs {
        display: flex;

        .tools {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        .funsItem {
          line-height: 28px;
          display: flex;
          align-items: center;
          border: 1px solid #17324c;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 10px;

            .funs {
                display: flex;
          .el-checkbox {
            width: 80px;
            padding: 0 10px;
          }

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    border-radius: 4px;
                    font-size: 12px;
                    margin-left: 10px;
          .el-select {
            width: 120px;
          }

                    .el-checkbox {
                        width: 80px;
                        padding: 0 10px;
                    }
          &::v-deep .el-input__inner {
            border: none;
            background-color: #09152f;
          }

                    .el-select {
                        width: 120px;
                    }
          &:hover {
            border: 1px solid #4b9bb7;
          }

                    &::v-deep .el-input__inner {
                        border: none;
                        background-color: #09152f;
                    }

                    &:hover {
                        border: 1px solid #4b9bb7;
                    }

                    &:hover .el-checkbox {
                        color: #4b9bb7;
                    }
                }

            }

            .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;
                    }

                    &::v-deep .active {
                        background-color: #409eff;
                        color: #fff;
                    }
                }
            }
        }

        .el-table {
          &:hover .el-checkbox {
            color: #4b9bb7;
            font-size: 10px;

            .operation {
                display: flex;

                .line {
                    padding: 0 5px;
                }

                span:hover {
                    cursor: pointer;
                }
            }
          }
        }
      }

      .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;
          }

          &::v-deep .active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }

    .el-table {
      color: #4b9bb7;
      font-size: 10px;

      .operation {
        display: flex;

        .line {
          padding: 0 5px;
        }

        span:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>