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": "a287151c2f8845309c848b3a27c7b80a", "orgObjMdmName": "北京市分公司朝阳支公司", "orgObjTypeInner": "1", "unitNature": "1", "orgLabelList": [], "mgtOrgCode": "00080023", "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6" }, { "id": "8", "belontTo": 1, "orgObjCode": "7606460177aa4259bcc1244e5e4452e1", "orgObjMdmName": "北京市分公司昌平支公司", "orgObjTypeInner": "1", "unitNature": "1", "orgLabelList": [], "mgtOrgCode": "00080006", "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6" }, { "id": "10", "belontTo": 1, "orgObjCode": "730cc4c780074444b91768eee928dff6", "orgObjMdmName": "北京市分公司海淀支公司", "orgObjTypeInner": "1", "unitNature": "1", "orgLabelList": [], "mgtOrgCode": "00080024", "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6" } ] }, "message": "操作成功" }
