级联

src/views/XMHJC/product/category/index.vue

@@ -21,7 +21,55 @@
       </byTable>
     </div>
     <el-dialog :title="modalType == 'add' ? '新增' : '编辑'" v-model="dialogVisible" width="800" v-loading="loading">
-      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform"> </byForm>
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
+        <template #subCategorySlot>
+          <el-row style="width: 100%;margin-bottom: 10px"   v-for="(row, index) in formData.data.subCategoryList" ref="sort">
+            <el-col :span="6" >
+              <el-form-item
+                  :prop="'subCategoryList.' + index + '.name'"
+                  :rules="rules.subName"
+                  prop="name"
+                  style="margin: 8px 0 8px 0">
+                <el-input v-model="row.name" placeholder="请输入子类目" :controls="false" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="5"  style="margin-left: 8px;">
+              <el-form-item
+                  :prop="'subCategoryList.' + index + '.code'"
+                  prop="name"
+                  style="margin: 8px 0 8px 0">
+                <el-input v-model="row.code" placeholder="请输入子类目编号" :controls="false" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="5" >
+              <el-form-item
+                  :prop="'subCategoryList.' + index + '.status'"
+                  :rules="rules.subStatus" style="margin-left: 8px;transform: translateY(8px)"
+                  prop="status">
+                <el-select v-model="row.status" placeholder="请选择状态" >
+                  <el-option v-for="item in enableStatus" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5" >
+              <el-form-item
+                  :prop="'subCategoryList.' + index + '.sort'"
+                  :rules="rules.subSort" style="margin-left: 8px;transform: translateY(8px)"
+                  prop="sort">
+                <el-input-number v-model="row.sort" placeholder="请输入排序" :precision="0" :max="999"  :min="0" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2" >
+              <el-icon style="margin-left: 8px; color: red; cursor: pointer; transform: translateY(10px)" @click="clickDelete(index)"><Delete /></el-icon>
+            </el-col>
+          </el-row>
+          <el-row style="width: 100%">
+            <el-row>
+              <el-button type="primary" @click="clickAddSubCategory()">添加</el-button>
+            </el-row>
+          </el-row>
+        </template>
+      </byForm>
       <template #footer>
         <el-button @click="dialogVisible = false" size="large">取 消</el-button>
         <el-button type="primary" v-no-double-click="submitForm" size="large" :loading="submitLoading">确 定</el-button>
