fanfan
6 months ago
parent
7386d1fc30
commit
74a30d7f91
@ -0,0 +1,105 @@ |
||||
<template> |
||||
<a-card :bordered="false"> |
||||
<div class="card-title">{{ $route.meta.title }}</div> |
||||
<a-table |
||||
rowKey="merchant_id" |
||||
:columns="columns" |
||||
:dataSource="shopList" |
||||
:defaultExpandAllRows="true" |
||||
:expandIconColumnIndex="1" |
||||
:pagination="pagination" |
||||
:loading="isLoading" |
||||
> |
||||
<span slot="logoImage" slot-scope="text, item"> |
||||
<a v-if="item.logoImage" title="点击查看原图" :href="item.logoImage.external_url" target="_blank"> |
||||
<img width="50" height="50" :src="item.logoImage.external_url" alt="商户logo" /> |
||||
</a> |
||||
</span> |
||||
<span slot="action" slot-scope="text, item"> |
||||
<template> |
||||
<a v-action:edit style="margin-right: 8px" @click="handleEdit(item)">编辑</a> |
||||
<!-- <a v-action:delete @click="handleDelete(item)">删除</a> --> |
||||
</template> |
||||
</span> |
||||
</a-table> |
||||
<EditForm ref="EditForm" @handleSubmit="handleRefresh" /> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/store' |
||||
import { STable } from '@/components' |
||||
import EditForm from './modules/channelEdit.vue' |
||||
|
||||
export default { |
||||
components: { |
||||
STable, |
||||
EditForm |
||||
}, |
||||
data() { |
||||
return { |
||||
shopList: [], |
||||
// 表头 |
||||
columns: [ |
||||
{ |
||||
title: '商户logo', |
||||
dataIndex: 'logoImage', |
||||
scopedSlots: { customRender: 'logoImage' } |
||||
}, |
||||
{ |
||||
title: '商户名称', |
||||
dataIndex: 'shop_name' |
||||
}, |
||||
{ |
||||
title: '商户标签', |
||||
dataIndex: 'shop_label' |
||||
}, |
||||
{ |
||||
title: '渠道名称', |
||||
dataIndex: 'name' |
||||
}, |
||||
{ |
||||
title: '渠道别名', |
||||
dataIndex: 'alias' |
||||
}, |
||||
{ |
||||
title: '添加时间', |
||||
dataIndex: 'create_time' |
||||
}, |
||||
{ |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
width: '180px', |
||||
scopedSlots: { customRender: 'action' } |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
created() { |
||||
// 获取分类列表 |
||||
this.getShopList() |
||||
}, |
||||
methods: { |
||||
// 编辑商户 |
||||
async handleEdit(record) { |
||||
// 显示对话框 |
||||
this.$refs.EditForm.add(record) |
||||
}, |
||||
// 刷新列表 |
||||
handleRefresh () { |
||||
// 获取分类列表 |
||||
this.getShopList() |
||||
}, |
||||
// 获取商户列表 |
||||
getShopList() { |
||||
this.isLoading = true |
||||
Api.channelList() |
||||
.then((result) => { |
||||
this.shopList = result.data.list.data |
||||
this.isLoading = false |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,133 @@ |
||||
<template> |
||||
<a-modal title="新增商户" :width="920" :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="info.logoImage ? [info.logoImage] : []" v-decorator="['logo_image_id', { rules: [{ required: true, message: '请上传图片' }] }]" /> |
||||
</a-form-item> |
||||
<a-form-item label="商户名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['shop_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" /> |
||||
</a-form-item> |
||||
<a-form-item label="商户标签" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['shop_label', { rules: [{ required: true, min: 2, max: 10, message: '请输入2-10个字符' }] }]" /> |
||||
</a-form-item> |
||||
<a-form-item label="营业执照" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage multiple :defaultList="info.licenseImg ? info.licenseImg : []" v-decorator="['license_img_id', { rules: [{ required: true, message: '请上传营业执照' }]}]" /> |
||||
</a-form-item> |
||||
<a-form-item label="店铺评分" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select style="width: 300px" v-decorator="['score', { rules: [{ required: true, message: '请选择评分' }] }]" placeholder="请选择评分"> |
||||
<a-select-option v-for="(item, index) in 5" :key="index" :value="item">{{ item }}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/store' |
||||
import { SelectImage } from '@/components' |
||||
export default { |
||||
components: { |
||||
SelectImage |
||||
}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data() { |
||||
return { |
||||
accountList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7 |
||||
}, |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13 |
||||
}, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
info: {} |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
add(info) { |
||||
console.log(info) |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前分类记录 |
||||
this.info = info |
||||
// 设置默认值 |
||||
this.setFieldsValue() |
||||
}, |
||||
|
||||
// 设置默认值 |
||||
setFieldsValue() { |
||||
const { |
||||
form: { setFieldsValue } |
||||
} = this |
||||
// 设置表单内容 |
||||
this.$nextTick(() => { |
||||
setFieldsValue( |
||||
// eslint-disable-next-line no-undef |
||||
_.pick(this.info, [ |
||||
'logo', |
||||
'shop_name', |
||||
'shop_label', |
||||
'logo_image_id', |
||||
'score', |
||||
'user_name', |
||||
'commission_ratio', |
||||
'is_select_mechant' |
||||
]) |
||||
) |
||||
}) |
||||
}, |
||||
// 确认按钮 |
||||
handleSubmit(e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields } |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
if (!errors) { |
||||
this.onFormSubmit(values) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit(values) { |
||||
this.confirmLoading = true |
||||
Api.channelEdit({ id:this.info['id'], form: {alias: this.info['alias'],name: this.info['name'], ...values, license_img_id: (values.license_img_id && (Array.isArray(values.license_img_id) ? values.license_img_id.join(',') : values.license_img_id)) || '' }}) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally((result) => { |
||||
this.confirmLoading = false |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
Loading…
Reference in new issue