<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="reportTitle"> <el-input v-model="queryParams.param.reportTitle" placeholder="请输入" clearable @keyup.enter.native="handleQuery" /> </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"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" >新增</el-button > </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" >删除</el-button > </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" ></right-toolbar> </el-row> <el-table v-loading="loading" :data="listData" @selection-change="handleSelectionChange" max-height="600" > <el-table-column type="selection" width="55" align="center" /> <el-table-column fixed label="标题" align="center" prop="reportTitle" min-width="100" /> <el-table-column fixed label="类型" align="center" prop="typeName" show-overflow-tooltip min-width="100" > </el-table-column> <el-table-column label="单位" align="center" prop="tenantIdList" min-width="250" show-overflow-tooltip > <template slot-scope="scope"> <!-- 通过id列表找到tenantsData中匹配的数据并替换为中文,数据后面添加逗号 --> <template v-for="(item, index) in scope.row.tenantIdList"> <template v-if="tenantsData.some((tenant) => tenant.id === item)"> {{ tenantsData.find((tenant) => tenant.id === item).name }}{{ index < scope.row.tenantIdList.length - 1 ? "," : "" }} </template> </template> </template> </el-table-column> <el-table-column fixed label="开始时间" align="center" prop="timeRangeStart" show-overflow-tooltip min-width="100" > <template slot-scope="scope"> <span> {{ parseTime(scope.row.timeRangeStart, "{y}-{m}-{d}") }} </span> </template> </el-table-column> <el-table-column fixed label="结束时间" align="center" prop="timeRangeEnd" show-overflow-tooltip min-width="100" > <template slot-scope="scope"> <span> {{ parseTime(scope.row.timeRangeEnd, "{y}-{m}-{d}") }} </span> </template> </el-table-column> <el-table-column label="状态" align="center" prop="status" show-overflow-tooltip min-width="100" > <template slot-scope="scope"> <span v-if="scope.row.status === 0"> 未开始 </span> <span v-if="scope.row.status === 1"> 进行中 </span> <span v-if="scope.row.status === 2"> 已结束 </span> </template> </el-table-column> <!-- <el-table-column label="开启/结束" align="center" prop="typeName" show-overflow-tooltip min-width="100" > <template slot-scope="scope"> <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" ></el-switch> </template> </el-table-column> --> <el-table-column label="创建人/创建时间" align="center" min-width="140"> <template slot-scope="scope"> <div>{{ scope.row.createBy }}</div> <span> {{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }} </span> </template> </el-table-column> <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="150" > <template slot-scope="scope"> <el-button v-if="scope.row.status === 0 || scope.row.status === 2" size="mini" type="text" icon="el-icon-folder-checked" @click="handleSwitch(scope.row, 1)" >开启</el-button > <el-button v-if="scope.row.status === 1" size="mini" type="text" icon="el-icon-folder-delete" @click="handleSwitch(scope.row, 2)" >结束</el-button > <el-button size="mini" type="text" icon="el-icon-document" @click="handleDetails(scope.row)" >上报详情</el-button > <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownload(scope.row)" >上报汇总表</el-button > <el-button :disabled="scope.row.status === 1" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" >修改</el-button > <el-button :disabled="scope.row.status === 1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" >删除</el-button > </template> </el-table-column> </el-table> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改公告对话框 --> <el-dialog class="popup" :title="title" :visible.sync="open" width="780px" append-to-body > <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="formStep" > <el-form-item label="标题" prop="reportTitle"> <el-input v-model="form.reportTitle" placeholder="请输入" /> </el-form-item> <el-form-item label="上报类型" prop="reportType"> <el-select v-model="form.reportType" placeholder="请选择" @change="handleTypeChage" > <el-option v-for="item in reporTypeList" :key="item.id" :label="item.typeName" :value="item.id" > </el-option> </el-select> </el-form-item> <el-form-item label="单位" prop="tenantIdList"> <el-select v-model="form.tenantIdList" multiple placeholder="请选择"> <el-option v-for="item in tenantsData" :key="item.id" :label="item.name" :value="item.id" > </el-option> </el-select> </el-form-item> <el-form-item label="时间范围" prop="time"> <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @input="$forceUpdate()" > </el-date-picker> </el-form-item> <el-form-item label="状态" prop="status" v-if="!form.id"> <el-radio-group v-model="form.status"> <el-radio :label="0">未开始</el-radio> <el-radio :label="1">进行中</el-radio> <el-radio :label="2">已结束</el-radio> </el-radio-group> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { managerQuery, managerAdd, managerUpd, managerDel, reportList, reportDown, } from "@/api/report"; import { tenantsList } from "@/api/member"; export default { name: "Notice", data() { return { reporTypeList: [], queryParams: { pageNum: 1, pageSize: 10, param: { reportTitle: "", }, }, listData: [], title: "", open: false, total: 0, form: {}, loading: false, showSearch: true, multiple: false, // 表单校验 rules: { reportTitle: [ { required: true, message: "标题不能为空", trigger: "blur", }, ], reportType: [ { required: true, message: "类型不能为空", trigger: "blur", }, ], time: [ { required: true, message: "时间范围不能为空", trigger: "change", }, ], tenantIdList: [ { required: true, message: "单位不能为空", trigger: "change", }, ], // timeRangeStart: [{ // required: true, // message: "开始时间不能为空", // trigger: "blur", // }], // timeRangeEnd: [{ // required: true, // message: "结束时间不能为空", // trigger: "blur" // }], }, tenantsData: [], qzUrl: process.env.VUE_APP_API_QZURL, // 二维码路径 }; }, created() { this.getList(); this.getReportType(); this.getTenantsList(); }, methods: { handleDownload(row) { reportDown({ managementId: row.id, }).then((res) => { if (res.data) { window.open(this.qzUrl + res.data); } else { this.$modal.msgError("暂无上报汇总表"); } }); }, // 上报详情 handleDetails(row) { this.$router.push({ path: "/medicalFile/index", query: { managementId: row.id }, }); }, // 获取上报类型切换处理 handleTypeChage() { // form.reportType reporTypeList 找到对应的id 然后获取到tenantIdList let reportType = this.form.reportType; let tenantIdList = this.reporTypeList.find( (item) => item.id == reportType ).tenantIdList; this.form.tenantIdList = tenantIdList; }, // 获取上报类型 getReportType() { reportList({ pageNum: -1, param: {}, }).then((res) => { this.reporTypeList = res.data.list; }); }, /** 查询公告列表 */ getTenantsList() { tenantsList({ pageNum: -1, param: {}, }).then((res) => { this.tenantsData = res.data.list; }); }, /** 查询公告列表 */ getList() { this.loading = true; managerQuery(this.queryParams).then((res) => { this.listData = res.data.list; this.total = res.data.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { reportTitle: "", reportType: "", time: [], timeRangeStart: "", timeRangeEnd: "", tenantIdList: [], status: 0, }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.queryParams.param = { reportTitle: "", }; this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map((item) => item.id); this.single = selection.length != 1; this.multiple = !selection.length; }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = "新增上报"; }, /** 修改按钮操作 */ handleSwitch(row, status) { this.form = JSON.parse(JSON.stringify(row)); this.form.status = status; managerUpd(this.form).then((response) => { this.$modal.msgSuccess("操作成功"); this.getList(); }); }, /** 修改按钮操作 */ handleUpdate(row) { this.open = true; this.title = "修改上报"; this.form = JSON.parse(JSON.stringify(row)); let timeRangeStart = this.parseTime( this.form.timeRangeStart, "{y}-{m}-{d}" ); let timeRangeEnd = this.parseTime(this.form.timeRangeEnd, "{y}-{m}-{d}"); this.form.time = []; this.form.time[0] = timeRangeStart; this.form.time[1] = timeRangeEnd; }, /** 诊疗档案 */ submitForm: function () { this.$refs["form"].validate((valid) => { if (valid) { let data = JSON.parse(JSON.stringify(this.form)); let time = data.time; data.timeRangeStart = data.time[0]; data.timeRangeEnd = data.time[1]; if (data.id != undefined) { managerUpd(data).then((response) => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { managerAdd(data).then((response) => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const idList = row.id ? [row.id] : this.ids; this.$modal .confirm("是否确认删除当前选择的数据?") .then(function () { return managerDel({ idList: idList, }); }) .then(() => { this.$modal.msgSuccess("删除成功"); this.getList(); }) .catch(() => {}); }, }, }; </script> <style scoped src="@/assets/styles/common.css"></style> <style scoped> .div-title1 { font-size: 22px; font-weight: bold; margin-bottom: 10px; } .div-title2 { font-size: 20px; font-weight: bold; margin-bottom: 10px; } .div-title3 { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .span-but { display: inline-block; border-radius: 4px; border: 1px solid #dcdfe6; line-height: 32px; padding: 0 15px; margin: 5px; } .span-but-active { border: 1px solid #1890ff; } .human-body { display: flex; flex-wrap: wrap; } .human-body >>> .el-form-item { width: 49%; margin-right: 2%; } .human-body >>> .el-form-item:nth-of-type(2n) { margin-right: 0; } .formStep1 >>> .el-form-item__label { } .form-item-zd { width: 100%; text-align: left; } .form-item-age { display: flex; align-items: center; } .form-item-age span { margin: 0 10px; } .form-item-age >>> .el-input { width: 100px; } >>> .el-drawer.rtl { width: 50% !important; } </style>