修改表单上传+审核页面开发

packages/FormConfig.vue

@@ -38,10 +38,10 @@
       <el-form-item label="多分组转标签">
         <el-switch v-model="data.tabs" active-color="#409EFF"></el-switch>
       </el-form-item>
-      <el-form-item label="显示跳转按钮" v-if="data.tabs">
+      <el-form-item v-if="data.tabs" label="显示跳转按钮">
         <el-switch v-model="data.nextTabBtn" active-color="#409EFF"></el-switch>
       </el-form-item>
-      <el-form-item label="跳转按钮的文字" v-if="data.tabs && data.nextTabBtn">
+      <el-form-item v-if="data.tabs && data.nextTabBtn" label="跳转按钮的文字">
         <el-input
           v-model="data.nextTabText"
           placeholder="跳转按钮的文字"
@@ -76,7 +76,10 @@
                      value="right"></el-option>
         </el-select>
       </el-form-item> -->
-      <el-form-item label="显示提交按钮" v-if="data.menuBtn">
+      <el-form-item v-if="data.menuBtn" label="显示上一步按钮">
+        <el-switch v-model="data.prevBtn" active-color="#409EFF"></el-switch>
+      </el-form-item>
+      <el-form-item v-if="data.menuBtn" label="显示提交按钮">
         <el-switch v-model="data.submitBtn" active-color="#409EFF"></el-switch>
       </el-form-item>
       <!-- <el-form-item label="提交按钮的大小"
@@ -92,8 +95,8 @@
         </el-select>
       </el-form-item> -->
       <el-form-item
-        label="提交按钮的文字"
         v-if="data.menuBtn && data.submitBtn"
+        label="提交按钮的文字"
       >
         <el-input
           v-model="data.submitText"
@@ -101,7 +104,7 @@
         ></el-input>
       </el-form-item>
 
-      <el-form-item label="显示清空按钮" v-if="data.menuBtn">
+      <el-form-item v-if="data.menuBtn" label="显示清空按钮">
         <el-switch v-model="data.emptyBtn" active-color="#409EFF"></el-switch>
       </el-form-item>
       <!-- <el-form-item label="清空按钮的大小"
@@ -116,7 +119,7 @@
                      value="mini"></el-option>
         </el-select>
       </el-form-item> -->
-      <el-form-item label="清空按钮的文字" v-if="data.menuBtn && data.emptyBtn">
+      <el-form-item v-if="data.menuBtn && data.emptyBtn" label="清空按钮的文字">
         <el-input
           v-model="data.emptyText"
           placeholder="清空按钮的文字"
@@ -152,7 +155,7 @@
 
 <script>
 export default {
-  name: "form-config",
+  name: "FormConfig",
   props: ["data"],
 }
 </script>

packages/config/date.vue

@@ -79,8 +79,8 @@ let checkAge = (rule, value, callback) => {
       ? 1
       : 0)
   console.log(age)
