Commit 7d53af86 authored by Xiaxuxia's avatar Xiaxuxia

修复banner管理第二次新增无法上传图片问题

parent 6b0fcb52
...@@ -17,7 +17,7 @@ export function getAllApplicationType(indexShow){ ...@@ -17,7 +17,7 @@ export function getAllApplicationType(indexShow){
return fetch({ return fetch({
url: '/api/website/industryApplicationType/getAll', url: '/api/website/industryApplicationType/getAll',
method: 'get', method: 'get',
param: {indexShow:indexShow} params: {indexShow:indexShow}
}); });
} }
...@@ -29,7 +29,7 @@ export function getListApplicationType(obj){ ...@@ -29,7 +29,7 @@ export function getListApplicationType(obj){
return fetch({ return fetch({
url: '/api/website/industryApplicationType/getList', url: '/api/website/industryApplicationType/getList',
method: 'get', method: 'get',
param: obj params: obj
}); });
} }
...@@ -53,7 +53,7 @@ export function getListApplicationInfo(obj){ ...@@ -53,7 +53,7 @@ export function getListApplicationInfo(obj){
return fetch({ return fetch({
url: '/api/website/industryApplicationInfo/getList', url: '/api/website/industryApplicationInfo/getList',
method: 'get', method: 'get',
param: obj params: obj
}); });
} }
......
<!--
* @Author: your name
* @Description: 该组件,为表单组件。
* 关联js:@/utils/formDatas.js
* 使用到该组件的地方:
* 在@/views/webSiteManagement/bannerSetting/index.vue中使用 轮播图设置
* 在@/views/webSiteManagement/satelliteIntroduction/index.vue中使用 卫星介绍
* 在@/views/webSiteManagement/imageLibrary/index.vue中使用 影像图库
-->
<template> <template>
<el-form <el-form
ref="ruleForm" ref="ruleForm"
...@@ -20,7 +29,7 @@ ...@@ -20,7 +29,7 @@
</div> </div>
<!-- 自定义 --> <!-- 自定义 -->
<div v-else-if="item.type && item.type == 'custom'"> <div v-else-if="item.type && item.type == 'custom'">
<custom-input ref="customInput" :value="getForm.formVal" @input="getCustomInput" @reset="resetParams"></custom-input> <custom-input ref="customInput" :value="getForm.formVal" @input="getCustomInput"></custom-input><!-- @input="getCustomInput" @reset="resetParams"-->
</div> </div>
<div v-else-if="item.type && item.type == 'kindEditor'"> <div v-else-if="item.type && item.type == 'kindEditor'">
...@@ -62,6 +71,16 @@ export default { ...@@ -62,6 +71,16 @@ export default {
content: "" content: ""
} }
}, },
// watch: {
// formData: {
// handler(newVal, oldVal) {
// console.log(22, newVal, oldVal)
// this.getForm = newVal
// // this.$set(this, 'getForm', newVal)
// }
// },
// deep: true
// },
computed: { computed: {
getForm() { getForm() {
this.$nextTick(() => this.$refs.ruleForm.resetFields()) this.$nextTick(() => this.$refs.ruleForm.resetFields())
...@@ -70,7 +89,6 @@ export default { ...@@ -70,7 +89,6 @@ export default {
}, },
methods: { methods: {
onContentChange (val) { onContentChange (val) {
console.log(val)
this.getForm.formVal.content = val; this.getForm.formVal.content = val;
}, },
afterChange () { afterChange () {
...@@ -84,11 +102,15 @@ export default { ...@@ -84,11 +102,15 @@ export default {
//获取图片链接 //获取图片链接
getSrc(index, val) { getSrc(index, val) {
let formVal = this.getForm.formVal let formVal = this.getForm.formVal
// console.log(index, val)
formVal[index] = val formVal[index] = val
// this.$set(this.getForm.formVal, index, val)
}, },
//获取自定义组件值 //获取自定义组件值
getCustomInput(val) { getCustomInput(val) {
let formVal = this.getForm.formVal let formVal = this.getForm.formVal
formVal.jumpType = val.jumpType;
if (val.jumpType == 1) { if (val.jumpType == 1) {
formVal.url = val.value formVal.url = val.value
} else { } else {
...@@ -112,7 +134,7 @@ export default { ...@@ -112,7 +134,7 @@ export default {
//校验自定义input //校验自定义input
checkCustom() { checkCustom() {
let form = this.getForm.formVal; let form = this.getForm.formVal;
// console.log('自定义input', this.getForm.formVal)
if (form.jumpType === 1 && form.url == '') { if (form.jumpType === 1 && form.url == '') {
this.$refs.customInput[0].showErr('请输入链接地址') this.$refs.customInput[0].showErr('请输入链接地址')
return false return false
......
<template> <template>
<div class="custom-input"> <div class="custom-input">
<el-select v-model="select.jumpType" placeholder="请选择" @change="selectType"> <el-select v-model="select.jumpType" placeholder="请选择" @change="jumpTypeChange">
<el-option <el-option
v-for="(item, index) in linkTypes" v-for="(item, index) in linkTypes"
:key="~~index" :key="~~index"
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<!-- 外部链接 --> <!-- 外部链接 -->
<div class="link-type-input" v-if="select.jumpType === 1"> <div class="link-type-input" v-if="select.jumpType === 1">
<el-input v-model="select.value" placeholder="请输入外部链接" @input="blurFunc"></el-input> <el-input v-model="select.value" placeholder="请输入外部链接"></el-input>
</div> </div>
<!-- 卫星影像 --> <!-- 卫星影像 -->
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
<el-select v-model="select.value" placeholder="请选择"> <el-select v-model="select.value" placeholder="请选择">
<el-option <el-option
v-for="item in satelliteList" v-for="item in satelliteList"
:key="item.value" :key="item.id"
:label="item.label" :label="item.name"
:value="item.value"> :value="item.id + ''">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
...@@ -38,9 +38,9 @@ ...@@ -38,9 +38,9 @@
<el-select v-model="select.value" placeholder="请选择"> <el-select v-model="select.value" placeholder="请选择">
<el-option <el-option
v-for="item in applicationList" v-for="item in applicationList"
:key="item.value" :key="item.id"
:label="item.label" :label="item.title"
:value="item.value"> :value="item.id + ''">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<!-- 行业应用详情 --> <!-- 行业应用详情 -->
<div class="link-type-input" v-if="select.jumpType === 5"> <div class="link-type-input" v-if="select.jumpType === 5">
<el-button type="primary" icon="el-icon-plus" v-if="!select.value" @click="details.visible = true">选择应用详情</el-button> <el-button type="primary" icon="el-icon-plus" v-if="!select.value" @click="details.visible = true">选择应用详情</el-button>
<el-tag type="success" v-if="select.value" @click="details.visible = true">{{getName('details', select.value)}}</el-tag> <el-tag type="success" v-if="select.value" @click="details.visible = true">{{getName('details', select.value, 'title')}}</el-tag>
</div> </div>
<div class="el-form-item__error" v-if="select.jumpType !== 0 && !!hasErr">{{hasErr}}</div> <div class="el-form-item__error" v-if="select.jumpType !== 0 && !!hasErr">{{hasErr}}</div>
...@@ -70,23 +70,23 @@ ...@@ -70,23 +70,23 @@
<el-table-column label="缩略图" width="150" align="center"> <el-table-column label="缩略图" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span> <span>
<img class="icon" :src="scope.row.icon.url"/> <img class="icon" :src="scope.row.coverImg"/>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="简介" align="center"> <el-table-column label="简介" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="introduce">{{scope.row.introduce}}</span> <span class="introduce">{{scope.row.detail}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型" width="150" align="center"> <el-table-column label="类型" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.type}}</span> <span>{{scope.row.typeName}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" align="center"> <el-table-column label="状态" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.status}}</span> <span>{{getStatus(scope.row.status)}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="80" align="center"> <el-table-column label="操作" width="80" align="center">
...@@ -110,8 +110,8 @@ ...@@ -110,8 +110,8 @@
<!-- 应用详情弹窗 --> <!-- 应用详情弹窗 -->
<el-dialog title="选择资讯" :visible.sync="details.visible" append-to-body width="80%" style="height: 100%"> <el-dialog title="选择资讯" :visible.sync="details.visible" append-to-body width="80%" style="height: 100%">
<el-table size="mini" :data="news.datas" border fit highlight-current-row current-row-key="id" <el-table size="mini" :data="details.datas" border fit highlight-current-row current-row-key="id"
@current-change="(val) => handleCurrentChange('news', val)" style="width: 100%" height="500px"> @current-change="(val) => handleCurrentChange('details', val)" style="width: 100%" height="500px">
<el-table-column label="序号" width="100" align="center"> <el-table-column label="序号" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.id }}</span> <span>{{ scope.row.id }}</span>
...@@ -124,27 +124,27 @@ ...@@ -124,27 +124,27 @@
</el-table-column> </el-table-column>
<el-table-column label="应用名称" align="center"> <el-table-column label="应用名称" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="introduce">{{ scope.row.name }}</span> <span class="introduce">{{ scope.row.title }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="详情图" align="center"> <!-- <el-table-column label="详情图" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span> <span>
<img <img
class="icon" class="icon"
:src="scope.row.icon.url" :src="scope.row.coverImg"
/> />
</span> </span>
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column label="发布时间" width="150" align="center"> <el-table-column label="发布时间" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.date }}</span> <span>{{ scope.row.crtTime }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" width="150" align="center"> <el-table-column label="状态" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.status }}</span> <span>{{ getStatus(scope.row.status) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="150" align="center"> <el-table-column label="操作" width="150" align="center">
...@@ -170,6 +170,9 @@ ...@@ -170,6 +170,9 @@
</template> </template>
<script> <script>
import { getListApplicationType, getListApplicationInfo } from "@/api/website/industryApplication"//获取行业类别、行业应用详情
import { page } from "@/api/website/satelliteIntroduction"//获取卫星介绍
import { getListNewsInfo } from "@/api/website/newsCategory" //星云动态
export default { export default {
name: "index", name: "index",
...@@ -193,13 +196,33 @@ export default { ...@@ -193,13 +196,33 @@ export default {
} }
}, },
deep:true deep:true
},
select: {
handler(newVal) {
// console.dir(JSON.stringify(newVal))
this.$emit('input', newVal)
},
deep: true
} }
}, },
computed: { computed: {
getName(key, id, name = 'name') { getStatus(status) {
return (key, id) => { return (status) => {
let a = ""
switch(status) {
case 1: a = '启用'; break;
case 2: a = '禁用'; break;
default: a = '未知';break
}
return a
}
},
getName(key, id, name) {
return (key, id, name) => {
console.log(this[key])
let target = this[key].datas.find(v => v.id == id); let target = this[key].datas.find(v => v.id == id);
return target ? target[name] : null console.log(111, target)
return (target && target[name]) || null
} }
} }
}, },
...@@ -209,10 +232,10 @@ export default { ...@@ -209,10 +232,10 @@ export default {
linkTypes: { linkTypes: {
0: "不跳转", 0: "不跳转",
1: '外部链接', 1: '外部链接',
// 2: '卫星影像', 2: '卫星影像',
// 3: '星云动态', 3: '星云动态',
// 4: '行业应用类别', 4: '行业应用类别',
// 5: '行业应用详情', 5: '行业应用详情',
}, },
satelliteList: [],//卫星影像 satelliteList: [],//卫星影像
applicationList: [],//行业应用 applicationList: [],//行业应用
...@@ -223,31 +246,7 @@ export default { ...@@ -223,31 +246,7 @@ export default {
}, },
//星云动态 //星云动态
news: { news: {
datas: [{ datas: [],
id: '1',
title: '王小虎',
icon: {
url: 'https://onemap.obtdata.com/wx/download/world.png',
showPreview: false
},
introduce: '介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍',
type: '类型',
sort: '排序',
status: '状态',
operator: '操作',
},{
id: '2',
title: '王小虎2',
icon: {
url: 'https://onemap.obtdata.com/wx/download/world.png',
showPreview: false
},
introduce: '2介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍',
type: '类型',
sort: '排序',
status: '状态',
operator: '操作',
}],
visible: false, visible: false,
currRow: null, currRow: null,
total: 100, total: 100,
...@@ -258,17 +257,7 @@ export default { ...@@ -258,17 +257,7 @@ export default {
}, },
//应用详情 //应用详情
details: { details: {
datas: [{ datas: [],
id: "1",
type: "类别",
name: "名称",
icon: {
url: "https://onemap.obtdata.com/wx/download/world.png",
showPreview: false,
},
date: "发布时间",
status: "状态",
}],
visible: false, visible: false,
currRow: null, currRow: null,
total: 100, total: 100,
...@@ -277,35 +266,75 @@ export default { ...@@ -277,35 +266,75 @@ export default {
limit: 20 limit: 20
} }
}, },
detailsList: [],
hasErr: '', hasErr: '',
}; };
}, },
mounted() {
this.init()
},
methods: { methods: {
//初始化
init() {
this.getSatelliteListFunc();//获取卫星影像介绍
this.getListApplicationTypeFunc();//获取行业应用类型
this.getDialogDatas('news', getListNewsInfo)//星云动态
this.getDialogDatas('details', getListApplicationInfo)//行业应用详情
},
getDialogDatas(key, fn) {
console.log(this[key].pageParams, '星云和详情')
fn(this[key].pageParams).then(res => {
this[key].datas = res.data.data
this[key].total = res.data.totalCount
})
},
// //星云动态
// getListNewsInfoFunc() {
// getListNewsInfo(this.news.pageParams).then(res => {
// this.news.datas = res.data.data
// this.news.total = res.data.totalCount
// })
// },
// //行业应用详情
// getListApplicationInfoFunc() {
// getListApplicationInfo(this.details.pageParams).then(res => {
// this.details.datas = res.data.data
// this.details.total = res.data.totalCount
// })
// },
//行业应用类别
getListApplicationTypeFunc() {
let params = {
page: 1,
limit: 20
}
getListApplicationType(params).then(res => {
this.applicationList = res.data.data
})
},
//获取卫星影像介绍
getSatelliteListFunc() {
page().then(res => {
this.satelliteList = res.data.data
})
},
//动态。详情翻页
handleCurrentChange(key, val) { handleCurrentChange(key, val) {
this[key].currRow = val; this[key].currRow = val;
}, },
//动态。详情选择按钮
selectFunc(key, val) { selectFunc(key, val) {
this[key].visible = false; this[key].visible = false;
this.select.value = val.id; this.select.value = val.id;
this[key].currRow = val.id;//高亮选中项 this[key].currRow = val.id;//高亮选中项
console.log(this.select)
this.emitInput(this.select.value)
}, },
showErr(err) { showErr(err) {
this.hasErr = err this.hasErr = err
}, },
selectType() { //跳转类型改变方法
this.$emit('reset', this.select.jumpType) jumpTypeChange() {
this.select.value = "";
this.showErr('') this.showErr('')
},
blurFunc(val) {
console.log(val)
this.emitInput(this.select)
},
emitInput(val) {
this.$emit('input', val)
} }
} }
}; };
......
...@@ -46,10 +46,20 @@ export default { ...@@ -46,10 +46,20 @@ export default {
uploading: false uploading: false
}; };
}, },
mounted() {
this.$bus.$on('upload-clearFiles', this.clearFiles)
},
beforeDestroy() {
this.$bus.$off('upload-clearFiles')
},
methods: { methods: {
//清空上传过的图片
clearFiles() {
this.$refs[this.refName].clearFiles()
},
//删除图片 //删除图片
rmImage() { rmImage() {
this.$refs[this.refName].clearFiles() this.clearFiles();
this.emitFunc("", null); this.emitFunc("", null);
}, },
//上传请求 //上传请求
......
...@@ -19,7 +19,6 @@ let radioGroup = { ...@@ -19,7 +19,6 @@ let radioGroup = {
} }
} }
//banner表单项 //banner表单项
export const banner = { export const banner = {
init: () => ({ init: () => ({
...@@ -98,48 +97,48 @@ export const satelliteIntroduction = { ...@@ -98,48 +97,48 @@ export const satelliteIntroduction = {
//影像图库 // //影像图库
export const imageLibrary = { // export const imageLibrary = {
init: () => ({ // init: () => ({
name: "",//标题名称 // name: "",//标题名称
coverImg: "",//封面图 // coverImg: "",//封面图
detailImg: "",//详情图 // detailImg: "",//详情图
//产品分类 // //产品分类
//影像分类 // //影像分类
//文件格式 // //文件格式
//分辨率 // //分辨率
//拍摄地点 // //拍摄地点
//拍摄时间 // //拍摄时间
//可否商用 // //可否商用
//是否水印 // //是否水印
}), // }),
rules: { // rules: {
name: [ // name: [
{ required: true, message: '请输入卫星名称', trigger: 'blur' } // { required: true, message: '请输入卫星名称', trigger: 'blur' }
], // ],
resolution: [ // resolution: [
{ required: true, message: '请输入分辨率', trigger: 'blur' } // { required: true, message: '请输入分辨率', trigger: 'blur' }
], // ],
rank: [ // rank: [
{ required: true, message: '请设置0-10000,数值越大排序越靠前', trigger: 'blur' } // { required: true, message: '请设置0-10000,数值越大排序越靠前', trigger: 'blur' }
], // ],
coverImg: [ // coverImg: [
{ required: true, message: '请输入封面图链接', trigger: 'blur' } // { required: true, message: '请输入封面图链接', trigger: 'blur' }
], // ],
iconImg: [ // iconImg: [
{ required: true, message: '请输入图标链接', trigger: 'blur' } // { required: true, message: '请输入图标链接', trigger: 'blur' }
], // ],
content: [ // content: [
{ required: true, message: '请输入详细内容', trigger: 'blur' } // { required: true, message: '请输入详细内容', trigger: 'blur' }
] // ]
}, // },
formInfo: { // formInfo: {
name: { label: "卫星名称" }, // name: { label: "卫星名称" },
resolution: { label: "分辨率" }, // resolution: { label: "分辨率" },
coverImg: { label: "封面图", type: 'file'}, // coverImg: { label: "封面图", type: 'file'},
iconImg: { label: "图标", type: 'file'}, // iconImg: { label: "图标", type: 'file'},
rank: { label: "排序" }, // rank: { label: "排序" },
content: { label: "详细内容", type: 'kindEditor'}, // content: { label: "详细内容", type: 'kindEditor'},
} // }
} // }
<template>
<div class="container">
<!-- 头部 -->
<div class="head">
<div>banner列表</div>
<el-button type="primary" @click="addItem">添加banner</el-button>
</div>
<!-- 主体 -->
<div class="app-container calendar-list-container">
<!-- 条件搜索 -->
<div class="filter-container">
<el-form :inline="true" :model="listQuery" class="demo-form-inline">
<el-form-item label="所有状态">
<el-select v-model="listQuery.status">
<el-option v-for="(item, index) in bannerStatus" :key="index" :label="item" :value="~~index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="banner标题">
<el-input v-model="listQuery.title" placeholder="请输入banner标题"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="search">搜索</el-button>
<el-button type="primary" plain @click="clearFilterData">清除搜索</el-button>
</el-form-item>
</el-form>
</div>
<!-- 数据列表 -->
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" type="index" label="序号" width="65"></el-table-column>
<el-table-column align="center" label="banner标题" prop="title"></el-table-column>
<el-table-column align="center" label="banner图">
<template slot-scope="scope">
<img class="cover" :src="scope.row.cover" />
</template>
</el-table-column>
<el-table-column align="center" label="状态">
<template slot-scope="scope">
<!-- 根据状态获取对应中文 -->
{{ getStatus(scope.row.status) }}
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="250">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
<el-button :type="scope.row.status === 1 ? 'info': 'warning'" size="mini" @click="changeParams(scope.row, 'status')">{{scope.row.status === 1 ? '下架': '上架'}}</el-button>
<el-button type="danger" size="mini" @click="changeParams(scope.row, 'isDel')">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="page-foot">
<el-pagination
background
layout="prev, pager, next"
:page-size="listQuery.limit"
:total="total" @current-change="currentChange">
</el-pagination>
</div>
<!-- 添加、编辑弹窗 -->
<el-dialog
top="10%"
:close-on-click-modal="false"
:title="dialogTitle"
:visible.sync="dialogVisible">
<custom-form
:formData="formObject"
@submitFunc="updateFunc"
@reset="resetForm"
></custom-form>
</el-dialog>
</div>
</div>
</template>
<script>
import { banner } from "@/utils/formDatas.js"//表单数据
import { page, update } from "@/api/website/banner"//接口
import CustomForm from "@/components/CustomForm"
export default {
name: "bannerSetting",
components: {
CustomForm
},
data() {
return {
data: null,//原数据
list: null,//赋值数据 | 过滤数据
total: null,//总个数
listLoading: true,//请求加载状态
//请求参数。页码页数等
listQuery: {
status: 0,
title: "",
page: 1,
limit: 20
},
//搜索表单
searchForm: {
status: 0,
title: ""
},
formObject: {
formVal: banner.init(),//提交的表单参数
rules: banner.rules,//表单规则
formItem: banner.formInfo,//表单项。
},
//是否启用,1、启用,2、禁用
bannerStatus: {
0: '全部',
1: '启用',
2: '禁用',
},
dialogVisible: false,//弹窗显示控制
dialogTitle: "新增banner"//弹窗标题
}
},
mounted() {
this.getList()//获取数据
},
methods: {
//获取图片链接
getSrc(val) {
this.editForm.cover = val
},
//获取自定义组件值
getCustomInput(val) {
this.editForm.url = val
},
search() {
this.listQuery.page = 1;
this.getList()
},
//清除搜索
filterData() {
if (this.searchForm.status === 0 && this.searchForm.title === '') {
this.list = this.data;
return ;
}
let temp = this.data.filter(v => this.searchForm.status === 0 ? true: !!(this.searchForm.status === v.status))
if (!!this.searchForm.title) {
temp = temp.filter(v => v.title.includes(this.searchForm.title))
}
this.list = temp
},
//清除搜索
clearFilterData() {
this.searchForm = {
status: 0,
title: ""
}
this.list = this.data;
},
//切换页码
currentChange(val) {
this.listQuery.page = val;
this.getList();
},
//编辑
edit(row) {
this.dialogTitle = "编辑banner";
this.formObject.formVal = this.filterParams(row)
this.dialogVisible = true;
console.log(this.formObject.formVal)
},
//更新方法
updateFunc(params) {
params.rank = ~~params.rank;
update(params).then(res => {
if (res.status == 200) {
this.dialogVisible = false;
this.getList();
} else {
this.$message.error(res.message);
}
})
},
//取消表单
resetForm() {
this.dialogVisible = false;
},
//新增banner
addItem() {
this.dialogTitle = "新增banner";
this.dialogVisible = true;
this.formObject.formVal = banner.init();
},
filterParams(obj) {
let p = {}
let b = ['isDel', 'updTime', 'crtTime']
for (let key in obj) {
if (!b.includes(key)) {
p[key] = obj[key]
}
}
return p;
},
//获取状态
getStatus(val) {
return this.bannerStatus[val]
},
//上下架、删除更新
changeParams(row, key) {
this.$confirm('确定继续执行该操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.formObject.formVal = this.filterParams(row)
console.log('过滤参数', this.formObject.formVal)
if (key == 'isDel') {
this.formObject.formVal[key] = row[key] == 0 ? 1 : 0;
} else {
this.formObject.formVal[key] = row[key] == 1 ? 2 : 1;
}
//更新专题
this.updateFunc(this.formObject.formVal);
})
},
//获取banner列表
getList() {
this.listLoading = true;
page(this.listQuery).then(res => {
this.list = res.data.data
this.data = res.data.data
this.total = res.data.totalCount;
this.listLoading = false;
}).catch(err => {
this.listLoading = false;
})
}
}
}
</script>
<style lang="scss" scoped>
.head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px;
width: 100%;
border-bottom: 1px solid #e6e6e6;
}
.cover {
max-width: 200px;
height: auto;
}
.page-foot {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
top="10%" top="10%"
:close-on-click-modal="false" :close-on-click-modal="false"
:title="dialogTitle" :title="dialogTitle"
:visible.sync="dialogVisible"> :visible.sync="dialogVisible" @closed="closeDialog"> <!-- @open="onOpen" @closed="closeDialog">-->
<custom-form <custom-form
:formData="formObject" :formData="formObject"
@submitFunc="updateFunc" @submitFunc="updateFunc"
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
import { banner } from "@/utils/formDatas.js"//表单数据 import { banner } from "@/utils/formDatas.js"//表单数据
import { page, update } from "@/api/website/banner"//接口 import { page, update } from "@/api/website/banner"//接口
import CustomForm from "@/components/CustomForm" import CustomForm from "@/components/CustomForm"//自定义表单组件
export default { export default {
name: "bannerSetting", name: "bannerSetting",
...@@ -132,6 +132,7 @@ export default { ...@@ -132,6 +132,7 @@ export default {
getCustomInput(val) { getCustomInput(val) {
this.editForm.url = val this.editForm.url = val
}, },
//搜索按钮
search() { search() {
this.listQuery = { this.listQuery = {
status: this.searchForm.status || null, status: this.searchForm.status || null,
...@@ -185,11 +186,18 @@ export default { ...@@ -185,11 +186,18 @@ export default {
//编辑 //编辑
edit(row) { edit(row) {
this.dialogTitle = "编辑banner"; this.dialogTitle = "编辑banner";
this.formObject.formVal = this.filterParams(row) this.formObject.formVal = this.filterParams(row)
// this.formObject = {
// formVal: this.filterParams(row),
// rules: this.formObject.rules,//表单规则
// formItem: banner.formInfo,//表单项。
// }
this.dialogVisible = true; this.dialogVisible = true;
console.log(this.formObject.formVal) // console.log(this.formObject.formVal)
},
closeDialog() {
this.$bus.$emit('upload-clearFiles')
}, },
//更新方法 //更新方法
updateFunc(params) { updateFunc(params) {
...@@ -212,7 +220,26 @@ export default { ...@@ -212,7 +220,26 @@ export default {
this.dialogTitle = "新增banner"; this.dialogTitle = "新增banner";
this.dialogVisible = true; this.dialogVisible = true;
this.formObject.formVal = banner.init(); this.formObject.formVal = banner.init();
}, },
// //打开弹窗
// onOpen() {
// this.$nextTick(() => {
// this.formObject = {
// formVal: {
// title: "",
// cover: "",
// rank: "",
// url: "",
// status: 1,
// jumpType: 0,
// jumpId: '',
// },
// rules: this.formObject.rules,//表单规则
// formItem: banner.formInfo,//表单项。
// }
// })
// },
filterParams(row) { filterParams(row) {
let a = {}; let a = {};
for (let i in this.formObject.formVal) { for (let i in this.formObject.formVal) {
......
...@@ -283,7 +283,7 @@ export default { ...@@ -283,7 +283,7 @@ export default {
this.ruleForm[key] = val; this.ruleForm[key] = val;
} }
console.log(key, this.ruleForm[key]) // console.log(key, this.ruleForm[key])
}, },
//点击编辑的时候,获取表格行数据,渲染edit页面 //点击编辑的时候,获取表格行数据,渲染edit页面
renderData(val) { renderData(val) {
...@@ -299,7 +299,7 @@ export default { ...@@ -299,7 +299,7 @@ export default {
this.ruleForm = data; this.ruleForm = data;
this.images.selects = this.ruleForm.relatedIds.split(',')//相似图片转为数组格式 this.images.selects = this.ruleForm.relatedIds.split(',')//相似图片转为数组格式
console.log('bus end', this.ruleForm); // console.log('bus end', this.ruleForm);
// }) // })
}, },
//返回上一页 //返回上一页
...@@ -342,7 +342,7 @@ export default { ...@@ -342,7 +342,7 @@ export default {
params.paramJson = JSON.stringify(params.paramJson); params.paramJson = JSON.stringify(params.paramJson);
params.imageInfoRelationList = [params.imageInfoRelationList] params.imageInfoRelationList = [params.imageInfoRelationList]
console.log(params) // console.log(params)
//执行方法 //执行方法
update(params).then(res => { update(params).then(res => {
if (res.status == 200) { if (res.status == 200) {
......
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
methods: { methods: {
renderData(val) { renderData(val) {
this.formObject.formVal = val this.formObject.formVal = val
console.log('bus end', this.formObject.formVal) // console.log('bus end', this.formObject.formVal)
}, },
goBack() { goBack() {
this.$emit('change', 'List') this.$emit('change', 'List')
......
...@@ -28,9 +28,7 @@ export default { ...@@ -28,9 +28,7 @@ export default {
}, },
methods: { methods: {
changePage(name, val) { changePage(name, val) {
this.componentVal = name this.componentVal = name
this.$nextTick(() => { this.$nextTick(() => {
if (!!val) { if (!!val) {
this.$bus.$emit('satelliteIntroduction-edit-renderData', val) this.$bus.$emit('satelliteIntroduction-edit-renderData', val)
......
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