<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>