From abda707be660300bb5da6fe3ceebc0f360020b22 Mon Sep 17 00:00:00 2001
From: zhaochencheng <zccbbg@qq.com>
Date: Sun, 1 Jan 2023 18:03:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/BrandSelect.vue          |   7 +-
 .../components/ProductCategorySelect.vue      |   2 +-
 src/views/pms/product/AddProduct.vue          | 164 ++++++++++--------
 3 files changed, 96 insertions(+), 77 deletions(-)

diff --git a/src/views/components/BrandSelect.vue b/src/views/components/BrandSelect.vue
index 7e06144..8d803c2 100644
--- a/src/views/components/BrandSelect.vue
+++ b/src/views/components/BrandSelect.vue
@@ -1,6 +1,7 @@
-<template lang="pug">
-el-select(v-model="value1")
-  el-option(v-for="it in options" :key="it.id" :value="it.id" :label="it.name") {{it.name}}
+<template>
+  <el-select v-model="value1" placeholder="选择品牌">
+    <el-option v-for="it in options" :key="it.id" :value="it.id" :label="it.name">{{it.name}}</el-option>
+  </el-select>
 </template>
 
 <script>
diff --git a/src/views/components/ProductCategorySelect.vue b/src/views/components/ProductCategorySelect.vue
index 373b8a4..d0b7d32 100644
--- a/src/views/components/ProductCategorySelect.vue
+++ b/src/views/components/ProductCategorySelect.vue
@@ -3,7 +3,7 @@
     v-model="value1"
     :options="menuOptions"
     :props="{ checkStrictly: true }"
-    placeholder="选择上级类目"
+    placeholder="选择类目"
   />
 </template>
 
