refactor(prd_tag): 商品标签_样式重写

src/assets/styles/index.scss

@@ -131,6 +131,7 @@ aside {
   padding: 20px;
   >div{
     width: 100%;
+    padding: 20px;
   }
 }
 

src/components/CategoryTree/index.vue

@@ -15,7 +15,7 @@
       <div class="scroll"
         :class="{ 'row_gap': customOptions.rowGap }">
         <el-tree :data="options"
-          v-loading="loading"
+          v-loading="customOptions.loading"
           :props="defaultProps"
           :expand-on-click-node="false"
           :filter-node-method="filterNode"
@@ -35,10 +35,14 @@
             <span v-if="customOptions.showTool"
               class="edit_del">
               <span style="margin-right: 10px;">创建人：{{ data.createBy }}</span>
-              <i class="el-icon-edit"
-                @click.stop="$emit('flodEdit', data)"></i>
-              <i class="el-icon-delete"
-                @click.stop="$emit('flodDel', data)"></i>
+              <el-icon class="el-icon-edit"
+                @click.stop="$emit('flodEdit', data)">
+                <Edit />
+              </el-icon>
+              <el-icon class="el-icon-delete"
+                @click.stop="$emit('flodDel', data)">
+                <Delete />
+              </el-icon>
             </span>
           </template>
         </el-tree>
@@ -92,13 +96,9 @@ const props = defineProps({
     type: String,
     default: '搜索关键字'
   },
-  // 加载状态
-  loading: {
-    type: Boolean,
-    default: false
-  },
+
   // 选中某行数据对象
-  value: {
+  modelValue: {
     type: [Number, String],
     default: ''
   },
@@ -120,7 +120,9 @@ const props = defineProps({
       // 底部分页是否显示
       showPagination: false,
       // 分页数据总条数
-      total: 0
+      total: 0,
+      // 加载状态
+      loading: false
     })
   }
 })
@@ -153,7 +155,7 @@ watch(searchValue, (val) => {
 })
 
 // 如果有 v-model 则设置默认选中值
