wangmingchuan
/
yanzong_vue_store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
feature/0423
Wayne 11 months ago
parent a54300ef0d
commit 63488101a9
6 changed files with 669 additions and 11 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      src/config/router.config.js
  2. 301
      src/views/recovery/order/Index.vue
  3. 162
      src/views/recovery/order/modules/Add.vue
  4. 190
      src/views/recovery/order/modules/Edit.vue
  5. 6
      src/views/store/shop/Create.vue
  6. 16
      src/views/store/shop/Update.vue

5
src/config/router.config.js
Unescape View File

@ -181,6 +181,11 @@ export const asyncRouterMap = [
component: () => import(/* webpackChunkName: "server" */ '@/views/recovery/Index'), component: () => import(/* webpackChunkName: "server" */ '@/views/recovery/Index'),
meta: { title: '回收列表', keepAlive: false, permission: ['/recovery/index'] }, meta: { title: '回收列表', keepAlive: false, permission: ['/recovery/index'] },
}, },
{
path: '/recovery/order/index',
component: () => import(/* webpackChunkName: "server" */ '@/views/recovery/order/Index'),
meta: { title: '回收订单', keepAlive: false, permission: ['/recovery/order/index'] },
},
], ],
}, },
// 服务管理 // 服务管理

301
src/views/recovery/order/Index.vue
Unescape View File

@ -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>

162
src/views/recovery/order/modules/Add.vue
Unescape View File

@ -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>

190
src/views/recovery/order/modules/Edit.vue
Unescape View File

@ -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>

6
src/views/store/shop/Create.vue
Unescape View File

@ -92,7 +92,7 @@
v-decorator="[`historysTime${index}`, { rules: [{ required: true, message: '请指定日期' }] }]" v-decorator="[`historysTime${index}`, { rules: [{ required: true, message: '请指定日期' }] }]"
style="width: 30%; margin-right: 8px" style="width: 30%; margin-right: 8px"
/> />
<a-input placeholder="请输入门店历史" v-decorator="[`historysContent${index}`, { rules: [{ required: true }] }]" style="width: 30%; margin-right: 8px" /> <a-input placeholder="请输入门店历史" v-decorator="[`historysContenmt${index}`, { rules: [{ required: true }] }]" style="width: 30%; margin-right: 8px" />
<a-icon <a-icon
v-if="form.getFieldValue('historys').length > 0" v-if="form.getFieldValue('historys').length > 0"
class="dynamic-delete-button" class="dynamic-delete-button"
@ -249,7 +249,7 @@ export default {
handleAddHistory () { handleAddHistory () {
const { form } = this const { form } = this
const keys = form.getFieldValue('historys') const keys = form.getFieldValue('historys')
const nextKeys = keys.concat([{ historysTime: '', historysContent: '', id: this.generateRandomString(8) }]) const nextKeys = keys.concat([{ historysTime: '', historysContenmt: '', id: this.generateRandomString(8) }])
form.setFieldsValue({ form.setFieldsValue({
historys: nextKeys historys: nextKeys
}) })
@ -279,7 +279,7 @@ export default {
form.history = form.historys.map((x, i) => { form.history = form.historys.map((x, i) => {
return { return {
time: form[`historysTime${i}`] && form[`historysTime${i}`].format('YYYY-MM-DD'), time: form[`historysTime${i}`] && form[`historysTime${i}`].format('YYYY-MM-DD'),
content: form[`historysContent${i}`] contenmt: form[`historysContenmt${i}`]
} }
}) })

16
src/views/store/shop/Update.vue
Unescape View File

@ -95,7 +95,7 @@
v-decorator="[`historysTime${index}`, { rules: [{ required: true, message: '请指定日期' }] }]" v-decorator="[`historysTime${index}`, { rules: [{ required: true, message: '请指定日期' }] }]"
style="width: 30%; margin-right: 8px" style="width: 30%; margin-right: 8px"
/> />
<a-input placeholder="请输入门店历史" v-decorator="[`historysContent${index}`, { rules: [{ required: true }] }]" style="width: 30%; margin-right: 8px" /> <a-input placeholder="请输入门店历史" v-decorator="[`historysContenmt${index}`, { rules: [{ required: true }] }]" style="width: 30%; margin-right: 8px" />
<a-icon <a-icon
v-if="form.getFieldValue('historys').length > 0" v-if="form.getFieldValue('historys').length > 0"
class="dynamic-delete-button" class="dynamic-delete-button"
@ -255,7 +255,7 @@ export default {
setFieldsValue () { setFieldsValue () {
const { record, form, $nextTick } = this const { record, form, $nextTick } = this
const timeAry = [] const timeAry = []
const contentAry = [] const contenmtAry = []
if (record.history) { if (record.history) {
record.history = JSON.parse(record.history) record.history = JSON.parse(record.history)
record.historys = record.history.map(x => { record.historys = record.history.map(x => {
@ -265,13 +265,13 @@ export default {
record.historys.forEach((x, i) => { record.historys.forEach((x, i) => {
x.time && (record[`historysTime${i}`] = moment(new Date(x.time))) x.time && (record[`historysTime${i}`] = moment(new Date(x.time)))
record[`historysContent${i}`] = x.content record[`historysContenmt${i}`] = x.contenmt
timeAry.push(`historysTime${i}`) timeAry.push(`historysTime${i}`)
contentAry.push(`historysContent${i}`) contenmtAry.push(`historysContenmt${i}`)
this.form.getFieldDecorator(`historysTime${i}`, { initialValue: '', preserve: true }) this.form.getFieldDecorator(`historysTime${i}`, { initialValue: '', preserve: true })
this.form.getFieldDecorator(`historysContent${i}`, { initialValue: '', preserve: true }) this.form.getFieldDecorator(`historysContenmt${i}`, { initialValue: '', preserve: true })
}) })
} }
@ -280,7 +280,7 @@ export default {
form.setFieldsValue(pick(record, [ form.setFieldsValue(pick(record, [
'shop_name', 'logo_image_id', 'linkman', 'phone', 'shop_name', 'logo_image_id', 'linkman', 'phone',
'shop_hours', 'address', 'summary', 'cascader', 'shop_hours', 'address', 'summary', 'cascader',
'coordinate', 'sort', 'is_check', 'status', 'is_main', 'historys', ...timeAry, ...contentAry 'coordinate', 'sort', 'is_check', 'status', 'is_main', 'historys', ...timeAry, ...contenmtAry
])) ]))
}) })
@ -314,7 +314,7 @@ export default {
const { form } = this const { form } = this
const keys = form.getFieldValue('historys') const keys = form.getFieldValue('historys')
const nextKeys = keys.concat([{ historysTime: '', historysContent: '', id: this.generateRandomString(8) }]) const nextKeys = keys.concat([{ historysTime: '', historysContenmt: '', id: this.generateRandomString(8) }])
form.setFieldsValue({ form.setFieldsValue({
historys: nextKeys historys: nextKeys
}) })
@ -344,7 +344,7 @@ export default {
form.history = form.historys.map((x, i) => { form.history = form.historys.map((x, i) => {
return { return {
time: form[`historysTime${i}`] && form[`historysTime${i}`].format('YYYY-MM-DD'), time: form[`historysTime${i}`] && form[`historysTime${i}`].format('YYYY-MM-DD'),
content: form[`historysContent${i}`] contenmt: form[`historysContenmt${i}`]
} }
}) })

Write Preview
Loading…
Cancel
Save