业务注入

框架对部分涉及业务逻辑的组件（例如字典选择器、网格选择器等）进行了抽象化的封装，将具体的抽象方法交由使用者实现，所以在使用对应组件之前，需要注入相关方法。

全局注入

通过应用的provide方法可以进行业务方法的全局注入，它将作用于应用的所有子组件及后代组件。

import { createApp } from 'vue';
import axios from 'axios';
import {
  CHECK_AUTHORITY_KEY,
  FILE_UPLOAD_URL_KEY,
  HANDLE_FILE_RESPONSE_KEY,
  HANDLE_FILE_URLS_KEY,
  LOAD_DICT_LIST_KEY,
  LOAD_GRID_BY_CODE_KEY,
} from 'liv-web';
import App from './src/App.vue';

const app = createApp(App);

// 假设当前登录用户拥有以下权限标识
const authoritys = ['docAdmin'];
// 注入权限校验方法
app.provide(CHECK_AUTHORITY_KEY, authority => authoritys.includes(authority));

// 注入加载数据字典方法
app.provide(LOAD_DICT_LIST_KEY, dictType =>
  axios
    .get('/api/dict/list', {
      params: {
        dictType: dictType,
      },
    })
    .then(res => res.data),
);

// 注入根据网格编码查询网格方法
app.provide(LOAD_GRID_BY_CODE_KEY, gridCode =>
  axios
    .get('/api/grid/getByCode', {
      params: {
        gridCode: gridCode,
      },
    })
    .then(res => res.data),
);

// 注入文件上传地址
app.provide(FILE_UPLOAD_URL_KEY, `${import.meta.env.VITE_FILE_URL}/cf/FileServer/fileOper`);

// 注入处理文件上传请求返回的response方法
app.provide(HANDLE_FILE_RESPONSE_KEY, response => {
  return response.message[0];
});

// 注入将数据库存储的文件地址转换为可以访问的文件地址数组方法
app.provide(HANDLE_FILE_URLS_KEY, urls => {
  return (
    urls
      ?.split(',')
      ?.map(
        url =>
          `${import.meta.env.VITE_FILE_URL}/ruralLivingEnv/fileControll/downLoadFile?swfName=${url}`,
      ) ?? []
  );
});

// 全局注入更多业务方法...

更多可注入业务方法请参考可注入业务。

局部注入

在组件中使用provide可以进行局部注入，它将作用于该组件的所有子组件及后代组件。

<template>
  <liv-data-form :model="form" :fields="fields"></liv-data-form>
  <router-view></router-view>
</template>

<script lang="ts" setup>
import { ref, provide } from 'vue';
import { FILE_UPLOAD_URL_KEY, type DataFormFields } from 'liv-web';

// 将作用于当前组件的所有子组件及后代组件
provide(FILE_UPLOAD_URL_KEY, '/new-api/file/upload');

interface FormData {
  // ...
}

const form = ref<FormData>({
  // ...
});

const fields: DataFormFields<FormData> = [
  // ...
];
</script>

可注入业务

权限

注入权限校验业务

// 假设当前登录用户拥有以下权限标识
const authoritys = ['docAdmin'];
app.provide(CHECK_AUTHORITY_KEY, authority => authoritys.includes(authority));

数据字典

注入加载数据字典业务

app.provide(LOAD_DICT_LIST_KEY, dictType =>
  axios
    .get('/api/dict/list', {
      params: {
        dictType: dictType,
      },
    })
    .then(res => res.data),
);

注入加载子级数据字典业务

app.provide(LOAD_DICT_LIST_BY_ID_KEY, parentId =>
  axios
    .get('/api/dict/listById', {
      params: {
        id: parentId,
      },
    })
    .then(res => res.data),
);

网格区域

注入加载根网格业务

app.provide(LOAD_ROOT_GRID_KEY, () =>
  axios
    .get('/api/grid/getByCode', {
      params: {
        gridCode: '36',
      },
    })
    .then(res => res.data),
);

注入加载用户所属网格业务

app.provide(LOAD_USER_GRID_KEY, () =>
  axios
    .get('/api/grid/getByCode', {
      params: {
        gridCode: '3601',
      },
    })
    .then(res => res.data),
);

注入根据网格编码加载网格业务

app.provide(LOAD_GRID_BY_CODE_KEY, gridCode =>
  axios
    .get('/api/grid/getByCode', {
      params: {
        gridCode: gridCode,
      },
    })
    .then(res => res.data),
);

注入根据网格ID加载网格业务

app.provide(LOAD_GRID_BY_ID_KEY, gridId =>
  axios
    .get('/api/grid/getById', {
      params: {
        id: gridId,
      },
    })
    .then(res => res.data),
);

注入根据网格编码加载子级网格业务

app.provide(LOAD_GRID_CHILDREN_BY_CODE_KEY, gridCode =>
  axios
    .get('/api/grid/getChildren', {
      params: {
        gridCode: gridCode,
      },
    })
    .then(res => res.data),
);

注入查询起始网格编码到目标网格编码对应的网格树业务

app.provide(LOAD_GRID_TREE_BY_CODE_KEY, (rootCode, targetCode) =>
  axios
    .get('/api/grid/getExpandedTree', {
      params: {
        rootCode: rootCode,
        targetCode: targetCode,
      },
    })
    .then(res => [res.data.areaTree]),
);

文件

注入文件上传地址

app.provide(FILE_UPLOAD_URL_KEY, '/api/file/upload');

注入文件上传header

app.provide(FILE_UPLOAD_HEADER_KEY, {
  Authorization: import.meta.env.VITE_AUTHORIZATION,
  'Blade-Auth': import.meta.env.VITE_BLADE_AUTH,
});

注入文件上传data

app.provide(FILE_UPLOAD_DATA_KEY, {
  action: 'upload',
  rename: true,
  belongOrgId: 'ruralLivingEnv',
  folder: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
  flag: true,
});

注入处理文件上传response业务

app.provide(HANDLE_FILE_RESPONSE_KEY, response => {
  return response.data.fileUrl;
});

注入处理文件地址业务

app.provide(HANDLE_FILE_URLS_KEY, urls => {
  return (
    urls
      ?.split(',')
      ?.map(
        url =>
          `${import.meta.env.VITE_FILE_URL}/ruralLivingEnv/fileControll/downLoadFile?swfName=${url}`,
      ) ?? []
  );
});

注入处理缩略图地址业务

app.provide(HANDLE_THUMB_URLS_KEY, urls => {
  return (
    urls?.split(',')?.map(url => {
      const fileSuffix = url.split('.').pop();
      return `${import.meta.env.VITE_FILE_URL}/ruralLivingEnv/fileControll/downLoadFile?swfName=${url.replace(
        '.' + fileSuffix,
        '_thumb.' + fileSuffix,
      )}`;
    }) ?? []
  );
});

视频2.1.1

注入加载视频播放配置业务

app.provide(LOAD_VIDEO_PLAY_OPTIONS_KEY, id => {
  // 先加载视频信息
  return axios
    .get('/api/video/get', {
      params: {
        id: id,
      },
    })
    .then(res => {
      // 组装成播放配置并返回
      const options: VideoPlayOptions = {
        url: res.data.url,
        core: res.data.streamType === 'hls' ? 'xgplayer-hls' : 'xgplayer-flv',
        definitions: res.data.urls.map(item => {
          return {
            definition: item.name,
            url: item.url,
          };
        }),
      };
      return options;
    });
});