-  if (age < 18) {
-    callback(new Error("必须年满18岁"))
+  if (age < 40 || age > 80) {
+    callback(new Error("年龄不符合筛查条件"))
   } else {
     callback()
   }

src/components/FormComponents/CustomForm/FormItemSelf.vue

@@ -5,11 +5,14 @@
     :style="item.styles"
     :class="{ isDefects: defectsSet.includes(item.prop) }"
   >
-    <el-col :lg="item.width">
+    <el-col
+      :lg="item.width"
+      :style="{ height: item.type === 'upload' ? '116px' : '53px' }"
+    >
       <div v-if="showIndex" class="formIndex">
-        {{ columnIndex + 1 }}
+        {{ item.labelSuffix || columnIndex + 1 }}
       </div>
-      <el-form-item
+      <!-- <el-form-item
         :label="
           !hiddenLabel && item.label
             ? `${item.label}${item.labelSuffix || ''}`
@@ -19,6 +22,13 @@
         :prop="item.prop"
         :rules="item.rules"
         :class="isEmpty"
+      > -->
+      <el-form-item
+        :label="!hiddenLabel && item.label ? `${item.label}` : ''"
+        :label-width="item.labelWidth ? `${item.labelWidth}px` : ''"
+        :prop="item.prop"
+        :rules="item.rules"
+        :class="isEmpty"
       >
         <div class="flex">
           <div>
@@ -701,7 +711,6 @@ export default {
 
   .el-col {
     height: 100%;
-    height: 53px;
     display: flex;
     align-items: center;
   }
@@ -710,6 +719,7 @@ export default {
     height: 100%;
     background: #fafafa;
     border-right: 1px solid #ccc;
+    font-size: 14px;
     justify-content: center;
     display: flex;
     align-items: center;

src/components/FormComponents/CustomForm/index.vue

@@ -68,6 +68,17 @@
     </template>
     <div class="form-footer">
       <template v-if="options.menuBtn">
+        <template v-if="options.prevBtn">
+          <el-button
+            type="primary"
+            :loading="loading"
+            size="large"
+            :disabled="disabled"
+            @click="onPrev"
+          >
+            上一步
+          </el-button>
+        </template>
         <template v-if="options.submitBtn">
           <el-button
             type="primary"
@@ -230,7 +241,12 @@ export default {
         func(valid, () => {})
       })
     },
-
+    onPrev() {
+      this.$emit("onPrev", () => {
+        // 完成之后的回调
+        this.loading = false
+      })
+    },
     handleConfirm() {
       this.loading = true
       this.$refs.form.validate((valid) => {
@@ -263,6 +279,7 @@ export default {
             }
           })
           this.$emit("handleConfirm", data, () => {
+            // 完成之后的回调
             this.loading = false
           })
         } else {
@@ -365,10 +382,10 @@ export default {
       border-right: 1px solid #e5e5e5;
       // border-bottom: 1px solid #e5e5e5 !important;
       padding: 0px;
-      &:hover {
-        // background-color: #ecf8ff;
-        // outline: 1px dashed #ccc;
-      }
+      // &:hover {
+      // background-color: #ecf8ff;
+      // outline: 1px dashed #ccc;
+      // }
     }
     .el-collapse-item__header {
       font-size: 16px;

src/components/Upload/index.vue

@@ -2,6 +2,7 @@
   <el-row class="el-upload-self">
     <el-upload
       :multiple="multiple"
+      class="avatar-uploader"
       ref="upload"
       :action="action"
       :headers="headers"
@@ -28,7 +29,9 @@
       </template>
 
       <template v-else>
-        <el-button size="middle" :type="btnType">点击上传</el-button>
+        <!-- <el-button size="middle" :type="btnType">点击上传</el-button> -->
+        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
+        <i class="el-icon-plus avatar-uploader-icon"></i>
       </template>
       <div slot="tip" class="el-upload__tip">{{ tip }}</div>
     </el-upload>
@@ -220,4 +223,31 @@ export default {
 .el-upload-self {
   font-size: 14px;
 }
+.avatar-uploader {
+  display: flex;
+  align-items: center;
+}
+::v-deep .avatar-uploader .el-upload {
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+::v-deep .avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 88px;
+  height: 88px;
+  line-height: 88px;
+  text-align: center;
+}
+.avatar {
+  width: 88px;
+  height: 88px;
+  display: block;
+}
 </style>

src/router/index.js

@@ -40,6 +40,19 @@ export const constantRoutes = [
   //   hidden: true,
   //   name: "login",
   // },
+  {
+    path: "/auditdetail",
+    component: Layout,
+    children: [
+      {
+        path: "/auditdetail",
+        component: () => import("@/views/audit-detail/index"),
+        hidden: true,
+        name: "auditdetail",
+      },
+    ],
+  },
+  // 审核详情
   {
     path: "/followupentry",
     component: Layout,

src/views/audit-detail/components/publicDialog.vue

+<template>
+  <div>
+    <el-dialog
+      center
+      :visible.sync="dialogVisible"
+      width="30%"
+      show-close
+      @closed="cancelSubmit"
+    >
+      <slot name="content"></slot>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancelSubmit">取 消</el-button>
+        <el-button type="primary" @click="onSubmit" :loading="loading"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return { dialogVisible: false, loading: false }
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    cancelSubmit() {
+      this.dialogVisible = false
+      this.$emit("onCancel")
+    },
+    onSubmit() {
+      this.$emit("onSubmit")
+    },
+  },
+}
+</script>
+<style lang="scss" scoped></style>

src/views/audit-detail/index.vue

+<template>
+  <div id="audit-detail">
+    <div class="audit-detail_header p-24">
+      <div class="left">
+        <span>当前审核</span>
+        <span class="f-b">【无锡市人民医院医联体】【剩余7】</span>
+      </div>
+      <div class="right">
+        <el-button class="btn">返回</el-button>
+      </div>
+    </div>
+    <div class="choose-handle p-24">
+      <span>请选择审核结果:</span>
+      <div class="btn_group">
+        <el-button
+          v-for="(item, index) in btnGroup"
+          :key="index"
+          type="primary"
+          class="p-btn"
+          size="medium"
+          @click="showDialog(item.value)"
+          >{{ item.text }}</el-button
+        >
+      </div>
+    </div>
+    <div class="table-content p-24">
+      <!-- <component :is="curComponent"></component> -->
+    </div>
+    <public-dialog ref="publicDialog" @onSubmit="onSubmit" @onCancel="onCancel">
+      <template v-if="!confirmStatus" slot="content">
+        <span class="tips">确定提交审核?</span>
+      </template>
+      <template v-if="confirmStatus" slot="content">
+        {{ btnGroup[curBtn - 1].text }}
+      </template>
+    </public-dialog>
+  </div>
+</template>
+<script>
+import publicDialog from "./components/publicDialog.vue"
+export default {
+  components: { publicDialog },
+  data() {
+    return {
+      btnGroup: [
+        {
+          text: "合格",
+          value: 1,
+        },
+        {
+          text: "不合格",
+          value: 2,
+        },
+        {
+          text: "驳回修改",
+          value: 3,
+        },
+      ],
+      curBtn: 0,
+      curComponent: "",
+      confirmStatus: false,
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    showDialog(val) {
+      this.curBtn = val
+      this.$refs.publicDialog.dialogVisible = true
+    },
+    onSubmit() {
+      this.confirmStatus = true
+      // this.$refs.publicDialog.dialogVisible = true
+    },
+    onCancel() {
+      this.confirmStatus = false
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  border-top: none;
+  text-align: center;
+  .tips {
+    font-size: 16px;
+  }
+}
+.p-24 {
+  padding: 0 24px;
+}
+.f-b {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+#audit-detail {
+  // padding: 22px 24px;
+  .audit-detail_header {
+    height: 65px;
+    border-bottom: 1px solid #f3f3f3;
+    line-height: 65px;
+    display: flex;
+    justify-content: space-between;
+    .right {
+      .btn {
+        width: 80px;
+        height: 32px;
+        border-radius: 4px;
+      }
+    }
+  }
+  .choose-handle {
+    width: 100%;
+    height: 72px;
+    line-height: 72px;
+    font-size: 14px;
+    font-family: AlibabaPuHuiTiM;
+    color: #333333;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
+    display: flex;
+    .btn_group {
+      margin-left: 24px;
+      ::v-deep .p-btn {
+        width: 100px;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+</style>

src/views/audit-qualitycontrol/community.vue

@@ -104,6 +104,12 @@ export default {
     },
     auditHandle(data, i) {
       console.log(data, i)
+      this.$router.push({
+        path: "/auditdetail",
+        query: {
+          id: i,
+        },
+      })
     },
   },
 }

src/views/screening/components/ConfigForms.vue

@@ -29,6 +29,7 @@
                   contrast
                   @setFormJson="setFormJson"
                   @handleConfirm="handleConfirm"
+                  @onPrev="onPrev"
                 ></form-tab>
               </template>
             </div>
@@ -59,6 +60,9 @@ export default {
     handleConfirm(data, done, cb) {
       this.addPatient(data, done, cb)
     },
+    onPrev(done) {
+      this.prevTab(done)
+    },
   },
   created() {
     // 字典formType 1 筛查表单

src/views/screening/components/FormTab.vue

@@ -52,6 +52,7 @@
             @scrollTop="scrollTop"
             :options="widgetFormPreview"
             @handleConfirm="handleConfirm"
+            @onPrev="onPrev"
             :form-edit="formData.formEdit"
           ></custom-form>
         </div>
@@ -216,6 +217,9 @@ export default {
         }
       )
     },
+    onPrev(done) {
+      this.$emit("onPrev", done)
+    },
 
     getPatientDetail() {
       this.$nextTick(() => {

src/views/screening/components/mixin.js

@@ -22,6 +22,23 @@ export default {
   },
 
   methods: {
+    nextTab() {
+      let i = this.activeName.split("index")[1] - 0
+      i++
+      if (i == 5) {
+        return
+      } else {
+        this.activeName = "index" + i
+        this.handleTabClick({ index: i, name: "" })
+      }
+    },
+    prevTab(done) {
+      let i = this.activeName.split("index")[1] - 0
+      i--
+      this.activeName = "index" + i
+      this.handleTabClick({ index: i, name: "" })
+      done()
+    },
     handleTabClick({ index, name }) {
       const { formId, id, silent } = this.formTabs[index]
       if (formId && silent) {
@@ -49,6 +66,7 @@ export default {
         })
         .finally((e) => {
           done()
+          this.nextTab()
         })
     },