211 lines
6.9 KiB
Vue
211 lines
6.9 KiB
Vue
<template>
|
|
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
|
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="价格类型" prop="pricingType">
|
|
<el-radio-group v-model="dataForm.pricingType" :disabled="isDisabled">
|
|
<el-radio :label="1">固定价格</el-radio>
|
|
<el-radio :label="2">动态价格</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="出行方式" prop="travelType">
|
|
<el-radio-group v-model="dataForm.travelType" :disabled="isDisabled">
|
|
<el-radio :label="1">公交</el-radio>
|
|
<el-radio :label="2">出租</el-radio>
|
|
<el-radio :label="3">免费</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="dataForm.pricingType == 2">
|
|
<el-form-item label="时令" prop="seasonsType">
|
|
<el-radio-group v-model="dataForm.seasonsType" :disabled="isDisabled">
|
|
<el-radio :label="1">夏令时</el-radio>
|
|
<el-radio :label="2">冬令时</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="dataForm.pricingType == 2">
|
|
<el-form-item label="时段" prop="timeIntervalType">
|
|
<el-radio-group v-model="dataForm.timeIntervalType" :disabled="isDisabled">
|
|
<el-radio :label="1">白天</el-radio>
|
|
<el-radio :label="2">夜间</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item label="夜间出行费（元）" prop="nightTravelExpenses">
|
|
<el-input-number v-model="dataForm.nightTravelExpenses" controls-position="right" :precision="2" :min="0" :step="1"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="dataForm.pricingType == 2">
|
|
<el-form-item label="起步价（元）" prop="startingPrice">
|
|
<el-input-number v-model="dataForm.startingPrice" controls-position="right" :precision="2" :min="0" :step="1"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="dataForm.pricingType == 2">
|
|
<el-form-item label="每公里价格（元）" prop="pricePerKilometer">
|
|
<el-input-number v-model="dataForm.pricePerKilometer" controls-position="right" :precision="2" :min="0" :step="1"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="dataForm.pricingType == 2 && dataForm.travelType != 1">
|
|
<el-form-item label="起步公里数" prop="freeKilometers">
|
|
<el-input-number v-model="dataForm.freeKilometers" controls-position="right" :precision="2" :min="0" :step="1" label="起步公里数"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="往返类型" prop="fixedType">
|
|
<el-radio-group v-model="dataForm.fixedType">
|
|
<el-radio :label="1">往返</el-radio>
|
|
<el-radio :label="2">单程</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="dataForm.pricingType == 1">
|
|
<el-form-item label="固定价格（元）" prop="fixedPrice">
|
|
<el-input-number v-model="dataForm.fixedPrice" controls-position="right" :precision="2" :min="0" :step="1"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="visible = false">取消</el-button>
|
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
let defReqRule = (message = '不能为空') => { return { required: true, message, trigger: 'blur' } };
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
dataForm: {
|
|
id: '',
|
|
createTime: '',
|
|
updateTime: '',
|
|
pricingType: '',
|
|
travelType: '',
|
|
seasonsType: '',
|
|
timeIntervalType: '',
|
|
startingPrice: '',
|
|
freeKilometers: '',
|
|
nightTravelExpenses: '',
|
|
pricePerKilometer: '',
|
|
fixedType: '',
|
|
fixedPrice: '',
|
|
remark: '',
|
|
},
|
|
dataRule: {
|
|
pricingType: [ defReqRule('请选择价格类型！') ],
|
|
travelType: [ defReqRule('请选择出行方式') ],
|
|
seasonsType: [ defReqRule('请选择时令') ],
|
|
timeIntervalType: [ defReqRule('请选择时段') ],
|
|
startingPrice: [ defReqRule('请输入起步价！') ],
|
|
freeKilometers: [ defReqRule('请输入免费公里数') ],
|
|
nightTravelExpenses: [ defReqRule('请输入夜间出行费') ],
|
|
pricePerKilometer: [ defReqRule('请输入每公里价格') ],
|
|
fixedType: [ defReqRule('请选择固定价格类型') ],
|
|
fixedPrice: [ defReqRule('请输入固定价格') ],
|
|
},
|
|
index: 0
|
|
}
|
|
},
|
|
computed: {
|
|
isEdit() {
|
|
return !(this.dataForm || {}).id;
|
|
},
|
|
isDisabled() {
|
|
return !this.isEdit;
|
|
},
|
|
},
|
|
methods: {
|
|
init(index, id) {
|
|
this.index = index
|
|
this.dataForm.id = id
|
|
this.visible = true
|
|
this.$nextTick(() => {
|
|
this.$refs['dataForm'].resetFields()
|
|
if (this.dataForm.id) {
|
|
this.$http({
|
|
url: this.$http.adornUrl(`travelConf/info/${this.dataForm.id}`),
|
|
method: 'get',
|
|
params: this.$http.adornParams()
|
|
}).then(({ data }) => {
|
|
if (data && data.code === 0) {
|
|
this.dataForm = data.data
|
|
}
|
|
})
|
|
} else {
|
|
//重置表单
|
|
Object.keys(this.dataForm).forEach(x => {
|
|
this.dataForm[x] = '';
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 表单提交
|
|
dataFormSubmit() {
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
if (valid) {
|
|
let saveData = Object.assign({}, this.dataForm);
|
|
//清空多余内容
|
|
let cleanField = [];
|
|
if(saveData.pricingType == 1){
|
|
cleanField = [ 'seasonsType', 'timeIntervalType', 'startingPrice', 'freeKilometers', 'pricePerKilometer' ];
|
|
}else if(saveData.pricingType == 2) {
|
|
cleanField = [ 'fixedPrice' ];
|
|
}
|
|
if(cleanField.length){
|
|
cleanField.forEach(key => {
|
|
delete saveData[key];
|
|
});
|
|
}
|
|
|
|
console.log(cleanField);
|
|
|
|
this.$http({
|
|
url: this.$http.adornUrl(`travelConf/${!saveData.id ? 'add' : 'update'}`),
|
|
method: 'post',
|
|
data: this.$http.adornData({
|
|
...saveData,
|
|
'id': saveData.id || undefined,
|
|
})
|
|
}).then(({
|
|
data
|
|
}) => {
|
|
if (data && data.code === 0) {
|
|
this.$message({
|
|
message: '操作成功',
|
|
type: 'success',
|
|
duration: 1500,
|
|
onClose: () => {
|
|
this.visible = false
|
|
console.log('this.index', this.index)
|
|
if (this.index == 1) {
|
|
this.$emit('refreshDataList')
|
|
} else {
|
|
this.$emit('refreshDataLister')
|
|
}
|
|
|
|
}
|
|
})
|
|
} else {
|
|
this.$message.error(data.msg)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|