Wayne
11 months ago
parent
a54300ef0d
commit
63488101a9
@ -0,0 +1,301 @@ |
||||
<template> |
||||
<a-card :bordered="false"> |
||||
<div class="card-title">{{ $route.meta.title }}</div> |
||||
<div class="table-operator"> |
||||
<!-- 搜索板块 --> |
||||
<!-- <a-row class="row-item-search"> |
||||
<a-form class="search-form" layout="inline"> |
||||
<a-form-item label="回收名称"> |
||||
<a-input v-model="queryParam.recovery_name" placeholder="请输入回收名称" /> |
||||
</a-form-item> |
||||
<a-form-item label="回收分类"> |
||||
<a-select v-model="queryParam.category_id"> |
||||
<a-select-option :value="0">全部</a-select-option> |
||||
<a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.category_id">{{ |
||||
item.name |
||||
}}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
<a-form-item class="search-btn"> |
||||
<a-button type="primary" icon="search" @click="handleSearch">搜索</a-button> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-row> --> |
||||
<!-- 操作板块 --> |
||||
<!-- <div class="row-item-tab clearfix"> |
||||
<div class="tab-list fl-l"> |
||||
<a-radio-group :defaultValue="queryParam.status" @change="handleTabs"> |
||||
<a-radio-button value="0">全部</a-radio-button> |
||||
<a-radio-button value="1">出售中</a-radio-button> |
||||
<a-radio-button value="2">已下架</a-radio-button> |
||||
</a-radio-group> |
||||
</div> |
||||
<a-button |
||||
v-if="$auth('/goods/create')" |
||||
class="fl-l" |
||||
type="primary" |
||||
icon="plus" |
||||
@click="handleCreate()" |
||||
>新增回收</a-button |
||||
> |
||||
<div v-if="selectedRowKeys.length" class="button-group"> |
||||
<a-button-group class="ml-10"> |
||||
<a-button v-action:status icon="arrow-up" @click="handleUpdateStatus(selectedRowKeys, true)">上架</a-button> |
||||
<a-button |
||||
v-action:status |
||||
icon="arrow-down" |
||||
@click="handleUpdateStatus(selectedRowKeys, false)" |
||||
>下架</a-button |
||||
> |
||||
<a-button v-action:delete icon="delete" @click="handleDelete(selectedRowKeys)">删除</a-button> |
||||
</a-button-group> |
||||
</div> |
||||
</div> --> |
||||
</div> |
||||
<s-table |
||||
ref="table" |
||||
rowKey="recovery_id" |
||||
:loading="isLoading" |
||||
:columns="columns" |
||||
:data="loadData" |
||||
:rowSelection="rowSelection" |
||||
:pageSize="15" |
||||
> |
||||
<!-- 回收图片 --> |
||||
<span slot="recovery_image" slot-scope="text, item"> |
||||
<a title="点击查看原图" :href="item.image.external_url" target="_blank"> |
||||
<img width="50" height="50" :src="item.image.external_url" alt="回收图片" /> |
||||
</a> |
||||
</span> |
||||
<!-- 回收名称 --> |
||||
<span slot="recovery_name" slot-scope="text"> |
||||
<p class="twoline-hide">{{ text }}</p> |
||||
</span> |
||||
|
||||
<!-- 回收状态 --> |
||||
<span slot="status" slot-scope="text, item"> |
||||
<a-tag |
||||
class="cur-p" |
||||
:color="text == 1 ? 'green' : 'red'" |
||||
@click="handleUpdateStatus([item.recovery_id], text != 1)" |
||||
>{{ text == 1 ? '上架' : '下架' }}</a-tag |
||||
> |
||||
</span> |
||||
<!-- 操作项 --> |
||||
<span class="actions" slot="action" slot-scope="text, item"> |
||||
<a v-action:edit style="margin-right: 8px" @click="handleEdit(item)">编辑</a> |
||||
<a v-action:delete icon="delete" @click="handleDelete([item.recovery_id])">删除</a> |
||||
</span> |
||||
</s-table> |
||||
<add ref="AddRef" @handleSubmit="handleRefresh" /> |
||||
<edit ref="EditRef" @handleSubmit="handleRefresh" /> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server/recovery' |
||||
import { ContentHeader, STable } from '@/components' |
||||
import Add from './modules/Add' |
||||
import Edit from './modules/Edit' |
||||
// 表格表头 |
||||
const columns = [ |
||||
{ |
||||
title: '订单号', |
||||
dataIndex: 'order_no' |
||||
}, |
||||
{ |
||||
title: '回收ID', |
||||
dataIndex: 'recovery_id' |
||||
}, |
||||
{ |
||||
title: '回收名称', |
||||
dataIndex: 'recovery_name', |
||||
scopedSlots: { customRender: 'recovery_name' } |
||||
}, |
||||
{ |
||||
title: '回收类型', |
||||
dataIndex: 'recovery_type_text', |
||||
scopedSlots: { customRender: 'recovery_type_text' } |
||||
}, |
||||
{ |
||||
title: '姓名', |
||||
dataIndex: 'username' |
||||
}, |
||||
{ |
||||
title: '服务时间', |
||||
width: '180px', |
||||
dataIndex: 'server_time' |
||||
}, |
||||
{ |
||||
title: '手机号', |
||||
width: '180px', |
||||
dataIndex: 'mobile' |
||||
}, |
||||
{ |
||||
title: '期待价格', |
||||
width: '180px', |
||||
dataIndex: 'expect_price' |
||||
}, |
||||
{ |
||||
title: '添加时间', |
||||
width: '180px', |
||||
dataIndex: 'create_time' |
||||
}, |
||||
{ |
||||
title: '状态', |
||||
dataIndex: 'order_status_text', |
||||
scopedSlots: { customRender: 'order_status_text' } |
||||
} |
||||
// { |
||||
// title: '操作', |
||||
// dataIndex: 'action', |
||||
// width: '150px', |
||||
// scopedSlots: { customRender: 'action' } |
||||
// } |
||||
] |
||||
|
||||
export default { |
||||
name: 'Index', |
||||
components: { |
||||
ContentHeader, |
||||
STable, |
||||
Add, |
||||
Edit |
||||
}, |
||||
data () { |
||||
return { |
||||
// 当前表单元素 |
||||
searchForm: this.$form.createForm(this), |
||||
// 商品分类列表 |
||||
categoryList: [], |
||||
// 查询参数 |
||||
queryParam: { |
||||
// status: '0', |
||||
// recovery_name: '', |
||||
// category_id: '', |
||||
// page: 1, |
||||
}, |
||||
// 正在加载 |
||||
isLoading: false, |
||||
// 表头 |
||||
columns, |
||||
// 选择的元素 |
||||
selectedRowKeys: [], |
||||
// 加载数据方法 必须为 Promise 对象 |
||||
loadData: (param) => { |
||||
// const requestParameters = Object.assign({}, param, this.queryParam) |
||||
return Api.orderList({ ...param, ...this.queryParam }).then((response) => { |
||||
return response.data.list |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
created () { |
||||
// 默认的查询参数 |
||||
if (this.$route.query.status) { |
||||
this.queryParam.status = this.$route.query.status |
||||
} |
||||
// 获取服务分类列表 |
||||
this.getCategoryList() |
||||
}, |
||||
computed: { |
||||
rowSelection () { |
||||
return { |
||||
selectedRowKeys: this.selectedRowKeys, |
||||
onChange: this.onSelectChange |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
// 选中项发生变化时的回调 |
||||
onSelectChange (selectedRowKeys) { |
||||
this.selectedRowKeys = selectedRowKeys |
||||
}, |
||||
|
||||
// 切换tab |
||||
handleTabs (e) { |
||||
this.queryParam.status = e.target.value |
||||
this.handleRefresh(true) |
||||
}, |
||||
|
||||
// 确认搜索 |
||||
handleSearch (e) { |
||||
this.handleRefresh(true) |
||||
}, |
||||
|
||||
// 重置搜索表单 |
||||
handleReset () { |
||||
this.searchForm.resetFields() |
||||
}, |
||||
|
||||
// 获取分类列表 |
||||
getCategoryList () { |
||||
this.isLoading = true |
||||
Api.categoryList() |
||||
.then((result) => { |
||||
this.categoryList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
|
||||
// 修改服务状态(上下架) |
||||
handleUpdateStatus (recoveryIds, state = true) { |
||||
this.isLoading = true |
||||
Api.recoveryStatus({ recoveryIds, state }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
this.handleRefresh() |
||||
}) |
||||
.finally((result) => { |
||||
this.isLoading = false |
||||
}) |
||||
}, |
||||
|
||||
// 删除记录 |
||||
handleDelete (serverId) { |
||||
const app = this |
||||
const modal = this.$confirm({ |
||||
title: '您确定要删除该记录吗?', |
||||
content: '删除后不可恢复', |
||||
onOk () { |
||||
return Api.deleteRecovery({ serverId }) |
||||
.then((result) => { |
||||
app.$message.success(result.message, 1.5) |
||||
app.handleRefresh() |
||||
}) |
||||
.finally((result) => modal.destroy()) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 新增记录 |
||||
handleCreate () { |
||||
this.$refs.AddRef.add() |
||||
}, |
||||
// 编辑记录 |
||||
async handleEdit (record) { |
||||
console.log('🚀 ~ file: Index.vue:273 ~ handleEdit ~ record:', record) |
||||
// 显示对话框 |
||||
this.$refs.EditRef.edit(record) |
||||
}, |
||||
/** |
||||
* 刷新列表 |
||||
* @param Boolean bool 强制刷新到第一页 |
||||
*/ |
||||
handleRefresh (bool = false) { |
||||
this.selectedRowKeys = [] |
||||
this.$refs.table.refresh(bool) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.ant-card-body { |
||||
padding: 22px 29px 25px; |
||||
} |
||||
// 筛选tab |
||||
.tab-list { |
||||
margin-right: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,162 @@ |
||||
<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"> |
||||
<a-input |
||||
v-decorator="['recovery_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="回收分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select |
||||
v-decorator="['category_id', { initialValue: 0, rules: [{ required: true, message: '请选择分类' }] }]" |
||||
> |
||||
<a-select-option :value="0">选择分类</a-select-option> |
||||
<a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.category_id">{{ |
||||
item.name |
||||
}}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
<a-form-item label="评论数量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="10" |
||||
:step="10" |
||||
v-decorator="['comment_num', { initialValue: 10, rules: [{ required: true, message: '请输入评论数量' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="好评率" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="90" |
||||
:step="1" |
||||
:max="100" |
||||
v-decorator="['comment_rate', { initialValue: 90, rules: [{ required: true, message: '请输入好评率' }] }]" |
||||
/> |
||||
<span class="ml-10">%</span> |
||||
</a-form-item> |
||||
<a-form-item label="销量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="100" |
||||
v-decorator="['sold', { initialValue: 100, rules: [{ required: true, message: '请输入销量价格' }] }]" |
||||
/> |
||||
<span class="ml-10">个</span> |
||||
</a-form-item> |
||||
<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-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]"> |
||||
<a-radio :value="1">上架</a-radio> |
||||
<a-radio :value="2">下架</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: '请输入至少1个数字' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="详情" :labelCol="labelCol" :wrapperCol="{ span: 16 }"> |
||||
<Ueditor v-decorator="['content', { rules: [{ required: true, message: '详情不能为空' }] }]" /> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server/recovery' |
||||
import { SelectImage, Ueditor } from '@/components' |
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
Ueditor, |
||||
}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data() { |
||||
return { |
||||
categoryList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7, |
||||
}, |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13, |
||||
}, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
add() { |
||||
// 显示窗口 |
||||
this.getCategoryList() |
||||
this.visible = true |
||||
}, |
||||
// 获取分类列表 |
||||
getCategoryList() { |
||||
this.isLoading = true |
||||
Api.categoryList() |
||||
.then((result) => { |
||||
this.categoryList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 确认按钮 |
||||
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.addRecovery({ form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally((result) => { |
||||
this.confirmLoading = false |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
@ -0,0 +1,190 @@ |
||||
<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"> |
||||
<a-input |
||||
v-decorator="['recovery_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="回收分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select |
||||
v-decorator="['category_id', { initialValue: 0, rules: [{ required: true, message: '请选择分类' }] }]" |
||||
> |
||||
<a-select-option :value="0">选择分类</a-select-option> |
||||
<a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.category_id">{{ |
||||
item.name |
||||
}}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
<a-form-item label="评论数量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="10" |
||||
:step="10" |
||||
v-decorator="['comment_num', { initialValue: 10, rules: [{ required: true, message: '请输入评论数量' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="好评率" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="90" |
||||
:step="1" |
||||
:max="100" |
||||
v-decorator="['comment_rate', { initialValue: 90, rules: [{ required: true, message: '请输入好评率' }] }]" |
||||
/> |
||||
<span class="ml-10">%</span> |
||||
</a-form-item> |
||||
<a-form-item label="销量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="10" |
||||
v-decorator="['sold', { initialValue: 10, rules: [{ required: true, message: '请输入销量价格' }] }]" |
||||
/> |
||||
<span class="ml-10">个</span> |
||||
</a-form-item> |
||||
<a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage :defaultList="record.image ? [record.image] : []" v-decorator="['image_id']" /> |
||||
</a-form-item> |
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]"> |
||||
<a-radio :value="1">上架</a-radio> |
||||
<a-radio :value="2">下架</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: '请输入至少1个数字' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="详情" :labelCol="labelCol" :wrapperCol="{ span: 16 }"> |
||||
<Ueditor v-decorator="['content', { rules: [{ required: true, message: '详情不能为空' }] }]" /> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server/recovery' |
||||
import { SelectImage, Ueditor } from '@/components' |
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
Ueditor, |
||||
}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data() { |
||||
return { |
||||
categoryList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7, |
||||
}, |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13, |
||||
}, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 当前记录 |
||||
record: {}, |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
edit(record) { |
||||
this.getCategoryList() |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前分类记录 |
||||
this.record = record |
||||
// 设置默认值 |
||||
this.setFieldsValue() |
||||
}, |
||||
// 获取分类列表 |
||||
getCategoryList() { |
||||
this.isLoading = true |
||||
Api.categoryList() |
||||
.then((result) => { |
||||
this.categoryList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 设置默认值 |
||||
setFieldsValue() { |
||||
const { |
||||
form: { setFieldsValue }, |
||||
} = this |
||||
// 设置表单内容 |
||||
this.$nextTick(() => { |
||||
setFieldsValue( |
||||
_.pick(this.record, [ |
||||
'recovery_name', |
||||
'image_id', |
||||
'category_id', |
||||
'status', |
||||
'sold', |
||||
'comment_rate', |
||||
'sort', |
||||
'comment_num', |
||||
'content', |
||||
]) |
||||
) |
||||
}) |
||||
}, |
||||
// 确认按钮 |
||||
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.editRecovery({ recoveryId: this.record['recovery_id'], form: values }) |
||||
.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