上报类型添加单位，附件，备注

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

@@ -1,31 +1,119 @@
 <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="typeName">
-				<el-input v-model="queryParams.param.typeName" placeholder="请输入" clearable
+        <el-input
-					@keyup.enter.native="handleQuery" />
+          v-model="queryParams.param.typeName"
+          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="typeName" min-width="100" />
+      <el-table-column
-      <el-table-column  label="备注" align="center" prop="remark" min-width="100" />
+        fixed
+        label="类型名称"
+        align="center"
+        prop="typeName"
+        min-width="100"
+        show-overflow-tooltip
+      />
+      <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
+        label="附件"
+        align="center"
+        prop="typeName"
+        min-width="150"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">
+          <el-button type="text" size="mini" @click="handleDownload(scope.row)">
+            <span v-if="scope.row.file">
+              <i class="el-icon-download"></i>
+              <span>{{
+                scope.row.file.substring(scope.row.file.lastIndexOf("/") + 1)
+              }}</span>
+            </span>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        min-width="150"
+        show-overflow-tooltip
+      />
       <el-table-column label="创建人/创建时间" align="center" min-width="140">
         <template slot-scope="scope">
           <div>{{ scope.row.createBy }}</div>
@@ -34,25 +122,96 @@
           </span>
         </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"
+          <el-button
-						@click="handleUpdate(scope.row)">修改</el-button>
+            size="mini"
-					<el-button size="mini" type="text" icon="el-icon-delete"
+            type="text"
-						@click="handleDelete(scope.row)">删除</el-button>
+            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="90px" class="formStep">
+      class="popup"
+      :title="title"
+      :visible.sync="open"
+      width="780px"
+      append-to-body
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="90px"
+        class="formStep"
+      >
         <el-form-item label="类型名称" prop="typeName">
           <el-input v-model="form.typeName" placeholder="请输入" />
         </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="file">
+          <el-upload
+            :limit="1"
+            class="avatar-uploader wj-uploader"
+            :headers="headers"
+            :action="uploadFileUrl"
+            accept=".xlsx,.xls,.pdf,.doc,.docx"
+            :before-upload="handleBeforePdfUpload1"
+            :on-success="handleUploadPdfAdd1"
+            :on-remove="handleRemove"
+            :file-list="fileList"
+            :show-file-list="true"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              将文件拖到此处，或
+              <em>点击上传</em>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            type="textarea"
+            v-model="form.remark"
+            placeholder="请输入"
+          />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -63,24 +222,25 @@
 </template>
 
 <script>
-	import {
+import { getToken } from "@/utils/auth";
-		reportList,
+import { tenantsList } from "@/api/member";
-		reportAdd,
+import { reportList, reportAdd, reportUpd, reportDel } from "@/api/report";
-		reportUpd,
-		reportDel
-	} from "@/api/report";
 export default {
   name: "Notice",
   data() {
     return {
+      uploadFileUrl: process.env.VUE_APP_API_QZURL + "/common/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
       dataSourceList: [],
       queryParams: {
         param: {
           name: "",
-					}
+        },
       },
       listData: [],
-				title: '',
+      title: "",
       open: false,
       total: 0,
       form: {},
@@ -89,18 +249,73 @@
       multiple: false,
       // 表单校验
       rules: {
-					typeName: [{
+        typeName: [
+          {
             required: true,
             message: "上报类型不能为空",
             trigger: "blur",
-					}],
           },
+        ],
+        tenantIdList: [
+          {
+            required: true,
+            message: "单位不能为空",
+            trigger: "change",
+          },
+        ],
+        file: [
+          {
+            required: true,
+            message: "附件不能为空",
+            trigger: "change",
+          },
+        ],
+      },
+      tenantsData: [],
+      fileList: [],
     };
   },
   created() {
     this.getList();
+    this.getTenantsList();
   },
   methods: {
+    handleRemove(file, fileList) {
+      this.form.file = "";
+      this.fileList = [];
+    },
+    // 上传成功回 - pdg
+    handleUploadPdfAdd1(res) {
+      if (res.code == 200) {
+        this.$message.success(res.msg || "导入成功");
+        this.form.file = res.fileName;
+        setTimeout(() => {
+          this.$refs["form"].validateField("file", (errorMessage) => {});
+        });
+      } else {
+        this.$message.error(res.msg || "导入失败");
+        this.fileList = [];
+      }
+    },
+
+    // 上传前校检格式和大小 - 文件
+    handleBeforePdfUpload1(file) {
+      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const whiteList = ["xlsx", "xls", "pdf", "doc", "docx"];
+      if (whiteList.indexOf(fileSuffix) === -1) {
+        this.$message.error("上传文件只能是xlsx/xls/pdf/doc/docx 格式！");
+        return false;
+      }
+    },
+    /** 查询公告列表 */
+    getTenantsList() {
+      tenantsList({
+        pageNum: -1,
+        param: {},
+      }).then((res) => {
+        this.tenantsData = res.data.list;
+      });
+    },
     /** 查询公告列表 */
     getList() {
       this.loading = true;
@@ -117,8 +332,12 @@
     },
     // 表单重置
     reset() {
+      this.fileList = [];
       this.form = {
-					"typeName": "",
+        typeName: "",
+        tenantIdList: [],
+        remark: "",
+        file: "",
       };
       this.resetForm("form");
     },
@@ -149,8 +368,19 @@
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.open = true;
-				this.title = "修改诊疗档案";
+      this.title = "修改上报类型";
-				this.form = JSON.parse(JSON.stringify(row))
+      this.form = JSON.parse(JSON.stringify(row));
+      if (row.file) {
+        this.fileList = [
+          {
+            // 截取字符串，获取文件名
+            name: row.file.substring(row.file.lastIndexOf("/") + 1),
+            url: row.file,
+          },
+        ];
+      } else {
+        this.fileList = [];
+      }
     },
     /** 诊疗档案 */
     submitForm: function () {
@@ -195,6 +425,9 @@
 <style scoped src="@/assets/styles/common.css"></style>
 
 <style scoped>
+>>> .el-upload-list__item:first-child {
+  margin-top: 0 !important;
+}
 .div-title1 {
   font-size: 22px;
   font-weight: bold;
@@ -240,7 +473,8 @@
   margin-right: 0;
 }
 
-	.formStep1>>>.el-form-item__label {}
+.formStep1 >>> .el-form-item__label {
+}
 
 .form-item-zd {
   width: 100%;