官网分类

src/WebsiteManagement/marketproductMag/modules/add.vue

@@ -79,21 +79,7 @@
             </el-col>
             <el-col :span="24">
               <el-form-item :label="$t('分类')" prop="class">
-                <el-select
-                  v-model="form.class"
-                  clearable
-                  :placeholder="$t('请选择分类')"
-                  @focus="queryClass"
-                  style="width: 100%"
-                >
-                  <el-option
-                    v-for="item in classData"
-                    :key="item.value"
-                    :label="item.remarks"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
+                <el-cascader ref="selectdep" size="small" style="width: 100%" v-model="form.classmx" :options="classData" filterable :props="{emitPath:false,expandTrigger:'hover',checkStrictly:false,label:'remarks',value:'value',children:'subvalues'}"  clearable></el-cascader>
               </el-form-item>
             </el-col>
             <el-col :span="24">
@@ -152,17 +138,22 @@ export default {
         technicalparam: "",
         contentstr: "",
         isonsale: "1",
+        classmx:''
       },
       rules: {
         itemname: [
           { required: true, message: this.$t("请选择商品"), trigger: "change" },
         ],
-        class: [{ required: true,  message: this.$t( "请选择分类"), trigger: "change" }],
+        classmx: [{ required: true,  message: this.$t( "请选择分类"), trigger: "change" }],
       },
     };
   },
+  mounted() {
+  },
   methods: {
-    addBtn() {},
+    addBtn() {
+      this.queryClass()
+    },
     onSubmit() {
       this.$refs.form.validate(async (valid) => {
         if (!valid) return false;
@@ -195,13 +186,26 @@ export default {
       this.form.itemno = data.itemno;
     },
     async queryClass() {
-      if (this.classData.length == 0) {
-        const res = await this.$store.dispatch(
+      const res = await this.$store.dispatch(
           "optiontypeselect",
           "marketproductclass"
-        );
-        this.classData = res.data;
-      }
+      );
+      this.classData = []
+      this.classData = res.data.map(item => {
+        return {
+          value:item.value,
+          remarks:item.remarks,
+          subvalues:[]
+        }
+      })
+      res.data.forEach((item,index)=>{
+        this.classData[index].subvalues = item.subvalues.map(k=>{
+          return {
+            value:k,
+            remarks:k,
+          }
+        })
+      })
     },
     onClose() {
       this.loading = false;

src/WebsiteManagement/marketproductMag/modules/edit.vue

@@ -74,21 +74,7 @@
             </el-col>
             <el-col :span="24">
               <el-form-item :label="$t('分类')" prop="class">
-                <el-select
-                  v-model="form.class"
-                  clearable
-                  :placeholder="$t('请选择分类')"
-                  @focus="queryClass"
-                  style="width: 100%"
-                >
-                  <el-option
-                    v-for="item in classData"
-                    :key="item.value"
-                    :label="item.remarks"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
+                <el-cascader ref="selectdep" size="small" style="width: 100%" v-model="form.classmx" :options="classData" filterable :props="{emitPath:false,expandTrigger:'hover',checkStrictly:false,label:'remarks',value:'value',children:'subvalues'}"  clearable></el-cascader>
               </el-form-item>
             </el-col>
             <el-col :span="24">
@@ -166,6 +152,7 @@ export default {
   },
   methods: {
     async editBtn() {
+      this.queryClass()
       const res = await this.$api.requested({
         id: "20240920101403",
         content: {
@@ -220,13 +207,26 @@ export default {
       this.form.itemno = data.itemno;
     },
     async queryClass() {
-      if (this.classData.length == 0) {
-        const res = await this.$store.dispatch(
+      const res = await this.$store.dispatch(
           "optiontypeselect",
           "marketproductclass"
-        );
-        this.classData = res.data;
-      }
+      );
+      this.classData = []
+      this.classData = res.data.map(item => {
+        return {
+          value:item.value,
+          remarks:item.remarks,
+          subvalues:[]
+        }
+      })
+      res.data.forEach((item,index)=>{
+        this.classData[index].subvalues = item.subvalues.map(k=>{
+          return {
+            value:k,
+            remarks:k,
+          }
+        })
+      })
     },
     onClose() {
       this.loading = false;