联调审核

mg

2022-10-28 6863bdf4ba299ec633418a22e1161290fce155d0

联调审核

 src/components/Table/index.vue

@@ -6,7 +6,7 @@
                :row-class-name="tableRowClassName">
                <el-table-column type="selection" :min-width="5">
                </el-table-column>
                <el-table-column v-for="(item,idx) in option.group" :key="item.prop" :label="item.label"
                <el-table-column v-for="item in option.group" :key="item.prop" :label="item.label"
                    :prop="item.prop" :min-width="item['min-width'] ? item['item.min-width']:'10'">
                    <template slot-scope="scope">
                        <div v-if="item.type === 'text'">
@@ -17,7 +17,9 @@
                        </slot>
                        <slot name="status" v-else-if="item.type === 'status'" :info="scope">
                        </slot>
                        <div class=""></div>
                        <slot name='time' v-else-if="item.type === 'time'" :timeobj="scope"> 

                        </slot>
                    </template>
                </el-table-column>
            </el-table>

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

New file
@@ -0,0 +1,181 @@
<template>
    <div class="view">
        <div class="view-data">
            <el-form :model="sms" label-position="right" ref="viewForm" :rules="Rules" label-width="100px">
                <div class="data-item">
                    <el-form-item label="ID:">
                        <span class="data-detail">{{sms.messageId}}</span>
                    </el-form-item>                
                </div>
                <div class="data-item">
                    <el-form-item label="短信标题:">
                        <span class="data-detail">{{sms.title}}</span>
                    </el-form-item>                
                </div>
                <div class="data-item">
                    <el-form-item label="短信内容:">
                        <span class="data-detail">{{sms.body}}</span>
                    </el-form-item>                 
                </div>
                <!-- 审核意见 -->
                <el-form-item label="审核意见" prop="auditOpinion">
                    <el-input type="textarea" placeholder="请输入审核意见" v-model="sms.auditOpinion"></el-input>
                </el-form-item>
                <div class="el-form-footer">
                    <el-button @click.native.prevent="handleSubmit(0)">不同意</el-button>
                    <el-button type="primary" @click.native.prevent="handleSubmit(1)">同意</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    components: {
        
    },
    data() {
        const checkOpinion = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('审核意见不能为空'))
            }
        }
        return {
            id:{},
            messageId: {},
            staus:{},
            result:{},
            auditOpinion:{},
            Rules: {
                auditOpinion: [
                    { required: true, trigger: 'blur', validator: checkOpinion }
                ]
            },
        }
    },
    created() {
        const {sms} = this;
        console.log(this.messageData); 
        console.log(this.messageData.info); 
        this.sms = this.messageData.info.row;
        
    },
    methods: {
        changeComponent(index) {
            this.activeIndex = index;
        },
        // 提交审核意见
        handleSubmit(index) {
            const { sms } = this;
            this.$refs.viewForm.validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: 'post',
                        url: 'sccg/message_audit/checkSms',
                        data: {
                            id:sms.id,
                            messageId: sms.messageId,
                            status:index,
                            auditOpinion:sms.auditOpinion,
                            result:index === 0 ? '不同意':'同意'
                        }
                    })
                        .then(res => {
                            console.log(res);
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '审核成功' 
                                })
                                this.$emit('closeDialog', { flag: false, index: 1 });
                                
                            }

                        })
                        .catch(err => { console.log(err) });
                }else{
                    return false;
                }
            })
        },

    },
    props: ['messageData','closeDialog']
}
</script>
<style lang="scss" scoped>
.view {
    display: flex;
    padding: 20px;

    .view-data {
        color: #4b9bb7;
        flex: 4;
        padding: 20px;

        .data-item {
            display: flex;
            justify-content: space-between;
            line-height: 40px;
        }

        :deep(.el-form-item__label) {
            color: #4b9bb7;
        }

        :deep(.el-textarea__inner) {
            background-color: #17324c;
            color: #4b9bb7;
        }

        .el-form-footer {
            display: flex;
            justify-content: flex-end;
        }

        border: 1px solid #17324c;
    }

    .view-process {
        flex: 6;
        margin-left: 20px;

        .process-header {
            display: flex;
            line-height: 40px;

            .process-title-item {
                width: 120px;
                text-align: center;

                .under-line {
                    height: 2px;
                    width: 100%;
                }

                .title-active {
                    color: #4b9bb7;
                }

                .line-active {
                    background-color: #4b9bb7;
                    border-radius: 20px;
                }
            }
        }

        .show-item {
            overflow: hidden;
            height: 600px;
            position: relative;

            .show-wrap {
                overflow: scroll;
                height: 600px;
            }
        }
    }
}
</style>

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

@@ -1,335 +1,366 @@
<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" @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>
                </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>
  <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 MyCheckSms from './checkSms';
import helper from "@/utils/mydate";
import MyTable from "@/components/Table";
import MyCheckSms from "./checkSms";
export default {
    components: {
        MyTable,MyCheckSms
  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: [],
            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: '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
    // 重置
    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,
          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;
      }
    },
    // 关闭dialog
    closeDialog({ flag, index }) {
      this.dialogCheckSms = flag;
      if (index === 1) {
        this.setTableData();
    },    
    methods: {  
        handleSearch(){    
                this.setTableData();
        },
      // 重置
        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,
                    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;
             this.dialogCheckSms = true;
        },
              // 关闭dialog
       closeDialog({flag}){
            this.dialogCheckSms = flag;
       },
    }
}
      }
    },
    // 改变更新时间
    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>