supply-front/src/components/LogisticsTabs/index.vue

<template>
  <div class="logistics">
    <div style="margin: 20px 0">
      <el-radio-group v-model="curTarget" size="small" @change="handleChange">
        <template v-for="(item, index) in tabsList">
          <el-radio-button v-if="item.show " :key="index" :label="item.value">{{ item.label }}</el-radio-button>
        </template>
      </el-radio-group>
    </div>
    <el-card v-if="curTarget === 1 && tabsList[curTarget - 1].show ">
      <div slot="header">
        <span>物流信息</span>
      </div>
      <slot name="header" />
      <div>
        <el-timeline v-if="logisticsDetail.length" :reverse="false">
          <el-timeline-item
            v-for="(item, index) in logisticsDetail"
            :key="index"
            placement="top"
            type="success"
            :timestamp="item.time"
          >
            <el-row :gutter="20">
              <el-col class="logistics-title"> {{ item && item.status && statusObj[item.status].label }} </el-col>
              <el-col>
                <div class="flex">
                  <div>{{ item.comment }}</div>
                  <!-- <div>{{ item.createTime }}</div> -->
                </div>
                <div class="flex">
                  <div>{{ item.statusDetails }}</div>
                  <!-- <div>{{ item.createTime }}</div> -->
                </div>
              </el-col>
            </el-row>
          </el-timeline-item>
        </el-timeline>
        <div v-else class="tip">暂无物流信息</div>
      </div>
    </el-card>
    <el-card v-if="curTarget === 2 && tabsList[curTarget - 1].show ">
      <div slot="header">
        <span>物流费用</span>
      </div>
      <zj-table
        :table-attributes="defaultTableAttributes"
        :is-drop="true"
        :columns="formLogistics"
        :table-data="logisticsData"
      />
    </el-card>
    <el-card v-if="curTarget === 3 && tabsList[curTarget - 1].show">
      <div slot="header">
        <span>出库条码</span>
      </div>
      <zj-table :is-drop="true" :columns="formOutbound" :table-data="outboundData" />
    </el-card>
    <el-card v-if="curTarget === 4 && tabsList[curTarget - 1].show">
      <div slot="header">
        <span>安装信息</span>
      </div>

      <el-form ref="installDetail" :model="installDetail" label-width="120px" :inline="false" size="mini">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="信息编码">
              <el-input :value="installDetail.gongDanId" style="width: 85%;" readonly /> <el-button class="tag-read" :data-clipboard-text="installDetail.gongDanId" type="primary" size="mini" @click="copy">复制</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建网点名称">
              <el-input :value="`${installDetail.createWname} (${installDetail.createNumber})`" style="width: 85%;" readonly /><el-button class="tag-read" :data-clipboard-text="installDetail.createWname" type="primary" size="mini" @click="copy">复制</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总部信息编码">
              <el-input :value="installDetail.pgid" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售服务网点">
              <el-input :value="`${installDetail.salesWname} (${installDetail.salesNumber})`" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收派工网点">
              <el-input :value="`${installDetail.afterWname} (${installDetail.afterNumber})`" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主要服务人员">
              <el-input :value="installDetail.workerName" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话">
              <el-input :value="installDetail.workerPhone" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售后服务网点">
              <el-input :value="`${installDetail.installName} (${installDetail.installNumber})`" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="辅助服务人员">
              <el-input :value="installDetail.assistName" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话">
              <el-input :value="installDetail.assistPhone" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单接收时间">
              <el-input :value="installDetail.afterTime" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单状态">
              <el-input :value="orderState[installDetail.orderState || 1]" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="派工状态">
              <el-input :value=" appointState[installDetail.appointState || 0] " readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完工情况">
              <el-input :value="installDetail.orderOver || '0/0'" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟单信息员">
              <el-input :value="`${installDetail.adminOfficerName} (${installDetail.adminOfficerNumber})`" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单时间">
              <el-input :value="installDetail.createTime" readonly />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <zj-table :is-drop="true" :columns="installInfo" :table-data=" installDetail && installDetail.logs" />
    </el-card>
    <el-card v-if="curTarget === 5 && tabsList[curTarget - 1].show">
      <div slot="header">
        <span>安装条码</span>
      </div>
      <zj-table :is-drop="true" :columns="formOutbound" :table-data="instalLList" />
    </el-card>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import { getListCostBillV2, getOrderTrackList2, getInstalDetail } from '@/api/logisticsBill'
