|
|
|
@ -1,69 +1,57 @@ |
|
|
|
<template> |
|
|
|
<div class="d-flex flex-wrap pb-3"> |
|
|
|
<!-- 编辑 --> |
|
|
|
<a-modal :closable="false" footer title="修改轮播图" v-model="editVisible" width="700px"> |
|
|
|
<a-form :form="form" @submit="handleSubmit"> |
|
|
|
<a-modal :closable="false" footer title="修改轮播图" v-model="editVisible" width="700px" @cancel="$emit('closeModal')"> |
|
|
|
<a-form :form="form" @submit="handleSubmit" v-if="editItem"> |
|
|
|
<!-- 页面路径 --> |
|
|
|
<a-form-item |
|
|
|
:label-col="formItemLayout.labelCol" |
|
|
|
:wrapper-col="formItemLayout.wrapperCol" |
|
|
|
label="页面路径" |
|
|
|
> |
|
|
|
<!-- <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="页面路径"> |
|
|
|
<a-input |
|
|
|
placeholder="页面路径" |
|
|
|
v-decorator="[ |
|
|
|
'pagePath', |
|
|
|
{ |
|
|
|
rules: [ |
|
|
|
{ required: true, message: '页面路径不能为空' }, |
|
|
|
{ whitespace: true, message: '页面路径不能为空' }, |
|
|
|
{ max: 140, massage: '页面路径最多140个字符' }, |
|
|
|
], |
|
|
|
}, |
|
|
|
]" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
<!-- 排序 --> |
|
|
|
<a-form-item |
|
|
|
:label-col="formItemLayout.labelCol" |
|
|
|
:wrapper-col="formItemLayout.wrapperCol" |
|
|
|
label="排序" |
|
|
|
> |
|
|
|
<a-input |
|
|
|
placeholder="排序" |
|
|
|
v-decorator="[ |
|
|
|
'sort', |
|
|
|
{ |
|
|
|
rules: [ |
|
|
|
{ required: true, message: '排序不能为空' }, |
|
|
|
{ whitespace: true, message: '排序不能为空' }, |
|
|
|
{ max: 140, massage: '排序最多140个字符' }, |
|
|
|
], |
|
|
|
}, |
|
|
|
]" |
|
|
|
'pagePath', |
|
|
|
{ |
|
|
|
rules: [ |
|
|
|
{ required: true, message: '页面路径不能为空' }, |
|
|
|
{ whitespace: true, message: '页面路径不能为空' }, |
|
|
|
{ max: 140, massage: '页面路径最多140个字符' }, |
|
|
|
], |
|
|
|
}, |
|
|
|
]" |
|
|
|
/> |
|
|
|
</a-form-item> --> |
|
|
|
<!-- 跳转类型 --> |
|
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="跳转类型"> |
|
|
|
<a-select @change="getUse($event, 'jumpType')" class="ml-3" :default-value="enable1[editItem.jumpType]" style="width: 150px"> |
|
|
|
<a-select-option :key="item" :value="index" v-for="(item, index) in enable1">{{ item }}</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
<!-- 跳转路径 --> |
|
|
|
<a-form-item |
|
|
|
v-if="editItem.jumpType === 1" |
|
|
|
:label-col="formItemLayout.labelCol" |
|
|
|
:wrapper-col="formItemLayout.wrapperCol" |
|
|
|
label="跳转路径" |
|
|
|
label="图片跳转路径" |
|
|
|
> |
|
|
|
<a-input |
|
|
|
placeholder="跳转路径" |
|
|
|
v-decorator="[ |
|
|
|
'jumpPath', |
|
|
|
{ |
|
|
|
rules: [ |
|
|
|
{ required: true, message: '跳转路径不能为空' }, |
|
|
|
{ whitespace: true, message: '跳转路径不能为空' }, |
|
|
|
{ max: 140, massage: '跳转路径最多140个字符' }, |
|
|
|
], |
|
|
|
}, |
|
|
|
]" |
|
|
|
/> |
|
|
|
<a-input v-model="editItem.jumpUrl" placeholder="图片跳转路径" class="ml-3" /> |
|
|
|
</a-form-item> |
|
|
|
<!-- 状态 --> |
|
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="状态"> |
|
|
|
<a-select @change="getUse($event, 'recStatus')" class="ml-3" :default-value="enable[editItem.recStatus]" style="width: 150px"> |
|
|
|
<a-select-option :key="item" :value="index" v-for="(item, index) in enable">{{ item }}</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
<!-- 页面显示位置 --> |
|
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="页面显示位置"> |
|
|
|
<a-select @change="getUse($event, 'showPage')" class="ml-3" :default-value="editItem.showPage" style="width: 100%"> |
|
|
|
<a-select-option :key="item.page" :value="item.page" v-for="item in enable2">{{ item.name }}</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
<!-- 图片 --> |
|
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片"> |
|
|
|
<a-upload :before-upload="beforeUpload" class="ml-3" :action="upload" list-type="picture" name="files" @change="handleChange"> |
|
|
|
<a-button v-show="fileList.length - 0 === 0"> <a-icon type="upload" /> 选择图片 </a-button> |
|
|
|
</a-upload> |
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
<a-form-item class="d-flex flex-row-reverse"> |
|
|
|
<a-button @click="$emit('closeModal')" class="mr-3">取消</a-button> |
|
|
|
<a-button class="white--text" html-type="submit" type="primary">保存</a-button> |
|
|
|
@ -75,6 +63,7 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
// import { upTeam } from 'config/api'; |
|
|
|
import { upload, addCarousel } from 'config/api'; |
|
|
|
|
|
|
|
const formItemLayout = { |
|
|
|
labelCol: { span: 6 }, |
|
|
|
@ -84,19 +73,119 @@ const formItemLayout = { |
|
|
|
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "BannerEdit", |
|
|
|
props: { editVisible: { type: Boolean, default: false },editItem: { type: Object, default: () => {} } }, |
|
|
|
name: 'BannerEdit', |
|
|
|
props: { editVisible: { type: Boolean, default: false }, editItem: { type: Object, default: () => {} } }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
formItemLayout, |
|
|
|
tailItemLayout, |
|
|
|
form: this.$form.createForm(this, { name: 'r-d-add' }), |
|
|
|
} |
|
|
|
enable: ['启用', '禁用'], |
|
|
|
enable1: ['不跳转', 'H5'], |
|
|
|
enable2: [ |
|
|
|
{ |
|
|
|
name: '首页', |
|
|
|
page: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '关于我们-公司介绍', |
|
|
|
page: 11, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '关于我们-组织机构', |
|
|
|
page: 12, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '创新平台-创新资源平台', |
|
|
|
page: 32, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '创新平台-科技创新服务', |
|
|
|
page: 33, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: ':孵化平台-众创空间', |
|
|
|
page: 41, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '孵化平台-公共实验室', |
|
|
|
page: 42, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '孵化平台-中试基地', |
|
|
|
page: 43, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '孵化平台-创业导师', |
|
|
|
page: 44, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '孵化平台-孵化场所', |
|
|
|
page: 45, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '孵化平台-创业服务', |
|
|
|
page: 46, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '孵化平台-众创空间-虚拟众创空间', |
|
|
|
page: 48, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '孵化平台-众创空间-实体众创空间', |
|
|
|
page: 49, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '产业平台-产业服务', |
|
|
|
page: 52, |
|
|
|
}, |
|
|
|
], |
|
|
|
upload: upload, |
|
|
|
fileList: [], |
|
|
|
//限制文件上传的格式和大小 |
|
|
|
beforeUpload: file => { |
|
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|
|
|
if (!isJpgOrPng) { |
|
|
|
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
|
|
|
} |
|
|
|
return isJpgOrPng; |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
editItem(val) { |
|
|
|
console.log(val); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 改变搜索条件 |
|
|
|
getUse(e, str) { |
|
|
|
this.editItem[str] = e; |
|
|
|
if (str === 'jumpType' && e === 0) { |
|
|
|
this.editItem.jumpUrl = ''; |
|
|
|
} |
|
|
|
}, |
|
|
|
showPageNums(nums) { |
|
|
|
for (let i = 0; i < this.enable2.length; i++) { |
|
|
|
if (nums - 0 === this.enable2[i].page - 0) { |
|
|
|
return this.enable2[i].name; |
|
|
|
} else if (i === this.enable2.length - 1) { |
|
|
|
return ''; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
// 上传文件事件 |
|
|
|
handleChange(info) { |
|
|
|
// this.fileList = fileList; |
|
|
|
if (info.file.status === 'done') { |
|
|
|
this.fileList.push(info.file.response.data[0].visitUrl); |
|
|
|
} else if (info.file.status === 'removed') { |
|
|
|
this.fileList = info.fileList; |
|
|
|
} |
|
|
|
}, |
|
|
|
// 提交表单 |
|
|
|
handleSubmit(e) { |
|
|
|
console.log(this.editItem); |
|
|
|
e.preventDefault(); |
|
|
|
this.form.validateFieldsAndScroll(async (err, values) => { |
|
|
|
if (!err) { |
|
|
|
|