@@ -53,6 +101,11 @@ let modalType = ref("add");
 let rules = ref({
   name: [{ required: true, message: "请输入名称" }],
   status: [{ required: true, message: "请选择启用状态", trigger: "change" }],
+  sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
+
+  subName: [{ required: true, message: "请输入子类目", trigger: "blur" }],
+  subStatus: [{ required: true, message: "请输入子类目启用状态", trigger: "blur" }],
+  subSort: [{ required: true, message: "请输入子类目排序", trigger: "blur" }],
 });
 const { proxy } = getCurrentInstance();
 const config = computed(() => {
@@ -142,6 +195,7 @@ const config = computed(() => {
 let formData = reactive({
   data: {},
   treeData: [],
+  subCategoryList:[],
 });
 const formOption = reactive({
   inline: true,
@@ -182,6 +236,12 @@ const formConfig = computed(() => {
         width: "50%",
       },
     },
+    {
+      type: "slot",
+      slotName: "subCategorySlot",
+      prop: "subCategory",
+      label: "子类目",
+    },
   ];
 });
 const getList = async (req) => {
@@ -204,8 +264,7 @@ const openModal = () => {
 const submitForm = () => {
   byform.value.handleSubmit((valid) => {
     submitLoading.value = true;
-    proxy
-      .post("/productCategory/" + modalType.value, formData.data)
+    proxy.post("/productCategory/" + modalType.value, formData.data)
       .then((res) => {
         ElMessage({
           message: modalType.value == "add" ? "添加成功" : "编辑成功",
@@ -278,6 +337,28 @@ const getDictlist = async () => {
     value: x.dictKey,
   }));
 };
+
+//添加子类目
+const clickAddSubCategory = () => {
+  if (formData.data.subCategoryList && formData.data.subCategoryList.length > 0) {
+    const  sort = formData.data.subCategoryList[formData.data.subCategoryList.length-1].sort
+    formData.data.subCategoryList.push({
+      name: "",
+      sort: sort+10,
+    });
+  } else {
+    formData.data.subCategoryList = [
+      {
+        name: "",
+        sort: 10,
+      },
+    ];
+  }
+};
+
+const clickDelete = (index) => {
+  formData.data.subCategoryList.splice(index, 1);
+};
 getList();
 getDictlist();
 </script>

src/views/XMHJC/product/info/index.vue

@@ -91,6 +91,23 @@
                         />
                     </div>
                 </template>
+
+                <template #category>
+                    <div>
+                        <el-select
+                                v-model="formData.data.categoryId"
+                                placeholder="请选择产品类目"
+                                @change="(val) => getSubCategoryList(val)"
+                        >
+                            <el-option
+                                    v-for="item in productCategoryList"
+                                    :label="item.label"
+                                    :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </div>
+                </template>
             </byForm>
             <template #footer>
                 <el-button @click="dialogVisible = false" size="large">取 消</el-button>
@@ -113,6 +130,7 @@ const submitLoading = ref(false);
 const specDict = ref([]);
 const enableStatus = ref([]);
 const productCategoryList = ref([]);
+const productSubCategoryList = ref([]);
 const contentType = ref([]);
 const sourceList = ref({
     data: [],
@@ -125,6 +143,7 @@ const sourceList = ref({
 let dialogVisible = ref(false);
 let modalType = ref("add");
 let rules = ref({
+    categoryId: [{ required: true, message: "请选择产品类目" }],
     title: [{ required: true, message: "请输入标题" }],
     subheading: [{ required: true, message: "请输入副标题" }],
     name: [{ required: true, message: "请上传封面图片" }],
@@ -144,7 +163,20 @@ const config = computed(() => {
         {
             attrs: {
                 label: "产品类目",
-                prop: "title",
+                prop: "categoryId",
+            },
+            render(val) {
+                return proxy.dictValueLabel(val, productCategoryList.value);
+            },
+        },
+        {
+            attrs: {
+                label: "产品子类目",
+                prop: "subCategoryId",
+
+            },
+            render(val) {
+                return proxy.dictValueLabel(val, productSubCategoryList.value);
             },
         },
         {
@@ -236,6 +268,7 @@ let formData = reactive({
     data: {
         "contentImgList": [],
         "coverUrlList": [],
+        "categoryId": "",
     },
 });
 const formOption = reactive({
@@ -248,13 +281,21 @@ const byform = ref(null);
 const formConfig = computed(() => {
     return [
         {
-            type: "select",
+            type: "slot",
+            slotName: "category",
             prop: "categoryId",
             label: "产品类目",
             itemWidth: 100,
             data: productCategoryList.value,
         },
         {
+            type: "select",
+            prop: "subCategoryId",
+            label: "产品子类目",
+            itemWidth: 100,
+            data: productSubCategoryList.value,
+        },
+        {
             type: "input",
             prop: "title",
             label: "标题",
@@ -451,13 +492,22 @@ const getDictlist = async () => {
             pageNum: 1,
             pageSize: 99999,
             status: 1,
-        })
-        .then((res) => {
+        }).then((res) => {
             productCategoryList.value = res.rows.map((x) => ({
                 label: x.name,
                 value: x.id,
             }));
         });
+    // proxy.post("/productSubCategory/page", {
+    //     pageNum: 1,
+    //     pageSize: 99999,
+    //     status: 1,
+    // }).then((res) => {
+    //     productSubCategoryList.value = res.rows.map((x) => ({
+    //         label: x.name,
+    //         value: x.id,
+    //     }));
+    // });
 };
 
 
@@ -508,6 +558,22 @@ const coverUrlSuccess = (response, uploadFile) => {
     ];
 };
 
+const getSubCategoryList = (val) => {
+    productSubCategoryList.value = [];
+    proxy.post("/productSubCategory/page", {
+        pageNum: 1,
+        pageSize: 99999,
+        status: 1,
+        categoryId: val,
+    }).then((res) => {
+        productSubCategoryList.value = res.rows.map((x) => ({
+            label: x.name,
+            value: x.id,
+        }));
+    });
+};
+
+
 getDictlist();
 getList();
 </script>

vite.config.js

@@ -39,7 +39,6 @@ export default defineConfig(({
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          // target: 'http://121.37.194.75:20006/test-api',
           target: 'http://localhost:9898/',
           // 正式地址
           // target:"http://139.159.251.109/prod-api",
@@ -47,7 +46,7 @@ export default defineConfig(({
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         },
         '/byteSailing': {
-          target: 'https://os.winfaster.cn/byteSailing',
+          target: 'http://localhost:9898/',
           // 正式地址
           // target:"http://139.159.251.109/prod-api",
           changeOrigin: true,