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>