lilei 4 éve
szülő
commit
04f9e5e8bd

+ 75 - 108
src/views/equipmentManage/boxSetting/AddBoxModal.vue

@@ -8,20 +8,23 @@
       @cancle="cancel"
       :width="800"
       :centered="true">
-      <a-form :form="form" @submit="handleSubmit">
+      <a-form-model
+        ref="ruleForm"
+        :model="formData"
+        :rules="rules"
+      >
         <!-- 箱体类型名称 -->
-        <a-form-item label="箱体类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
+        <a-form-model-item label="箱体类型名称" ref="name" prop="name" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
           <a-input
             placeholder="请输入箱体类型名称(最多30个字符)"
             allowClear
             :maxLength="30"
             id="roleModal-name"
-            v-decorator="['formData.name', {
-              initialValue: formData.name,getValueFromEvent: $filterEmpty,
-              rules: [{ required: true, message: '请输入箱体类型名称(最多30个字符)!' }] }]" />
-        </a-form-item>
+            v-model="formData.name"
+          />
+        </a-form-model-item>
         <!-- 内置箱体数量 -->
-        <a-form-item label="内置箱体数量" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
+        <a-form-model-item label="内置箱体数量" ref="boxNum" prop="boxNum" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
           <v-select
             ref="orderStatus"
             id="addBoxModal-status"
@@ -29,80 +32,71 @@
             @change="handleNumChange"
             placeholder="请选择"
             allowClear
-            v-decorator="[
-              `formData.boxNum`,
-              {
-                initialValue: formData.boxNum,
-                validateTrigger: ['change', 'blur'],
-                rules: [
-                  {
-                    required: true, message: '请选择箱体类型!'
-                  },
-                ],
-              },
-            ]">
+            v-model="formData.boxNum"
+          >
           </v-select>
-        </a-form-item>
+        </a-form-model-item>
         <!-- 箱体限投 -->
-        <a-row type="flex" align="middle" v-for="(k, index) in keys" :key="k">
+        <a-row type="flex" align="middle" v-for="(item, index) in formData.deviceTypeBoxList" :key="index">
           <a-col span="12">
             <!-- 投放开始时间 -->
-            <a-form-item :label=" '内置'+(index+1)+'号箱限投(kg)'" :required="true" :label-col=" { span: 10 }" :wrapper-col=" { span: 14 }">
+            <a-form-model-item
+              :label=" '内置'+(index+1)+'号箱限投(kg)'"
+              :required="true"
+              :label-col=" { span: 10 }"
+              :wrapper-col=" { span: 14 }"
+              :prop="'deviceTypeBoxList.' + index + '.maxWeight'"
+              :rules="{
+                required: true,
+                message: '请输入限投数量',
+                trigger: ['blur','change'],
+              }"
+            >
               <a-input-number
                 :min="1"
                 :max="1000"
                 :precision="0"
                 style="width: 200px;"
                 placeholder="请输入数字(最大1000)"
-                v-decorator="[
-                  `formData.maxWeight[${k}]`,
-                  {
-                    initialValue: formData[`maxWeight[${k}]`],
-                    validateTrigger: ['change', 'blur'],
-                    rules: [
-                      {
-                        required: true, message: '请输入限投数量(最大1000)!'
-                      },
-                    ],
-                  },
-                ]" />
-            </a-form-item>
+                v-model="item.maxWeight"
+              />
+            </a-form-model-item>
           </a-col>
           <a-col span="1"></a-col>
           <a-col span="9">
             <!-- 请选择分类 -->
-            <a-form-item :label="''" :required="false" :wrapper-col="{ span: 18 }">
+            <a-form-model-item
+              :label="''"
+              :required="false"
+              :wrapper-col="{ span: 18 }"
+              :prop="'deviceTypeBoxList.' + index + '.rubbishType'"
+              :rules="{
+                required: true,
+                message: '请选择分类',
+                trigger: ['blur','change'],
+              }"
+            >
               <v-select
                 ref="orderStatus"
                 id="addBoxModal-status"
                 code="RUBBISH_TYPE"
                 placeholder="请选择分类"
                 allowClear
-                v-decorator="[
-                  `formData.rubbishType[${k}]`,
-                  {
-                    initialValue: formData[`rubbishType[${k}]`],
-                    validateTrigger: ['change', 'blur'],
-                    rules: [
-                      {
-                        required: true, message: '请选择分类!'
-                      },
-                    ],
-                  },
-                ]">
+                v-model="item.rubbishType"
+              >
               </v-select>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
         </a-row>
-        <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
+        <a-form-model-item :wrapper-col="{ span: 24, offset: 10 }">
           <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
             保存
           </a-button>
           <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
             取消
           </a-button>
-        </a-form-item>
-      </a-form>
+        </a-form-model-item>
+      </a-form-model>
 
     </a-modal>
   </div>
