jsm-mall-h5-front/src/packageWorkorder/pages/search.vue

<template>
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower"
  >
    <template slot="header">
      <view class="search-container">
        <u-search
          shape="round"
          :showAction="false"
          placeholder="输入工单单号进行搜索"
          showAction
          actionText="搜索"
          v-model="keyword"
          @search="searchSubmit"
          @custom="searchSubmit"
          @clear="searchSubmit"
        >
        </u-search>
      </view>
    </template>

    <view class="order-list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toDetail(item.id)">
        <view class="item-top">
          <view class="left">
            <view class="title" :class="item.orderTypeText" v-if="item.orderTypeText">
              {{ item.orderTypeText.slice(0, 2) }}
            </view>
            <view class="tags">
              <view class="tag red" v-for="(it, idx) in item.orderFlags" :key="idx">{{ it.tagName }}</view>
            </view>
          </view>
          <view class="status">{{ item.orderStatusText }}</view>
        </view>
        <view class="item-main">
          <view class="row">
            <view class="label">服务单号</view>
            <view class="value">
              <view class="val">{{ item.id }}</view>
            </view>
          </view>
          <view class="row" v-if="item.appointmentTime">
            <view class="label">预约时间</view>
            <view class="value">
              <view class="val">{{ item.appointmentTime }}</view>
            </view>
          </view>
          <view class="row">
            <view class="label">服务项目</view>
            <view class="value">
              <view class="val">{{ item.id }}</view>
            </view>
          </view>
          <view class="row" @tap.stop="$callPhone(item.userMobile)">
            <view class="label">客户姓名</view>
            <view class="value">
              <view class="val">{{ item.userName }} {{ item.userMobile }}</view>
              <view class="num" v-if="item.customerTotalNum > 0">
                (共<text>{{ item.customerSortNum || 0 }}</text
                >/{{ item.customerTotalNum || 0 }}单)</view
              >
              <view class="fun">
                <text class="iconfont icon-call"></text>
                <view class="text">联系Ta</view>
              </view>
            </view>
          </view>
          <view
            class="row address-row"
            @tap.stop="
              $openLocation({
                lat: item.lat,
                lng: item.lng,
                name: item.userName,
                address: item.address || item.gpsAddress
              })
            "
          >
            <view class="label">服务地址</view>
            <view class="value">
              <view class="val address ellipsis-3">{{ item.address || item.gpsAddress }}</view>
              <view class="fun">
                <text class="iconfont icon-daohang"></text>
                <view class="text">导航</view>
              </view>
            </view>
          </view>
        </view>
        <view class="item-btn" @tap.stop>
          <!-- 接单 ok-->
          <u-button v-if="JIEDAN(item, userInfo)" type="primary" text="接单" @tap="actionReceive(item)"></u-button>

          <!-- 待抢单 ok-->
          <u-button v-if="QIANGDAN(item, userInfo)" type="primary" text="抢单" @tap="qdOrder(item)"></u-button>

          <!-- 配件申请 -->
          <u-button
            v-if="PEIJIANSHENQING(item, userInfo)"
            plain
            type="primary"
            text="配件申请"
            @tap="toPartsApply(item.id)"
          ></u-button>

          <!-- 变更小工 -->
          <u-button
            v-if="BIANGENGXIAOGONG(item, userInfo)"
            plain
            type="primary"
            text="变更小工"
            @tap="biangengxiaogong(item)"
          ></u-button>

          <!-- 辅材收费 ok-->
          <u-button
            plain
            type="primary"
            text="辅材收费"
            @tap="toCharge(item.id, 'M')"
            v-if="FUCAISHOUFEI(item, userInfo)"
          ></u-button>

          <!-- 配件收费 -->
          <u-button
            v-if="PEIJIANSHOUFEI(item, userInfo)"
            plain
            type="primary"
            text="配件收费"
            @tap="toCharge(item.id, 'P')"
          ></u-button>

          <!-- 过程反馈 -->
          <u-button
            v-if="GUOCHENFANKUI(item, userInfo)"
            type="primary"
            text="过程反馈"
            @tap="toFeedback(item.id)"
          ></u-button>
        </view>
      </view>
    </view>

    <Loading :loadStatus="loadStatus" :dataList="dataList" />
    <selectionWorkers
      v-if="item"
      :title="title"
      :detail="item"
      :type="selectionWorkersType"
      :callback="callback"
      @close="
        () => {
          item = null
          selectionWorkersType = null
          callback = null
        }
      "
    />
  </zj-page-layout>
