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

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": "操作成功"
}