diff --git a/src/views/pms/product/AddProduct.vue b/src/views/pms/product/AddProduct.vue
index 174b3b6..0070a73 100644
--- a/src/views/pms/product/AddProduct.vue
+++ b/src/views/pms/product/AddProduct.vue
@@ -1,76 +1,94 @@
-<template lang="pug">
-.add-product-wrapper
-  el-form.content(
-    label-width="108px"
-    :model="form"
-    ref="form"
-  )
-    el-form-item(label="品牌" prop="brandId")
-      brand-select(v-model="form.brandId")
-    el-form-item(label="分类" prop="categoryId")
-      prod-category.w200(v-model="form.categoryId")
-    el-form-item(label="商品编码" prop="outProductId")
-      el-input(v-model="form.outProductId" placeholder="请输入商品编码")
-    el-form-item(label="商品名称" prop="name")
-      el-input(v-model="form.name" placeholder="请输入商品名称")
-    el-form-item(label="主图" prop="pic")
-      image-upload(v-model="form.pic" :limit="1")
-    el-form-item(label="商品图片" prop="albumPics")
-      image-upload(v-model="form.albumPics" :limit="5")
-    el-form-item(label="上架状态")
-      dict-select(v-model="form.publishStatus" prop-name="pms_publish_status" )
-    el-form-item(label="排序" prop="sort")
-      el-input(v-model="form.sort" placeholder="请输入排序")
-    el-form-item(label="价格" prop="price")
-      el-input(v-model="form.price" placeholder="请输入PRICE")
-    el-form-item(label="单位" prop="unit")
-      el-input(v-model="form.unit" placeholder="请输入单位")
-    el-form-item(label="商品重量" prop="weight")
-      el-input(v-model="form.weight" placeholder="商品重量，默认为克")
-    .title 规格信息
-    el-form-item(label="商品规格")
-      .sku-wrapper
-        .sku_sorts
-          .sku_sort(v-for="(s, idx0) in skuSorts" :key="s.name")
-            .label.flex-center
-              .flex-one
-                dict-select(v-model="s.name" prop-name="sku_sort_list" value-prop="label")
-              a.red(@click="deleteSkuSort(idx0)") 删除规格类型
-            .values(v-if="s.name")
-              .value(v-for="(it2, idx1) in s.options" :key="idx1")
-                el-input(:value="it2.name" @input="changeName(s, idx1, $event)")
-                a.red.no-break.ml8(v-if="idx1 < s.options.length - 1 || (s.options.length === maxOptionNum && idx1 === 3)" @click="deleteOption(s, idx1)") 删除
-        el-button(v-if="skuSorts.length < 2" @click="addSkuSort") 添加规格类型
-    el-form-item(label=" 价格")
-      el-table(:data="skus" :max-height="400")
-        el-table-column(v-for="s in skuSorts" :label="s.name" :key="s.name" :prop="s.name")
-        el-table-column(label="展示图片")
-          template(v-slot="{ row }")
-            image-upload.img-upload-mini(v-model="row.pic" :is-show-tip="false")
-        el-table-column(label="销售价格")
-          template(v-slot="{ row }")
-            el-input(v-model="row.price")
-        el-table-column(label="编码")
-          template(v-slot="{ row }")
-            el-input(v-model="row.outSkuId")
-        el-table-column(label="操作")
-          template(v-slot="{row, index}")
-            a.red 删除{{index}}
-    el-form-item(label="产品详情网页内容" prop="detailHtml")
-      el-input(
-        v-model="form.detailHtml"
-        placeholder="请输入内容"
-        type="textarea"
-      )
-    el-form-item(label="移动端网页详情" prop="detailMobileHtml")
-      el-input(
-        v-model="form.detailMobileHtml"
-        placeholder="请输入内容"
-        type="textarea"
-      )
-    .tc
-      el-button(type="primary" @click="submitForm") 确 定
-      el-button(@click="cancel") 取 消
+<template>
+  <div class="add-product-wrapper">
+    <el-form class="content" label-width="108px" :model="form" ref="form">
+      <el-form-item label="品牌" prop="brandId">
+        <brand-select v-model="form.brandId"></brand-select>
+      </el-form-item>
+      <el-form-item label="分类" prop="categoryId">
+        <product-category-select class="w200" v-model="form.categoryId"></product-category-select>
+      </el-form-item>
+      <el-form-item label="商品编码" prop="outProductId">
+        <el-input v-model="form.outProductId" placeholder="请输入商品编码"></el-input>
+      </el-form-item>
+      <el-form-item label="商品名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
+      </el-form-item>
+      <el-form-item label="主图" prop="pic">
+        <image-upload v-model="form.pic" :limit="1"></image-upload>
+      </el-form-item>
+      <el-form-item label="商品图片" prop="albumPics">
+        <image-upload v-model="form.albumPics" :limit="5"></image-upload>
+      </el-form-item>
+      <el-form-item label="上架状态">
+        <dict-select v-model="form.publishStatus" prop-name="pms_publish_status"></dict-select>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
+      </el-form-item>
+      <el-form-item label="价格" prop="price">
+        <el-input v-model="form.price" placeholder="请输入PRICE"></el-input>
+      </el-form-item>
+      <el-form-item label="单位" prop="unit">
+        <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
+      </el-form-item>
+      <el-form-item label="商品重量" prop="weight">
+        <el-input v-model="form.weight" placeholder="商品重量，默认为克"></el-input>
+      </el-form-item>
+      <div class="title">规格信息</div>
+      <el-form-item label="商品规格">
+        <div class="sku-wrapper">
+          <div class="sku_sorts">
+            <div class="sku_sort" v-for="(s, idx0) in skuSorts" :key="s.name">
+              <div class="label flex-center">
+                <div class="flex-one">
+                  <dict-select v-model="s.name" prop-name="sku_sort_list" value-prop="label"></dict-select>
+                </div><a class="red" @click="deleteSkuSort(idx0)">删除规格类型</a>
+              </div>
+              <div class="values" v-if="s.name">
+                <div class="value" v-for="(it2, idx1) in s.options" :key="idx1">
+                  <el-input :value="it2.name" @input="changeName(s, idx1, $event)"></el-input><a class="red no-break ml8" v-if="idx1 &lt; s.options.length - 1 || (s.options.length === maxOptionNum &amp;&amp; idx1 === 3)" @click="deleteOption(s, idx1)">删除</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-button v-if="skuSorts.length &lt; 2" @click="addSkuSort">添加规格类型</el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label=" 价格">
+        <el-table :data="skus" :max-height="400">
+          <el-table-column v-for="s in skuSorts" :label="s.name" :key="s.name" :prop="s.name"></el-table-column>
+          <el-table-column label="展示图片">
+            <template v-slot="{ row }">
+              <image-upload class="img-upload-mini" v-model="row.pic" :is-show-tip="false"></image-upload>
+            </template>
+          </el-table-column>
+          <el-table-column label="销售价格">
+            <template v-slot="{ row }">
+              <el-input v-model="row.price"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="编码">
+            <template v-slot="{ row }">
+              <el-input v-model="row.outSkuId"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template v-slot="{row, index}"><a class="red">删除{{index}}</a></template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item label="产品详情网页内容" prop="detailHtml">
+        <el-input v-model="form.detailHtml" placeholder="请输入内容" type="textarea"></el-input>
+      </el-form-item>
+      <el-form-item label="移动端网页详情" prop="detailMobileHtml">
+        <el-input v-model="form.detailMobileHtml" placeholder="请输入内容" type="textarea"></el-input>
+      </el-form-item>
+      <div class="tc">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-form>
+  </div>
 </template>
 
 <script>