no message

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="item.status">
+  <div>
     <template v-if="!item.children || !item.children.length">
       <app-link v-if="item.meta" :to="item.path">
         <el-menu-item :index="item.path" :class="{ 'submenu-title-noDropdown': !isNest }">
@@ -11,7 +11,9 @@
       <template slot="title">
         <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
-      <sidebar-item v-for="child in item.children" :key="child.name" :is-nest="true" :item="child" class="nest-menu" />
+      <template v-for="child in item.children">
+        <sidebar-item v-if="child.status" :key="child.name" :is-nest="true" :item="child" class="nest-menu" />
+      </template>
     </el-submenu>
   </div>
 </template>

src/layout/components/Sidebar/index.vue

@@ -12,7 +12,9 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route" />
+        <template v-for="route in routes">
+          <sidebar-item  v-if="route.status" :key="route.path" :item="route" />
+        </template>
       </el-menu>
     </el-scrollbar>
   </div>

src/permission.js

@@ -52,13 +52,13 @@ router.beforeEach(async (to, from, next) => {
           // 设置路由
           lay.children = []
           for (var route of store.getters.menus) {
-            lay.children.push(buildRoute(route))
+            lay.children.push(...buildRoute(route))
           }
           lay.redirect = getc(lay).path
           router.addRoutes([lay])
           global.antRouter = []
           for (var route of store.getters.menus) {
-            global.antRouter.push(buildRoute(route, '', false))
+            global.antRouter.push(...buildRoute(route, '', false))
           }
           next({
             ...to,
@@ -87,8 +87,9 @@ router.afterEach(() => {
 })
 
 function buildRoute(route, parentUrl = '', bool = true) {
-  const { url, moduleName, icon, moduleId, code, type, hidden, fullUrl, status, isCache } = route
+  const { url, moduleName, icon, moduleId, code, type, fullUrl, status, isCache } = route
   var item = {}
+  var itemparent = null
   item.path = ~[3, 4].indexOf(type) ? fullUrl : parentUrl + url
   item.name = ~[3].indexOf(type) ? fullUrl : code
   item.type = type
@@ -101,14 +102,34 @@ function buildRoute(route, parentUrl = '', bool = true) {
     status: status,
     isCache: isCache
   }
-  item.hidden = hidden
   if (route.children && route.children.length) {
     if (type == 2) {
+      var childrenPage = (route.children || []).filter(item => item.type == 2)
+      if (childrenPage.length) {
+        itemparent = {
+          ...item,
+          status: false,
+          meta: {
+            url: `/${code}_children`,
+            isCache: 0,
+            status: false,
+            roles: [],
+            roleItems: []
+          },
+          component: RouterView,
+          children: []
+        }
+        childrenPage.map(child => {
+          itemparent.children.push(...buildRoute(child, `${parentUrl}/${code}_children`, bool))
+        })
+      }
+
       try {
         item.component = _import(`${fullUrl}/index`)
       } catch (e) {
         console.log(e)
       }
+
       const roles = []
       const roleItems = []
       for (var role of route.children.filter(item => item.type == 3)) {
@@ -120,13 +141,18 @@ function buildRoute(route, parentUrl = '', bool = true) {
       }
       item.meta.roles = roles
       item.meta.roleItems = roleItems
+
       if (!pages.find(ite => ite.path === item.path)) {
         item.path = `${item.path}${bool ? '' : ''}`
         pages.push(item)
       }
+
     } else if (type == 1) {
       item.component = RouterView
-      item.children = route.children.filter(item => item.type !== 3).map(child => buildRoute(child, item.path, bool))
+      item.children = []
+      route.children.filter(itema => itema.type !== 3).map(child => {
+        item.children.push(...buildRoute(child, item.path, bool))
+      })
     }
   } else {
     if (type == 4) {
@@ -137,14 +163,16 @@ function buildRoute(route, parentUrl = '', bool = true) {
     } else if (type == 2) {
       try {
         item.component = _import(`${fullUrl}/index`)
+
         if (!pages.find(ite => ite.path === item.path)) {
           item.path = `${item.path}${bool ? '' : ''}`
           pages.push(item)
         }
+
       } catch (e) {
         console.log(e)
       }
     }
   }
-  return item
+  return itemparent ? [item, itemparent] : [item]
 }

src/views/mallManagement/activity/groupbuy_index/index.vue

@@ -1,241 +1,132 @@
 <template>
-  <div class="app-container">
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix" style="margin-bottom: 20px">
-        <div class="fl">
-          <el-button size="small" icon="el-icon-refresh" @click="getListByScreen">刷新</el-button>
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">添加团购活动</el-button>
-        </div>
-      </div>
-
-      <div class="tabs-container clearfix">
-        <div class="fl">
-          <el-tabs v-model="tabCurrent" type="card" @tab-click="getListByScreen">
-            <el-tab-pane :name="key" v-for="(value, key, index) in tabList" :key="index">
-              <div slot="label">{{value.name}}(<b style="color: red;">{{value.num}}</b>)</div>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-        <!-- <div class="fr">
-          <el-date-picker
-            v-model="screenForm.activityDate"
-            @change="getListByScreen"
-            type="daterange"
-            size="small"
-            style="margin-right: 20px; width: 260px !important;"
-            value-format="yyyy-MM-dd"
-            range-separator="至"
-            start-placeholder="活动开始时间"
-            end-placeholder="活动结束时间">
-          </el-date-picker>
-          <el-input placeholder="请输入活动名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px; margin-top: 10px;" clearable>
-            <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
-          </el-input>
-        </div> -->
+  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+    :operation="operation" :exportList="exportList">
+    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
+      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
+      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
+          :form-data="formData" :form-items="formItems">
+        </zj-form-module>
+      </zj-form-container>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="formCancel">取 消</el-button>
+        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
       </div>
-
-      <div class="table">
-        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit stripe>
-          <el-table-column align="center" label="活动名称" prop="name" min-width="200"></el-table-column>
-          <el-table-column align="center" label="参与产品数量" prop="goodsNum" min-width="120"></el-table-column>
-          <el-table-column align="center" label="活动时间" min-width="200">
-            <template slot-scope="scope">
-              {{ scope.row.startTime | dateToDayFilter }} 至 {{ scope.row.endTime | dateToDayFilter }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="状态">
-            <template slot-scope="scope">
-              {{ scope.row.status | statusFilter }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="订单数量" prop="orderNum" min-width="120"></el-table-column>
-          <el-table-column align="center" label="订单台数" prop="orderDetailNum" min-width="120"></el-table-column>
-          <el-table-column align="center" label="订单总金额" prop="orderTotalAmount" min-width="120"></el-table-column>
-          <el-table-column align="center" label="团长分佣总额" prop="shareTotalAmount" min-width="120"></el-table-column>
-          <el-table-column align="center" label="商户" prop="companyName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="备注" prop="remark" min-width="200"></el-table-column>
-          <el-table-column align="center" label="操作" width="240" fixed="right">
-            <template slot-scope="scope">
-              <el-button type="text" @click="addOrEdit('edit', scope.row.promotionGroupId)">编辑</el-button>
-              <template>
-                <el-popconfirm v-if="scope.row.status" style="margin: 0 10px;" title="确定关闭吗？" @onConfirm="changeActivityStatus(scope.row.promotionGroupId, false)" >
-                  <el-button slot="reference" type="text">关闭</el-button>
-                </el-popconfirm>
-                <el-popconfirm v-else style="margin: 0 10px;" title="确定开启吗？" @onConfirm="changeActivityStatus(scope.row.promotionGroupId, true)" >
-                  <el-button slot="reference" type="text">开启</el-button>
-                </el-popconfirm>
-              </template>
-              <el-button type="text" @click="toDetail(scope.row.promotionGroupId)">拼团详情</el-button>
-              <el-button type="text" @click="handleExport(scope.row.promotionGroupId)">导出订单</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
-        </div>
-      </div>
-    </div>
-  </div>
+    </el-dialog>
+  </template-page>
 </template>
 
 <script>
-import { getActivityCount, getActivityList, changeStatus } from '@/api/groupbuy'
-import { downloadFiles } from '@/utils/util'
-
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
+import { orderShareListPageV2, orderSharePageExport, settlement, saveRemark } from "@/api/settlement";
 export default {
-  filters: {
-    statusFilter(val) {
-      const MAP = {
-        true: '进行中',
-        false: '已结束',
-      }
-      return MAP[val];
-    }
-  },
-
+  components: { TemplatePage },
+  mixins: [import_mixin],
   data() {
     return {
-      dataList: null, // 列表数据
-      listLoading: true, // 列表加载loading
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      tabCurrent: 'all',
-      tabList: {
-        all: {name: '全部', num: 0, state: ''},
-        jxz: {name: '进行中', num: 0, state: true},
-        yjs: {name: '已结束', num: 0, state: false},
+      // 事件组合
+      optionsEvensGroup: [],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
       },
-      screenForm: {
-        keyword: '',
-        activityDate: '',
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["备注"],
+      formDialog: false,
+      formData: {
+        remark: '',
       },
     }
   },
-  created() {
-    this.getCount();
-    this.getList();
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+      return [{
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入', type: "textarea", maxlength: "100" },
+        formItemAttributes: {
+          label: '备注',
+          prop: 'remark',
+          rules: [...required]
+        }
+      }]
+    }
   },
   methods: {
-    // 获取统计
-    getCount() {
-      getActivityCount().then(res => {
-        this.tabList.all.num = res.data.all;
-        this.tabList.jxz.num = res.data.jxz;
-        this.tabList.yjs.num = res.data.yjs;
-      })
+    // 列表请求函数
+    getList: orderShareListPageV2,
+    // 列表导出函数
+    exportList: orderSharePageExport,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
     },
-
-    // 获取活动列表
-    getList() {
-      getActivityList({
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        status: this.tabList[this.tabCurrent].state,
-        // keyword: this.screenForm.keyword,
-        // startTime: this.screenForm.activityDate ? this.screenForm.activityDate[0] + ' 00:00:00' : '',
-        // endTime: this.screenForm.activityDate ? this.screenForm.activityDate[1] + ' 23:59:59' : '',
-      }).then(res => {
-        this.dataList = res.data.records;
-        this.listTotal = res.data.total;
-        this.listLoading = false;
-      })
-    },
-
-    // 筛选后重新获取列表
-    getListByScreen() {
-      this.currentPage = 1;
-      this.getCount();
-      this.getList();
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
     },
-
-    // 更改活动列表每页数量
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getList();
+    // 表格操作列
+    operation(h, { row, index, column }) {
+      return (
+        <div class='operation-btns'>
+          <el-button type="text" onClick={() => {
+            Object.assign(this.formData, row)
+            this.formDialogType = 0
+            this.openForm()
+          }}>备注</el-button>
+          {row.orderStatus == 'OVER' && row.status == 'ING' ? <el-popconfirm
+            title="是否确定结算？"
+            onConfirm={() => {
+              settlement({
+                orderId: row.orderId
+              }).then(res => {
+                this.$message({ type: 'success', message: `结算成功!` })
+                this.$refs.pageRef.refreshList()
+              })
+            }}
+          >
+            <el-button type="text" slot="reference">结算</el-button>
+          </el-popconfirm> : null}
+        </div>
+      )
     },
-
-    // 更改活动列表当前页
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getList();
+    openForm() {
+      this.formDialog = true;
     },
-
-    // 添加活动
-    addOrEdit(type, id) {
-      if(type == 'add') {
-        this.$router.push({
-          name:"groupbuy_add",
-          query: {}
-        })
-      }else {
-        this.$router.push({
-          name:"groupbuy_add",
-          query: {
-            id
-          }
-        })
-      }
+    formCancel() {
+      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.$data.formData = this.$options.data().formData
+      this.formDialog = false
     },
-
-    // 操作 - 更改活动状态(type: 禁用0，启用1)
-    changeActivityStatus(id, type) {
-      changeStatus({promotionGroupId: id, status: type}).then(res => {
-        this.getCount();
-        this.getList();
-        this.$successMsg();
-      })
-    },
-
-    // 去详情
-    toDetail(id) {
-      this.$router.push({
-        name:"groupbuy_detail",
-        query: {
-          id
+    formConfirm() {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+        if (valid) {
+          ([saveRemark][this.formDialogType])(this.formData).then(res => {
+            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
+            this.formCancel()
+            this.$refs.pageRef.refreshList()
+          })
         }
       })
-    },
-
-    // 导出
-    handleExport(id) {
-      let screenData = {
-        promotionGroupId: id
-      };
-      downloadFiles('order/export', screenData);
-    },
-
-  },
-
+    }
+  }
 }
 </script>
 
-<style scoped>
-  .app-container >>> .el-tabs__header {
-    margin-bottom: 0;
-  }
-  .app-container >>> .el-tabs__nav-wrap::after {
-    background: none;
-  }
-  .app-container >>> #tab-activity, .app-container >>> #tab-goods {
-    font-size: 16px;
-  }
-  .table >>> .el-tag {
-    margin-right: 6px;
-  }
-  .table >>> .el-tag:last-child {
-    margin-right: 0;
-  }
-</style>
+<style lang="scss" scoped></style>

src/views/mallManagement/activity/groupbuy_index/index_cp.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="app-container">
+
+    <div class="mymain-container">
+      <div class="btn-group clearfix" style="margin-bottom: 20px">
+        <div class="fl">
+          <el-button size="small" icon="el-icon-refresh" @click="getListByScreen">刷新</el-button>
+          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">添加团购活动</el-button>
+        </div>
+      </div>
+
+      <div class="tabs-container clearfix">
+        <div class="fl">
+          <el-tabs v-model="tabCurrent" type="card" @tab-click="getListByScreen">
+            <el-tab-pane :name="key" v-for="(value, key, index) in tabList" :key="index">
+              <div slot="label">{{value.name}}(<b style="color: red;">{{value.num}}</b>)</div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <!-- <div class="fr">
+          <el-date-picker
+            v-model="screenForm.activityDate"
+            @change="getListByScreen"
+            type="daterange"
+            size="small"
+            style="margin-right: 20px; width: 260px !important;"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="活动开始时间"
+            end-placeholder="活动结束时间">
+          </el-date-picker>
+          <el-input placeholder="请输入活动名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px; margin-top: 10px;" clearable>
+            <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
+          </el-input>
+        </div> -->
+      </div>
+
+      <div class="table">
+        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit stripe>
+          <el-table-column align="center" label="活动名称" prop="name" min-width="200"></el-table-column>
+          <el-table-column align="center" label="参与产品数量" prop="goodsNum" min-width="120"></el-table-column>
+          <el-table-column align="center" label="活动时间" min-width="200">
+            <template slot-scope="scope">
+              {{ scope.row.startTime | dateToDayFilter }} 至 {{ scope.row.endTime | dateToDayFilter }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="状态">
+            <template slot-scope="scope">
+              {{ scope.row.status | statusFilter }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="订单数量" prop="orderNum" min-width="120"></el-table-column>
+          <el-table-column align="center" label="订单台数" prop="orderDetailNum" min-width="120"></el-table-column>
+          <el-table-column align="center" label="订单总金额" prop="orderTotalAmount" min-width="120"></el-table-column>
+          <el-table-column align="center" label="团长分佣总额" prop="shareTotalAmount" min-width="120"></el-table-column>
+          <el-table-column align="center" label="商户" prop="companyName" min-width="120"></el-table-column>
+          <el-table-column align="center" label="备注" prop="remark" min-width="200"></el-table-column>
+          <el-table-column align="center" label="操作" width="240" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="text" @click="addOrEdit('edit', scope.row.promotionGroupId)">编辑</el-button>
+              <template>
+                <el-popconfirm v-if="scope.row.status" style="margin: 0 10px;" title="确定关闭吗？" @onConfirm="changeActivityStatus(scope.row.promotionGroupId, false)" >
+                  <el-button slot="reference" type="text">关闭</el-button>
+                </el-popconfirm>
+                <el-popconfirm v-else style="margin: 0 10px;" title="确定开启吗？" @onConfirm="changeActivityStatus(scope.row.promotionGroupId, true)" >
+                  <el-button slot="reference" type="text">开启</el-button>
+                </el-popconfirm>
+              </template>
+              <el-button type="text" @click="toDetail(scope.row.promotionGroupId)">拼团详情</el-button>
+              <el-button type="text" @click="handleExport(scope.row.promotionGroupId)">导出订单</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination clearfix">
+        <div class="fr">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getActivityCount, getActivityList, changeStatus } from '@/api/groupbuy'
+import { downloadFiles } from '@/utils/util'
+
+export default {
+  filters: {
+    statusFilter(val) {
+      const MAP = {
+        true: '进行中',
+        false: '已结束',
+      }
+      return MAP[val];
+    }
+  },
+
+  data() {
+    return {
+      dataList: null, // 列表数据
+      listLoading: true, // 列表加载loading
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      tabCurrent: 'all',
+      tabList: {
+        all: {name: '全部', num: 0, state: ''},
+        jxz: {name: '进行中', num: 0, state: true},
+        yjs: {name: '已结束', num: 0, state: false},
+      },
+      screenForm: {
+        keyword: '',
+        activityDate: '',
+      },
+    }
+  },
+  created() {
+    this.getCount();
+    this.getList();
+  },
+  methods: {
+    // 获取统计
+    getCount() {
+      getActivityCount().then(res => {
+        this.tabList.all.num = res.data.all;
+        this.tabList.jxz.num = res.data.jxz;
+        this.tabList.yjs.num = res.data.yjs;
+      })
+    },
+
+    // 获取活动列表
+    getList() {
+      getActivityList({
+        pageNum: this.currentPage,
+        pageSize: this.pageSize,
+        status: this.tabList[this.tabCurrent].state,
+        // keyword: this.screenForm.keyword,
+        // startTime: this.screenForm.activityDate ? this.screenForm.activityDate[0] + ' 00:00:00' : '',
+        // endTime: this.screenForm.activityDate ? this.screenForm.activityDate[1] + ' 23:59:59' : '',
+      }).then(res => {
+        this.dataList = res.data.records;
+        this.listTotal = res.data.total;
+        this.listLoading = false;
+      })
+    },
+
+    // 筛选后重新获取列表
+    getListByScreen() {
+      this.currentPage = 1;
+      this.getCount();
+      this.getList();
+    },
+
+    // 更改活动列表每页数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getList();
+    },
+
+    // 更改活动列表当前页
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getList();
+    },
+
+    // 添加活动
+    addOrEdit(type, id) {
+      if(type == 'add') {
+        this.$router.push({
+          name:"groupbuy_add",
+          query: {}
+        })
+      }else {
+        this.$router.push({
+          name:"groupbuy_add",
+          query: {
+            id
+          }
+        })
+      }
+    },
+
+    // 操作 - 更改活动状态(type: 禁用0，启用1)
+    changeActivityStatus(id, type) {
+      changeStatus({promotionGroupId: id, status: type}).then(res => {
+        this.getCount();
+        this.getList();
+        this.$successMsg();
+      })
+    },
+
+    // 去详情
+    toDetail(id) {
+      this.$router.push({
+        name:"groupbuy_detail",
+        query: {
+          id
+        }
+      })
+    },
+
+    // 导出
+    handleExport(id) {
+      let screenData = {
+        promotionGroupId: id
+      };
+      downloadFiles('order/export', screenData);
+    },
+
+  },
+
+}
+</script>
+
+<style scoped>
+  .app-container >>> .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .app-container >>> .el-tabs__nav-wrap::after {
+    background: none;
+  }
+  .app-container >>> #tab-activity, .app-container >>> #tab-goods {
+    font-size: 16px;
+  }
+  .table >>> .el-tag {
+    margin-right: 6px;
+  }
+  .table >>> .el-tag:last-child {
+    margin-right: 0;
+  }
+</style>