feat: 5426 移动端外来人员登记，增加查看生物安全告知书和保密协议功能

src/views/platform/bpmn/alienRegistration/index.vue

@@ -1,46 +1,47 @@
 <template>
-    <div ref="alienRegistrationRootClass" class="alienRegistrationRootClass20241028">
-        <van-sticky>
-            <van-nav-bar
-                :title="'外来人员登记'"
-            />
-        </van-sticky>
-        <div v-if="statusCode==='1'">
-            <van-form validate-first @failed="onFailed">
-                <van-field
-                    v-model="waiLaiRenYuan"
-                    required
-                    label="姓名："
-                    placeholder="请输入姓名"
-                    label-width="7em"
-                    clearable
-                />
-                <van-field
-                    v-model="keHuMing"
-                    required
-                    label="单位："
-                    placeholder="请输入单位"
-                    label-width="7em"
-                    clearable
-                />
-                <van-field
-                    v-model="shouJiHao"
-                    required
-                    label="手机号："
-                    placeholder="请输入您的手机号"
-                    label-width="7em"
-                    :rules="[{ validator, message: '请输入正确内容' }]"
-                    clearable
-                />
-                <van-field
-                    v-model="peiTongRen"
-                    required
-                    label="接待人："
-                    placeholder="请输入人员名称"
-                    label-width="7em"
-                    clearable
-                />
-                <!-- <van-field
+  <div
+    ref="alienRegistrationRootClass"
+    class="alienRegistrationRootClass20241028"
+  >
+    <van-sticky>
+      <van-nav-bar :title="'外来人员登记'" />
+    </van-sticky>
+    <div v-if="statusCode === '1'">
+      <van-form validate-first @failed="onFailed">
+        <van-field
+          v-model="waiLaiRenYuan"
+          required
+          label="姓名："
+          placeholder="请输入姓名"
+          label-width="7em"
+          clearable
+        />
+        <van-field
+          v-model="keHuMing"
+          required
+          label="单位："
+          placeholder="请输入单位"
+          label-width="7em"
+          clearable
+        />
+        <van-field
+          v-model="shouJiHao"
+          required
+          label="手机号："
+          placeholder="请输入您的手机号"
+          label-width="7em"
+          :rules="[{ validator, message: '请输入正确内容' }]"
+          clearable
+        />
+        <van-field
+          v-model="peiTongRen"
+          required
+          label="接待人："
+          placeholder="请输入人员名称"
+          label-width="7em"
+          clearable
+        />
+        <!-- <van-field
                     v-model="jinRuYuanYin"
                     required
                     label="进入原因："
@@ -49,107 +50,144 @@
                     clearable
                 /> -->
 
-                <van-field
-                    v-model="jinRuYuanYin"
-                    readonly
-                    clickable
-                    label-width="7em"
-                    label="进入原因"
-                    placeholder="请选择原因"
-                    @click="showPicker = true"
-                />
-                <van-popup v-model="showPicker" position="bottom">
-                    <van-picker
-                        show-toolbar
-                        :columns="columns"
-                        @confirm="onConfirm"
-                        @cancel="showPicker = false"
-                    />
-                </van-popup>
+        <van-field
+          v-model="jinRuYuanYin"
+          readonly
+          clickable
+          label-width="7em"
+          label="进入原因"
+          placeholder="请选择原因"
+          @click="showPicker = true"
+        />
+        <van-popup v-model="showPicker" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns"
+            @confirm="onConfirm"
+            @cancel="showPicker = false"
+          />
+        </van-popup>
 
