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

<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\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

<!-- dialogVisible // 弹窗显隐 processId // 流程查询id processView // 流程展示dialogView弹窗 pageView直接展示 --> <template> <div> <template v-if="processView === 'dialogView'"> <el-dialog v-model="dialogVisible" align-center :inline="true" title="流程状态" width="1200" @close="cancelDialog" > <div v-if="instcId" class="process-pic"> <module :item="item" /> </div> <el-table ref="multipleTable" border :data="tableData" header-align="center" > <el-table-column label="审核节点" prop="actiName" width="100" /> <el-table-column label="处理人" prop="opUserName" /> <el-table-column label="审核状态" prop="processStateName" width="100" /> <el-table-column label="操作时间" prop="updateTime" width="180" /> <el-table-column label="意见" prop="approveContent" width="250" /> </el-table> </el-dialog> </template> <template v-else-if="processView === 'pageView'"> <div v-if="instcId" class="process-pic"> <module :item="item" /> </div> <el-table ref="multipleTable" :data="tableData" header-align="center"> <el-table-column label="审核节点" prop="actiName" width="100" /> <el-table-column label="处理人" prop="opUserName" /> <el-table-column label="审核状态" prop="processStateName" width="100" /> <el-table-column label="操作时间" prop="updateTime" width="180" /> <el-table-column label="意见" prop="approveContent" width="250" /> </el-table> </template> </div> </template> <script setup> import { auditProcess } from '@/api/audit' import Module from './module.vue' import { getBPMToken } from '@src/utils/token' const config = sessionStorage.getItem('configInfo') || '{}' const configInfo = JSON.parse(config) const tenant = (configInfo && configInfo.bpmTenant) || 'ph_kj' const loginUserInfo = JSON.parse(sessionStorage.getItem('loginUserInfo')) const props = defineProps({ dialogVisible: { type: Boolean, default: false, }, processId: { default: null, type: Array, }, processView: { default: 'dialogView', type: String, }, }) const processId = ref() const tableData = ref([]) const item = ref() const instcId = ref() onMounted(() => { watch( () => props.dialogVisible, (newVal) => { if (newVal) { nextTick(() => { processId.value = props.processId tableData.value = [] onLoad() }) } }, { immediate: true } ) }) const emit = defineEmits(['update:dialogVisible']) const { processView } = toRefs(props) const dialogVisible = computed({ get: () => props.dialogVisible, set: (val) => emit('update:dialogVisible', val), }) const onLoad = async () => { const returnData = await auditProcess({ processId: processId.value }) tableData.value = returnData.data.actiList tableData.value.forEach((item) => item.processState == 3 ? (item.updateTime = '') : item.updateTime ) instcId.value = returnData.data.instcId item.value = { address: configInfo.baseAppUrl + '/default/rest/BPMDQManager/getProcessXml', tenant: tenant, tenantToken: getBPMToken(), userId: loginUserInfo.systemUserId, processInstId: returnData.data.instcId, } } const cancelDialog = () => { emit('update:dialogVisible', false) } </script> <style scoped> .process-pic { width: 100%; height: 240px; margin-bottom: 20px; overflow: hidden; } .v-form { display: flex; } </style> 

版权声明：

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

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