feat: 图库功能

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">
-    <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> -->
+  <myDialog :title="title" width="20%" ref="myDialogRef" @Confirm="subitgood">
+    <el-input v-model="typedata" placeholder="输入分类" />
+  </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,
-      activedata: '681'
+      pageSize: 18,
+      activedata: '',
+      title: '新增分类',
+
     }
   },
-  mounted() {
-    this.getType()
+  async mounted() {
+    await this.getType()
+    this.getList()
+
   },
   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()
+    async subitgood() {
+      if (this.typedata) {
+        let res = ''
+        if (this.title == '新增分类') {
+          res = await API.add({
+            sort: '1',
+            name: this.typedata
+          });
+        } else {
+          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() {
-
-    },
-    // 删除类型
-    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);
-      });
+      this.dialogVisible = false
+      this.$emit('successEvent', this.selectImage)
     },
     // 刷新列表数据
     async doSubmit() {
@@ -155,50 +158,54 @@ export default {
     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()
+    async deletetype(id) {
+      ElMessageBox.confirm(
+        '删除该类型, 是否继续?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
         }
-      }
-    },
+      )
+        .then(async () => {
+          const res = await API.deleteByIds(id);
+          if (res.code == 200) {
+            ElMessage({
+              type: 'success',
+              message: '成功',
+            })
+            this.getType()
+          }
 
-    sumbit() {
-      this.dialogVisible = false
-      this.$emit('successEvent', this.selectImage)
+        })
+        .catch(() => {
+        })
+    },
+    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 = {
-        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
+      const res = await API2.getPage({ pictureClassifyId: this.activedata, page: this.page, size: this.pageSize });
+      this.dataImages = res.records
+      this.total = res.totalRow
     },
-    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
+    async getType() {
+      const res = await API.getList({});
+      this.options = res
+      this.activedata = res[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 { delimg } from "@/api/imagesPhp";
-// import { getToken } from "@/utils/auth";
-// import { mapGetters } from "vuex";
-// import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";
+import API from './picture'
 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 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);
+      let res = await API.add({
+        pictureClassifyId: this.activedata,
+        urls: this.fileList
+      })
+      if (res.code == 200) {
+        this.showUpload = false;
+        this.fileList = []
+        this.$emit('getList')
+      }
+    },
+    deleteImg(d) {
+      ElMessageBox.confirm("是否删除数据项?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(
+        async () => {
+          let res = await API.deleteByIds(d.id)
+          if (res.code == 200) {
+            this.$emit('getList')
+          }
         }
-        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;
+
+
+
+