saber/src/views/news/news.vue

<template>
  <basic-container>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">我的消息</el-menu-item>
      <el-menu-item index="2">所有消息</el-menu-item>
    </el-menu>
    <avue-crud
      :data="data"
      :option="option"
      :table-loading="showLoading"
      :page.sync="page"
      :permission="permissionList"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template
        slot="imageUrl"
        slot-scope="scope"
      >
        <el-button
          v-if="scope.row.imageUrl.length>0"
          size="small"
          @click="openPreview(scope.row.imageUrl,scope.$index)"
        >图片</el-button>
      </template>
      <!-- 提交进度 -->
      <template
        slot="cz"
        slot-scope="scope"
      >
        <el-button
          size="small"
          @click="changeProgres(scope.row)"
          v-show="!scope.row.isCurrent && scope.row.operation"
        >提交进度</el-button>
      </template>
      <!-- 处理状态 -->
      <template
        slot="isCurrent"
        slot-scope="scope"
      >
        <div class="icon-font">
          <i
            class="el-icon-success text-success"
            v-if="scope.row.isCurrent"
          ></i>
          <i
            class="el-icon-warning text-warning"
            v-if="!scope.row.isCurrent"
          ></i>
        </div>
      </template>
    </avue-crud>
    <el-dialog
      :visible.sync="dialogVisible"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="flex jc-al-c">
        <span class="mg-r-20 titl-font">提交进度</span>
        <el-select
          v-model="curRow.currentLink"
          placeholder="请选择"
          @change="operationMethods"
        >
          <el-option
            label="进入人工预处理环境"
            :value="2"
          />
          <el-option
            label="已解决"
            :value="3"
          />
        </el-select>
      </div>
      <div class="flex jc-al-c" v-show="operation.show">
        <span class="mg-r-20" style="font-size: 25px">预计处理截止时间</span>
        <el-date-picker
          v-model="operation.manageTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        ></el-date-picker>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="SubmissionProgress"
        >确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { queryBusinessUserOpinionList, manageUserOperationStatus, queryBusinessUserOpinionListAll } from "@/api/news/news.js";
import { mapGetters } from "vuex";
export default {
  data () {
    return {
      activeIndex: "1",
      curRow: {},
      dialogVisible: false,
      operation:{
        manageTime: '',
        show: false
      },
      page: {
        total: 1,
        currentPage: 1,
        pageSize: 10
      },
      showLoading: false,
      data: [],
      option: {
        border: true,
        align: 'center',
        menuAlign: 'center',
        menu: false,
        column: [
          {
            label: '时间',
            prop: 'createTime',
          },
          {
            label: '剩余反馈用户时间(分钟)',
            prop: 'timeRemaining'
          },
          {
            label: '项目',
            prop: 'projectName',
          },
          {
            label: '合同段',
            prop: 'contractName',
          },
          {
            label: '消息类型',
            prop: 'problemType',
          },
          {
            label: '问题描述',
            prop: 'opinionContent',
          },
          {
            label: '图片',
            prop: 'imageUrl',
            slot: true,
          },
          {
            label: '操作',
            prop: 'cz',
            slot: true,
          },
          {
            label: '处理状态',
            prop: 'isCurrent',
            slot: true,
          },
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    permissionList () {
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false
      };
    },
  },
  created () {
    this.init();
    //console.log(this.userInfo)
  },
  methods: {
    init () {
      this.queryBusinessUserOpinionList()
    },
    operationMethods(){
      this.operation.show = this.curRow.currentLink == 2;
      if(!this.operation.show){
        this.operation.manageTime = '';
      }
    },
    openPreview (imageUrl, index) {
      let imageUrls = []
      imageUrl.forEach(val => {
        imageUrls.push({ url: val })
      });
      this.$ImagePreview(imageUrls, index, {
        closeOnClickModal: true,
        // beforeClose:()=>{
        //   this.$message.success('关闭回调')
        // }
      });
    },
    changeProgres (row) {
      this.curRow = { ...row }
      this.operation.show = this.curRow.currentLink == 2;
      this.dialogVisible = true;
    },
    handleSelect (key) {//消息分类菜单激活回调
      this.activeIndex = key
    },
    async SubmissionProgress () {//提交进度弹框保存按钮事件
      await this.manageUserOperationStatus({
        currentLinkId: this.curRow.currentLinkId,
        currentLink: this.curRow.currentLink,
        newNumber: this.curRow.newNumber,
        userOpinionId: this.curRow.userOpinionId,
        manageTime: this.operation.manageTime
      })
    },
    //#region 分页
    currentChange (val) {
      this.page.currentPage = val
      if (this.activeIndex == 1) {
        this.queryBusinessUserOpinionList()
      } else {
        this.queryBusinessUserOpinionListAll()
      }
    },
    sizeChange (val) {
      this.page.pageSize = val
      if (this.activeIndex == 1) {
        this.queryBusinessUserOpinionList()
      } else {
        this.queryBusinessUserOpinionListAll()
      }
    },
    async queryBusinessUserOpinionList () {//获取分配给当前登录用户的工单记录
      const { data: res } = await queryBusinessUserOpinionList({
        current: this.page.currentPage,
        size: this.page.pageSize
      })
      console.log(res);
      if (res.code == 200) {
        this.data = res.data.records
        this.page.total = res.data.total
      }
    },
    async manageUserOperationStatus (da) {//业务人员提交环节操作
      const { data: res } = await manageUserOperationStatus(da)
      if (res.code == 200) {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '提交成功!'
        })
        //重新刷新列表
        await this.queryBusinessUserOpinionList();
      }
    },
    async queryBusinessUserOpinionListAll () {//所有工单处理列表
      const { data: res } = await queryBusinessUserOpinionListAll({
        current: this.page.currentPage,
        size: this.page.pageSize
      })
      console.log(res);
      if (res.code == 200) {
        this.data = res.data.records
        this.page.total = res.data.total
      }
    }
    //#endregion
  },
  watch: {
    'activeIndex' (value) {
      this.page.currentPage = 1
      this.page.pageSize = 10
      if (value == 1) {
        this.queryBusinessUserOpinionList()
      } else {
        this.queryBusinessUserOpinionListAll()
      }
    }
  }
};
</script>

<style scoped lang="scss">
.icon-font[class^="icon-"] {
  font-size: 26px !important;
}
.titl-font {
  font-size: 32px;
}
</style>