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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="仓库编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="warehouseId">
              <a-select :disabled="editDisabled" show-search :filterOption="filterOption" :options="warehouseOptions" @change="warehouseChange" v-model="model.warehouseId" placeholder="请输入仓库编号"  ></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="货架编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsShelves">
              <a-select :disabled="editDisabled" show-search :filterOption="filterOption" :options="goodsShelvesOptions" @change="goodsShelvesChange" v-model="model.goodsShelves" placeholder="请输入货架编号"  ></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="层数信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="storey">
              <a-select :disabled="editDisabled" show-search :filterOption="filterOption" :options="storeyOptions" v-model="model.storey" placeholder="请输入层数信息"  ></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="品种(存放刀具品种信息)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="variety">
              <a-input v-model="model.variety" placeholder="请输入品种(存放刀具品种信息)"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>
 
<script>
 
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
 
  export default {
    name: 'GoodsShelvesMarkForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      title: {
        type: String,
        default: '',
        required: false
      },
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          warehouseId: [
            { required: true, message: '请选择仓库!'},
          ],
          goodsShelves: [
            { required: true, message: '请选择货架!'},
          ],
          storey: [
            { required: true, message: '请选择层!'},
            { validator: this.validateDuplicate }
          ],
          variety: [
            { required: true, message: '请输入品种信息!'}
          ]
        },
        url: {
          add: "/tms/goodsShelvesMark/add",
          queryWarehouseDictList: '/tms/warehouse/queryWarehouseDictList',
          queryGoodsShelvesDictList: '/tms/goodsShelves/queryGoodsShelvesDictList',
          queryGoodsShelvesStoreyDictList: '/tms/goodsShelves/queryGoodsShelvesStoreyDictList',
          edit: "/tms/goodsShelvesMark/edit",
          queryById: "/tms/goodsShelvesMark/queryById",
          duplicateCheckSelect: '/tms/goodsShelvesMark/duplicateCheckSelect'
        },
        editDisabled: false,
        warehouseOptions: [],
        goodsShelvesOptions: [],
        storeyOptions: []
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      validateDuplicate(rule, value, callback) {
        getAction(this.url.duplicateCheckSelect, {
          warehouseId: this.model.warehouseId,
          goodsShelves: this.model.goodsShelves,
          storey: this.model.storey,
        }).then(res => {
          if (res.success) {
            if (this.title === '新增' && res.result.length > 0) {
              callback(new Error('该货架所在层标签信息已存在!'))
            }
            if (this.title === '编辑' && res.result.length > 0) {
              const result = res.result.filter(item => item.id !== this.model.id)
              if (result.length > 0) {
                callback(new Error('该货架所在层标签信息已存在!'))
              } else {
                callback()
              }
            }
            callback()
          } else {
            callback(new Error(res.message))
          }
        })
      },
      warehouseChange(warehouseId) {
        this.goodsShelvesOptions = []
        this.storeyOptions = []
        this.warehouseId = warehouseId
        getAction(this.url.queryGoodsShelvesDictList, {warehouseId: warehouseId}).then(res => {
          if (res.success) {
            this.goodsShelvesOptions = res.result
          }
        })
      },
      goodsShelvesChange(shelfNumber) {
        this.storeyOptions = []
        getAction(this.url.queryGoodsShelvesStoreyDictList, {
          warehouseId: this.warehouseId,
          shelfNumber: shelfNumber
        }).then(res => {
          if (res.success) {
            this.storeyOptions = res.result
          }
        })
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        getAction(this.url.queryWarehouseDictList, null).then((res)=>{
          if(res.success){
            this.warehouseOptions = res.result
          }
        })
        getAction(this.url.queryGoodsShelvesDictList, { warehouseId: record.warehouseId }).then(res => {
          if (res.success) {
            this.goodsShelvesOptions = res.result
          }
        })
        getAction(this.url.queryGoodsShelvesStoreyDictList,  { warehouseId: record.warehouseId, shelfNumber: record.goodsShelves }).then(res => {
          if (res.success) {
            this.storeyOptions = res.result
          }
        })
        if (this.title === '新增' || this.title === '详情') {
          this.editDisabled = false
        }
        if (this.title === '编辑') {
          this.editDisabled = true
        }
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
 
        })
      },
    }
  }
</script>