lilei 4 سال پیش
والد
کامیت
81b962c06e
1فایلهای تغییر یافته به همراه70 افزوده شده و 126 حذف شده
  1. 70 126
      src/views/equipmentManage/openTimeSetting/AddTimeModal.vue

+ 70 - 126
src/views/equipmentManage/openTimeSetting/AddTimeModal.vue

@@ -8,83 +8,81 @@
       @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个字符)!' }]
-              }
-            ]"
+            id="tftime-name"
+            v-model="formData.name"
           />
-        </a-form-item>
+        </a-form-model-item>
         <!-- 投放时间区间 -->
-        <a-row type="flex" align="middle" v-for="(k, index) in form.getFieldValue('keys')" :key="k">
+        <a-row type="flex" align="middle" v-for="(item, index) in formData.deliveryTimeRuleItemList" :key="index">
           <a-col span="10">
             <!-- 投放开始时间 -->
-            <a-form-item :label="index === 0 ? '投放时间区间' : ''" :required="true" :label-col="{ span: 12 }" :wrapper-col="index === 0 ? { span: 12 } : { span: 12, offset: 12 }">
+            <a-form-model-item
+              :label="index === 0 ? '投放时间区间' : ''"
+              :label-col="{ span: 12 }"
+              :wrapper-col="index === 0 ? { span: 12 } : { span: 12, offset: 12 }"
+              :prop="'deliveryTimeRuleItemList.' + index + '.openTime'"
+              :rules="{
+                required: true,
+                message: '请选择开始时间',
+                trigger: ['blur','change'],
+              }"
+            >
               <a-time-picker
                 placeholder="开始时间"
-                v-decorator="[
-                  `formData.openTime[${k}]`,
-                  {
-                    initialValue: formData[`openTime[${k}]`],
-                    validateTrigger: ['change', 'blur'],
-                    rules: [
-                      {
-                        required: true,
-                        message: '请选择投放开始时间!'
-                      },
-                    ]
-                  }
-                ]"
+                v-model="item.openTime"
                 format="HH:mm"
               />
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
-          <a-col span="1"><a-form-item>至</a-form-item></a-col>
+          <a-col span="1"><a-form-model-item>至</a-form-model-item></a-col>
           <a-col span="6">
             <!-- 投放结束时间 -->
-            <a-form-item :label="''" :required="false" :wrapper-col="{ span: 18 }">
+            <a-form-model-item
+              :label="''"
+              :required="false"
+              :wrapper-col="{ span: 18 }"
+              :prop="'deliveryTimeRuleItemList.' + index + '.closeTime'"
+              :rules="{
+                required: true,
+                message: '请选择结束时间',
+                trigger: ['blur','change'],
+              }"
+            >
               <a-time-picker
                 placeholder="结束时间"
-                v-decorator="[
-                  `formData.closeTime[${k}]`,
-                  {
-                    initialValue: formData[`closeTime[${k}]`],
-                    validateTrigger: ['change', 'blur'],
-                    rules: [{ required: true, message: '请选择投放结束时间!' }]
-                  }
-                ]"
+                v-model="item.closeTime"
                 format="HH:mm"
               />
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
-          <a-form-item>
+          <a-form-model-item>
             <a-icon
               :style="{ fontSize: '18px', color: 'red' }"
-              v-if="form.getFieldValue('keys').length > 1"
+              v-if="index > 0"
               class="dynamic-delete-button"
               type="minus-circle-o"
-              :disabled="form.getFieldValue('keys').length === 1"
-              @click="() => remove(k)"
+              :disabled="formData.deliveryTimeRuleItemList.length === 1"
+              @click="() => remove(index)"
             />
-            <a-icon v-if="index === form.getFieldValue('keys').length - 1" :style="{ fontSize: '18px' }" type="plus-circle" @click="add" />
-          </a-form-item>
+            <a-icon v-if="index === formData.deliveryTimeRuleItemList.length - 1" :style="{ fontSize: '18px' }" type="plus-circle" @click="add" />
+          </a-form-model-item>
         </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>
 </template>
@@ -116,15 +114,12 @@ export default {
       index: 0, // 用于增加时间列的全局变量
       titleText: '新增',
       isshow: this.visible,
-      formLayout: 'horizontal',
-      form: this.$form.createForm(this, {
-        name: 'addTimeModal'
-      }),
       formData: {
         name: '',
-        deliveryTimeRuleItemList: [],
-        closeTime: [],
-        openTime: []
+        deliveryTimeRuleItemList: []
+      },
+      rules: {
+        name: [{ required: true, message: '请输入投放时间段名称', trigger: 'blur' }]
       }
     }
   },
