301 lines
10 KiB
Vue
301 lines
10 KiB
Vue
<template>
|
|
<div class="ipad-container" v-loading="loading">
|
|
|
|
<div class="top-bar">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
@click="handleAdd"
|
|
v-has-permi="['yh:report:add']"
|
|
>新增</el-button>
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
|
</div>
|
|
|
|
<div class="content" v-infinite-scroll="loadList" :infinite-scroll-disabled="loading || noMore">
|
|
<el-row :gutter="8" >
|
|
<el-col :md="12" :sm="24" v-for="report of reportList" :key="report.reportId">
|
|
<el-card class="card-box">
|
|
<template #header>
|
|
<el-row class="card-header">
|
|
<el-col>
|
|
{{report.deptName}} {{report.reportDate}} 日报表
|
|
</el-col>
|
|
<el-col class="card-operator">
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-view"
|
|
@click="handleView(report)"
|
|
v-has-permi="['yh:report:query']"
|
|
>详情</el-button>
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-refresh"
|
|
@click="handleCancel(report)"
|
|
v-has-permi="['yh:report:cancel']"
|
|
v-show="ReportStatus.canCancel(report.status)"
|
|
>取消提交</el-button>
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-check"
|
|
@click="handleSubmit(report)"
|
|
v-has-permi="['yh:report:submit']"
|
|
v-show="ReportStatus.canSubmit(report.status)"
|
|
>提交</el-button>
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
class="card-btn"
|
|
@click="handleUpdate(report)"
|
|
v-has-permi="['yh:report:edit']"
|
|
v-show="ReportStatus.canEdit(report.status)"
|
|
>编辑</el-button>
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
class="card-btn"
|
|
@click="handleDelete(report)"
|
|
v-has-permi="['yh:report:remove']"
|
|
v-show="ReportStatus.canDel(report.status)"
|
|
>删除</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<el-descriptions :column="2">
|
|
<el-descriptions-item v-for="column of columns" v-if="column.visible" :key="column.key" :label="column.label">
|
|
<template v-if="column.key === 'status'">
|
|
<dict-tag :options="dict.type.report_status" :value="report[column.key]" size="small"/>
|
|
</template>
|
|
<template v-else-if="column.key === 'totalAmount'">
|
|
{{report.totalAmount | dv}} 元
|
|
</template>
|
|
<template v-else>
|
|
{{report[column.key] | dv}}
|
|
</template>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-divider v-if="noMore">没有更多了</el-divider>
|
|
</div>
|
|
|
|
<el-backtop target=".ipad-container .content"/>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {$showColumns} from "@/utils/mixins";
|
|
import {cancelReport, delReport, listReport, submitReport} from "@/api/yh/report";
|
|
import {ReportStatus} from "@/utils/constants";
|
|
|
|
// 默认排序字段
|
|
const defaultSort = {
|
|
prop: "createTime",
|
|
order: "descending"
|
|
}
|
|
export default {
|
|
name: "IpadReport",
|
|
computed: {
|
|
ReportStatus() {
|
|
return ReportStatus
|
|
}
|
|
},
|
|
mixins: [$showColumns],
|
|
dicts: ['report_status'],
|
|
data() {
|
|
return {
|
|
row: {},
|
|
// 字段列表
|
|
columns: [
|
|
{key: 'reportId', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
|
{key: 'deptName', visible: true, label: '部门', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
|
{key: 'reportDate', visible: true, label: '报表日期', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
|
{key: 'totalAmount', visible: true, label: '总金额', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
|
{key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
|
{key: 'createBy', visible: true, label: '创建人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
|
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "180"},
|
|
{key: 'updateBy', visible: true, label: '更新人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
|
{key: 'updateTime', visible: true, label: '更新时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "180"},
|
|
{key: 'verifyBy', visible: true, label: '审核人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
|
{key: 'verifyTime', visible: true, label: '审核时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "180"},
|
|
{key: 'remark', visible: true, label: '备注', minWidth: null, sortable: false, overflow: false, align: 'center', width: "180"},
|
|
],
|
|
// 排序方式
|
|
orderSorts: ['ascending', 'descending', null],
|
|
// 遮罩层
|
|
loading: false,
|
|
// 选中数组
|
|
ids: [],
|
|
// 非单个禁用
|
|
single: true,
|
|
// 非多个禁用
|
|
multiple: true,
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
// 总条数
|
|
total: 0,
|
|
// 报表表格数据
|
|
reportList: [],
|
|
// 弹出层标题
|
|
title: "",
|
|
// 是否显示弹出层
|
|
open: false,
|
|
defaultSort,
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNum: 0,
|
|
pageSize: 10,
|
|
orderByColumn: defaultSort.prop,
|
|
isAsc: defaultSort.order,
|
|
reportId: null,
|
|
deptId: null,
|
|
status: null,
|
|
createId: null,
|
|
createBy: null,
|
|
verifyTime: null,
|
|
verifyId: null,
|
|
verifyBy: null,
|
|
updateId: null,
|
|
updateBy: null
|
|
},
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {
|
|
deptId: [
|
|
{ required: true, message: "部门ID不能为空", trigger: "blur" }
|
|
],
|
|
status: [
|
|
{ required: true, message: "状态不能为空", trigger: "change" }
|
|
],
|
|
createTime: [
|
|
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
|
],
|
|
createBy: [
|
|
{ required: true, message: "创建人名称不能为空", trigger: "blur" }
|
|
],
|
|
},
|
|
noMore: false,
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
// 加载更多
|
|
loadList() {
|
|
if (this.noMore || this.loading) {
|
|
return;
|
|
}
|
|
this.loading = true;
|
|
this.queryParams.pageNum ++;
|
|
listReport(this.queryParams).then(response => {
|
|
this.reportList.push(...response.rows) ;
|
|
this.total = response.total;
|
|
if (this.total <= this.reportList.length) {
|
|
this.noMore = true;
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
})
|
|
},
|
|
/** 当排序按钮被点击时触发 **/
|
|
onSortChange(column) {
|
|
if (column.order == null) {
|
|
this.queryParams.orderByColumn = defaultSort.prop;
|
|
this.queryParams.isAsc = defaultSort.order;
|
|
} else {
|
|
this.queryParams.orderByColumn = column.prop;
|
|
this.queryParams.isAsc = column.order;
|
|
}
|
|
this.getList();
|
|
},
|
|
/** 查询报表列表 */
|
|
getList() {
|
|
this.queryParams.pageNum = 0;
|
|
this.reportList = [];
|
|
this.total = 0;
|
|
this.noMore = false;
|
|
this.loadList();
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1;
|
|
this.getList();
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.handleQuery();
|
|
},
|
|
// 多选框选中数据
|
|
handleSelectionChange(selection) {
|
|
this.ids = selection.map(item => item.reportId)
|
|
this.single = selection.length!==1
|
|
this.multiple = !selection.length
|
|
},
|
|
/** 新增按钮操作 */
|
|
handleAdd() {
|
|
this.$router.push("/add/report")
|
|
},
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row) {
|
|
this.$router.push(`/edit/report/${row.reportId}`)
|
|
},
|
|
// 提交报表
|
|
handleSubmit(row) {
|
|
this.$confirm('确定提交吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
submitReport(row.reportId).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message.success("提交成功");
|
|
this.getList();
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 取消审核
|
|
handleCancel(row) {
|
|
this.$confirm('确定取消吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
cancelReport(row.reportId).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message.success("取消成功");
|
|
this.getList();
|
|
}
|
|
})
|
|
})
|
|
},
|
|
handleView(row) {
|
|
this.$router.push(`/view/report/${row.reportId}`)
|
|
},
|
|
/** 删除按钮操作 */
|
|
handleDelete(row) {
|
|
const reportIds = row.reportId || this.ids;
|
|
this.$modal.confirm('是否确认删除报表编号为"' + reportIds + '"的数据项？').then(function() {
|
|
return delReport(reportIds);
|
|
}).then(() => {
|
|
this.getList();
|
|
this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {});
|
|
},
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
this.download('yh/report/export', {
|
|
...this.queryParams
|
|
}, `report_${new Date().getTime()}.xlsx`)
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|