From 2a883f48a680338e7e8e03808738dbebaabe7277 Mon Sep 17 00:00:00 2001
From: miaojiale <1123971748@qq.com>
Date: Fri, 2 Dec 2022 17:03:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E9=83=A8=E5=88=86=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/config/date.vue                      | 140 +++++++++++++-----
 .../FormComponents/CustomForm/FormContent.vue |  25 ++++
 .../CustomForm/FormItemSelf.vue               |  56 +++----
 .../FormComponents/CustomForm/index.vue       |  30 +++-
 .../screening/components/ConfigForms.vue      |  80 ++++++----
 src/views/screening/components/FormTab.vue    |   8 +-
 6 files changed, 224 insertions(+), 115 deletions(-)

diff --git a/packages/config/date.vue b/packages/config/date.vue
index 477b90d..0942503 100644
--- a/packages/config/date.vue
+++ b/packages/config/date.vue
@@ -1,44 +1,50 @@
 <template>
   <div>
     <template v-if="data.type.indexOf('range') != -1">
-      <el-form-item label="开始占位内容"
-                    label-width="110px">
-        <el-input v-model="data.startPlaceholder"
-                  clearable
-                  placeholder="开始占位内容"></el-input>
+      <el-form-item label="开始占位内容" label-width="110px">
+        <el-input
+          v-model="data.startPlaceholder"
+          clearable
+          placeholder="开始占位内容"
+        ></el-input>
       </el-form-item>
-      <el-form-item label="结束占位内容"
-                    label-width="110px">
-        <el-input v-model="data.endPlaceholder"
-                  clearable
-                  placeholder="结束占位内容"></el-input>
+      <el-form-item label="结束占位内容" label-width="110px">
+        <el-input
+          v-model="data.endPlaceholder"
+          clearable
+          placeholder="结束占位内容"
+        ></el-input>
       </el-form-item>
     </template>
-    <el-form-item label="占位内容"
-                  v-else>
-      <el-input v-model="data.placeholder"
-                clearable
-                placeholder="占位内容"></el-input>
+    <el-form-item label="占位内容" v-else>
+      <el-input
+        v-model="data.placeholder"
+        clearable
+        placeholder="占位内容"
+      ></el-input>
     </el-form-item>
     <el-form-item label="默认值">
-      <el-input v-model="data.value"
-                clearable
-                placeholder="默认值"></el-input>
+      <el-input v-model="data.value" clearable placeholder="默认值"></el-input>
     </el-form-item>
-    <el-form-item label="显示格式化"
-                  label-width="100px">
-      <el-input v-model="data.format"
-                clearable
-                placeholder="显示格式化"></el-input>
+    <el-form-item label="显示格式化" label-width="100px">
+      <el-input
+        v-model="data.format"
+        clearable
+        placeholder="显示格式化"
+      ></el-input>
     </el-form-item>
     <el-form-item label="值格式化">
-      <el-input v-model="data.valueFormat"
-                clearable
-                placeholder="值格式化"></el-input>
+      <el-input
+        v-model="data.valueFormat"
+        clearable
+        placeholder="值格式化"
+      ></el-input>
     </el-form-item>
-    <el-form-item label="取消范围联动"
-                  label-width="110px"
-                  v-if="['timerange', 'daterange', 'datetimerange'].includes(data.type)">
+    <el-form-item
+      label="取消范围联动"
+      label-width="110px"
+      v-if="['timerange', 'daterange', 'datetimerange'].includes(data.type)"
+    >
       <el-switch v-model="data.unlinkPanels"></el-switch>
     </el-form-item>
     <el-form-item label="是否禁用">
@@ -49,40 +55,96 @@
     </el-form-item>
     <el-form-item label="是否必填">
       <el-switch v-model="data.required"></el-switch>
+      <el-input
+        v-if="data.required"
+        v-model.lazy="data.pattern"
+        placeholder="校验方法"
+      ></el-input>
     </el-form-item>
   </div>
 </template>
 
 <script>
