上报管理添加单位、状态，支持手动修改开启关闭状态

acupuncture-后台/src/views/report/manage.vue

@@ -1,60 +1,158 @@
 <template>
   <div class="app-container">
-		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+    <el-form
-			label-width="80px">
+      :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
+        <el-input
-					@keyup.enter.native="handleQuery" />
+          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
-				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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-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"
+        <el-button
-					@click="handleDelete">删除</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>
+      <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
+      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
-			<el-table-column fixed label="类型" align="center" prop="typeName" show-overflow-tooltip min-width="100">
+        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 fixed label="开始时间" align="center" prop="timeRangeStart" show-overflow-tooltip
+      <el-table-column
-				min-width="100">
+        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
+      <el-table-column
-				min-width="100">
+        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">
+      <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">
+      <!-- <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>
+          <el-switch
+            v-model="scope.row.status"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+          ></el-switch>
         </template>
-			</el-table-column>
+      </el-table-column> -->
       <el-table-column label="创建人/创建时间" align="center" min-width="140">
         <template slot-scope="scope">
           <div>{{ scope.row.createBy }}</div>
@@ -64,44 +162,120 @@
         </template>
       </el-table-column>
 
-			<el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="200">
+      <el-table-column
+        fixed="right"
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+        width="200"
+      >
         <template slot-scope="scope">
-					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+          <el-button
-						:disabled="scope.row.id == 1 || scope.row.id == 2">修改</el-button>
+            v-if="scope.row.status === 0 || scope.row.status === 2"
-					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            size="mini"
-						:disabled="scope.row.id == 1 || scope.row.id == 2">删除</el-button>
+            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-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            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"
+    <pagination
-			:limit.sync="queryParams.pageSize" @pagination="getList" />
+      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-dialog
-			<el-form ref="form" :model="form" :rules="rules" label-width="140px" class="formStep">
+      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="请选择">
+          <el-select
-						<el-option v-for="item in reporTypeList" :key="item.id" :label="item.typeName" :value="item.id">
+            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.timeRangeStart"
+          <el-date-picker
-						type="date" placeholder="选择日期">
+            format="yyyy-MM-dd"
-					</el-date-picker> -->
+            value-format="yyyy-MM-dd"
-					<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="form.time" type="daterange"
+            v-model="form.time"
-						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @input="$forceUpdate()">
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @input="$forceUpdate()"
+          >
           </el-date-picker>
         </el-form-item>
-				<!-- <el-form-item label="结束时间" prop="timeRangeEnd">
+        <el-form-item label="状态" prop="status" v-if="!form.id">
-					<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="form.timeRangeEnd" type="date"
+          <el-radio-group v-model="form.status">
-						placeholder="选择日期">
+            <el-radio :label="0">未开始</el-radio>
-					</el-date-picker>
+            <el-radio :label="1">进行中</el-radio>
-				</el-form-item> -->
+            <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>
@@ -117,20 +291,23 @@
   managerAdd,
   managerUpd,
   managerDel,
-		reportList
+  reportList,
 } from "@/api/report";
+import { tenantsList } from "@/api/member";
 export default {
   name: "Notice",
   data() {
     return {
       reporTypeList: [],
       queryParams: {
+        pageNum: 1,
+        pageSize: 10,
         param: {
           reportTitle: "",
-					}
+        },
       },
       listData: [],
-				title: '',
+      title: "",
       open: false,
       total: 0,
       form: {},
@@ -139,21 +316,34 @@
       multiple: false,
       // 表单校验
       rules: {
-					reportTitle: [{
+        reportTitle: [
+          {
             required: true,
             message: "标题不能为空",
             trigger: "blur",
-					}],
+          },
-					reportType: [{
+        ],
+        reportType: [
+          {
             required: true,
             message: "类型不能为空",
             trigger: "blur",
-					}],
+          },
-					time: [{
+        ],
+        time: [
+          {
             required: true,
             message: "时间范围不能为空",
             trigger: "change",
-					}]
+          },
+        ],
+        tenantIdList: [
+          {
+            required: true,
+            message: "单位不能为空",
+            trigger: "change",
+          },
+        ],
         // timeRangeStart: [{
         // 	required: true,
         // 	message: "开始时间不能为空",
@@ -165,13 +355,25 @@
         // 	trigger: "blur"
         // }],
       },
+      tenantsData: [],
     };
   },
   created() {
     this.getList();
     this.getReportType();
+    this.getTenantsList();
   },
   methods: {
+    // 获取上报类型切换处理
+    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,
@@ -181,6 +383,15 @@
       });
     },
     /** 查询公告列表 */
+    getTenantsList() {
+      tenantsList({
+        pageNum: -1,
+        param: {},
+      }).then((res) => {
+        this.tenantsData = res.data.list;
+      });
+    },
+    /** 查询公告列表 */
     getList() {
       this.loading = true;
       managerQuery(this.queryParams).then((res) => {
@@ -197,11 +408,13 @@
     // 表单重置
     reset() {
       this.form = {
-					"reportTitle": "",
+        reportTitle: "",
-					"reportType": "",
+        reportType: "",
         time: [],
-					"timeRangeStart": "",
+        timeRangeStart: "",
-					"timeRangeEnd": "",
+        timeRangeEnd: "",
+        tenantIdList: [],
+        status: 0,
       };
       this.resetForm("form");
     },
@@ -230,24 +443,36 @@
       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))
+      this.form = JSON.parse(JSON.stringify(row));
-				let timeRangeStart = this.parseTime(this.form.timeRangeStart, "{y}-{m}-{d}")
+      let timeRangeStart = this.parseTime(
-				let timeRangeEnd = this.parseTime(this.form.timeRangeEnd, "{y}-{m}-{d}")
+        this.form.timeRangeStart,
-				this.form.time = []
+        "{y}-{m}-{d}"
-				this.form.time[0] = timeRangeStart
+      );
-				this.form.time[1] = timeRangeEnd
+      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 data = JSON.parse(JSON.stringify(this.form));
-						let time = data.time
+          let time = data.time;
-						data.timeRangeStart = data.time[0]
+          data.timeRangeStart = data.time[0];
-						data.timeRangeEnd = data.time[1]
+          data.timeRangeEnd = data.time[1];
           if (data.id != undefined) {
             managerUpd(data).then((response) => {
               this.$modal.msgSuccess("修改成功");
@@ -332,7 +557,8 @@
   margin-right: 0;
 }
 
-	.formStep1>>>.el-form-item__label {}
+.formStep1 >>> .el-form-item__label {
+}
 
 .form-item-zd {
   width: 100%;