<template>
<el-dialog title="供应商登记" :visible.sync="dialogFormVisible" width="600px" class="component-dialog">
<el-form ref="validateForm" :model="form" :label-width="isMobile ? 90 : formLabelWidth">
<el-form-item
prop="supplier"
label="供应商名称"
:rules="[
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
]"
>
<el-input v-model="form.supplier" maxlength="200" autocomplete="off" />
</el-form-item>
<el-form-item
prop="contactPerson"
label="联系人"
:rules="[
{ required: true, message: '请输入联系人', trigger: 'blur' },
]"
>
<el-input v-model="form.contactPerson" maxlength="200" autocomplete="off" />
</el-form-item>
<el-form-item
prop="contactPhone"
label="联系电话"
:rules="[
{ required: true, message: '请输入联系电话', trigger: 'blur' },
]"
>
<el-input v-model="form.contactPhone" maxlength="200" autocomplete="off" />
</el-form-item>
<el-form-item
prop="address"
label="所在地"
:rules="[
{ required: true, message: '请选择所在地', trigger: 'change' },
]"
>
<el-cascader v-model="form.address" style="width: 100%" :options="list" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit">提 交</el-button>
<el-button type="info" @click="closeDialog">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
function defaultForm() {
return {
// 供应商名称
supplier: '',
// 联系人
contactPerson: '',
// 联系电话
contactPhone: '',
// 所在地
address: ''
}
}
export default {
name: 'BecomeSupplier',
props: {
value: Boolean
},
data() {
return {
form: defaultForm(),
formLabelWidth: '120px',
isMobile: false,
list:[]
}
},
computed: {
dialogFormVisible: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
},
watch: {
value(val) {
this.$nextTick(() => {
val && this.$refs.validateForm.clearValidate()
})
}
},
mounted() {
this.bindComputedFn = this.bindComputed.bind(this)
this.bindComputedFn()
window.addEventListener('resize', this.bindComputedFn)
},
unmounted() {
window.removeEventListener('resize', this.bindComputedFn)
},
methods: {
closeDialog() {
this.dialogFormVisible = false
},
submit() {
this.$refs.validateForm.validate((valid) => {
if (valid) {
const address = this.getAddress()
// todo 提交
console.log({
...this.form,
address
})
this.closeDialog()
this.form = defaultForm()
} else {
return false
}
})
},
getAddress() {
let result = ''
const splitStr = '-'
if (this.form.address && this.form.address.length) {
this.form.address.reduce((final, next) => {
const current = final.reduce((f, n) => {
return n.value === next ? n : f
})
result += splitStr + current.label
return current.children
}, this.list)
}
return result.replace(new RegExp('^' + splitStr), '')
},
bindComputed: function(e) {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
this.isMobile = width <= 800
}
}
}
</script>
<style scoped lang="less">
@import "@/styles/media.less";
.forMobile({
.component-dialog {
/deep/ .el-dialog {
max-width: 90%!important;
}
}
});
</style>
关于form表单的vue2写法
最新推荐文章于 2024-07-12 09:15:46 发布