+let checkAge = (rule, value, callback) => {
+  if (!value) {
+    return callback(new Error("请选择出生日期"))
+  }
+  let birthday = new Date(value.replace(/-/g, "/"))
+  let d = new Date()
+  let age =
+    d.getFullYear() -
+    birthday.getFullYear() -
+    (d.getMonth() < birthday.getMonth() ||
+    (d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate())
+      ? 1
+      : 0)
+  console.log(age)
+  if (age < 18) {
+    callback(new Error("必须年满18岁"))
+  } else {
+    callback()
+  }
+}
 export default {
   name: "config-date",
-  props: ['data'],
+  props: ["data"],
   data() {
     return {
       validator: {
         type: null,
         required: null,
         pattern: null,
-        length: null
-      }
+        length: null,
+      },
     }
   },
   methods: {
     generateRule() {
-      const rules = [];
-      Object.keys(this.validator).forEach(key => {
+      const rules = []
+      Object.keys(this.validator).forEach((key) => {
         if (this.validator[key]) rules.push(this.validator[key])
       })
       this.data.rules = rules
+      console.log(this.data.rules)
+    },
+    // 在表单配置中增加checkAge字段，可以增加校验年龄的方法
+    ageRule() {
+      // const rules = []
+      // Object.keys(this.validator).forEach((key) => {
+      //   if (this.validator[key]) rules.push(this.validator[key])
+      // })
+      // this.data.rules = rules
+      let i = this.data.rules.findIndex((e) => e.trigger)
+      this.data.rules[i] = { validator: checkAge, trigger: "change" }
+      console.log(this.data.rules)
     },
   },
   watch: {
-    'data.required': function (val) {
-      if (val) this.validator.required = { required: true, message: `${this.data.label}必须填写` }
-      else this.validator.required = null
+    "data.required": function (val) {
+      if (val) {
+        this.validator.required = {
+          required: true,
+          message: `${this.data.label}必须填写`,
+        }
+      } else {
+        this.validator.required = null
+      }
 
       this.generateRule()
-    }
-  }
+    },
+    "data.pattern": function (val) {
+      if (val) {
+        // console.log(val)
+        if (val == "checkAge") {
+          this.ageRule()
+        }
+      } else {
+        this.validator.pattern = null
+      }
+
+      // delete this.data.pattern
+      // this.generateRule()
+    },
+  },
 }
 </script>
diff --git a/src/components/FormComponents/CustomForm/FormContent.vue b/src/components/FormComponents/CustomForm/FormContent.vue
index 7bb96bb..a890c40 100644
--- a/src/components/FormComponents/CustomForm/FormContent.vue
+++ b/src/components/FormComponents/CustomForm/FormContent.vue
@@ -121,6 +121,7 @@
           :item="item"
           :columns="columns.column || columns.children.column"
           :group="options.group"
+          @formChange="formChange"
         ></form-item-self>
       </el-col>
     </template>
@@ -186,6 +187,30 @@ export default {
     handleChange(key, val) {
       if (this.form.hasOwnProperty(key)) this.form[key] = val
     },
+    // 切换不符合筛查条件的显示
+    formChange() {
+      console.log(this.form)
+      let arr = [
+        "is_one_year",
+        "is_subtotal_history",
+        "is_ppi",
+        "is_symptom",
+        "is_subtotal_history",
+        "is_disease",
+        "is_tumour",
+      ]
+      let flag = 0
+      for (let i = 0; i < arr.length; i++) {
+        if (this.form[arr[i]] && this.form[arr[i]] == 0) {
+          flag++
+        }
+      }
+      if (flag == 0) {
+        this.$emit("showError", false)
+      } else {
+        this.$emit("showError", true)
+      }
+    },
   },
 }
 </script>
