@skyfox2000/webui 0.1.0

package/src/components/form/radio/radioStatus.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref, PropType } from 'vue';
+import Radio from './index.vue';
+import { OPTIONS } from '@skyfox2000/webbase';
+
+const props = defineProps({
+   /**
+    * 数据源OPTIONS的key
+    */
+   dataKey: {
+      type: String as PropType<string>,
+      default: 'EnableDisable',
+   },
+   /**
+    * 是否显示全部选项
+    */
+   all: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+   },
+   /**
+    * 自定义全部选项的值
+    * 如果all为true，则显示全部选项
+    * 未设置allValue，则默认[0, 1]
+    */
+   allValue: {
+      type: [String, Number, Array] as PropType<string | number | string[] | number[]>,
+      required: false,
+   },
+});
+const options = ref(JSON.parse(JSON.stringify(OPTIONS.getOptions(props.dataKey))));
+if (props.all === true) {
+   options.value.unshift({
+      label: '全部',
+      value: props.allValue || [0, 1],
+   });
+}
+</script>
+
+<template>
+   <Radio :data="options"></Radio>
+</template>

package/src/components/form/rangePicker/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RangePicker } from 'ant-design-vue';
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
+import { useInputFactory } from '@skyfox2000/webbase';
+import dayjs, { Dayjs } from 'dayjs';
+
+const props = withDefaults(
+   defineProps<{
+      startDate?: string | null;
+      endDate?: string | null;
+      valueFormat?: string;
+   }>(),
+   {
+      valueFormat: 'YYYY-MM-DD',
+   },
+);
+
+const emit = defineEmits<{
+   (e: 'update:startDate', value: string | null): void;
+   (e: 'update:endDate', value: string | null): void;
+}>();
+
+const inputFactory = useInputFactory();
+const { errInfo } = inputFactory;
+
+const dateFormat = computed(() => props.valueFormat);
+const rangeValue = computed((): [Dayjs, Dayjs] | [string, string] | undefined => {
+   const start = props.startDate;
+   const end = props.endDate;
+   if (!start || !end) return undefined;
+
+   try {
+      const startDayjs = dayjs(start);
+      const endDayjs = dayjs(end);
+      if (!startDayjs.isValid() || !endDayjs.isValid()) return undefined;
+      return [startDayjs, endDayjs];
+   } catch {
+      return undefined;
+   }
+});
+
+const handleChange = (dates: [Dayjs, Dayjs] | [string, string] | null, dateStrings: [string, string]) => {
+   if (!dates || !dateStrings || dateStrings.length !== 2) {
+      emit('update:startDate', null);
+      emit('update:endDate', null);
+      return;
+   }
+
+   emit('update:startDate', dateStrings[0] || null);
+   emit('update:endDate', dateStrings[1] || null);
+};
+</script>
+
+<template>
+   <RangePicker
+      :class="errInfo?.errClass === 'error' ? ['error', '!border-red-300', 'shadow-[0_0_3px_0px_#ff4d4f]'] : ''"
+      class="w-full"
+      :locale="locale"
+      :value-format="dateFormat"
+      :value="rangeValue"
+      @change="handleChange"
+   />
+</template>