@@ -130,42 +124,34 @@ export default {
     },
     id: {
       type: [String, Number],
-      default: function () {
-        return ''
-      }
+      default: ''
     }
   },
   data () {
     return {
       titleText: '新增',
       isshow: this.visible,
-      formLayout: 'horizontal',
-      form: this.$form.createForm(this, {
-        name: 'AddBoxModal'
-      }),
       formData: {
         name: '',
         boxNum: '',
-        maxWeight: [],
-        rubbishType: []
+        deviceTypeBoxList: []
       },
-      keys: []
+      rules: {
+        name: [{ required: true, message: '请输入箱体类型名称', trigger: 'blur' }],
+        boxNum: [{ required: true, message: '请选择内置箱体数量', trigger: 'blur' }]
+      }
     }
   },
   methods: {
-    cancel (e) {
-      this.clear()
-      this.$emit('close')
-    },
     // 内置箱体选择修改
     handleNumChange (v) {
       console.log(v, 'vvvvvvvvvv')
-      const arr = []
-      for (let x = 0; x < v; x++) {
-        arr.push(x)
+      for (let i = 0; i < v; i++) {
+        this.formData.deviceTypeBoxList.push({
+          maxWeight: '',
+          rubbishType: ''
+        })
       }
-      this.keys = arr
-      console.log(this.keys, 'this.keys')
     },
     // 查详情
     getDetailData (id) {
@@ -174,36 +160,23 @@ export default {
       }).then(res => {
         if (res.status == 200) {
           this.formData = Object.assign({}, this.formData, res.data)
-		  this.handleNumChange(this.formData.boxNum)
-          // 回显数据
-          this.formData.deviceTypeBoxList.map((item, index) => {
-            this.formData['maxWeight[' + index + ']'] = item.maxWeight
-            this.formData['rubbishType[' + index + ']'] = item.rubbishType
-          })
         }
       })
     },
     // 保存提交
     handleSubmit () {
       const _this = this
-      this.form.validateFields((err, values) => {
-        console.log(values, ' formData.type222222222')
-        if (!err) {
-          const params = Object.assign({}, this.formData, values.formData)
-		  console.log(this.keys, params, 'kkkkkkkk')
-		  const arr = []
-          this.keys.map((item, index) => {
-			  const p = {
-				  boxCode: index + 1,
-				  maxWeight: params.maxWeight[index],
-				  rubbishType: params.rubbishType[index]
-			  }
-			 arr.push(p)
-          })
-		  delete params.maxWeight
-		  delete params.rubbishType
-		  params.deviceTypeBoxList = arr
-		  console.log(params, 'ppppppppp')
+      this.$refs.ruleForm.validate(valid => {
+        console.log(valid, this.formData, ' formData.type222222222')
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(this.formData))
+          // 编辑
+          if (this.id) {
+            params.deviceTypeBoxList.map(item => {
+              delete item.id
+            })
+          }
+          console.log(params)
           saveBoxSetting(params).then(res => {
             console.log(res, 'res--save')
             if (res.status == '200') {
@@ -223,17 +196,16 @@ export default {
     handleCancel () {
       this.cancel()
     },
+    cancel (e) {
+      this.clear()
+      this.$emit('close')
+    },
     clear () {
-      this.form.resetFields()
+      this.$refs.ruleForm.resetFields()
       this.formData.name = ''
       this.formData.boxNum = ''
+      this.formData.deviceTypeBoxList = []
     }
-
-  },
-  beforeCreate () {
-    this.form = this.$form.createForm(this, {
-      name: 'AddBoxModal'
-    })
   },
   watch: {
     visible (newValue, oldValue) {
@@ -241,14 +213,9 @@ export default {
     },
     isshow (newValue, oldValue) {
       if (newValue) {
-        this.form.getFieldDecorator('keys', {
-          initialValue: [],
-          preserve: true
-        })
-        this.id = 0
         if (this.id) { // 编辑
           this.titleText = '编辑'
-		  this.getDetailData(this.id)
+          this.getDetailData(this.id)
         } else {
           this.titleText = '新增'
         }

+ 6 - 6
src/views/equipmentManage/boxSetting/boxSetting.vue

@@ -189,15 +189,15 @@ export default {
     // 编辑
     handleEdit (item) {
       this.openBoxModal = true
-	  this.itemId = item.id
+	    this.itemId = item.id
     },
     // 新增/编辑 后刷新列表
     refreshTable () {
-	  if (this.itemId) {
-	    this.$refs.table.refresh()
-	  } else {
-	    this.$refs.table.refresh(true)
-	  }
+      if (this.itemId) {
+        this.$refs.table.refresh()
+      } else {
+        this.$refs.table.refresh(true)
+      }
     },
     // 删除
     delect (row) {

+ 0 - 5
src/views/equipmentManage/openTimeSetting/AddTimeModal.vue

@@ -192,11 +192,6 @@ export default {
       this.formData.deliveryTimeRuleItemList = []
     }
   },
-  beforeCreate () {
-    this.form = this.$form.createForm(this, {
-      name: 'addTimeModal'
-    })
-  },
   watch: {
     visible (newValue, oldValue) {
       this.isshow = newValue