vue3进阶(四)——export function导出定义数据和接口数据 &封装el-select组件 & 获取sessionStorage中的基准地址apiUrl & watch和toRefs写法

vue3进阶(四)——export function导出定义数据和接口数据 &封装el-select组件 & 获取sessionStorage中的基准地址apiUrl & watch和toRefs写法

7、引入的方法和接口数据

src\app\plan\views\organization\testRules\hooks\initalize.js

export function useInitalize(request, formInline = {}) {
  const result = ref([])
  const loading = ref(false)
  const pageInfo = ref({
    pageSize: 10,
    pageNumber: 1,
    total: 0,
  })
  const form = ref(formInline)
  const onload = () => {
    const reqBody = { ...pageInfo.value, ...form.value }
    loading.value = true
    request(reqBody)
      .then(
        (res) => {
          const type = Object.prototype.toString.call(res.data)
          const data = type === '[object Object]' ? res.data.data : res.data
          if (!data) console.error('数据拿错啦！')
          const { code, message } = res
          if (code === '00000') {
            result.value = data
            pageInfo.value.total = Number(res.data?.total)
          } else {
            ElMessage({ type: 'error', message })
          }
        },
        () => {}
      )
      .finally(() => {
        loading.value = false
      })
  }
  return { result, pageInfo, formInline, onload, loading }
}

8、引入的判断条件

src\utils\limits.js

// 使用说明
// v-if="handelLimit('opt0003')"
// import {handelLimit}from "@src/utils/limits"

const menuInfos = sessionStorage.getItem('')

// 控制页面按钮
export const handelLimit = (btnId) => {
  if (process.env.VUE_APP_ENV === 'development') return true
  if (menuInfos === null || menuInfos === '') return false
  const menuInfoArr = JSON.parse(menuInfos)
  const data = getFlatArr(menuInfoArr)
  return data.some((item) => item.busicode == btnId)
}

9、引入的接口

src\app\science\api\variousUnits\index.js

import request from '@src/utils/request'
import { sciencePostUrl } from '@/config'

//指南组别配置-根据专家信息、组别版本查询已经配置的组别信息)
export const getVersion = (data) => {
  return request({
    url: `${sciencePostUrl}/guidGroup/getGroupNameByExpertAndVersion`,
    method: 'post',
    data,
  })
}

//指南组别-根据专家信息查询已经配置的组别版本
export const getVersionByExpert = (data) => {
  return request({
    url: `${sciencePostUrl}/guidGroup/getVersionByExpert`,
    method: 'post',
    data,
  })
}

//指南编制-需求转租批量提交
export const batchGroupUpdateStatus = (data) => {
  return request({
    url: `${sciencePostUrl}/demandConvert/batchUpdateStatus`,
    method: 'post',
    data,
  })
}

// 通过id删除需求转租信息
export const deleDemandConvertById = (data) => {
  return request({
    url: `${sciencePostUrl}/demandConvert/deleDemandConvertById`,
    method: 'post',
    data,
  })
}

//指南批次配置-查询所有批次星系
export const queryAllGuidBathInfo = (data) => {
  return request({
    url: `${sciencePostUrl}/guidBatch/queryAllGuidBathInfo`,
    method: 'post',
    data,
  })
}

//指南-需求转租-查询列表
export const demandConvertQuery = (data) => {
  return request({
    url: `${sciencePostUrl}/demandConvert/demandConvertQuery`,
    method: 'post',
    data,
  })
}

10、下拉框组件

src\components\dictSelect.vue

接口

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,
  })
}

src\utils\validate.ts

//  禁止输入框特殊字符校验 
export function replaceCommonText(e: any) {
  if (!checkSpecificKeyWord(e)) {
    // 提交关键字
    ElMessage({
      message: '不能包含关键词： ' + wordKey,
      type: 'warning',
    })
    const y = e.replace(wordKey, '')
    return y
  } else {
    const str = e.replace(
      /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”  ]/g,
      ''
    )
    const y = str.replace(/\s+/g, '')
    return y
  }
}

11、引入模块组件

src\components\auditPopup.vue