Merge branch 'master' of https://e.coding.net/g-cphe0354/cashier/cashier-web into ymf

src/components/Breadcrumb/index.vue

@@ -1,10 +1,7 @@
 <template>
   <el-breadcrumb class="flex-y-center">
     <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
-      <span
+      <span v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1" class="color-gray-400">
-        v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1"
-        class="color-gray-400"
-      >
         {{ translateRouteTitle(item.meta.title) }}
       </span>
       <a v-else @click.prevent="handleLink(item)">
@@ -30,7 +27,6 @@ const pathCompile = (path: string) => {
 const breadcrumbs = ref<Array<RouteLocationMatched>>([]);
 
 function getBreadcrumb() {
-  console.log(currentRoute.matched);
   let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title);
   const first = matched[0];
   if (!isDashboard(first)) {

src/components/mycomponents/shopList.vue

@@ -46,10 +46,11 @@ let myDialogRef: any = ref(null)
 function opens() {
     myDialogRef.value.open()
 }
+const emit = defineEmits(['success'])
 // 添加商品的回调
 function subitgood() {
-    // selectData.value = contentRefs.value.getselectTable()
+    emit('success', contentRef.value?.getselectTable())
-    // myDialogRef.value.close()
+    myDialogRef.value.close()
 }
 defineExpose({ opens })
 </script>

src/layout/components/TagsView/index.vue

@@ -1,32 +1,18 @@
 <template>
   <div class="tags-container">
     <el-scrollbar class="scroll-container" :vertical="false" @wheel.prevent="handleScroll">
-      <router-link
+      <router-link v-for="tag in visitedViews" ref="tagRef" :key="tag.fullPath"
-        v-for="tag in visitedViews"
+        :class="'tags-item ' + (tagsViewStore.isActive(tag) ? 'active' : '')" :to="{ path: tag.path, query: tag.query }"
-        ref="tagRef"
+        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openContentMenu(tag, $event)">
-        :key="tag.fullPath"
-        :class="'tags-item ' + (tagsViewStore.isActive(tag) ? 'active' : '')"
-        :to="{ path: tag.path, query: tag.query }"
-        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openContentMenu(tag, $event)"
-      >
         {{ translateRouteTitle(tag.title) }}
-        <el-icon
+        <el-icon v-if="!isAffix(tag)" class="tag-close-icon" @click.prevent.stop="closeSelectedTag(tag)">
-          v-if="!isAffix(tag)"
-          class="tag-close-icon"
-          @click.prevent.stop="closeSelectedTag(tag)"
-        >
           <Close />
         </el-icon>
       </router-link>
     </el-scrollbar>
 
     <!-- tag标签操作菜单 -->
-    <ul
+    <ul v-show="contentMenuVisible" class="contextmenu" :style="{ left: left + 'px', top: top + 'px' }">
-      v-show="contentMenuVisible"
-      class="contextmenu"
-      :style="{ left: left + 'px', top: top + 'px' }"
-    >
       <li @click="refreshSelectedTag(selectedTag)">
         <svg-icon icon-class="refresh" />
         刷新

src/settings.ts

@@ -22,7 +22,7 @@ const defaultSettings: AppSettings = {
   // 布局方式，默认为左侧布局
   layout: LayoutEnum.LEFT,
   // 主题，根据操作系统的色彩方案自动选择
-  theme: mediaQueryList.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT,
+  theme: mediaQueryList.matches ? ThemeEnum.LIGHT : ThemeEnum.LIGHT,
   // 组件大小 default | medium | small | large
   size: SizeEnum.DEFAULT,
   // 语言

src/views/product/indexconfig/addgoods.vue

@@ -49,10 +49,10 @@
       </el-form-item> -->
       <el-form-item label="商品类型">
         <el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)">
-          <el-radio label="single">单规格商品</el-radio>
+          <el-radio value="single">单规格商品</el-radio>
-          <el-radio label="sku">多规格商品</el-radio>
+          <el-radio value="sku">多规格商品</el-radio>
-          <el-radio label="package">套餐商品</el-radio>
+          <el-radio value="package">套餐商品</el-radio>
-          <el-radio label="weight">称重商品</el-radio>
+          <el-radio value="weight">称重商品</el-radio>
           <!-- <el-radio label="coupon">团购券</el-radio> -->
         </el-radio-group>
       </el-form-item>
@@ -90,58 +90,56 @@
                 <template #header>
                   <el-button type="primary" @click="addgoods">添加商品</el-button>
                 </template>
-                <!-- <template slot="header" v-slot="scope"> -->
+                <template v-slot="scope">
-                <!-- <el-button type="primary" @click="">添加商品</el-button> -->
+                  <el-button type="text" :disabled="scope.row.type != 'sku'"
-                <!-- </template> -->
-                <!-- <template v-slot="scope">
-                  <el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
                     @click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
-                  <el-button type="text" @click="form.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
+                  <el-button type="text"
-                </template> -->
+                    @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
+                </template>
               </el-table-column>
             </el-table>
           </div>
+          <div v-if="ruleForm.groupType == '1'">
+            <div class="group_wrap" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
+              <el-form inline :model="item">
+                <el-form-item label="规格组名">
+                  <el-input v-model="item.title" />
+                </el-form-item>
+                <el-form-item :label="`本组菜品${item.goods.length}选`">
+                  <el-input v-model="item.number" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="ruleForm.proGroupVo.splice(index, 1)">删除</el-button>
+                </el-form-item>
+              </el-form>
+              <div>
+                <el-table border :data="item.goods">
+                  <el-table-column label="名称" prop="proName"></el-table-column>
+                  <el-table-column label="规格" prop="skuName"></el-table-column>
+                  <el-table-column label="价格" prop="price"></el-table-column>
+                  <el-table-column label="数量" prop="number">
+                    <template v-slot="scope">
+                      <el-input-number v-model="scope.row.number" :min="0" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="150">
+                    <template #header>
+                      <!-- <el-button type="primary"
+                        @click="$refs.shopListRef.show([...form.proGroupVo[index].goods]); addGroupIndex = index">添加商品</el-button> -->
+                    </template>
+                    <template v-slot="scope">
+                      <el-button type="text" :disabled="scope.row.type != 'sku'"
+                        @click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
+                      <el-button type="text"
+                        @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+            <el-button type="primary" @click="addtaocan">添加套餐组</el-button>
+          </div>
         </div>
-        <!-- 
-<div v-if="ruleForm.groupType == 1">
-  <div class="group_wrap" v-for="(item, index) in form.proGroupVo" :key="index">
-    <el-form inline :model="item">
-      <el-form-item label="规格组名">
-        <el-input v-model="item.title" />
-      </el-form-item>
-      <el-form-item :label="`本组菜品${item.goods.length}选`">
-        <el-input v-model="item.number" />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="form.proGroupVo.splice(index, 1)">删除</el-button>
-      </el-form-item>
-    </el-form>
-    <div>
-      <el-table border :data="item.goods">
-        <el-table-column label="名称" prop="proName"></el-table-column>
-        <el-table-column label="规格" prop="skuName"></el-table-column>
-        <el-table-column label="价格" prop="price"></el-table-column>
-        <el-table-column label="数量" prop="number">
-          <template v-slot="scope">
-                    <el-input-number v-model="scope.row.number" :min="0" />
-                  </template>
-        </el-table-column>
-        <el-table-column width="150">
-          <template slot="header" slot-scope="scope">
-                    <el-button type="primary"
-                      @click="$refs.shopListRef.show([...form.proGroupVo[index].goods]); addGroupIndex = index">添加商品</el-button>
-                  </template>
-          <template slot-scope="scope">
-                    <el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
-                      @click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
-                    <el-button type="text" @click="form.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
-                  </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-  <el-button type="primary" @click="$refs.shopListRef.show(); addGroupIndex = false">添加套餐组</el-button>
-</div> -->
       </el-form-item>
       <el-form-item label="选择规格" v-if="ruleForm.type == 'sku'">
         <el-select v-model="ruleForm.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle">
@@ -153,7 +151,7 @@
       <el-form-item :label="item.name" v-if="datas.selectSpeclist.length" v-for="item in datas.selectSpeclist"
         :key="item.name">
         <el-checkbox-group v-model="item.selectSpecResult" @change="selectSpecResultChange">
-          <el-checkbox :value="item.name" v-for="(item, index) in item.children" :key="index">{{ item.name
+          <el-checkbox :value="item.name" v-for="(ele, index) in item.children" :key="index">{{ ele.name
           }}</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
@@ -178,8 +176,8 @@
       </el-form-item>
       <el-form-item label="是否允许临时改价">
         <el-radio-group v-model="ruleForm.isAllowTempModifyPrice">
-          <el-radio :label="1">允许</el-radio>
+          <el-radio :value="1">允许</el-radio>
-          <el-radio :label="0">不允许</el-radio>
+          <el-radio :value="0">不允许</el-radio>
         </el-radio-group>
       </el-form-item>
       <!-- <el-form-item label="每日销量上限">
@@ -201,7 +199,8 @@
       <el-form-item>
         <el-col :span="12">
           <el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
-            end-placeholder="结束时间" :default-value="['00:00', '59:59']" value-format="HH:mm" format="HH:mm" />
+            end-placeholder="结束时间" :default-value="[new Date('00:00'), new Date('23:59')]" value-format="HH:mm"
+            format="HH:mm" />
         </el-col>
       </el-form-item>
       <el-form-item label="上架">
@@ -235,6 +234,25 @@
     </el-form>
     <!-- 选择商品 -->
     <shopList ref="shopListRef" @success="selectShopRes" />
+    <el-dialog :title="datas.selectSkuItem.proName" v-model="datas.showSelectSku">
+      <div class="pro_sku">
+        <div class="item">
+          <div class="row">
+            <div class="title">选项值</div>
+            <div class="tag" :class="{ active: item.active }" v-for="(item, index) in datas.selectSkuItem.skuList"
+              :key="item.id" @click="selectSkuHandle(item, index)">
+              {{ item.specInfo }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="datas.showSelectSku = false">取 消</el-button>
+          <el-button type="primary" @click="showSelectSkuConfirm">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -250,7 +268,8 @@ import UserAPI4 from "@/api/product/specificationsconfig";
 import shopList from "@/components/mycomponents/shopList.vue";
 
 import { useRouter } from 'vue-router';
-
+import { useTagsViewStore } from "@/store";
+const tagsViewStore = useTagsViewStore();
 const router = useRouter();
 let list = ref<any[]>([{
   "originPrice": 0,
@@ -262,7 +281,7 @@ let list = ref<any[]>([{
   "weight": 0,
   "barCode": "88888888888888888888"
 }]);
-let datas = reactive({
+let datas = reactive<datasForm>({
   cycle: [
     { label: "周一", value: "Monday" },
     { label: "周二", value: "Tuesday" },
@@ -288,9 +307,26 @@ let datas = reactive({
     "barCode": "88888888888888888888"
   },
   specTableHeaders: [],
-
+  // 套餐商品-单规格index
+  selectSkuTableIndex: 0,
+  selectSkuConfirmIndex: 0,
+  showSelectSku: false,
+  selectSkuItem: {}
 })
 let shopListRef = ref(null)
+interface datasForm {
+  cycle: { label: string, value: string }[],
+  Company: any[],
+  classification: any[],
+  specificationsconfig: any[],
+  selectSpeclist: any[],
+  defaultSku: any,
+  specTableHeaders: any[],
+  selectSkuTableIndex: any,
+  selectSkuConfirmIndex: number,
+  showSelectSku: boolean,
+  selectSkuItem: any
+}
 interface RuleForm {
   name: string,
   shortTitle: string,
@@ -299,12 +335,11 @@ interface RuleForm {
   coverImg: string,
   images: string[],
   type: string,
-  specId: string,
+  specId: any,
   groupType: string,
-  proGroupVo: string[],
   skuList: string[],
-  weight: Number,
+  weight: any,
-  isAllowTempModifyPrice: Number,
+  isAllowTempModifyPrice: any,
   days: string[],
   useTime: string[],
   startTime: string,
@@ -312,49 +347,11 @@ interface RuleForm {
   isSale: string,
   isStock: string,
   isHot: string,
-  stockNumber: Number,
+  stockNumber: any,
-  packFee: Number,
+  packFee: any,
   sort: Number,
-}
+  proGroupVo: any[],
-// 添加商品
+  selectSpecInfo: any
-function addgoods() {
-  shopListRef.value.opens()
-}
-// 分组选择商品
-function selectShopRes(res) {
-
-  // let newres = res.map(item => {
-  //   item.proId = item.id
-  //   item.proName = item.name
-  //   item.price = item.lowPrice
-  //   item.skuId = ''
-  //   item.skuName = ''
-  //   item.number = 1
-  //   return item
-  // })
-  // if (this.form.groupType == 0) {
-  //   let obj = {
-  //     title: '',
-  //     count: newres.length,
-  //     number: '',
-  //     goods: newres
-  //   }
-  //   this.form.proGroupVo = [{ ...obj }]
-  // } else {
-  //   if (this.addGroupIndex !== false) {
-  //     this.form.proGroupVo[this.addGroupIndex].count = newres.length
-  //     this.form.proGroupVo[this.addGroupIndex].goods = newres
-  //   } else {
-  //     let arr = [...this.form.proGroupVo]
-  //     arr.push({
-  //       title: '',
-  //       count: newres.length,
-  //       number: '',
-  //       goods: newres
-  //     })
-  //     this.form.proGroupVo = [...arr]
-  //   }
-  // }
 }
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive<RuleForm>({
@@ -408,6 +405,7 @@ const ruleForm = reactive<RuleForm>({
   packFee: 0,
   // 排序值
   sort: 1,
+  selectSpecInfo: {}
 })
 const rules = reactive<FormRules<RuleForm>>({
   name: [
@@ -439,10 +437,95 @@ const rules = reactive<FormRules<RuleForm>>({
 onMounted(() => {
   getList()
 })
+// 选择套餐商品sku
+function selectSkuHandle(item: any, index: number) {
+  // 把所有的设置为false
+  datas.selectSkuItem.skuList.map((item: any, index: number) => {
+    let nitem = { ...item }
+    nitem.active = false
+    datas.selectSkuItem.skuList[index] = nitem
+  })
+
+  if (item.active) {
+    item.active = false
+  } else {
+    item.active = true
+  }
+  datas.selectSkuItem.skuList[index] = { ...item }
+
+  // let arr = datas.selectSkuItem.skuList.filter((item:any) => item.active)
+
+  // if (arr.length) {
+  //   this.selectSkuConfirmDisabled = false
+  // } else {
+  //   this.selectSkuConfirmDisabled = true
+  // }
+}
+// 确认套餐商品设置规格
+function showSelectSkuConfirm() {
+  let item = datas.selectSkuItem.skuList.filter((item: any) => item.active)
+  ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex] = { ...ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex], skuId: item[0].id }
+  ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex] = { ...ruleForm.proGroupVo[datas.selectSkuTableIndex].goods[datas.selectSkuConfirmIndex], skuName: item[0].specInfo }
+  datas.showSelectSku = false
+}
+// 显示套餐商品设置规格
+function showSelectSkuHandle(row: any, index: any, tabIndex: any) {
+  datas.selectSkuTableIndex = tabIndex
+  datas.selectSkuConfirmIndex = index
+  datas.showSelectSku = true
+
+  let obj = { ...row }
+
+  obj.skuList.map((item: any) => {
+    item.active = false
+  })
+
+  datas.selectSkuItem = obj
+}
+// 添加商品
+function addgoods() {
+  (shopListRef.value as any)?.opens()
+}
+// 分组选择商品
+function selectShopRes(res: Array<any>) {
+  console.log(res, '选择商品')
+  let newres = res.map(item => {
+    item.proId = item.id
+    item.proName = item.name
+    item.price = item.lowPrice
+    item.skuId = ''
+    item.skuName = ''
+    item.number = 1
+    return item
+  })
+  if (ruleForm.groupType == '0') {
+    let obj = {
+      title: '',
+      count: newres.length,
+      number: '',
+      goods: newres
+    }
+    ruleForm.proGroupVo = [{ ...obj }]
+  } else {
+    // if (this.addGroupIndex !== false) {
+    //   this.form.proGroupVo[this.addGroupIndex].count = newres.length
+    //   this.form.proGroupVo[this.addGroupIndex].goods = newres
+    // } else {
+    let arr = [...ruleForm.proGroupVo]
+    arr.push({
+      title: '',
+      count: newres.length,
+      number: '',
+      goods: newres
+    })
+    ruleForm.proGroupVo = [...arr]
+    // }
+  }
+}
 // 获取单位、分类数据
 async function getList() {
-  datas.Company = await UserAPI2.getList()
+  datas.Company = (await UserAPI2.getList(null)) as any[]
-  datas.classification = await UserAPI.getList()
+  datas.classification = (await UserAPI.getList(null)) as any[]
 }
 // 选择规格属性
 function selectSpecResultChange() {
@@ -463,7 +546,10 @@ function createSkuHeader() {
   }
   datas.specTableHeaders = headers;
 }
-
+// 可选套餐弹窗
+function addtaocan() {
+  (shopListRef.value as any)?.opens()
+}
 // 生成多规格表体
 function createSkuBody() {
   let bodys = [];
@@ -486,7 +572,7 @@ function createSkuBody() {
   let newarr = [];
   for (let item of arr) {
     if (Array.isArray(item)) {
-      let obj = {};
+      let obj: Record<string, any> = {};
       let specSnap = [];
       for (let v of item) {
         for (let key in v) {
@@ -522,7 +608,7 @@ function createSkuBody() {
   list.value = newarr;
 }
 // 切换类型
-function changeTypeEnum(item) {
+function changeTypeEnum(item: string) {
   // single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
   list.value = []
   if (item == 'sku') {
@@ -534,41 +620,42 @@ function changeTypeEnum(item) {
   }
 }
 // 笛卡尔积算法
-function cartesian(arr) {
+function cartesian(arr: any[]) {
   if (arr.length < 2) return arr[0] || [];
-  return [].reduce.call(arr, (col, set) => {
+  return [].reduce.call(arr, (col: any, set: any, index) => {
-    let res = [];
+    let res = <any>[];
-    col.forEach((c) => {
+    col.forEach((c: any) => {
-      set.forEach((s) => {
+      set.forEach((s: any) => {
-        let t = [].concat(Array.isArray(c) ? c : [c]);
+        let arr: any = Array.isArray(c) ? c : [c]
+        let t: any[] = [].concat(arr);
         t.push(s);
         res.push(t);
       });
     });
     return res;
-  });
+  }, []);
 }
 // 套餐类型切换
 function typeChange() {
-  ruleForm.typeEnum = 'normal'
+  // ruleForm.typeEnum = 'normal'
-  if (ruleForm.groupType == 0) {
+  if (ruleForm.groupType == '0') {
-    // this.$set(this.form.proGroupVo, 0, {
+    ruleForm.proGroupVo[0] = {
-    //   title: '',
+      title: '',
-    //   count: '',
+      count: '',
-    //   number: 1,
+      number: 1,
-    //   goods: []
+      goods: []
-    // })
+    }
   } else {
-    // this.form.proGroupVo = []
+    ruleForm.proGroupVo = []
   }
   // this.changeTypeEnum()
 }
 // 获取规格列表
 async function tbProductSpecGet() {
-  datas.specificationsconfig = await UserAPI4.getPage()
+  datas.specificationsconfig = (await UserAPI4.getPage(null)) as []
 }
 // 选择规格
-function selectSpecHandle(e) {
+function selectSpecHandle(e: any) {
   const selectSpec = JSON.parse(JSON.stringify(datas.specificationsconfig.find((item) => item.id == e).children));
   for (let item in selectSpec) {
     selectSpec[item].selectSpecResult = [];
@@ -590,20 +677,32 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       ruleForm.startTime = ruleForm.useTime[0]
       ruleForm.endTime = ruleForm.useTime[1]
       // 拿到sku数据
-      ruleForm.skuList = specificationAttributeRef.value.getdata()
+      ruleForm.skuList = (specificationAttributeRef.value as any)?.getdata()
       // 多规格 selectSpecInfo 添加
       if (ruleForm.type == 'sku') {
-        let obj = {}
+        let obj: any = {}
         datas.selectSpeclist.forEach((item: any) => {
           obj[item.name] = item.selectSpecResult
         })
         ruleForm.selectSpecInfo = obj
+      } else if (ruleForm.type == 'package') {
+        console.log(ruleForm, '套餐')
       }
-      console.log(ruleForm, '提交数据')
       let res = await UserAPI3.addunit(ruleForm)
       if (res.code == 200) {
         ElMessage.success("添加成功");
         router.push({ name: 'productIndex' });
+        setTimeout(() => {
+          closeSelectedTag({
+            "name": "addgoods",
+            "title": "新增商品",
+            "path": "/product/addgoods",
+            "fullPath": "/product/addgoods",
+            "affix": false,
+            "keepAlive": true,
+            "query": {}
+          })
+        }, 500);
       }
     } else {
       ElMessage.error("请填写完整信息");
@@ -611,10 +710,20 @@ const submitForm = async (formEl: FormInstance | undefined) => {
     }
   })
 }
+
+
+// 关闭当前窗口
+function closeSelectedTag(view: TagView) {
+  tagsViewStore.delView(view).then((res: any) => {
+    if (tagsViewStore.isActive(view)) {
+      tagsViewStore.toLastView(res.visitedViews, view);
+    }
+  });
+}
 // 规格id过滤
 const specIdFunction = (type: string) => {
   if (type === 'single') {
-    return null
+    return ''
   } else if (type === '2') {
     return 2
   } else if (type === '3') {
@@ -626,6 +735,15 @@ const specIdFunction = (type: string) => {
   }
 }
 const resetForm = (formEl: FormInstance | undefined) => {
+  closeSelectedTag({
+    "name": "addgoods",
+    "title": "新增商品",
+    "path": "/product/addgoods",
+    "fullPath": "/product/addgoods",
+    "affix": false,
+    "keepAlive": true,
+    "query": {}
+  })
   if (!formEl) return
   formEl.resetFields()
 }
@@ -635,4 +753,44 @@ const resetForm = (formEl: FormInstance | undefined) => {
   padding: 20px;
   background-color: #fff;
 }
+
+.pro_sku {
+  .item {
+    .row {
+      display: flex;
+      align-items: center;
+
+      &:not(:first-child) {
+        margin-top: 20px;
+      }
+
+      .title {
+        width: 80px;
+      }
+
+      .tag {
+        background-color: #F7F7FA;
+        padding: 6px 12px;
+        margin-right: 10px;
+        border-radius: 4px;
+
+        &.no {
+          background: none;
+          padding: 6px 0;
+        }
+
+        &.active {
+          background-color: #46A6FF;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.group_wrap {
+  padding: 20px;
+  background-color: #F7F7FA;
+  margin-bottom: 20px;
+}
 </style>