feat: 指派订单

src/api/order.js

@@ -47,6 +47,24 @@ export function sendPrice(data) {
   })
 }
 
+export function dispatchWorker(data) {
+  return axios({
+    url: `${BASE_URL}/dispatch`,
+    method: 'post',
+    useFullLoading: true,
+    data
+  })
+}
+
+export function reDispatchWorker(data) {
+  return axios({
+    url: `${BASE_URL}/redispatch`,
+    method: 'post',
+    useFullLoading: true,
+    data
+  })
+}
+
 
 // 订单状态
 export const STATUS = {

src/api/worker.js

+import { axios } from '@/util/axios/request'
+
+const BASE_URL = '/worker'
+
+export function searchWorkers(name) {
+  return axios({
+    url: `${BASE_URL}/search`,
+    params: { name }
+  })
+}
\ No newline at end of file

src/views/order/ChooseWorker.vue

+<!-- 选择估价员 -->
+<template>
+  <a-drawer width="30%" :visible="visible" title="指派估价员" @close="close">
+    <a-steps :current="step" @change="stepChange">
+      <a-step title="选择维修工" />
+      <a-step title="填写信息" />
+    </a-steps>
+    <br />
+    <div v-show="step == 0">
+      <a-form layout="inline">
+        <a-form-item label="名称">
+          <a-input v-model="name" />
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" icon="search" @click="search" />
+        </a-form-item>
+      </a-form>
+      <br />
+
+      <a-radio-group v-model="id">
+        <template v-for="(valuator, i) in workers">
+          <div class="valuator-selector-item-box" :key="i">
+            <a-radio :value="valuator.id" />
+            <div class="valuator-selector-item">
+              <p>姓名：{{ valuator.name }}</p>
+              <p>电话：{{ valuator.phone }}</p>
+              <div class="valuator-selector-item-assign-list">
+                <template v-for="(assign, idx) in valuator.assignTime">
+                  <p :key="idx">已派时间：{{ assign }}</p>
+                </template>
+              </div>
+            </div>
+          </div>
+        </template>
+      </a-radio-group>
+    </div>
+    <div v-show="step == 1">
+      <span>选择上门时间</span>
+      <a-form :form="form">
+        <a-form-item label="备注">
+          <a-textarea
+            v-decorator="[
+              'remark',
+              { rules: [{ required: true, message: '请填写备注' }] }
+            ]"
+            :autoSize="{ minRows: 5 }"
+          />
+        </a-form-item>
+      </a-form>
+    </div>
+    <div class="drawer-form-bottom-toolbar">
+      <a-button v-show="step == 0" type="primary" @click="choose">
+        选择
+      </a-button>
+      <a-button type="primary" v-show="step == 1" @click="dispatch">
+        指派
+      </a-button>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { searchWorkers } from '@/api/worker'
+import { dispatchWorker, reDispatchWorker } from '@/api/order'
+
+export default {
+  name: 'ChooseWorker',
+  props: ['afterChoose', 'orderId'],
+  data() {
+    return {
+      visible: false,
+      id: null,
+      name: null,
+      workers: [],
+      step: 0,
+      form: this.$form.createForm(this),
+      mode: null,
+    }
+  },
+  methods: {
+    choose() {
+      if (!this.id) {
+        return
+      }
+      console.info('chosen id', this.id)
+      this.step = 1
+    },
+    close() {
+      this.id = null
+      this.name = null
+      this.step = 0
+      this.mode = null
+      this.form.resetFields()
+      this.visible = false
+    },
+    show(mode) {
+      this.visible = true
+      this.mode = mode
+    },
+    search() {
+      searchWorkers(this.name).then(({ data }) => {
+        this.workers = data
+      })
+    },
+    stepChange(step) {
+      if (step == 0) {
+        this.step = 0
+      }
+    },
+    dispatch() {
+      this.form.validateFieldsAndScroll((err, values) => {
+        if (err) {
+          return
+        }
+        const reqData = {
+          ...values,
+          id: this.orderId,
+          hostId: this.id
+        }
+        console.info('reqData', reqData)
+        const dispatch =
+          this.mode == 'first' ? dispatchWorker : reDispatchWorker
+        dispatch(reqData).then(({ code }) => {
+          if (code == 200) {
+            this.$message.success('指派成功')
+            this.close()
+            this.afterChoose()
+          }
+        })
+      })
+    }
+  },
+  mounted() {
+    this.search()
+  }
+}
+</script>
+<style lang="less" scoped>
+.valuator-selector-item-box {
+  display: flex;
+  .valuator-selector-item {
+    margin-left: 10px;
+    font-size: 15px;
+    font-weight: bold;
+    .valuator-selector-item-assign-list {
+      padding-left: 5px;
+      color: rgb(139, 139, 139);
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/order/OrderDetail.vue

 <template>
   <a-drawer width="60%" :visible="visible" title="订单详情" @close="close">
-    <ChooseValuator ref="ChooseValuator" :afterChoose="fetchData" :orderId="id" />
+    <ChooseValuator
+      ref="ChooseValuator"
+      :afterChoose="fetchData"
+      :orderId="id"
+    />
+    <SendPriceModal ref="SendPriceModal" :onSuccess="fetchData" :orderId="id" />
+    <ChooseWorker ref="ChooseWorker" :afterChoose="fetchData" :orderId="id" />
     <div id="order-detail-drawer-box">
       <div id="order-detail-drawer-box-info">
         <a-descriptions title="订单信息" layout="vertical" :column="2">
@@ -100,11 +106,14 @@
         >
           派单
         </a-button>
-        <a-button v-if="!past && order.orderStatus == STATUS.DISPATCH">
+        <a-button
+          v-if="!past && order.orderStatus == STATUS.DISPATCH"
+          @click="reDispatch"
+        >
           重新派单
         </a-button>
         <a-button
-          @click="reDispatch"
+          @click="finish"
           v-if="past && order.orderStatus == STATUS.DISPATCH"
           type="primary"
         >
@@ -119,6 +128,8 @@ import ImageUpload from '@/components/image-upload/ImageUpload'
 import { getDetail, STATUS } from '@/api/order'
 import SimpleLightbox from 'simple-lightbox'
 import ChooseValuator from './ChooseValuator'
+import SendPriceModal from './SendPriceModal'
+import ChooseWorker from './ChooseWorker'
 import dayjs from 'dayjs'
 
 const defaultData = {
@@ -128,7 +139,7 @@ const defaultData = {
 
 export default {
   name: 'OrderDetail',
-  components: { ImageUpload, ChooseValuator },
+  components: { ImageUpload, ChooseValuator, SendPriceModal, ChooseWorker },
   props: { success: Function },
   data() {
     return {
@@ -158,7 +169,9 @@ export default {
       this.visible = false
     },
     // 发送订单
-    sendPrice() {},
+    sendPrice() {
+      this.$refs.SendPriceModal.show()
+    },
     // 指派估价员
     sendValuator() {
       this.$refs.ChooseValuator.show('first')
@@ -167,8 +180,12 @@ export default {
     reSendValuator() {
       this.$refs.ChooseValuator.show('rework')
     },
-    dispatch() {},
-    reDispatch() {},
+    dispatch() {
+      this.$refs.ChooseWorker.show('first')
+    },
+    reDispatch() {
+      this.$refs.ChooseWorker.show('rework')
+    },
     fetchData() {
       getDetail(this.id).then(({ data }) => {
         this.order = data
@@ -177,7 +194,8 @@ export default {
           this.lightbox = new SimpleLightbox({ elements: '#order-images a' })
         })
       })
-    }
+    },
+    finish() {}
   },
   mounted() {}
 }

src/views/order/SendPriceModal.vue

+<template>
+  <a-modal
+    :visible="visible"
+    :title="null"
+    @cancel="close"
+    :footer="null"
+    :width="330"
+  >
+    <div style="text-align: center">
+      <a-space>
+        <span>￥</span>
+        <a-input-number style="width: 120px" v-model="price" />
+        <a-button type="primary" @click="send">发送订单</a-button>
+      </a-space>
+    </div>
+  </a-modal>
+</template>
+<script>
+import { sendPrice } from '@/api/order'
+
+export default {
+  name: 'SendPriceModal',
+  props: ['onSuccess', 'orderId'],
+  data() {
+    return {
+      visible: false,
+      price: 0
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    send() {
+      const reqData = {
+        id: this.orderId,
+        price: this.price
+      }
+      sendPrice(reqData).then(({ code }) => {
+        if (code == 200) {
+          this.$message.success('发送成功')
+          this.onSuccess()
+          this.close()
+        }
+      })
+    },
+    close() {
+      this.visible = false
+      this.price = 0
+    }
+  }
+}
+</script>