schangxiang@126.com
2024-04-25 4d14b84903bf0277c5e8b9b3138c5e1d981e95db
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
  <a-modal
    title="编辑发货出库"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="发货单号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入发货单号" v-decorator="['orderNo']" />
        </a-form-item>
        <a-form-item label="单据大类" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select style="width: 100%" placeholder="请选择单据大类" v-decorator="['orderLargeCategory', {rules: [{ required: true, message: '请选择单据大类!' }]}]">
            <a-select-option v-for="(item,index) in orderLargeCategoryData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="单据小类" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select style="width: 100%" placeholder="请选择单据小类" v-decorator="['orderSubclass', {rules: [{ required: true, message: '请选择单据小类!' }]}]">
            <a-select-option v-for="(item,index) in orderSubclassData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="单据总数量" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input-number placeholder="请输入单据总数量" style="width: 100%" v-decorator="['orderQuantity']" />
        </a-form-item>
        <a-form-item label="发货批号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input-number placeholder="请输入发货批号" style="width: 100%" v-decorator="['dispatchedBatch']" />
        </a-form-item>
        <a-form-item label="目标仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入目标仓库" v-decorator="['areaName']" />
        </a-form-item>
        <a-form-item label="发货人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入发货人" v-decorator="['dispatchedWorker']" />
        </a-form-item>
        <a-form-item label="发货时间" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-date-picker style="width: 100%" placeholder="请选择发货时间" v-decorator="['dispatchedTime']" @change="onChangedispatchedTime"/>
        </a-form-item>
        <a-form-item label="收货地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入收货地址" v-decorator="['shippingAddress']" />
        </a-form-item>
        <a-form-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入客户" v-decorator="['customer']" />
        </a-form-item>
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
 
<script>
  import moment from 'moment'
  import {
    DispatchedOutboundOrderEdit
  } from '@/api/modular/main/DispatchedOutboundOrderManage'
  export default {
    data () {
      return {
        Id: 0,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        record: {},
        orderLargeCategoryData: [],
        orderSubclassData: [],
        dispatchedTimeDateString: '',
        orderStatusData: [],
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (record) {
        this.visible = true;
        this.Id = record.id;
        this.$nextTick(() => {
        });
        //深度拷贝 移除VUE的监听,防止INDEX页面值变动
        this.record = JSON.parse(JSON.stringify(record))
        this.$nextTick(() => {
          this.form.setFieldsValue(
            {
              id: record.id,
              orderNo: record.orderNo,
              orderLargeCategory: record.orderLargeCategory,
              orderSubclass: record.orderSubclass,
              orderQuantity: record.orderQuantity,
              dispatchedBatch: record.dispatchedBatch,
              areaName: record.areaName,
              dispatchedWorker: record.dispatchedWorker,
              shippingAddress: record.shippingAddress,
              customer: record.customer
            }
          )
        })
        this.form.getFieldDecorator('dispatchedTime', { initialValue: moment(record.dispatchedTime, 'YYYY-MM-DD') })
        this.dispatchedTimeDateString = moment(record.dispatchedTime).format('YYYY-MM-DD')
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (values[key] == null) continue
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
                 this.record[key] = values[key]
              } else {
                 this.record[key] = values[key]
              }
            }
            values.dispatchedTime = this.dispatchedTimeDateString
            this.record.dispatchedTime = this.dispatchedTimeDateString
            DispatchedOutboundOrderEdit(this.record).then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.confirmLoading = false
                this.$emit('ok', this.record)
                this.handleCancel()
              } else {
                this.$message.error('编辑失败:' + JSON.stringify(res.message))
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          }else{
            this.confirmLoading = false
          } 
        });
      },
      onChangedispatchedTime(date, dateString) {
        this.dispatchedTimeDateString = dateString
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>