标签：vue string form 部门 item add components message true
<template>
<!-- 组件v-model
xxx v-model='abc' :value="abc" @input="abc=$event"
xxx组件内
props:{
abc:{
required:true,
}
}
this.$emit('input',实参值)
-->
<!-- 部门负责人：
1：定义api
2:导入api
3:点击select时调用api获取数据存储
4：渲染
-->
<!-- 基本表单验证
1：表单元素值的绑定
2：el-form
model
rules:{
prop的值:[
{required:true,message:错误信息,trigger:'change/blur'},
{min,max,message:错误信息,trigger:'change/blur'},
{pattern:正则,message:错误信息,trigger:'change/blur'}
]
}
3:el-form-item
prop
全局验证
1：基本验证已ok
2:el-form ref="form"
3:this.$refs.form.validate((result)=>{
result:true验证通过
false:验证失败
})
-->
<el-dialog
:title="{ add: '新增部门', edit: '编辑部门' }[mode]"
width="600px"
:visible.sync="isShow"
@close="closeEvent"
>
<el-form ref="form" label-width="100px" :model="form" :rules="rules">
<el-form-item prop="name" label="部门名称">
<el-input v-model.trim="form.name" placeholder="1-50个字符" />
</el-form-item>
<el-form-item prop="code" label="部门编码">
<el-input v-model.trim="form.code" placeholder="1-50个字符" />
</el-form-item>
<el-form-item prop="manager" label="部门负责人">
<el-select
v-model="form.manager"
placeholder="选择部门负责人"
@focus="focusEvent"
>
<el-option
v-for="item in userList"
:key="item.id"
:label="item.username"
:value="item.username"
/>
</el-select>
</el-form-item>
<el-form-item prop="introduce" label="部门介绍">
<el-input
v-model="form.introduce"
placeholder="1-300个字符"
type="textarea"
:rows="4"
/>
</el-form-item>
</el-form>
<template #footer>
<div style="text-align: center">
<el-button @click="isShow = false">取消</el-button>
<el-button type="primary" @click="submit">确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script>
import {
sysUserSimple,
companyDepartmentPost,
companyDepartmentPut
} from '@/api/departments'
export default {
props: {
initList: {
required: true,
type: Array
}
},
data() {
return {
isShow: false,
mode: 'add', // add:新增 edit:编辑
userList: [],
form: {
name: '', // string 非必须 部门名称
code: '', // string 非必须 部门编码，同级部门不可重复
manager: '', // string 非必须 负责人名称
introduce: '', // string 非必须 介绍
pid: '' // string 非必须 父级部门ID
},
rules: {
name: [
{ required: true, message: '必填', trigger: 'change' },
{ min: 1, max: 50, message: '请输入1-50个字符', trigger: 'change' },
{
validator: (rule, value, callback) => {
let arr = []
if (this.mode === 'add') {
// 1:找出点击项的子集部门
arr = this.initList.filter((item) => item.pid === this.form.pid) // [{name:'人事部'}...]
// 2：验证输入的部门名称在子集部门中不存在
} else if (this.mode === 'edit') {
// 1:找出自己的同级部门,同级部门特点：pid值相同,排除自己
arr = this.initList.filter(
(item) =>
item.pid === this.form.pid && item.id !== this.form.id
)
// 验证是否重名
}
const bol = arr.every((item) => value !== item.name)
bol ? callback() : callback(new Error('部门名称已存在'))
}
}
], // string 非必须 部门名称
code: [
{ required: true, message: '必填', trigger: 'change' },
{ min: 1, max: 50, message: '请输入1-50个字符', trigger: 'change' },
{
// 新增表单验证
// 部门编码不可重名：
// 原始的所有部门的数据 this.initList= [{code:'1'}...]
// 当前项是 value
validator: (rule, value, callback) => {
let bol = false
if (this.mode === 'add') {
// find:返回值，找到是相应项的数据 找不到：undefined
// every some
// every:所有项都符合条件才是true
// some:只要有一个项满足条件就是true
// const bol = this.initList.every((item) => {
// if (item.code !== value) {
// return true
// }
// return false
// })
bol = this.initList.every((item) => item.code !== value)
} else if (this.mode === 'edit') {
// 先过滤掉自身
const newArr = this.initList.filter(
(item) => item.id !== this.form.id
)
// 再来判断是否重复
bol = newArr.every((item) => item.code !== value)
}
bol ? callback() : callback(new Error('部门编码重复'))
},
trigger: 'change'
}
], // string 非必须 部门编码，同级部门不可重复
manager: [{ required: true, message: '必填', trigger: 'change' }], // string 非必须 负责人名称
introduce: [
{ required: true, message: '必填', trigger: 'change' },
{ min: 1, max: 300, message: '请输入1-300个字符', trigger: 'change' }
] // string 非必须 介绍
}
}
},
methods: {
// 获取员工列表
async focusEvent() {
if (this.userList.length === 0) {
const res = await sysUserSimple()
this.userList = res.data
console.log(res)
}
},
// 确定点击
submit() {
this.$refs.form.validate(async(result) => {
if (result) {
if (this.mode === 'add') {
await companyDepartmentPost(this.form)
// 调用成功 1：清空表单数据与验证 2：关闭弹框 3：刷新父级列表数据 4：提示
this.$message.success('添加成功')
} else if (this.mode === 'edit') {
await companyDepartmentPut(this.form)
this.$message.success('编辑成功')
}
this.isShow = false
this.$emit('getData')
}
console.log(result)
})
},
// 关闭时事件
closeEvent() {
this.$refs.form.resetFields()
this.form = {
name: '', // string 非必须 部门名称
code: '', // string 非必须 部门编码，同级部门不可重复
manager: '', // string 非必须 负责人名称
introduce: '', // string 非必须 介绍
pid: '' // string 非必须 父级部门ID
}
}
}
}
</script>
<style></style>
标签：vue,
string,
form,
部门,
item,
add,
components,
message,
true
From： https://www.cnblogs.com/strundent/p/16882705.html