feat: 图库功能

src/api/product/index.ts

@@ -11,7 +11,7 @@ const AuthAPI = {
       params,
     });
   },
-  // 单位新增
+  // 新增
   addunit(data: any) {
     return request<any, Responseres>({
       url: `${baseURL}`,
@@ -19,14 +19,14 @@ const AuthAPI = {
       data,
     });
   },
-  // 获取详情
+  // 详情
   getunitinfo(id: number) {
     return request<any, Responseres>({
       url: `${baseURL}/${id}`,
       method: "get",
     });
   },
-  // 编辑确定
+  // 编辑
   update(data: Object) {
     return request<any, Responseres>({
       url: `${baseURL}`,
@@ -56,6 +56,7 @@ const AuthAPI = {
       method: "get",
     });
   },
+
 };
 
 

src/components/mycomponents/addImg.vue

@@ -2,19 +2,27 @@
   <el-dialog v-model="dialogVisible" title="选择图片" width="50%">
     <el-container>
       <el-aside style="background-color: #fff;border-right: 1px solid #ccc;" width="150px">
+        <el-button @click="addtype" type="">新增分类</el-button>
         <ul style="padding-left: 0;margin: 0;">
-          <li style="cursor: pointer;" v-for="item in options" :key="item.id"
+          <li style="cursor: pointer;width: 90%;margin: 10px 0 ;" 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>
+            <div style="display: flex;align-items: center;justify-content: space-between;">
+              {{ item.name }}
+              <div>
+                <span @click="edittype(item)" v-if="activedata == item.id && item.isSystem != 1"
+                  style="color: #999;">修改</span>&nbsp;
+                <span @click="deletetype(item.id)" v-if="activedata == item.id && item.isSystem != 1"
+                  style="color: #999;">删除</span>&nbsp;
+              </div>
+            </div>
           </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 v-if="activedata" @onSelectImage="onSelectImage" @getList="getList" :activedata="activedata"
+          :list='dataImages'>
         </imageComponent>
-        <!-- <mypagination :total="total" @gopageEvent="handleCurrentChange"></mypagination> -->
+        <mypagination :total="total" v-if="activedata" @gopageEvent="handleCurrentChange"></mypagination>
       </el-main>
     </el-container>
     <template #footer>
@@ -26,29 +34,15 @@
   </el-dialog>
 
 
-  <!-- <myDialog title="选择图片" width="50%" ref="myDialogRef" @Confirm="subitgood">
+  <myDialog :title="title" width="20%" ref="myDialogRef" @Confirm="subitgood">
-    <el-container>
+    <el-input v-model="typedata" placeholder="输入分类" />
-      <el-aside style="background-color: #fff;border-right: 1px solid #ccc;" width="150px">
+  </myDialog>
-        <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 API from './addImgconfig/gallery'
+import API2 from './addImgconfig/picture'
 import myDialog from './myDialog.vue'
 import imageComponent from './addImgconfig/imageComponent.vue'
 import mypagination from './addImgconfig/mypagination.vue'
@@ -66,33 +60,61 @@ export default {
       dataImages: [],
       options: [],
       fileList: [],
-      value: '',
+      editId: '',
+      // 新增分类
       typedata: '',
       showUpload: false,
       page: 1,
       total: 0,
-      // pageSize: 18,
+      pageSize: 18,
-      activedata: '681'
+      activedata: '',
+      title: '新增分类',
+
     }
   },
