update

src/components/pages/testPerson/info/infoDialog/index.vue

@@ -10,46 +10,36 @@
             <input type="file" accept="image/*" capture="camera" style="display: none" @change="beforeUpload($event)" />
           </div>
         </div>
-        <div class="info_span" style="display: block;align-items: center;flex-wrap: wrap;margin-left: 15px;margin-top: 0px;">
-          <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
-            <span style="width: 48px;">姓名：</span>
-            <el-input v-model="info.username" placeholder="请输入姓名" :style="{ width: '223px' }"></el-input>
-          </div>
+        <div class="info_span">
+          <span>姓名：</span>
+          <el-input v-model="info.username" placeholder="请输入姓名"></el-input>
         </div>
         <div class="info_span">
-          <div style="display: flex;justify-content: center;align-items: center;">
-            <span >教研室：</span>
-            <el-select v-model="typeId"  multiple placeholder="类型" :style="{ width: '223px',marginLeft: '7px' }">
-              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
-            </el-select>
-          </div>
+          <span>教研室：</span>
+          <el-select v-model="info.teacherOffice"  multiple placeholder="类型" @change="Ochange">
+            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
         </div>
 
-        <div class="info_span" style="display: block;align-items: center;flex-wrap: wrap;margin-left: 15px;margin-top: 0px;">
-          <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;"
-            v-for="item in teaType" :key="item.id">
-            <div style="width: 49px;">
-              {{ item.name + "：" }}
-            </div>
-            <el-select @change="cha" v-model="item.value" multiple collapse-tags style="width:223px;"
-              placeholder="请选择">
-              <el-option v-for="i in item.child" :key="i.id" :label="i.name" :value="i.id">
-              </el-option>
-            </el-select>
-          </div>
+        <div class="info_span" v-for="item in teaType" :key="item.id">
+          <span>
+            {{ item.name + "：" }}
+          </span>
+          <el-select v-model="item.value" multiple :placeholder="'请选择'+item.name" @change="Ochange">
+            <el-option v-for="i in item.child" :key="i.id" :label="i.name" :value="i.id">
+            </el-option>
+          </el-select>
         </div>
-        <div class="info_span" style="margin-left: 22px;margin-top: 0px;">
-          <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
-            <span style="width: 67px;">简介：</span>
-            <textarea
-              v-autoHeight="68"
-              rows="2"
-              class="binfo_input binfo_textarea"
-              cols
-              v-model="info.intro"
-              placeholder="想说点什么..."
-            ></textarea>
-          </div>
+        <div class="info_span">
+          <span>简介：</span>
+          <textarea
+            v-autoHeight="68"
+            rows="2"
+            class="binfo_input binfo_textarea"
+            cols
+            v-model="info.intro"
+            placeholder="想说点什么..."
+          ></textarea>
         </div>
 
 
@@ -81,7 +71,7 @@ export default {
   watch: {
     dialogVisibleInfo(newVal) {
       if (newVal) {
-        this.getClass2();
+        this.getTypeInfo();
 
       }
     }
@@ -119,33 +109,13 @@ export default {
     };
   },
   mounted() {
-    this.getTeacherType();
     this.$nextTick();
-    this.getTypeInfo();
 
   },
   methods: {
     cha(rows) {
       this.$forceUpdate();
     },
-    //获取教研室
-    getTeacherType() {
-      let params = {
-        cu: '',
-        oid: this.oid,
-        cn: '',
-        pid: '6'
-      };
-      this.ajax
-        .get(this.$store.state.api + "selectPerInfoTeacherOffice", params)
-        .then((res) => {
-          this.options = res.data[0];
-          console.log("options", this.options);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
     //获取分类类名
     getTypeInfo() {
       let params = {
@@ -154,6 +124,7 @@ export default {
       this.ajax
         .get(this.$store.state.api + "selectPerInfoAllTea", params)
         .then((res) => {
+          
           this.teaType = res.data[0];
           let typeInfo = res.data[1];
 
@@ -167,6 +138,8 @@ export default {
             })
           })
           console.log(this.teaType, "teaType");
+          this.options = res.data[2];
+          this.getData();
 
         })
         .catch((err) => {
@@ -187,12 +160,12 @@ export default {
       const selectedValues = this.teaType.flatMap(item => item.value);
 
       // 确保 typeId 是数组，将其添加到 selectedValues 中
-      const combinedValues = Array.isArray(this.typeId)
-        ? selectedValues.concat(this.typeId)
-        : selectedValues.concat([this.typeId]);
+      const combinedValues = Array.isArray(this.info.teacherOffice)
+        ? selectedValues.concat(this.info.teacherOffice)
+        : selectedValues.concat([this.info.teacherOffice]);
 
       // 将合并后的数组转换为逗号分隔的字符串
-      this.resultInfo = combinedValues.join(', ');
+      this.resultInfo = combinedValues.join(',');
 
 
     },
@@ -209,9 +182,7 @@ export default {
       let params = [{
         userid: this.userid,
         username: this.info.username,
-        cclassid: this.info.teacherOffice.join(","),
-        classroom: this.typeId,
-        typeInfo: this.resultInfo,
+        cclassid: this.resultInfo,
         job: this.info.job,
         subject: this.info.subject,
         intro: this.info.intro,
@@ -239,10 +210,20 @@ export default {
           this.info = res.data[0][0]
           this.info.teacherOffice = []
           let array = []
-          for (var i = 0; i < this.classJuri.length; i++) {
-            array.push(this.classJuri[i].id)
+          for (var i = 0; i < this.options.length; i++) {
+            array.push(this.options[i].id)
           }
           this.info.teacherOffice = this.arrayToArray(this.info.cclassid.split(','), array)
+          console.log(this.info.cclassid);
+          
+          this.teaType.forEach(e =>{
+            let array2 = []
+            for (var i = 0; i < e.child.length; i++) {
+              array2.push(e.child[i].id)
+            }
+            e.value = this.arrayToArray(this.info.cclassid.split(','), array2)
+          })
+          this.$forceUpdate();
         })
         .catch((err) => {
           console.error(err);
@@ -345,7 +326,7 @@ export default {
         .get(this.$store.state.api + "selectTeacherOfficeBySchool", params)
         .then((res) => {
           this.classJuri = res.data[0];
-          this.getData();
+          this.getTypeInfo();
         })
         .catch((err) => {
           this.isLoading = false;
@@ -463,14 +444,13 @@ export default {
 }
 
 .binfo_textarea {
-  border: 1px solid #dcdfe6;
+  border: 1px solid #C0C4CC;
   font-size: 16px;
   resize: none;
   /* background: #f6f6f6; */
   font-family: 'Microsoft YaHei';
   font-size: 14px;
   color: #606266;
-  padding-left: 35px;
 }
 
 .binfo_input:focus-visible {
@@ -503,16 +483,20 @@ export default {
   margin-left: 10px;
 }
 
-
 .info_span {
   display: flex;
   margin-top: 10px;
+  width: 350px;
 }
 
 .info_span>span:nth-child(1) {
-  margin-top: 10px;
   width: 100px;
-  text-align: center;
-  margin-left: 2px;
+  min-width: 100px;
+  text-align: right;
+  line-height: 40px;
+}
+
+.info_span>div {
+    width: 250px;
 }
 </style>