package/src/components/form/select/index.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, PropType, useAttrs } from 'vue';
+import { Select, SelectOption } from 'ant-design-vue';
+import {
+   circleLoading,
+   useInputFactory,
+   OptionCommProps,
+   OptionItemProps,
+   onOptionChanged,
+   loadOption,
+   unloadOption,
+   getSelectedLabels,
+   SelectValue,
+   formValidate,
+   OPTIONS,
+   isEmpty,
+} from '@skyfox2000/webbase';
+import { IUrlInfo } from '@skyfox2000/fapi';
+
+type SelectValueType = string | number | string[] | number[] | null;
+const props = defineProps({
+   ...OptionCommProps,
+   value: {
+      type: [String, Number, Array, null] as PropType<SelectValueType>,
+      default: undefined,
+   },
+   /**
+    * 自动选择第一个选项
+    */
+   selectFirst: {
+      type: Boolean,
+      default: false,
+   },
+   /**
+    * 数据源OPTIONS的key
+    */
+   dataKey: {
+      type: String as PropType<string>,
+      required: false,
+   },
+   /**
+    * 是否显示全部选项
+    */
+   all: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+   },
+   /**
+    * 自定义全部选项的值
+    * 如果all为true，则显示全部选项
+    * 未设置allValue，则默认[0, 1]
+    */
+   allValue: {
+      type: [String, Number, Array] as PropType<string | number | string[] | number[]>,
+      required: false,
+   },
+});
+
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const url = ref<IUrlInfo>({
+   ...props.url,
+   url: props.url?.url || '',
+   fieldMap: props.fieldMap || props.url?.fieldMap,
+   params: props.params || props.url?.params,
+   loadingText: false,
+});
+
+const inputFactory = useInputFactory();
+const { editorCtrl, errInfo, labelText } = inputFactory;
+
+/// 避免类型错误
+const innerValue = ref<string | number | string[] | number[] | undefined>(undefined);
+const emit = defineEmits(['change', 'update:value', 'update:labels']);
+inputFactory.inputEmit = emit;
+/**
+ * 实际的选择项
+ */
+const selectOptions = ref<OptionItemProps[]>([]);
+watch(
+   () => selectOptions.value,
+   (newVal) => {
+      if (newVal.length > 0 && isEmpty(props.value) && props.selectFirst) {
+         innerValue.value = newVal[0].value;
+         onChanged(newVal[0].value);
+      } else {
+         // 当选项加载完成后，设置实际的 value 值
+         innerValue.value = props.value === null ? undefined : props.value;
+      }
+   },
+);
+
+const placeholder = ref(attrs.placeholder);
+watch(
+   () => url.value.loading,
+   (newVal) => {
+      if (newVal) placeholder.value = '';
+      else if (!placeholder.value) placeholder.value = '请选择' + labelText.value;
+   },
+   { immediate: true },
+);
+
+const defaultVal = ref(props.value);
+watch(
+   () => innerValue.value,
+   (newVal) => {
+      if (attrs.mode === 'multiple') {
+         if (isEmpty(newVal) && isEmpty(defaultVal.value)) {
+            emit('update:value', defaultVal.value);
+            return;
+         }
+      }
+      emit('update:value', newVal);
+   },
+);
+
+const onChanged = (value: any) => {
+   const selectedOptions = onOptionChanged(props, value as SelectValue, selectOptions, inputFactory);
+   const labels: string[] = getSelectedLabels(selectedOptions);
+
+   innerValue.value = value;
+   emit('update:labels', labels);
+   emit('change', value);
+
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+
+onMounted(() => {
+   if (url.value && !url.value.fieldMap) {
+      url.value.fieldMap = {
+         label: 'Name',
+         value: 'Id',
+         key: 'Id',
+      };
+   }
+   if (props.dataKey) {
+      const options = JSON.parse(JSON.stringify(OPTIONS.getOptions(props.dataKey)));
+      selectOptions.value = options;
+   } else loadOption(props.autoload, props, selectOptions, inputFactory, url.value, url.value?.params);
+});
+
+onUnmounted(() => {
+   unloadOption(props, inputFactory);
+});
+</script>
+
+<template>
+   <div>
+      <div
+         v-if="props.url && props.url.loading === true"
+         class="absolute z-10 mt-[5px] mr-[10px] text-[#999] flex items-center"
+      >
+         <circleLoading class="text-[#555] mx-[5px] !ml-[10px] !w-4 !h-4" />
+         <span>数据加载中...</span>
+      </div>
+      <Select
+         :class="[errInfo?.errClass, 'w-full']"
+         v-model:value="innerValue"
+         :allow-clear="true"
+         @change="onChanged"
+         :placeholder="placeholder"
+         :label-in-value="false"
+         v-bind="attrs"
+      >
+         <template v-for="item in selectOptions" :key="item.value">
+            <SelectOption :value="item.value" v-if="item.visible !== false">
+               {{ item.label }}
+            </SelectOption>
+         </template>
+      </Select>
+   </div>
+</template>
+
+<style scoped>
+.error :deep(.ant-select-selector) {
+   border-color: #ff4d4f80;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+</style>

package/src/components/form/switch/index.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { formValidate, useInputFactory, OptionItemProps, loadOption, unloadOption } from '@skyfox2000/webbase';
+import { Switch } from 'ant-design-vue';
+import message from 'vue-m-message';
+
+const props = defineProps({
+   /**
+    * 选择项数据
+    */
+   data: {
+      type: Array<Record<string, any>>,
+      required: true,
+   },
+});
+
+/**
+ * 实际的选择项
+ */
+const switchOptions = ref<OptionItemProps[]>([]);
+
+const emit = defineEmits<{
+   (e: 'change', checked: boolean | string | number): void;
+}>();
+
+const { editorCtrl, errInfo } = useInputFactory();
+const onChange = (checked: boolean | string | number) => {
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+   emit('change', checked);
+};
+onMounted(() => {
+   if (!props.data || props.data.length != 2) {
+      console.error('Switch组件: ', props.data);
+      message.error('Switch组件必须有且只有两个选项');
+      return;
+   }
+   loadOption(false, props, switchOptions);
+});
+
+onUnmounted(() => {
+   unloadOption(props);
+});
+</script>
+<template>
+   <Switch
+      v-if="switchOptions.length === 2"
+      :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '', 'bg-blue-300', 'w-[58px]']"
+      :checkedChildren="switchOptions[0].label"
+      :checkedValue="switchOptions[0].value"
+      :unCheckedChildren="switchOptions[1].label"
+      :unCheckedValue="switchOptions[1].value"
+      @change="onChange"
+      v-bind="$attrs"
+   />
+</template>

package/src/components/form/textarea/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { formValidate, useInputFactory } from '@skyfox2000/webbase';
+import { Textarea } from 'ant-design-vue';
+
+const { editorCtrl, labelText, errInfo } = useInputFactory();
+const onBlur = () => {
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+</script>
+<template>
+   <Textarea
+      :class="errInfo?.errClass === 'error' ? ['error', '!border-red-300', 'shadow-[0_0_3px_0px_#ff4d4f]'] : ''"
+      :allow-clear="true"
+      :placeholder="'请输入' + labelText"
+      @blur="onBlur"
+      @keyup.enter.native.stop
+      @keydown.enter.native.stop
+      v-bind="$attrs"
+   />
+</template>

package/src/components/form/transfer/index.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { AnyControl, doQuery, formValidate, OptionItemProps, useInputFactory } from '@skyfox2000/webbase';
+import { Transfer } from 'ant-design-vue';
+import { IUrlInfo, ReqParams } from '@skyfox2000/fapi';
+const props = defineProps<{
+   /**
+    * 是否自动加载数据
+    */
+   autoload?: boolean;
+   /**
+    * 接口地址和参数
+    */
+   url?: IUrlInfo;
+   /**
+    * 查询参数
+    */
+   params?: ReqParams;
+   /**
+    * 值
+    */
+   value?: string[];
+}>();
+
+const url = ref({ ...props.url });
+
+const { editorCtrl, labelText, errInfo } = useInputFactory();
+const emit = defineEmits(['change', 'update:value']);
+
+const dataSource = ref<OptionItemProps[]>([]);
+const targetKeys = ref<string[]>([]);
+if (props.value) {
+   /// TODO 数据表字段是数字的话，可能存在问题
+   props.value.every((value) => {
+      targetKeys.value.push(value.toString());
+   });
+}
+
+watch(
+   () => props.value,
+   (newVal) => {
+      if (newVal) {
+         targetKeys.value = newVal;
+      }
+   },
+);
+
+const onChange = (nextTargetKeys: string[]) => {
+   emit('update:value', nextTargetKeys);
+   emit('change', nextTargetKeys);
+   targetKeys.value = nextTargetKeys;
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+
+onMounted(async () => {
+   if (url.value) {
+      const pageCtrl = editorCtrl?.page;
+      if (!url.value.api) url.value.api = pageCtrl?.api;
+      if (url.value.authorize === undefined) url.value.authorize = pageCtrl?.authorize;
+      if (props.autoload) {
+         const result = await doQuery<OptionItemProps[]>(editorCtrl as AnyControl, {
+            urlKey: 'list',
+            url: { ...url.value, url: url.value.url! },
+            loadingText: false,
+            params: props.params,
+         });
+         dataSource.value = (result?.data ?? []) as OptionItemProps[];
+      }
+   }
+});
+</script>
+<template>
+   <Transfer
+      :class="errInfo?.errClass === 'error' ? ['error', '!border-red-300', 'shadow-[0_0_3px_0px_#ff4d4f]'] : ''"
+      :placeholder="'请输入' + labelText"
+      :targetKeys="targetKeys"
+      @change="onChange"
+      v-bind="$attrs"
+   >
+      <template #children="{ direction, disabled, filteredItems, onItemSelectAll, onItemSelect, selectedKeys }">
+         <slot
+            name="children"
+            :direction="direction"
+            :disabled="disabled"
+            :filteredItems="filteredItems"
+            :onItemSelectAll="onItemSelectAll"
+            :onItemSelect="onItemSelect"
+            :selectedKeys="selectedKeys"
+         />
+      </template>
+   </Transfer>
+</template>

package/src/components/form/transfer/transferTable.vue

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import Transfer from './index.vue';
+import { Table } from 'ant-design-vue';
+import { AnyData } from '@skyfox2000/fapi';
+import { doQuery, GridControl, PrimaryKey } from '@skyfox2000/webbase';
+import { onMounted, PropType, ref, watch } from 'vue';
+const props = defineProps({
+   /**
+    * 是否自动加载
+    */
+   autoload: {
+      type: Boolean,
+      default: true,
+   },
+   /**
+    * 表格控制器
+    */
+   gridCtrl: {
+      type: Object as PropType<GridControl<AnyData>>,
+      required: true,
+   },
+   /**
+    * 选择结果
+    */
+   value: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+   },
+});
+
+const emit = defineEmits(['update:value']);
+const autoload = ref(props.autoload);
+const targetKeys = ref<string[]>(props.value);
+const primaryKey = ref(props.gridCtrl.primaryKey);
+
+watch(
+   () => targetKeys.value,
+   (newVal) => {
+      emit('update:value', newVal);
+   },
+);
+
+watch(
+   () => props.value,
+   (newVal) => {
+      if (newVal) {
+         targetKeys.value = newVal;
+      }
+   },
+);
+
+/// 默认设置
+props.gridCtrl.autoload = false;
+// 禁用远程分页
+props.gridCtrl.remotePage = false;
+props.gridCtrl.selectable = ref(true);
+props.gridCtrl.buttons = ref([]);
+props.gridCtrl.tools = [];
+
+const getRowSelection = ({ disabled, selectedKeys, onItemSelectAll, onItemSelect }: Record<string, any>) => {
+   return {
+      getCheckboxProps: (item: Record<string, string | boolean>) => ({
+         // 控制是否禁止
+         disabled: disabled || item.disabled,
+      }),
+      onSelectAll(selected: boolean, selectedRows: Record<string, PrimaryKey>[]) {
+         // 全选，只选中未禁用的行
+         const treeSelectedKeys = selectedRows
+            .filter((item) => !item.disabled)
+            .map(({ [primaryKey.value]: key }) => key);
+         onItemSelectAll(treeSelectedKeys, selected);
+      },
+      onSelect({ [primaryKey.value]: key }: Record<string, PrimaryKey>, selected: boolean) {
+         // 单行选中行
+         onItemSelect(key, selected);
+      },
+      selectedRowKeys: selectedKeys,
+   };
+};
+
+const transferData = ref<AnyData[]>([]);
+onMounted(async () => {
+   if (autoload.value) {
+      const result = await doQuery<AnyData[]>(props.gridCtrl, {
+         urlKey: 'list',
+         url: { ...props.gridCtrl.gridUrl, url: props.gridCtrl.gridUrl!.url },
+         params: props.gridCtrl.gridQuery,
+         loadingText: false,
+      });
+      transferData.value = result?.data ?? [];
+   }
+});
+</script>
+<template>
+   <Transfer :data-source="transferData" :row-key="(record: AnyData) => record[primaryKey]" v-model:value="targetKeys"
+      :list-style="{
+         width: '300px',
+         height: '500px',
+}" :show-select-all="false" :show-search="true" :filter-option="(inputValue: string, item: AnyData) => {
+         for (const column of props.gridCtrl.columns.value) {
+            if (item[column.dataIndex].toString().indexOf(inputValue) !== -1) {
+               return true;
+            }
+         }
+         return false;
+      }
+         " v-bind="$attrs">
+      <template #children="{ filteredItems, onItemSelectAll, onItemSelect, selectedKeys }">
+         <Table :columns="gridCtrl.columns.value" :row-key="primaryKey" :row-selection="getRowSelection({
+            disabled: false,
+            selectedKeys,
+            onItemSelectAll,
+            onItemSelect,
+         })
+            " :bordered="false" size="small" :data-source="filteredItems" :scroll="{ x: 300 }" :custom-row="(record) => ({
+               onClick: () => {
+                  const key = record[primaryKey];
+                  onItemSelect(key, !selectedKeys.includes(key));
+               },
+            })
+               " />
+      </template>
+   </Transfer>
+</template>

package/src/components/form/treeSelect/index.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, PropType } from 'vue';
+import { TreeSelect } from 'ant-design-vue';
+import { queryTree } from '@skyfox2000/webbase';
+import type { SelectValue, TreeControl, TreeNode } from '@skyfox2000/webbase';
+import { useInputFactory } from '@skyfox2000/webbase';
+import { fieldMapping } from '@skyfox2000/fapi';
+
+const props = defineProps({
+   multiple: {
+      type: Boolean,
+      default: false,
+   },
+   treeCtrl: {
+      type: Object as PropType<TreeControl>,
+      required: true,
+   },
+   value: {
+      type: [String, Number, Array] as PropType<SelectValue>,
+      required: true,
+   },
+});
+
+const treeCtrl = props.treeCtrl;
+
+const inputFactory = useInputFactory();
+const { errInfo, labelText } = inputFactory;
+
+// 定义事件
+const emit = defineEmits(['change', 'update:value']);
+inputFactory.inputEmit = emit;
+
+// 树选择数据
+const selectTreeData = ref<TreeNode[]>([]);
+// 当前选中值
+const currentValue = ref<SelectValue>();
+
+// 监听值变化
+watch(
+   () => props.value,
+   (newVal) => {
+      currentValue.value = newVal ?? null;
+   },
+   { immediate: true },
+);
+
+// 监听树数据变化
+watch(
+   () => treeCtrl.data.value,
+   (newVal) => {
+      if (newVal) {
+         selectTreeData.value = treeCtrl.fieldMap ? fieldMapping(treeCtrl.fieldMap, newVal) : newVal;
+      }
+   },
+   { immediate: true },
+);
+
+// 值变化事件
+const handleChange = (value: SelectValue) => {
+   if (props.multiple) {
+      currentValue.value = value ?? [];
+   } else {
+      currentValue.value = value ?? '';
+   }
+   emit('change', currentValue.value);
+   emit('update:value', currentValue.value);
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+   if (!treeCtrl.fieldMap) {
+      treeCtrl.fieldMap = {
+         label: 'Name',
+         key: 'Id',
+         value: 'Id',
+      };
+   }
+   if (treeCtrl.data.value) {
+      selectTreeData.value = treeCtrl.fieldMap
+         ? fieldMapping(treeCtrl.fieldMap, treeCtrl.data.value)
+         : treeCtrl.data.value;
+   } else if (props.treeCtrl.autoload) {
+      queryTree(props.treeCtrl);
+   }
+});
+</script>
+
+<template>
+   <TreeSelect
+      :class="[errInfo?.errClass]"
+      tree-line
+      :multiple="multiple"
+      :tree-default-expanded-keys="['-']"
+      v-model:value="currentValue"
+      :tree-data="selectTreeData"
+      :placeholder="'请选择' + labelText"
+      :allow-clear="true"
+      class="w-full"
+      @change="handleChange"
+      v-bind="$attrs"
+   />
+</template>
+<style scoped>
+.error :deep(.ant-select-selector) {
+   border-color: #ef444480;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+</style>