Skip to content

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

Merge branch 'dev_ren' into 'dev' 

产品介绍，

See merge request !16
parents 66ead8b5 171c920f
Show whitespace changes
Inline Side-by-side
Showing with 395 additions and 323 deletions
src/views/webSiteManagement/industryApplication/applicationList/addUpApp/index.vue
View file @ 09f7ddfc
......@@ -7,7 +7,7 @@
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\addApp\index.vue
-->
<template>
<div id='addApp'>
<div id="addApp">
<div class="top">
<div class="title" @click="backup">
<i class="el-icon-back"></i>
......@@ -20,7 +20,11 @@
<div class="item">
<div class="title">基本信息</div>
<div class="form">
<el-form-item label="应用类别" prop="type" v-show="firstTypes.length>0">
<el-form-item
label="应用类别"
prop="type"
v-show="firstTypes.length > 0"
>
<el-select v-model="currentFirstType" placeholder="全部">
<el-option
v-for="item in firstTypes"
......@@ -42,14 +46,23 @@
</el-form-item>
<el-form-item label="应用名称" prop="title">
<el-col :span="12">
<el-input v-model="form.title" placeholder="请输入应用名称"></el-input>
<el-input
v-model="form.title"
placeholder="请输入应用名称"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="封面图" prop="coverImg">
<singleImageX :value="form.coverImg" @input="onCoverPreview"></singleImageX>
<singleImageX
:value="form.coverImg"
@input="onCoverPreview"
></singleImageX>
</el-form-item>
<el-form-item label="详情图" prop="detailImg">
<singleImageX :value="form.detailImg" @input="onDetailPreview"></singleImageX>
<singleImageX
:value="form.detailImg"
@input="onDetailPreview"
></singleImageX>
</el-form-item>
</div>
</div>
......@@ -58,32 +71,50 @@
<div class="form">
<el-form-item label="行业" prop="industry">
<el-col :span="12">
<el-input v-model="form.industry" placeholder="请输入行业"></el-input>
<el-input
v-model="form.industry"
placeholder="请输入行业"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="地区" prop="region">
<el-col :span="12">
<el-input v-model="form.region" placeholder="请输入地区"></el-input>
<el-input
v-model="form.region"
placeholder="请输入地区"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="数据采集时间" prop="collectTime">
<el-col :span="12">
<el-input v-model="form.collectTime" placeholder="请输入数据采集时间"></el-input>
<el-input
v-model="form.collectTime"
placeholder="请输入数据采集时间"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="数据来源" prop="origin">
<el-col :span="12">
<el-input v-model="form.origin" placeholder="请输入数据来源"></el-input>
<el-input
v-model="form.origin"
placeholder="请输入数据来源"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="成果形式" prop="achievement">
<el-col :span="12">
<el-input v-model="form.achievement" placeholder="请输入成果形式"></el-input>
<el-input
v-model="form.achievement"
placeholder="请输入成果形式"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="分辨率" prop="resolvpower">
<el-col :span="12">
<el-input v-model="form.resolvpower" placeholder="请输入分辨率"></el-input>
<el-input
v-model="form.resolvpower"
placeholder="请输入分辨率"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="是否提供样例" prop="isSample">
......@@ -99,7 +130,8 @@
</el-radio-group>
</el-form-item>
<el-form-item label="上传样例" prop="fileList">
<el-upload class="upload-demo"
<el-upload
class="upload-demo"
action="#"
:on-preview="handlePreview"
:on-remove="handleRemove"
......@@ -107,7 +139,8 @@
multiple
:on-exceed="handleExceed"
:http-request="onUploadRequest"
:file-list="form.fileList">
:file-list="form.fileList"
>
<el-button size="small" type="primary">上传文件</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
</el-upload>
......@@ -118,18 +151,28 @@
<div class="title">应用简介</div>
<div class="form">
<el-form-item label="产品简介" prop="introduction">
<kind-editor id="editor_id" :content.sync="form.introduction" :afterChange="afterChange()" :loadStyleMode="false" @on-content-change="onContentChange"></kind-editor>
<kind-editor
id="editor_id"
:content.sync="form.introduction"
:afterChange="afterChange()"
:loadStyleMode="false"
@on-content-change="onContentChange"
></kind-editor>
</el-form-item>
</div>
</div>
<el-form-item>
<el-button @click="$parent.componentName='appList'">取消</el-button>
<el-button @click="$parent.componentName = 'appList'">取消</el-button>
<el-button type="primary" @click="onSubmit">确定</el-button>
</el-form-item>
</el-form>
</div>
<!-- 使用图片查看器预览当前缩略图 -->
<el-image-viewer v-if="currentIcon.showPreview" :on-close="closePreview" :url-list="[currentIcon.url]"/>
<el-image-viewer
v-if="currentIcon.showPreview"
:on-close="closePreview"
:url-list="[currentIcon.url]"
/>
</div>
</template>
......@@ -137,90 +180,109 @@
// 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { uploadFile } from "@/api/website/newsCategory/index";
import singleImageX from '@/components/Upload/singleImageX';
import singleImageX from "@/components/Upload/singleImageX";
import KindEditor from "@/components/Kindeditor";
import {
getAllApplicationType,
addUpdateApplicationInfo,
} from "api/website/industryApplication/index";
export default {
name: 'addApp',
name: "addApp",
components: {
singleImageX,
KindEditor,
ElImageViewer
ElImageViewer,
},
data(){
data() {
return {
rules:{
type: [{ required: true, message: '请选择应用类别', trigger: 'blur' }],
title: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
coverImg: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
detailImg: [{ required: true, message: '请上传详情图', trigger: 'blur' }],
industry: [{ required: true, message: '请输入行业', trigger: 'blur' }],
region: [{ required: true, message: '请输入地区', trigger: 'blur' }],
collectTime: [{ required: true, message: '请输入数据采集时间', trigger: 'blur' }],
origin: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
achievement: [{ required: true, message: '请输入成果形式', trigger: 'blur' }],
resolvpower: [{ required: true, message: '请输入分辨率', trigger: 'blur' }],
isSample: [{ required: true, message: '是否提供样例', trigger: 'blur' }],
isCustomized: [{ required: true, message: '是否提供定制', trigger: 'blur' }],
fileList: [{ required: true, message: '请上传样例', trigger: 'blur' }],
introduction: [{ required: true, message: '请输入产品简介', trigger: 'blur' }],
rules: {
type: [{ required: true, message: "请选择应用类别", trigger: "blur" }],
title: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
coverImg: [
{ required: true, message: "请上传封面图", trigger: "blur" },
],
detailImg: [
{ required: true, message: "请上传详情图", trigger: "blur" },
],
industry: [{ required: true, message: "请输入行业", trigger: "blur" }],
region: [{ required: true, message: "请输入地区", trigger: "blur" }],
collectTime: [
{ required: true, message: "请输入数据采集时间", trigger: "blur" },
],
origin: [
{ required: true, message: "请输入数据来源", trigger: "blur" },
],
achievement: [
{ required: true, message: "请输入成果形式", trigger: "blur" },
],
resolvpower: [
{ required: true, message: "请输入分辨率", trigger: "blur" },
],
isSample: [
{ required: true, message: "是否提供样例", trigger: "blur" },
],
isCustomized: [
{ required: true, message: "是否提供定制", trigger: "blur" },
],
fileList: [{ required: true, message: "请上传样例", trigger: "blur" }],
introduction: [
{ required: true, message: "请输入产品简介", trigger: "blur" },
],
},
form: {
title: '',// 应用名称
coverImg: '',// 封面图
detailImg: '',// 详情图
industry: '',// 行业
region: '',// 地区
collectTime: '',// 采集时间
origin: '',// 数据来源
achievement: '',// 成果形式
resolvpower: '',// 分辨率
isSample: '是',// 是否提供样例
isCustomized: '是',// 是否定制
fileList: [],// 样例图片路径集合
introduction: '', // 简介
title: "", // 应用名称
coverImg: "", // 封面图
detailImg: "", // 详情图
industry: "", // 行业
region: "", // 地区
collectTime: "", // 采集时间
origin: "", // 数据来源
achievement: "", // 成果形式
resolvpower: "", // 分辨率
isSample: "是", // 是否提供样例
isCustomized: "是", // 是否定制
fileList: [], // 样例图片路径集合
introduction: "", // 简介
},
currentIcon: {
showPreview: false,
url: []
url: [],
},
firstTypes: [],
currentFirstType: '',
currentFirstType: "",
secondTypes: [],
currentSecondType: '',
}
currentSecondType: "",
};
},
watch:{
"form.fileList":{
watch: {
"form.fileList": {
deep: true,
handler: function(newVal){
console.log("newVal=>",newVal)
}
}
handler: function (newVal) {
console.log("newVal=>", newVal);
},
},
},
mounted() {
this.pullAllApplicationType()
if(!!this.$parent.info){
let info = this.$parent.info
let attribute = eval("(" + info.attribute + ")")
console.log("info=>",info)
console.log("获取到的编辑数据=>",attribute)
this.form.title = info.title
this.form.coverImg = info.coverImg
this.form.detailImg = info.icon.url
this.form.industry = attribute.industry
this.form.region = attribute.area
this.form.collectTime = attribute.date
this.form.origin = attribute.source
this.form.achievement = attribute.achievements
this.form.resolvpower = attribute.ratio
this.form.isSample = info.examples==0?"否":"是"
this.form.fileList = info.examples!=0?eval("("+info.examplesJson+")"):[]
this.form.introduction = info.introduction
this.form.isCustomized = info.customized==1?"是":"否"
this.pullAllApplicationType();
if (!!this.$parent.info) {
let info = this.$parent.info;
let attribute = eval("(" + info.attribute + ")");
console.log("info=>", info);
console.log("获取到的编辑数据=>", attribute);
this.form.title = info.title;
this.form.coverImg = info.coverImg;
this.form.detailImg = info.icon.url;
this.form.industry = attribute.industry;
this.form.region = attribute.area;
this.form.collectTime = attribute.date;
this.form.origin = attribute.source;
this.form.achievement = attribute.achievements;
this.form.resolvpower = attribute.ratio;
this.form.isSample = info.examples == 0 ? "否" : "是";
this.form.fileList =
info.examples != 0 ? eval("(" + info.examplesJson + ")") : [];
this.form.introduction = info.introduction;
this.form.isCustomized = info.customized == 1 ? "是" : "否";
// this.form = {
// title: info.title,// 应用名称
// coverImg: info.coverImg,// 封面图
......@@ -237,143 +299,145 @@ export default {
// introduction: info.introduction, // 简介
// }
}
this.$bus.$emit('hideThreeRoute',false)
this.$bus.$emit("hideThreeRoute", false);
},
beforeDestroy(){
this.$bus.$emit('hideThreeRoute',true)
beforeDestroy() {
this.$bus.$emit("hideThreeRoute", true);
},
methods: {
// 获取所有应用类型
pullAllApplicationType(){
this.firstTypes = []
getAllApplicationType().then(res => {
if(res.status == 200){
res.data.forEach(element => {
if(element.isDel==0){
if(element.pid==0){
pullAllApplicationType() {
this.firstTypes = [];
getAllApplicationType().then((res) => {
if (res.status == 200) {
res.data.forEach((element) => {
if (element.isDel == 0) {
if (element.pid == 0) {
this.firstTypes.push({
value: element.id,
label: element.title
label: element.title,
});
}else{
} else {
this.secondTypes.push({
value: element.id,
label: element.title
})
label: element.title,
});
}
}
});
if(this.firstTypes.length>0){
this.currentFirstType = this.firstTypes[0].value
if (this.firstTypes.length > 0) {
this.currentFirstType = this.firstTypes[0].value;
}
if(this.secondTypes.length>0){
this.currentSecondType = this.secondTypes[0].value
if (this.secondTypes.length > 0) {
this.currentSecondType = this.secondTypes[0].value;
}
}
})
});
},
// 关闭图片查看器
closePreview() {
this.currentIcon.showPreview = false;
},
onContentChange (val) {
console.log(val)
},
afterChange () {
onContentChange(val) {
console.log(val);
},
backup(){
this.$parent.componentName='appList'
this.$bus.$emit('hideThreeRoute',true)
afterChange() {},
backup() {
this.$parent.componentName = "appList";
this.$bus.$emit("hideThreeRoute", true);
},
// 上传样例Begin
onUploadRequest(data) {
/**
* [{"filename":"文件名","size":"文件大小","url":"文件路径"}]
*/
console.log("uploadData=>",data)
let filename = data.file.name
let size = data.file.size
console.log("uploadData=>", data);
let filename = data.file.name;
let size = data.file.size;
let fileObj = data.file;
//获取图片详情信息
let imgInfo = {};
let temp = URL.createObjectURL(fileObj)
let temp = URL.createObjectURL(fileObj);
let img = new Image();
img.src = temp;
img.onload = function () {
imgInfo.width = img.width;
imgInfo.height = img.height;
}
};
imgInfo.size = fileObj.size;
imgInfo.type = fileObj.type;
// FormData 对象
let form = new FormData();
// 文件对象
form.append("file", fileObj);
uploadFile(form).then(res => {
uploadFile(form).then((res) => {
this.uploading = false;
if (res.status == 200) {
console.log("上传文件成功,获取到的文件路径为=>",res.data)
console.log("上传文件成功,获取到的文件路径为=>", res.data);
this.form.fileList.push({
name: filename,
size: size,
url: res.data
})
url: res.data,
});
} else {
this.$message.error(res.message)
this.$message.error(res.message);
}
})
});
},
handlePreview(file,fileList) {
let obj = this.form.fileList.find(element => element.name == file.name)
let url = obj ? obj.url : ""
console.log("url=>",url)
this.currentIcon.showPreview = true
this.currentIcon.url = url
handlePreview(file, fileList) {
let obj = this.form.fileList.find((element) => element.name == file.name);
let url = obj ? obj.url : "";
console.log("url=>", url);
this.currentIcon.showPreview = true;
this.currentIcon.url = url;
},
handleRemove(file,fileList) {
let index = this.form.fileList.findIndex(ele => ele.name == file.name)
index != -1 && (this.form.fileList.splice(index,1))
handleRemove(file, fileList) {
let index = this.form.fileList.findIndex((ele) => ele.name == file.name);
index != -1 && this.form.fileList.splice(index, 1);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
return this.$confirm(`确定移除 ${file.name}？`);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
this.$message.warning(
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
files.length + fileList.length
} 个文件`
);
},
// 上传样例End
onCoverPreview(url){
this.form.coverImg = url
onCoverPreview(url) {
this.form.coverImg = url;
},
onDetailPreview(url){
this.form.detailImg = url
onDetailPreview(url) {
this.form.detailImg = url;
},
onSubmit() {
if(this.form.title==''){
this.$message.error('请输入应用名称!!!');
}else if(this.form.coverImg==''){
this.$message.error('请上传封面图!!!');
}else if(this.detailImg==''){
this.$message.error('请上传详情图!!!');
}else if(this.form.introduction==''){
this.$message.error('请输入产品简介!!!');
}else if(this.form.industry==''){
this.$message.error('请输入行业!!!');
}else if(this.form.region==''){
this.$message.error('请输入地区!!!');
}else if(this.form.achievement==''){
this.$message.error('请输入成果形式!!!');
}else if(this.form.origin==''){
this.$message.error('请输入数据来源!!!');
}else if(this.form.collectTime==''){
this.$message.error('请输入数据采集时间!!!');
}else if(this.form.resolvpower==''){
this.$message.error('请输入分辨率!!!');
}else if(this.form.isSample=="是"&&this.form.fileList.length==0){
this.$message.error('请上传样例!!!');
}else{
let data,message
if(this.$parent.info){
if (this.form.title == "") {
this.$message.error("请输入应用名称!!!");
} else if (this.form.coverImg == "") {
this.$message.error("请上传封面图!!!");
} else if (this.detailImg == "") {
this.$message.error("请上传详情图!!!");
} else if (this.form.introduction == "") {
this.$message.error("请输入产品简介!!!");
} else if (this.form.industry == "") {
this.$message.error("请输入行业!!!");
} else if (this.form.region == "") {
this.$message.error("请输入地区!!!");
} else if (this.form.achievement == "") {
this.$message.error("请输入成果形式!!!");
} else if (this.form.origin == "") {
this.$message.error("请输入数据来源!!!");
} else if (this.form.collectTime == "") {
this.$message.error("请输入数据采集时间!!!");
} else if (this.form.resolvpower == "") {
this.$message.error("请输入分辨率!!!");
} else if (this.form.isSample == "是" && this.form.fileList.length == 0) {
this.$message.error("请上传样例!!!");
} else {
let data, message;
if (this.$parent.info) {
data = {
id: this.$parent.info.id,
title: this.form.title,
......@@ -386,9 +450,9 @@ export default {
achievements: this.form.achievement,
source: this.form.origin,
date: this.form.collectTime,
ratio: this.form.resolvpower
ratio: this.form.resolvpower,
}),
examples: this.form.isSample=="是" ? 1 : 0,
examples: this.form.isSample == "是" ? 1 : 0,
examplesJson: JSON.stringify(this.form.fileList),
protection: this.$parent.protection,
rank: this.$parent.info.rank,
......@@ -399,10 +463,16 @@ export default {
secondTitle: this.$parent.info.secondTitle,
indexShow: this.$parent.info.indexShow,
isDel: this.$parent.info.isDel,
customized: this.form.isCustomized=="是"?1:2,
customized: this.form.isCustomized == "是" ? 1 : 2,
};
message = "修改成功!!!";
} else {
let secondtitle = "";
if (this.secondTypes && this.currentSecondType) {
secondtitle = this.secondTypes.find(
(ele) => ele.value == this.currentSecondType
).label;
}
message = "修改成功!!!"
}else {
data = {
title: this.form.title,
coverImg: this.form.coverImg,
......@@ -414,9 +484,9 @@ export default {
achievements: this.form.achievement,
source: this.form.origin,
date: this.form.collectTime,
ratio: this.form.resolvpower
ratio: this.form.resolvpower,
}),
examples: this.form.isSample=="是" ? 1 : 0,
examples: this.form.isSample == "是" ? 1 : 0,
examplesJson: JSON.stringify(this.form.fileList),
protection: "",
indexShow: 1,
......@@ -424,41 +494,43 @@ export default {
status: 1,
rank: 0,
firstTypeId: this.currentFirstType,
firstTitle: this.firstTypes.find(ele => ele.value == this.currentFirstType).label,
firstTitle: this.firstTypes.find(
(ele) => ele.value == this.currentFirstType
).label,
secondTypeId: this.currentSecondType,
secondTitle: this.secondTypes.find(ele => ele.value == this.currentSecondType).label,
customized: this.form.isCustomized=="是" ? 1 : 2
}
message = "添加成功!!!"
secondTitle: secondtitle,
customized: this.form.isCustomized == "是" ? 1 : 2,
};
message = "添加成功!!!";
}
addUpdateApplicationInfo(data).then(res => {
if(res.status==200){
addUpdateApplicationInfo(data).then((res) => {
if (res.status == 200) {
this.$message({
message: message,
type: 'success'
type: "success",
});
this.$parent.componentName = "appList"
this.$parent.info = null
}else{
this.$message.error('操作失败,请稍后重试!!!');
this.$parent.componentName = "appList";
this.$parent.info = null;
} else {
this.$message.error("操作失败,请稍后重试!!!");
}
});
}
}
},
}
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
#addApp{
#addApp {
margin: 0 1% 0 1%;
width: 98%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
color: #5178F2;
.top{
color: #5178f2;
.top {
width: 100%;
height: 68px;
display: flex;
......@@ -466,8 +538,8 @@ export default {
justify-content: space-between;
align-items: center;
overflow: hidden;
border-bottom: 1px solid #EEEEEE;
.title{
border-bottom: 1px solid #eeeeee;
.title {
width: auto;
margin: 0 0 0 30px;
height: 46px;
......@@ -475,24 +547,24 @@ export default {
flex-direction: row;
justify-content: center;
align-items: center;
color: #5178F2;
color: #5178f2;
overflow: hidden;
cursor: pointer;
}
}
.content{
.content {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
.item{
.item {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
.title{
.title {
padding-left: 40px;
width: calc(100% - 40px);
height: 36px;
......@@ -500,10 +572,10 @@ export default {
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: #F2F2F2;
background-color: #f2f2f2;
color: #000000;
}
.form{
.form {
padding-top: 20px;
padding-left: 20px;
width: calc(100% - 40px);
......@@ -511,5 +583,5 @@ export default {
}
}
}
}
}
</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