feat: 指派估价员

package.json

@@ -25,9 +25,9 @@
     "lodash.get": "4.4.2",
     "lodash.pick": "4.4.0",
     "nprogress": "0.2.0",
+    "simple-lightbox": "^2.1.0",
     "tinymce": "5.0.8",
     "vue": "2.6.11",
-    "vue-cropper": "0.4.4",
     "vue-ls": "3.2.0",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"

src/api/order.js

+import { axios } from '@/util/axios/request'
+
+const BASE_URL = '/order'
+
+export function getPage(data) {
+  return axios({
+    url: `${BASE_URL}/page`,
+    method: 'post',
+    data
+  })
+}
+
+export function getDetail(id) {
+  return axios({
+    url: `${BASE_URL}/${id}`,
+    method: 'get',
+  })
+}
+
+// 指派估价员
+export function dispatchValuator(data) {
+  return axios({
+    url: `${BASE_URL}/valuation`,
+    method: 'post',
+    useFullLoading: true,
+    data
+  })
+}
+
+// 重新指派估价员
+export function reDispatchValuator(data) {
+  return axios({
+    url: `${BASE_URL}/revaluation`,
+    method: 'post',
+    useFullLoading: true,
+    data
+  })
+}
+
+// 确定价格发送订单
+export function sendPrice(data) {
+  return axios({
+    url: `${BASE_URL}/send`,
+    method: 'post',
+    useFullLoading: true,
+    data
+  })
+}
+
+
+// 订单状态
+export const STATUS = {
+  RESERVE: 1, // 已提交
+  VALUATION: 2, // 待估价
+  SEND: 3, // 已估价，待支付
+  PAY: 4, // 已付款
+  DISPATCH: 5, // 已派单
+}
\ No newline at end of file

src/api/valuator.js

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

src/components/table/TableTemplate.vue

@@ -79,7 +79,10 @@
     </a-table>
     <slot name="free" />
   </div>
-  <span v-else>what the fuck?</span>
+  <div v-else>
+    what the fuck? <br />
+    where is my fucking page?
+  </div>
 </template>
 <script>
 import SearchForm from './SearchForm'

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import { constantRouterMap, initRouterTree } from '@/router/router.config'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
+import 'simple-lightbox/dist/simpleLightbox.min.css' // progress bar style
 import store from '@/store/index'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import notification from 'ant-design-vue/es/notification'

