优化

src/main/h5/src/views/TrainingInstitution.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <van-form @submit="submit" :submit-on-enter="false">
+    <van-form ref="form" @submit="submit" :submit-on-enter="false">
       <van-popover v-model="showPopover" trigger="click">
         <template #reference>
           <van-field
@@ -29,12 +29,41 @@
         v-model="form.uscc"
         :rules="[{ required: true, message: '请填写注册号' }]"
       />
+      <van-field
+        name="是否从事文化艺术类校外培训"
+        label="是否从事文化艺术类校外培训"
+        :rules="[
+          {
+            validator: val => {
+              return val || val === false;
+            },
+            message: '请选择'
+          }
+        ]"
+      >
+        <template #input>
+          <van-radio-group
+            v-model="form.engagedInTraining"
+            direction="horizontal"
+          >
+            <van-radio :name="true"> 是</van-radio>
+            <van-radio :name="false">否</van-radio>
+          </van-radio-group>
+        </template>
+      </van-field>
       <div style="margin:30px" v-if="!form.id">
-        <van-button class="submit" round block type="info" @click="byUscc">
+        <van-button
+          class="submit"
+          native-type="button"
+          round
+          block
+          type="info"
+          @click="byUscc"
+        >
           查询
         </van-button>
       </div>
-      <template v-else>
+      <template v-else-if="form.engagedInTraining">
         <van-field
           type="textarea"
           name="经营范围"
@@ -129,78 +158,88 @@
           v-model="form.classroomNum"
           :rules="[{ required: true, message: '请填写教室数量' }]"
         />
-        <van-field
-          type="digit"
-          name="教师总数"
-          label="教师总数"
-          placeholder="请输入教师总数"
-          v-model="form.teacherNum"
-          :rules="[{ required: true, message: '请填写教师总数' }]"
-        />
-        <van-field
-          type="digit"
-          name="专职数量"
-          label="专职数量"
-          placeholder="请输入专职数量"
-          v-model="form.fullTimeNum"
-          :rules="[{ required: true, message: '请填写专职数量' }]"
-        />
-        <van-field
-          type="digit"
-          name="兼职数量"
-          label="兼职数量"
-          placeholder="请输入兼职数量"
-          v-model="form.partTimeNum"
-          :rules="[{ required: true, message: '请填写兼职数量' }]"
-        />
-        <van-field
-          type="digit"
-          name="音乐类"
-          label="音乐类"
-          placeholder="请输入音乐类"
-          v-model="form.musicNum"
-          :rules="[{ required: true, message: '请填写音乐类' }]"
-        />
-        <van-field
-          type="digit"
-          name="舞蹈类"
-          label="舞蹈类"
-          placeholder="请输入舞蹈类"
-          v-model="form.danceNum"
-          :rules="[{ required: true, message: '请填写舞蹈类' }]"
-        />
-        <van-field
-          type="digit"
-          name="美术类"
-          label="美术类"
-          placeholder="请输入美术类"
-          v-model="form.artNum"
-          :rules="[{ required: true, message: '请填写美术类' }]"
-        />
-        <van-field
-          type="digit"
-          name="戏剧戏曲"
-          label="戏剧戏曲"
-          placeholder="请输入戏剧戏曲"
-          v-model="form.theatreOperaNum"
-          :rules="[{ required: true, message: '请填写戏剧戏曲' }]"
-        />
-        <van-field
-          type="digit"
-          name="曲艺类"
-          label="曲艺类"
-          placeholder="请输入曲艺类"
-          v-model="form.folkMusicNum"
-          :rules="[{ required: true, message: '请填写曲艺类' }]"
-        />
-        <van-field
-          type="digit"
-          name="有教师资格证"
-          label="有教师资格证"
-          placeholder="请输入有教师资格证"
-          v-model="form.qualificationNum"
-          :rules="[{ required: true, message: '请填写有教师资格证' }]"
-        />
+
+        <div class="panel">
+          <van-divider content-position="left">教师人数统计</van-divider>
+          <van-field
+            type="digit"
+            name="专职数量"
+            label="专职数量"
+            placeholder="请输入专职数量"
+            v-model="form.fullTimeNum"
+            @change="changeNum"
+            :rules="[{ required: true, message: '请填写专职数量' }]"
+          />
+          <van-field
+            type="digit"
+            name="兼职数量"
+            label="兼职数量"
+            placeholder="请输入兼职数量"
+            v-model="form.partTimeNum"
+            @change="changeNum"
+            :rules="[{ required: true, message: '请填写兼职数量' }]"
+          />
+          <van-field
+            type="digit"
+            name="教师总数"
+            label="教师总数"
+            placeholder="请输入教师总数"
+            v-model="form.teacherNum"
+            :rules="[{ required: true, message: '请填写教师总数' }]"
+          />
+        </div>
+        <div class="panel">
+          <van-divider content-position="left">教师专业人数统计</van-divider>
+
+          <van-field
+            type="digit"
+            name="音乐类"
+            :label="`音乐类(教师总数:${form.teacherNum}人)`"
+            placeholder="请输入音乐类"
+            v-model="form.musicNum"
+            :rules="[{ required: true, message: '请填写音乐类' }]"
+          />
+          <van-field
+            type="digit"
+            name="舞蹈类"
+            :label="`舞蹈类(教师总数:${form.teacherNum}人)`"
+            placeholder="请输入舞蹈类"
+            v-model="form.danceNum"
+            :rules="[{ required: true, message: '请填写舞蹈类' }]"
+          />
+          <van-field
+            type="digit"
+            name="美术类"
+            :label="`美术类(教师总数:${form.teacherNum}人)`"
+            placeholder="请输入美术类"
+            v-model="form.artNum"
+            :rules="[{ required: true, message: '请填写美术类' }]"
+          />
+          <van-field
+            type="digit"
+            name="戏剧戏曲"
+            :label="`戏剧戏曲(教师总数:${form.teacherNum}人)`"
+            placeholder="请输入戏剧戏曲"
+            v-model="form.theatreOperaNum"
+            :rules="[{ required: true, message: '请填写戏剧戏曲' }]"
+          />
+          <van-field
+            type="digit"
+            name="曲艺类"
+            :label="`曲艺类(教师总数:${form.teacherNum}人)`"
+            placeholder="请输入曲艺类"
+            v-model="form.folkMusicNum"
+            :rules="[{ required: true, message: '请填写曲艺类' }]"
+          />
+          <van-field
+            type="digit"
+            name="有教师资格证"
+            :label="`有教师资格证(教师总数:${form.teacherNum}人)`"
+            placeholder="请输入有教师资格证"
+            v-model="form.qualificationNum"
+            :rules="[{ required: true, message: '请填写有教师资格证' }]"
+          />
+        </div>
         <van-field
           type="digit"
           name="年培训人数"
