Skip to content

R
rs-cloud-platform-ui
Commit 6d92871a authored by rencs's avatar rencs
Browse files
Options

1.4 影像图库商品介绍

parent 3271010c
Show whitespace changes
Inline Side-by-side
Showing with 234 additions and 128 deletions
src/views/webSiteManagement/imageLibrary/edit.vue
View file @ 6d92871a
<template>
<div class="block">
<div class="head">
<div class="go-back" @click="goBack"><i class="el-icon-back"></i>返回上一页</div>
<div class="go-back" @click="goBack">
<i class="el-icon-back"></i>返回上一页
</div>
</div>
<div class="body">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-alert title="基础信息" type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-alert
title="基础信息"
type="info"
:closable="false"
style="margin-bottom: 10px"
></el-alert>
<el-form-item label="产品名称" prop="name">
<el-input class="half-width" v-model="ruleForm.name" placeholder="请输入产品名称"></el-input>
<el-input
class="half-width"
v-model="ruleForm.name"
placeholder="请输入产品名称"
></el-input>
</el-form-item>
<el-form-item label="产品缩略图" prop="coverImg">
<!-- 上传 -->
<my-upload :value="ruleForm.coverImg" @input="(val, info) => getSrc('coverImg', val)"></my-upload>
<my-upload
:value="ruleForm.coverImg"
@input="(val, info) => getSrc('coverImg', val)"
></my-upload>
</el-form-item>
<el-form-item label="上传源文件" :prop="'imageInfoRelationList.url' && 'imageInfoRelationList.price'">
<el-form-item
label="上传源文件"
:prop="'imageInfoRelationList.url' && 'imageInfoRelationList.price'"
>
<!-- 上传 -->
<my-upload refName="upload2" :value="ruleForm.imageInfoRelationList.url" @input="(val, info) => getSrc('imageInfoRelationList', val, info)"></my-upload>
<my-upload
refName="upload2"
:value="ruleForm.imageInfoRelationList.url"
@input="(val, info) => getSrc('imageInfoRelationList', val, info)"
></my-upload>
<div v-if="ruleForm.imageInfoRelationList.fileWidth">尺寸大小：{{ruleForm.imageInfoRelationList.fileWidth}}</div>
<el-input class="half-width" size="small" v-model="ruleForm.imageInfoRelationList.price" placeholder="请输入价格"></el-input>
<div v-if="ruleForm.imageInfoRelationList.fileWidth">
尺寸大小：{{ ruleForm.imageInfoRelationList.fileWidth }}
</div>
<el-input
class="half-width"
size="small"
v-model="ruleForm.imageInfoRelationList.price"
placeholder="请输入价格"
></el-input>
</el-form-item>
<el-alert title="产品参数" type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
<el-alert
title="产品参数"
type="info"
:closable="false"
style="margin-bottom: 10px"
></el-alert>
<el-form-item label="影像分类" prop="type">
<el-select v-model="ruleForm.type" placeholder="请选择">
......@@ -32,24 +70,45 @@
v-for="(item, index) in imageTypes"
:key="~~index"
:label="item"
:value="~~index">
:value="~~index"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="产品类型" prop="paramJson.productType">
<el-input class="half-width" v-model="ruleForm.paramJson.productType" placeholder="请输入产品类型"></el-input>
<el-input
class="half-width"
v-model="ruleForm.paramJson.productType"
placeholder="请输入产品类型"
></el-input>
</el-form-item>
<el-form-item label="文件格式" prop="paramJson.productType">
<el-input class="half-width" v-model="ruleForm.paramJson.fileType" placeholder="请输入文件格式"></el-input>
<el-input
class="half-width"
v-model="ruleForm.paramJson.fileType"
placeholder="请输入文件格式"
></el-input>
</el-form-item>
<el-form-item label="卫星" prop="paramJson.satellite">
<el-input class="half-width" v-model="ruleForm.paramJson.satellite" placeholder="请输入卫星型号"></el-input>
<el-input
class="half-width"
v-model="ruleForm.paramJson.satellite"
placeholder="请输入卫星型号"
></el-input>
</el-form-item>
<el-form-item label="分辨率" prop="paramJson.resolution">
<el-input class="half-width" v-model="ruleForm.paramJson.resolution" placeholder="请输入产品分辨率"></el-input>
<el-input
class="half-width"
v-model="ruleForm.paramJson.resolution"
placeholder="请输入产品分辨率"
></el-input>
</el-form-item>
<el-form-item label="拍摄地点" prop="paramJson.address">
<el-input class="half-width" v-model="ruleForm.paramJson.address" placeholder="请输入拍摄地点"></el-input>
<el-input
class="half-width"
v-model="ruleForm.paramJson.address"
placeholder="请输入拍摄地点"
></el-input>
</el-form-item>
<el-form-item label="拍摄时间" prop="paramJson.shotTime">
<el-date-picker
......@@ -57,7 +116,8 @@
v-model="ruleForm.paramJson.shotTime"
type="datetime"
placeholder="选择日期时间"
:picker-options="datePickerOptions">
:picker-options="datePickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item label="可否商用" prop="paramJson.commercial">
......@@ -73,8 +133,22 @@
</el-radio-group>
</el-form-item>
<el-form-item label="相似图片" prop="relatedIds">
<el-button type="primary" icon="el-icon-plus" @click="showImagesDialog">相似图片</el-button>
<el-tag type="success">已选 {{images.selects.length}}个</el-tag>
<el-button
type="primary"
icon="el-icon-plus"
@click="showImagesDialog"
>相似图片</el-button
>
<el-tag type="success">已选 {{ images.selects.length }}个</el-tag>
</el-form-item>
<el-form-item label="产品介绍">
<kind-editor
id="editor_id"
:content.sync="ruleForm.intro"
:afterChange="afterChange()"
:loadStyleMode="false"
@on-content-change="onContentChange"
></kind-editor>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">确定</el-button>
......@@ -83,23 +157,40 @@
</el-form>
</div>
<!-- 相似图片弹窗 -->
<el-dialog title="相似图片" :visible.sync="images.visible" width="80%" :close-on-click-modal="false">
<el-dialog
title="相似图片"
:visible.sync="images.visible"
width="80%"
:close-on-click-modal="false"
>
<el-row :gutter="20">
<el-col :span="6" v-for="item in images.datas" :key="item.id">
<div :class="`grid-content${selectsArr.includes('' + item.id) ? ' active' : ''}`" @click="select(item)">
<div
:class="`grid-content${
selectsArr.includes('' + item.id) ? ' active' : ''
}`"
@click="select(item)"
>
<el-image :src="item.url" lazy></el-image>
</div>
</el-col>
</el-row>
<div style="margin-top: 10px; display: flex; align-item: center; justify-content: center;">
<div
style="
margin-top: 10px;
display: flex;
align-item: center;
justify-content: center;
"
>
<el-pagination
small
layout="prev, pager, next"
:page-size="images.pageInfo.limit"
:total="images.total"
@current-change="currentChange">
@current-change="currentChange"
>
</el-pagination>
</div>
<div slot="footer" class="dialog-footer">
......@@ -111,96 +202,94 @@
</template>
<script>
import MyUpload from "@/components/Upload/singleImageX"//上传组件
import { update, getAll, getDetail } from "@/api/website/imageLibrary"
import MyUpload from "@/components/Upload/singleImageX"; //上传组件
import { update, getAll, getDetail } from "@/api/website/imageLibrary";
import KindEditor from "@/components/Kindeditor";
export default {
components: {
MyUpload
MyUpload,
KindEditor,
},
data() {
let checkNumber = function (rule, value, callback) {
if (value === '') {
callback(new Error('请输入价格'));
if (value === "") {
callback(new Error("请输入价格"));
} else {
if (isNaN(value)) {
callback(new Error('请输入数字'));
callback(new Error("请输入数字"));
} else {
callback();
}
}
}
};
return {
//1--影像美图 2--专题图 3--遥感成果图
imageTypes: {
1: '影像美图',
2: '专题图',
3: '遥感成果图',
1: "影像美图",
2: "专题图",
3: "遥感成果图",
},
ruleForm: {
name: '',
coverImg: '',
name: "",
coverImg: "",
imageInfoRelationList: {
url: '',
url: "",
price: null,
fileWidth: '',
fileSize: '',
fileWidth: "",
fileSize: "",
},
type: '',
intro: "",
type: "",
relatedIds: "",
paramJson: {
productType: '',
fileType: '',
satellite: '',
resolution: '',
address: '',
shotTime: '',
commercial: '',
watermark: '',
}
productType: "",
fileType: "",
satellite: "",
resolution: "",
address: "",
shotTime: "",
commercial: "",
watermark: "",
},
},
rules: {
name: [
{required: true, message: '请输入产品名称', trigger: 'blur'}
],
name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
coverImg: [
{required: true, message: '请上传缩略图', trigger: 'change'}
{ required: true, message: "请上传缩略图", trigger: "change" },
],
'imageInfoRelationList.url': [
{required: true, message: '请上传源文件', trigger: 'change'}
"imageInfoRelationList.url": [
{ required: true, message: "请上传源文件", trigger: "change" },
],
'imageInfoRelationList.price': [
{required: true, message: '请输入价格', trigger: 'blur'},
{validator: checkNumber, trigger: 'blur'}//校验是否是数字
"imageInfoRelationList.price": [
{ required: true, message: "请输入价格", trigger: "blur" },
{ validator: checkNumber, trigger: "blur" }, //校验是否是数字
],
type: [
{required: true, message: '请选择影像类型', trigger: 'change'}
{ required: true, message: "请选择影像类型", trigger: "change" },
],
'paramJson.productType': [
{required: true, message: '请输入产品类型', trigger: 'blur'}
"paramJson.productType": [
{ required: true, message: "请输入产品类型", trigger: "blur" },
],
'paramJson.fileType': [
{required: true, message: '请输入文件格式'}
"paramJson.fileType": [{ required: true, message: "请输入文件格式" }],
"paramJson.satellite": [
{ required: true, message: "请输入卫星型号", trigger: "blur" },
],
'paramJson.satellite': [
{required: true, message: '请输入卫星型号', trigger: 'blur'}
"paramJson.resolution": [
{ required: true, message: "请输入分辨率", trigger: "blur" },
],
'paramJson.resolution': [
{required: true, message: '请输入分辨率', trigger: 'blur'}
"paramJson.address": [
{ required: true, message: "请输入拍摄地点", trigger: "blur" },
],
'paramJson.address': [
{required: true, message: '请输入拍摄地点', trigger: 'blur'}
"paramJson.shotTime": [
{ required: true, message: "请选择拍摄时间", trigger: "change" },
],
'paramJson.shotTime': [
{required: true, message: '请选择拍摄时间', trigger: 'change'}
"paramJson.commercial": [
{ required: true, message: "请选择", trigger: "change" },
],
'paramJson.commercial': [
{required: true, message: '请选择', trigger: 'change'}
"paramJson.watermark": [
{ required: true, message: "请选择", trigger: "change" },
],
'paramJson.watermark': [
{required: true, message: '请选择', trigger: 'change'}
]
},
images: {
pageInfo: {
......@@ -210,29 +299,40 @@ export default {
total: 100,
datas: [],
visible: false,
selects: []
selects: [],
},
selectsArr: [],
datePickerOptions: {
disabledDate: (time) => {
return time.getTime() > new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1)
}
}
}
return (
time.getTime() >
new Date(
new Date(new Date().toLocaleDateString()).getTime() +
24 * 60 * 60 * 1000 -
1
)
);
},
},
};
},
mounted() {
//获取所有相似图像
this.getAllImages()
this.$bus.$on('imageLibrary-edit-renderData', this.renderData)
this.getAllImages();
this.$bus.$on("imageLibrary-edit-renderData", this.renderData);
},
beforeDestroy() {
this.$bus.$off('imageLibrary-edit-renderData')
this.$bus.$off("imageLibrary-edit-renderData");
},
methods: {
afterChange() {},
onContentChange(val) {
this.ruleForm.intro = val;
},
//打开相似图片dialog弹窗
showImagesDialog() {
// console.log(this.images.selects)
this.selectsArr = JSON.parse(JSON.stringify(this.images.selects))
this.selectsArr = JSON.parse(JSON.stringify(this.images.selects));
this.images.visible = true;
},
//相似图片弹窗图片列表切换页面方法
......@@ -249,38 +349,37 @@ export default {
//选择相似图片
select(item) {
let selects = this.selectsArr;
let index = selects.indexOf(item.id + '')
let index = selects.indexOf(item.id + "");
if (index > -1) {
selects.splice(index, 1)
selects.splice(index, 1);
} else {
selects.push(item.id + '')
selects.push(item.id + "");
}
this.selectsArr = selects
this.selectsArr = selects;
},
//获取所有相似图像
getAllImages() {
getAll(this.images.pageInfo).then(res => {
this.images.datas = res.data.data
this.images.total = res.data.totalCount
})
getAll(this.images.pageInfo).then((res) => {
this.images.datas = res.data.data;
this.images.total = res.data.totalCount;
});
},
//上传图片，获取图片地址
getSrc(key, val, info) {
let rule = ['imageInfoRelationList'];
let rule = ["imageInfoRelationList"];
if (rule.includes(key) && info) {
this.ruleForm[key] = {
url: val,
price: this.ruleForm[key].price,
fileWidth: info.width + '*' + info.height,
fileSize: info.size
}
fileWidth: info.width + "*" + info.height,
fileSize: info.size,
};
this.$set(this.ruleForm.paramJson, 'fileType', info.type)
this.$set(this.ruleForm.paramJson, "fileType", info.type);
} else {
this.ruleForm[key] = val;
}
},
//点击编辑的时候，获取表格行数据，渲染edit页面
renderData(params) {
......@@ -292,27 +391,35 @@ export default {
// data.paramJson = JSON.parse(data.paramJson);
//注意：imageInfoRelationListParse为imageInfoRelationList参数的最后一项，赋值显示
data.imageInfoRelationList = data.imageInfoRelationListParse[0];
data.coverImg = data.coverImg || '';
data.coverImg = data.coverImg || "";
this.ruleForm = data;
this.images.selects = this.ruleForm.relatedIds.split(',')//相似图片转为数组格式
this.images.selects = this.ruleForm.relatedIds.split(","); //相似图片转为数组格式
},
//返回上一页
goBack() {
this.$emit('change', 'List')
this.$emit("change", "List");
},
//过滤多余属性
filterParams(obj) {
let p = {}
let b = ['isDel', 'status', 'updTime', 'crtTime', 'allowCustom', 'rank', 'relationId', 'similarImageList']
let p = {};
let b = [
"isDel",
"status",
"updTime",
"crtTime",
"allowCustom",
"rank",
"relationId",
"similarImageList",
];
for (let key in obj) {
if (!b.includes(key)) {
if (key === 'imageInfoRelationList') {
let temp = this.filterParams(obj[key][0])
if (key === "imageInfoRelationList") {
let temp = this.filterParams(obj[key][0]);
obj[key] = [temp];
}
p[key] = obj[key]
p[key] = obj[key];
}
}
return p;
......@@ -321,14 +428,13 @@ export default {
onSubmit() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log('submit')
this.updateFunc();//上传数据
console.log("submit");
this.updateFunc(); //上传数据
} else {
console.log('error submit!!');
console.log("error submit!!");
return false;
}
});
},
//添加/修改方法
updateFunc() {
......@@ -336,21 +442,20 @@ export default {
let params = JSON.parse(JSON.stringify(this.ruleForm));
params.paramJson = JSON.stringify(params.paramJson);
params.imageInfoRelationList = [params.imageInfoRelationList]
params.imageInfoRelationList = [params.imageInfoRelationList];
// console.log(params)
//执行方法
update(params).then(res => {
update(params).then((res) => {
if (res.status == 200) {
//返回上一页，更新列表
this.goBack();
} else {
this.$message.error(res.message);
}
})
}
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
......@@ -373,16 +478,17 @@ export default {
}
}
.body {
padding: 20px 50px 40px
padding: 20px 50px 40px;
}
.grid-content {
border: 1px solid transparent;
}
.grid-content:hover, .grid-content.active {
.grid-content:hover,
.grid-content.active {
border: 1px solid #409eff;
box-sizing: border-box
box-sizing: border-box;
}
.half-width {
width: 50%
width: 50%;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment