fixed 修改店铺经营类目为树形(二级)

src/views/business/GoodsManager/GoodsCategorys/index.vue

@@ -59,7 +59,7 @@
 	<el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row @selection-change="handleSelectionChange" v-if="refreshTable" :default-expand-all="isExpandAll" row-key="goodsCategoryGuid" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
       <el-table-column type="selection" width="50" align="center" />
 	  
-      <el-table-column prop="goodsCategoryName" label="名称" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="goodsCategoryName" label="名称" align="left" :show-overflow-tooltip="true" />
       <el-table-column prop="goodsCategoryImg" label="图片" align="center">
         <template #default="scope">
           <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain" :src="scope.row.goodsCategoryImg?.split(',')[0]" :preview-src-list="scope.row.goodsCategoryImg?.split(',')">

src/views/business/ShopManager/Shops/components/AddDialog.vue

@@ -30,14 +30,24 @@
             </el-input>
           </el-form-item>
         </el-col>
-        <el-col :lg="24">
+      </el-row>
+
+      <el-row>
+        <el-col :lg="12">
           <el-form-item :label-width="labelWidth" label="经营类目" prop="shopBusinessCategoryGuid">
-            <el-select v-model="formData.shopBusinessCategoryGuid" placeholder="请选择经营类目">
+            <el-cascader class="w100" :options="dataList"
-              <el-option v-for="item in  dataList " :key="item.goodsCategoryGuid" :label="item.goodsCategoryName"
+              :props="{ checkStrictly: false, value: 'goodsCategoryGuid', label: 'goodsCategoryName', emitPath: false }"
-                :value="item.goodsCategoryGuid"></el-option>
+              placeholder="请选择经营类目" clearable v-model="formData.shopBusinessCategoryGuid">
-            </el-select>
+              <template #default="{ node, data }">
+                <span>{{ data.goodsCategoryName }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
           </el-form-item>
         </el-col>
+      </el-row>
+
+      <el-row>
         <el-col :lg="12">
           <el-form-item :label-width="labelWidth" label="图标" prop="shopLogo">
             <UploadImage ref="uploadRef" v-model="formData.shopLogo" :data=imgData :limit="1" :fileSize="5"
@@ -93,7 +103,8 @@
 import { reactive, ref, watch } from "vue";
 import { ElMessage } from 'element-plus'
 import modal from '@/plugins/modal.js'
-import { addOrUpdateShop,getFirstGoodsCategoryList } from '@/api/business/ShopManager/Shops/shop.js';
+import { addOrUpdateShop, getFirstGoodsCategoryList } from '@/api/business/ShopManager/Shops/shop.js';
+import { goodsCategoryTreeList } from '@/api/business/GoodsManager/GoodsCategorys/goodsCategory.js';
 import ChooseCustomerDialog from './ChooseCustomerDialog.vue';
 import ChooseUserDialog from './ChooseUserDialog.vue';
 
@@ -131,7 +142,7 @@ async function getaudit_status() {
 
 // 获取经营类树形列表
 async function getTreeList() {
-  getFirstGoodsCategoryList().then((res) => {
+  goodsCategoryTreeList().then((res) => {
     if (res.code == 200) {
       dataList.value = res.data
     }

src/views/business/ShopManager/Shops/components/DetailDialog.vue

@@ -22,14 +22,24 @@
             <el-input v-model='formData.customerNickname' disabled type="text"></el-input>
           </el-form-item>
         </el-col>
-        <el-col :lg="24">
+      </el-row>
+
+      <el-row>
+        <el-col :lg="12">
           <el-form-item :label-width="labelWidth" label="经营类目" prop="shopBusinessCategoryGuid">
-            <el-select v-model="formData.shopBusinessCategoryGuid" placeholder="请选择经营类目">
+            <el-cascader class="w100" :options="dataList"
-              <el-option v-for="item in  dataList " :key="item.goodsCategoryGuid" :label="item.goodsCategoryName"
+              :props="{ checkStrictly: false, value: 'goodsCategoryGuid', label: 'goodsCategoryName', emitPath: false }"
-                :value="item.goodsCategoryGuid"></el-option>
+              clearable v-model="formData.shopBusinessCategoryGuid">
-            </el-select>
+              <template #default="{ node, data }">
+                <span>{{ data.goodsCategoryName }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
           </el-form-item>
         </el-col>
+      </el-row>
+
+      <el-row>
         <el-col :lg="12">
           <el-form-item :label-width="labelWidth" label="图标" prop="shopLogo">
             <UploadImage ref="uploadRef" v-model="formData.shopLogo" :data=imgData :limit="1" :fileSize="5"
@@ -72,6 +82,7 @@
 import { ElMessage } from 'element-plus'
 import { reactive, ref, watch } from "vue";
 import { getFirstGoodsCategoryList } from '@/api/business/ShopManager/Shops/shop.js';
+import { goodsCategoryTreeList } from '@/api/business/GoodsManager/GoodsCategorys/goodsCategory.js';
 
 
 // 打开弹窗时回调
@@ -108,7 +119,7 @@ async function getaudit_status() {
 
 // 获取经营类树形列表
 async function getTreeList() {
-  getFirstGoodsCategoryList().then((res) => {
+  goodsCategoryTreeList().then((res) => {
     if (res.code == 200) {
       dataList.value = res.data
     }

src/views/business/ShopManager/Shops/components/EditDialog.vue

@@ -21,14 +21,24 @@
             <el-input v-model='formData.customerNickname' disabled type="text"></el-input>
           </el-form-item>
         </el-col>
-        <el-col :lg="24">
+      </el-row>
+
+      <el-row>
+        <el-col :lg="12">
           <el-form-item :label-width="labelWidth" label="经营类目" prop="shopBusinessCategoryGuid">
-            <el-select v-model="formData.shopBusinessCategoryGuid" placeholder="请选择经营类目">
+            <el-cascader class="w100" :options="dataList"
-              <el-option v-for="item in  dataList " :key="item.goodsCategoryGuid" :label="item.goodsCategoryName"
+              :props="{ checkStrictly: false, value: 'goodsCategoryGuid', label: 'goodsCategoryName', emitPath: false }"
-                :value="item.goodsCategoryGuid"></el-option>
+              placeholder="请选择经营类目" clearable v-model="formData.shopBusinessCategoryGuid">
-            </el-select>
+              <template #default="{ node, data }">
+                <span>{{ data.goodsCategoryName }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
           </el-form-item>
         </el-col>
+      </el-row>
+
+      <el-row>
         <el-col :lg="12">
           <el-form-item :label-width="labelWidth" label="图标" prop="shopLogo">
             <UploadImage ref="uploadRef" v-model="formData.shopLogo" :data=imgData :limit="1" :fileSize="5"
@@ -72,7 +82,6 @@
       </div>
     </template>
   </el-dialog>
-
 </template>
 
 <script setup>
@@ -80,6 +89,7 @@ import { ElMessage } from 'element-plus'
 import modal from '@/plugins/modal.js'
 import { reactive, ref, watch } from "vue";
 import { addOrUpdateShop, getFirstGoodsCategoryList } from '@/api/business/ShopManager/Shops/shop.js';
+import { goodsCategoryTreeList } from '@/api/business/GoodsManager/GoodsCategorys/goodsCategory.js';
 
 // 打开弹窗时回调
 const openDialog = async () => {
@@ -115,7 +125,7 @@ async function getaudit_status() {
 
 // 获取经营类树形列表
 async function getTreeList() {
-  getFirstGoodsCategoryList().then((res) => {
+  goodsCategoryTreeList().then((res) => {
     if (res.code == 200) {
       dataList.value = res.data
     }