vue3中,封装el-tree树形控件组件,用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法
【代码】vue3中,封装el-tree树形控件组件,用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法。
·
vue3中,封装el-tree树形控件组件,用于组织架构——defineEmits、defineProps & vue3之computed计算属性、watch和nextTick监听的写法 & `${写法
效果
1
2
主页代码
index.vue
<template>
<div class="main-content">
<el-button
:disabled="route.query.type === 'view'"
plain
type="primary"
@click="handleUnit"
>
选择单位
</el-button>
<div class="table-lists">
<el-table ref="multipleTableRef" border :data="tableUnitData" stripe>
<el-table-column label="序号" type="index" width="120" />
<el-table-column label="单位名称" prop="unitName" />
<el-table-column v-if="route.query.type !== 'view'" label="操作">
<template #default="scope">
<el-button
link
type="primary"
@click="handleClickUnit(scope.$index)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 全量单位数据-->
<SelectUnit
v-if="formInline.changeType === '6'"
v-model:dialogVisible="dialogUnit"
v-model:unitData="tableUnitData"
/>
<!-- 2级单位数据-->
<SelectUnit
v-model:dialogVisible="dialogUnit"
v-model:unitData="tableUnitData"
:level="'2'"
@change-unit="handleUnit"
/>
</div>
</template>
<script setup>
//承担单位
const dialogUnit = ref(false);
const multipleTableRef = ref(null);
const tableUnitData = ref([]);
const handleUnit = async () => {
dialogUnit.value = true;
tableUnitData.value.forEach((item) => {
item.id = item.unitCode;
item.orgObjMdmName = item.unitName;
});
};
//承担单位删除
const handleClickUnit = (index) => {
ElMessageBox.confirm("确认删除").then(() => {
tableUnitData.value.splice(index, 1);
});
};
// 单位
const handleUnit = (params) => {
emit('joinUnit', params)
state.units = params // 回填
state.formData.unitList = params // 承担单位值
// 写法一
const orgObjMdmNames = params.map((item) => item.orgObjMdmName)
const orgObjMdmIds = params.map((item) => item.id)
const names = orgObjMdmNames.toString()
const ids = orgObjMdmIds.toString()
const data = state.formData.baseTopicList
data[`${state.curIndex}`].leadUnit = names //lead_unit
data[`${state.curIndex}`].leadUnitId = ids //lead_unit_id
// 写法二
params.forEach((item) => {
setTimeout(() => {
getUnitsDetail({ value: item, source: 'fund' })
}, 1000)
})
}
</script>
<style lang="scss" scoped></style>
附
// 写法一
var a = '小明'
var b = {c:12}
b[`${a}`] = '小强'
console.log(b) // {c: 12, 小明: '小强'}
//写法二
var list = [2,3,4]
var index = 2
var val = list[`${index}`]
console.log(val) // 4
//写法三
var arr = [{a:'小强',b:'小军'}]
var id = 0
var name = arr[`${id}`].b
console.log(name) // '小军'
弹框树形控件组件代码
src\app\science\components\SelectUnit.vue
<!--
dialogVisible //弹窗是否显示
unitData //选择后需要回显数据
level //数据权限 不传获取全部组织树数据,传2获取2级单位数据
change-unit //回调方法: 参数为选择后单位相关的数据
-->
<template>
<el-dialog
v-model="dialogVisible"
align-center
append-to-body
height="600"
:modal="false"
style="width: 1000px"
title="单位选择"
>
<div class="el-dialog-div">
<el-row :gutter="24">
<el-col :span="10" style="width: 400px">
<el-form
ref="formRef"
class="inline-form"
:inline="true"
label-position="right"
label-width="70px"
:model="formInline"
>
<el-form-item>
<el-select v-model="region" disabled>
<el-option label="内部" value="neibu" />
<el-option label="外部" value="waibu" />
</el-select>
</el-form-item>
<el-form-item>
<el-input v-model="filterText" placeholder="搜索" />
</el-form-item>
</el-form>
<el-tree
ref="treeRef"
check-strictly
class="filter-tree"
:data="interData"
:filter-node-method="filterNode"
node-key="id"
:props="treeProps"
show-checkbox
@check-change="handleCheckChange"
/>
</el-col>
<el-col :span="14">
<el-table ref="multipleTableRef" border :data="tableData">
<el-table-column label="单位名称" prop="orgObjMdmName" />
<el-table-column label="组织机构代码" prop="id" />
</el-table>
</el-col>
</el-row>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelDialog">取消</el-button>
<el-button type="primary" @click="submitDialog">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { getUnitsTree, getUnitstwoTree } from '@src/api/common/base'
const props = defineProps({
dialogVisible: {
default: null,
type: Boolean,
},
level: {
default: null,
type: String,
},
unitData: {
default: null,
type: Object,
},
})
const emit = defineEmits([
'update:dialogVisible',
'update:unitData',
'change-unit',
])
const dialogVisible = computed({
get: () => props.dialogVisible,
set: (val) => emit('update:dialogVisible', val),
})
const { level } = toRefs(props)
const region = ref('neibu')
const treeRef = ref()
const filterText = ref('')
const interData = ref([])
const treeProps = {
children: 'children',
label: 'orgObjMdmName',
value: 'id',
}
const tableData = ref([])
const onLoad = () => {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
if (level.value === '2') {
getUnitstwoTree()
.then((res) => {
interData.value = res.data
loading.close()
})
.catch(() => {
loading.close()
})
} else {
getUnitsTree()
.then((res) => {
interData.value = res.data
loading.close()
})
.catch(() => {
loading.close()
})
}
}
onLoad()
watch(filterText, (val) => {
treeRef.value.filter(val)
})
watch(
() => props.dialogVisible,
(newVal) => {
if (newVal) {
nextTick(() => {
treeRef.value.setCheckedKeys([], false)
console.log(props.unitData, 1111)
treeRef.value.setCheckedNodes(props.unitData)
tableData.value = props.unitData
})
}
},
{ immediate: true }
)
const filterNode = (value, data) => {
if (!value) return true
return data.orgObjMdmName.includes(value)
}
const handleCheckChange = () => {
tableData.value = treeRef.value.getCheckedNodes(false, false)
}
const cancelDialog = () => {
emit('update:dialogVisible', false)
}
const submitDialog = async () => {
tableData.value.forEach((item) => {
item.scc = item.id
item.unitName = item.orgObjMdmName
item.unitCode = item.id
item.children = []
})
emit('update:unitData', tableData.value)
emit('update:dialogVisible', false)
emit('change-unit', tableData.value)
console.log(tableData.value, '确定')
}
</script>
<style scoped>
.filter-tree {
position: relative;
width: 380px;
height: 500px;
overflow-y: auto;
}
</style>
接口数据
src\api\common\base.js
import request from '@src/utils/request'
//枚举值查询 process.env.VUE_APP_URL--> apiUrl
const configInfo = sessionStorage.getItem('configInfo') || '{}'
const apiUrl = JSON.parse(configInfo)?.baseApiUrl || 'http://27.86.34.99/kjapi'
//单位组织树全部数据
export const getUnitsTree = (params) => {
return request({
url: `${apiUrl}/srbm-bas-mdm-front/member/feignDataRel/org/tolTree`,
method: 'get',
params,
})
}
//单位组织树2级数据
export const getUnitstwoTree = (params) => {
return request({
url: `${apiUrl}/srbm-bas-mdm-front/member/feignDataRel/org/twoTree`,
method: 'get',
params,
})
}
2级数据
http://27.86.34.99/kjapi/srbm-bas-mdm-front/member/feignDataRel/org/twoTree
{
"code": "00000",
"success": true,
"data": [
{
"id": "58",
"orgObjCode": "0e9c9e3f757645fa92710b89ab33813a",
"pOrgObjCodeInner": "0",
"orgObjMdmName": "国家电网公司",
"mgtOrgCode": "0000",
"children": [
{
"id": "3291",
"orgObjCode": "019468e5ad2942c19ea70e8ad113ea52",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "全球能源互联网集团有限公司",
"mgtOrgCode": "0037",
"children": [],
"hasChildren": false,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
},
{
"id": "3287",
"orgObjCode": "0916a6a7839d45bdab54c8759ab79e97",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "中国电力技术装备有限公司",
"mgtOrgCode": "0036",
"children": [],
"hasChildren": false,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
},
{
"id": "3296",
"orgObjCode": "0ce337c3bd5a41fa812fcfd5f8051add",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "中国电力科学研究院有限公司",
"mgtOrgCode": "0038",
"children": [],
"hasChildren": false,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
},
{
"id": "3289",
"orgObjCode": "10ca50caada54792a0e2e95964ea2916",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "国网智能电网研究院有限公司",
"mgtOrgCode": "0042",
"children": [],
"hasChildren": false,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
},
{
"id": "1032",
"orgObjCode": "17ca61f8c2f6486aafc88852ea360b0c",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "国家电网有限公司大数据中心",
"mgtOrgCode": "0058",
"children": [],
"hasChildren": false,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
}
],
"hasChildren": true,
"porgObjCodeInner": "0"
}
],
"message": "操作成功"
}
全量数据
http://27.86.34.99/kjapi/srbm-bas-mdm-front/member/feignDataRel/org/tolTree
{
"code": "00000",
"success": true,
"data": [
{
"id": "58",
"orgObjCode": "0e9c9e3f757645fa92710b89ab33813a",
"pOrgObjCodeInner": "0",
"orgObjMdmName": "国家电网公司",
"mgtOrgCode": null,
"children": [
{
"id": "3",
"orgObjCode": "6aa31ca4eba34073b3232a27161e4db1",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "国家电网有限公司华中分部",
"mgtOrgCode": null,
"children": [
{
"id": "4",
"orgObjCode": "cf0db6cf5978452eb64fd18aec395cc4",
"pOrgObjCodeInner": "6aa31ca4eba34073b3232a27161e4db1",
"orgObjMdmName": "国家电网有限公司华中分部后勤管理中心",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "6aa31ca4eba34073b3232a27161e4db1"
},
{
"id": "16",
"orgObjCode": "79c78961a06b4e3a93cc8eb209a7c6e5",
"pOrgObjCodeInner": "6aa31ca4eba34073b3232a27161e4db1",
"orgObjMdmName": "国家电网有限公司华中分部电网技术支持中心",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "6aa31ca4eba34073b3232a27161e4db1"
}
],
"hasChildren": true,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
},
{
"id": "17",
"orgObjCode": "2c205be18f3849e3996948a76836e3f9",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "国家电网公司东北分部",
"mgtOrgCode": null,
"children": [
{
"id": "13",
"orgObjCode": "f7c7b8a0b1f54553ae3dc0acfc00f921",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "东北分部后勤管理中心",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "18",
"orgObjCode": "0adfff04222741e89d2def254abf83e1",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "国家电网公司东北分部",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "21",
"orgObjCode": "58e662c160db43d1a3af3214296f6008",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "云峰发电厂(国网东北分部绿源水力发电公司)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "23",
"orgObjCode": "e58f92a3dbeb45baade2d09034fddc07",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "国网东北分部电网技术支持中心",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "24",
"orgObjCode": "ff187d22bb95449187374c4665ae7b0b",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "太平湾发电厂(国网东北分部绿源水力发电公司)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "27",
"orgObjCode": "31a5d47e3317434baa4dab701b2a8a7f",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "望江楼水电站工程建设局(国网东北分部绿源)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "34",
"orgObjCode": "238c2347ebfd42b8918371bd2f4ae158",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "望江楼水电站工程建设局",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "36",
"orgObjCode": "1b125856b5814d3b905177b05f47e923",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "太平湾发电厂",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "37",
"orgObjCode": "6a43230d80614c1ca91656e2dd82dd1b",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "云峰发电厂",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
},
{
"id": "44",
"orgObjCode": "08e30b3bc8954e1c9704a861f7b7f8f3",
"pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
"orgObjMdmName": "检修公司(国网东北分部绿源水力发电公司)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
}
],
"hasChildren": true,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
},
{
"id": "38",
"orgObjCode": "45178125acfe422b91e751b31a234478",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "国家电网有限公司西北分部",
"mgtOrgCode": null,
"children": [
{
"id": "50",
"orgObjCode": "e20c012d06924396996b3d30da496529",
"pOrgObjCodeInner": "45178125acfe422b91e751b31a234478",
"orgObjMdmName": "西北分部电网技术支持中心(支撑机构)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "45178125acfe422b91e751b31a234478"
},
{
"id": "55",
"orgObjCode": "5fc1336f36334a9ca7dcf95501c63832",
"pOrgObjCodeInner": "45178125acfe422b91e751b31a234478",
"orgObjMdmName": "西北分部后勤管理中心(支撑机构)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "45178125acfe422b91e751b31a234478"
}
],
"hasChildren": true,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
},
{
"id": "51",
"orgObjCode": "30c1ffad5d664d65a5a3054427ee2b02",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "国家电网公司西南分部",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
},
{
"id": "62",
"orgObjCode": "2fb658beab814d69b7fb7ec596a378b6",
"pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
"orgObjMdmName": "国网北京市电力公司",
"mgtOrgCode": null,
"children": [
{
"id": "1",
"orgObjCode": "04a31c3dd75c4990b92103a9fec4232c",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司房山供电公司",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "6",
"orgObjCode": "d8660f3cf0344fc6865edd332e6180e6",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司物资分公司(国网京电(北京)招标有限公司)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "7",
"orgObjCode": "a287151c2f8845309c848b3a27c7b80a",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司大兴供电公司",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "8",
"orgObjCode": "7606460177aa4259bcc1244e5e4452e1",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司信息通信分公司",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "10",
"orgObjCode": "730cc4c780074444b91768eee928dff6",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司平谷供电公司",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "14",
"orgObjCode": "a293f054bd7748509c106240b0258082",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司综合服务中心",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "19",
"orgObjCode": "aa68fca7d7034ec2a9c379b315336ffc",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "中共国网北京市电力公司党校(北京首电人才服务有限公司)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "20",
"orgObjCode": "80935987da0a4d3c86dc7251a63bc126",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司密云供电公司",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "25",
"orgObjCode": "55940778b41a444eb7444f24aecf7d4f",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司客户服务中心",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "60",
"orgObjCode": "6252635d76074d73bcc64cea66fbe847",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司业务发展中心",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "61",
"orgObjCode": "a8d87150253e4884b3c0dd188237148a",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司经济技术研究院(北京电力经济技术研究院有限公司)",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "63",
"orgObjCode": "0da674bae1724f17a1bed7ac18ee5059",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "国网北京市电力公司物业管理公司",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
},
{
"id": "77",
"orgObjCode": "827e45bc2f6d4b2aa82b1d18315a507e",
"pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
"orgObjMdmName": "北京电力工程有限公司",
"mgtOrgCode": null,
"children": [],
"hasChildren": false,
"porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
}
],
"hasChildren": true,
"porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
}
],
"hasChildren": true,
"porgObjCodeInner": "0"
}
],
"message": "操作成功"
}
更多推荐
已为社区贡献72条内容
所有评论(0)