From 5f41da34fb055feaf6887016b269f48a899b3c6e Mon Sep 17 00:00:00 2001
From: duan <1004387497@qq.com>
Date: Wed, 26 Feb 2025 15:52:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9B=BE=E5=BA=93=E5=8A=9F=E8=83=BD=E6=9C=AA=E5=BC=80=E5=A7=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |   6 +
 src/components/mycomponents/addImg.vue        | 221 ++++++++++++++++++
 .../addImgconfig/imageComponent.vue           | 194 +++++++++++++++
 .../addImgconfig/mypagination.vue             |  79 +++++++
 .../indexconfig/SpecificationAttribute.vue    |   2 +-
 src/views/product/indexconfig/addgoods.vue    |  85 +++++--
 6 files changed, 568 insertions(+), 19 deletions(-)
 create mode 100644 src/components/mycomponents/addImg.vue
 create mode 100644 src/components/mycomponents/addImgconfig/imageComponent.vue
 create mode 100644 src/components/mycomponents/addImgconfig/mypagination.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 01df9ae..ca69dfc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -83,5 +83,11 @@
   },
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "[snippets]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
   }
 }
diff --git a/src/components/mycomponents/addImg.vue b/src/components/mycomponents/addImg.vue
new file mode 100644
index 0000000..963817e
--- /dev/null
+++ b/src/components/mycomponents/addImg.vue
@@ -0,0 +1,221 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="选择图片" width="50%">
+    <el-container>
+      <el-aside style="background-color: #fff;border-right: 1px solid #ccc;" width="150px">
+        <ul style="padding-left: 0;margin: 0;">
+          <li style="cursor: pointer;" v-for="item in options" :key="item.id"
+            :class="[activedata == item.id ? 'activedata' : '']" @click="changeEvent(item.id)">
+            {{ item.name }} <span style="font-size: 12px;">({{ item.count }})</span>
+          </li>
+        </ul>
+        <div class="uplocation" :class="[activedata == -1 ? 'activedata' : '']" @click="uplocation">我的图片
+        </div>
+      </el-aside>
+      <el-main>
+        <imageComponent @onSelectImage="onSelectImage" @getList="getList" :activedata="activedata" :list='dataImages'>
+        </imageComponent>
+        <!-- <mypagination :total="total" @gopageEvent="handleCurrentChange"></mypagination> -->
+      </el-main>
+    </el-container>
+    <template #footer>
+      <div style="text-align: center">
+        <el-button type="success" @click="Confirm">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+
+  <!-- <myDialog title="选择图片" width="50%" ref="myDialogRef" @Confirm="subitgood">
+    <el-container>
+      <el-aside style="background-color: #fff;border-right: 1px solid #ccc;" width="150px">
+        <ul style="padding-left: 0;margin: 0;">
+          <li style="cursor: pointer;" v-for="item in options" :key="item.id"
+            :class="[activedata == item.id ? 'activedata' : '']" @click="changeEvent(item.id)">
+            {{ item.name }} <span style="font-size: 12px;">({{ item.count }})</span>
+          </li>
+        </ul>
+        <div class="uplocation" :class="[activedata == -1 ? 'activedata' : '']" @click="uplocation">我的图片
+        </div>
+      </el-aside>
+      <el-main>
+        <imageComponent @onSelectImage="onSelectImage" @getList="getList" :activedata="activedata" :list='dataImages'>
+        </imageComponent>
+        <mypagination :total="total" @gopageEvent="handleCurrentChange"></mypagination>
+      </el-main>
+    </el-container>
+  </myDialog> -->
+</template>
+
+<script>
+// import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";
+import myDialog from './myDialog.vue'
+import imageComponent from './addImgconfig/imageComponent.vue'
+import mypagination from './addImgconfig/mypagination.vue'
+export default {
+  components: {
+    imageComponent, mypagination, myDialog
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTableVisibles: false,
+      selectImage: [],
+
+      files: [],
+      dataImages: [],
+      options: [],
+      fileList: [],
+      value: '',
+      typedata: '',
+      showUpload: false,
+      page: 1,
+      total: 0,
+      // pageSize: 18,
+      activedata: '681'
+    }
+  },
+  mounted() {
+    this.getType()
+  },
+  methods: {
+    subitgood() {
+      this.$emit('success', this.selectImage)
+      this.$refs.myDialogRef.close()
+    },
+    uplocation() {
+      this.activedata = -1
+      this.page = 1
+      this.dataImages = []
+      // this.pageSize = 17
+      this.getList()
+    },
+    changeEvent(id) {
+      this.page = 1
+      // this.pageSize = 18
+      this.activedata = id
+      this.getList()
+    },
+    handleCurrentChange(i) {
+      this.page = i
+      this.getList()
+    },
+    Confirm() {
+
+    },
+    // 删除类型
+    deleteType(id) {
+      this.$confirm('删除该类型, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        let res = await delcate({
+          id,
+          store_id: localStorage.getItem("shopId"),
+        })
+        this.getType()
+        this.$message({
+          type: 'success',
+          message: res.msg
+        });
+      }).catch(() => {
+        this.$message.error(res.msg);
+      });
+    },
+    // 刷新列表数据
+    async doSubmit() {
+      this.showUpload = false;
+      let arr = []
+      if (this.files.length) {
+        this.files.forEach(ele => {
+          arr.push({
+            url: ele.response.data[0],
+            name: ele.name
+          })
+        })
+        return
+        const res = await addImg({
+          category: this.value,
+          store_id: localStorage.getItem("shopId"),
+          url: arr
+        })
+        if (res.code == 1) {
+          this.getType(this.value)
+        } else {
+          this.$message.error(res.msg);
+        }
+        this.files = [];
+      }
+    },
+    handleBeforeRemove(file, fileList) {
+      let index = this.files.findIndex(ele => ele.name == file.name)
+      this.files.splice(index, 1);
+    },
+    handleSuccess(response, file, fileList) {
+      this.files.push(file)
+    },
+    async addtype() {
+      if (this.typedata) {
+        return
+        const res = await storeAddcategory({
+          store_id: localStorage.getItem("shopId"),
+          name: this.typedata
+        });
+        if (res.msg == '成功') {
+          this.typedata = ''
+          this.dialogTableVisibles = false
+          this.getType()
+        }
+      }
+    },
+
+    sumbit() {
+      this.dialogVisible = false
+      this.$emit('successEvent', this.selectImage)
+    },
+    show() {
+      this.dialogVisible = true
+      // this.$refs.myDialogRef.open()
+      // console.log('show');
+    },
+    async getList() {
+      let obj = {
+        category: this.activedata == -1 ? '' : this.activedata,
+        page: this.page,
+        size: 18,
+        store_id: localStorage.getItem("shopId"),
+      }
+      return
+      const res = await getcommonpicture(obj);
+      this.dataImages = res.data
+      this.total = res.count
+    },
+    async getType(valueIndex) {
+      console.log(2222)
+      return
+      const res = await getcommonCategor({
+        store_id: localStorage.getItem("shopId"),
+      });
+      this.options = res.data
+      this.value = valueIndex ? valueIndex : res.data[0].id
+      this.getList()
+    },
+    onSelectImage(d) {
+      this.selectImage = [d]
+    }
+  }
+}
+</script>
+<style scoped>
+.activedata {
+  color: #1890ff;
+  /* background-color: #f6f7f8; */
+}
+
+.uplocation {
+  cursor: pointer;
+  /* position: absolute; */
+  /* bottom: 20px; */
+}
+</style>
\ No newline at end of file
diff --git a/src/components/mycomponents/addImgconfig/imageComponent.vue b/src/components/mycomponents/addImgconfig/imageComponent.vue
new file mode 100644
index 0000000..d92a299
--- /dev/null
+++ b/src/components/mycomponents/addImgconfig/imageComponent.vue
@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <div style="text-align: right;">
+      <span style="color: #aaa;">只能上传png、jgp图片</span>
+      <el-button @click="upShowUp" style="background-color: #f6f7f8;">上传文件</el-button>
+    </div>
+    <ul class="ulStyle" :class="[activedata == -1 ? '' : 'heightStyle']">
+      <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
+        @click="clickEvent(item)">
+        <img :src="item.url" style="width: 100px;height: 100px;" alt="">
+      </li>
+    </ul>
+    <el-dialog v-model="showUpload" title="">
+      <!-- <SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess"> </SingleImageUpload> -->
+      <MultiImageUpload v-model="fileList" />
+      <template #footer>
+        <el-button type="primary" @click="doSubmit">确认</el-button>
+      </template>
+    </el-dialog>
+    <!-- <el-dialog v-model="showUpload" title="" width="50%">
+      <SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess">
+        <img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
+        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+      </SingleImageUpload>
+      123
+      <template #footer>
+        <el-button type="primary" @click="doSubmit">确认</el-button>
+      </template>
+</el-dialog> -->
+  </div>
+</template>
+<script>
+
+// import { delimg } from "@/api/imagesPhp";
+// import { getToken } from "@/utils/auth";
+// import { mapGetters } from "vuex";
+// import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";
+import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";
+// import MultiImageUpload from "../../Upload/MultiImageUpload";
+export default {
+  computed: {
+    // ...mapGetters(["qiNiuUploadApi"])
+  },
+  components: {
+    MultiImageUpload
+  },
+  // props: ["accept"],
+  data() {
+    return {
+      showUpload: false,
+      selectList: [],
+      files: [],
+      fileList: [],
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    upShowUp() {
+      this.showUpload = true;
+    },
+    async doSubmit() {
+      this.showUpload = false;
+      let arr = []
+      if (this.files.length) {
+        this.files.forEach(ele => {
+          arr.push({
+            url: ele.response.data[0],
+            name: ele.name
+          })
+        })
+        return
+        const res = await addImg({
+          category: '',
+          store_id: localStorage.getItem("shopId"),
+          url: arr
+        })
+        if (res.code == 1) {
+          // this.getType(this.value)
+          this.$emit('getList')
+          this.$message.success(res.msg);
+
+        } else {
+          this.$message.error(res.msg);
+        }
+        this.files = [];
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      this.files.push(file)
+    },
+    handleBeforeRemove(file, fileList) {
+      let index = this.files.findIndex(ele => ele.name == file.name)
+      this.files.splice(index, 1);
+    },
+    beforeUpload(file) {
+      if (file.type == 'image/png') {
+      } else if (file.type == 'image/jpeg') {
+      } else {
+        this.$message.error('只能上传图片')
+        return false
+      }
+
+    },
+    clickEvent(d) {
+      this.selectList = d
+      this.$emit('onSelectImage', d)
+    },
+    async deleteEvent(id) {
+      return
+      let res = await delimg({
+        id,
+        store_id: localStorage.getItem("shopId"),
+      })
+      this.$message({
+        type: 'success',
+        message: '删除成功!'
+      });
+      this.$emit('getList')
+    },
+  }
+}
+</script>
+<style>
+ul,
+li {
+  list-style: none;
+}
+
+.show {
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  display: none;
+}
+
+.listyle:hover>.show {
+  display: block;
+}
+
+.buttonstyle {
+  border-radius: 50%;
+  color: #db1616;
+  background-color: #fff;
+  font-size: 20px;
+}
+
+.ulStyle {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+  height: 402px;
+}
+
+.heightStyle {
+  height: 402px;
+}
+
+
+.listyle {
+  width: 110px;
+  height: 110px;
+  margin-right: 10px;
+  margin-top: 10px;
+  border: 5px solid #fff;
+  position: relative;
+  text-align: center;
+}
+
+.listyle:last-child {
+  margin-right: auto;
+}
+
+.upImgStyles {
+  cursor: pointer;
+  width: 110px;
+  height: 110px;
+  line-height: 110px;
+  text-align: center;
+  border: 1px dashed #ccc;
+  border-radius: 1%;
+  font-size: 30px;
+  color: #ccc;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+
+.actives {
+  border: 5px solid #1890ff;
+}
+</style>
diff --git a/src/components/mycomponents/addImgconfig/mypagination.vue b/src/components/mycomponents/addImgconfig/mypagination.vue
new file mode 100644
index 0000000..1f53618
--- /dev/null
+++ b/src/components/mycomponents/addImgconfig/mypagination.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="mypagination">
+    <i class="el-icon-arrow-left istyle" @click="minuspage" v-show="pgae != 1"></i>
+    <div>
+      <span style="color: #42d885;">
+        {{ pgae }}
+      </span> / {{ totals }}
+    </div>
+    <i class="el-icon-arrow-right istyle" @click="gopage" v-if="pgae != totals"></i>
+    <div style="width: 26px;" v-else></div>
+    <el-input v-model='pagego' class="inputStyle" @input="oninputEvent" />
+    <el-button type="text" @click="gopages">跳转</el-button>
+
+  </div>
+</template>
+<script>
+
+export default {
+  props: ['total'],
+
+  watch: {
+    totals() {
+      this.pgae = 1
+      this.pagego = 1
+    }
+  },
+  computed: {
+    totals() {
+      let pagedata = this.total / 18
+      return pagedata < 0 ? 1 : Math.ceil(pagedata)
+    }
+  },
+  data() {
+    return { pgae: 1, pagego: 1 }
+  },
+  methods: {
+    oninputEvent(d) {
+      let a = d.replace(/[^\d]/g, '')
+      if (a < (this.totals + 1)) {
+        this.pagego = a
+      } else {
+        this.pagego = this.totals
+      }
+    },
+    gopage() {
+      this.$emit('gopageEvent', ++this.pgae)
+      this.pagego = this.pgae
+    },
+    minuspage() {
+      this.$emit('gopageEvent', --this.pgae)
+      this.pagego = this.pgae
+    },
+    gopages() {
+      this.pgae = this.pagego
+      this.$emit('gopageEvent', this.pagego)
+    }
+  }
+}
+</script>
+<style scoped>
+.mypagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.istyle {
+  background-color: #f6f7f8;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  text-align: center;
+}
+
+.inputStyle {
+  width: 50px;
+  margin-right: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/product/indexconfig/SpecificationAttribute.vue b/src/views/product/indexconfig/SpecificationAttribute.vue
index ce825b3..ae0b972 100644
--- a/src/views/product/indexconfig/SpecificationAttribute.vue
+++ b/src/views/product/indexconfig/SpecificationAttribute.vue
@@ -81,7 +81,7 @@
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button @click="showBatchModal = false">取 消</el-button>
         <el-button type="primary" @click="batchNumberFormConfirm">
           确 定
         </el-button>
diff --git a/src/views/product/indexconfig/addgoods.vue b/src/views/product/indexconfig/addgoods.vue
index e3db249..7b6d794 100644
--- a/src/views/product/indexconfig/addgoods.vue
+++ b/src/views/product/indexconfig/addgoods.vue
@@ -36,9 +36,21 @@
       <el-form-item label="商品图片" required prop="images">
         <MultiImageUpload v-model="ruleForm.images" />
       </el-form-item>
+      <!-- <el-form-item label="商品图片" required prop="images">
+        <div style="display: flex; flex-wrap: wrap">
+          <div v-for="(item, index) in datas.imgList" :key="index" style="position: relative" class="showStyle">
+            <i class="el-icon-error buttonstyle" @click="deleteEvent(item)"></i>
+            <img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :key="item.id" :src="item.url"
+              alt="" />
+          </div>
+          <div class="upImgStyle" @click="addimgEvent">+</div>
+        </div>
+      </el-form-item> -->
       <el-form-item>
-        <div style="color: #999;">注：第一张图为商品封面图，图片尺寸为750×750</div>
+        <div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
       </el-form-item>
+      <!-- 选择图片 -->
+      <AddImg ref="addImg" @successEvent="successEvent"></AddImg>
       <!-- <el-form-item label="显示/隐藏" required prop="type">
         <el-checkbox-group v-model="ruleForm.showType">
           <el-checkbox label="table">堂食</el-checkbox>
@@ -250,7 +262,7 @@ import UserAPI2 from "@/api/product/commonUnits";
 import UserAPI3 from "@/api/product/index";
 import UserAPI4 from "@/api/product/specificationsconfig";
 import shopList from "@/components/mycomponents/shopList.vue";
-
+import AddImg from '@/components/mycomponents/addImg.vue';
 import { useRouter } from 'vue-router';
 import { useTagsViewStore } from "@/store";
 const tagsViewStore = useTagsViewStore();
@@ -296,9 +308,13 @@ let datas = reactive<datasForm>({
   selectSkuConfirmIndex: 0,
   showSelectSku: false,
   selectSkuItem: {},
-  addGroupIndex: -1
+  addGroupIndex: -1,
+  imgList: [],
+
 })
 let shopListRef = ref(null)
+let addImg = ref(null)
+let isedit = ref(true)
 interface datasForm {
   cycle: { label: string, value: string }[],
   Company: any[],
@@ -311,7 +327,8 @@ interface datasForm {
   selectSkuConfirmIndex: number,
   showSelectSku: boolean,
   selectSkuItem: any,
-  addGroupIndex: any
+  addGroupIndex: any,
+  imgList: any[]
 }
 interface RuleForm {
   name: string,
@@ -446,12 +463,14 @@ async function tbProductGetDetail(id: any) {
     await tbProductSpecGet()
     selectSpecHandle(ruleForm.specId)
     datas.selectSpeclist.forEach((item: any) => {
-      item.children.forEach((ele: any) => {
-        item.selectSpecResult.push(ele.name)
-      })
+      item.selectSpecResult = res.selectSpecInfo[item.name]
+      // if (item.name === res.selectSpecInfo.name
+      // ) { }
+      // item.children.forEach((ele: any) => {
+      // item.selectSpecResult.push(ele.name)
+      // })
     })
     selectSpecResultChange()
-
   } else {
     list.value = ruleForm.skuList
   }
@@ -480,6 +499,9 @@ function selectSkuHandle(item: any, index: number) {
   //   this.selectSkuConfirmDisabled = true
   // }
 }
+function addimgEvent() {
+  (addImg.value as any)?.show()
+}
 // 确认套餐商品设置规格
 function showSelectSkuConfirm() {
   let item = datas.selectSkuItem.skuList.filter((item: any) => item.active)
@@ -506,6 +528,15 @@ function addgoods(index: number = -1) {
   datas.addGroupIndex = index;
   (shopListRef.value as any)?.opens()
 }
+function deleteEvent(d: any) {
+  let index = datas.imgList.findIndex((ele) => ele.url == d.url);
+  datas.imgList.splice(index, 1);
+}
+function successEvent(d: any) {
+  // this.form.images.push(d[0].url);
+  // this.imgList.push(d[0]);
+
+}
 // 分组选择商品
 function selectShopRes(res: Array<any>) {
   let newres = res.map(item => {
@@ -625,17 +656,23 @@ function createSkuBody() {
     }
   }
   if (ruleForm.skuList.length) {
-    newarr.forEach((val: any, index: number) => {
-      val['originPrice'] = ruleForm.skuList[index]['originPrice']
-      val['costPrice'] = ruleForm.skuList[index]['costPrice']
-      val['salePrice'] = ruleForm.skuList[index]['salePrice']
-      val['memberPrice'] = ruleForm.skuList[index]['memberPrice']
-      val['suitNum'] = ruleForm.skuList[index]['suitNum']
-    });
-    list.value = newarr
+    if (isedit.value) {
+      let arr: any[] = []
+      ruleForm.skuList.forEach((item: any, index: number) => {
+        newarr.forEach((val: any, i: number) => {
+          if (item.specInfo == val.specInfo) {
+            //       newarr[i] = item
+            Object.assign(val, item)
+            arr.push(val)
+          }
+        });
+      });
+      list.value = arr
+      isedit.value = false
+    } else {
+      list.value = newarr;
+    }
   } else {
-
-
     list.value = newarr;
   }
 }
@@ -831,4 +868,16 @@ const resetForm = (formEl: FormInstance | undefined) => {
   background-color: #F7F7FA;
   margin-bottom: 20px;
 }
+
+.upImgStyle {
+  cursor: pointer;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  text-align: center;
+  border: 1px dashed #ccc;
+  border-radius: 1%;
+  font-size: 30px;
+  color: #ccc;
+}
 </style>
\ No newline at end of file