1
This commit is contained in:
Vinjor
parent
02ca68142a
commit
67683fdba9
@ -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>
|
||||
|
||||
176
dl_vue/src/views/base/pics/selectPic.vue
Normal file
176
dl_vue/src/views/base/pics/selectPic.vue
Normal file
@ -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>
|
||||
@ -232,7 +232,7 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<select-all-user @chooseUserFun ref="select" @ok="chooseUserFun" />
|
||||
<select-all-user ref="select" @ok="chooseUserFun" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user