-watch(() => props.value, (val) => {
+watch(() => props.modelValue, (val) => {
   if (val) {
     nextTick(() => {
       treeRef.value.setCurrentKey(val)
@@ -203,61 +205,71 @@ const getPageList = () => {
   .el-col {
     padding: 0 !important;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    transition: all .3s;
+    position: relative;
 
     .content {
       height: 100%;
+      display: flex;
+      flex-direction: column;
+      border-right: 1px solid rgb(208, 208, 208);
 
+      /* 按钮集合 */
       .buttons_wrap {
-        padding-right: 10px;
+        display: flex;
+        gap: 50px;
+        margin-bottom: 20px;
       }
+
+      .scroll {
+        flex: 1;
+        overflow-y: scroll;
+
+        /* 灰色滚动条背景 */
+        &::-webkit-scrollbar-track {
+          background-color: transparent;
         }
       }
 
-  .el-tree{
-    font-size: var(--xl-fontsize);
+      /* 向左折叠的箭头 */
+      .arrow {
+        right: -5px;
       }
 
-
-  ::v-deep(.custom-tree-node) {
-    width: 100%;
+      .buttons_wrap {
         padding-right: 20px;
-    font-size: 14px;
+      }
 
       .edit_del {
-      float: right;
+        padding-right: 10px;
+        margin-left: auto;
+        font-size: calc(var(--xl-fontsize));
+        display: flex;
+        align-items: center;
 
         i {
-        margin-right: 5px;
-        font-size: 13px;
-      }
+          margin-right: 10px;
         }
       }
 
-  /* 间距放大 */
-  ::v-deep(.row_gap .el-tree-node .el-tree-node__content) {
-    padding: 10px 0;
-    height: auto;
-  }
+      .scroll {
+        display: flex;
+        flex-direction: column;
 
-  /* el-tree 取消选中时背景还有个颜色去掉 */
-  ::v-deep(.el-tree-node:focus>.el-tree-node__content) {
-    background-color: transparent;
+        .el-tree {
+          flex: 1;
+          font-size: var(--xl-fontsize);
         }
 
-  /* el-tree 选中时的背景色设置 */
-  ::v-deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
-    background-color: #edf6ff !important;
+        .pagination-container {
+          position: sticky;
+          bottom: 10px;
+          margin-top: auto;
+        }
       }
-
-  ::v-deep .el-input--small {
-    padding-right: 10px;
     }
-
-  .el-col {
-    display: flex;
-    flex-direction: column;
-    transition: all .3s;
-    position: relative;
 
     .arrow {
       position: absolute;
@@ -273,39 +285,34 @@ const getPageList = () => {
       background-color: white;
       z-index: 2;
     }
-
-    .content {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-
-      /* 按钮集合 */
-      .buttons_wrap {
-        display: flex;
-        gap: 50px;
-        margin-bottom: 20px;
   }
 
-      .scroll {
-        flex: 1;
-        overflow-y: scroll;
 
-        /* 灰色滚动条背景 */
-        &::-webkit-scrollbar-track {
-          background-color: transparent;
-        }
+
+  ::v-deep(.custom-tree-node) {
+    width: 100%;
+    padding-right: 20px;
+    font-size: 14px;
   }
 
-      /* 向左折叠的箭头 */
-      .arrow {
-        right: -5px;
+  /* 间距放大 */
+  ::v-deep(.row_gap .el-tree-node .el-tree-node__content) {
+    padding: 10px 0;
+    height: auto;
   }
 
-      & {
-        border-right: 1px solid rgb(208, 208, 208);
+  /* el-tree 取消选中时背景还有个颜色去掉 */
+  ::v-deep(.el-tree-node:focus>.el-tree-node__content) {
+    background-color: transparent;
   }
+
+  /* el-tree 选中时的背景色设置 */
+  ::v-deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+    background-color: #edf6ff !important;
   }
 
+  ::v-deep(.el-input--small) {
+    padding-right: 10px;
   }
 
   ::v-deep(.el-input__suffix:last-of-type) {

src/views/bi/competitor/index.vue

@@ -33,7 +33,6 @@ provide('activeName', activeName);
 
     .tabs {
       background: var(--el-bg-color-overlay);
-      padding: 20px;
       display: flex;
       flex-direction: column;
       width: 100%;

src/views/bi/prd_tag/index.vue

 <template>
   <div class="app-container">
-    <el-row :gutter="20"
-      class="row">
+    <el-row :gutter="20" class="client-fix-height">
       <!--商品分类-->
       <category-tree :options="tagsOptions"
         :defaultProps="defaultProps"
         :nodeKey="nodeKey"
         placeholder="搜索商品集合标签"
         v-model="queryParams.prdTagId"
-        @search="handleQuery"
         :colSpan="14"
         :rowGap="true"
-        showEditDel
+        :customOptions="{
+          showTool: true,
+          showIcon: true,
+          rowGap: 10,
+          showPagination: true,
+          total: tagTotal,
+          loading: flodLoading
+        }"
         @flodEdit="handleFlodEdit"
         @flodDel="handleFlodDel"
-        :loading="flodLoading"
-        :showIcon="true"
-        :isPagination="true"
-        :total="tagTotal"
+        @search="handleQuery"
         @pageChange="getSeriesGoodsTagList">
         <template #buttons>
           <el-button type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
+            icon="Plus"
             @click="handleAdd"
             v-hasPermi="['gen:info:add']">新增</el-button>
         </template>
@@ -36,13 +36,14 @@
           <el-table-column label="商品编码"
             prop="prdCode" />
           <el-table-column label="商品名称"
+          width="300"
             prop="prdName" />
           <el-table-column label="系列名称"
             prop="series" />
         </el-table>
         <!-- 添加或修改商品-标签详情对话框 -->
         <el-dialog :title="title"
-          v-model:visible="open"
+          v-model="open"
           append-to-body>
           <el-form ref="formRef"
             :model="form"
@@ -92,7 +93,7 @@ const defaultProps = reactive({
 });
 const nodeKey = 'prdTagId';
 // 查询参数
-const queryParams = ref({
+const queryParams = reactive({
   prdTagId: null
 });
 // 右侧-商品列表
@@ -160,15 +161,16 @@ const getSeriesList = async () => {
 };
 
 // 获取商品-标签集合列表
-const getSeriesGoodsTagList = async (queryParams = { pageNum: 1, pageSize: 10 }) => {
+const getSeriesGoodsTagList = async (params = { pageNum: 1, pageSize: 10 }) => {
   const { data: { total, rows } } = await getSeriesGoodsTagListAPI({
-    ...queryParams,
-    tagNameLike: queryParams.searchKey
+    ...params,
+    tagNameLike: params.searchKey
   });
   tagTotal.value = total;
   tagsOptions.value = rows;
   // 获取商品-标签指定第一个详情
-  queryParams.prdTagId = rows[0]?.prdTagId;
+  queryParams.prdTagId = rows[0].prdTagId;
+
   getTagDetailsList();
 };
 
@@ -176,7 +178,7 @@ const getSeriesGoodsTagList = async (queryParams = { pageNum: 1, pageSize: 10 })
 const getTagDetailsList = async () => {
   loading.value = true;
   const response = await getPrdTagDetailAPI({
-    prdTagId: queryParams.value.prdTagId
+    prdTagId: queryParams.prdTagId
   });
   prdList.value = response.data;
   loading.value = false;
@@ -247,7 +249,7 @@ const reset = () => {
 }
 /** 商品集合标签点击-搜索右侧商品列表 */
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
+  queryParams.pageNum = 1;
   getTagDetailsList();
 }
 /** 新增按钮操作 */
@@ -296,21 +298,34 @@ getSeriesGoodsTagList()
 
 <style scoped
   lang="scss">
-  ::v-deep .row {
-    height: 100%;
-    display: flex;
+  .app-container {
+    .el-row {
+      background-color: var(--el-bg-color-overlay);
+    }
 
     .right_col {
-      flex: 1;
-      overflow: scroll;
+      flex: 1 !important;
+      transition: all .5s;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
 
-      &::-webkit-scrollbar {
-        height: 0;
-      }
+      .el-form-item {
+        margin-bottom: 0;
       }
+
+      .pagination {
+        /* 没办法设置某个子元素单独在主轴排列方式，使用此方式可以 */
+        margin-top: auto;
       }
 
+      &.el-col-10 {
+        width: 41.666666%;
+        max-width: none;
+      }
 
+    }
+  }
 </style>
 <style lang="scss">
 .my_popper {

src/views/bi/product/index.vue

@@ -180,7 +180,6 @@ getProductList()
     >.el-row {
       /* flex: 1; */
       display: flex;
-      padding: 20px;
       background-color: var(--el-bg-color-overlay);
 
       .right_col {

src/views/bi/sale/index.vue

@@ -609,7 +609,6 @@ init()
       background-color: var(--el-bg-color-overlay);
       margin-top: 20px;
       width: 100%;
-      padding: 20px;
 
       /* 图容器 */
       .echarts_wrap {

src/views/index.vue

 <template>
-  <div class="dashboard-editor-container app-container">
+  <div class="app-container">
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
     <common-menu />
     <el-row :gutter="20"
@@ -69,8 +69,12 @@ const handleSetLineChartData = (type) => {
 
 <style lang="scss"
   scoped>
-  .dashboard-editor-container {
+  .app-container {
+    padding: 20px;
 
+    >div {
+      padding: 0;
+    }
 
     .chart-wrapper {
       background: var(--el-bg-color-overlay);