-                <!-- 其他 -->
-                <van-field
-                    v-if="jinRuYuanYin=='其他'"
-                    v-model="qiTa"
-                    label=""
-                    placeholder="请输入原因"
-                    label-width="7em"
-                    clearable
-                />
-                <van-field
-                    v-model="jinRuQuYu"
-                    label="进入区域："
-                    placeholder="请输入区域"
-                    label-width="7em"
-                    clearable
-                />
-                <div v-if="fontShow" class="fontCLass">
-                  生物安全告知：您已进入生物安全风险区域，请注意生物安全防护。
-                </div>
-                <!-- <van-field
+        <!-- 其他 -->
+        <van-field
+          v-if="jinRuYuanYin == '其他'"
+          v-model="qiTa"
+          label=""
+          placeholder="请输入原因"
+          label-width="7em"
+          clearable
+        />
+        <van-field
+          v-model="jinRuQuYu"
+          label="进入区域："
+          placeholder="请输入区域"
+          label-width="7em"
+          clearable
+        />
+
+        <!-- <van-field
                     v-model="jieDaiBuMen"
                     label="接待部门："
                     placeholder="请输入部门"
                     label-width="7em"
                     clearable
                 /> -->
-                <van-field
-                    v-model="beiZhu"
-                    label="备注："
-                    placeholder="请输入备注"
-                    label-width="7em"
-                    clearable
-                />
-                <div class="qdBtn">
-                    <van-button
-                        type="success"
-                        class="btn btn-back-color"
-                        @click="onSubmit"
-                    >
-                        登记进入
-                    </van-button>
-
-                </div>
-            </van-form>
+        <van-field
+          v-model="beiZhu"
+          label="备注："
+          placeholder="请输入备注"
+          label-width="7em"
+          clearable
+        />
+        <div v-if="showSaveRead" class="agree-content">
+          <van-checkbox
+            v-model="isAgree"
+            icon-size="16px"
+            class="small"
+            shape="square"
+          ></van-checkbox>
+          <span
+style="font-size: 14px; margin-left: 6px"
+            >已阅读并同意<a
+class="link"
+@click="openFileHandler(firstFile)"
+              >《{{ firstFile.fileName }}》</a
+            >和<a
+class="link"
+@click="openFileHandler(secondFile)"
+              >《{{ secondFile.fileName }}》</a
+            ></span
+          >
         </div>
-        <div v-if="statusCode==='2'">
-            <!-- <button class="btn68">登记离开</button> -->
-            <van-form validate-first @failed="onFailed">
-                <van-field
-                    v-model="shouJiHao"
-                    label="手机号："
-                    required
-                    placeholder="请输入您的手机号"
-                    label-width="7em"
-                    clearable
-                    :rules="[{ validator, message: '请输入正确内容' }]"
-                />
-                <div class="qdBtn">
-                    <van-button
-                        type="success"
-                        class="btn btn-back-color"
-                        @click="onSubmit"
-                    >
-                        登记离开
-                    </van-button>
-                </div>
-            </van-form>
+        <div class="qdBtn">
+          <van-button
+            :disabled="showSaveRead && !isAgree"
+            type="success"
+            class="btn btn-back-color"
+            @click="onSubmit"
+          >
+            登记进入
+          </van-button>
         </div>
-        <!-- 登录成功和退出成功的提示 -->
-        <van-popup v-if="promptShow" v-model="promptShow" position="bottom" :style="{height:'100%',width:'100%'}">
-            <div class="promptStyle">
-                <van-icon :name="promptObj.iconName" :color="promptObj.color" size="10rem" />
-                <div class="content">{{ promptObj.promptontent }}</div>
-                <div class="nowTime">{{ this.getNowTime() }}</div>
-                <!-- <div class="btn"><van-button :type="promptObj.buttonColor" @click="quding()">{{ promptObj.buttonName }}</van-button></div> -->
-            </div>
-        </van-popup>
+      </van-form>
     </div>
+    <div v-if="statusCode === '2'">
+      <!-- <button class="btn68">登记离开</button> -->
+      <van-form validate-first @failed="onFailed">
+        <van-field
+          v-model="shouJiHao"
+          label="手机号："
+          required
+          placeholder="请输入您的手机号"
+          label-width="7em"
+          clearable
+          :rules="[{ validator, message: '请输入正确内容' }]"
+        />
+        <div class="qdBtn">
+          <van-button
+            type="success"
+            class="btn btn-back-color"
+            @click="onSubmit"
+          >
+            登记离开
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+    <!-- 登录成功和退出成功的提示 -->
+    <van-popup
+      v-if="promptShow"
+      v-model="promptShow"
+      position="bottom"
+      :style="{ height: '100%', width: '100%' }"
+    >
+      <div class="promptStyle">
+        <van-icon
+          :name="promptObj.iconName"
+          :color="promptObj.color"
+          size="10rem"
+        />
+        <div class="content">{{ promptObj.promptontent }}</div>
+        <div class="nowTime">{{ getNowTime() }}</div>
+        <!-- <div class="btn"><van-button :type="promptObj.buttonColor" @click="quding()">{{promptObj.buttonName}}</van-button></div> -->
+      </div>
+    </van-popup>
+    <!--预览 -->
+    <ibps-file-preview
+      v-model="showPreviewPopup"
+      :file="currentFile"
+      @close="close"
+    />
+  </div>
 </template>
 <script>
 import { query, save } from '@/api/platform/feature/alienRegistration'