import { getListCodeV2, getListInstallCodeV2 } from '@/api/barcode'

export default {
  props: {
    jiaxianOrderId: {
      type: String,
      default: null
    },
    detailsId: {
      type: String,
      default: null
    },
    returnShow: {
      type: Boolean,
      default: true
    },
    gongDanId: {
      type: String,
      default: null
    },
    details: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tabsList: [
        {
          label: '物流状态',
          value: 1,
          show: true,
          fun: this.getOrderTrackList2
        },
        {
          label: '物流费用',
          value: 2,
          show: false,
          fun: this.getListCostBillV2
        },
        {
          label: '出库条码',
          value: 3,
          show: true,
          fun: this.getListCodeV2
        },
        {
          label: '安装信息',
          value: 4,
          show: true,
          fun: this.getInstalDetail
        },
        {
          label: '安装条码',
          value: 5,
          show: true,
          fun: this.getListInstallCodeV2
        }
      ],
      curTarget: 1,
      statusObj: {
        COLLECT: {
          label: '揽收',
          value: 'COLLECT'
        },
        OUT_OF_STOCK: {
          label: '出库',
          value: 'OUT_OF_STOCK'
        },
        ASSIVE_BRANCH: {
          label: '到达网点',
          value: 'ASSIVE_BRANCH'
        },
        ASSIGN_BRANCH: {
          label: '指派网点',
          value: 'ASSIGN_BRANCH'
        },
        DELIVERING: {
          label: '派送中',
          value: 'DELIVERING'
        },
        SIGNED: {
          label: '已签收',
          value: 'SIGNED'
        },
        RETURN: {
          label: '退件',
          value: 'RETURN'
        },
        REJECTION: {
          label: '拒收',
          value: 'REJECTION'
        },
        RESCHEDULE: {
          label: '改约',
          value: 'RESCHEDULE'
        },
        OTHER_EXCEPTION: {
          label: '其他异常',
          value: 'OTHER_EXCEPTION'
        }
      },
      orderState: {
        1: '已保存工单', 2: '待分部派工', 3: '待分中心派工', 4: '待网点派工', 5: '待审批改派', 6: '待服务人员处理', 7: '服务人员报完工', 8: '申请售后处理', 9: '已作废工单', 10: '已关闭工单', 99: '非广佛作废'
      },
      appointState: {
        0: '待接收', 1: '待签到', 2: '待采集', 3: '已采集', 4: '已完工', 5: '改约中', 6: '改派中'
      },
      defaultTableAttributes: {
        height: '100%',
        border: true,
        size: 'mini',
        'summary-method': this.$getSummaries,
        'show-summary': true
      },
      logisticsData: [],
      outboundData: [],
      logisticsDetail: [],
      installDetail: {},
      instalLList: []
    }
  },
  computed: {
    formLogistics() {
      return [
        {
          columnAttributes: {
            label: '补贴费用',
            prop: 'allowanceCost',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '所属销售公司类型',
            prop: 'belongCompanyType',
            width: 200
          },
          render: (h, { row }) => {
            const { belongCompanyType } = row
            const typeObj = {
              GE_JIANG: '格匠',
              GUANG_ZHOU: '广州销售公司',
              FO_SHAN: '佛山销售公司',
              OTHER: '其他销售公司'
            }
            return <div>{typeObj[belongCompanyType]}</div>
          }
        },
        {
          columnAttributes: {
            label: '运费结算系数',
            prop: 'coefficient',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '备注',
            prop: 'comment',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '最终运费',
            prop: 'cost',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '客户名称',
            prop: 'customerName',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '客户电话',
            prop: 'customerPhone',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '无法生成的原因',
            prop: 'errorResult',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '是否已经对过帐',
            prop: 'isAccountChecking',
            width: 200
          },
          render: (h, { row }) => {
            const { isAccountChecking } = row
            return <div>{+isAccountChecking ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '是否已经审核',
            prop: 'isAudit',
            width: 200
          },
          render: (h, { row }) => {
            const { isAudit } = row
            return <div>{+isAudit ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '是否完结',
            prop: 'isFinish',
            width: 200
          },
          render: (h, { row }) => {
            const { isFinish } = row
            return <div>{+isFinish ? '已经完结' : '未完结'}</div>
          }
        },
        {
          columnAttributes: {
            label: '实际是否卸货',
            prop: 'isRealUnload',
            width: 200
          },
          render: (h, { row }) => {
            const { isRealUnload } = row
            return <div>{+isRealUnload ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '实际是否上楼',
            prop: 'isRealUpstairs',
            width: 200
          },
          render: (h, { row }) => {
            const { isRealUpstairs } = row
            return <div>{+isRealUpstairs ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '是否卸货',
            prop: 'isUnload',
            width: 200
          },
          render: (h, { row }) => {
            const { isUnload } = row
            return <div>{+isUnload ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '是否上楼',
            prop: 'isUpstairs',
            width: 200
          },
          render: (h, { row }) => {
            const { isUpstairs } = row
            return <div>{+isUpstairs ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '物料名称',
            prop: 'materialCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '计费分类',
            prop: 'materialCostType',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '产品名称',
            prop: 'materialName',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '规格型号',
            prop: 'materialSpecification',
            width: 350
          }
        },
        {
          columnAttributes: {
            label: '物料类型',
            prop: 'materialType',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '商家编码',
            prop: 'merchantCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '商家名称',
            prop: 'merchantName',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '订单号',
            prop: 'orderCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '订单时间',
            prop: 'orderDate',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '订单类型',
            prop: 'orderType',
            width: 200
          },
          render: (h, { row }) => {
            const { orderType } = row
            const typeObj = {
              TOB: '商家机工程机类型',
              ALL: '所有类型，广州的订单统一 开单价',
              TOC: '佛山销售销售订单类型公司'
            }
            return <div>{typeObj[orderType]}</div>
          }
        },
        {
          columnAttributes: {
            label: '订单类型细分',
            prop: 'orderTypeDetail',
            width: 200
          },
          render: (h, { row }) => {
            const { orderType } = row
            const typeObj = {
              PICKING_UP_ORDER: '前置仓提货订单',
              SALE_ORDER: '销售订单',
              MERCHANT_WAREHOUSE_ORDER: '商家仓订单',
              PROJECT_ORDER: '工程机订单',
              SALE_RETURN_ORDER: '销售退货单'
            }
            return <div>{typeObj[orderType]}</div>
          }
        },
        {
          columnAttributes: {
            label: '收货送货地址',
            prop: 'receiptAddress',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '退货单号',
            prop: 'returnOrderCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '补贴结算系数',
            prop: 'subsidyCoefficient',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '嘉贤创建时间',
            prop: 'time',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '费用汇总',
            prop: 'totalCost',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '单价计算',
            prop: 'unitPrice',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '卸货上楼结算系数',
            prop: 'unloadUpstairsCoefficient',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '上楼卸货费用',
            prop: 'unloadUpstairsCost',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '发货仓库编码',
            prop: 'warehouseCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '发货仓库名称',
            prop: 'warehouseName',
            width: 200
          }
        }
      ]
    },
    formOutbound() {
      return [
        {
          columnAttributes: {
            label: '条码',
            prop: 'barCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '出库时间',
            prop: 'consignerTime',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '出库时间',
            prop: 'consignerTimeV2',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '创建人',
            prop: 'createBy',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '创建时间',
            prop: 'createTime',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '送货时间',
            prop: 'deliveryTime',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '送货时间',
            prop: 'deliveryTimeV2',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '物料代码',
            prop: 'materialCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '物料类型',
            prop: 'materialType',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '销售订单号',
            prop: 'orderNumber',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '收货人',
            prop: 'receiptCompany',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '商家名称',
            prop: 'salesCompany',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '规格',
            prop: 'specification',
            width: 350
          }
        },
        {
          columnAttributes: {
            label: '更新人',
            prop: 'updateBy',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '修改时间',
            prop: 'updateTime',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '发货仓库名称',
            prop: 'warehouse',
            width: 200
          }
        }
      ]
    },
    installInfo() {
      return [
        {
          columnAttributes: {
            label: '操作类别',
            prop: 'type'
          }
        },
        {
          columnAttributes: {
            label: '操作内容',
            prop: 'content'
          }
        },
        {
          columnAttributes: {
            label: '最后操作时间',
            prop: 'updatetime'
          }
        },
        {
          columnAttributes: {
            label: '操作人',
            prop: 'operator'
          }
        }
      ]
    },
    installBarCdoe() {
      return [
        {
          columnAttributes: {
            label: '产品类型',
            prop: 'barCode'
          }
        },
        {
          columnAttributes: {
            label: '机型条码',
            prop: 'barCode'
          }
        },
        {
          columnAttributes: {
            label: '条码类型',
            prop: 'barCode'
          }
        },
        {
          columnAttributes: {
            label: '状态',
            prop: 'barCode'
          }
        },
        {
          columnAttributes: {
            label: '采集来源',
            prop: 'barCode'
          }
        },
        {
          columnAttributes: {
            label: '采集时间',
            prop: 'barCode'
          }
        }
      ]
    },
    formInstall() {
      return [
        {
          columnAttributes: {
            label: '产品类型',
            prop: 'specification'
          }
        },
        {
          columnAttributes: {
            label: '机型条码',
            prop: 'barCode'
          }
        },
        {
          columnAttributes: {
            label: '条码类型',
            prop: 'materialType'
          }
        },
        {
          columnAttributes: {
            label: '状态',
            prop: 'orderState'
          },
          render: (h, { row }) => {
            const { orderState } = row
            return <div>{orderState[orderState]}</div>
          }
        },
        {
          columnAttributes: {
            label: '采集来源',
            prop: 'verificationStatus'
          },
          render: (h, { row }) => {
            const { verificationStatus } = row
            const typeObj = {
              1: '广佛设备',
              2: '非广佛设备'

            }
            return <div>{typeObj[verificationStatus]}</div>
          }
        },
        {
          columnAttributes: {
            label: '采集时间',
            prop: 'createTime'
          }
        }
      ]
    }
  },
  mounted() {
    if (this.details && this.details.stockType == 2) {
      this.tabsList = [
        {
          label: '安装信息',
          value: 4,
          show: true,
          fun: this.getInstalDetail
        },
        {
          label: '安装条码',
          value: 5,
          show: true,
          fun: this.getListInstallCodeV2
        }]
    }
    this.getOrderTrackList2()
  },
  methods: {
    handleChange() {
      this.tabsList[this.curTarget - 1].fun()
    },
    getOrderTrackList2() {
      getOrderTrackList2({
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'sale_code',
            compare: '=',
            value: this.jiaxianOrderId
          }
        ]
      }).then(res => {
        this.logisticsDetail = res.data.records
      })
    },
    getListCostBillV2() {
      getListCostBillV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'order_code',
            compare: '=',
            value: this.jiaxianOrderId
          }
        ]
      }).then(res => {
        res.data.records.forEach(item => {
          item.sums1 = ['orderHasSendQty', 'subsidyCoefficient', 'unloadUpstairsCoefficient', 'coefficient']
          item.sums2 = ['cost', 'unitPrice', 'totalCost', 'allowanceCost']
        })
        this.logisticsData = res.data.records
      })
    },
    getListCodeV2() {
      getListCodeV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'order_number',
            compare: '=',
            value: this.jiaxianOrderId
          }
        ]
      }).then(res => {
        this.outboundData = res.data.records
      })
    },
    getListInstallCodeV2() {
      getListInstallCodeV2({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.instalLList = res.data.records
      })
    },
    getInstalDetail() {
      getInstalDetail({ gongDanId: this.gongDanId }).then(res => {
        this.installDetail = res.data || {}
        this.installDetail.logs = this.installDetail.logs.sort((a, b) => b.id - a.id)
      })
    },
    copy() {
      const clipboard = new Clipboard('.tag-read')
      // clipboard.on('success', e => {
      //   this.$successMsg('复制成功');
      // })
      clipboard.on('error', e => {
        console.log('该浏览器不支持复制')
        return false
      })
      this.$successMsg('复制成功')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-timeline-item__tail {
  border-left: 2px solid #67c23a;
}
::v-deep .el-form-item__content {
  line-height: 33px;
}
.logistics-title {
  padding: 10px;
}
.logistics {
  margin: 20px 0;
}

</style>