Wayne
11 months ago
parent
c22fce6989
commit
b721b94a24
@ -0,0 +1,55 @@ |
||||
import { axios } from '@/utils/request' |
||||
|
||||
// api接口列表
|
||||
const api = { |
||||
list: '/content.banner/list', |
||||
detail: '/content.banner/detail', |
||||
add: '/content.banner/add', |
||||
edit: '/content.banner/edit', |
||||
delete: '/content.banner/delete' |
||||
} |
||||
|
||||
// 列表记录
|
||||
export function list (params) { |
||||
return axios({ |
||||
url: api.list, |
||||
method: 'get', |
||||
params |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* 新增记录 |
||||
* @param {*} data |
||||
*/ |
||||
export function add (data) { |
||||
return axios({ |
||||
url: api.add, |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* 编辑记录 |
||||
* @param {*} data |
||||
*/ |
||||
export function edit (data) { |
||||
return axios({ |
||||
url: api.edit, |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* 删除记录 |
||||
* @param {*} data |
||||
*/ |
||||
export function deleted (data) { |
||||
return axios({ |
||||
url: api.delete, |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
@ -0,0 +1,156 @@ |
||||
<template> |
||||
<a-card :bordered="false"> |
||||
<div class="card-title">{{ $route.meta.title }}</div> |
||||
<div class="table-operator"> |
||||
<a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button> |
||||
</div> |
||||
<s-table |
||||
ref="table" |
||||
rowKey="id" |
||||
:loading="isLoading" |
||||
:columns="columns" |
||||
:data="loadData" |
||||
:pageSize="15" |
||||
> |
||||
<!-- Banner图 --> |
||||
<span slot="image_url" slot-scope="text"> |
||||
<a title="点击查看原图" :href="text" target="_blank"> |
||||
<img height="50" :src="text" alt="封面图" /> |
||||
</a> |
||||
</span> |
||||
<!-- 状态 --> |
||||
<span slot="status" slot-scope="text"> |
||||
<a-tag :color="text == 10 ? 'green' : ''">{{ text ? '显示' : '隐藏' }}</a-tag> |
||||
</span> |
||||
|
||||
<!-- 操作 --> |
||||
<span slot="action" slot-scope="text, item"> |
||||
<a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a> |
||||
<a v-action:delete @click="handleDelete(item)">删除</a> |
||||
</span> |
||||
</s-table> |
||||
<AddForm ref="AddForm" @handleSubmit="handleRefresh" /> |
||||
<EditForm ref="EditForm" @handleSubmit="handleRefresh" /> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/content/banner' |
||||
import { STable } from '@/components' |
||||
import { AddForm, EditForm } from './modules' |
||||
|
||||
export default { |
||||
name: 'Index', |
||||
components: { |
||||
STable, |
||||
AddForm, |
||||
EditForm |
||||
}, |
||||
data () { |
||||
return { |
||||
// 查询参数 |
||||
queryParam: {}, |
||||
// 正在加载 |
||||
isLoading: false, |
||||
// 表头 |
||||
columns: [ |
||||
{ |
||||
title: 'ID', |
||||
dataIndex: 'id' |
||||
}, |
||||
{ |
||||
title: '名称', |
||||
dataIndex: 'name' |
||||
}, |
||||
{ |
||||
title: '图片', |
||||
dataIndex: 'image_url', |
||||
scopedSlots: { customRender: 'image_url' } |
||||
}, |
||||
{ |
||||
title: '跳转地址', |
||||
dataIndex: 'redirect_url' |
||||
}, |
||||
{ |
||||
title: '状态', |
||||
dataIndex: 'status', |
||||
scopedSlots: { customRender: 'status' } |
||||
}, |
||||
{ |
||||
title: '排序', |
||||
dataIndex: 'sort' |
||||
}, |
||||
{ |
||||
title: '创建时间', |
||||
width: '180px', |
||||
dataIndex: 'create_time' |
||||
}, |
||||
{ |
||||
title: '更新时间', |
||||
width: '180px', |
||||
dataIndex: 'update_time' |
||||
}, |
||||
{ |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
width: '180px', |
||||
scopedSlots: { customRender: 'action' } |
||||
} |
||||
], |
||||
// 加载数据方法 必须为 Promise 对象 |
||||
loadData: param => { |
||||
return Api.list({ ...param, ...this.queryParam }) |
||||
.then(response => { |
||||
return response.data.list |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
created () { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
// 新增记录 |
||||
handleAdd () { |
||||
this.$refs.AddForm.add() |
||||
}, |
||||
|
||||
// 编辑记录 |
||||
handleEdit (item) { |
||||
this.$refs.EditForm.edit(item) |
||||
}, |
||||
|
||||
// 删除记录 |
||||
handleDelete (item) { |
||||
const app = this |
||||
const modal = this.$confirm({ |
||||
title: '您确定要删除该记录吗?', |
||||
content: '删除后不可恢复', |
||||
onOk () { |
||||
return Api.deleted({ bannerId: item.id }) |
||||
.then(result => { |
||||
app.$message.success(result.message, 1.5) |
||||
app.handleRefresh() |
||||
}) |
||||
.finally(result => modal.destroy()) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
/** |
||||
* 刷新列表 |
||||
* @param Boolean bool 强制刷新到第一页 |
||||
*/ |
||||
handleRefresh (bool = false) { |
||||
this.$refs.table.refresh(bool) |
||||
}, |
||||
|
||||
// 检索查询 |
||||
onSearch () { |
||||
this.handleRefresh(true) |
||||
} |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,108 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="780" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="轮播图标题" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['name', { rules: [{ required: true, message: '请输入轮播图标题' }] }]" placeholder="请输入轮播图标题" /> |
||||
</a-form-item> |
||||
<a-form-item label="轮播图" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage |
||||
v-decorator="['image_id', { rules: [{ required: true, message: '请选择1个轮播图' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="跳转地址" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['redirect_url', { rules: [{ required: false, message: '请输入跳转地址' }] }]" placeholder="请输入跳转地址" /> |
||||
</a-form-item> |
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示"> |
||||
<a-radio-group v-decorator="['status', { initialValue: 10, rules: [{ required: true }] }]"> |
||||
<a-radio :value="10">显示</a-radio> |
||||
<a-radio :value="20">隐藏</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前"> |
||||
<a-input-number |
||||
:min="0" |
||||
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入排序值' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import pick from 'lodash.pick' |
||||
import * as Api from '@/api/content/banner' |
||||
import { SelectImage } from '@/components' |
||||
|
||||
export default { |
||||
components: { |
||||
SelectImage |
||||
}, |
||||
data () { |
||||
return { |
||||
// 对话框标题 |
||||
title: '新增轮播图', |
||||
// 标签布局属性 |
||||
labelCol: { span: 7 }, |
||||
// 输入框布局属性 |
||||
wrapperCol: { span: 13 }, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this) |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
// 显示对话框 |
||||
add () { |
||||
// 显示窗口 |
||||
this.visible = true |
||||
}, |
||||
|
||||
// 确认按钮 |
||||
handleSubmit (e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { form: { validateFields } } = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
!errors && this.onFormSubmit(values) |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel () { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit (values) { |
||||
this.confirmLoading = true |
||||
Api.add({ form: values }) |
||||
.then(result => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally(() => this.confirmLoading = false) |
||||
} |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,123 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="720" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="轮播图标题" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['name', { rules: [{ required: true, message: '请输入轮播图标题' }] }]" placeholder="请输入轮播图标题" /> |
||||
</a-form-item> |
||||
<a-form-item label="轮播图" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage |
||||
:defaultList="record.image ? [record.image] : []" |
||||
v-decorator="['image_id', { rules: [{ required: true, message: '请选择1个轮播图' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="跳转地址" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['redirect_url', { rules: [{ required: false, message: '请输入跳转地址' }] }]" placeholder="请输入跳转地址" /> |
||||
</a-form-item> |
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示"> |
||||
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]"> |
||||
<a-radio :value="10">显示</a-radio> |
||||
<a-radio :value="20">隐藏</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前"> |
||||
<a-input-number |
||||
:min="0" |
||||
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入排序值' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import pick from 'lodash.pick' |
||||
import * as Api from '@/api/content/banner' |
||||
import { SelectImage } from '@/components' |
||||
|
||||
export default { |
||||
components: { |
||||
SelectImage |
||||
}, |
||||
data () { |
||||
return { |
||||
// 对话框标题 |
||||
title: '编辑轮播图', |
||||
// 标签布局属性 |
||||
labelCol: { span: 7 }, |
||||
// 输入框布局属性 |
||||
wrapperCol: { span: 13 }, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 当前记录 |
||||
record: {} |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
// 显示对话框 |
||||
edit (record) { |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前记录 |
||||
this.record = record |
||||
// 设置默认值 |
||||
this.setFieldsValue() |
||||
}, |
||||
|
||||
// 设置默认值 |
||||
setFieldsValue () { |
||||
const { record, form: { setFieldsValue } } = this |
||||
this.$nextTick(() => { |
||||
setFieldsValue(pick(record, ['name', 'image_id', 'redirect_url', 'status', 'sort'])) |
||||
}) |
||||
}, |
||||
|
||||
// 确认按钮 |
||||
handleSubmit (e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { form: { validateFields } } = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
!errors && this.onFormSubmit(values) |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel () { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit (values) { |
||||
this.confirmLoading = true |
||||
Api.edit({ bannerId: this.record.id, form: values }) |
||||
.then(result => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally(() => this.confirmLoading = false) |
||||
} |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,4 @@ |
||||
import AddForm from './AddForm' |
||||
import EditForm from './EditForm' |
||||
|
||||
export { AddForm, EditForm } |
||||
Loading…
Reference in new issue