refactor(bi/prd_tag): 修复新增编辑删除功能

.env.development

@@ -14,5 +14,5 @@ VITE_APP_ENV = 'development'
 VITE_APP_PUBLIC_PATH = '/'
 
 # 第三方服务回调地址
-VITE_APP_REDIRECT_URL = 'http://localhost:81/'
+VITE_APP_REDIRECT_URL = 'http://localhost:8080/'
 

src/components/CategoryTree/index.vue

@@ -7,10 +7,11 @@
       <div class="buttons_wrap">
         <!-- 扩展的按钮 -->
         <slot name="buttons"></slot>
-        <el-input v-model="searchValue"
+        <el-input v-model="queryParams.searchKey"
           :placeholder="placeholder"
           clearable
-          prefix-icon="Search" />
+          prefix-icon="Search"
+          @click.stop />
       </div>
       <div class="scroll"
         :class="{ 'row_gap': customOptions.rowGap }">
@@ -129,28 +130,28 @@ const props = defineProps({
 
 // 隐藏左侧分类框
 const hideSideBar = ref(false)
-// 搜索关键字
-const searchValue = ref('')
-// 上次点击的行对象-唯一值
-const lastRowId = ref(null)
+// 上次点击的行对象
 const lastRow = ref(null)
 // 分页参数
 const queryParams = reactive({
   pageNum: 1,
-  pageSize: 10
+  pageSize: 10,
+  searchKey: ''
 })
 const treeRef = ref(null)
 
-const emits = defineEmits(['update:modelValue', 'search', 'pageChange'])
+// search：让外部触发业务的搜索
+// listChange: 让外部重新搜索本分类列表数据
+const emits = defineEmits(['update:modelValue', 'search', 'listChange', 'flodEdit', 'flodDel'])
 
-watch(searchValue, (val) => {
+watch(() => queryParams.searchKey, (val) => {
   if (!props.customOptions.showPagination) {
     // 没有分页，用本地列表搜索
     treeRef.value.filter(val);
   } else {
     // 有分页，走外面接口搜索
     queryParams.searchKey = val
-    // emits('search', queryParams)
+    emits('listChange', queryParams)
   }
 })
 
@@ -159,7 +160,7 @@ watch(() => props.modelValue, (val) => {
   if (val) {
     nextTick(() => {
       treeRef.value.setCurrentKey(val)
-      lastRowId.value = val
+      lastRow[props.nodeKey] = val
     })
   }
 })
@@ -167,7 +168,6 @@ watch(() => props.modelValue, (val) => {
 // 点击空白位置-取消选中效果
 const cancelSel = () => {
   // 刚才有过点击的某行
-  console.log(666, lastRow.value)
   if (lastRow.value) {
     treeRef.value.setCurrentKey(null)
     lastRow.value = null
@@ -179,15 +179,13 @@ const cancelSel = () => {
 // 点击某行
 const handleNodeClick = (row) => {
   // 当前点击和上次点击一样->取消
-  if (lastRowId.value === row[props.nodeKey]) {
+  if (lastRow[props.nodeKey] === row[props.nodeKey]) {
     treeRef.value.setCurrentKey(null)
-    lastRowId.value = null
     lastRow.value = null
   } else {
-    lastRowId.value = row[props.nodeKey]
     lastRow.value = row
   }
-  emits('update:modelValue', lastRowId.value ? row[props.nodeKey] : '')
+  emits('update:modelValue', lastRow.value ? row[props.nodeKey] : '')
   emits('search', row)
 }
 
@@ -199,11 +197,11 @@ const filterNode = (value, data) => {
 
 // 分页逻辑触发
 const getPageList = () => {
-  emits('pageChange', queryParams)
+  emits('listChange', queryParams)
 }
 
 const handleClick = () => {
-  hideSideBar.value =!hideSideBar.value
+  hideSideBar.value = !hideSideBar.value
 }
 </script>
 

src/views/bi/competitor/sycm_store/index.vue

@@ -39,7 +39,7 @@
         </el-date-picker>
       </el-form-item>
     </el-form>
-    <div :class="{chart_wrap : showType === 'charts', table_wrap : showType === 'table'}"
+    <div :class="{ chart_wrap: showType === 'charts', table_wrap: showType === 'table' }"
       v-loading="loading">
       <template v-if="queryParams.brandList.length > 0 && queryParams.typeList.length > 0 && !loading">
         <template v-if="showType === 'charts'">
@@ -387,10 +387,11 @@ const reset = async () => {
 }
 </script>
 
-<style scoped lang="scss">
-.table_wrap{
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
+<style scoped
+  lang="scss">
+  .table_wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
 </style>
\ No newline at end of file

src/views/bi/prd_tag/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-row :gutter="20"
       class="client-fix-height container">
-      <!--商品分类-->
+      <!-- 商品标签列表 -->
       <category-tree :options="tagsOptions"
         :defaultProps="defaultProps"
         :nodeKey="nodeKey"
@@ -21,13 +21,14 @@
         @flodEdit="handleFlodEdit"
         @flodDel="handleFlodDel"
         @search="handleQuery"
-        @pageChange="getSeriesGoodsTagList">
+        @listChange="getSeriesGoodsTagList">
         <template #buttons>
           <el-button type="primary"
             icon="Plus"
             @click="handleAdd">新增</el-button>
         </template>
       </category-tree>
+      <!-- 标签下属商品 -->
       <el-col :span="10"
         :xs="24"
         class="right_col">
@@ -43,9 +44,9 @@
         </el-table>
       </el-col>
     </el-row>
-    <!-- 添加或修改商品-标签详情对话框 -->
+    <!-- 添加/修改-商品标签 -->
     <el-dialog :title="title"
-      v-model="open">
+      v-model="visible">
       <el-form ref="formRef"
         :model="form"
         :rules="rules"
@@ -58,10 +59,12 @@
         <el-form-item label="系列和商品"
           prop="seriesPrdMap">
           <el-cascader v-model="form.seriesPrdMap"
-            v-if="open"
+            v-if="visible"
             :options="seriesPrdOptions"
             :props="props"
+            :show-all-levels="false"
             collapse-tags
+            collapse-tags-tooltip
             clearable
             filterable
             popper-class="my_popper"></el-cascader>
@@ -81,32 +84,24 @@ import { getSeriesListAPI, getProductListAPI, createSeriesGoodsTagAPI, getSeries
 
 const { proxy } = getCurrentInstance();
 
-// 左侧-商品集合标签相关数据
-const formRef = ref(null)
-const tagsOptions = ref([]);
+const tagsOptions = ref([]); // 标签列表
 const defaultProps = reactive({
   children: 'children',
   label: 'prdTagName'
 });
 const nodeKey = 'prdTagId';
-// 查询参数
-const queryParams = reactive({
-  prdTagId: null
+const queryParams = reactive({ // 标签列表查询参数
+  tagNameLike: null,
+  pageNum: 1,
+  pageSize: 10
 });
-// 右侧-商品列表
-const prdList = ref([]);
-// 左侧-商品集合标签-刷新状态
-const flodLoading = ref(false);
-// 弹出层标题
-const title = ref('');
-// 是否显示弹出层
-const open = ref(false);
-// 表格数据遮罩层
-const loading = ref(true);
-// 商品集合标签-表单参数
-const form = ref({});
-// 商品集合标签-表单校验
-const rules = reactive({
+const prdList = ref([]); // 右侧-商品列表
+const flodLoading = ref(false); // 左侧-商品集合标签-刷新状态
+const title = ref(''); // 弹出层标题
+const visible = ref(false); // 是否显示弹出层
+const loading = ref(true); // 表格数据遮罩层
+const form = ref({}); // 商品集合标签-表单参数
+const rules = reactive({ // 商品集合标签-表单校验
   prdTagName: [
     { required: true, message: "标签名称不能为空", trigger: "blur" },
     { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }
@@ -115,38 +110,25 @@ const rules = reactive({
     { required: true, message: "系列和商品不能为空", trigger: "blur" }
   ]
 });
-// 左侧商品标签总数
-const tagTotal = ref(0);
+const tagTotal = ref(0); // 左侧商品标签总数
 
-// 级联选择器配置
-const props = reactive({
+const props = reactive({ // 级联选择器配置
   multiple: true,
   lazy: true,
   async lazyLoad(node, resolve) {
-    const { level } = node;
-    if (node.children?.length > 0) {
-      return resolve();
-    }
-    // 隐藏第二级列叶子节点没子菜单点击还加载的效果
-    if (level === 2) {
-      node.loading = false;
-      return resolve([]);
-    }
     const { data: { total } } = await getProductListAPI({ seriesId: node.value });
     const { data: { rows } } = await getProductListAPI({ seriesId: node.value, pageNum: 1, pageSize: total });
     const nodes = rows.map(item => ({
       value: item.prdCode,
       label: item.prdName,
-      leaf: true
+      leaf: true // 指定叶子节点
     }));
     // 通过调用resolve将子节点数据返回，通知组件数据加载完成
     resolve(nodes);
   }
 });
-// 系列和商品-级联数据
+// 级联数据-系列和商品
 const seriesPrdOptions = ref([]);
-
-// 获取系列数据列表
 const getSeriesList = async () => {
   const response = await getSeriesListAPI();
   seriesPrdOptions.value = response.data.map(obj => {
@@ -156,22 +138,23 @@ const getSeriesList = async () => {
     };
   });
 };
+getSeriesList();
 
-// 获取商品-标签集合列表
-const getSeriesGoodsTagList = async (params = { pageNum: 1, pageSize: 10 }) => {
-  const { data: { total, rows } } = await getSeriesGoodsTagListAPI({
-    ...params,
-    tagNameLike: params.searchKey
-  });
+// 商品标签-列表
+const getSeriesGoodsTagList = async (params) => {
+  Object.assign(queryParams, params)
+  queryParams.tagNameLike = params?.searchKey;
+  const { data: { total, rows } } = await getSeriesGoodsTagListAPI(queryParams);
   tagTotal.value = total;
   tagsOptions.value = rows;
   // 获取商品-标签指定第一个详情
-  queryParams.prdTagId = rows[0].prdTagId;
+  queryParams.prdTagId = rows[0]?.prdTagId;
 
   getTagDetailsList();
 };
+getSeriesGoodsTagList()
 
-/** 查询商品-标签详情列表 */
+/** 商品标签-详情 */
 const getTagDetailsList = async () => {
   loading.value = true;
   const response = await getPrdTagDetailAPI({
@@ -180,8 +163,9 @@ const getTagDetailsList = async () => {
   prdList.value = response.data;
   loading.value = false;
 };
+
+// 商品标签-编辑
 const handleFlodEdit = async (row) => {
-  reset();
   // 获取标签详情数据
   const res = await getPrdTagDetailAPI({
     prdTagId: row.prdTagId
@@ -207,18 +191,15 @@ const handleFlodEdit = async (row) => {
       obj.children = childrenRows
     }
   })
-  open.value = true;
-  title.value = "修改商品-标签详情";
   // ===== 回显数据 =====
-  nextTick(() => {
-    form.value.prdTagId = row.prdTagId
-    form.value.prdTagName = row.prdTagName
-    // 回显给数据绑定 v-model 的值
-    form.value.seriesPrdMap = res.data.map(obj => {
-      return [obj.seriesId, obj.prdCode]
-    })
-    form.value.seriesPrdMap = seriesPrdMap
+  form.value.prdTagId = row.prdTagId
+  form.value.prdTagName = row.prdTagName
+  // 回显给数据绑定 v-model 的值
+  form.value.seriesPrdMap = res.data.map(obj => {
+    return [obj.seriesId, obj.prdCode]
   })
+  visible.value = true;
+  title.value = "修改商品-标签详情";
 }
 // 商品集合标签点击-删除
 const handleFlodDel = async (row) => {
@@ -232,7 +213,7 @@ const handleFlodDel = async (row) => {
 }
 // 取消按钮
 const cancel = () => {
-  open.value = false;
+  visible.value = false;
   reset();
 }
 // 表单重置
@@ -242,22 +223,24 @@ const reset = () => {
     prdTagName: null,
     seriesPrdMap: null
   };
-  resetForm("form");
+  proxy.$refs.formRef.resetForm();
 }
-/** 商品集合标签点击-搜索右侧商品列表 */
+/** 商品标签点击 */
 const handleQuery = () => {
   queryParams.pageNum = 1;
   getTagDetailsList();
 }
-/** 新增按钮操作 */
+/** 新增商品标签 */
 const handleAdd = () => {
-  form.prdTagId && reset();
-  open.value = true;
-  title.value = "添加商品-标签详情";
+  visible.value = true;
+  nextTick(() => {
+    form.value.prdTagId && reset();
+    title.value = "添加商品-标签详情";
+  })
 }
 /** 提交按钮 */
 const submitForm = () => {
-  formRef.value.validate(valid => {
+  proxy.$refs.formRef.validate(valid => {
     if (valid) {
       // 数据结构要处理成后端需要的
       const uploadData = {
@@ -273,14 +256,14 @@ const submitForm = () => {
         deleteSeriesGoodsTagAPI(form.value.prdTagId).then(response => {
           createSeriesGoodsTagAPI(uploadData).then(response => {
             proxy.$modal.msgSuccess("修改成功");
-            open.value = false;
+            visible.value = false;
             getSeriesGoodsTagList();
           });
         });
       } else {
         createSeriesGoodsTagAPI(uploadData).then(response => {
           proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
+          visible.value = false;
           getSeriesGoodsTagList();
           reset();
         });
@@ -288,9 +271,6 @@ const submitForm = () => {
     }
   });
 }
-getSeriesList();
-getSeriesGoodsTagList()
-
 </script>
 
 <style scoped