vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl

el-select组件文件

src\components\dictSelect.vue

<template> <el-select v-model="dictValue" class="m-2" placeholder="请选择" size="min" @change="selectDictEvent" @click="clickSelectDict" > <el-option v-for="item in dictData" :key="item.codeClsVal" :label="item.codeClsValName" :value="item.codeClsVal" /> </el-select> </template> <script setup> // import { queryId } from '@/api/project/couny' import { queryDict } from '@src/api/common/base' import { watch } from 'vue' const props = defineProps({ modelValue: { default: null, type: String, }, dictid: { default: null, type: String, }, }) const emit = defineEmits(['update:modelValue', 'dict-callback', 'dict-lable']) const dictData = ref() const { modelValue } = toRefs(props) const queryDictList = () => { queryDict({ codeClsTypes: [props.dictid] }).then((res) => { dictData.value = res.data[props.dictid] }) } const clickSelectDict = () => { if (!dictData.value) { queryDictList() } } watch( () => props.modelValue, () => { // val if (!dictData.value) { queryDictList() } } ) const dictValue = toRef(props, 'modelValue') const selectDictEvent = (val) => { emit('update:modelValue', val) emit('dict-callback', dictData.value) emit('dict-lable', val) } onMounted(() => { nextTick(() => { if (modelValue.value) { queryDictList() } else { return } }) }) </script>

下拉组件

src\components\unitSelect.vue

<!-- modelValue //select的值 code值 disabled //是否编辑 contrUnitName //回显是select的name 值 change-unit //回调方法： 参数为选择后单位相关的数据 labelCode //二级单位数据传对应labelCode orgcode //组织树下拉数据筛选条件 --> <template> <div style="width: 100%"> <el-select v-if="labelCode" v-model="unitValue" :disabled="disabled" filterable placeholder="请选择单位" @change="selectUnitEvent" > <el-option v-for="item in companyLabelData" :key="item.id" :label="item.orgObjMdmName" :value="item.id" /> </el-select> <el-select v-else-if="orgcode" v-model="unitValue" :disabled="disabled" filterable placeholder="请选择单位" @change="selectUnitEvent" > <el-option v-for="item in companyData" :key="item.id" :label="item.orgObjMdmName" :value="item.id" /> </el-select> <el-select v-else v-model="unitValue" clearable :disabled="disabled" filterable :loading="loading" placeholder="请搜索单位" remote :remote-method="remoteMethod" reserve-keyword @change="selectUnitEvent" > <template #prefix> <el-icon class="el-input__icon"><search /></el-icon> </template> <el-option v-for="item in companyData" :key="item.id" :label="item.orgObjMdmName" :value="item.id" /> </el-select> </div> </template> <script setup> import { getUnits, getLabelUnits } from '@src/api/common/base' import { Search } from '@element-plus/icons-vue' const props = defineProps({ modelValue: { default: null, type: Number, }, contrUnitName: { default: null, type: String, }, labelCode: { default: null, type: Array, }, disabled: { default: false, type: Boolean, }, orgcode: { default: '', type: String, }, }) const ruleForm = ref({ orgObjMdmNameLike: '', current: '1', size: 100, }) const { labelCode, disabled, orgcode } = toRefs(props) const emit = defineEmits(['update:modelValue', 'change-unit']) const companyData = ref() const companyLabelData = ref() onMounted(() => { watch( () => props.modelValue, (newVal) => { if (newVal) { nextTick(() => { if (props?.labelCode && !companyLabelData.value?.length) { getLabelUnitsList() } else if (props?.orgcode && !companyData.value?.length) { getUnitsList() } else if (!props.orgcode) { companyData.value = [ { orgObjMdmName: props.contrUnitName, id: props.modelValue, }, ] } }) } }, { immediate: true } ) }) //接口文档调取 const getUnitsList = async () => { ruleForm.value.porgObjCodeInner = orgcode.value const pattern = /[_]$/ if (!pattern.test(ruleForm.value.orgObjMdmNameLike)) { await getUnits(ruleForm.value).then((res) => { companyData.value = res.data.list }) } } const getLabelUnitsList = async () => { await getLabelUnits({ labelCode: labelCode.value }).then((res) => { companyLabelData.value = res.data }) } if (labelCode.value && labelCode.value.length) { getLabelUnitsList() } else if (orgcode.value && orgcode.value.length) { getUnitsList() } const unitValue = toRef(props, 'modelValue') const selectUnitEvent = (val) => { emit('update:modelValue', val) let obj if (labelCode.value && labelCode.value.length) { obj = val ? companyLabelData.value.find(function (item) { return item.id === val }) : { id: '', orgObjMdmName: '' } } else { obj = val ? companyData.value.find(function (item) { return item.id === val }) : { id: '', orgObjMdmName: '' } } emit('change-unit', obj) } //过滤筛选关键字数据 const loading = ref(false) const remoteMethod = (query) => { if (query) { ruleForm.value.orgObjMdmNameLike = query loading.value = true setTimeout(() => { loading.value = false getUnitsList() }, 200) } else { companyData.value = [] } } </script>

