规格完成

src/api/mall/shop/storeProductRule/index.ts

@@ -17,8 +17,8 @@ export const getStoreProductRule = async (id: number) => {
 }
 
 // 新增商品规则值(规格)
-export const createStoreProductRule = async (data: StoreProductRuleVO) => {
+export const createStoreProductRule = async (data: StoreProductRuleVO,id: number) => {
-  return await request.post({ url: `/shop/store-product-rule/create`, data })
+  return await request.post({ url: `/shop/store-product-rule/save/` + id, data })
 }
 
 // 修改商品规则值(规格)

src/locales/zh-CN.ts

@@ -436,5 +436,9 @@ export default {
     btn_zoom_in: '放大',
     btn_zoom_out: '缩小',
     preview: '预览'
+  },
+  shop: {
+    productRuleAdd: '请添加规格名称！',
+    productRuleAttrAdd: '请添加属性！',
   }
 }

src/views/mall/shop/storeProductRule/StoreProductRuleForm.vue

@@ -1,18 +1,61 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1000px">
     <el-form
       ref="formRef"
       :model="formData"
       :rules="formRules"
-      label-width="100px"
+      label-width="92px"
       v-loading="formLoading"
+      :inline="true"
     >
-      <el-form-item label="规格名称" prop="ruleName">
+      <!-- <el-row :gutter="20"  > -->
-        <el-input v-model="formData.ruleName" placeholder="请输入规格名称" />
+        <el-row :gutter="20">
-      </el-form-item>
+          <el-col class="mb15">
-      <el-form-item label="规格值" prop="ruleValue">
+            <el-form-item label="规格名称" prop="ruleName">
-        <el-input v-model="formData.ruleValue" placeholder="请输入规格值" />
+              <el-input v-model="formData.ruleName" placeholder="请输入规格名称" />
-      </el-form-item>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" v-for="(item,index) in formData.ruleValue" :key="index">
+          <el-form-item label=" ">
+            <div class="acea-row row-middle" style="display: block;width: 100%;">
+              <span class="mr5">{{ item.value }}</span>
+              <Icon icon="ep:circle-close" @click="handleRemove(index)" />
+            </div>
+            <div>
+              <el-tag class="mb5" style="margin: 2px 4px 2px 0;" closable v-for="(j,indexn) in item.detail" :name="j"
+               :key="indexn" @close="handleRemove2(item.detail,indexn)">
+                {{ j }}
+              </el-tag>
+               <el-input placeholder="请输入属性名称" v-model="item.detail.attrsVal"
+                        style="width: 170px">
+                <template #append><el-button type="primary" @click="createAttr(item.detail.attrsVal,index)">添加</el-button></template>
+              </el-input>
+            </div>
+          </el-form-item>
+        </el-row>
+        <el-row :gutter="20" v-if="isBtn" >
+        <!-- <el-col :span="24" v-if="isBtn" style="background-color: gray;"> -->
+           <el-col :span="9" class="mr15">
+            <el-form-item label="规格：">
+              <el-input placeholder="请输入规格" v-model="attrsName"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="9" class="mr20">
+            <el-form-item label="规格值：">
+              <el-input v-model="attrsVal" placeholder="请输入规格值"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2">
+            <el-button type="primary" @click="createAttrName">确定</el-button>
+          </el-col>
+          <el-col :span="2">
+            <el-button @click="offAttrName">取消</el-button>
+          </el-col>
+        <!-- </el-col> -->
+        </el-row>
+      <!-- </el-row> -->
+    <el-button type="primary"  @click="addBtn" v-if="!isBtn" class="ml95 mt10">添加新规格</el-button>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -26,14 +69,18 @@ import * as StoreProductRuleApi from '@/api/mall/shop/storeProductRule'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const isBtn = ref(false)
+const attrsName = ref('')
+const attrsVal = ref('')
+
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  id: undefined,
+  id: 0,
-  ruleName: undefined,
+  ruleName: '',
-  ruleValue: undefined
+  ruleValue: []
 })
 const formRules = reactive({
   ruleName: [{ required: true, message: '规格名称不能为空', trigger: 'blur' }],
@@ -71,10 +118,10 @@ const submitForm = async () => {
   try {
     const data = formData.value as unknown as StoreProductRuleApi.StoreProductRuleVO
     if (formType.value === 'create') {
-      await StoreProductRuleApi.createStoreProductRule(data)
+      await StoreProductRuleApi.createStoreProductRule(data,0)
       message.success(t('common.createSuccess'))
     } else {
-      await StoreProductRuleApi.updateStoreProductRule(data)
+      await StoreProductRuleApi.createStoreProductRule(data,data.id)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -94,4 +141,106 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+var arr = []
+const handleRemove = (index) => {
+  formData.value.ruleValue.splice(index, 1);
+  arr.splice(index, 1);
+}
+const handleRemove2 = (item, index) => {
+  item.splice(index, 1);
+}
+const createAttr = (num, idx) => {
+    if (num) {
+        formData.value.ruleValue[idx].detail.push(num);
+        var hash = {};
+        formData.value.ruleValue[idx].detail = formData.value.ruleValue[idx].detail.reduce(function (item, next) {
+          hash[next] ? '' : hash[next] = true && item.push(next);
+          return item
+        }, [])
+    } else {
+        message.success(t('shop.productRuleAttrAdd'))
+      }
+}
+const addBtn = () => {
+  isBtn.value = true
+}
+
+const createAttrName = () => {
+  if (attrsName.value && attrsVal.value) {
+    let data = {
+      value: attrsName.value,
+      detail: [attrsVal.value]
+    }
+    
+    arr.push(data)
+    formData.value.ruleValue = arr
+    var hash = {}
+    formData.value.ruleValue = formData.value.ruleValue.reduce(function (item, next) {
+            /* eslint-disable */
+            hash[next.value] ? '' : hash[next.value] = true && item.push(next);
+            return item
+    }, [])
+
+     attrsName.value = ''
+     attrsVal.value = ''
+     isBtn.value = false
+          
+  } else {
+    message.success(t('shop.productRuleAdd'))
+  }
+  
+}
+const offAttrName = () => {
+  isBtn.value = false
+}
+
 </script>
+
+<style scoped>
+.mb15 {
+    margin-bottom: 15px !important;
+}
+.mb5 {
+    margin-bottom: 5px !important;
+}
+.mr20 {
+    margin-right: 20px !important;
+}
+
+.mr5 {
+    margin-right: 5px !important;
+}
+.mr15 {
+    margin-right: 15px !important;
+}
+.ml95 {
+    margin-left: 95px !important;
+}
+.mt10{
+    margin-top: 10px;
+}
+
+.acea-row {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-lines: multiple;
+    -moz-box-lines: multiple;
+    -o-box-lines: multiple;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    /* 辅助类 */
+}
+.acea-row.row-middle {
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -o-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+</style>

src/views/mall/shop/storeProductRule/index.vue

@@ -46,7 +46,13 @@
     <el-table v-loading="loading" :data="list">
       <el-table-column label="id" align="center" prop="id" />
       <el-table-column label="规格名称" align="center" prop="ruleName" />
-      <el-table-column label="规格值" align="center" prop="ruleValue" />
+      <el-table-column label="规格值" align="center" prop="ruleValue" >
+        <template #default="scope">
+            <div v-for="(item,index) in scope.row.ruleValue" :key="index">
+              {{ item.value }} : {{ item.detail.join(',')}}
+            </div>
+        </template>
+      </el-table-column>
       <el-table-column
         label="创建时间"
         align="center"