1108

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

@@ -122,13 +122,52 @@
           label="单位性质"
           placeholder="请输入单位性质"
           v-model="form.category"
+          readonly
+          @click="showType = true"
         />
+
+        <van-action-sheet
+          v-model="showType"
+          :actions="types"
+          cancel-text="取消"
+          close-on-click-action
+          @select="onSelect"
+        />
+        <!-- <van-popup v-model="showArea" position="bottom">
+  <van-area
+    :area-list="areaList"
+    @confirm="onConfirm"
+    @cancel="showArea = false"
+  />
+</van-popup> -->
+
         <van-field
           name="专业种类"
           label="专业种类"
           placeholder="请输入专业种类"
-          v-model="form.specialty"
-        />
+        >
+          <template #input>
+            <van-checkbox-group v-model="form.specialty" direction="horizontal">
+              <van-checkbox
+                :name="item"
+                v-for="(item, index) in specialtyOptions"
+                :key="index"
+                >{{ item }}</van-checkbox
+              >
+              <div class="extra-content">
+                <van-checkbox class="extra" name="其他">其他</van-checkbox>
+                <van-field
+                  v-if="showExtra"
+                  class="input"
+                  type="text"
+                  placeholder="请输入"
+                  v-model="extra"
+                  size="small"
+                />
+              </div>
+            </van-checkbox-group>
+          </template>
+        </van-field>
         <van-field
           type="digit"
           name="培训点数量三楼及以下"
@@ -194,52 +233,103 @@
           <van-field
             type="digit"
             name="音乐类"
-            :label="音乐类"
+            label="音乐类"
             placeholder="请输入音乐类"
             v-model="form.musicNum"
-            :rules="[{ required: true, message: '请填写音乐类' }]"
+            @focus="focusNum('musicNum')"
+            @blur="blurNum('musicNum')"
+            @input="changeClass($event, 'musicNum')"
+            :rules="[
+              {
+                validator: val => {
+                  return !isMore;
+                },
+                message: '教师总数为' + form.teacherNum
+              }
+            ]"
           />
           <van-field
             type="digit"
             name="舞蹈类"
-            :label="舞蹈类"
+            label="舞蹈类"
             placeholder="请输入舞蹈类"
             v-model="form.danceNum"
-            :rules="[{ required: true, message: '请填写舞蹈类' }]"
+            @focus="focusNum('danceNum')"
+            @blur="blurNum('danceNum')"
+            @input="changeClass($event, 'danceNum')"
+            :rules="[
+              {
+                validator: val => {
+                  return !isMore;
+                },
+                message: '教师总数为' + form.teacherNum
+              }
+            ]"
           />
           <van-field
             type="digit"
             name="美术类"
-            :label="美术类"
+            label="美术类"
             placeholder="请输入美术类"
             v-model="form.artNum"
-            :rules="[{ required: true, message: '请填写美术类' }]"
+            @focus="focusNum('artNum')"
+            @blur="blurNum('artNum')"
+            @input="changeClass($event, 'artNum')"
+            :rules="[
+              {
+                validator: val => {
+                  return !isMore;
+                },
+                message: '教师总数为' + form.teacherNum
+              }
+            ]"
           />
           <van-field
             type="digit"
             name="戏剧戏曲"
-            :label="戏剧戏曲"
+            label="戏剧戏曲"
             placeholder="请输入戏剧戏曲"
             v-model="form.theatreOperaNum"
-            :rules="[{ required: true, message: '请填写戏剧戏曲' }]"
+            @focus="focusNum('theatreOperaNum')"
+            @blur="blurNum('theatreOperaNum')"
+            @input="changeClass($event, 'theatreOperaNum')"
+            :rules="[
+              {
+                validator: val => {
+                  return !isMore;
+                },
+                message: '教师总数为' + form.teacherNum
+              }
+            ]"
           />
           <van-field
             type="digit"
             name="曲艺类"
-            :label="曲艺类"
+            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: '请填写有教师资格证' }]"
+            @focus="focusNum('folkMusicNum')"
+            @blur="blurNum('folkMusicNum')"
+            @input="changeClass($event, 'folkMusicNum')"
+            :rules="[
+              {
+                validator: val => {
+                  return !isMore;
+                },
+                message: '教师总数为' + form.teacherNum
+              }
+            ]"
           />
         </div>
+
+        <van-field
+          type="digit"
+          name="有教师资格证"
+          label="有教师资格证"
+          placeholder="请输入有教师资格证"
+          v-model="form.qualificationNum"
+          :rules="[{ required: true, message: '请填写有教师资格证' }]"
+        />
         <van-field
           type="digit"
           name="年培训人数"
@@ -296,6 +386,8 @@
         </div>
       </template>
     </van-form>
+
+    <van-divider> 技术客服:18205083565</van-divider>
   </div>
 </template>
 
@@ -308,17 +400,44 @@ export default {
       },
       list: [],
       showPopover: false,
-      activeNames: "1"
+      activeNames: "1",
+      isMore: false,
+      showType: false,
+      types: [
+        { name: "企业" },
+        { name: "社会组织" },
+        { name: "事业单位" },
+        { name: "其他" }
+      ],
+      extra: "",
+      specialtyOptions: ["音乐类", "舞蹈类", "美术类", "戏曲戏剧类", "曲艺类"]
     };
   },
-
   mounted() {
     let data = JSON.parse(
       window.localStorage.getItem("trainingInstitution") || "{}"
     );
+    if (data.specialty) {
+      data.specialty = data.specialty.split(",");
+      data.specialty.forEach((item, index) => {
+        if (!this.specialtyOptions.includes(item)) {
+          data.specialty[index] = "其他";
+          this.extra = item;
+        }
+      });
+    }
     this.form = data;
   },
+  computed: {
+    showExtra() {
+      let special = [...this.form.specialty];
+      return special.includes("其他");
+    }
+  },
   methods: {
+    onSelect(val) {
+      this.form.category = val.name;
+    },
     like(info, key = "") {
       this.$toast.loading({
         message: "加载中...",
@@ -349,11 +468,19 @@ export default {
           forbidClick: true,
           duration: 0
         });
+        this.extra = "";
         this.$http
           .post(
             `/trainingInstitution/byUscc?name=${this.form.name}&uscc=${this.form.uscc}`
           )
           .then(res => {
+            res.specialty = res.specialty.split(",");
+            res.specialty.forEach((item, index) => {
+              if (!this.specialtyOptions.includes(item)) {
+                res.specialty[index] = "其他";
+                this.extra = item;
+              }
+            });
             this.$toast.clear();
             this.form = { ...res, ...this.form };
             if (!this.form.engagedInTraining) {
@@ -380,6 +507,15 @@ export default {
         duration: 0
       });
       let data = { ...this.form };
+      data.specialty.forEach((item, index) => {
+        if (!this.specialtyOptions.includes(item)) {
+          data.specialty[index] = this.extra;
+        }
+      });
+      data.specialty = data.specialty.filter(item => {
+        return item;
+      });
+      data.specialty = data.specialty.join(",");
       this.$http
         .post("/trainingInstitution/save", data, { body: "json" })
         .then(res => {
@@ -396,7 +532,17 @@ export default {
         });
     },
     saveWeb() {
-      let data = JSON.stringify({ ...this.form });
+      let form = { ...this.form };
+      form.specialty.forEach((item, index) => {
+        if (!this.specialtyOptions.includes(item)) {
+          form.specialty[index] = this.extra;
+        }
+      });
+      form.specialty = form.specialty.filter(item => {
+        return item;
+      });
+      form.specialty = form.specialty.join(",");
+      let data = JSON.stringify(form);
       window.localStorage.setItem("trainingInstitution", data);
       this.$toast.success("暂存成功");
     },
@@ -405,6 +551,41 @@ export default {
         this.form.teacherNum =
           Number(this.form.partTimeNum) + Number(this.form.fullTimeNum);
       });
+    },
+    changeClass(val, label) {
+      let keys = {
+        musicNum: "音乐类",
+        danceNum: "舞蹈类",
+        artNum: "美术类",
+        theatreOperaNum: "戏剧戏曲",
+        folkMusicNum: "曲艺类"
+      };
+      let total = Number(val);
+      Object.keys(keys).forEach(item => {
+        if (label !== item) {
+          total += Number(this.form[item]);
+        }
+      });
+      if (total > this.form.teacherNum) {
+        this.isMore = true;
+        this.$refs.form.validate(keys[label]);
+      } else {
+        this.isMore = false;
+      }
+    },
+    focusNum(key) {
+      if (!Number(this.form[key])) {
+        this.form[key] = "";
+      }
+    },
+    blurNum(key) {
+      this.form[key] = Number(this.form[key]);
+    },
+    changeExtra(val) {
+      console.log(val);
+      if (val) {
+        this.$refs.extra.focus();
+      }
     }
   }
 };
@@ -461,4 +642,31 @@ export default {
 .panel + .panel {
   padding-top: 0;
 }
+
+.van-checkbox {
+  margin-bottom: 5px;
+}
+.extra-content {
+  display: flex;
+  align-items: center;
+}
+.van-divider {
+  font-size: 16px;
+}
+
+/deep/.input {
+  margin: 0;
+  width: calc(100vw - 240px);
+  border: 1px solid #ccc;
+  padding: 0px 12px;
+  border-radius: 0;
+  .van-field__value {
+    margin-top: 0;
+    line-height: 24px;
+    font-size: 14px;
+  }
+}
+
+.tips {
+}
 </style>