+import IbpsFilePreview from '@/components/ibps-file-preview'
 import ActionUtils from '@/utils/action'
 export default {
+  components: {
+    IbpsFilePreview
+  },
   data() {
     const { userInfo } = this.$store.getters
     return {
@@ -167,8 +205,15 @@ export default {
       // aa: ''
       qiTa: '',
       showPicker: false,
-      columns: ['参观学习', '设备安装调试', '设备维修维护', '配送试剂耗材', '其他'],
+      columns: [
+        '参观学习',
+        '设备安装调试',
+        '设备维修维护',
+        '配送试剂耗材',
+        '其他'
+      ],
       promptShow: false,
+      isAgree: false,
       promptObj: {
         iconName: 'passed',
         promptontent: '来访登记成功',
@@ -176,7 +221,11 @@ export default {
         buttonColor: 'info',
         buttonName: '确定'
       },
-      fontShow: false
+      currentFile: null,
+      firstFile: {},
+      secondFile: {},
+      showPreviewPopup: false,
+      showSaveRead: false
     }
   },
   created() {
@@ -190,7 +239,8 @@ export default {
     this.getQdInfo()
   },
   mounted() {
-    this.$refs.alienRegistrationRootClass.style.height = document.documentElement.clientHeight + 'px'
+    this.$refs.alienRegistrationRootClass.style.height =
+      document.documentElement.clientHeight + 'px'
   },
   methods: {
     getNowTime() {
@@ -221,7 +271,13 @@ export default {
       this.jinRuYuanYin = value
       this.showPicker = false
     },
-
+    close() {
+      this.showPreviewPopup = false
+    },
+    openFileHandler(file) {
+      this.currentFile = file
+      this.showPreviewPopup = true
+    },
     getQdInfo() {
       console.log(this.$route.query)
       // type: 1.登记进入，2.登记离开
@@ -247,6 +303,33 @@ export default {
         // 无type
         this.statusCode = '0'
       }
+      const sql = `select * from ibps_file_attachment where ID_ in (select first_file_name from t_wlrydjfjsc union select second_file_name from t_wlrydjfjsc)`
+      this.$common
+        .request('sql', sql)
+        .then((res) => {
+          const result = res.variables.data
+          if (!result || result.length === 0) {
+            this.showSaveRead = false
+            return
+          }
+          const [first, second] = result
+          this.firstFile = {
+            ext: first.EXT_,
+            fileName: first.FILE_NAME_,
+            totalBytes: first.TOTAL_BYTES_,
+            id: first.ID_
+          }
+          this.secondFile = {
+            ext: second.EXT_,
+            fileName: second.FILE_NAME_,
+            totalBytes: second.TOTAL_BYTES_,
+            id: second.ID_
+          }
+          this.showSaveRead = true
+        })
+        .catch((err) => {
+          this.showSaveRead = false
+        })
     },
     // getAlreadyQD() {
     //     const paramWhere1 = {
@@ -324,7 +407,8 @@ export default {
         bianZhiShiJian: this.getNow(),
         waiLaiRenYuan: this.waiLaiRenYuan,
         keHuMing: this.keHuMing,
-        jinRuYuanYin: this.jinRuYuanYin === '其他' ? this.qiTa : this.jinRuYuanYin,
+        jinRuYuanYin:
+          this.jinRuYuanYin === '其他' ? this.qiTa : this.jinRuYuanYin,
         jinRuQuYu: this.jinRuQuYu,
         peiTongRen: this.peiTongRen,
         jieDaiBuMen: this.jieDaiBuMen,
@@ -338,12 +422,15 @@ export default {
         liKaiShiJian: this.getNow(),
         shiFouGuoShen: '已完成'
       }
-      query(this.getSearcFormData('qrcode')).then(res => {
+      query(this.getSearcFormData('qrcode')).then((res) => {
         const data = res.data.dataResult || []
         console.log(data)
         if (this.statusCode === '1') {
-          if (data.length === 0 || !data.some(r => r.liKaiShiJian === null || r.liKaiShiJian === '')) {
-            save(paramWhere1).then(res => {
+          if (
+            data.length === 0 ||
+            !data.some((r) => r.liKaiShiJian === null || r.liKaiShiJian === '')
+          ) {
+            save(paramWhere1).then((res) => {
               if (res.state === 200) {
                 this.promptShow = true
                 this.promptObj.iconName = 'passed'
@@ -357,16 +444,22 @@ export default {
                 })
               }
             })
-          } else if (data.length > 0 && data.some(r => r.liKaiShiJian === null || r.liKaiShiJian === '')) {
+          } else if (
+            data.length > 0 &&
+            data.some((r) => r.liKaiShiJian === null || r.liKaiShiJian === '')
+          ) {
             this.$toast({
               duration: 30000, // 持续展示 toast
               message: '该手机号存在未登记离开数据，请扫离开码登记离开！'
             })
           }
         } else if (this.statusCode === '2') {
-          if (data.length > 0 && data.some(r => r.liKaiShiJian === null || r.liKaiShiJian === '')) {
+          if (
+            data.length > 0 &&
+            data.some((r) => r.liKaiShiJian === null || r.liKaiShiJian === '')
+          ) {
             paramWhere2.id = data[0].id
-            save(paramWhere2).then(res => {
+            save(paramWhere2).then((res) => {
               if (res.state === 200) {
                 this.promptObj.iconName = 'passed'
                 this.promptObj.promptontent = '离开登记成功'
@@ -410,7 +503,10 @@ export default {
             duration: 2000, // 持续展示 toast
             message: '外来人员姓名长度超出'
           })
-        } else if (this.jinRuYuanYin === '' || (this.jinRuYuanYin === '其他' && this.qiTa === '')) {
+        } else if (
+          this.jinRuYuanYin === '' ||
+          (this.jinRuYuanYin === '其他' && this.qiTa === '')
+        ) {
           this.$toast({
             duration: 2000, // 持续展示 toast
             message: '请输入进入原因'
@@ -465,7 +561,7 @@ export default {
             duration: 2000, // 持续展示 toast
             message: '手机号长度超出'
           })
-        } else if (!(/^1[3-9]\d{9}$/.test(this.shouJiHao))) {
+        } else if (!/^1[3-9]\d{9}$/.test(this.shouJiHao)) {
           this.$toast({
             duration: 2000, // 持续展示 toast
             message: '手机号格式不正确'
@@ -484,7 +580,7 @@ export default {
             duration: 2000, // 持续展示 toast
             message: '手机号长度超出'
           })
-        } else if (!(/^1[3-9]\d{9}$/.test(this.shouJiHao))) {
+        } else if (!/^1[3-9]\d{9}$/.test(this.shouJiHao)) {
           this.$toast({
             duration: 2000, // 持续展示 toast
             message: '手机号格式不正确'
@@ -503,7 +599,8 @@ export default {
       const hours = ('0' + now.getHours()).slice(-2)
       const minutes = ('0' + now.getMinutes()).slice(-2)
       // const seconds = ('0' + now.getSeconds()).slice(-2)
-      const formattedTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
+      const formattedTime =
+        year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
       return formattedTime
     },
     /**
@@ -511,21 +608,18 @@ export default {
      */
     getSearcFormData(val) {
       const params = { 'Q^shou_ji_hao_^SL': this.shouJiHao }
-      const sorts = { 'create_time_': 'DESC' }
-      return ActionUtils.formatParams(
-        params,
-        {},
-        sorts)
+      const sorts = { create_time_: 'DESC' }
+      return ActionUtils.formatParams(params, {}, sorts)
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.alienRegistrationRootClass20241028{
+.alienRegistrationRootClass20241028 {
   background-color: #f8f8f8;
   overflow-y: scroll;
   overflow-x: hidden;
-  .qdBtn{
+  .qdBtn {
     text-align: center;
     .btn {
       width: 90%;
@@ -549,12 +643,7 @@ export default {
     background-color: #fff;
     border-radius: 10px;
   }
-  .fontCLass {
-    color: #F56C6C;
-    font-size: 12px;
-    margin: 10px 16px;
-    text-align: center;
-  }
+
   ::v-deep .qianMing .van-cell--borderless {
     padding-left: 8px;
   }
@@ -573,10 +662,10 @@ export default {
     border-radius: 2px;
     margin-right: 5px;
   }
-  .btn68{
+  .btn68 {
     width: 120px;
     height: 120px;
-    background-color: #0093E9;
+    background-color: #0093e9;
     color: #ffffff;
     font-size: 16px;
     font-weight: bold;
@@ -588,10 +677,11 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    transition: all .1s linear;
+    transition: all 0.1s linear;
     margin: 20% auto 0;
   }
-  .btn68:before,.btn68:after{
+  .btn68:before,
+  .btn68:after {
     content: '';
     width: 120px;
     height: 120px;
@@ -599,41 +689,54 @@ export default {
     position: absolute;
     animation: eff68 1.4s linear infinite;
   }
-  .btn68:after{
+  .btn68:after {
     animation-delay: 0.7s;
   }
-  @keyframes eff68{
-    0%{
-      box-shadow: 0 0 0 0px #0093E9;
+  @keyframes eff68 {
+    0% {
+      box-shadow: 0 0 0 0px #0093e9;
       opacity: 0.2;
     }
-    100%{
-      box-shadow: 0 0 0 30px #0093E9;
+    100% {
+      box-shadow: 0 0 0 30px #0093e9;
       opacity: 0;
     }
   }
-  .btn68:active{
+  .btn68:active {
     transform: scale(0.96);
   }
-
 }
-.alienRegistrationRootClass20241028::-webkit-scrollbar{
+.alienRegistrationRootClass20241028::-webkit-scrollbar {
   width: 0;
 }
-.promptStyle{
+.small {
+  font-size: 14px;
+}
+.agree-content {
+  margin-top: 12px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.link {
+  color: #1989fa;
+  cursor: pointer;
+}
+.promptStyle {
   width: 100%;
   margin-top: 50%;
   text-align: center;
-  .content{
+  .content {
     padding: 15px 0;
   }
-  .nowTime{
-     padding: 0 0 15px 0;
-     font-size: 18px;
+  .nowTime {
+    padding: 0 0 15px 0;
+    font-size: 18px;
   }
-  .btn{
+  .btn {
     margin-top: 15%;
-    .van-button{
+    .van-button {
       width: 75%;
     }
   }