|
@@ -1,22 +1,18 @@
|
|
|
<template>
|
|
|
<a-card :bordered="false">
|
|
|
- <div class="add">
|
|
|
- <a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="bannerSetting-showModal">新建</a-button>
|
|
|
- </div>
|
|
|
+ <div class="add"><a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="bannerSetting-showModal">新建</a-button></div>
|
|
|
<v-select ref="position" style="display: none;" code="ADVERT_POSITION"></v-select>
|
|
|
<!-- table列表 -->
|
|
|
<s-table
|
|
|
ref="table"
|
|
|
size="default"
|
|
|
- :rowKey="(row)=> row.id"
|
|
|
+ :rowKey="row => row.id"
|
|
|
:showPagination="false"
|
|
|
:columns="columns"
|
|
|
:data="loadData"
|
|
|
bordered>
|
|
|
<!-- 广告图位置 -->
|
|
|
- <span slot="position" slot-scope="text">
|
|
|
- {{ $refs.position.getNameByCode(text) }}
|
|
|
- </span>
|
|
|
+ <span slot="position" slot-scope="text">{{ $refs.position.getNameByCode(text) }}</span>
|
|
|
<span slot="action" slot-scope="text, record">
|
|
|
<template>
|
|
|
<a-icon type="eye" id="bannerSetting-handleDel" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleEdit(record, 1)" />
|
|
@@ -24,8 +20,14 @@
|
|
|
<a-icon type="delete" id="bannerSetting-delect" v-if="record.status == '0'" style="font-size: 20px;color: red;padding: 0 10px;" @click="delect(record)" />
|
|
|
</template>
|
|
|
</span>
|
|
|
- <span slot="status" slot-scope="text,record">
|
|
|
- <a-switch checkedChildren="启用" unCheckedChildren="禁用" id="bannerSetting-changeFlagHandle" v-model=" record.status==1 ? true : false " @change="changeFlagHandle(text, record)" />
|
|
|
+ <span slot="status" slot-scope="text, record">
|
|
|
+ <a-switch
|
|
|
+ checkedChildren="启用"
|
|
|
+ unCheckedChildren="禁用"
|
|
|
+ id="bannerSetting-changeFlagHandle"
|
|
|
+ v-model="record.status == 1 ? true : false"
|
|
|
+ @change="changeFlagHandle(text, record)"
|
|
|
+ />
|
|
|
</span>
|
|
|
</s-table>
|
|
|
<!-- 弹窗 -->
|
|
@@ -47,9 +49,10 @@
|
|
|
<a-input
|
|
|
id="bannerSetting-title"
|
|
|
:maxLength="30"
|
|
|
- v-decorator="['formData.title', { initialValue:formData.title,rules: [{ required: true, message: '请输入轮播图名称30个字以内!' }] }]"
|
|
|
+ v-decorator="['formData.title', { initialValue: formData.title, rules: [{ required: true, message: '请输入轮播图名称30个字以内!' }] }]"
|
|
|
:disabled="disabled"
|
|
|
- placeholder="请输入轮播图名称30个字以内" />
|
|
|
+ placeholder="请输入轮播图名称30个字以内"
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="广告图位置" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
<v-select
|
|
@@ -59,31 +62,34 @@
|
|
|
id="bannerSetting-position"
|
|
|
placeholder="请选择广告图位置"
|
|
|
:disabled="disabled"
|
|
|
- v-decorator="['formData.position', { initialValue:formData.position,rules: [{ required: true, message: '请选择广告图位置!' }] }]"></v-select>
|
|
|
+ v-decorator="['formData.position', { initialValue: formData.position, rules: [{ required: true, message: '请选择广告图位置!' }] }]"
|
|
|
+ ></v-select>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="跳转链接" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
<a-input
|
|
|
- v-decorator="['formData.url', { initialValue:formData.url,rules: [{ required: false, message: '请填写跳转链接!' }] }]"
|
|
|
+ v-decorator="['formData.url', { initialValue: formData.url, rules: [{ required: false, message: '请填写跳转链接!' }] }]"
|
|
|
:disabled="disabled"
|
|
|
id="bannerSetting-url"
|
|
|
- placeholder="请输入跳转链接" />
|
|
|
+ placeholder="请输入跳转链接"
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="排序" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
<a-input
|
|
|
type="number"
|
|
|
- v-decorator="['formData.sort', { initialValue:formData.sort, rules: [{ required: true, message: '请排序!' }] }]"
|
|
|
+ v-decorator="['formData.sort', { initialValue: formData.sort, rules: [{ required: true, message: '请排序!' }] }]"
|
|
|
:disabled="disabled"
|
|
|
id="bannerSetting-sort"
|
|
|
- placeholder="请输入序号值" />
|
|
|
+ placeholder="请输入序号值"
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
- <a-radio-group :disabled="disabled" id="bannerSetting-status" v-decorator="['formData.status', { initialValue:formData.status,rules: [{ required: true, message: '请选择状态!' }] }]">
|
|
|
- <a-radio value="1">
|
|
|
- 启用
|
|
|
- </a-radio>
|
|
|
- <a-radio value="0">
|
|
|
- 禁用
|
|
|
- </a-radio>
|
|
|
+ <a-radio-group
|
|
|
+ :disabled="disabled"
|
|
|
+ id="bannerSetting-status"
|
|
|
+ v-decorator="['formData.status', { initialValue: formData.status, rules: [{ required: true, message: '请选择状态!' }] }]"
|
|
|
+ >
|
|
|
+ <a-radio value="1">启用</a-radio>
|
|
|
+ <a-radio value="0">禁用</a-radio>
|
|
|
</a-radio-group>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="上传图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
@@ -95,44 +101,31 @@
|
|
|
'formData.photoPath',
|
|
|
{
|
|
|
initialValue: formData.photoPath,
|
|
|
- rules: [{required: true,message: '请上传轮播图!'}]
|
|
|
- }]"
|
|
|
+ rules: [{ required: true, message: '请上传轮播图!' }]
|
|
|
+ }
|
|
|
+ ]"
|
|
|
ref="bannerImage"
|
|
|
:fileSize="0.25"
|
|
|
:disabled="disabled"
|
|
|
@change="getbannerImage"
|
|
|
listType="picture-card"
|
|
|
- upText="上传">
|
|
|
- </Upload>
|
|
|
+ upText="上传"
|
|
|
+ ></Upload>
|
|
|
<img v-else :src="formData.photoPath" style="width:100px ;height: auto;" />
|
|
|
</div>
|
|
|
</a-form-item>
|
|
|
<a-form-item :wrapper-col="{ span: 12, offset: 5 }" style="text-align: center;">
|
|
|
- <a-button type="primary" html-type="submit" v-if="!disabled" id="bannerSetting-submit">
|
|
|
- 保存
|
|
|
- </a-button>
|
|
|
- <a-button @click="close()" style="margin-left: 8px" id="bannerSetting-close">
|
|
|
- 返回列表
|
|
|
- </a-button>
|
|
|
+ <a-button type="primary" html-type="submit" v-if="!disabled" id="bannerSetting-submit">保存</a-button>
|
|
|
+ <a-button @click="close()" style="margin-left: 8px" id="bannerSetting-close">返回列表</a-button>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
- </div>
|
|
|
</a-card>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- Upload,
|
|
|
- STable,
|
|
|
- VSelect
|
|
|
-} from '@/components'
|
|
|
-import {
|
|
|
- getBannerSettingList,
|
|
|
- changeStatus,
|
|
|
- deleteItem,
|
|
|
- saveItem
|
|
|
-} from '@/api/bannerSetting.js'
|
|
|
+import { Upload, STable, VSelect } from '@/components'
|
|
|
+import { getBannerSettingList, changeStatus, deleteItem, saveItem } from '@/api/bannerSetting.js'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
@@ -143,73 +136,71 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
// 表头
|
|
|
- columns: [{
|
|
|
- title: '序号',
|
|
|
- dataIndex: 'no',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '广告图位置',
|
|
|
- minWidth: '100',
|
|
|
- dataIndex: 'position',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'position'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '名称',
|
|
|
- minWidth: '100',
|
|
|
- dataIndex: 'title',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '排序',
|
|
|
- minWidth: '100',
|
|
|
- dataIndex: 'sort',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '跳转链接',
|
|
|
- minWidth: '200',
|
|
|
- dataIndex: 'url',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- minWidth: '100',
|
|
|
- dataIndex: 'status',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'status'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- // dataIndex: 'action',
|
|
|
- minWidth: '100',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'action'
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'no',
|
|
|
+ minWidth: '40',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告图位置',
|
|
|
+ minWidth: '100',
|
|
|
+ dataIndex: 'position',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'position'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '名称',
|
|
|
+ minWidth: '100',
|
|
|
+ dataIndex: 'title',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '排序',
|
|
|
+ minWidth: '100',
|
|
|
+ dataIndex: 'sort',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '跳转链接',
|
|
|
+ minWidth: '200',
|
|
|
+ dataIndex: 'url',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ minWidth: '100',
|
|
|
+ dataIndex: 'status',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'status'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ minWidth: '100',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'action'
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
],
|
|
|
// 加载数据方法 必须为 Promise 对象
|
|
|
loadData: parameter => {
|
|
|
return getBannerSettingList({
|
|
|
bannerType: 'app'
|
|
|
+ }).then(res => {
|
|
|
+ // console.log(res, '1111')
|
|
|
+ const no = 0
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ const _item = res.data[i]
|
|
|
+ _item.no = no + i + 1
|
|
|
+ }
|
|
|
+ return res.data
|
|
|
})
|
|
|
- .then(res => {
|
|
|
- // console.log(res, '1111')
|
|
|
- const no = 0
|
|
|
- for (let i = 0; i < res.data.length; i++) {
|
|
|
- const _item = res.data[i]
|
|
|
- _item.no = no + i + 1
|
|
|
- // _item.releaseStatus = _item.releaseStatus + '' === 'FB'
|
|
|
- }
|
|
|
- return res.data
|
|
|
- })
|
|
|
},
|
|
|
|
|
|
title: '编辑',
|
|
@@ -233,7 +224,8 @@ export default {
|
|
|
status: '', // 状态
|
|
|
sort: '', // 排序
|
|
|
position: '', // 广告图位置
|
|
|
- photoPath: '' ,// banner地址
|
|
|
+ photoPath: '', // banner地址
|
|
|
+ createDate: ''
|
|
|
},
|
|
|
bannerType: 'app',
|
|
|
disabled: false,
|
|
@@ -251,6 +243,7 @@ export default {
|
|
|
showModal () {
|
|
|
this.disabled = false
|
|
|
delete this.formData.id
|
|
|
+ delete this.formData.createDate
|
|
|
this.visible = true
|
|
|
this.title = '新增'
|
|
|
this.hideRequiredMark = false
|
|
@@ -306,6 +299,7 @@ export default {
|
|
|
this.formData.status = row.status
|
|
|
this.formData.sort = row.sort
|
|
|
this.formData.position = row.position
|
|
|
+ this.formData.createDate = row.createDate
|
|
|
},
|
|
|
// 0 修改,1 查看详情
|
|
|
handleEdit (row, type) {
|
|
@@ -367,7 +361,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .addBtn {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
+.addBtn {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
</style>
|