cc/web/src/view/problemInfo/problemInfo.vue

<template>
  <div>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="站点类型">
          <el-select v-model="searchInfo.siteType" clearable placeholder="请选择">
            <el-option v-for="item in this.siteType" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="searchInfo.status" clearable placeholder="请选择">
            <el-option label="已处理" value="0"></el-option>
            <el-option label="未处理" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button class="excel-btn" size="small" type="primary" icon="el-icon-download" @click="handleExcelExport()">导出</el-button>
          <el-popover v-model:visible="deleteVisible" placement="top" width="160">
            <p>确定要删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
              <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
            </div>
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        ref="multipleTable"
        border
        stripe
        style="width: 100%"
        tooltip-effect="dark"
        :data="tableData"
        @selection-change="handleSelectionChange"
    >
      <el-table-column label="日期" width="180">
        <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
      </el-table-column>
      <el-table-column label="发布人" prop="oper" width="120"/>
      <el-table-column label="站点" prop="siteName" width="220"/>
      <el-table-column label="站点类型" prop="siteType" width="120"/>
      <el-table-column label="处理状态" prop="status" width="120">
        <template #default="scope">
          <el-tag v-show="scope.row.status == 'Untreated'" type="warning">未处理</el-tag>
          <el-tag v-show="scope.row.status == 'Processed'" type="success">已处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="责任部门" prop="department" width="120"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" class="table-button"
                     @click="updateProblemInfo(scope.row)">查看详情
          </el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[10, 30, 50, 100]"
        :style="{float:'right',padding:'20px'}"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
    />
    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="问题详情">
      <el-form :model="formData" label-position="right" label-width="80px">
        <el-card class="box-card">
          <el-descriptions title="基本信息" border :column="2">
            <el-descriptions-item label="发布人">{{ formData.oper }}</el-descriptions-item>
            <el-descriptions-item label="站点名称">{{ formData.siteName }}</el-descriptions-item>
            <el-descriptions-item label="站点位置">{{ formData.position }}</el-descriptions-item>
            <el-descriptions-item label="站点类型">{{ formData.siteType }}</el-descriptions-item>
            <el-descriptions-item label="处理状态">
              <el-tag v-show="formData.status == 'Untreated'" type="warning">未处理</el-tag>
              <el-tag v-show="formData.status == 'Processed'" type="success">已处理</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="责任部门">{{ formData.department }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="box-card">
          <el-descriptions title="问题列表" :column="1" direction="vertical">
            <el-descriptions-item v-for="item in formData.matter.split('|')">
              {{ this.matterList[item] != undefined ? this.matterList[item].label : '' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="box-card">
          <el-descriptions title="问题图片/视频" direction="vertical">
            <el-descriptions-item label="问题图片(点击图片查看更多)">
              <el-image
                  style="width: 260px; height: 240px"
                  :src="(formData.imgList.length>0?formData.imgList[0]:'')"
                  :preview-src-list="formData.imgList">
              </el-image>
            </el-descriptions-item>
            <el-descriptions-item label="问题视频">
              <span v-show="formData.video.length<1">无视频</span>
              <video style="object-fit:fill" controls width="400" height="240" v-show="formData.video.length>0" :src="formData.video">
                您的浏览器不支持Video标签。
              </video>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="box-card" v-show="formData.status=='Processed'">
          <el-descriptions title="处理结果" :column="1" border direction="vertical">
            <el-descriptions-item label="处理人">{{ formData.handler }}</el-descriptions-item>
            <el-descriptions-item label="处理内容">{{ formData.handText }}</el-descriptions-item>
            <el-descriptions-item label="处理图片(点击图片查看更多)">
              <el-image
                  style="width: 260px; height: 240px"
                  :src="(formData.handImgList.length>0?formData.handImgList[0]:'')"
                  :preview-src-list="formData.handImgList">
              </el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  createProblemInfo,
  deleteProblemInfo,
  deleteProblemInfoByIds,
  updateProblemInfo,
  findProblemInfo,
  getProblemInfoList,
  exportExcel
} from '@/api/problemInfo' //  此处请自行替换地址
import infoList from '@/mixins/infoList'
import { getDict } from '@/utils/dictionary'

export default {
  name: 'ProblemInfo',
  mixins: [infoList],
  data() {
    return {
      listApi: getProblemInfoList,
      dialogFormVisible: false,
      type: '',
      siteType: [],
      deleteVisible: false,
      multipleSelection: [],
      matterList: [],
      formData: {
        oper: 0,
        handler: 0,
        imgs: '',
        imgList: [],
        handImgList: [],
        video: '',
        siteId: 0,
        position: '',
        matter: '',
        siteType: '',
        status: '',
        handImgs: '',
        handText: '',
        department: '',
      }
    }
  },
  async created() {
    this.siteType = await getDict('site_type')
    await this.getTableData()
  },
  methods: {
    handleExcelExport() {
      exportExcel(this.formData)
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getTableData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteProblemInfo(row)
      })
    },
    async onDelete() {
      const ids = []
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      this.multipleSelection &&
      this.multipleSelection.map(item => {
        ids.push(item.ID)
      })
      const res = await deleteProblemInfoByIds({ids})
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        if (this.tableData.length === ids.length && this.page > 1) {
          this.page--
        }
        this.deleteVisible = false
        this.getTableData()
      }
    },
    async updateProblemInfo(row) {
      const res = await findProblemInfo({ID: row.ID})
      this.type = 'update'
      if (res.code === 0) {
        this.formData = res.data.reproblemInfo
        if (this.formData.imgs.length > 0) {
          this.formData.imgList = this.formData.imgs.split('|')
        } else {
          this.formData.imgList = []
        }
        if (this.formData.handImgs.length > 0) {
          this.formData.handImgList = this.formData.handImgs.split('|')
        } else {
          this.formData.handImgList = []
        }
        this.matterList = await getDict('site_' + this.formData.siteId)
        this.dialogFormVisible = true
      }
    },
    closeDialog() {
      const video = document.getElementById('video')
      if (video != undefined) {
        video.pause()
      }
      this.dialogFormVisible = false
      this.formData = {
        oper: 0,
        handler: 0,
        imgs: '',
        video: '',
        siteId: 0,
        imgList: [],
        position: '',
        matter: '',
        handImgList: [],
        siteType: '',
        status: '',
        handImgs: '',
        handText: '',
        department: '',
      }
    },
    async deleteProblemInfo(row) {
      const res = await deleteProblemInfo({ID: row.ID})
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      let res
      switch (this.type) {
        case 'create':
          res = await createProblemInfo(this.formData)
          break
        case 'update':
          res = await updateProblemInfo(this.formData)
          break
        default:
          res = await createProblemInfo(this.formData)
          break
      }
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '创建/更改成功'
        })
        this.closeDialog()
        this.getTableData()
      }
    },
    openDialog() {
      this.type = 'create'
      this.dialogFormVisible = true
    }
  },
}
</script>

<style>
.box-card {
  margin-bottom: 10px;
}
</style>