From f86341379253edf497631a297e6ea3af28c3e325 Mon Sep 17 00:00:00 2001
From: Maylin <15178961907@163.com>
Date: Tue, 11 Oct 2022 17:55:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E4=BF=AE=E6=94=B9=E9=87=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=92=8C=E4=BF=9D=E5=AD=98=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                         |   1 +
 src/components/DrawCanvas/index.vue  |   8 +-
 src/components/DrawToolbar/index.vue |  27 ++-
 src/views/shop/goodsInfo/index.vue   | 289 ++++++++++++++++++++++-----
 src/views/shop/info/index.vue        |   8 +-
 src/views/shop/templateInfo/draw.vue |  19 +-
 vite.config.js                       |   2 +-
 7 files changed, 277 insertions(+), 77 deletions(-)

diff --git a/package.json b/package.json
index 4895b5c..ef08f56 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@vueuse/core": "8.5.0",
     "axios": "0.26.1",
     "echarts": "5.3.2",
+    "element-china-area-data": "^5.0.2",
     "element-plus": "2.2.15",
     "file-saver": "2.0.5",
     "fuse.js": "6.5.3",
diff --git a/src/components/DrawCanvas/index.vue b/src/components/DrawCanvas/index.vue
index a612d86..7a50327 100644
--- a/src/components/DrawCanvas/index.vue
+++ b/src/components/DrawCanvas/index.vue
@@ -156,17 +156,13 @@ watchEffect(() => {
   blocks.forEach(block => {
     if (block.type === 'image') {
       const image = new Image()
+      block.image = image
       image.src = block.src
-      image.onload = () => {
-        block.image = image
-      }
     }else if (block.type === 'qrcode'){
       QRCode.toDataURL(block.text, {width: block.width, height: block.height}).then(src=> {
         const image = new Image()
+        block.image = image
         image.src = src
-        image.onload = () => {
-          block.image = image
-        }
       })
     }
   })
diff --git a/src/components/DrawToolbar/index.vue b/src/components/DrawToolbar/index.vue
index 9619c49..afc3ad0 100644
--- a/src/components/DrawToolbar/index.vue
+++ b/src/components/DrawToolbar/index.vue
@@ -42,15 +42,21 @@
   <el-divider>内容</el-divider>
 
   <div class="mt10"></div>
-
-  <div class="mt5" v-for="(item, key) in content.blocks" :key="key">
-    <el-alert :type="selectBlock === item?'success': 'info'" effect="dark"
-              @click="handleBlockSelect(item)"
-              @close.stop="handleBlockDelete(key, item)">
-      <template #title>
-        [ {{ blockTypes[item.type] }} ] {{ item.name }}
-      </template>
-    </el-alert>
+  <div class="mt5" v-for="(item,key) in content.blocks" :key="key">
+    <!--        <el-alert :type="selectBlock === item?'success': 'info'" effect="dark"-->
+    <!--                  @click="handleBlockSelect(item)"-->
+    <!--                  @close.stop="handleBlockDelete(key, item)" >-->
+    <!--          <template #title>-->
+    <!--            [ {{ blockTypes[item.type] }} ] {{ item.name }}-->
+    <!--          </template>-->
+    <!--        </el-alert>-->
+    <div style="height:30px;padding:5px 8px;background-color: #909399;border-radius: 4px;color: #FFFFFF;
+    display: flex;
+    justify-content: space-between;
+    line-height: 18px;">
+      <a style="color: #FFFFFF;width: 80%" @click="handleBlockSelect(item)" >[ {{ blockTypes[item.type] }} ] {{ item.name }}</a>
+      <Close style="width: 0.8em; height: 0.8em; " @click="handleBlockDelete(key, item)"/>
+    </div>
   </div>
 </template>
 
@@ -104,8 +110,9 @@ function handleBlockSelect(item) {
 }
 
 function handleBlockDelete(key, item) {
-  emit('update:select-block', null)
+  console.log(3333)
   content.value.blocks.splice(key, 1)
+  emit('update:select-block', null)
 }
 
 /**
diff --git a/src/views/shop/goodsInfo/index.vue b/src/views/shop/goodsInfo/index.vue
index 6ab4fcd..7da4249 100644
--- a/src/views/shop/goodsInfo/index.vue
+++ b/src/views/shop/goodsInfo/index.vue
@@ -104,7 +104,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -114,54 +114,105 @@
     />
 
     <!-- 添加或修改商品信息对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="goodsInfoRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="编码" prop="goodsNo">
-          <el-input v-model="form.goodsNo" placeholder="请输入编码" />
-        </el-form-item>
-        <el-form-item label="名称" prop="goodsName">
-          <el-input v-model="form.goodsName" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="产地" prop="goodsPlace">
-          <el-input v-model="form.goodsPlace" placeholder="请输入产地" />
-        </el-form-item>
-        <el-form-item label="品牌" prop="goodsBrand">
-          <el-input v-model="form.goodsBrand" placeholder="请输入品牌" />
-        </el-form-item>
-        <el-form-item label="规格" prop="goodsSpec">
-          <el-input v-model="form.goodsSpec" placeholder="请输入规格" />
-        </el-form-item>
-        <el-form-item label="单位" prop="goodsUnit">
-          <el-input v-model="form.goodsUnit" placeholder="请输入单位" />
-        </el-form-item>
-        <el-form-item label="库存" prop="goodsStock">
-          <el-input v-model="form.goodsStock" placeholder="请输入库存" />
-        </el-form-item>
-        <el-form-item label="价格" prop="goodsPrice">
-          <el-input v-model="form.goodsPrice" placeholder="请输入价格" />
-        </el-form-item>
-        <el-form-item label="售价" prop="salePrice">
-          <el-input v-model="form.salePrice" placeholder="请输入售价" />
-        </el-form-item>
-        <el-form-item label="二维码" prop="goodsQrcode">
-          <el-input v-model="form.goodsQrcode" placeholder="请输入二维码" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+      <el-dialog :title="title" v-model="open" width="700px" append-to-body draggable>
+        <el-form ref="goodsInfoRef" :model="form" :rules="rules" label-width="80px">
+          <el-row>
+            <el-col :span="12"><el-form-item label="编码" prop="goodsNo">
+              <el-input v-model="form.goodsNo" placeholder="请输入编码" />
+            </el-form-item></el-col>
+            <el-col :span="12"><el-form-item label="名称" prop="goodsName">
+              <el-input v-model="form.goodsName" placeholder="请输入名称" />
+            </el-form-item></el-col>
+          </el-row>
+          <el-form-item label="产地" prop="goodsPlace">
+            <!--          <el-input v-model="form.goodsPlace" placeholder="请输入产地" />-->
+            <el-cascader
+                size="large"
+                :options="options"
+                v-model="form.goodsPlace"
+                @change="handleGoodsPlace">
+            </el-cascader>
+          </el-form-item>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="品牌" prop="goodsBrand">
+                <el-input v-model="form.goodsBrand" placeholder="请输入品牌" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="规格" prop="goodsSpec">
+                <el-input v-model="form.goodsSpec" placeholder="请输入规格" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="单位" prop="goodsUnit">
+<!--                <el-input v-model="form.goodsUnit" placeholder="请输入单位" />-->
+                <el-select
+                    v-model="form.goodsUnit"
+                    filterable
+                    allow-create
+                    default-first-option
+                    :reserve-keyword="false"
+                    placeholder="请选择商品单位"
+                    @change="handleGoodsUnit"
+
+                >
+                  <el-option
+                      v-for="item in GoodsOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="库存" prop="goodsStock">
+                <el-input v-model="form.goodsStock" placeholder="请输入库存" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="价格" prop="goodsPrice">
+                <el-input v-model="form.goodsPrice" placeholder="请输入价格" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="售价" prop="salePrice">
+                <el-input v-model="form.salePrice" placeholder="请输入售价" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="二维码" prop="goodsQrcode">
+                <el-input v-model="form.goodsQrcode" placeholder="请输入二维码" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+
+            </el-col>
+          </el-row>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+          </div>
+        </template>
+      </el-dialog>
   </div>
 </template>
 
 <script setup name="GoodsInfo">
 import { listGoodsInfo, getGoodsInfo, delGoodsInfo, addGoodsInfo, updateGoodsInfo } from "@/api/shop/goodsInfo";
+import { regionDataPlus , CodeToText } from 'element-china-area-data'
 
 const { proxy } = getCurrentInstance();
 
@@ -175,6 +226,99 @@ const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 
+//校验输入编码规则
+const checkGoodsNo = (rule, value, callback)=>{
+  if (value !== '' && value !== null) {
+    if (!/^-?[1-9]\d*$/.test(value)) {
+      callback(new Error('编码必须为数字'))
+    } else if (!/^\d{6,9}$/.test(value)){
+      callback(new Error('编码必须为6-9位数字'))
+    }else {
+      callback()
+    }
+  } else {
+    callback(new Error('编码不能为空'))
+  }
+}
+//库存总量规则校验
+const checkGoodsStock = (rules,value,callback)=>{
+  if (value !== '' && value !== null) {
+    console.log(form.goodsUnit)
+    if(form.goodsUnit !== 'kg'){
+      if (!/^-?[1-9]\d*$/.test(value)) {
+        callback(new Error('库存总量必须为整数'))
+      }else if(value < 0){
+        callback(new Error('库存总量必须为正整数'))
+      }else {
+        callback()
+      }
+    }else {
+      if (value < 0){
+        callback(new Error('库存总量不能小于0'))
+      }else if (!/^((([^0][0-9]+|0)\.([0-9]{1,2}))$)|^(([1-9]+)\.([0-9]{1,3})$)/.test(value)){
+        callback(new Error('库存总量最多保留三位小数'))
+      }else {
+        callback()
+      }
+    }
+  } else {
+    callback(new Error('库存总量不能为空'))
+  }
+}
+//商品价格规则校验
+const checkGoodsPrice = (rules,value,callback)=>{
+  if (value !== '' && value !== null) {
+    if(value < 0){
+      callback(new Error('商品价格不能为负数'))
+    }else{
+      if(value.indexOf(".") !==0) {
+        if (!/^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,3})$)|^(([1-9]+)$)/.test(value)) {
+          callback(new Error('商品价格最多保留三位小数'))
+        }else {
+          callback()
+        }
+      }else {
+        if(value.substr(0,1) === '.'){
+          callback(new Error('商品价格输入格式不正确'))
+        }
+      }
+    }
+
+  } else {
+    callback(new Error('商品价格不能为空'))
+  }
+}
+
+const options = regionDataPlus
+const GoodsOptions = [
+  {value: 'kg',
+    label: '千克'},
+  {
+    value: '袋',
+    label: '袋'
+  },
+  {
+    value: '套',
+    label: '套'
+  },
+  {
+    value: '个',
+    label: '个'
+  },
+  {
+    value: '打',
+    label: '打'
+  },
+  {
+    value: '箱',
+    label: '箱'
+  },
+  {
+    value: '件',
+    label: '件'
+  }
+]
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -183,13 +327,18 @@ const data = reactive({
     goodsNo: null,
     goodsName: null,
     goodsBrand: null,
+    goodsPlace: null
   },
   rules: {
+    // goodsNo: [
+    //   { required: true, message: "编码不能为空", trigger: "blur" },
+    //   {type: 'number', message: "编码必须为数字", trigger: "blur"}
+    // ],
     goodsNo: [
-      { required: true, message: "编码不能为空", trigger: "blur" }
+      { validator: checkGoodsNo, trigger: "blur" }
     ],
     goodsName: [
-      { required: true, message: "名称不能为空", trigger: "blur" }
+      { required:   true, message: "名称不能为空", trigger: "blur" }
     ],
     goodsPlace: [
       { required: true, message: "产地不能为空", trigger: "blur" }
@@ -204,13 +353,16 @@ const data = reactive({
       { required: true, message: "单位不能为空", trigger: "blur" }
     ],
     goodsStock: [
-      { required: true, message: "库存不能为空", trigger: "blur" }
+      { validator: checkGoodsStock, trigger: "blur" }
+      // { required: true, message: "库存不能为空", trigger: "blur" }
     ],
     goodsPrice: [
-      { required: true, message: "价格不能为空", trigger: "blur" }
+      { validator: checkGoodsPrice, trigger: "blur" }
+      // { required: true, message: "价格不能为空", trigger: "blur" }
     ],
     salePrice: [
-      { required: true, message: "售价不能为空", trigger: "blur" }
+      { validator: checkGoodsPrice, trigger: "blur" }
+      // { required: true, message: "售价不能为空", trigger: "blur" }
     ],
     goodsQrcode: [
       { required: true, message: "二维码不能为空", trigger: "blur" }
@@ -220,6 +372,45 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data);
 
+// 产地选择
+function getCodeToText(codeStr, codeArray) {
+  if (null === codeStr && null === codeArray) {
+    return null;
+  } else if (null === codeArray) {
+    codeArray = codeStr.split(",");
+  }
+  let area = "";
+  switch (codeArray.length) {
+    case 1:
+      area += CodeToText[codeArray[0]];
+      break;
+    case 2:
+      area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
+      break;
+    case 3:
+      area +=
+          CodeToText[codeArray[0]] +
+          "/" +
+          CodeToText[codeArray[1]] +
+          "/" +
+          CodeToText[codeArray[2]];
+      break;
+    default:
+      break;
+  }
+  return area;
+}
+
+ function handleGoodsPlace (value) {
+   console.log(value)
+   form.goodsPlace = getCodeToText(null, value)
+}
+
+// 商品单位选择
+function handleGoodsUnit(value) {
+  form.goodsUnit = value
+}
+
 /** 查询商品信息列表 */
 function getList() {
   loading.value = true;
diff --git a/src/views/shop/info/index.vue b/src/views/shop/info/index.vue
index 75440a4..5a8f946 100644
--- a/src/views/shop/info/index.vue
+++ b/src/views/shop/info/index.vue
@@ -77,10 +77,10 @@
       </right-toolbar>
     </el-row>
 
-    <div class="grid" style="margin-left:1%;margin-right:1%;width: 80vw;height: 70vh;" v-if="showGrid">
-      <el-row :gutter="20">
-        <el-col :span="4" v-for="(item, key) in infoList" :key="key" :offset="2" >
-          <div style="margin-top:15px">
+    <div class="grid" style="width: 80vw;height: 75vh;" v-if="showGrid">
+      <el-row :gutter="20" justify="space-around">
+        <el-col  v-for="(item, key) in infoList" :key="key" :span="25">
+          <div style="margin-top:10px">
             <el-card shadow="hover" :span="1" style="max-width: 400px;text-align: center;margin-bottom: 80px;">
               <el-image :src="getImgUrl(item.shopImg)" style="height: 180px;width: 200px;"  ></el-image>
               <div style="text-align: left;margin: 10px;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">
diff --git a/src/views/shop/templateInfo/draw.vue b/src/views/shop/templateInfo/draw.vue
index 871b1e0..32f1d8b 100644
--- a/src/views/shop/templateInfo/draw.vue
+++ b/src/views/shop/templateInfo/draw.vue
@@ -3,7 +3,7 @@
     <el-page-header title="返回" content="模板编辑" @back="$router.back()">
       <template #extra>
         <el-button-group>
-          <el-button @click="reset">重置</el-button>
+          <el-button @click="reset" :loading="loading">重置</el-button>
           <el-button @click="submitForm" type="primary">保存</el-button>
         </el-button-group>
       </template>
@@ -74,6 +74,8 @@ const route = useRoute();
 
 const drawCanvasRef = ref(null);
 
+const loading = ref(false);
+
 let blockIndex = 0;
 
 const data = reactive({
@@ -100,9 +102,8 @@ onBeforeMount(() => {
 const {form, rules, content, selectBlock} = toRefs(data);
 
 /** 查询模板信息列表 */
-function getItem() {
+ async function getItem() {
   selectBlock.value = null
-
   getTemplateInfo(route.params.templateId).then(({data}) => {
     if (data.content) {
       let temp = JSON.parse(data.content)
@@ -120,8 +121,11 @@ function getItem() {
 }
 
 // 表单重置
-function reset() {
-  getItem()
+async function reset() {
+  loading.value = true
+  await getItem()
+  loading.value = false
+  proxy.$modal.msgSuccess("重置成功");
 }
 
 /** 提交按钮 */
@@ -138,12 +142,13 @@ function submitForm() {
       if (formData.templateId != null) {
         updateTemplateInfo(formData).then(response => {
           proxy.$modal.msgSuccess("修改成功");
-          getItem();
+          //不重新渲染
+          // getItem();
         });
       } else {
         addTemplateInfo(formData).then(response => {
           proxy.$modal.msgSuccess("新增成功");
-          getItem();
+          // getItem();
         });
       }
     }
diff --git a/vite.config.js b/vite.config.js
index 526c371..9dafd1b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -32,7 +32,7 @@ export default defineConfig(({ mode, command }) => {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
           // target: 'http://192.168.4.24:8080',
-          target: 'http://192.168.4.45:8039',
+          target: 'http://192.168.4.45:8869',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }