fix: 一些基本功能

apps/web-antd/src/components/view/component-map.ts

@@ -0,0 +1,22 @@
+import type { Component } from 'vue';
+
+import { getFileNameWithoutExtension, toPascalCase } from '#/util/tool';
+
+const componentMap = new Map<string, Component>();
+// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
+const modules = import.meta.glob(
+  ['./components/**/*.vue', '../../views/**/components/view/*.vue'],
+  { eager: true },
+);
+// 加入到路由集合中
+Object.keys(modules).forEach((key) => {
+  if (!key.includes('-ignore')) {
+    const mod = (modules as any)[key].default || {};
+    // ./components/ApiDict.vue
+    // 获取ApiDict
+    const compName = getFileNameWithoutExtension(key);
+    componentMap.set(toPascalCase(compName), mod);
+  }
+});
+
+export { componentMap };

apps/web-antd/src/components/view/components/api-cascader.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, onMounted, type PropType, ref } from 'vue';
+
+import { requestClient } from '#/api/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  value: {
+    // 值
+    type: [String, Number, Array],
+    default: undefined,
+  },
+  api: {
+    // 接口请求对象
+    type: [Function, String] as PropType<
+      ((...arg: any) => Promise<any>) | String
+    >,
+    default() {
+      return () => {
+        return new Promise((resolve) => {
+          resolve([]);
+        });
+      };
+    },
+  },
+  params: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  cacheKey: {
+    type: String,
+    default: '',
+  },
+  requestMethod: {
+    type: String,
+    default: 'post',
+  },
+  valueField: {
+    type: String,
+    default: 'id',
+  },
+  labelField: {
+    type: String,
+    default: 'name',
+  },
+  // 分割符
+  split: {
+    type: String,
+    default: '/',
+  },
+});
+const currentData = ref([]);
+const cValue = computed(() => {
+  return currentData.value
+    .map((item) => item[props.labelField])
+    .join(props.split);
+});
+onMounted(() => {
+  const api: (...arg: any) => Promise<any> =
+    typeof props.api === 'string'
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : (props.api as (...arg: any) => Promise<any>);
+  const searchType = 'IN';
+  const params =
+    props.requestMethod === 'get'
+      ? {
+          params: {
+            ...props.params,
+            [`m_${searchType}_${props.valueField}`]: props.value,
+          },
+        }
+      : {
+          ...props.params,
+          [`m_${searchType}_${props.valueField}`]: props.value,
+        };
+  api(params).then((res) => {
+    if (res.length > 0) {
+      currentData.value = res;
+    }
+  });
+});
+</script>
+<template>
+  <div>{{ cValue }}</div>
+</template>
+<style lang="less" scoped></style>

apps/web-antd/src/components/view/components/api-checkbox-group.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ApiSelect from './api-select.vue';
+</script>
+<template>
+  <ApiSelect />
+</template>

apps/web-antd/src/components/view/components/api-dict.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+
+import { useDictStore } from '#/store/dict';
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: undefined,
+  },
+  data: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  value: {
+    // 值
+    type: [String, Number, Array],
+    default: undefined,
+  },
+  split: {
+    // 分割符
+    type: String,
+    default: ',',
+  },
+  join: {
+    // 连接符
+    type: String,
+    default: ',',
+  },
+});
+const dictStore = useDictStore();
+const cValue = computed(() => {
+  if (!props.value && props.value !== 0) {
+    return '';
+  }
+  const arr: Array<any> = [];
+  if (Array.isArray(props.value)) {
+    arr.push(...props.value);
+  } else {
+    arr.push(...props.value.toString().split(props.split));
+  }
+  const dictData = dictStore.getDictData(props.code as string);
+  const res: Array<any> = [];
+  arr.forEach((item) => {
+    for (let i = 0; i < dictData.length; i++) {
+      if (dictData[i].value?.toString() === item?.toString()) {
+        res.push(dictData[i].label);
+        break;
+      }
+      if (i === dictData.length - 1) {
+        res.push(item);
+      }
+    }
+  });
+
+  return res.join(props.join);
+});
+onMounted(() => {
+  dictStore.requestData(props.code as string);
+});
+</script>
+<template>
+  <div>{{ cValue }}</div>
+</template>
+<style lang="less" scoped></style>