@@ -268,7 +307,8 @@ export default {
         examPoint: false
       },
       list: [],
-      showPopover: false
+      showPopover: false,
+      activeNames: "1"
     };
   },
 
@@ -303,22 +343,27 @@ export default {
         });
     },
     byUscc() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-        duration: 0
-      });
-      this.$http
-        .post(
-          `/trainingInstitution/byUscc?name=${this.form.name}&uscc=${this.form.uscc}`
-        )
-        .then(res => {
-          this.$toast.clear();
-          this.form = { ...res };
-        })
-        .catch(e => {
-          this.$toast(e.error);
+      this.$refs.form.validate().then(() => {
+        this.$toast.loading({
+          message: "加载中...",
+          forbidClick: true,
+          duration: 0
         });
+        this.$http
+          .post(
+            `/trainingInstitution/byUscc?name=${this.form.name}&uscc=${this.form.uscc}`
+          )
+          .then(res => {
+            this.$toast.clear();
+            this.form = { ...res, ...this.form };
+            if (!this.form.engagedInTraining) {
+              this.submit();
+            }
+          })
+          .catch(e => {
+            this.$toast(e.error);
+          });
+      });
     },
     choose(info) {
       this.form.name = info;
@@ -354,6 +399,12 @@ export default {
       let data = JSON.stringify({ ...this.form });
       window.localStorage.setItem("trainingInstitution", data);
       this.$toast.success("暂存成功");
+    },
+    changeNum() {
+      this.$nextTick(() => {
+        this.form.teacherNum =
+          Number(this.form.partTimeNum) + Number(this.form.fullTimeNum);
+      });
     }
   }
 };
@@ -404,4 +455,10 @@ export default {
     // margin-left: 13px;
   }
 }
+.panel {
+  padding: 30px 0;
+}
+.panel + .panel {
+  padding-top: 0;
+}
 </style>