supply-front/src/views/sales_control/sales_management/components/customer_sales_details.vue

<template>
  <div>
    <el-page-header content="详情" style=" padding: 20px 20px 0 20px;" @back="handleBack" />
    <sales-header ref="header" />
    <sales-table :data-list="dataList" :column="column" @handleSelection="handleSelection">
      <template #events>
        <el-button
          v-if="details.status == 1 && isFront !== false"
          type="primary"
          size="mini"
          @click="handleInform(2)"
        >通知发货</el-button>
        <el-button v-if="details.status == 2 && isFront !== false" size="mini" @click="handleSendRevoke(1)">撤销发货</el-button>
        <el-button v-if="isFront === false && details.status == 1" type="primary" size="mini" @click="handleSignIn(4)">
          签收
        </el-button>
      </template>
    </sales-table>
    <LogisticsTabs v-if="details.status == 2 " style="margin:20px;" />
    <sales-dialog
      :dialog-visible="dialogVisible"
      :customer-number="customerNumber"
      :func="getDialogList"
      @confirm="confirm"
    />
  </div>
</template>

<script>
import SalesDialog from '@/components/SalesDialog/SalesDialog'
import SalesHeader from '@/components/SalesHeader/SalesHeader'
import SalesTable from '@/components/SalesTable/SalesTable'
import { addFrontOrder, getFrontOrderDetail, sbumitFrontOrder, signIn, setSendRevoke } from '@/api/sales'
import { getcustomerFrontList } from '@/api/stock'
import LogisticsTabs from '@/components/LogisticsTabs'
export default {
  name: 'WarehouseForm',
  components: {
    SalesHeader,
    SalesTable,
    SalesDialog,
    LogisticsTabs
  },
  props: ['detailsId', 'pageType'],
  data() {
    return {
      dialogVisible: false,
      customerNumber: '',
      dataList: [],
      details: {},
      selection: [],
      flag: 1,
      column: [
        {
          prop: 'materialName',
          label: '产品名称',
          width: '180'
        },
        {
          prop: 'materialCode',
          label: '物料编码',
          width: '180'
        },
        {
          prop: 'specification',
          label: '规格型号',
          width: '300'
        },
        // {
        //   prop: 'stockQty',
        //   label: '库存数量',
        //   width: '180'
        // },
        {
          prop: 'qty',
          label: '数量',
          width: '180'
        },
        // {
        //   prop: 'volume',
        //   label: '体积',
        //   width: '180'
        // },
        // {
        //   prop: 'totalVolume',
        //   label: '总体积',
        //   width: '180'
        // },
        {
          prop: 'notes',
          label: '备注'
        }
      ],
      activities: [
        {
          content: '活动按期开始',
          color: '#0bbd87',
          timestamp: '2018-04-15'
        },
        {
          content: '通过审核',
          timestamp: '2018-04-13'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        }
      ],
      isFront: null
    }
  },
  created() {
    this.isFront = JSON.parse(localStorage.getItem('supply_user')).isFront
    console.log(this.isFront)
    if (this.detailsId) {
      getFrontOrderDetail({ id: this.detailsId }).then(res => {
        this.dataList = res.data.orders
        this.details = res.data
        this.$refs.header.screenForm = res.data
        this.$refs.header.screenForm.disabled = true

        this.$refs.header.screenForm.provinceId = res.data.province
        this.$refs.header.screenForm.cityId = res.data.city
        this.$refs.header.screenForm.areaId = res.data.area
        this.$refs.header.screenForm.streetId = res.data.street
        this.$refs.header.screenForm.stockType = res.data.stockType == 1 ? '前置仓' : '商家仓'
      })
    }
  },
  methods: {
    getDialogList(p) {
      return getcustomerFrontList(...p)
    },
    confirm(selected) {
      // console.log(selected)
      this.dataList = selected
      this.$refs.header.screenForm.customerName = this.dataList[0].customerName
      this.$refs.header.screenForm.customerNumber = this.dataList[0].customerNumber
      this.customerNumber = this.dataList[0].customerNumber
      this.dialogVisible = false
    },
    handleDel(item, index) {
      this.dataList.splice(index, 1)
    },
    delChange() {
      this.dataList.forEach((k, i) => {
        this.selection.forEach((l, e) => {
          if (k.id === l.id) {
            this.dataList.splice(i, 1)
            this.selection.splice(e, 1)
          }
        })
      })
    },
    handleSelection(data) {
      this.selection = data
    },
    handelSubmit() {
      this.dataList.forEach(k => {
        k.id = ''
        k.directFlag = k.flag
      })
      const params = {
        ...this.$refs.header.screenForm,
        orders: this.dataList
      }
      addFrontOrder(params).then(res => {
        this.$successMsg('新增成功')
        this.handleBack()
        this.$forceUpdate()
      })
    },
    handelSigning() {},
    handleInform(status = 2) {
      sbumitFrontOrder({ id: this.$refs.header.screenForm.id, status }).then(res => {
        this.$successMsg('发货通知')
        this.handleBack()
      })
    },
    handleSignIn(status) {
      this.$confirm('请确定，订单产品客户已完成签收，一旦签收则不能撤销', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        signIn({ id: this.$refs.header.screenForm.id, status }).then(res => {
          this.$successMsg('签收')
          this.handleBack()
        })
      }).catch(() => {

      })
    },
    handleSendRevoke(status) {
      setSendRevoke({ id: this.$refs.header.screenForm.id, status }).then(res => {
        this.$successMsg('撤销发货')
        this.handleBack()
      })
    },
    handleBack() {
      this.$emit('close')
    }

  }
}
</script>

<style scoped></style>