diff --git a/src/components/FormComponents/CustomForm/FormItemSelf.vue b/src/components/FormComponents/CustomForm/FormItemSelf.vue
index 1386e0a..51eb505 100644
--- a/src/components/FormComponents/CustomForm/FormItemSelf.vue
+++ b/src/components/FormComponents/CustomForm/FormItemSelf.vue
@@ -419,27 +419,6 @@ export default {
     type: String,
   },
   data() {
-    let checkAge = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error("请选择出生日期"))
-      }
-      let birthday = new Date(value.replace(/-/g, "/"))
-      let d = new Date()
-      let age =
-        d.getFullYear() -
-        birthday.getFullYear() -
-        (d.getMonth() < birthday.getMonth() ||
-        (d.getMonth() == birthday.getMonth() &&
-          d.getDate() < birthday.getDate())
-          ? 1
-          : 0)
-      console.log(age)
-      if (age < 18) {
-        callback(new Error("必须年满18岁"))
-      } else {
-        callback()
-      }
-    }
     return {
       pickerOptions,
       rangeOptions,
@@ -571,22 +550,22 @@ export default {
           }
         })
       } else {
-        let { birthday } = this.form
-        if (birthday) {
-          birthday = new Date(birthday.replace(/-/g, "/"))
-          let d = new Date()
-          let age =
-            d.getFullYear() -
-            birthday.getFullYear() -
-            (d.getMonth() < birthday.getMonth() ||
-            (d.getMonth() == birthday.getMonth() &&
-              d.getDate() < birthday.getDate())
-              ? 1
-              : 0)
-          console.log(age)
-          if (age == 0) {
-          }
-        }
+        // let { birthday } = this.form
+        // if (birthday) {
+        //   birthday = new Date(birthday.replace(/-/g, "/"))
+        //   let d = new Date()
+        //   let age =
+        //     d.getFullYear() -
+        //     birthday.getFullYear() -
+        //     (d.getMonth() < birthday.getMonth() ||
+        //     (d.getMonth() == birthday.getMonth() &&
+        //       d.getDate() < birthday.getDate())
+        //       ? 1
+        //       : 0)
+        //   console.log(age)
+        //   if (age == 0) {
+        //   }
+        // }
       }
     },
     // 自定义方法规则
@@ -706,6 +685,9 @@ export default {
     handleChange(val) {
       this.checkboxRepel(val)
       this.handleAlgorithm()
+      // 该操作判断是否符合筛查条件
+      this.$emit("formChange")
+      // ['is_one_year','is_subtotal_history','is_ppi','is_symptom','is_subtotal_history','is_disease','is_tumour']
     },
   },
 }
diff --git a/src/components/FormComponents/CustomForm/index.vue b/src/components/FormComponents/CustomForm/index.vue
index 0de777b..8e1c7b6 100644
--- a/src/components/FormComponents/CustomForm/index.vue
+++ b/src/components/FormComponents/CustomForm/index.vue
@@ -37,16 +37,21 @@
           ></form-content>
         </el-tab-pane>
       </el-tabs>
-
+      <!-- 表单的折叠组件 -->
       <el-collapse v-else v-model="collapseNames">
         <template v-for="(g, gIndex) in options.group">
           <el-collapse-item
             v-show="g.display"
             :key="gIndex"
-            :title="g.label"
             :name="g.prop"
             :disabled="!g.arrow"
           >
+            <template slot="title">
+              {{ g.label }}
+              <span v-if="g.label == '二、排除标准'" class="noCol">{{
+                errorText
+              }}</span>
+            </template>
             <form-content
               v-if="collapseNames.includes(g.prop)"
               ref="form-content"
@@ -54,6 +59,7 @@
               :columns="g"
               :options="options"
               :is-show-important="isShowImportant"
+              @showError="showError"
             ></form-content>
           </el-collapse-item>
         </template>
@@ -64,9 +70,10 @@
         <template v-if="options.submitBtn">
           <el-button
             type="primary"
-            icon="el-icon-check"
+            :icon="options.submitText == '提交' ? 'el-icon-check' : ''"
             :loading="loading"
             size="large"
+            :disabled="disabled"
             @click="handleConfirm"
           >
             {{ options.submitText || "提交" }}
