页面优化

zhanghua

2023-11-13 4c6f2df21a29048440a85e34dadcd4f1c75c179c

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

@@ -5,17 +5,20 @@
      <div class="header-content">
        <div class="search">
          <span>ID:</span>
          <el-input placeholder="ID" v-model="context"></el-input>
          <el-input placeholder="请输入ID" v-model="context"></el-input>
        </div>
        <div class="status">
          <span>短信状态:</span>
          <el-radio-group v-model="status">
          <el-radio-group v-model="status" @input="getMessageAuditList">
            <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
            type="primary"
            icon="el-icon-search"
            @click="getMessageAuditList"
            >查询</el-button
          >
          <el-button icon="el-icon-delete-solid" @click="handleReset"
@@ -41,8 +44,8 @@
              >审核</el-link
            >
          </template>
          <template #time="{timeobj}">
            <span>{{ changeUpdateTime(timeobj.row.updateTime)}}</span>
          <template #time="{ timeobj }">
            <span>{{ changeUpdateTime(timeobj.row.updateTime) }}</span>
          </template>
        </MyTable>
        <div class="tools">
@@ -66,12 +69,12 @@
        <!-- 审核页面 -->
        <el-dialog
          :visible.sync="dialogCheckSms"
          width="80%"
          width="60%"
          title="消息详情"
          v-if="dialogCheckSms"
          :before-close="handleClose"
        >
          <MyCheckSms
            v-if="dialogCheckSms"
            :messageData="messageData"
            @closeDialog="closeDialog"
          ></MyCheckSms>
@@ -156,39 +159,34 @@
    };
  },
  created() {
    const { setTableData } = this;
    this.setTableData();
    this.getMessageAuditList();
  },
  methods: {
    handleSearch() {
      this.setTableData();
    },
    // 重置
    handleReset() {},
    // 设置表格数据
    async setTableData() {
      const arr = await this.getMessageAuditList();
      this.tableData = arr.records;
      this.totalNum = arr.total;
    handleReset() {
      this.context = "";
      this.status = 0;
      this.getMessageAuditList();
    },
    // 获取消息数据
    async getMessageAuditList() {
      let arr = [];
      const { currentPage, pageSize, context, status } = this;
      await this.$axios({
    getMessageAuditList() {
      this.$axios({
        method: "post",
        url: "sccg/message_audit/list",
        data: {
          messageId: context,
          auditId:this.auditId,
          auditStatus: status,
          current: currentPage,
          pageSize: pageSize,
          messageId: this.context,
          auditId: this.auditId,
          auditStatus: this.status,
          current: this.currentPage,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        arr = res.data;
      });
      return arr;
      })
        .then((res) => {
          const { records, total } = res.data;
          this.tableData = records;
          this.totalNum = total;
        })
        .catch((err) => this.$message.error(err));
    },
    // 弹窗关闭
    handleClose(done) {
@@ -199,12 +197,12 @@
    // 当前页改变触发事件
    changeCurrentPage(page) {
      this.currentPage = page;
      this.setTableData();
      this.getMessageAuditList();
    },
    // 去审核
    handleCheckSms(info) {
      this.messageData = info;
      if (this.messageData.info.row.auditStatus === 1) {
      this.messageData = info.info.row;
      if (info.info.row.auditStatus === 1) {
        this.$message({ message: "该消息已被审核！" });
        this.dialogCheckSms = false;
      } else {
@@ -213,15 +211,14 @@
    },
    // 获取当前登录用户信息
    getLoginUserInfo() {
            const name = sessionStorage.getItem('name');
            this.$axios({
                method: 'get',
                url: 'sccg/admin/info?name=' + name,
            })
                .then(res => {
                    this.auditId = res.data.userId
                })
     },
      const name = sessionStorage.getItem("name");
      this.$axios({
        method: "get",
        url: "sccg/admin/info?name=" + name,
      }).then((res) => {
        this.auditId = res.data.userId;
      });
    },
    // 关闭dialog
    closeDialog({ flag, index }) {
      this.dialogCheckSms = flag;
@@ -231,7 +228,6 @@
    },
    // 改变更新时间
    changeUpdateTime(time) {
        console.log(time)
      if (time) {
        return helper(time);
      }
@@ -243,19 +239,18 @@
<style lang="scss" scoped>
.message {
  text-align: left;
  margin: 10px 20px;
  padding: 10px 20px;
  color: #4b9bb7;

  border: 1px solid #ccc;
  header {
    background-color: #09152f;
    border: 1pox solid #fff;
    background-color: white;
    .header-title {
      line-height: 40px;
      padding: 0 20px;
      //padding: 0 20px;
      border-bottom: 1px solid #4b9bb7;
    }
    .header-content {
      padding: 0 40px;
      //padding: 0 40px;
      display: flex;
      line-height: 100px;
      justify-content: space-between;
@@ -274,8 +269,8 @@
          color: #1d3f57;

          &::v-deep .el-input__inner {
            background-color: #09152f;
            border: 1px solid #17324c;
            // background-color: #09152f;
            //border: 1px solid #17324c;
          }
        }
      }
@@ -283,10 +278,9 @@
  }

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

    .main-title {
      line-height: 60px;
@@ -322,7 +316,7 @@

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

          &:hover {
@@ -345,7 +339,7 @@
          &::v-deep li,
          &::v-deep .btn-prev,
          &::v-deep .btn-next {
            background-color: #071f39;
            // background-color: #071f39;
            color: #4b9bb7;
          }

@@ -358,8 +352,8 @@
    }

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

      .operation {
        display: flex;
@@ -367,7 +361,7 @@
        .line {
          padding: 0 5px;
        }

        color: var(--operation-color);
        span:hover {
          cursor: pointer;
        }
@@ -375,4 +369,4 @@
    }
  }
}
</style>
</style>