apps/web-antd/src/components/view/components/api-radio-group.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ApiSelect from './api-select.vue';
+</script>
+<template>
+  <ApiSelect />
+</template>

apps/web-antd/src/components/view/components/api-select.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, onMounted, type PropType, watch } from 'vue';
+
+import { requestClient } from '#/api/request';
+import { useDictStore } from '#/store/dict';
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: undefined,
+  },
+  data: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  value: {
+    // 值
+    type: [Boolean, String, Number, Array],
+    default: undefined,
+  },
+  split: {
+    // 分割符
+    type: String,
+    default: ',',
+  },
+  join: {
+    // 连接符
+    type: String,
+    default: ',',
+  },
+  api: {
+    // 接口请求对象
+    type: [Function, String] as PropType<
+      ((...arg: any) => Promise<any>) | String
+    >,
+    default() {
+      return () => {
+        return new Promise((resolve) => {
+          resolve([]);
+        });
+      };
+    },
+  },
+  params: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  cacheKey: {
+    type: String,
+    default: '',
+  },
+  requestMethod: {
+    type: String,
+    default: 'post',
+  },
+});
+const dictStore = useDictStore();
+/**
+ * 获取包含的id
+ */
+const getIncludeIds = () => {
+  if (!props.value && props.value !== 0) {
+    return [];
+  }
+  const arr: Array<any> = [];
+  if (Array.isArray(props.value)) {
+    arr.push(...props.value);
+  } else {
+    arr.push(...props.value.toString().split(props.split));
+  }
+  return arr;
+};
+/**
+ * 获取缓存key
+ */
+const getCacheKey = () => {
+  let cacheKey = props.cacheKey;
+  if (typeof props.api === 'string' && !cacheKey) {
+    cacheKey = props.api as string;
+  }
+  return cacheKey;
+};
+const cValue = computed(() => {
+  if (!props.value && props.value !== 0) {
+    return '';
+  }
+  const arr: Array<any> = getIncludeIds();
+  const cacheKey = getCacheKey();
+  const dictData = dictStore.getSelectData(cacheKey, {
+    ...props.params,
+    includeType: 2,
+    includeIds: getIncludeIds(),
+  });
+  const res: Array<any> = [];
+  arr.forEach((item) => {
+    for (let i = 0; i < dictData.length; i++) {
+      if (dictData[i].value?.toString() === item?.toString()) {
+        res.push(dictData[i].label);
+        break;
+      }
+      if (i === dictData.length - 1) {
+        res.push(item);
+      }
+    }
+  });
+
+  return res.join(props.join);
+});
+const requestData = () => {
+  const api: (...arg: any) => Promise<any> =
+    typeof props.api === 'string'
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : (props.api as (...arg: any) => Promise<any>);
+  const cacheKey = getCacheKey();
+  const params =
+    props.requestMethod === 'get'
+      ? {
+          params: {
+            ...props.params,
+            includeType: 2,
+            includeIds: getIncludeIds(),
+          },
+        }
+      : {
+          ...props.params,
+          includeType: 2,
+          includeIds: getIncludeIds(),
+        };
+  dictStore.select(api, params, cacheKey);
+};
+onMounted(() => {
+  requestData();
+});
+watch(
+  () => props.value,
+  () => {
+    requestData();
+  },
+);
+</script>
+<template>
+  <div>{{ cValue }}</div>
+</template>
+<style lang="less" scoped></style>

apps/web-antd/src/components/view/components/api-tree-select.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, onMounted, type PropType, ref } from 'vue';
+
+import { requestClient } from '#/api/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  value: {
+    // 值
+    type: [String, Number, Array],
+    default: undefined,
+  },
+  api: {
+    // 接口请求对象
+    type: [Function, String] as PropType<
+      ((...arg: any) => Promise<any>) | String
+    >,
+    default() {
+      return () => {
+        return new Promise((resolve) => {
+          resolve([]);
+        });
+      };
+    },
+  },
+  params: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  cacheKey: {
+    type: String,
+    default: '',
+  },
+  requestMethod: {
+    type: String,
+    default: 'post',
+  },
+  valueField: {
+    type: String,
+    default: 'id',
+  },
+  labelField: {
+    type: String,
+    default: 'name',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  // 分割符
+  split: {
+    type: String,
+    default: '/',
+  },
+});
+const currentData = ref([]);
+const cValue = computed(() => {
+  return currentData.value
+    .map((item) => item[props.labelField])
+    .join(props.split);
+});
+onMounted(() => {
+  const api: (...arg: any) => Promise<any> =
+    typeof props.api === 'string'
+      ? (params: any) => {
+          return (requestClient as any)[props.requestMethod](
+            props.api as any,
+            params,
+          );
+        }
+      : (props.api as (...arg: any) => Promise<any>);
+  const searchType = props.multiple ? 'IN' : 'EQ';
+  const params =
+    props.requestMethod === 'get'
+      ? {
+          params: {
+            ...props.params,
+            [`m_${searchType}_${props.valueField}`]: props.value,
+          },
+        }
+      : {
+          ...props.params,
+          [`m_${searchType}_${props.valueField}`]: props.value,
+        };
+  api(params).then((res) => {
+    if (res.length > 0) {
+      currentData.value = res;
+    }
+  });
+});
+</script>
+<template>
+  <div>{{ cValue }}</div>
+</template>
+<style lang="less" scoped></style>

apps/web-antd/src/components/view/components/avatar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Image } from 'ant-design-vue';
+
+defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <Image v-if="value" :src="value" :width="102" />
+</template>
+<style lang="less" scoped></style>

apps/web-antd/src/components/view/components/icon-picker.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Icon } from '#/components/icon';
+
+defineOptions({
+  inheritAttrs: false,
+});
+defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: [String, Number],
+    default: '16px',
+  },
+});
+</script>
+<template>
+  <Icon v-if="value" :icon="value" :size="size" />
+  <span v-else></span>
+</template>
+<style lang="less" scoped></style>

apps/web-antd/src/components/view/components/radio-group.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Select from './select.vue';
+</script>
+<template>
+  <Select />
+</template>
+<style lang="less" scoped></style>

apps/web-antd/src/components/view/components/select.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: [String, Boolean, Number, Array],
+    default: undefined,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  join: {
+    // 连接符
+    type: String,
+    default: ',',
+  },
+});
+const cValue = computed(() => {
+  return Array.isArray(props.value)
+    ? props.options
+        .filter((item: any) => (props.value as Array<any>).includes(item.value))
+        .map((item: any) => item.label)
+        .join(props.join)
+    : (
+        props.options.find(
+          (item: any) => item.value?.toString() === props.value?.toString(),
+        ) as any
+      )?.label;
+});
+</script>
+<template>
+  <div>{{ cValue }}</div>
+</template>
+<style lang="less" scoped></style>

apps/web-antd/src/components/view/components/switch.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+
+import { Switch } from 'ant-design-vue';
+
+const props = defineProps({
+  // 值
+  value: {
+    type: [String, Number, Boolean] as PropType<boolean | number | string>,
+    default: undefined,
+  },
+});
+const emit = defineEmits(['update:value']);
+const mValue = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit('update:value', val);
+  },
+});
+</script>
+<template>
+  <Switch v-model:checked="mValue" :disabled="true" />
+</template>

apps/web-antd/src/components/view/components/upload.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import { Upload } from '#/components/form';
+
+defineOptions({
+  inheritAttrs: false,
+});
+defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  listType: {
+    type: String as PropType<'picture' | 'picture-card' | 'text'>,
+    default: 'text',
+  },
+});
+</script>
+<template>
+  <Upload :disabled="true" :list-type="listType" :value="value">
+    <template #default></template>
+  </Upload>
+</template>
+<style lang="less" scoped></style>