vue自定义组件
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit,让父组件监听到自定义事件
今天遇到一个下拉树形结构的单选的需求： 这里可以看到：org-codes 用来向子组件传参数，子组件用props接收参数。 用 this.$emit(“handleReturnarr”, node.orgName, node.orgCode); 子调用父组件方法顺带传参数 父组件 addDep.vue
封装的子组件qwOrgCurrentUser
1.在需要用封装组件的地方 import compents import qwOrgCurrentUser from "@/pages/Interwork/components/qwOrgCurrentUser";
components: {
qwOrgCurrentUser
}
<qwOrgCurrentUser :org-codes="orgCodes" @handleReturnarr="handleReturnarr"/>
全部的代码： 封装的组件 qwOrgCurrentUser.vue<template>
<div class="select">
<el-select
:value="orgCodes"
filterable
:filter-method="handlefilterable"
style="width: 100%"
:disabled="disabled || !isAdd"
@click.native="handleClick"
>
<el-option :value="orgCodes" :label="orgCodes">
<el-tree
ref="tree"
:data="options"
node-key="orgName"
:filter-node-method="filterNode"
:props="props"
@node-click="handleNodeClick"
>
<span slot-scope="{ node }" class="custom-tree-node">
<span>{{ node.label }}</span>
</span>
</el-tree>
</el-option>
</el-select>
</div>
</template>
<script>
import { childrenOrgList } from "@/pages/Interwork/api/IwDoctor";
export default {
props: {
orgCodes: {
type: String,
default: () => String,
},
disabled: {
type: Boolean,
default: false
},
isAdd: {
type: Boolean,
default: true
}
},
data() {
return {
props: {
multiple: true,
label: "orgName",
value: "orgCode",
children: "children",
},
options: [],
};
},
created() {
childrenOrgList().then((res) => {
// 机构列表接口
if (res.status === 200) {
this.options = res.data.data;
}
});
},
methods: {
getOrgName(data, orgCode) {
let res = "";
data.forEach((item) => {
if (item.orgCode === orgCode) {
res = item.orgName;
} else if (item.children) {
res = this.getOrgName(item.children);
}
});
return res;
},
handlefilterable(val) {
this.$refs.tree.filter(val);
},
filterNode(val, data) {
if (!val) return true;
return data.orgName.indexOf(val) !== -1;
},
handleNodeClick(node) {
const length = document.querySelectorAll(".el-select-dropdown").length;
document.querySelectorAll(".el-select-dropdown")[length-1].style.display = "none";
this.$emit("handleReturnarr", node.orgName, node.orgCode);
},
handleClick() {
const length = document.querySelectorAll(".el-select-dropdown").length;
document.querySelectorAll(".el-select-dropdown")[length-1].style.display = "block";
}
},
};
</script>
<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: 200px;
overflow: auto;
max-height: 274px;
padding: 0;
text-align: center;
background-color: #fff;
}
p {
margin: 0;
}
.el-form >>> .el-form-item__label {
min-width: 70px;
}
.formcodes {
position: relative;
}
.andtree {
width: 100%;
height: 300px;
position: absolute;
top: 40px;
left: 0;
right: 0;
border: 1px solid #eaeaea;
}
</style>
<template>
<div>
<div id="allmap" />
<el-form
ref="depForm"
:model="depForm"
:rules="rules"
label-width="100px"
>
<el-row :gutter="30">
<el-col :span="24">
<el-form-item label="机构" prop="id.orgCode">
<qwOrgCurrentUser
:org-codes="orgCodes"
@handleReturnarr="handleReturnarr"
/>
</el-form-item>
<el-form-item label="科室名称" prop="depName">
<el-input
v-model="depForm.depName"
placeholder="请输入科室名称"
/>
</el-form-item>
<el-form-item label="科室编码" prop="id.depCode">
<el-input
v-model="depForm.id.depCode"
placeholder="请输入科室编码"
@blur="validCode"
/>
</el-form-item>
<el-form-item label="状态" prop="depStatus">
<el-radio-group v-model="depForm.depStatus">
<el-radio
v-for="(item,index) in stateArr"
:key="index"
:label="item.value"
>
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" style="text-align: center">
<el-button type="primary" @click="confirm">确定</el-button>
<el-button @click="cancelAdd">取消</el-button>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import qwOrgCurrentUser from "@/pages/Interwork/components/qwOrgCurrentUser";
import { addDepInfo } from "@/pages/Interwork/api/IwData";
export default {
props: {
isAdd: {
type: Boolean,
default: true,
},
ControlStateArr: {
type: Array,
default: () => {}
}
},
components: {
qwOrgCurrentUser
},
data() {
return {
depForm: {
orgName: "", // 机构名称
depName: "", // 科室名称
depStatus: "", // 状态
id:{
orgCode:"",
depCode:"",
upFlag:"1",
sucFlag:"1"
}
},
orgCodes: "", // 查询科室单选框
target: "", // 编辑回显，新增参数传递
row: "", // 编辑回显，新增参数传递
rules: {
"id.orgCode": [
{
required: true,
message: "请选择机构",
trigger: "change",
},
],
depName: [
{
required: true,
message: "请输入科室名称",
trigger: "blur",
},
],
depCode: [{ required: true, message: "请输入科室编码" }],
},
stateArr: []
};
},
created() {
this.stateArr = [];
this.ControlStateArr.forEach(res => {
let a = {};
if (res.label != "全部") {
a.value = res.value;
a.label = res.label;
this.stateArr.push(a);
}
})
},
methods: {
infoEcho(row) {
this.depForm.depStatus = "0";
if (!this.isAdd) {
this.depForm.id.orgCode = row.orgCode;
this.orgCodes = row.orgName;
this.depForm.depName = row.depName;
this.depForm.id.depCode = row.depCode;
this.depForm.depStatus = row.depStatus;
}
},
cancelAdd() {
this.$refs.depForm.resetFields();
this.$emit("cancelAdd");
},
resetForm() {
// 清空表单
if (this.isAdd) {
this.$refs.depForm.resetFields();
} else {
this.infoEcho(this.target);
}
},
tip(type, text) {
// 操作提示
this.$message({
type: type,
message: text,
offset: 100,
});
},
handleReturnarr(arrname, arrcode) {
this.orgCodes = arrname;
this.depForm.id.orgCode=arrcode
this.depForm.orgName=arrname;
},
validCode() {
// 校验机构代码是否可用
// const code = {
// depCode: this.depForm.depCode,
// };
// searchdepCode(code).then((data) => {
// if (data.status === 200) {
// if (data.data.data === "存在重复机构号") {
// this.depForm.depCode = "";
// this.tip("error", "存在重复机构号");
// } else {
// this.tip("success", "机构号可用");
// }
// }
// });
},
confirm() {
// 校验
this.$refs.depForm.validate((valid) => {
if (valid) {
this.registerdeps();
} else {
return false;
}
});
},
registerdeps() {
// 新增编辑接口
const postdata = this.depForm;
addDepInfo(postdata).then((data) => {
if (data.status === 200) {
this.tip("success", data.data.data);
this.$emit("saveSuccess");
}
});
}
},
};
</script>
<style lang='scss' scoped>
.formmargin {
* {
margin-bottom: 10px;
}
}
</style>