Wayne
1 year ago
parent
3715f7cb6c
commit
170b2141e4
@ -0,0 +1,54 @@ |
||||
import { axios } from '@/utils/request' |
||||
|
||||
// api接口列表
|
||||
const api = { |
||||
list: '/shop.comment/list', |
||||
add: '/shop.comment/add', |
||||
edit: '/shop.comment/edit', |
||||
delete: '/shop.comment/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,108 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="780" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="评论图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage |
||||
v-decorator="['image_id', { rules: [{ required: true, message: '请选择评论图片' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<a-form-item label="用户昵称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['nickname', { rules: [{ required: true, message: '请输入用户昵称' }] }]" placeholder="请输入用户昵称" /> |
||||
</a-form-item> |
||||
<a-form-item label="评论内容" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-textarea |
||||
v-decorator="['content', { rules: [{ required: true, message: '请输入评论内容' }] }]" |
||||
placeholder="请输入评论内容" |
||||
:auto-size="{ minRows: 6, maxRows: 12 }" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import pick from 'lodash.pick' |
||||
import * as Api from '@/api/store/shop/comment' |
||||
import { SelectImage, SelectGoods } from '@/components' |
||||
|
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
SelectGoods |
||||
}, |
||||
data () { |
||||
return { |
||||
// 对话框标题 |
||||
title: '新增评论', |
||||
// 标签布局属性 |
||||
labelCol: { span: 7 }, |
||||
// 输入框布局属性 |
||||
wrapperCol: { span: 13 }, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
|
||||
shopId: null |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
// 显示对话框 |
||||
add (shopId) { |
||||
// 显示窗口 |
||||
this.visible = true |
||||
|
||||
// 活动 Id |
||||
this.shopId = shopId |
||||
}, |
||||
|
||||
// 确认按钮 |
||||
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, shop_id: this.shopId } }) |
||||
.then(result => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally(() => this.confirmLoading = false) |
||||
} |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,120 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="780" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="评论图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage |
||||
:defaultList="record.file ? [record.file] : []" |
||||
v-decorator="['image_id', { rules: [{ required: true, message: '请选择评论图片' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<a-form-item label="用户昵称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['nickname', { rules: [{ required: true, message: '请输入用户昵称' }] }]" placeholder="请输入用户昵称" /> |
||||
</a-form-item> |
||||
<a-form-item label="评论内容" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-textarea |
||||
v-decorator="['content', { rules: [{ required: true, message: '请输入评论内容' }] }]" |
||||
placeholder="请输入评论内容" |
||||
:auto-size="{ minRows: 6, maxRows: 12 }" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import pick from 'lodash.pick' |
||||
import * as Api from '@/api/store/shop/comment' |
||||
import { SelectImage, SelectGoods } from '@/components' |
||||
|
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
SelectGoods |
||||
}, |
||||
data () { |
||||
return { |
||||
// 对话框标题 |
||||
title: '编辑评论', |
||||
// 标签布局属性 |
||||
labelCol: { span: 7 }, |
||||
// 输入框布局属性 |
||||
wrapperCol: { span: 13 }, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 当前记录 |
||||
record: {} |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
// 显示对话框 |
||||
async edit (record) { |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前记录 |
||||
this.record = record |
||||
// 设置默认值 |
||||
this.setFieldsValue() |
||||
}, |
||||
|
||||
// 设置默认值 |
||||
setFieldsValue () { |
||||
const { record, form: { setFieldsValue } } = this |
||||
this.$nextTick(() => { |
||||
setFieldsValue(pick(record, ['nickname', 'content', 'image_id'])) |
||||
}) |
||||
}, |
||||
|
||||
// 确认按钮 |
||||
handleSubmit (e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { form: { validateFields } } = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
!errors && this.onFormSubmit(values) |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel () { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
|
||||
this.record = {} |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit (values) { |
||||
this.confirmLoading = true |
||||
Api.edit({ commentId: 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,169 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="900" |
||||
:visible="visible" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
:footer="null" |
||||
@cancel="handleCancel" |
||||
> |
||||
<div class="table-operator"> |
||||
<a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button> |
||||
</div> |
||||
<div class="table-wrapper"> |
||||
<s-table |
||||
ref="table" |
||||
rowKey="id" |
||||
:loading="isLoading" |
||||
:columns="columns" |
||||
:data="loadData" |
||||
:pageSize="15" |
||||
> |
||||
<span slot="image" slot-scope="text"> |
||||
<a title="点击查看原图" :href="text" target="_blank"> |
||||
<img height="50" :src="text" alt="栏目背景图" /> |
||||
</a> |
||||
</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> |
||||
</div> |
||||
<AddForm ref="AddForm" @handleSubmit="handleRefresh" /> |
||||
<EditForm ref="EditForm" @handleSubmit="handleRefresh" /> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import pick from 'lodash.pick' |
||||
import * as Api from '@/api/store/shop/comment' |
||||
import { STable } from '@/components' |
||||
import AddForm from './AddForm' |
||||
import EditForm from './EditForm' |
||||
|
||||
export default { |
||||
components: { |
||||
STable, |
||||
AddForm, |
||||
EditForm |
||||
}, |
||||
data () { |
||||
return { |
||||
// 对话框标题 |
||||
title: '评论管理', |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// 当前记录ID |
||||
shopId: null, |
||||
// 查询参数 |
||||
queryParam: {}, |
||||
// 正在加载 |
||||
isLoading: false, |
||||
// 表头 |
||||
columns: [ |
||||
{ |
||||
title: '评论ID', |
||||
dataIndex: 'id' |
||||
}, |
||||
{ |
||||
title: '评论图片', |
||||
dataIndex: 'image', |
||||
scopedSlots: { customRender: 'image' } |
||||
}, |
||||
{ |
||||
title: '用户昵称', |
||||
dataIndex: 'nickname' |
||||
}, |
||||
{ |
||||
title: '评论内容', |
||||
dataIndex: 'content' |
||||
}, |
||||
{ |
||||
title: '创建时间', |
||||
width: '180px', |
||||
dataIndex: 'create_time' |
||||
}, |
||||
{ |
||||
title: '更新时间', |
||||
width: '180px', |
||||
dataIndex: 'update_time' |
||||
}, |
||||
{ |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
width: '120px', |
||||
scopedSlots: { customRender: 'action' } |
||||
} |
||||
], |
||||
// 加载数据方法 必须为 Promise 对象 |
||||
loadData: param => { |
||||
return Api.list({ ...param, ...this.queryParam }) |
||||
.then(response => { |
||||
return response.data.list |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
// 新增记录 |
||||
handleAdd () { |
||||
this.$refs.AddForm.add(this.shopId) |
||||
}, |
||||
|
||||
// 编辑记录 |
||||
handleEdit (item) { |
||||
this.$refs.EditForm.edit(item) |
||||
}, |
||||
|
||||
// 删除记录 |
||||
handleDelete (item) { |
||||
const app = this |
||||
const modal = this.$confirm({ |
||||
title: '您确定要删除该记录吗?', |
||||
content: '删除后不可恢复', |
||||
onOk () { |
||||
return Api.deleted({ commentId: item.id }) |
||||
.then(result => { |
||||
app.$message.success(result.message, 1.5) |
||||
app.handleRefresh() |
||||
}) |
||||
.finally(result => modal.destroy()) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
visibleComment (shopId) { |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前记录ID |
||||
this.shopId = shopId |
||||
|
||||
this.queryParam = { shop_id: shopId } |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel () { |
||||
this.visible = false |
||||
}, |
||||
|
||||
/** |
||||
* 刷新列表 |
||||
* @param Boolean bool 强制刷新到第一页 |
||||
*/ |
||||
handleRefresh (bool = false) { |
||||
this.$refs.table.refresh(bool) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.table-wrapper { |
||||
width: 100%; |
||||
overflow-x: auto; |
||||
padding-bottom: 20px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue