emis-frontend/src/views/emis/emisTransLine/emisTransLineForm.vue
2024-05-20 17:41:59 +08:00

324 lines
11 KiB
Vue

<template>
<div >
<el-row :gutter="0">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-col :span="12">
<el-form-item label="线路名称" prop="lineName">
<el-input v-model="form.lineName" placeholder="请输入线路名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="英文名称" prop="lineNameEn">
<el-input v-model="form.lineNameEn" placeholder="请输入英文名称" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="线路编号" prop="lineCode">
<el-input v-model="form.lineCode" placeholder="请输入线路代码" />
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="起始国" prop="fromCountry">
<CountryPickerStart :placeholder="$t('起始国')" v-model="form.fromCountry" ></CountryPickerStart>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目的国" prop="country">
<CountryPickerDest :placeholder="$t('目的国')" v-model="form.country" ></CountryPickerDest>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="泡重比" prop="meterRate">
<el-input v-model="form.meterRate" placeholder="泡重比" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="品牌" prop="logoType">
<EmisBrandPicker :placeholder="$t('品牌')" v-model="form.logoType"></EmisBrandPicker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="运输方式" prop="transType">
<el-select v-model="form.transType" placeholder="运输方式" clearable filterable>
<el-option
v-for="item in dict.type.emis_biz_shipping_method"
v-bind:key="item.value"
v-bind:label="item.label"
v-bind:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="适用范围" prop="applyScope">
<el-select v-model="form.applyScope" placeholder="适用范围" clearable filterable>
<el-option
v-for="item in dict.type.emis_affiliate_type"
v-bind:key="item.value"
v-bind:label="item.label"
v-bind:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="启用" prop="status">
<el-radio-group v-model="form.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
<!--
<el-col :span="24">
<el-form-item label="进仓模板" prop="applyScope">
<el-select v-model="form.applyScope" placeholder="进仓模板" clearable filterable>
<el-option
v-for="item in dict.type.emis_affiliate_type"
v-bind:key="item.value"
v-bind:label="item.label"
v-bind:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" v-show="moreInputVisible" > </el-col>
<el-col :span="24">
<el-divider content-position="right" @click="handleShowMoreInput" >更多信息[+]</el-divider>
</el-col>
-->
</el-form>
</el-row>
<div style="text-align: center;margin-bottom: 10px;">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</div>
</template>
<script>
import { listEmisTransLine, getEmisTransLine, delEmisTransLine, addEmisTransLine, updateEmisTransLine } from "@/api/emis/emisTransLine";
import CountryPickerStart from '@/views/emis/EmisBaseTools/CountryPicker.vue';
import CountryPickerDest from '@/views/emis/EmisBaseTools/CountryPicker.vue';
import EmisBrandPicker from '@/views/emis/EmisBaseTools/EmisBrandPicker.vue';
export default {
name: "emisTransLineForm",
props:{
id:{type:Number}
},
components: { CountryPickerStart,CountryPickerDest ,EmisBrandPicker},
dicts: ['sys_normal_disable','emis_biz_shipping_method','emis_affiliate_type'],
data() {
return {
emisTransLineOptions: [],
// 遮罩层
loading: true,
// 表单参数
form: {},
// 表单校验
rules: {
// lineCode: [
// { required: true, message: "线路代码不能为空", trigger: "blur" },
// { validator: this.validateCode, trigger: "blur" }
// ],
lineName: [
{ required: true, message: "线路名称不能为空", trigger: "blur" },
{ validator: this.validateName, trigger: "blur" }
],
meterRate: [
{ required: true, message: "泡重比", trigger: "blur" },
{ pattern: /^-?\d+\.?\d*$/, message: '请输入正确泡重比', trigger: 'blur' }
],
status: [
{ required: true, message: "启用状态不能为空", trigger: ["blur",'change'] }
],
fromCountry: [
{ required: true, message: "起始国不能为空", trigger: ["blur",'change'] }
],
country: [
{ required: true, message: "目的国家不能为空", trigger: ["blur",'change'] }
],
applyScope: [
{ required: true, message: "适用范围不能为空", trigger: ["blur",'change'] }
],
logoType: [
{ required: true, message: "品牌类型不能为空", trigger: ["blur",'change'] }
],
transType: [
{ required: true, message: "运输方式不能为空", trigger:["blur",'change'] }
],
}
};
},
watch: {
id(newVal){
this.initData();
}
},
created() {
this.initData();
},
methods: {
initData() {
console.log(this.id)
if(this.id !=null) {
this.loading = true;
getEmisTransLine(this.id).then(response => {
this.form = response.data;
this.loading = false;
});
}else{
this.reset();
}
},
// 取消按钮
cancel() {
this.reset();
this.$emit("on-cancel");
},
// 表单重置
reset() {
this.form = {
id: null,
lineCode: null,
lineName: null,
status: null,
siteAuditMan: null,
siteAuditManCode: null,
marketMan: null,
marketManCode: null,
operateMan: null,
operateManCode: null,
country: null,
applyScope: null,
logoType: null
};
this.resetForm("form");
},
validateCode (rule, value, callback) {
if (!value) {
callback(new Error("请输入线路编码"));
} else if (value.length > 10) {
callback(new Error("长度为1-10"));
} else {
if (this.form.id) {
// 修改时检查账号是否重复
listEmisTransLine({ lineCode: value})
.then((res) => {
if (res.rows.length==0) {
callback();
} else {
if(res.rows[0].id != this.form.id ){
callback(new Error("线路编码重复"));
}else{
callback();
}
}
})
.catch((error) => {
callback(new Error("验证失败,请重试"));
});
} else {
// 新增时检查账号是否重复
listEmisTransLine({ lineCode: value })
.then((res) => {
if (res.rows.length==0) {
callback();
} else {
callback(new Error("线路编码重复"));
}
})
.catch((error) => {
callback(new Error("验证失败,请重试"));
});
}
}
},
validateName (rule, value, callback) {
if (!value) {
callback(new Error("请输入线路名称"));
} else if (value.length > 50) {
callback(new Error("长度为1-50"));
} else {
if (this.form.id) {
// 修改时检查账号是否重复
listEmisTransLine({ lineName: value})
.then((res) => {
if (res.rows.length==0) {
callback();
} else {
res.rows.forEach(item=>{
if(item.id != this.form.id && item.lineName==value ){
callback(new Error("线路名称重复"));
return;
}
});
// 没有重复的
callback();
}
})
.catch((error) => {
callback(new Error("验证失败,请重试"));
});
} else {
// 新增时检查账号是否重复
listEmisTransLine({ lineName: value})
.then((res) => {
if (res.rows.length==0) {
callback();
} else {
res.rows.forEach(item=>{
if(item.lineName==value ){
callback(new Error("线路名称重复"));
return;
}
});
// 没有重复的
callback();
}
})
.catch((error) => {
callback(new Error("验证失败,请重试"));
});
}
}
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateEmisTransLine(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.$emit("on-changed");
});
} else {
addEmisTransLine(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.$emit("on-changed");
});
}
}
});
},
}
};
</script>