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>