feature(遵义人民):平台入室预约功能开发

src/views/technical-plat/components/disclaimer.vue

@@ -79,13 +79,11 @@
         this.state.isShowDialog = true;
       },
       handleScroll(e) {
-        console.log(e);
         // 判断是否滚动到底部
         if (
           e.target.scrollTop + e.target.clientHeight >=
           e.target.scrollHeight
         ) {
-          console.log("已经滚动到底部");
           this.disabledBtn = false;
         }
       },

src/views/technical-plat/components/edit.vue

@@ -16,10 +16,57 @@
           closeable
       >
         <div class="form-group">
-          <h3>申请人</h3>
+          <h3>申请入室平台</h3>
           <el-row :gutter="20" class="form-row-wrap">
             <el-col :span="12">
-              <el-form-item label="姓名" prop="memberName">
+              <el-form-item label="预约平台" prop="platformName">
+                <div class="flex">
+                  <el-input
+                      disabled
+                      placeholder="请输入"
+                      class="w100"
+                      maxlength="11"
+                      v-model="form.platformName"
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预约周期" prop="appointDate">
+                <div class="flex">
+                  <el-date-picker
+                      class="mr8"
+                      style="width: 80%"
+                      @change="calculateMonths"
+                      v-model="form.appointDate"
+                      type="daterange"
+                      range-separator="-"
+                      start-placeholder="预约开始时间"
+                      end-placeholder="预约结束时间"
+                  />
+                  <el-input style="width: 20%" disabled v-model.number="form.platformTime" >
+                    <template #append>个月</template>
+                  </el-input>
+                </div>
+              </el-form-item>
+            </el-col>
+            <!-- END -->
+          </el-row>
+          <h3>预约信息</h3>
+          <el-row :gutter="20" class="form-row-wrap">
+            <el-col :span="24">
+              <el-form-item label="身份" prop="memberType">
+                <el-radio-group v-model="form.memberType"
+                                style="width: 100%"
+                                clearable>
+                  <el-radio v-for="item in userTypeList"
+                            :key="item.id"
+                            :label="item.dictValue">{{ item.dictLabel }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="人员姓名" prop="memberName">
                 <div class="flex">
                   <el-select
                       v-model="form.memberName"
@@ -29,6 +76,7 @@
                       placeholder="请选择"
                       filterable
                       clearable
+                      disabled
                   >
                     <el-option :label="v.nickName" :value="v" :key="v.id" v-for="v in userList" />
                   </el-select>
@@ -51,55 +99,64 @@
               <el-form-item label="性别" prop="memberSex">
                 <div class="flex">
                   <el-radio-group v-model="form.memberSex">
-                    <el-radio label="10" value="10">男</el-radio>
-                    <el-radio label="20" value="20">女</el-radio>
+                    <el-radio v-for="item in userSexList"
+                              :key="item.dictValue"
+                              :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                   </el-radio-group>
                 </div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="实验开始时间" prop="startDate">
+              <el-form-item label="工号/学号" prop="memberNo">
                 <div class="flex">
-                  <el-date-picker
-                      v-model="form.startDate"
-                      type="date"
+                  <el-input
+                      placeholder="请输入"
                       class="w100"
-                      placeholder="选择实验开始时间">
-                  </el-date-picker>
+                      maxlength="11"
+                      v-model="form.memberNo"
+                  />
                 </div>
               </el-form-item>
             </el-col>
-            <el-col :span="12">
-              <el-form-item label="实验结束时间" prop="endDate">
+            <el-col :span="12" v-if="form.memberType === '30'">
+              <el-form-item label="身份证号(仅院外)" prop="memberIden">
                 <div class="flex">
-                  <el-date-picker
-                      v-model="form.endDate"
-                      type="date"
+                  <el-input
+                      placeholder="请输入"
                       class="w100"
-                      placeholder="选择实验结束时间">
-                  </el-date-picker>
+                      maxlength="11"
+                      v-model="form.memberIden"
+                  />
                 </div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="工号/学号" prop="memberNo">
+              <el-form-item label="实验起止时间" prop="dateRange">
                 <div class="flex">
-                  <el-input
-                      placeholder="请输入"
-                      class="w100"
-                      maxlength="11"
-                      v-model="form.memberNo"
+                  <el-date-picker
+                      class="w100 mr8"
+                      v-model="form.dateRange"
+                      type="daterange"
+                      range-separator="-"
+                      start-placeholder="实验开始时间"
+                      end-placeholder="实验结束时间"
                   />
                 </div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="人员类型" prop="memberType">
-                <el-radio-group v-model="form.memberType">
-                  <el-radio label="10" value="10">本院</el-radio>
-                  <el-radio label="20" value="20">外院</el-radio>
-                  <el-radio label="30" value="30">学生</el-radio>
-                </el-radio-group>
+              <el-form-item label="课题组" prop="applyPg">
+                <div class="flex">
+                  <el-select v-model="form.applyPg"
+                             placeholder="请选择课题组"
+                             value-key="id"
+                             class="w100">
+                    <el-option v-for="item in pjtList"
+                               :key="item.id"
+                               :label="item.pgName"
+                               :value="item"></el-option>
+                  </el-select>
+                </div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -134,18 +191,6 @@
               </el-form-item>
             </el-col>
             <el-col :span="12" v-if="form.memberType === '20'">
-              <el-form-item label="身份证号码" prop="memberIden">
-                <div class="flex">
-                  <el-input
-                      placeholder="请输入"
-                      class="w100"
-                      maxlength="11"
-                      v-model="form.memberIden"
-                  />
-                </div>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12" v-if="form.memberType === '30'">
               <el-form-item label="导师姓名" prop="mentorName">
                 <div class="flex">
                   <el-select
@@ -162,7 +207,7 @@
                 </div>
               </el-form-item>
             </el-col>
-            <el-col :span="12" v-if="form.memberType === '30'">
+            <el-col :span="12" v-if="form.memberType === '20'">
               <el-form-item label="导师电话" prop="mentorPhone">
                 <div class="flex">
                   <el-input
@@ -174,7 +219,7 @@
                 </div>
               </el-form-item>
             </el-col>
-            <el-col :span="12" v-if="form.memberType === '30'">
+            <el-col :span="12" v-if="form.memberType === '20'">
               <el-form-item label="导师科室" prop="mentorDeptId">
                 <div class="flex">
                   <el-cascader ref="mentorDept"
@@ -193,50 +238,15 @@
                 </div>
               </el-form-item>
             </el-col>
-            <!-- END -->
-          </el-row>
-          <h3>申请入室平台</h3>
-          <el-row :gutter="20" class="form-row-wrap">
-            <el-col :span="12">
-              <el-form-item label="平台" prop="platformName">
-                <div class="flex">
-                  <el-input
-                      disabled
-                      placeholder="请输入"
-                      class="w100"
-                      maxlength="11"
-                      v-model="form.platformName"
-                  />
-                </div>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="时间(月)" prop="platformTime">
-                <div class="flex">
-                  <el-input-number class="w100" v-model.number="form.platformTime" controls-position="right" :min="0" :step="0.1" step-strictly></el-input-number>
-                </div>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="其它" prop="other">
-                <div class="flex">
-                  <el-input
-                      type="textarea"
-                      placeholder="请输入"
-                      class="w100"
-                      maxlength="255"
-                      v-model="form.other"
-                  />
-                </div>
-              </el-form-item>
-            </el-col>
           </el-row>
         </div>
         <div>
           <el-checkbox v-model="checked">
-            <el-button type="text">
-              我已完整阅读并同意 《预约须知》的内容
+            我已完整阅读并同意
+            <el-button type="text" @click="openDisclaimerDialog">
+              《预约须知》
             </el-button>
+            的内容，承诺如实遵守实验室及各平台的各项规章制度，遵守在室的积分管理制度。
           </el-checkbox>
         </div>
         <!-- END -->
@@ -260,7 +270,7 @@
 <script lang="ts">
 import disclaimer from "./disclaimer.vue";
 import { getToken } from "@/utils/auth";
-import { getDeptTree } from "@/api/dict";
+import { getDeptTree, getProjectGroupList, getDictDataByType } from "@/api/dict";
 import { getUserList } from "@/api/instr";
 import { create } from "@/api/platform"
 import to from "await-to-js";
@@ -275,7 +285,7 @@ export default {
   },
   data() {
     return {
-      title: "技术平台-入室申请",
+      title: "遵义医科大学附属医院临床医学公共实验中心-入室申请表",
       type: '',
       form: {
         id: 0,
@@ -301,6 +311,13 @@ export default {
         platformType: "",
         platformTime: 0,
         other: "",
+        pgId: 0,
+        pgName: "",
+        applyPg: {},
+        appointDate: [],
+        dateRange: [],
+        appointStartDate: "",
+        appointEndDate: "",
       },
       checked: false,
       state: {
@@ -308,17 +325,22 @@ export default {
         loading: false,
       },
       rules: {
-        memberName: [{ required: true, message: "不能为空", trigger: "blur" }],
-        memberType: [{ required: true, message: "不能为空", trigger: "change" }],
+        memberName: [{ required: true, message: "人员姓名不能为空", trigger: "blur" }],
+        memberType: [{ required: true, message: "身份不能为空", trigger: "change" }],
         deptId: [{ required: true, message: "不能为空", trigger: "change" }],
-        platformName: [{ required: true, message: "不能为空", trigger: "blur" }],
-        platformTime: [{ required: true, message: "不能为空", trigger: "blur" }],
-        startDate: [{ required: true, message: "不能为空", trigger: "change" }],
-        endDate: [{ required: true, message: "不能为空", trigger: "change" }],
-        mentorName: [{ required: true, message: "不能为空", trigger: "blur" }],
+        platformName: [{ required: true, message: "预约平台不能为空", trigger: "blur" }],
+        appointDate: [{ required: true, message: "预约周期不能为空", trigger: "blur" }],
+        memberPhone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
+        memberSex: [{ required: true, message: "性别不能为空", trigger: "change" }],
+        memberNo: [{ required: true, message: "工号/学号不能为空", trigger: "blur" }],
+        dateRange: [{ required: true, message: "实验起止时间不能为空", trigger: "change" }],
+        applyPg: [{ required: true, message: "请选择课题组", trigger: "change" }],
       },
       deptData: [], // 部门树
       userList: [], // 用户列表
+      pjtList: [], // 课题组列表
+      userTypeList: [], // 成员类型
+      userSexList: [], // 性别
     };
   },
   methods: {
@@ -326,9 +348,15 @@ export default {
       Promise.all([
         getDeptTree(),
         getUserList({ noPage: true }),
-      ]).then(([dept, user]) => {
+        getProjectGroupList(),
+        getDictDataByType("sys_user_type"),
+        getDictDataByType("sys_com_sex"),
+      ]).then(([dept, user, pjt, type, sex]) => {
         this.deptData = dept.data || [];
         this.userList = user.data.list || [];
+        this.pjtList = pjt.data.list || [];
+        this.userTypeList = type.data.values || [];
+        this.userSexList = sex.data.values || [];
       });
     },
     async openDialog(type, row) {
@@ -338,18 +366,48 @@ export default {
         return this.$router.push("/login?redirect=/technical-plat/index");
       }
 
-      this.form = {}
+      this.form = {
+        id: 0,
+        memberId: 0,
+        memberName: "",
+        memberPhone: "",
+        memberSex: "",
+        memberNo: "",
+        memberIden: "",
+        startDate: "",
+        endDate: "",
+        memberType: "",
+        deptId: 0,
+        deptName: "",
+        workPlace: "",
+        mentorId: 0,
+        mentorName: "",
+        mentorPhone: "",
+        mentorDeptId: 0,
+        mentorDeptName: "",
+        platformId: 0,
+        platformName: "",
+        platformType: "",
+        platformTime: 0,
+        other: "",
+        pgId: 0,
+        pgName: "",
+        applyPg: {},
+      }
       this.checked = false
-
       this.type = type;
       this.getDicts()
       if (type === 'add') {
+        this.memberChange(this.userInfo)
         this.form.platformId = row.id
         this.form.platformName = row.platformName
         this.form.platformType = row.platformType
       }
       this.state.isShowDialog = true;
     },
+    openDisclaimerDialog() {
+      this.$refs.disclaimerRef.openDialog();
+    },
     memberDeptChange() {
       const nodes = this.$refs.memberDept.getCheckedNodes();
       this.form.deptName = nodes[0].label;
@@ -363,10 +421,11 @@ export default {
       this.form.memberName = user.nickName || null;
       this.form.memberPhone = user.phone || '';
       this.form.memberSex = user.sex || '';
-      this.form.memberNo = user.userName || '';
-      this.form.memberIden = user.idCode || '';
+      this.form.memberNo = user.idCode || '';
+      this.form.memberIden = '';
       this.form.deptId = user.deptId || null;
       this.form.deptName = user.deptName || '';
+      this.form.memberType = user.userType || '';
     },
     mentorChange(user) {
       this.form.mentorId = user.id || null;
@@ -375,6 +434,23 @@ export default {
       this.form.mentorDeptId = user.deptId || null;
       this.form.mentorDeptName = user.deptName || '';
     },
+    // 获取月份数
+    calculateMonths() {
+      if (this.form.appointDate.length === 2) {
+        const startDate = this.form.appointDate[0];
+        const endDate = this.form.appointDate[1];
+        this.form.platformTime = this.getMonthDifference(startDate, endDate)
+      } else {
+        this.form.platformTime = 0
+      }
+    },
+    getMonthDifference(startDate, endDate) {
+      let months;
+      months = (endDate.getFullYear() - startDate.getFullYear()) * 12;
+      months -= startDate.getMonth();
+      months += endDate.getMonth();
+      return months < 0 ? 0 : months+1;
+    },
     onCancel() {
       this.$refs.editFormRef.clearValidate();
       this.$refs.editFormRef.resetFields();
@@ -389,6 +465,18 @@ export default {
             // 提交申请
             if (this.type === 'add') {
               this.form.isTemporary = '20'
+              if (this.form.applyPg != null) {
+                this.form.pgId = this.form.applyPg.id
+                this.form.pgName = this.form.applyPg.pgName
+              }
+              if(this.form.appointDate.length) {
+                this.form.appointStartDate = this.form.appointDate[0]
+                this.form.appointEndDate = this.form.appointDate[1]
+              }
+              if(this.form.dateRange.length) {
+                this.form.startDate = this.form.dateRange[0]
+                this.form.endDate = this.form.dateRange[1]
+              }
               const [err] = await to(create(this.form));
               if(err) {
                 this.$message.warning('操作失败')