<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
|
<el-form-item label="项目名称" prop="projectName">
|
<el-input v-model="queryParams.projectName" placeholder="支持模糊查询" clearable @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">
|
<el-option label="待审核" value="PendingReview" />
|
<el-option label="已通过" value="Approved" />
|
<el-option label="已驳回" value="Reject" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间范围">
|
<el-date-picker
|
v-model="datetimerange"
|
type="datetimerange"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="handleDateChange"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
</el-col>
|
</el-row>
|
|
<el-table v-loading="loading" :data="list">
|
<el-table-column label="编号" align="center" prop="id" width="100" />
|
<el-table-column label="项目" align="center" prop="projectName" :show-overflow-tooltip="true" min-width="220" />
|
<el-table-column label="用户" align="center" prop="userName" :show-overflow-tooltip="true" min-width="260" />
|
<el-table-column label="时间" align="center" prop="gmtCreate" width="180">
|
<template slot-scope="scope">
|
<span>{{ scope.row.gmtCreate }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" align="center" prop="status" width="120">
|
<template slot-scope="scope">
|
<el-tag :type="statusTagType(scope.row)">{{ statusText(scope.row) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
|
<el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleApprove(scope.row)" :disabled="statusText(scope.row) !== '待审核'">通过</el-button>
|
<el-button size="mini" type="text" icon="el-icon-close" @click="handleReject(scope.row)" :disabled="statusText(scope.row) !== '待审核'">驳回</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="queryParams.currentPage"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
|
<el-dialog :title="title" :visible.sync="detailOpen" width="700px" append-to-body>
|
<el-form ref="detailForm" :model="detail" label-width="80px" v-loading="detailLoading">
|
<el-form-item label="项目:">
|
<el-input v-model="detail.projectName" readonly />
|
</el-form-item>
|
<el-form-item label="上报人:">
|
<el-input v-model="detail.userName" readonly />
|
</el-form-item>
|
<el-form-item label="内容:">
|
<el-input v-model="detail.content" type="textarea" readonly />
|
</el-form-item>
|
<el-form-item label="备注:">
|
<el-input v-model="detail.remake" readonly />
|
</el-form-item>
|
|
<el-form-item label="时间:">
|
<el-input v-model="detail.gmtCreate" readonly />
|
</el-form-item>
|
|
<el-form-item label="附件:">
|
<div class="file-upload-view-only">
|
<FileUpload v-model="detail.fileUrl" :isShowTip="false" />
|
</div>
|
</el-form-item>
|
</el-form>
|
<span slot="footer">
|
<el-button @click="detailOpen=false">关 闭</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { reportPage,review } from "@/api/report/report";
|
|
export default {
|
name: "ReportList",
|
data() {
|
return {
|
loading: false,
|
showSearch: true,
|
total: 0,
|
list: [],
|
datetimerange: [],
|
queryParams: {
|
currentPage: 1,
|
pageSize: 10,
|
projectName:"",
|
status:"",
|
startDate:null,
|
endDate:null
|
},
|
detailOpen: false,
|
title:"",
|
detailLoading: false,
|
detail: {
|
id: "",
|
projectName: "",
|
content: "",
|
gmtCreate: "",
|
fileUrl: [],
|
remake:"",
|
status:"",
|
},
|
baseUrl: process.env.VUE_APP_BASE_API
|
}
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
getList() {
|
this.loading = true;
|
reportPage(this.queryParams).then(res => {
|
this.loading = false;
|
if (res.code === 200){
|
this.list = res.data;
|
this.total = res.total;
|
}
|
}).catch(() => {
|
this.loading = false;
|
})
|
},
|
handleQuery() {
|
this.queryParams.currentPage = 1;
|
this.getList();
|
},
|
resetQuery() {
|
this.queryParams = {
|
currentPage: 1,
|
pageSize: 10,
|
projectName: "",
|
status: "",
|
startDate: null,
|
endDate: null
|
};
|
this.datetimerange = [];
|
this.getList();
|
},
|
handleDateChange(val) {
|
if (val && val.length === 2) {
|
this.queryParams.startDate = val[0];
|
this.queryParams.endDate = val[1];
|
} else {
|
this.queryParams.startDate = null;
|
this.queryParams.endDate = null;
|
}
|
this.handleQuery();
|
},
|
statusText(row) {
|
const s = row.status;
|
if (s === 'Approved') return '已通过';
|
if (s === 'Reject') return '已驳回';
|
return '待审核';
|
},
|
statusTagType(row) {
|
const t = this.statusText(row);
|
if (t === '已通过') return 'success';
|
if (t === '已驳回') return 'danger';
|
return 'warning';
|
},
|
handleView(row) {
|
const id = row.id;
|
// 先用行数据展示，提升响应速度
|
this.detailLoading = true;
|
this.detailOpen = true;
|
this.title = "查看";
|
this.detailLoading = false;
|
this.detail.id = row.id;
|
this.detail.content = row.content;
|
this.detail.gmtCreate = row.gmtCreate;
|
this.detail.projectName = row.projectName;
|
this.detail.fileUrl = row.fileUrlArray;
|
this.detail.userName = row.userName;
|
this.detail.remake = row.remake;
|
|
|
},
|
handleApprove(row) {
|
this.$prompt('请输入备注', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputPattern: /.+/,
|
inputErrorMessage: '请输入备注'
|
}).then(({ value}) =>{
|
const params ={
|
id:row.id,
|
status:"Approved",
|
remake:value
|
}
|
review(params).then(res => {
|
this.$message.success('已通过');
|
this.getList();
|
})
|
})
|
|
|
},
|
handleReject(row) {
|
this.$prompt('请输入驳回原因', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputPattern: /.+/,
|
inputErrorMessage: '请输入原因'
|
}).then(({ value }) => {
|
const params ={
|
id:row.id,
|
status:"Reject",
|
remake:value
|
}
|
review(params).then(() => {
|
this.$message.success('已驳回');
|
this.getList();
|
})
|
}).catch(() => {})
|
},
|
fileHref(f) {
|
if (typeof f === 'string') return this.baseUrl + f;
|
if (f && f.url) return this.baseUrl + f.url;
|
return '';
|
},
|
fileName(f) {
|
const n = typeof f === 'string' ? f : f.name || f.url || '';
|
const idx = n.lastIndexOf('/');
|
return idx > -1 ? n.slice(idx + 1) : n;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/* 样式穿透：覆盖组件内的上传按钮和删除按钮 */
|
.file-upload-view-only >>> .upload-file-uploader {
|
display: none; /* 隐藏上传按钮区域（包含上传按钮和提示文字） */
|
}
|
|
.file-upload-view-only >>> .ele-upload-list__item-content-action {
|
display: none; /* 隐藏删除按钮 */
|
}
|
.mb8 {
|
margin-bottom: 8px;
|
}
|
</style>
|