@@ -139,86 +134,39 @@ export default {
       viewTimeSetting({ id: id }).then(res => {
         if (res.status == 200) {
           this.formData = Object.assign({}, this.formData, res.data)
-          const list = res.data.deliveryTimeRuleItemList
-          this.index = list.length
-          const keysL = []
-          for (let x = 0; x < list.length; x++) {
-            keysL[x] = x
-          }
-          console.log(keysL, 'keysL')
-          this.form.setFieldsValue({
-            keys: keysL
-          })
-
-          // 回显数据
-          list.map((item, index) => {
-            this.formData['openTime[' + index + ']'] = moment(item.openTime, 'HH:mm')
-            this.formData['closeTime[' + index + ']'] = moment(item.closeTime, 'HH:mm')
+          this.formData.deliveryTimeRuleItemList.map(item => {
+            item.closeTime = moment(item.closeTime, 'HH:mm')
+            item.openTime = moment(item.openTime, 'HH:mm')
           })
         }
       })
     },
     // 删除
     remove (k) {
-      const { form } = this
-      const keys = form.getFieldValue('keys')
-      if (keys.length === 1) {
-        return
-      }
-      form.setFieldsValue({
-        keys: keys.filter(key => key !== k)
-      })
-      if (this.id) {
-        this.formData.deliveryTimeRuleItemList.splice(k, 1)
-        this.formData.openTime.splice(k, 1)
-        this.formData.closeTime.splice(k, 1)
-      }
+      this.formData.deliveryTimeRuleItemList.splice(k, 1)
     },
     // 增加
     add () {
-      const { form } = this
-      const keys = form.getFieldValue('keys')
-      const nextKeys = keys.concat(this.index++)
-      form.setFieldsValue({
-        keys: nextKeys
+      this.formData.deliveryTimeRuleItemList.push({
+        openTime: '',
+        closeTime: ''
       })
-      this.formData.openTime[this.index - 1] = moment(null)
-      this.formData.closeTime[this.index - 1] = moment(null)
     },
     // 保存提交
     handleSubmit () {
       const _this = this
-      this.form.validateFields((err, values) => {
-        console.log(values, this.formData, ' formData.type222222222')
-        if (!err) {
-          const { formData, keys } = values
-          const params = {
-            name: formData.name,
-            deliveryTimeRuleItemList: []
-          }
-          if (this.id) {
-            params.id = this.id
-            params.deliveryTimeRuleNo = this.formData.deliveryTimeRuleNo
-            keys.map((item, index) => {
-              console.log(index)
-              const fdeli = this.formData.deliveryTimeRuleItemList[index]
-              params.deliveryTimeRuleItemList[index] = {
-                openTime: moment(formData.openTime[index]).format('HH:mm'),
-                closeTime: moment(formData.closeTime[index]).format('HH:mm'),
-                deliveryTimeRuleItemNo: index < fdeli.length ? fdeli.deliveryTimeRuleItemNo : '',
-                deliveryTimeRuleNo: index < fdeli.length ? fdeli.deliveryTimeRuleNo : ''
-              }
-            })
-          } else {
-            keys.map((item, index) => {
-              params.deliveryTimeRuleItemList[index] = {
-                openTime: moment(formData.openTime[index]).format('HH:mm'),
-                closeTime: moment(formData.closeTime[index]).format('HH:mm')
-              }
-            })
-          }
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(this.formData))
+          params.deliveryTimeRuleItemList.map(item => {
+            item.closeTime = moment(item.closeTime).format('HH:mm')
+            item.openTime = moment(item.openTime).format('HH:mm')
+            // 编辑
+            if (this.id) {
+              delete item.id
+            }
+          })
           console.log(params)
-          return
           saveTimeSetting(params).then(res => {
             console.log(res, 'res--save')
             if (res.status + '' === '200') {
@@ -239,8 +187,9 @@ export default {
       this.cancel()
     },
     clear () {
-      this.form.resetFields()
+      this.$refs.ruleForm.resetFields()
       this.formData.name = ''
+      this.formData.deliveryTimeRuleItemList = []
     }
   },
   beforeCreate () {
@@ -254,11 +203,6 @@ export default {
     },
     isshow (newValue, oldValue) {
       if (newValue) {
-        this.form.getFieldDecorator('keys', {
-          initialValue: [],
-          preserve: true
-        })
-        this.index = 0
         if (this.id) {
           // 编辑
           this.titleText = '编辑'