diff --git a/src/api/server/recovery.js b/src/api/server/recovery.js index e7d74fa..00f77f0 100644 --- a/src/api/server/recovery.js +++ b/src/api/server/recovery.js @@ -15,6 +15,8 @@ const api = { orderList: '/recovery/orderList', cancelOrder: '/recovery/cancelOrder', orderStatus: '/recovery/orderStatus', + orderDetail: '/recovery/orderDetail', + completeOrder: '/recovery/completeOrder', } /** * 回收列表记录 @@ -157,3 +159,25 @@ export function orderStatusList(data) { data, }) } +/** + * 订单详情 + * @param {*} data + */ +export function orderDetail(data) { + return axios({ + url: api.orderDetail, + method: 'post', + data, + }) +} +/** + * 订单验收 + * @param {*} data + */ +export function completeOrder(data) { + return axios({ + url: api.completeOrder, + method: 'post', + data, + }) +} diff --git a/src/config/router.config.js b/src/config/router.config.js index eac650c..06fd31c 100644 --- a/src/config/router.config.js +++ b/src/config/router.config.js @@ -186,6 +186,12 @@ export const asyncRouterMap = [ component: () => import(/* webpackChunkName: "server" */ '@/views/recovery/order/Index'), meta: { title: '回收订单', keepAlive: false, permission: ['/recovery/order/index'] }, }, + { + path: '/recovery/order/Detail', + component: () => import('@/views/recovery/order/Detail'), + meta: { title: '订单详情', keepAlive: false, permission: ['/recovery/orderDetail'] }, + hidden: true, + }, ], }, // 服务管理 diff --git a/src/views/recovery/order/Detail.vue b/src/views/recovery/order/Detail.vue new file mode 100644 index 0000000..e22e6d0 --- /dev/null +++ b/src/views/recovery/order/Detail.vue @@ -0,0 +1,323 @@ +<template> + <div> + <!-- 加载中 --> + <a-spin :spinning="isLoading" /> + <!-- 订单内容 --> + <div v-if="!isLoading" class="order-content"> + <!-- 订单信息 --> + <a-card class="mt-20" :bordered="false"> + <!-- 订单信息 --> + <a-descriptions title="订单信息"> + <a-descriptions-item label="订单号">{{ record.order_no }}</a-descriptions-item> + <a-descriptions-item label="期望价格">¥{{ record.expect_price }}</a-descriptions-item> + <a-descriptions-item label="实际价格">¥{{ record.real_price }}</a-descriptions-item> + <a-descriptions-item label="回收方式">{{ record.recovery_type_text }}</a-descriptions-item> + <a-descriptions-item label="订单状态"> + {{ record.order_status_text }} + </a-descriptions-item> + <a-descriptions-item label="买家信息"> + <a-tooltip> + <template slot="title">会员ID: {{ record.user.user_id }}</template> + <span class="c-p">{{ record.user.nick_name }}</span> + </a-tooltip> + </a-descriptions-item> + <a-descriptions-item label="买家留言"> + <span>{{ record.remake ? record.remake : '-' }}</span> + </a-descriptions-item> + <a-descriptions-item label="服务时间">{{ record.server_time }}</a-descriptions-item> + <a-descriptions-item label="服务地址" v-if="record.shipping_address">{{ + record.shipping_address + }}</a-descriptions-item> + <a-descriptions-item label="联系人">{{ record.username }}</a-descriptions-item> + <a-descriptions-item label="联系电话">{{ record.mobile }}</a-descriptions-item> + <a-descriptions-item label="微信联系方式">{{ record.wx_account }}</a-descriptions-item> + <a-descriptions-item label="订单操作" v-if="record.order_status == 10" + ><a v-if="record.order_status == 10" style="margin-right: 8px" @click="handleAcceptance(record)" + >验收</a + ></a-descriptions-item + > + </a-descriptions> + </a-card> + + <!-- 回收信息 --> + <a-card class="mt-20" :bordered="false"> + <!-- 订单信息 --> + <a-descriptions title="回收信息" :column="2"> + <a-descriptions-item label="回收ID">{{ record.recovery_id }}</a-descriptions-item> + <a-descriptions-item label="回收名称">{{ record.recovery_name }}</a-descriptions-item> + <a-descriptions-item label="图片集"> + <div v-for="item in record.images" :key="item.id"> + <a title="点击查看原图" :href="item.file.preview_url" target="_blank"> + <img width="50" height="50" :src="item.file.preview_url" alt="图片" /> + </a> + </div> + </a-descriptions-item> + </a-descriptions> + </a-card> + <!-- 门店信息 --> + <a-card class="mt-20" :bordered="false" v-if="record.shop"> + <!-- 门店信息 --> + <a-descriptions title="门店信息"> + <a-descriptions-item label="门店名称">{{ record.shop.shop_name }}</a-descriptions-item> + <a-descriptions-item label="门店ID">{{ record.shop.shop_id }}</a-descriptions-item> + <a-descriptions-item label="门店联系人">{{ record.shop.linkman }}</a-descriptions-item> + <a-descriptions-item label="门店电话">{{ record.shop.phone }}</a-descriptions-item> + <a-descriptions-item label="门店地址">{{ record.shop.full_address }}</a-descriptions-item> + <a-descriptions-item label="门店营业时间">{{ record.shop.shop_hours }}</a-descriptions-item> + </a-descriptions> + </a-card> + </div> + <acceptance ref="acceptance" @handleSubmit="handleRefresh" /> + </div> +</template> + +<script> +import { inArray } from '@/utils/util' +import * as Api from '@/api/server/recovery' +import Acceptance from './modules/Acceptance' +export default { + name: 'RecoveryOrderDetail', + components: { Acceptance }, + data() { + return { + // 外部方法 + inArray, + // 正在加载 + isLoading: true, + // 订单ID + orderId: null, + // 订单详情 + record: {}, + } + }, + created() { + // 记录订单ID + this.orderId = this.$route.query.orderId + // 刷新页面 + this.handleRefresh() + }, + methods: { + // 刷新页面 + handleRefresh() { + // 获取当前记录 + this.getDetail() + }, + // 验收 + handleAcceptance(item) { + this.$refs.acceptance.add(item) + }, + // 获取当前记录 + getDetail() { + const { orderId } = this + this.isLoading = true + Api.orderDetail({ orderId }) + .then((result) => { + // 当前记录 + this.record = result.data.detail + }) + .finally(() => (this.isLoading = false)) + }, + + // 初始化数据 + initData() {}, + }, +} +</script> +<style lang="less" scoped> +@import '~ant-design-vue/es/style/themes/default.less'; +// 订单详情页 +.order-content { + margin-bottom: 70px; + + /deep/.ant-descriptions-item > span { + vertical-align: middle; + } + + // 分割线 + .o-divider { + margin-bottom: 32px; + } + + // 步骤条 + .order-progress { + height: 26px; + line-height: 26px; + background: #f8f8f8; + border-radius: 13px; + font-size: @font-size-base; + text-align: center; + position: relative; + + &:before, + &:after { + content: ''; + position: absolute; + z-index: 2; + left: 0; + top: 0; + bottom: 0; + border-radius: 13px; + background: @primary-color; + } + + &:after { + background: ~`colorPalette('@{primary-color}', 3) `; + z-index: 1; + } + + &.progress-1 { + &:before { + width: 0; + } + + &:after { + width: 20%; + } + } + + &.progress-2 { + &:before { + width: 20%; + } + + &:after { + width: 40%; + } + } + + &.progress-3 { + &:before { + width: 40%; + } + + &:after { + width: 60%; + } + } + + &.progress-4 { + &:before { + width: 60%; + } + + &:after { + width: 80%; + } + } + + &.progress-5 { + &:before { + width: 100%; + } + + &:after { + width: 100%; + } + + li { + &:nth-child(5) { + color: #fff; + } + } + } + + li { + width: 20%; + float: left; + border-radius: 13px; + position: relative; + z-index: 3; + } + + .tip { + font-size: 12px; + padding-top: 10px; + color: #8c8c8c; + } + + &.progress-1 li:nth-child(1), + &.progress-2 li:nth-child(1), + &.progress-3 li:nth-child(1), + &.progress-4 li:nth-child(1), + &.progress-5 li:nth-child(1) { + color: #fff; + } + + &.progress-2 li:nth-child(2), + &.progress-3 li:nth-child(2), + &.progress-4 li:nth-child(2), + &.progress-5 li:nth-child(2) { + color: #fff; + } + + &.progress-3 li:nth-child(3), + &.progress-4 li:nth-child(3), + &.progress-5 li:nth-child(3) { + color: #fff; + } + + &.progress-4 li:nth-child(4), + &.progress-5 li:nth-child(4) { + color: #fff; + } + } + // 商品列表 + .goods-list { + /deep/table { + table-layout: auto; + } + .order-price { + padding: 8px 20px; + text-align: right; + } + } + // 操作栏 + .actions { + .action-item { + float: left; + margin-right: 8px; + } + } +} + +// 隐藏tab的标签 +.hide-bar { + /deep/.ant-tabs-bar { + display: none; + } +} + +/deep/.ant-tabs-bar { + margin-bottom: 20px; +} + +// 已发货的商品列表 +.deliver-goods-list { + .goods-item { + position: relative; + border-radius: 4px; + overflow: hidden; + width: 65px; + height: 65px; + float: left; + margin-right: 15px; + } + + .goods-img { + display: block; + width: 100%; + height: 100%; + } + + .title { + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + background: rgba(0, 0, 0, 0.6); + color: #fff; + padding: 2px 0; + font-size: 12px; + } +} +</style> diff --git a/src/views/recovery/order/Index.vue b/src/views/recovery/order/Index.vue index 0672810..86da7fb 100644 --- a/src/views/recovery/order/Index.vue +++ b/src/views/recovery/order/Index.vue @@ -3,178 +3,160 @@ <div class="card-title">{{ $route.meta.title }}</div> <div class="table-operator"> <!-- 搜索板块 --> - <!-- <a-row class="row-item-search"> + <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-input v-model="queryParam.recovery_name" placeholder="请输入服务名称" allow-clear /> </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 label="用户手机号"> + <a-input v-model="queryParam.user_mobile" placeholder="请输入用户手机号" allow-clear /> + </a-form-item> + <a-form-item label="订单号"> + <a-input v-model="queryParam.order_no" placeholder="请输入订单号" allow-clear /> </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> --> + </a-row> <!-- 操作板块 --> - <!-- <div class="row-item-tab clearfix"> + <div class="row-item-tab clearfix"> <div class="tab-list fl-l"> - <a-radio-group :defaultValue="queryParam.status" @change="handleTabs"> + <a-radio-group :defaultValue="queryParam.order_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-button v-for="(items, index) in orderStatusList" :key="index" :value="items.value">{{ + items.name + }}</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> </div> - <s-table - ref="table" - rowKey="recovery_id" - :loading="isLoading" + + <a-table + :rowKey="(record) => record.order_id" :columns="columns" - :data="loadData" - :rowSelection="rowSelection" - :pagination="pagination" + :data-source="list" + :scroll="{ x: 1300 }" + bordered + :pagination="false" > - <!-- 回收图片 --> - <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 class="actions" slot="action" slot-scope="item"> + <router-link + v-if="$auth('/recovery/orderDetail')" + :to="{ path: '/recovery/order/Detail', query: { orderId: item.order_id } }" + target="_blank" + >详情</router-link + > + <a v-if="item.order_status == 10" v-action:edit style="margin-right: 8px" @click="handleAcceptance(item)" + >验收</a + > </span> - </s-table> - <!-- <add ref="AddRef" @handleSubmit="handleRefresh" /> --> - <!-- <edit ref="EditRef" @handleSubmit="handleRefresh" /> --> + </a-table> + <a-pagination + v-model="queryParam.page" + :default-page-size="queryParam.pageSize" + :pageSizes="queryParam.pageSize" + :total="total" + :showSizeChanger="true" + :showQuickJumper="true" + :pageSizeOptions="pageSizeOptions" + :layout="'total, sizes, prev, pager, next, jumper'" + :showTotal="showTotal" + @showSizeChange="handleSizeChange" + @change="handlePageChange" + style="float: right" + /> + <acceptance ref="acceptance" @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' +import Acceptance from './modules/Acceptance' // 表格表头 const columns = [ { title: '订单号', - dataIndex: 'order_no' - }, - { - title: '回收ID', - dataIndex: 'recovery_id' + dataIndex: 'order_no', + width: '180px', + ellipsis: true, }, { title: '回收名称', dataIndex: 'recovery_name', - scopedSlots: { customRender: 'recovery_name' } + scopedSlots: { customRender: 'recovery_name' }, }, { title: '回收类型', dataIndex: 'recovery_type_text', - scopedSlots: { customRender: 'recovery_type_text' } + scopedSlots: { customRender: 'recovery_type_text' }, }, { title: '姓名', - dataIndex: 'username' + dataIndex: 'username', }, { title: '服务时间', width: '180px', - dataIndex: 'server_time' + dataIndex: 'server_time', }, { title: '手机号', width: '180px', - dataIndex: 'mobile' + dataIndex: 'mobile', }, { title: '期待价格', width: '180px', - dataIndex: 'expect_price' + dataIndex: 'expect_price', }, { title: '添加时间', width: '180px', - dataIndex: 'create_time' + dataIndex: 'create_time', }, { title: '状态', dataIndex: 'order_status_text', - scopedSlots: { customRender: 'order_status_text' } - } - // { - // title: '操作', - // dataIndex: 'action', - // width: '150px', - // scopedSlots: { customRender: 'action' } - // } + scopedSlots: { customRender: 'order_status_text' }, + }, + { + title: '操作', + width: '100px', + fixed: 'right', + scopedSlots: { customRender: 'action' }, + }, ] export default { name: 'Index', components: { ContentHeader, - STable - // Add, - // Edit + STable, + Acceptance, }, - data () { + data() { return { // 当前表单元素 searchForm: this.$form.createForm(this), // 商品分类列表 categoryList: [], + //订单状态 + orderStatusList: [], // 查询参数 queryParam: { - // status: '0', - // recovery_name: '', - // category_id: '', - // page: 1, + order_status: '0', + recovery_name: '', + category_id: '', + order_no: '', + page: 1, + pageSize: 15, }, + pageSizeOptions: ['15', '30', '50'], + showTotal: (total) => `共 ${total} 条记录`, // 显示总数 + total: 0, // 正在加载 isLoading: false, // 表头 @@ -182,112 +164,105 @@ export default { // 选择的元素 selectedRowKeys: [], // 加载数据方法 必须为 Promise 对象 - loadData: (param) => { - // const requestParameters = Object.assign({}, param, this.queryParam) - return Api.orderList({ ...param, ...this.queryParam }).then((response) => { - return response.data.list - }) - } + list: [], } }, - created () { + created() { // 默认的查询参数 - if (this.$route.query.status) { - this.queryParam.status = this.$route.query.status + if (this.$route.query.order_status) { + this.queryParam.order_status = this.$route.query.order_status } - // 获取服务分类列表 - this.getCategoryList() + this.getOrderStatusList() + this.fetchData() }, computed: { - rowSelection () { + rowSelection() { return { selectedRowKeys: this.selectedRowKeys, - onChange: this.onSelectChange + onChange: this.onSelectChange, } - } + }, }, methods: { // 选中项发生变化时的回调 - onSelectChange (selectedRowKeys) { + onSelectChange(selectedRowKeys) { this.selectedRowKeys = selectedRowKeys }, // 切换tab - handleTabs (e) { - this.queryParam.status = e.target.value - this.handleRefresh(true) + handleTabs(e) { + this.queryParam.page = 1 + this.queryParam.order_status = e.target.value + this.fetchData() }, // 确认搜索 - handleSearch (e) { - this.handleRefresh(true) + handleSearch() { + this.queryParam.page = 1 + this.fetchData() }, - // 重置搜索表单 - handleReset () { - this.searchForm.resetFields() - }, - - // 获取分类列表 - getCategoryList () { + fetchData() { this.isLoading = true - Api.categoryList() + Api.orderList(this.queryParam) .then((result) => { - this.categoryList = result.data.list + this.list = result.data.list + this.total = result.data.total }) .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 - }) + // 重置搜索表单 + handleReset() { + this.searchForm.resetFields() }, - - // 删除记录 - handleDelete (serverId) { + handlePageChange(current, size) { + this.queryParam.page = current + this.queryParam.pageSize = size + this.fetchData() + }, + handleSizeChange(current, size) { + this.queryParam.page = current + this.queryParam.pageSize = size + this.fetchData() + }, + // 取消订单 + handleCancel(orderId) { const app = this const modal = this.$confirm({ - title: '您确定要删除该记录吗?', - content: '删除后不可恢复', - onOk () { - return Api.deleteRecovery({ serverId }) + title: '您确定要取消该订单吗?', + content: '', + onOk() { + return Api.cancelOrder({ orderId }) .then((result) => { app.$message.success(result.message, 1.5) - app.handleRefresh() + app.fetchData() }) .finally((result) => modal.destroy()) - } + }, }) }, - - // 新增记录 - handleCreate () { - this.$refs.AddRef.add() + //获取订单状态 + getOrderStatusList() { + this.isLoading = true + Api.orderStatusList() + .then((result) => { + this.orderStatusList = result.data.list + }) + .finally(() => (this.isLoading = false)) }, - // 编辑记录 - async handleEdit (record) { - console.log('🚀 ~ file: Index.vue:273 ~ handleEdit ~ record:', record) - // 显示对话框 - this.$refs.EditRef.edit(record) + // 验收 + handleAcceptance(item) { + this.$refs.acceptance.add(item) }, /** * 刷新列表 * @param Boolean bool 强制刷新到第一页 */ - handleRefresh (bool = false) { + handleRefresh(bool = false) { this.selectedRowKeys = [] - this.$refs.table.refresh(bool) - } - } + this.fetchData() + }, + }, } </script> <style lang="less" scoped> diff --git a/src/views/recovery/order/modules/Acceptance.vue b/src/views/recovery/order/modules/Acceptance.vue new file mode 100644 index 0000000..1db979a --- /dev/null +++ b/src/views/recovery/order/modules/Acceptance.vue @@ -0,0 +1,103 @@ +<template> + <a-modal + title="回收验收" + :width="400" + :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-number :min="0" v-model="real_price" /> + <span class="ml-10">元</span> + </a-form-item> + </a-form> + </a-spin> + </a-modal> +</template> + +<script> +import * as Api from '@/api/server/recovery' +export default { + components: {}, + props: { + // 分类列表 + }, + data() { + return { + engineerList: [], + // 对话框标题 + title: '', + // 标签布局属性 + labelCol: { + span: 7, + }, + order_id: '', + // 输入框布局属性 + wrapperCol: { + span: 13, + }, + real_price: 0, + // modal(对话框)是否可见 + visible: false, + // modal(对话框)确定按钮 loading + confirmLoading: false, + // 当前表单元素 + form: this.$form.createForm(this), + } + }, + methods: { + // 显示对话框 + add(item) { + // 显示窗口 + this.order_id = item.order_id + this.real_price = item.expect_price + this.visible = true + }, + + // 确认按钮 + handleSubmit(e) { + e.preventDefault() + // 表单验证 + const { + form: { validateFields }, + } = this + validateFields((errors, values) => { + // 提交到后端api + if (!errors) { + values.order_id = this.order_id + values.real_price = this.real_price + this.onFormSubmit(values) + } + }) + }, + + // 关闭对话框事件 + handleCancel() { + this.visible = false + this.form.resetFields() + }, + + // 提交到后端api + onFormSubmit(values) { + this.confirmLoading = true + Api.completeOrder({ form: values }) + .then((result) => { + // 显示成功 + this.$message.success(result.message, 1.5) + // 关闭对话框事件 + this.handleCancel() + // 通知父端组件提交完成了 + this.$emit('handleSubmit', values) + }) + .finally((result) => { + this.confirmLoading = false + }) + }, + }, +} +</script> diff --git a/src/views/recovery/order/modules/Add.vue b/src/views/recovery/order/modules/Add.vue deleted file mode 100644 index 83d6599..0000000 --- a/src/views/recovery/order/modules/Add.vue +++ /dev/null @@ -1,162 +0,0 @@ -<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> diff --git a/src/views/recovery/order/modules/Edit.vue b/src/views/recovery/order/modules/Edit.vue deleted file mode 100644 index b698be4..0000000 --- a/src/views/recovery/order/modules/Edit.vue +++ /dev/null @@ -1,190 +0,0 @@ -<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> diff --git a/src/views/server/Detail.vue b/src/views/server/Detail.vue index 59cd737..087fc85 100644 --- a/src/views/server/Detail.vue +++ b/src/views/server/Detail.vue @@ -34,7 +34,7 @@ <a-descriptions-item label="联系人">{{ record.username }}</a-descriptions-item> <a-descriptions-item label="联系电话">{{ record.mobile }}</a-descriptions-item> <a-descriptions-item label="订单操作" v-if="record.order_status == 20" - ><a v-if="item.order_status == 20" style="margin-right: 8px" @click="handleDispatch(item.order_id)" + ><a v-if="record.order_status == 20" style="margin-right: 8px" @click="handleDispatch(record.order_id)" >派单</a ></a-descriptions-item >