|
@@ -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 = '编辑'
|