@@ -146,6 +153,8 @@ export default {
       loading: false,
       isShowImportant: false,
       form: {},
+      errorText: "",
+      disabled: false,
     }
   },
   computed: {
@@ -169,6 +178,16 @@ export default {
   },
 
   methods: {
+    // 显示不符合筛查条件
+    showError(data) {
+      if (data) {
+        this.disabled = true
+        this.errorText = "不符合筛查条件"
+      } else {
+        this.disabled = false
+        this.errorText = ""
+      }
+    },
     nextTab() {
       const tabsLen = this.options.group.length
       let active = Number(this.activeName)
@@ -371,4 +390,9 @@ export default {
   // background-color: $base-color-default;
   // border-color: $base-color-default;
 }
+.noCol {
+  font-size: 12px;
+  font-family: AlibabaPuHuiTiR;
+  color: #ff4d4f;
+}
 </style>
diff --git a/src/views/screening/components/ConfigForms.vue b/src/views/screening/components/ConfigForms.vue
index 1689c2c..6459c6a 100644
--- a/src/views/screening/components/ConfigForms.vue
+++ b/src/views/screening/components/ConfigForms.vue
@@ -1,37 +1,41 @@
 <template>
   <div id="publicContent">
-    <el-tabs
-      v-model="activeName"
-      type="card"
-      style="margin-top: 10px"
-      class="publicTab"
-      v-loading="fromLoading"
-      v-if="formTabs && formTabs.length > 0"
-      @tab-click="handleTabClick"
-    >
-      <el-tab-pane
-        :label="form.label"
-        :name="'index' + index"
-        v-for="(form, index) in formTabs"
-        :key="form.id"
+    <div v-if="formTabs && formTabs.length > 0">
+      <el-button class="draftButton">{{
+        formType == 1 ? "临时保存" : "返回"
+      }}</el-button>
+      <el-tabs
+        v-model="activeName"
+        type="card"
+        :style="{ width: formType == 1 ? '100%' : 'calc(100% - 200px)' }"
+        class="publicTab"
+        v-loading="fromLoading"
+        @tab-click="handleTabClick"
       >
-        <transition mode="out-in" name="fade-transform">
-          <div v-show="activeName === 'index' + index">
-            <template v-if="form.formId">
-              <form-tab
-                :patient-id="patientId"
-                :patient-standby-id="patientStandbyId"
-                :form="form"
-                :disabled="disabled"
-                contrast
-                @setFormJson="setFormJson"
-                @handleConfirm="handleConfirm"
-              ></form-tab>
-            </template>
-          </div>
-        </transition>
-      </el-tab-pane>
-    </el-tabs>
+        <el-tab-pane
+          :label="form.label"
+          :name="'index' + index"
+          v-for="(form, index) in formTabs"
+          :key="form.id"
+        >
+          <transition mode="out-in" name="fade-transform">
+            <div v-show="activeName === 'index' + index">
+              <template v-if="form.formId">
+                <form-tab
+                  :patient-id="patientId"
+                  :patient-standby-id="patientStandbyId"
+                  :form="form"
+                  :disabled="disabled"
+                  contrast
+                  @setFormJson="setFormJson"
+                  @handleConfirm="handleConfirm"
+                ></form-tab>
+              </template>
+            </div>
+          </transition>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
     <el-empty v-else description="暂无数据"></el-empty>
   </div>
 </template>
@@ -65,12 +69,24 @@ export default {
 <style lang="scss" scoped>
 #publicContent {
   padding: 32px 24px;
+  position: relative;
+  .draftButton {
+    position: absolute;
+    top: 46px;
+    right: 40px;
+    z-index: 999999;
+    border-radius: 4px;
+    border: 1px solid #4e68ff;
+    color: #4e68ff;
+  }
 }
 .publicTab {
-  width: calc(100% - 200px);
+  // width: calc(100%);
+  margin-top: 10px;
 }
 ::v-deep {
   .el-tabs--card > .el-tabs__header {
+    width: calc(100% - 100px);
     border-bottom: none;
   }
   .el-tabs--card > .el-tabs__header .el-tabs__nav {
diff --git a/src/views/screening/components/FormTab.vue b/src/views/screening/components/FormTab.vue
index a3b2845..a978e37 100644
--- a/src/views/screening/components/FormTab.vue
+++ b/src/views/screening/components/FormTab.vue
@@ -1,13 +1,13 @@
 <template>
   <el-container>
     <el-main v-loading="pageLoading" class="transition-box">
-      <i
+      <!-- <i
         v-if="contrast"
         :class="asideShow ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
         :title="asideShow ? '收起' : '展开'"
         class="arrow"
         @click="asideShow = !asideShow"
-      ></i>
+      ></i> -->
       <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
       <template v-if="!isEmpty">
         <!-- 多次记录 -->
@@ -23,7 +23,7 @@
           ></tags-scroll-bar>
         </el-row>
         <el-row class="header">
-          <template v-if="formData.percent.autoPercent">
+          <!-- <template v-if="formData.percent.autoPercent">
             <span class="label">自动采集完整度：</span>
             <span class="value">{{ formData.percent.autoPercent }}%</span>
           </template>
@@ -32,7 +32,7 @@
             <span class="value"
               >{{ formData.percent.personalPercent }}%</span
             ></template
-          >
+          > -->
 
           <div class="label">
             <!-- 仅显示重要字段 ： -->
-- 
2.22.0