</template>

<script>
import orderBtnsShow from './mixins/orderBtnsShow.js'
import { getStorage } from '@/common/utils/storage.js'
import selectionWorkers from '@/components/selectionWorkers.vue'
export default {
  mixins: [orderBtnsShow],
  components: {
    selectionWorkers
  },
  data() {
    return {
      keyword: '',
      dataList: [],
      pageNum: 1,
      loadStatus: 0,
      refresherTriggered: false,
      selectionWorkersType: '',
      item: null,
      callback: null,
      title: ''
    }
  },

  onLoad({ keyword }) {
    this.keyword = keyword
    if (keyword) {
      this.getList()
    }
    // this.getList();
  },

  computed: {
    userInfo() {
      return getStorage('user')
    }
  },

  methods: {
    // 变更小工
    biangengxiaogong(item) {
      this.title = '更换小工'
      this.selectionWorkersType = 3
      this.item = { ...item }
      this.callback = () => {
        this.$successToast()
        this.refreshList()
        this.toDetail(item.id)
        this.$nextTick(() => {
          this.item = null
          this.selectionWorkersType = null
          this.callback = null
          this.title = null
        })
      }
    },
    orderStatus_v(orderStatus, item) {
      if (item?.isImportExcel && item?.isMeet === false) {
        return 'DJD'
      }
      if (['DYY'].includes(orderStatus)) {
        // 待预约
        return 'DYY'
      } else if (['DQD'].includes(orderStatus)) {
        // 待抢单
        return 'DQD'
      } else if (
        [
          'DSHPG',
          'CJ',
          'YPD',
          'DXSPD',
          'DZBPG',
          'DWDSPGP',
          'DXSSPGP',
          'DTJXSSPGP',
          'DZBSPGP',
          'DFZXPD',
          'DFZXSPGP',
          'XSBH',
          'TJXSBH',
          'ZBBH',
          'FZXBH',
          'FL'
        ].includes(orderStatus)
      ) {
        // 待商户派工
        return 'DSHPG'
      } else if (['DWDPG', 'DWDPD', 'WDBH'].includes(orderStatus)) {
        // 待网点派工
        return 'DWDPG'
      } else if (['DJD', 'DSM', 'YZP'].includes(orderStatus)) {
        // 待接单
        return 'DJD'
      } else if (['FWZ', 'GCSZT', 'BFWG'].includes(orderStatus)) {
        // 服务中
        return 'FWZ'
      } else if (['YCD'].includes(orderStatus)) {
        // 异常单
        return 'YCD'
      } else if (['YWG', 'GCSZX', 'WDWG', 'YWGO'].includes(orderStatus)) {
        // 已完工待结算
        return 'YWG'
      } else if (['YJS', 'LRCD'].includes(orderStatus)) {
        // 已结算
        return 'YJS'
      } else if (['YQX', 'FWZT', 'YCGB', 'FWQX'].includes(orderStatus)) {
        // 已取消
        return 'YQX'
      }
      return ''
    },

    getList() {
      this.loadStatus = 1
      this.$api
        .post('/pg/order/base/list', {
          pageNum: this.pageNum,
          pageSize: 5,
          keyword: this.keyword
        })
        .then(res => {
          this.loadStatus = 0
          let list = res.data.records
          if (list.length < 10) {
            this.loadStatus = 2
          }
          this.dataList = this.dataList.concat(list)
        })
        .catch(() => {
          this.loadStatus = 2
        })
        .finally(res => {
          this.refresherTriggered = false
        })
    },

    searchSubmit() {
      this.refreshList()
    },

    refreshList() {
      this.dataList = []
      this.pageNum = 1
      this.getList()
    },

    // 滚动到底部
    scrolltolower(e) {
      if (this.loadStatus === 0) {
        this.pageNum++
        this.getList()
      }
    },

    // 触发下拉刷新
    refresherrefresh(e) {
      this.refresherTriggered = true
      this.refreshList()
    },

    // 加急
    actionUrgent(id, flag) {
      this.$modal({
        title: '加急操作',
        content: '加急操作，会消息通知所有订单相关人员，请谨慎操作。'
      })
        .then(() => {
          this.$api
            .post('/pg/order/base/flag', {
              orderBaseId: id,
              orderFlagEnum: 'JIA_JI',
              flag: flag
            })
            .then(res => {
              this.$successToast()
              this.refreshList()
            })
        })
        .catch(() => {})
    },

    // 接单
    actionReceive(id) {
      this.$modal({
        title: '接单确认',
        content: '确认接单？'
      })
        .then(() => {
          this.$api
            .post('/pg/order/base/rece', {
              orderBaseId: id
            })
            .then(res => {
              this.$successToast()
              this.refreshList()
            })
        })
        .catch(() => {})
    },

    // 去收费
    toCharge(id, type) {
      if (type == 'M') {
        this.$navToPage({
          url: `/packageMaterial/pages/sale/index?type=${type}`
        })
      } else if (type == 'P') {
        this.$navToPage({
          url: `/packageMaterial/pages/newSale/index?type=${type}`
        })
      }
    },

    // 去过程反馈
    toFeedback(id) {
      this.$navToPage({
        url: `/packageWorkorder/pages/processFeedback?id=${id}`
      })
    },

    toDetail(id) {
      this.$navToPage({
        url: `/packageWorkorder/pages/orderDetail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  background: #ffffff;
  padding: 0 20rpx 20rpx;
}

.order-list-container {
  padding: 30rpx 30rpx 0;

  .item {
    @include zj-card;
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    padding: 0 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .item-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 1px solid #d6e0f2;
      padding: 30rpx 0 20rpx;

      .left {
        flex: 1;
        width: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .title {
          font-size: 40rpx;
          font-weight: 600;
          color: $theme-color;
          margin-right: 12rpx;
        }

        .text {
          line-height: 48rpx;
          padding: 0 16rpx;
          background: #f4f5f9;
          border-radius: 8rpx;
          margin-right: 12rpx;

          text {
            color: $assist-color;
          }
        }

        .tags {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;

          .tag {
            margin-top: 10rpx;
            flex-shrink: 0;
            height: 36rpx;
            line-height: 36rpx;
            border-radius: 8rpx;
            border: 1px solid $theme-color;
            color: $theme-color;
            font-size: 24rpx;
            padding: 0 10rpx;
            box-sizing: border-box;
            font-weight: 500;
            margin-right: 10rpx;

            &:last-child {
              margin-right: 0;
            }

            &.red {
              border: 1px solid $minor-color;
              color: $minor-color;
            }

            &.red_solid {
              border: 1px solid $minor-color;
              color: #ffffff;
              background: $minor-color;
            }

            &.orange {
              border: 1px solid $assist-color;
              color: $assist-color;
            }

            &.green {
              border: 1px solid $success-color;
              color: $success-color;
            }
          }
        }
      }

      .right {
        float: right;
        flex-shrink: 0;
        height: 56rpx;
        display: flex;
        align-items: center;

        .iconfont {
          color: $minor-color;
        }

        .time {
          color: $minor-color;
          margin-left: 4rpx;
        }
      }

      .status {
        color: $minor-color;
        line-height: 56rpx;
      }
    }

    .item-main {
      .row {
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        &.address-row {
          align-items: flex-start;

          .value {
            align-items: flex-start;
          }
        }

        .label {
          color: $sec-font;
          flex-shrink: 0;
          margin-right: 20rpx;
          line-height: 36rpx;
        }

        .value {
          flex: 1;
          display: flex;
          align-items: center;

          .val {
            line-height: 32rpx;
          }

          .num {
            margin-left: 4rpx;

            text {
              color: $theme-color;
            }
          }

          .tag {
            height: 36rpx;
            padding: 0 10rpx;
            border-radius: 4rpx;
            background: #ecf5ff;
            color: $theme-color;
            font-size: 20rpx;
            font-weight: 500;
            margin-left: 10rpx;
            line-height: 36rpx;
            box-sizing: border-box;
          }

          .fun {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            padding: 0 20rpx;

            .iconfont {
              color: $theme-color;
              margin-right: 6rpx;
            }

            .text {
              color: $theme-color;
            }
          }
        }
      }
    }

    .item-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 30rpx 0;
      ::v-deep .u-button {
        width: 160rpx;
        margin: 0;
        margin-left: 20rpx;
      }
    }
  }
}
</style>