1

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,
+  })
+}

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,
+          },
         ],
       },
       // 服务管理

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>

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-form-item label="用户手机号">
-            <a-select v-model="queryParam.category_id">
+            <a-input v-model="queryParam.user_mobile" placeholder="请输入用户手机号" allow-clear />
-              <a-select-option :value="0">全部</a-select-option>
+          </a-form-item>
-              <a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.category_id">{{
+          <a-form-item label="订单号">
-                item.name
+            <a-input v-model="queryParam.order_no" placeholder="请输入订单号" allow-clear />
-              }}</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> -->
+      </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 v-for="(items, index) in orderStatusList" :key="index" :value="items.value">{{
-            <a-radio-button value="2">已下架</a-radio-button>
+              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>
-    <s-table
-      ref="table"
-      rowKey="recovery_id"
-      :loading="isLoading"
-      :columns="columns"
-      :data="loadData"
-      :rowSelection="rowSelection"
-      :pagination="pagination"
-    >
-      <!-- 回收图片 -->
-      <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>
 
-      <!-- 回收状态 -->
+    <a-table
-      <span slot="status" slot-scope="text, item">
+      :rowKey="(record) => record.order_id"
-        <a-tag
+      :columns="columns"
-          class="cur-p"
+      :data-source="list"
-          :color="text == 1 ? 'green' : 'red'"
+      :scroll="{ x: 1300 }"
-          @click="handleUpdateStatus([item.recovery_id], text != 1)"
+      bordered
-        >{{ text == 1 ? '上架' : '下架' }}</a-tag
+      :pagination="false"
     >
-      </span>
       <!-- 操作项 -->
-      <span class="actions" slot="action" slot-scope="text, item">
+      <span class="actions" slot="action" slot-scope="item">
-        <a v-action:edit style="margin-right: 8px" @click="handleEdit(item)">编辑</a>
+        <router-link
-        <a v-action:delete icon="delete" @click="handleDelete([item.recovery_id])">删除</a>
+          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>
+    </a-table>
-    <!-- <add ref="AddRef" @handleSubmit="handleRefresh" /> -->
+    <a-pagination
-    <!-- <edit ref="EditRef" @handleSubmit="handleRefresh" /> -->
+      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 Acceptance from './modules/Acceptance'
-// import Edit from './modules/Edit'
 // 表格表头
 const columns = [
   {
     title: '订单号',
-    dataIndex: 'order_no'
+    dataIndex: 'order_no',
-  },
+    width: '180px',
-  {
+    ellipsis: true,
-    title: '回收ID',
-    dataIndex: 'recovery_id'
   },
   {
     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' }
+    scopedSlots: { customRender: 'order_status_text' },
-  }
+  },
-  // {
+  {
-  //   title: '操作',
+    title: '操作',
-  //   dataIndex: 'action',
+    width: '100px',
-  //   width: '150px',
+    fixed: 'right',
-  //   scopedSlots: { customRender: 'action' }
+    scopedSlots: { customRender: 'action' },
-  // }
+  },
 ]
 
 export default {
   name: 'Index',
   components: {
     ContentHeader,
-    STable
+    STable,
-    // Add,
+    Acceptance,
-    // Edit
   },
-  data () {
+  data() {
     return {
       // 当前表单元素
       searchForm: this.$form.createForm(this),
       // 商品分类列表
       categoryList: [],
+      //订单状态
+      orderStatusList: [],
       // 查询参数
       queryParam: {
-        // status: '0',
+        order_status: '0',
-        // recovery_name: '',
+        recovery_name: '',
-        // category_id: '',
+        category_id: '',
-        // page: 1,
+        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) => {
+      list: [],
-        // const requestParameters = Object.assign({}, param, this.queryParam)
-        return Api.orderList({ ...param, ...this.queryParam }).then((response) => {
-          return response.data.list
-        })
-      }
     }
   },
-  created () {
+  created() {
     // 默认的查询参数
-    if (this.$route.query.status) {
+    if (this.$route.query.order_status) {
-      this.queryParam.status = this.$route.query.status
+      this.queryParam.order_status = this.$route.query.order_status
     }
-    // 获取服务分类列表
+    this.getOrderStatusList()
-    this.getCategoryList()
+    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) {
+    handleTabs(e) {
-      this.queryParam.status = e.target.value
+      this.queryParam.page = 1
-      this.handleRefresh(true)
+      this.queryParam.order_status = e.target.value
+      this.fetchData()
     },
 
     // 确认搜索
-    handleSearch (e) {
+    handleSearch() {
-      this.handleRefresh(true)
+      this.queryParam.page = 1
+      this.fetchData()
     },
-
     // 重置搜索表单
-    handleReset () {
+    fetchData() {
-      this.searchForm.resetFields()
-    },
-
-    // 获取分类列表
-    getCategoryList () {
       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))
     },
-
+    // 重置搜索表单
-    // 修改服务状态(上下架)
+    handleReset() {
-    handleUpdateStatus (recoveryIds, state = true) {
+      this.searchForm.resetFields()
-      this.isLoading = true
-      Api.recoveryStatus({ recoveryIds, state })
-        .then((result) => {
-          // 显示成功
-          this.$message.success(result.message, 1.5)
-          this.handleRefresh()
-        })
-        .finally((result) => {
-          this.isLoading = false
-        })
     },
-
+    handlePageChange(current, size) {
-    // 删除记录
+      this.queryParam.page = current
-    handleDelete (serverId) {
+      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: '您确定要删除该记录吗?',
+        title: '您确定要取消该订单吗?',
-        content: '删除后不可恢复',
+        content: '',
-        onOk () {
+        onOk() {
-          return Api.deleteRecovery({ serverId })
+          return Api.cancelOrder({ orderId })
             .then((result) => {
               app.$message.success(result.message, 1.5)
-              app.handleRefresh()
+              app.fetchData()
             })
             .finally((result) => modal.destroy())
-        }
+        },
       })
     },
-
+    //获取订单状态
-    // 新增记录
+    getOrderStatusList() {
-    handleCreate () {
+      this.isLoading = true
-      this.$refs.AddRef.add()
+      Api.orderStatusList()
+        .then((result) => {
+          this.orderStatusList = result.data.list
+        })
+        .finally(() => (this.isLoading = false))
     },
-    // 编辑记录
+    // 验收
-    async handleEdit (record) {
+    handleAcceptance(item) {
-      console.log('🚀 ~ file: Index.vue:273 ~ handleEdit ~ record:', record)
+      this.$refs.acceptance.add(item)
-      // 显示对话框
-      this.$refs.EditRef.edit(record)
     },
     /**
      * 刷新列表
      * @param Boolean bool 强制刷新到第一页
      */
-    handleRefresh (bool = false) {
+    handleRefresh(bool = false) {
       this.selectedRowKeys = []
-      this.$refs.table.refresh(bool)
+      this.fetchData()
-    }
+    },
-  }
+  },
 }
 </script>
 <style lang="less" scoped>

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>

src/views/recovery/order/modules/Add.vue

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

src/views/recovery/order/modules/Edit.vue

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

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
           >