From 67683fdba9a62ad5caa874bf9528276891041811 Mon Sep 17 00:00:00 2001
From: Vinjor <vinjorm@gmail.com>
Date: Mon, 30 Jun 2025 17:31:46 +0800
Subject: [PATCH] 1

---
 dl_vue/src/views/base/pics/index.vue     |  51 +------
 dl_vue/src/views/base/pics/selectPic.vue | 176 +++++++++++++++++++++++
 dl_vue/src/views/busi/prod/index.vue     |   2 +-
 dl_vue/src/views/busi/prod/prodForm.vue  |  56 +++++++-
 4 files changed, 229 insertions(+), 56 deletions(-)
 create mode 100644 dl_vue/src/views/base/pics/selectPic.vue

diff --git a/dl_vue/src/views/base/pics/index.vue b/dl_vue/src/views/base/pics/index.vue
index 12180ab..96ae352 100644
--- a/dl_vue/src/views/base/pics/index.vue
+++ b/dl_vue/src/views/base/pics/index.vue
@@ -69,28 +69,7 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-<!--    选择图片的组件-->
-<!--    <div class="photo-wall">-->
-<!--      <div class="photo-box" v-for="(photo, index) in picsList"-->
-<!--           :key="index" :title="photo.name">-->
-<!--        <el-image-->
-<!--          :src="photo.url"-->
-<!--          style="width: 160px; height: 160px"-->
-<!--          alt="photo"-->
-<!--          fit="fill"-->
-<!--          class="photo-image"-->
-<!--          lazy-->
-<!--          :preview-src-list="picsList.map(p => p.url)"-->
-<!--        >-->
-<!--          <div slot="error" class="image-slot">-->
-<!--            <i class="el-icon-picture-outline"></i>-->
-<!--          </div>-->
-<!--        </el-image>-->
-<!--        <div class="photo-name" >{{ photo.name }}</div>-->
-<!--        <div class="photo-checkbox"><el-checkbox size="medium" v-model="photo.checked"></el-checkbox></div>-->
-<!--      </div>-->
-<!--      <div style="clear: both"></div>-->
-<!--    </div>-->
+
 
     <el-table v-loading="loading" :data="picsList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
@@ -344,32 +323,4 @@ export default {
 };
 </script>
 
-<style scoped>
-.photo-wall {
-  margin: auto;
-}
-.photo-box{
-  float: left;
-  margin: 20px 10px;
-  position: relative;
-}
-.photo-name{
-  padding: 4px 5px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  height: 32px;
-  line-height: 28px;
-  background-color: rgba(194, 194, 194, 0.5); /* 灰色，半透明 */
-}
-.photo-checkbox{
-  position: absolute;
-  left: 0;
-  top: 0;
-}
 
-</style>
diff --git a/dl_vue/src/views/base/pics/selectPic.vue b/dl_vue/src/views/base/pics/selectPic.vue
new file mode 100644
index 0000000..2cea702
--- /dev/null
+++ b/dl_vue/src/views/base/pics/selectPic.vue
@@ -0,0 +1,176 @@
+<template>
+  <el-dialog title="选择图片" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
+      <el-form-item label="所属分类" prop="fileType">
+        <el-select v-model="queryParams.fileType" placeholder="请选择所属分类" clearable>
+          <el-option
+            v-for="dict in dict.type.file_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="图片名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入图片名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-tag v-if="null!=canChooseNum" >您还能选择{{canChooseNum}}张图片</el-tag>
+      <!--    选择图片的组件-->
+          <div class="photo-wall">
+            <div class="photo-box" v-for="(photo, index) in picsList"
+                 :key="index" :title="photo.name">
+              <el-image
+                :src="photo.url"
+                style="width: 160px; height: 160px"
+                alt="photo"
+                fit="fill"
+                class="photo-image"
+                lazy
+                :preview-src-list="picsList.map(p => p.url)"
+              >
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+              <div class="photo-name" >{{ photo.name }}</div>
+              <div class="photo-checkbox"><el-checkbox size="medium" @change="changeCheckbox($event,index)" v-model="photo.checked"></el-checkbox></div>
+            </div>
+            <div style="clear: both"></div>
+          </div>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSelect">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listPics} from "@/api/base/pics";
+
+export default {
+  dicts: ['file_type'],
+  props: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 总条数
+      total: 0,
+      //最大可选择数量
+      num:0,
+      canChooseNum:null,
+      // 图片数组
+      picsList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        fileType: null,
+        name: null
+      }
+    };
+  },
+  created() {
+  },
+  methods: {
+    // 显示弹框
+    show(num) {
+      this.num=num
+      this.canChooseNum = num
+      this.getList();
+      this.visible = true;
+    },
+    // 查询表数据
+    getList() {
+      listPics(this.queryParams).then(response => {
+          response.data.records.map((item)=>{
+            item.checked=false
+          })
+          this.picsList = response.data.records;
+          this.total = response.data.total;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 选择授权用户操作 */
+    handleSelect() {
+      const picUrls = this.picsList.filter((item)=>item.checked).map((item)=>{return item.url}).join(",");
+      if (!picUrls || picUrls=='') {
+        this.$modal.msgError("请选择图片");
+        return;
+      }
+      this.visible = false;
+      this.$emit("ok",picUrls)
+    },
+    /**
+     * 选中值改变事件
+     * @param e
+     */
+    changeCheckbox(e,index){
+      if(this.picsList.filter((item)=>item.checked).length>this.num){
+        this.$modal.msgError("超出最大可选图片数量！");
+        this.picsList[index].checked=false
+      }else{
+        this.canChooseNum = this.num - this.picsList.filter((item)=>item.checked).length
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.photo-wall {
+  margin: auto;
+}
+.photo-box{
+  float: left;
+  margin: 20px 10px;
+  position: relative;
+}
+.photo-name{
+  padding: 4px 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  height: 32px;
+  line-height: 28px;
+  background-color: rgba(194, 194, 194, 0.5); /* 灰色，半透明 */
+}
+.photo-checkbox{
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+</style>
diff --git a/dl_vue/src/views/busi/prod/index.vue b/dl_vue/src/views/busi/prod/index.vue
index cb4bc0e..fba0b5b 100644
--- a/dl_vue/src/views/busi/prod/index.vue
+++ b/dl_vue/src/views/busi/prod/index.vue
@@ -232,7 +232,7 @@
       </div>
     </el-dialog>
 
-    <select-all-user @chooseUserFun ref="select"  @ok="chooseUserFun" />
+    <select-all-user ref="select"  @ok="chooseUserFun" />
   </div>
 </template>
 
diff --git a/dl_vue/src/views/busi/prod/prodForm.vue b/dl_vue/src/views/busi/prod/prodForm.vue
index 11ea074..fba96d9 100644
--- a/dl_vue/src/views/busi/prod/prodForm.vue
+++ b/dl_vue/src/views/busi/prod/prodForm.vue
@@ -32,14 +32,14 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="产品主图" prop="mainPic">
-            <el-tag style="cursor: pointer">图片库选择</el-tag>
-            <image-upload @uploadedImg="uploadedImg" v-model="form.mainPic" :limit="1"/>
+            <el-tag v-if="!form.mainPic" style="cursor: pointer" @click="choosePic('mainPic',1)">图片库选择</el-tag>
+            <image-upload @uploadedImg="uploadedImg"  v-model="form.mainPic" :limit="1"/>
           </el-form-item>
         </el-col>
         <el-col :span="16">
           <el-form-item label="产品图库" prop="pics">
-            <el-tag style="cursor: pointer">图片库选择</el-tag>
-            <image-upload @uploadedImg="uploadedImg" v-model="form.pics" :limit="9"/>
+            <el-tag v-if="canPicsNum>0" style="cursor: pointer" @click="choosePic('pics',canPicsNum)">图片库选择</el-tag>
+            <image-upload @uploadedImg="uploadedImg" @input="listenerPicNum" v-model="form.pics" :limit="picsNum"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -92,23 +92,34 @@
         <el-button type="primary" @click="submitForm">发 布</el-button>
       </el-col>
     </el-row>
+
+    <select-pic ref="selectPic" @ok="chooseFun" />
   </div>
 </template>
 
 <script>
 import { listCategory } from "@/api/busi/category";
 import { listProdNew, getProdNew, delProdNew,getMaxSort, addProdNew, updateProdNew } from '@/api/busi/prod'
+import selectPic from "@/views/base/pics/selectPic";
+
+
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   name: 'prodForm',
-  components: {  Treeselect},
+  components: {  Treeselect,selectPic},
   data() {
     return {
       //光标位置--简介
       cursorPos: null,
       //栏目分类
       catgOptions:[],
+      //当前选择图片的字段
+      nowChooseStr:null,
+      //图片库数量
+      picsNum:9,
+      //还可以上传图片库的数量
+      canPicsNum:9,
       // 表单参数
       form: {
         id: null,
@@ -200,6 +211,9 @@ export default {
     getProdInfo(id,similar){
       getProdNew(id).then(response => {
         this.form= response.data
+        if(this.form.pics && this.form.pics.length>0){
+          this.canPicsNum = this.picsNum-this.form.pics.split(",").length
+        }
         if(similar){
           this.form.id=null
           this.initData()
@@ -260,6 +274,38 @@ export default {
         }
       })
     },
+    /**
+     * 图片库上传
+     */
+    choosePic(str,num){
+      this.nowChooseStr = str
+      this.$refs.selectPic.show(num)
+    },
+    /**
+     * 图片库选择图片回调
+     * @param picUrls
+     */
+    chooseFun(picUrls){
+      if(this.form[this.nowChooseStr]){
+        if(this.form[this.nowChooseStr].length>0){
+          this.form[this.nowChooseStr]+=","+picUrls
+        }else{
+          this.form[this.nowChooseStr] = picUrls
+        }
+      }else {
+        this.form[this.nowChooseStr] = picUrls
+      }
+      if(this.nowChooseStr=="pics"){
+        //图片库，计算剩余可上传的图片数量
+        this.listenerPicNum()
+      }
+    },
+    /**
+     * 监听图片库数量
+     */
+    listenerPicNum(){
+      this.canPicsNum = this.picsNum-this.form.pics.split(",").length
+    }
   }
 }
 </script>