wash_server_v2/admin-ui/src/views/workbench/workAppointmentOrder/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item prop="appointmentTime">
        <el-date-picker clearable v-model="queryParams.appointmentTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择创建时间"></el-date-picker>
      </el-form-item>
      <el-form-item prop="contactName">
        <el-input v-model="queryParams.contactName" placeholder="请输入客户名称" clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item prop="contactPhone" label-width="90px">
        <el-input v-model="queryParams.contactPhone" placeholder="请输入客户手机号" clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-tabs type="border-card" v-model="virtualListStatus" @tab-click="changeOrderStatus">
      <el-tab-pane label="待接单" :name="'0'" ></el-tab-pane>
      <el-tab-pane label="取衣中" :name="'1'"></el-tab-pane>
      <el-tab-pane label="待支付" :name="'4'"></el-tab-pane>
      <el-tab-pane label="待入厂" :name="'5'"></el-tab-pane>
      <el-tab-pane label="清洗中" :name="'6'"></el-tab-pane>
      <el-tab-pane label="待上挂" :name="'8'"></el-tab-pane>
      <el-tab-pane label="待送衣" :name="'9'"></el-tab-pane>
      <el-tab-pane label="送衣中" :name="'10'"></el-tab-pane>
      <el-tab-pane label="已完成" :name="'12'"></el-tab-pane>

      <el-table v-loading="loading" fit highlight-current-row border stripe :data="clothList">
        <el-table-column label="预约单号" align="center" prop="orderNo" width="200px" />
        <el-table-column label="预约时间" align="center" prop="appointmentTime" width="160px" />
        <el-table-column label="是否大件" align="center" width="100px">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isLargeItem" />
          </template>
        </el-table-column>
        <el-table-column label="是否拆装" align="center" width="100px">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isDisassemblyAndAssembly" />
          </template>
        </el-table-column>
        <el-table-column label="件数" align="center" prop="appointmentCount" width="80px" />
        <el-table-column label="客户姓名" align="center" prop="contactName" width="120px">
          <template slot-scope="scope">
            <div>{{ scope.row.contactName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="客户电话" align="center" prop="contactName" width="120px">
          <template slot-scope="scope">
            <div>{{ scope.row.contactPhone }}</div>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" width="120">
          <template slot-scope="scope">
            <span class="value">{{ scope.row.payAmount > 0 ? scope.row.payAmount : '未定价' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" width="150">
          <template slot-scope="scope">
            <div class="status-group">
              <dict-tag :options="dict.type.cloth_order_status" :value="scope.row.orderStatus" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="取衣方式" align="center" width="120px">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.cloth_take_type" :value="scope.row.takeClothWay" />
          </template>
        </el-table-column>
        <el-table-column label="配送方式" align="center" width="120px">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.order_cloth_delivery_way" :value="scope.row.deliveryWay" />
          </template>
        </el-table-column>
        <el-table-column label="派送员" align="center" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.takeClothAppUserId == null || scope.row.takeClothAppUserId == ''">- -</span>
            <span v-if="scope.row.takeClothAppUserId != null || scope.row.takeClothAppUserId != ''">
              {{ scope.row.takeClothAppUserName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="派送员手机号" align="center" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.takeClothAppUserId == null || scope.row.takeClothAppUserId == ''">- -</span>
            <span v-if="scope.row.takeClothAppUserId != null || scope.row.takeClothAppUserId != ''">
              {{ scope.row.takeClothAppUserPhone }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="地址明细" align="center" prop="address" min-width="220px" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                       v-if="scope.row.orderStatus == '0' || scope.row.orderStatus == '9'">派单
            </el-button>
            <el-button type="text" icon="el-icon-delete" @click="handleCancel(scope.row)"
                       v-if="scope.row.deliveryStatus == '10000'">取消订单
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList" />

      <!-- 添加或修改洗衣订单对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
        <el-row :gutter="15">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-col :span="24">
              <el-form-item label="配送方式" prop="service_trans_id">
                <el-radio-group v-model="form.service_trans_id">
                  <el-radio-button v-if="virtualListStatus !== 1" key="0" label="0">第三方配送</el-radio-button>
                  <el-radio-button key="1" label="1">门店配送</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.service_trans_id == 1">
              <el-form-item label="配送员" prop="takeClothAppUserId">
                <el-select v-model="form.takeClothAppUserId" placeholder="请选择配送员" clearable>
                  <el-option v-for="man in deliveryManList" :key="man.appUserId" :label="man.realName"
                             :value="man.appUserId" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div>
          <el-button type="primary" @click="submitForm" style="margin-left: 40%">提交</el-button>
        </div>
      </el-dialog>
    </el-tabs>

    <!-- 添加或修改商品品牌管理对话框 -->
    <el-dialog title="同城配送信息" :visible.sync="intracityExpressOpen" size="50%" append-to-body>
      <el-row :gutter="15" style="margin-bottom: 80px; margin-left: 20px; width: calc(100% - 20px)">
        <el-col :span="24">
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label"> 配送公司</template>
              <dict-tag :options="dict.type.express_service_type" :value="intracityExpressOrderInfo.service_trans_id" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 配送订单状态</template>
              <dict-tag :options="dict.type.intracity_express_order_status"
                        :value="intracityExpressOrderInfo.order_status" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 配送距离</template>
              <span v-if="intracityExpressOrderInfo.distance < 1000">{{ intracityExpressOrderInfo.distance }}米</span>
              <span v-else>{{ intracityExpressOrderInfo.distance / 1000 }}千米</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 支付费用</template>
              {{ intracityExpressOrderInfo.actualfee / 100 }}元
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 违约金</template>
              {{ intracityExpressOrderInfo.deductfee / 100 }}元
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"></template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 发单时间</template>
              {{ transDate(intracityExpressOrderInfo.create_time) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 配送员接单时间</template>
              {{ transDate(intracityExpressOrderInfo.accept_time) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 配送员取货时间</template>
              {{ transDate(intracityExpressOrderInfo.fetch_time) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 配送员送达时间</template>
              {{ transDate(intracityExpressOrderInfo.finish_time) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 取消时间</template>
              {{ transDate(intracityExpressOrderInfo.cancel_time) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 预期送达时间</template>
              {{ transDate(intracityExpressOrderInfo.expected_finish_time) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 配送员姓名</template>
              {{ intracityExpressOrderInfo.transporter_info ? intracityExpressOrderInfo.transporter_info.transporter_name : ''
              }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 配送员手机</template>
              {{ intracityExpressOrderInfo.transporter_info ? intracityExpressOrderInfo.transporter_info.transporter_phone : ''
              }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 取件人姓名</template>
              {{ intracityExpressOrderInfo.store_info ? intracityExpressOrderInfo.store_info.store_name : '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 取件人电话</template>
              {{ intracityExpressOrderInfo.store_info ? intracityExpressOrderInfo.store_info.phone_num : '' }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 取件地址</template>
              {{ intracityExpressOrderInfo.store_info ? intracityExpressOrderInfo.store_info.address : '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 收件人姓名</template>
              {{ intracityExpressOrderInfo.receiver_info ? intracityExpressOrderInfo.receiver_info.receiver_name : '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 收件人电话</template>
              {{ intracityExpressOrderInfo.receiver_info ? intracityExpressOrderInfo.receiver_info.phone_num : '' }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 收件地址</template>
              {{ intracityExpressOrderInfo.receiver_info ? intracityExpressOrderInfo.receiver_info.address : '' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" style="margin-left: 5%">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 订单出货对话框 -->
    <el-dialog title="订单出货信息" :visible.sync="openDeliveryPage" size="40%" append-to-body
               :before-close="deliveryClose">
      <el-row :gutter="15">
        <el-form ref="deliveryVo" :model="deliveryVo" :rules="deliveryRules" label-width="120px">
          <el-col :span="24">
            <el-form-item label="快递公司" prop="deliveryCompany">
              <el-radio-group v-model="deliveryVo.deliveryCompany" @input="changeDeliveryId">
                <el-radio-button v-for="dict in deliveryData" :label="dict.deliveryName"
                                 :key="dict.deliveryName"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="服务类型" prop="serviceType">
              <div class="servicecard" v-for="del in serviceData" :key="del.serviceType" @click="checkserviceId(del)"
                   :class="{ active: deliveryVo.serviceType == del.serviceType }">
                <div class="check"><i class="el-icon-check"></i></div>
                {{ del.serviceName }}
              </div>
            </el-form-item>

            <el-form-item label="预期揽件时间" prop="expectTime">
              <el-date-picker
                type="datetime"
                placeholder="选择预期揽件时间"
                v-model="deliveryVo.expectTime"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :picker-options="{
                                    disabledDate: (time) => {
                                        return time.getTime() < Date.now() - 3600 * 1000 * 24
                                    },
                                    selectableRange: startTimeRange
                                }"
                :default-time="deliTime"
                class="date_picker"
                :editable="false"
              ></el-date-picker>
            </el-form-item>

            <!-- <el-form-item label="包裹数量" prop="count">
  <el-input v-model="deliveryVo.count" type="number" placeholder="请输入包裹数量" clearable></el-input>
</el-form-item> -->

            <el-form-item label="货物高度" prop="spaceHeight">
              <el-input v-model="deliveryVo.spaceHeight" placeholder="请输入货物高度" clearable>
                <template slot="append">厘米(cm)</template>
              </el-input>
            </el-form-item>

            <el-form-item label="货物长度" prop="spaceLength">
              <el-input v-model="deliveryVo.spaceLength" placeholder="请输入货物长度" clearable>
                <template slot="append">厘米(cm)</template>
              </el-input>
            </el-form-item>

            <el-form-item label="货物宽度" prop="spaceWidth">
              <el-input v-model="deliveryVo.spaceWidth" placeholder="请输入货物宽度" clearable>
                <template slot="append">厘米(cm)</template>
              </el-input>
            </el-form-item>

            <el-form-item label="货物总重量" prop="weight">
              <el-input v-model="deliveryVo.weight" placeholder="请输入货物总重量" clearable>
                <template slot="append">千克 (kg)</template>
              </el-input>
            </el-form-item>

            <el-form-item label="备注信息" prop="customRemark">
              <el-input v-model="deliveryVo.customRemark" rows="5" type="textarea"
                        placeholder="请输入备注信息，比如易碎物品……" maxlength="500" show-word-limit
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDelivery('deliveryVo')" style="margin-left: 5%">提交</el-button>
        <el-button @click="cancelDelivery">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 快递信息对话框 -->
    <el-dialog title="快递信息" :visible.sync="openDeliveryinfo" size="40%" append-to-body
               :before-close="deliveryinfoClose">
      <div class="deliveryView">
        <div class="info">
          <span>快递公司：</span>
          <span>{{ deliveryView.name }}</span>
        </div>
        <div class="info">
          <span>收货地址：</span>
          <span>{{ deliveryView.address }}</span>
        </div>
      </div>

      <el-timeline v-if="deliveryView.pathItemList.length">
        <el-timeline-item v-for="(item, index) in deliveryView.pathItemList" :key="index" :timestamp="item.actionTime">
          {{ item.actionMsg }}
        </el-timeline-item>
      </el-timeline>

      <el-empty description="暂无快递信息" v-else></el-empty>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-left: 5%" @click="openDeliveryinfo = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAppointmentClothOrderList,
  setDeliveryManByAppointment,
  cancelAppointmentOrderByAppointment,
  setIntracityExpress,
  orderClothSetThirdDelivery,
  setSendDelivery
} from '@/api/order/cloth'
import { getDeliveryManListByOrg } from '../../../api/app/delivery'
import { intracityExpressGetOrderInfo } from '../../../api/express/intracity'
import { formatDate } from '../../../utils'
import { getdeliveryAll, getDeliveryPath } from '../../../api/order/goods'
import { getDeliveryPathByClothOrderNo } from '../../../api/express/delivery'

export default {
  name: 'WorkAppointmentOrder',
  dicts: ['cloth_order_status', 'sys_normal_disable', 'sys_yes_no', 'cloth_take_type', 'cloth_send_type', 'order_cloth_delivery_way', 'express_service_type', 'intracity_express_order_status'],
  data() {
    var validateNumberInput = (rule, value, callback) => {
      if (!value || isNaN(value)) {
        callback(new Error('只能输入数字，不能为空'))
      } else {
        callback()
      }
    }
    return {
      orderStatus: '1',
      virtualListStatus: '0',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 预约订单表格数据
      clothList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      intracityExpressOpen: false,
      intracityExpressOrderInfo: {},
      openDeliveryPage: false,
      deliveryVo: {
        bizId: '',
        // count: 1,
        customRemark: '',
        deliveryCompany: '',
        deliveryId: '',
        expectTime: '',
        orderId: null,
        serviceName: '',
        serviceType: null,
        spaceHeight: null,
        spaceLength: null,
        spaceWidth: null,
        weight: null
      },
      deliveryData: [], //快递公司数据
      serviceData: [], //快递公司服务类型数据
      openDeliveryinfo: false,
      deliveryView: {
        name: '',
        pathItemList: []
      },
      startTimeRange: null,
      deliTime: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: null,
        contactName: null,
        contactPhone: null,
        orderStatus: null,
        virtualListStatus: '0'
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        service_trans_id: [
          {
            required: true,
            message: '配送方式不能为空',
            trigger: 'blur'
          }
        ],
        takeClothAppUserId: [
          {
            required: true,
            message: '派送员不能为空',
            trigger: 'blur'
          }
        ]
      },
      deliveryRules: {
        deliveryName: [{ required: true, message: '请选择物流公司', trigger: 'change' }],
        serviceType: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
        expectTime: [{ required: true, message: '选择预期揽件时间', trigger: 'blur' }],
        // count: [
        //   { required: true, message: '请输入包裹数量', trigger: 'blur' },
        // ],
        spaceHeight: [
          { required: true, message: '请输入货物高度', trigger: 'blur' },
          { validator: validateNumberInput, trigger: 'blur' }
        ],
        spaceLength: [
          { required: true, message: '请输入货物长度', trigger: 'blur' },
          { validator: validateNumberInput, trigger: 'blur' }
        ],
        spaceWidth: [
          { required: true, message: '请输入货物宽度', trigger: 'blur' },
          { validator: validateNumberInput, trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请输入货物总重量', trigger: 'blur' },
          { validator: validateNumberInput, trigger: 'blur' }
        ],
        customRemark: [{ required: true, message: '请输入备注信息，比如易碎物品……', trigger: 'blur' }]
      },
      deliveryManList: []
    }
  },
  created() {
    var userInfoVO = this.getUserInfo()
    console.log(userInfoVO)
    if (userInfoVO.userType == '02') {
      this.getDeliveryList()
    } else {
      this.getdeliveryAll()
    }

    this.getList()
  },
  methods: {
    getDeliveryList() {
      getDeliveryManListByOrg().then((response) => {
        this.deliveryManList = response.data
      })
    },
    changeOrderStatus() {
      this.queryParams.virtualListStatus = this.virtualListStatus
      this.handleQuery()
    },
    /** 查询洗衣订单列表 */
    getList() {
      this.loading = true
      this.queryParams.virtualListStatus = this.virtualListStatus
      getAppointmentClothOrderList(this.queryParams).then((response) => {
        this.clothList = response.rows
        this.total = response.total
        this.loading = false
        this.$forceUpdate()
      })
    },
    // 取消按钮
    cancel() {
      this.intracityExpressOpen = false
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderNo: null,
        orgId: null,
        sourceType: null,
        factoryId: null,
        appUserId: null,
        province: null,
        city: null,
        area: null,
        address: null,
        addressDetail: null,
        longitude: null,
        latitude: null,
        contactName: null,
        contactPhone: null,
        orderAmount: null,
        payAmount: null,
        payType: null,
        payTime: null,
        outTradeOrderNo: null,
        orderSource: null,
        refundAmount: null,
        refundContent: null,
        appointmentTime: null,
        appointmentCount: null,
        orderStatus: '0',
        virtualListStatus: 1,
        takeClothTime: null,
        takeClothAppUserId: null,
        setPriceTime: null,
        pickUpTime: null,
        washClothStartTime: null,
        washClothEndTime: null,
        sendToStoreTime: null,
        sendToUserTime: null,
        refundApplyTime: null,
        refundTime: null,
        refundStatus: '0',
        refundReason: null,
        sendClothAppUserId: null,
        takeClothWay: null,
        sendClothWay: null,
        couponAmount: null,
        finishTime: null,
        employeeId: null,
        delFlag: null,
        createById: null,
        createBy: null,
        createTime: null,
        updateById: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        isDisassemblyAndAssembly: null,
        isLargeItem: null,
        clothSpeedId: null,
        clothSpeedName: null,
        isSpecial: null,
        deductAmount: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 派单按钮操作 */
    handleUpdate(row) {
      this.reset()
      var userInfoVO = this.getUserInfo()
      if (userInfoVO.userType == '01') {
        this.openDeliveryPage = true
        this.deliveryVo.deliveryCompany = this.deliveryData[0].deliveryName
        this.serviceData = this.deliveryData[0].serviceType
        // 获取当前时间
        const now = new Date()
        // 增加一个小时
        now.setHours(now.getHours() + 1)
        // 提取时分秒并格式化
        const hours = ('0' + now.getHours()).slice(-2)
        const minutes = ('0' + now.getMinutes()).slice(-2)
        const seconds = ('0' + now.getSeconds()).slice(-2)
        // 结果字符串
        this.deliTime = `${hours}:${minutes}:${seconds}`
        this.deliveryVo.orderNo = row.orderNo
      } else {
        if (this.virtualListStatus === 1) {
          this.form.service_trans_id = '1'
        }
        this.open = true
        this.form.orderNo = row.orderNo
        this.form.orderStatus = row.orderStatus
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.service_trans_id == 0) {
            setIntracityExpress({ orderNo: this.form.orderNo }).then((res) => {
              this.$modal.msgSuccess('派单成功')
              this.open = false
              this.getList()
            })
          } else {
            if (this.form.orderStatus == '0') {
              setDeliveryManByAppointment({
                deliveryId: this.form.takeClothAppUserId,
                orderNo: this.form.orderNo
              }).then((response) => {
                this.$modal.msgSuccess('派单成功')
                this.open = false
                this.getList()
              })
            } else {
              setSendDelivery({
                deliveryManId: this.form.takeClothAppUserId,
                orderNo: this.form.orderNo
              }).then((response) => {
                this.$modal.msgSuccess('派单成功')
                this.open = false
                this.getList()
              })
            }
          }
        }
      })
    },
    handleCancel(row) {
      this.$confirm('是否确认取消该预约订单？')
        .then(() => {
          cancelAppointmentOrderByAppointment({ orderNo: row.orderNo }).then((response) => {
            this.$modal.msgSuccess('取消完成')
            this.getList()
          })
        })
        .catch(() => {
        })
    },
    checkClose(done) {
      this.$confirm('是否关闭表单，关闭后数据将丢失？')
        .then(function() {
          done()
        })
        .then(() => {
        })
        .catch(() => {
        })
    },
    handleLogistics(row, deliveryType) {
      getDeliveryPathByClothOrderNo({ orderNo: row.orderNo, deliveryType: deliveryType }).then((res) => {
        this.deliveryView.name = row.deliveryName
        this.deliveryView.pathItemList = res.data.pathItemList
        this.deliveryView.address = row.province + row.city + row.area + row.address + row.addressDetail

        this.openDeliveryinfo = true
      })
    },
    handleGetExpressInfo(row, deliveryType) {
      intracityExpressGetOrderInfo({ orderNo: row.orderNo, deliveryType: deliveryType }).then((res) => {
        this.intracityExpressOpen = true
        this.intracityExpressOrderInfo = res.data
      })
    },
    transDate(pay_time) {
      return formatDate(pay_time * 1000, 1)
    },
    //获取快递公司
    getdeliveryAll() {
      getdeliveryAll().then((res) => {
        this.deliveryData = res.data
      })
    },
    //切换快递获取其他数据
    changeDeliveryId(value) {
      this.deliveryData.forEach((item, index) => {
        if (value == item.deliveryName) {
          this.deliveryVo.deliveryId = item.deliveryId
          this.deliveryVo.bizId = item.bizId

          this.serviceData = item.serviceType
        }
      })
    },
    checkserviceId(del) {
      this.deliveryVo.serviceType = del.serviceType
      this.deliveryVo.serviceName = del.serviceName
    },
    cancelDelivery() {
      this.openDeliveryPage = false
      this.deliveryreset()
    },
    // 表单重置
    deliveryreset() {
      this.deliveryVo = {
        bizId: '',
        // count: 1,
        customRemark: '',
        deliveryCompany: '',
        deliveryId: '',
        expectTime: '',
        orderId: 0,
        serviceName: '',
        serviceType: null,
        spaceHeight: null,
        spaceLength: null,
        spaceWidth: null,
        weight: null
      }
    },
    deliveryClose(done) {
      this.$confirm('是否关闭出货信息窗口，确认关闭？')
        .then(function() {
          done()
        })
        .then(() => {
        })
        .catch(() => {
        })
    },
    deliveryinfoClose(done) {
      this.$confirm('是否关闭快递信息窗口，确认关闭？')
        .then(function() {
          done()
        })
        .then(() => {
        })
        .catch(() => {
        })
    },
    submitDelivery(formName) {
      this.$confirm('是否确认出货配送？')
        .then(() => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              orderClothSetThirdDelivery(this.deliveryVo).then((res) => {
                this.$message.success('操作成功')
                this.getList()
                this.openDeliveryPage = false
                this.deliveryreset()
              })
            }
          })
        })
        .catch(() => {
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.servicecard {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 5px;
  margin: 0 10px 10px 0;
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0px; /* 调整三角形的大小和位置 */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-top: 35px solid #007bff;
    z-index: 50;
    opacity: 0;
  }

  .check {
    position: absolute;
    top: -5px;
    right: 3px;
    color: #fff;
    z-index: 100;
    opacity: 0;
  }

  &.active {
    &::after {
      opacity: 1;
    }

    .check {
      opacity: 1;
    }
  }
}

.deliveryView {
  margin: 0 20px 20px 20px;
  padding: 15px;
  border-radius: 5px;
  background-color: #f4f4f4;
  color: #555;

  .info:first-child {
    margin-bottom: 10px;
  }
}
</style>
s