接口文件

src\api\common\base.js

import request from '@src/utils/request' import { 
    plan } from '@/config' //枚举值查询 process.env.VUE_APP_URL--> apiUrl const configInfo = sessionStorage.getItem('configInfo') || '{}' const apiUrl = JSON.parse(configInfo)?.baseApiUrl || 'http://27.76.34.99/kjapi' export const queryDict = (data) => { 
    return request({ 
    url: `${ 
     apiUrl}/emss-cmnf-common-front/member/codeClsVal/getCodeClsValListByCodeClsType`, method: 'post', data, }) } //模糊搜索单位下来数据 export const getUnits = (data) => { 
    return request({ 
    url: `${ 
     apiUrl}/srbm-bas-mdm-front/member/feignDataRel/org/page`, method: 'post', data, }) } //二级单位数据 export const getLabelUnits = (data) => { 
    return request({ 
    url: `${ 
     apiUrl}/srbm-bas-mdm-front/member/feignDataRel/org/search`, method: 'post', data, }) }

接口数据

系统内单位角色

http://27.86.34.99/kjapi/emss-cmnf-common-front/member/codeClsVal/getCodeClsValListByCodeClsType

参数

{ 
   "codeClsTypes":["sgCompRole"]}

响应

{ 
    "code": "00000", "message": "success", "data": { 
    "sgCompRole": [ { 
    "codeClsVal": "1", "codeClsValName": "项目牵头", "mgtOrgCode": "32101", "prntCodeClsVal": "BM34_01" }, { 
    "codeClsVal": "2", "codeClsValName": "课题牵头", "mgtOrgCode": "32101", "prntCodeClsVal": "BM34_01" }, { 
    "codeClsVal": "3", "codeClsValName": "参与", "mgtOrgCode": "32101", "prntCodeClsVal": "BM34_01" } ] }, "total": 0 }

流程状态

http://27.86.34.99/kjapi/emss-cmnf-common-front/member/codeClsVal/getCodeClsValListByCodeClsType

参数

{ 
   "codeClsTypes":["projectExamine"]}

响应

{ 
    "code": "00000", "message": "success", "data": { 
    "projectExamine": [ { 
    "codeClsVal": "1", "codeClsValName": "待提交", "mgtOrgCode": "32101" }, { 
    "codeClsVal": "2", "codeClsValName": "返回修改", "mgtOrgCode": "32101" }, { 
    "codeClsVal": "3", "codeClsValName": "审批中", "mgtOrgCode": "32101" }, { 
    "codeClsVal": "4", "codeClsValName": "审核通过", "mgtOrgCode": "32101" }, { 
    "codeClsVal": "5", "codeClsValName": "审核不通过", "mgtOrgCode": "32101" } ] }, "total": 0 }

牵头单位

http://27.86.34.99/kjapi/srbm-bas-mdm-front/member/feignDataRel/org/page

参数

{ 
    "orgObjMdmNameLike": "北京市电力", "current": "1", "size": 100, "porgObjCodeInner": "" }

响应

{ 
    "code": "00000", "success": true, "data": { 
    "orderList": null, "current": 1, "size": 100, "total": 29, "list": [ { 
    "id": "1", "belontTo": 1, "orgObjCode": "04a31c3dd75c4990b92103a9fec4232c", "orgObjMdmName": "北京市分公司房山支公司", "orgObjTypeInner": "1", "unitNature": "1", "orgLabelList": [], "mgtOrgCode": "00080022", "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6" }, { 
    "id": "6", "belontTo": 1, "orgObjCode": "d8660f3cf0344fc6865edd332e6180e6", "orgObjMdmName": "北京市分公司大兴支公司", "orgObjTypeInner": "1", "unitNature": "1", "orgLabelList": [], "mgtOrgCode": "00080007", "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6" }, { 
    "id": "7", "belontTo": 1, "orgObjCode": "ac2fc848b3a27c7b80a", "orgObjMdmName": "北京市分公司朝阳支公司", "orgObjTypeInner": "1", "unitNature": "1", "orgLabelList": [], "mgtOrgCode": "00080023", "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6" }, { 
    "id": "8", "belontTo": 1, "orgObjCode": "aa4259bcc1244e5e4452e1", "orgObjMdmName": "北京市分公司昌平支公司", "orgObjTypeInner": "1", "unitNature": "1", "orgLabelList": [], "mgtOrgCode": "00080006", "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6" }, { 
    "id": "10", "belontTo": 1, "orgObjCode": "730cc4cb91768eee928dff6", "orgObjMdmName": "北京市分公司海淀支公司", "orgObjTypeInner": "1", "unitNature": "1", "orgLabelList": [], "mgtOrgCode": "00080024", "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6" } ] }, "message": "操作成功" }

到此这篇vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法

下一篇： vue3中，封装el-select选择器组件(一)——表单四等分布局、查询、重置resetFields、el-date-picker起止日期、特殊字符校验、自定义指令v-throttle用于按钮防抖

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10747.html

vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl

el-select组件文件

下拉组件

接口文件

接口数据

相关文章：