zfire-newmall-admin/src/views/secondHandMall/orderManagement/deliverGoods.vue

<template>
  <zj-page-container>
    <zj-page-fill>
      <div style="box-sizing: border-box; padding:10px;">
        <zj-form-container ref="formRef" :form-data="formData" :form-attributes="{ size: 'mini' }">
          <zj-form-module title="客户信息" label-width="80px" :form-data="formData" :form-items="formItems" />
          <zj-form-module title="商品信息" label-width="80px" :form-data="formData" :form-items="formItems2" />
        </zj-form-container>
      </div>
    </zj-page-fill>
    <div style="box-sizing: border-box; padding: 10px; text-align: right;">
      <el-button type="primary" size="small" @click="queding">确定</el-button>
    </div>
  </zj-page-container>
</template>

<script>
import getLbsAmapRegion from "./getLbsAmapRegion.js"
import ImageUpload from '@/components/file-upload'
import editTable from '@/components/template/editTable.js'
import { esOrderSend } from '@/api/orderManagement'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { esOrderDetail } from "@/api/orderManagement";
import { getCompanyList } from "@/api/common";
export default {
  components: {ImageUpload},
  mixins: [getLbsAmapRegion, editTable],
  props:{
    detailsId: {
      type: [String, Number],
      default: ""
    },
  },
  data(){
    return {
      formData: {
        esOrderInfos:[],
        pickType:"",
        logisticsCode:"",
        logisticsName:"",
        logisticsNo:"",
      },
      classifyList:[]
    }
  },
  created(){
    getCompanyList().then(res=>{
      this.classifyList = res.data
    })
  },
  computed: {
    formItems(){
      return [{
        name: 'el-radio',
        options: [
          { label: '自提', value: "YES" },
          { label: '物流快递', value: "NO" },
        ],
        md: 12,
        attributes: { disabled: this.disabled },
        formItemAttributes: { label: '发货方式', prop: 'pickType', rules:[{ required: true, message: '请填写', trigger: 'blur' }] }
      },
      {
        name: 'slot-component',
        md: 12,
        formItemAttributes: {
          label: '',
          'label-width': '0px',
          prop: '',
          rules: []
        },
        render: ()=>{
          return null
        }
      },
      {
        isShow: this.formData.pickType==="NO",
        name: 'el-select',
        options: this.classifyList.map(item=>({label: item.name, value: item.code})),
        md: 6,
        attributes: { disabled: this.disabled },
        formItemAttributes: { label: '物流公司', prop: 'logisticsCode', rules:[{ required: true, message: '请填写', trigger: 'blur' }] }
      },{
        isShow: this.formData.pickType==="NO",
        name: 'el-input',
        md: 6,
        attributes: { disabled: this.disabled },
        formItemAttributes: { label: '快递单号', prop: 'logisticsNo', rules:[{ required: true, message: '请填写', trigger: 'blur' }] }
      }]
    },
    formItems2(){
      return [{
          name: 'slot-component',
          md: 24,
          formItemAttributes: {
            label: '',
            'label-width': '0px',
            prop: 'esOrderInfos',
            rules: [{ required: true, message: '请填写', trigger: 'blur' }]
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return this.convertTableJson(
              value,
              [
                {
                  columnAttributes: {
                    label: '商品分类',
                    prop: 'esCategoryName'
                  },
                },
                {
                  columnAttributes: {
                    label: '商品名称',
                    prop: 'esGoodsName'
                  },
                },
                {
                  columnAttributes: {
                    label: '单位',
                    prop: 'unit'
                  }
                },
                {
                  columnAttributes: {
                    label: '订单数量',
                    prop: 'num'
                  },
                },
                {
                  columnAttributes: {
                    label: '商品价格',
                    prop: 'goodsPrice'
                  },
                },
                {
                  columnAttributes: {
                    label: '金额',
                    prop: 'totalAmount'
                  }
                },
                {
                  columnAttributes: {
                    label: '商品品牌',
                    prop: 'brandName'
                  }
                },
                {
                  columnAttributes: {
                    label: '功率（W）',
                    prop: 'power'
                  }
                },
                {
                  columnAttributes: {
                    label: '制造日期',
                    prop: 'productionTime'
                  }
                },
                {
                  columnAttributes: {
                    label: '能效标识',
                    prop: 'energyLabel'
                  }
                },
              ],
              {
                isEdit: false,
                isAdd: false,
                isDel: false
              },
              {}
            )
          }
        }]
    }
  },
  watch: {
    detailsId: {
      handler(newVal, oldVal) {
        this.getEsOrderDetail()
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getEsOrderDetail(){
      esOrderDetail({
        esOrderId: this.detailsId
      }).then(res=>{
        this.formData = {
          esOrderInfos:[{...res.data}]
        }
      })
    },
    queding(){
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if(valid){
          esOrderSend({
            esOrderId: this.detailsId,
            ...this.formData,
            esOrderInfos: undefined
          }).then(res=>{
            this.$message({ type: 'success', message: `发货成功!` })
            this.$emit("removeTab")
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>