-  mounted() {
+  async mounted() {
-    this.getType()
+    await this.getType()
+    this.getList()
+
   },
   methods: {
-    subitgood() {
+    async subitgood() {
-      this.$emit('success', this.selectImage)
+      if (this.typedata) {
-      this.$refs.myDialogRef.close()
+        let res = ''
-    },
+        if (this.title == '新增分类') {
-    uplocation() {
+          res = await API.add({
-      this.activedata = -1
+            sort: '1',
-      this.page = 1
+            name: this.typedata
-      this.dataImages = []
+          });
-      // this.pageSize = 17
+        } else {
-      this.getList()
+          res = await API.update({
+            sort: '1',
+            name: this.typedata,
+            id: this.editId
+          });
+        }
+        if (res.code == 200) {
+          this.getType()
+          ElMessage({
+            type: 'success',
+            message: '成功',
+          })
+          this.$refs.myDialogRef.close()
+          this.typedata = ''
+        }
+      }
     },
+    // uplocation() {
+    //   this.activedata = -1
+    //   this.page = 1
+    //   this.dataImages = []
+    //   // this.pageSize = 17
+    //   this.getList()
+    // },
+
     changeEvent(id) {
       this.page = 1
-      // this.pageSize = 18
+      this.pageSize = 18
       this.activedata = id
       this.getList()
     },
@@ -101,27 +123,8 @@ export default {
       this.getList()
     },
     Confirm() {
-
+      this.dialogVisible = false
-    },
+      this.$emit('successEvent', this.selectImage)
-    // 删除类型
-    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() {
@@ -155,50 +158,54 @@ export default {
     handleSuccess(response, file, fileList) {
       this.files.push(file)
     },
-    async addtype() {
+    async deletetype(id) {
-      if (this.typedata) {
+      ElMessageBox.confirm(
-        return
+        '删除该类型, 是否继续?',
-        const res = await storeAddcategory({
+        '提示',
-          store_id: localStorage.getItem("shopId"),
+        {
-          name: this.typedata
+          confirmButtonText: '确定',
-        });
+          cancelButtonText: '取消',
-        if (res.msg == '成功') {
+          type: 'warning',
-          this.typedata = ''
-          this.dialogTableVisibles = false
-          this.getType()
         }
-      }
+      )
-    },
+        .then(async () => {
+          const res = await API.deleteByIds(id);
+          if (res.code == 200) {
+            ElMessage({
+              type: 'success',
+              message: '成功',
+            })
+            this.getType()
+          }
 
-    sumbit() {
+        })
-      this.dialogVisible = false
+        .catch(() => {
-      this.$emit('successEvent', this.selectImage)
+        })
+    },
+    addtype() {
+      this.title = '新增分类'
+      this.$refs.myDialogRef.open()
     },
     show() {
       this.dialogVisible = true
-      // this.$refs.myDialogRef.open()
-      // console.log('show');
     },
+    edittype(item) {
+      this.editId = item.id
+      this.typedata = item.name
+      this.title = '修改分类'
+      this.$refs.myDialogRef.open()
+    },
+
+
     async getList() {
-      let obj = {
+      const res = await API2.getPage({ pictureClassifyId: this.activedata, page: this.page, size: this.pageSize });
-        category: this.activedata == -1 ? '' : this.activedata,
+      this.dataImages = res.records
-        page: this.page,
+      this.total = res.totalRow
-        size: 18,
-        store_id: localStorage.getItem("shopId"),
-      }
-      return
-      const res = await getcommonpicture(obj);
-      this.dataImages = res.data
-      this.total = res.count
     },
-    async getType(valueIndex) {
+    async getType() {
-      console.log(2222)
+      const res = await API.getList({});
-      return
+      this.options = res
-      const res = await getcommonCategor({
+      this.activedata = res[0].id
-        store_id: localStorage.getItem("shopId"),
-      });
-      this.options = res.data
-      this.value = valueIndex ? valueIndex : res.data[0].id
       this.getList()
     },
     onSelectImage(d) {

src/components/mycomponents/addImgconfig/gallery.ts

@@ -0,0 +1,51 @@
+import request from "@/utils/request";
+const baseURL = "/account/admin/picture/classify";
+// 图库管理
+const AuthAPI = {
+  /** 列表*/
+  getList(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/list`,
+      method: "get",
+      params,
+    });
+  },
+  // 新增
+  add(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "post",
+      data,
+    });
+  },
+
+  // 修改
+  update(data: Object) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  // 删除
+  deleteByIds(id: number | String) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "delete",
+    });
+  },
+
+};
+
+export interface Responseres {
+  code?: number | null;
+  data?: any;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+export default AuthAPI;
+
+
+
+

src/components/mycomponents/addImgconfig/imageComponent.vue

@@ -7,119 +7,71 @@
     <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)">
+        <el-icon style="position: absolute;right: 0;top: 0;" v-if="selectList.id == item.id" @click="deleteImg(item)">
+          <CloseBold />
+        </el-icon>
         <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 API from './picture'
-// 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"],
+  props: ["activedata", "list"],
   data() {
     return {
       showUpload: false,
       selectList: [],
-      files: [],
       fileList: [],
-
     }
   },
   mounted() {
-
   },
   methods: {
     upShowUp() {
       this.showUpload = true;
     },
     async doSubmit() {
-      this.showUpload = false;
+      let res = await API.add({
-      let arr = []
+        pictureClassifyId: this.activedata,
-      if (this.files.length) {
+        urls: this.fileList
-        this.files.forEach(ele => {
+      })
-          arr.push({
+      if (res.code == 200) {
-            url: ele.response.data[0],
+        this.showUpload = false;
-            name: ele.name
+        this.fileList = []
-          })
+        this.$emit('getList')
-        })
+      }
-        return
+    },
-        const res = await addImg({
+    deleteImg(d) {
-          category: '',
+      ElMessageBox.confirm("是否删除数据项?", "提示", {
-          store_id: localStorage.getItem("shopId"),
+        confirmButtonText: "确定",
-          url: arr
+        cancelButtonText: "取消",
-        })
+        type: "warning",
-        if (res.code == 1) {
+      }).then(
-          // this.getType(this.value)
+        async () => {
-          this.$emit('getList')
+          let res = await API.deleteByIds(d.id)
-          this.$message.success(res.msg);
+          if (res.code == 200) {
-
+            this.$emit('getList')
-        } 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>

src/components/mycomponents/addImgconfig/picture.ts

@@ -0,0 +1,51 @@
+import request from "@/utils/request";
+const baseURL = "/account/admin/picture/gallery";
+// 图片管理
+const AuthAPI = {
+  /** 列表*/
+  getPage(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/page`,
+      method: "get",
+      params,
+    });
+  },
+  // 新增
+  add(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "post",
+      data,
+    });
+  },
+
+  // 修改
+  update(data: Object) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  // 删除
+  deleteByIds(id: number | String) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "delete",
+    });
+  },
+
+};
+
+export interface Responseres {
+  code?: number | null;
+  data?: any;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+export default AuthAPI;
+
+
+
+

src/views/inventory/consumables.vue

@@ -1 +1,16 @@
-<template></template>
+<template>
+  <div style="padding: 15px;">
+    <!-- 搜索 -->
+    <Search></Search>
+    <!-- 数据统计 -->
+    <DataStatistics></DataStatistics>
+    <!-- 表格 -->
+    <Content></Content>
+    <!-- 其他内容 -->
+  </div>
+</template>
+<script setup>
+import Search from './consumablesconfig/Search.vue'
+import DataStatistics from './consumablesconfig/DataStatistics.vue'
+import Content from './consumablesconfig/Content.vue'
+</script>

src/views/inventory/consumablesconfig/Content.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="Table">
+    <!-- 按钮 -->
+    <AddButton></AddButton>
+    <!-- 表格 -->
+    <Table></Table>
+    <!-- 分页 -->
+    <Paging></Paging>
+  </div>
+</template>
+<script setup>
+import AddButton from './component/AddButton.vue'
+import Table from './component/Table.vue'
+import Paging from './component/Paging.vue'
+</script>
+<style scoped lang="scss">
+.Table {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+</style>

src/views/inventory/consumablesconfig/DataStatistics.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="DataStatistics">
+    <div style="width:  200px;">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <span>耗材种数</span>
+      <span>{{ datas.totalRow }}</span>
+    </div>
+    <div style="width:  300px;">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <div>
+        <div><span>增加数量：</span><span>0</span></div>
+        <div style="display: flex;">
+          <div>
+            <span>手动增加：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>入库：</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="width:  500px;">
+      <el-icon class="iconStyle">
+        <UserFilled />
+      </el-icon>
+      <div>
+        <div><span>减少数量：</span><span>0</span></div>
+        <div style="display: flex;">
+          <div>
+            <span>手动减少：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>消耗：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>报损：</span><span>0</span>
+          </div><span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>出库：</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import API from "@/api/product/index";
+import { onMounted, reactive } from "vue";
+onMounted(() => {
+  getPage();
+})
+let datas = reactive({
+  totalRow: 0
+})
+async function getPage() {
+  let res = await API.getPage();
+  datas.totalRow = res.totalRow
+}
+</script>
+
+
+<style scoped lang="scss">
+.DataStatistics {
+  border: 1px solid #e4e7ed;
+  background-color: #fff;
+  border-radius: 4px;
+  margin: 20px 0;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  >div {
+    height: 80px;
+    background-color: #f4f9ff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    padding: 20px;
+
+    .iconStyle {
+      background-color: #d4e9fe;
+      border-radius: 50%;
+      padding: 6px;
+      font-size: 36px;
+      color: #3f9eff;
+    }
+
+    span {
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/inventory/consumablesconfig/Search.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="Search">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="耗材分类">
+        <el-select v-model="formInline.region" placeholder="请选择耗材分类" clearable>
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="耗材名称">
+        <el-input v-model="formInline.user" placeholder="请输入耗材名称" clearable />
+      </el-form-item>
+      <el-form-item label="日期">
+        <el-date-picker v-model="formInline.value1" type="daterange" range-separator="-" start-placeholder="开始日期"
+          end-placeholder="结束日期" />
+      </el-form-item>
+      <el-form-item label="排列方式">
+        <el-select v-model="formInline.region" placeholder="请选择排列方式" clearable>
+          <el-option label="创建时间" value="shanghai" />
+          <el-option label="数量由低到高" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
+        <el-button icon="Refresh" @click="onSubmit">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const formInline = reactive({
+  user: '',
+  region: '',
+  date: '',
+  value1: ""
+})
+
+const onSubmit = () => {
+  console.log('submit!')
+}
+</script>
+
+<style scoped lang="scss">
+.Search {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>

src/views/inventory/consumablesconfig/component/AddButton.vue

@@ -0,0 +1,7 @@
+<template>
+  <el-button type="success" icon="Plus">新增</el-button>
+  <el-button>入库</el-button>
+  <el-button>出库</el-button>
+  <el-button>分类管理</el-button>
+  <el-button>供应商管理</el-button>
+</template>

src/views/inventory/consumablesconfig/component/Paging.vue

@@ -0,0 +1,22 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-pagination background :page-size="20" :page-sizes="[10, 20, 30, 40]" layout="prev,pager,next,jumper,total,sizes"
+      v-model:current-page="datas.currentPage" :total="datas.total" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" />
+  </div>
+</template>
+<script setup>
+let datas = reactive({
+  currentPage: 1,
+  pageSize: 20,
+  total: 20,
+})
+// 当前条改变
+function handleSizeChange(val) {
+  console.log(`每页 ${val} 条`);
+}
+// 当前页改变
+function handleCurrentChange(val) {
+  console.log(`当前页: ${val}`);
+}
+</script>

src/views/inventory/consumablesconfig/component/Table.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="date" label="Date" width="180" />
+      <el-table-column prop="name" label="Name" width="180" />
+      <el-table-column prop="address" label="Address" />
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+]
+</script>

src/views/product/indexconfig/addgoods.vue

@@ -33,32 +33,26 @@
           </el-form-item>
         </el-col>
       </el-form-item>
-      <el-form-item label="商品图片" required prop="images">
-        <MultiImageUpload v-model="ruleForm.images" />
-      </el-form-item>
       <!-- <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">
+          <div v-for="(item, index) in ruleForm.images" :key="index" style="position: relative" class="showStyle">
-            <i class="el-icon-error buttonstyle" @click="deleteEvent(item)"></i>
+            <el-icon class="buttonstyle" @click="deleteEvent(item)">
-            <img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :key="item.id" :src="item.url"
+              <DeleteFilled />
-              alt="" />
+            </el-icon>
+            <img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
           </div>
           <div class="upImgStyle" @click="addimgEvent">+</div>
         </div>
-      </el-form-item> -->
+      </el-form-item>
       <el-form-item>
         <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>
-          <el-checkbox label="dine">自取</el-checkbox>
-          <el-checkbox label="delivery">配送</el-checkbox>
-          <el-checkbox label="express">快递</el-checkbox>
-        </el-checkbox-group>
-      </el-form-item> -->
       <el-form-item label="商品类型">
         <el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)">
           <el-radio value="single">单规格商品</el-radio>
@@ -309,7 +303,6 @@ let datas = reactive<datasForm>({
   showSelectSku: false,
   selectSkuItem: {},
   addGroupIndex: -1,
-  imgList: [],
 
 })
 let shopListRef = ref(null)
@@ -328,7 +321,6 @@ interface datasForm {
   showSelectSku: boolean,
   selectSkuItem: any,
   addGroupIndex: any,
-  imgList: any[]
 }
 interface RuleForm {
   name: string,
@@ -343,7 +335,7 @@ interface RuleForm {
   skuList: string[],
   weight: any,
   isAllowTempModifyPrice: any,
-  days: string[],
+  days: any,
   useTime: string[],
   startTime: string,
   endTime: string,
@@ -529,13 +521,11 @@ function addgoods(index: number = -1) {
   (shopListRef.value as any)?.opens()
 }
 function deleteEvent(d: any) {
-  let index = datas.imgList.findIndex((ele) => ele.url == d.url);
+  let index = ruleForm.images.findIndex((ele) => ele == d);
-  datas.imgList.splice(index, 1);
+  ruleForm.images.splice(index, 1);
 }
 function successEvent(d: any) {
-  // this.form.images.push(d[0].url);
+  ruleForm.images.push(d[0].url);
-  // this.imgList.push(d[0]);
-
 }
 // 分组选择商品
 function selectShopRes(res: Array<any>) {
@@ -757,11 +747,17 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         // console.log(ruleForm, '套餐')
       }
       if (ruleForm.id) {
+        setTimeout(() => {
+          ruleForm.days = ruleForm.days.split(',')
+        }, 600);
         let res = await UserAPI3.update(ruleForm)
         if (res.code == 200) {
           ElMessage.success("修改成功");
         }
       } else {
+        setTimeout(() => {
+          ruleForm.days = ruleForm.days.split(',')
+        }, 600);
         let res = await UserAPI3.addunit(ruleForm)
         if (res.code == 200) {
           ElMessage.success("添加成功");
@@ -869,6 +865,10 @@ const resetForm = (formEl: FormInstance | undefined) => {
   margin-bottom: 20px;
 }
 
+.showStyle:hover>.buttonstyle {
+  display: block;
+}
+
 .upImgStyle {
   cursor: pointer;
   width: 148px;
@@ -880,4 +880,16 @@ const resetForm = (formEl: FormInstance | undefined) => {
   font-size: 30px;
   color: #ccc;
 }
+
+.buttonstyle {
+  border-radius: 50%;
+  color: #db1616;
+  background-color: #fff;
+  font-size: 20px;
+  display: none;
+  position: absolute;
+  right: 0px;
+  top: -10px;
+  z-index: 10;
+}
 </style>