src/views/order/ChooseValuator.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 valuators">
+          <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-date-picker
+            size="large"
+            v-decorator="[
+              'expectArrivalTime',
+              { rules: [{ required: true, message: '请选择上门时间' }] }
+            ]"
+            format="YYYY-MM-DD HH:mm"
+            valueFormat="YYYY-MM-DD HH:mm"
+            :show-time="{
+              format: 'HH:mm',
+              valueFormat: 'HH:mm',
+              minuteStep: 30,
+              defaultValue: defaultTime
+            }"
+            :show-today="false"
+          />
+        </a-form-item>
+        <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 { getValuators } from '@/api/valuator'
+import { dispatchValuator, reDispatchValuator } from '@/api/order'
+import moment from 'moment'
+
+export default {
+  name: 'ChooseValuator',
+  props: ['afterChoose', 'orderId'],
+  data() {
+    return {
+      visible: false,
+      id: null,
+      name: null,
+      valuators: [],
+      step: 0,
+      form: this.$form.createForm(this),
+      mode: null,
+      defaultTime: moment("1995-12-25 00:00")
+    }
+  },
+  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() {
+      getValuators(this.name).then(({ data }) => {
+        console.info('valuators', data)
+        this.valuators = 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' ? dispatchValuator : reDispatchValuator
+        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" />
+    <div id="order-detail-drawer-box">
+      <div id="order-detail-drawer-box-info">
+        <a-descriptions title="订单信息" layout="vertical" :column="2">
+          <a-descriptions-item label="服务类型">
+            {{ order.serviceName || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="下单时间">
+            {{
+              order.createTime
+                ? dayjs(order.createTime).format('YYYY-MM-DD HH:mm')
+                : '-'
+            }}
+          </a-descriptions-item>
+          <a-descriptions-item label="联系人">
+            {{ order.name || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="联系电话">
+            {{ order.phone || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="订单编号">
+            {{ order.orderNo || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="上门时间">
+            {{
+              order.expectArrivalTime
+                ? dayjs(order.expectArrivalTime).format('YYYY-MM-DD HH:mm')
+                : '-'
+            }}
+          </a-descriptions-item>
+          <a-descriptions-item label="数量" span="2">
+            {{ order.num || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="地址" span="2">
+            {{ order.address || '-' }}
+          </a-descriptions-item>
+
+          <a-descriptions-item label="需求说明" :span="2">
+            {{ order.demandDesc || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="现场照片" :span="2">
+            <div id="order-images">
+              <template v-for="(url, i) in order.demandImgUrls">
+                <a :key="i" :href="url">
+                  <img width="100" style="margin: 0 5px 5px 0" :src="url" />
+                </a>
+              </template>
+            </div>
+          </a-descriptions-item>
+        </a-descriptions>
+      </div>
+      <div id="order-detail-drawer-box-timeline">
+        <a-timeline>
+          <template v-for="(log, i) in order.process">
+            <a-timeline-item :key="i">
+              <p>{{ log.description }}</p>
+              <p v-if="log.expectArrivalTime">
+                上门估价时间:&nbsp;{{
+                  dayjs(log.expectArrivalTime).format('YYYY-MM-DD HH:mm')
+                }}
+              </p>
+              <p v-if="log.remark">备注:&nbsp;{{ log.remark }}</p>
+              <p>{{ dayjs(log.createTime).format('YYYY-MM-DD HH:mm') }}</p>
+            </a-timeline-item>
+          </template>
+        </a-timeline>
+      </div>
+    </div>
+    <div class="drawer-form-bottom-toolbar">
+      <a-space>
+        <a-button
+          @click="sendPrice"
+          type="primary"
+          v-if="
+            !past &&
+            (order.orderStatus == STATUS.RESERVE ||
+              order.orderStatus == STATUS.VALUATION)
+          "
+        >
+          发送订单
+        </a-button>
+        <a-button
+          @click="sendValuator"
+          v-if="!past && order.orderStatus == STATUS.RESERVE"
+        >
+          现场估价
+        </a-button>
+        <a-button
+          @click="reSendValuator"
+          v-if="order.orderStatus == STATUS.VALUATION"
+        >
+          重新指派估价员
+        </a-button>
+        <a-button
+          v-if="!past && order.orderStatus == STATUS.PAY"
+          type="primary"
+          @click="dispatch"
+        >
+          派单
+        </a-button>
+        <a-button v-if="!past && order.orderStatus == STATUS.DISPATCH">
+          重新派单
+        </a-button>
+        <a-button
+          @click="reDispatch"
+          v-if="past && order.orderStatus == STATUS.DISPATCH"
+          type="primary"
+        >
+          完成
+        </a-button>
+      </a-space>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import ImageUpload from '@/components/image-upload/ImageUpload'
+import { getDetail, STATUS } from '@/api/order'
+import SimpleLightbox from 'simple-lightbox'
+import ChooseValuator from './ChooseValuator'
+import dayjs from 'dayjs'
+
+const defaultData = {
+  process: [],
+  demandImgUrls: []
+}
+
+export default {
+  name: 'OrderDetail',
+  components: { ImageUpload, ChooseValuator },
+  props: { success: Function },
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      visible: false,
+      id: null,
+      order: defaultData,
+      STATUS,
+      past: false, // 是否已过服务时间
+      lightbox: null,
+      dayjs
+    }
+  },
+  methods: {
+    show(id) {
+      console.info('id', id)
+      this.id = id
+      this.visible = true
+      if (this.id) {
+        this.fetchData()
+      }
+    },
+    close() {
+      this.id = null
+      this.order = defaultData
+      this.lightbox && this.lightbox.destroy()
+      this.visible = false
+    },
+    // 发送订单
+    sendPrice() {},
+    // 指派估价员
+    sendValuator() {
+      this.$refs.ChooseValuator.show('first')
+    },
+    // 重新指派估价员
+    reSendValuator() {
+      this.$refs.ChooseValuator.show('rework')
+    },
+    dispatch() {},
+    reDispatch() {},
+    fetchData() {
+      getDetail(this.id).then(({ data }) => {
+        this.order = data
+        console.info('data', data)
+        this.$nextTick(() => {
+          this.lightbox = new SimpleLightbox({ elements: '#order-images a' })
+        })
+      })
+    }
+  },
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+#order-detail-drawer-box {
+  height: 100%;
+  display: flex;
+  #order-detail-drawer-box-info {
+    width: 60%;
+  }
+  #order-detail-drawer-box-timeline {
+    width: 40%;
+    max-height: 100%;
+    overflow-y: auto;
+    padding-top: 10px;
+  }
+}
+</style>
\ No newline at end of file

src/views/order/OrderList.vue

+<template>
+  <table-template :soul="this">
+    <template #detail="{ record }">
+      <a @click="detail(record)">查看详情</a>
+    </template>
+    <template #free>
+      <OrderDetail ref="OrderDetail" :success="reset" />
+    </template>
+  </table-template>
+</template>
+<script>
+import { TableTemplate, TableScript, SearchType } from '@/components/table'
+import { getPage, STATUS } from '@/api/order'
+import OrderDetail from './OrderDetail.vue'
+import dayjs from 'dayjs'
+
+const columns = [
+  { title: '服务项', width: 130, dataIndex: 'serviceName' },
+  { title: '订单状态', width: 100, dataIndex: 'orderStatusValue' },
+  { title: '订单号', width: 200, dataIndex: 'orderNo' },
+  { title: '用户', width: 120, dataIndex: 'userName' },
+  { title: '联系电话', dataIndex: 'phone', width: 130 },
+  {
+    title: '服务时间',
+    dataIndex: 'expectArrivalTime',
+    width: 130,
+    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+  },
+  {
+    title: '提交时间',
+    dataIndex: 'createTime',
+    width: 120,
+    sorter: true,
+    filter: { type: SearchType.RANGE },
+    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+  },
+  {
+    title: '详情',
+    width: 120,
+    align: 'center',
+    scopedSlots: { customRender: 'detail' }
+  }
+]
+
+export default {
+  name: 'OrderList',
+  mixins: [TableScript],
+  components: { TableTemplate, OrderDetail },
+  data() {
+    return {
+      columns,
+      useYScroll: true,
+      title: '订单管理',
+      STATUS
+    }
+  },
+  methods: {
+    queryData: getPage,
+    detail(record) {
+      this.$refs.OrderDetail.show(record.id)
+    }
+  }
+}
+</script>
\ No newline at end of file