第一次提交

src/components/AccessoryCategory/index.vue

@@ -0,0 +1,81 @@
+<!-- 省市区级联选择器 -->
+<template>
+  <a-cascader
+    :value="value"
+    :options="accessoryData"
+    :show-search="showSearch"
+    :placeholder="placeholder"
+    dropdown-class-name="ele-pop-wrap-higher"
+    @change="onChange"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import type { ValueType } from 'ant-design-vue/es/vc-cascader/Cascader';
+  import { listCategory } from '@/api/goods/category';
+  import { toTreeData } from 'ele-admin-pro/es';
+  import { Category } from '@/api/goods/category/model';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string[];
+      placeholder?: string;
+      options?: Category[];
+      valueField?: 'label';
+      showSearch?: boolean;
+    }>(),
+    {
+      showSearch: true
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: string[]): void;
+    (e: 'load-data-done', value: Category[]): void;
+  }>();
+
+  // 级联选择器数据
+  const accessoryData = ref<Category[]>([]);
+
+  /* 更新 value */
+  const updateValue = (value: ValueType) => {
+    emit('update:value', value as string[]);
+  };
+
+  const onChange = (e) => {
+    console.log(e);
+  };
+
+  watch(
+    () => props.options,
+    (options) => {
+      listCategory().then((data) => {
+        accessoryData.value = toTreeData({
+          data: data.map((d) => {
+            return { ...d, value: d.title, label: d.title };
+          }),
+          idField: 'categoryId',
+          parentIdField: 'parentId'
+        });
+      });
+      // accessoryData.value = filterData(options ?? []);
+      if (!options) {
+        listCategory().then((data) => {
+          accessoryData.value = toTreeData({
+            data: data.map((d) => {
+              return { ...d, value: d.title, label: d.title };
+            }),
+            idField: 'categoryId',
+            parentIdField: 'parentId'
+          });
+          emit('load-data-done', accessoryData.value);
+        });
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>

src/components/AccessoryCategory/types/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 行业类型
+ */
+export interface IndustryData {
+  label: string;
+  value: string;
+  children?: {
+    value: string;
+    label: string;
+    children?: {
+      value: string;
+      label: string;
+    }[];
+  }[];
+}

src/components/ByteMdEditor/index.vue

@@ -0,0 +1,109 @@
+<!-- markdown 编辑器 -->
+<template>
+  <div ref="rootRef" class="ele-bytemd-wrap"></div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, watch } from 'vue';
+  import { Editor } from 'bytemd';
+  import type { BytemdPlugin, BytemdLocale, ViewerProps } from 'bytemd';
+  import 'bytemd/dist/index.min.css';
+
+  const props = withDefaults(
+    defineProps<{
+      value: string;
+      plugins?: BytemdPlugin[];
+      sanitize?: (schema: any) => any;
+      mode?: 'split' | 'tab' | 'auto';
+      previewDebounce?: number;
+      placeholder?: string;
+      editorConfig?: Record<string, any>;
+      locale?: Partial<BytemdLocale>;
+      uploadImages?: (
+        files: File[]
+      ) => Promise<Pick<any, 'url' | 'alt' | 'title'>[]>;
+      overridePreview?: (el: HTMLElement, props: ViewerProps) => void;
+      maxLength?: number;
+      height?: string;
+      fullZIndex?: number;
+    }>(),
+    {
+      fullZIndex: 999
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: string): void;
+    (e: 'change', value?: string): void;
+  }>();
+
+  const rootRef = ref<HTMLElement | null>(null);
+  const editor = ref<InstanceType<typeof Editor> | null>(null);
+
+  onMounted(() => {
+    editor.value = new Editor({
+      target: rootRef.value as HTMLElement,
+      props
+    });
+    editor.value.$on('change', (e: any) => {
+      emit('update:value', e.detail.value);
+      emit('change', e.detail.value);
+    });
+  });
+
+  watch(
+    [
+      () => props.value,
+      () => props.plugins,
+      () => props.sanitize,
+      () => props.mode,
+      () => props.previewDebounce,
+      () => props.placeholder,
+      () => props.editorConfig,
+      () => props.locale,
+      () => props.uploadImages,
+      () => props.maxLength
+    ],
+    () => {
+      const option = { ...props };
+      for (let key in option) {
+        if (typeof option[key] === 'undefined') {
+          delete option[key];
+        }
+      }
+      editor.value?.$set(option);
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  // 修改编辑器高度
+  .ele-bytemd-wrap :deep(.bytemd) {
+    height: v-bind(height);
+
+    // 修改全屏的 zIndex
+    &.bytemd-fullscreen {
+      z-index: v-bind(fullZIndex);
+    }
+
+    // 去掉默认的最大宽度限制
+    .CodeMirror .CodeMirror-lines {
+      max-width: 100%;
+    }
+
+    pre.CodeMirror-line,
+    pre.CodeMirror-line-like {
+      padding: 0 24px;
+    }
+
+    .markdown-body {
+      max-width: 100%;
+      padding: 16px 24px;
+    }
+
+    // 去掉 github 图标
+    .bytemd-toolbar-right > .bytemd-toolbar-icon:last-child {
+      display: none;
+    }
+  }
+</style>

src/components/ByteMdViewer/index.vue

@@ -0,0 +1,93 @@
+<!-- markdown 解析 -->
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div
+    ref="rootRef"
+    v-html="content"
+    class="markdown-body"
+    @click="handleClick"
+  >
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import type { BytemdPlugin } from 'bytemd';
+  import { getProcessor } from 'bytemd';
+
+  const props = defineProps<{
+    value: string;
+    plugins?: BytemdPlugin[];
+    sanitize?: (schema: any) => any;
+  }>();
+
+  const rootRef = ref<HTMLElement | null>(null);
+  const content = ref<any | null>(null);
+  const cbs = ref<(void | (() => void))[]>([]);
+
+  const on = () => {
+    if (props.plugins && rootRef.value && content.value) {
+      cbs.value = props.plugins.map(({ viewerEffect }) => {
+        return (
+          viewerEffect &&
+          viewerEffect({
+            markdownBody: rootRef.value as HTMLElement,
+            file: content.value
+          })
+        );
+      });
+    }
+  };
+
+  const off = () => {
+    if (cbs.value) {
+      cbs.value.forEach((cb) => cb && cb());
+    }
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    const $ = e.target as HTMLElement;
+    if ($.tagName !== 'A') {
+      return;
+    }
+
+    const href = $.getAttribute('href');
+    if (!href || !href.startsWith('#')) {
+      return;
+    }
+
+    const dest = rootRef.value?.querySelector('#user-content-' + href.slice(1));
+    if (dest) {
+      dest.scrollIntoView();
+    }
+  };
+
+  watch(
+    [() => props.value, () => props.plugins, () => props.sanitize],
+    () => {
+      try {
+        content.value = getProcessor({
+          plugins: props.plugins,
+          sanitize: props.sanitize
+        }).processSync(props.value);
+      } catch (e) {
+        console.error(e);
+      }
+      off();
+      nextTick(() => {
+        on();
+      });
+    },
+    {
+      immediate: true
+    }
+  );
+
+  onMounted(() => {
+    on();
+  });
+
+  onBeforeUnmount(() => {
+    off();
+  });
+</script>

src/components/CustomerSelect/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <ele-table-select
+    ref="selectRef"
+    :allow-clear="true"
+    :placeholder="placeholder"
+    v-model:value="selectedValue"
+    value-key="customerId"
+    label-key="customerName"
+    :table-config="tableConfig"
+    :overlay-style="{ width: '520px', maxWidth: '80%' }"
+    :init-value="initValue"
+    @select="onSelect"
+    @clear="onClear"
+  >
+    <!-- 角色列 -->
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'progress'">
+        <div v-for="(d, i) in progressDict" :key="i">
+          <span v-if="d.value === record.progress">{{ d.label }}</span>
+        </div>
+      </template>
+    </template>
+    <!-- 表头工具栏 -->
+    <template #toolbar>
+      <Search @search="search" />
+    </template>
+  </ele-table-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import Search from './search.vue';
+  import type { EleTableSelect } from 'ele-admin-pro/es';
+  import type { ProTableProps } from 'ele-admin-pro/es/ele-pro-table/types';
+  import type { WhereType } from './types';
+  import { pageCustomer, getCustomer } from '@/api/oa/customer';
+  import { getDictionaryOptions } from '@/utils/common';
+  import type { Customer } from '@/api/oa/customer/model';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number | 0;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择客户'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'select', where?: Customer): void;
+    (e: 'clear'): void;
+  }>();
+
+  const selectedValue = ref<number>();
+  // 获取字典数据
+  const progressDict = getDictionaryOptions('customerFollowStatus');
+  // 回显值
+  const initValue = ref<Customer | null>(null);
+  // 选择框实例
+  const selectRef = ref<InstanceType<typeof EleTableSelect> | null>(null);
+
+  // 表格配置
+  const tableConfig = reactive<ProTableProps>({
+    datasource: ({ page, limit, where, orders }) => {
+      return pageCustomer({ ...where, ...orders, page, limit });
+    },
+    columns: [
+      {
+        title: '客户名称',
+        dataIndex: 'customerName',
+        showSorterTooltip: false
+      }
+      // {
+      //   title: '状态',
+      //   dataIndex: 'progress',
+      //   key: 'progress'
+      // }
+    ],
+    toolkit: ['reload', 'columns'],
+    size: 'small',
+    pageSize: 6,
+    toolStyle: {
+      padding: '0 8px'
+    }
+  });
+
+  // 搜索
+  const search = (where: WhereType) => {
+    selectRef.value?.reload({
+      where,
+      page: 1
+    });
+  };
+
+  const onClear = () => {
+    emit('clear');
+  };
+
+  const onSelect = (item) => {
+    emit('select', item);
+  };
+
+  /* 回显数据 */
+  const setInitValue = () => {
+    const customerId = Number(props.value);
+    if (!customerId) {
+      return;
+    }
+    getCustomer(customerId).then((res) => {
+      if (res) {
+        initValue.value = res;
+      }
+    });
+  };
+
+  setInitValue();
+
+  watch(
+    () => props.value,
+    (value) => {
+      if (value) {
+        setInitValue();
+      }
+    }
+  );
+</script>

src/components/CustomerSelect/search.vue

@@ -0,0 +1,36 @@
+<template>
+  <div style="max-width: 240px">
+    <a-input
+      allow-clear
+      v-model:value="where.customerName"
+      placeholder="输入关键字搜索"
+      prefix-icon="el-icon-search"
+      @change="search"
+    >
+      <template #prefix>
+        <SearchOutlined class="ele-text-placeholder" />
+      </template>
+    </a-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import type { WhereType } from './types';
+
+  const emit = defineEmits<{
+    (e: 'search', where: WhereType): void;
+  }>();
+
+  // 搜索表单
+  const where = reactive<WhereType>({
+    keywords: '',
+    customerName: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+</script>

src/components/CustomerSelect/types/index.ts

@@ -0,0 +1,8 @@
+/**
+ * 搜索表单类型
+ */
+export interface WhereType {
+  keywords?: string;
+  customerName?: string;
+  customerId?: number;
+}

src/components/DictRadio/index.vue

@@ -0,0 +1,45 @@
+<!-- 选择下拉框 -->
+<template>
+  <a-radio-group
+    :value="value"
+    :options="data"
+    :option-type="type"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      type?: string;
+      placeholder?: string;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择服务器厂商'
+    }
+  );
+
+  // 字典数据
+  const data = getDictionaryOptions(props.dictCode);
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    console.log(value);
+    emit('update:value', value);
+  };
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/components/DictSelect/index.vue

@@ -0,0 +1,46 @@
+<!-- 选择下拉框 -->
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择服务器厂商'
+    }
+  );
+
+  // 字典数据
+  const data = getDictionaryOptions(props.dictCode);
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    console.log(value);
+    emit('update:value', value);
+  };
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/components/DictSelectMultiple/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    mode="multiple"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { listDictionaryData } from '@/api/system/dictionary-data';
+  import type { SelectProps } from 'ant-design-vue';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择服务器厂商'
+    }
+  );
+
+  // 字典数据
+  const data = ref<SelectProps['options']>([]);
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+  /* 获取字典数据 */
+  listDictionaryData({
+    dictCode: props.dictCode
+  })
+    .then((list) => {
+      data.value = list.map((d) => {
+        return {
+          value: d.dictDataCode,
+          label: d.dictDataName
+        };
+      });
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/components/EquipmentSelect/index.vue

@@ -0,0 +1,57 @@
+<!-- 选择下拉框 -->
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { SelectProps } from 'ant-design-vue';
+  import { pageEquipment } from '@/api/apps/equipment';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择设备型号'
+    }
+  );
+
+  // 字典数据
+  const data = ref<SelectProps['options']>([]);
+  pageEquipment({}).then((res) => {
+    res?.list.map((d) => {
+      data.value?.push({
+        comments: d.comments,
+        label: d.equipmentCode,
+        text: d.equipmentCode,
+        value: d.equipmentCode
+      });
+    });
+  });
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    console.log(value);
+    emit('update:value', value);
+  };
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/components/IndustrySelect/index.vue

@@ -0,0 +1,127 @@
+<!-- 省市区级联选择器 -->
+<template>
+  <a-cascader
+    :value="value"
+    :options="regionsData"
+    :show-search="showSearch"
+    :placeholder="placeholder"
+    dropdown-class-name="ele-pop-wrap-higher"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import type { ValueType } from 'ant-design-vue/es/vc-cascader/Cascader';
+  import type { IndustryData } from './types';
+  import { getIndustryData } from './load-data';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string[];
+      placeholder?: string;
+      options?: IndustryData[];
+      valueField?: 'label';
+      type?: 'provinceCity' | 'province';
+      showSearch?: boolean;
+    }>(),
+    {
+      showSearch: true
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: string[]): void;
+    (e: 'load-data-done', value: IndustryData[]): void;
+  }>();
+
+  // 级联选择器数据
+  const regionsData = ref<IndustryData[]>([]);
+
+  /* 更新 value */
+  const updateValue = (value: ValueType) => {
+    emit('update:value', value as string[]);
+  };
+
+  /* 级联选择器数据 value 处理 */
+  const formatData = (data: IndustryData[]) => {
+    if (props.valueField === 'label') {
+      return data.map((d) => {
+        const item: IndustryData = {
+          label: d.label,
+          value: d.label
+        };
+        if (d.children) {
+          item.children = d.children.map((c) => {
+            const cItem: IndustryData = {
+              label: c.label,
+              value: c.label
+            };
+            if (c.children) {
+              cItem.children = c.children.map((cc) => {
+                return {
+                  label: cc.label,
+                  value: cc.label
+                };
+              });
+            }
+            return cItem;
+          });
+        }
+        return item;
+      });
+    } else {
+      return data;
+    }
+  };
+
+  /* 省市区数据筛选 */
+  const filterData = (data: IndustryData[]) => {
+    if (props.type === 'provinceCity') {
+      return formatData(
+        data.map((d) => {
+          const item: IndustryData = {
+            label: d.label,
+            value: d.value
+          };
+          if (d.children) {
+            item.children = d.children.map((c) => {
+              return {
+                label: c.label,
+                value: c.value
+              };
+            });
+          }
+          return item;
+        })
+      );
+    } else if (props.type === 'province') {
+      return formatData(
+        data.map((d) => {
+          return {
+            label: d.label,
+            value: d.value
+          };
+        })
+      );
+    } else {
+      return formatData(data);
+    }
+  };
+
+  watch(
+    () => props.options,
+    (options) => {
+      regionsData.value = filterData(options ?? []);
+      if (!options) {
+        getIndustryData().then((data) => {
+          regionsData.value = filterData(data ?? []);
+          emit('load-data-done', data);
+        });
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>

src/components/IndustrySelect/load-data.ts

@@ -0,0 +1,25 @@
+import request from '@/utils/request';
+import type { IndustryData } from './types';
+const BASE_URL = import.meta.env.BASE_URL;
+let reqPromise: Promise<IndustryData[]>;
+
+/**
+ * 获取省市区数据
+ */
+export function getIndustryData() {
+  if (!reqPromise) {
+    reqPromise = new Promise<IndustryData[]>((resolve, reject) => {
+      request
+        .get<IndustryData[]>(BASE_URL + 'json/industry-data.json', {
+          baseURL: ''
+        })
+        .then((res) => {
+          resolve(res.data ?? []);
+        })
+        .catch((e) => {
+          reject(e);
+        });
+    });
+  }
+  return reqPromise;
+}

src/components/IndustrySelect/types/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 行业类型
+ */
+export interface IndustryData {
+  label: string;
+  value: string;
+  children?: {
+    value: string;
+    label: string;
+    children?: {
+      value: string;
+      label: string;
+    }[];
+  }[];
+}

src/components/MerchantSelect/index.vue

@@ -0,0 +1,56 @@
+<!-- 选择下拉框 -->
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { pageMerchant } from '@/api/merchant';
+  import { ref } from 'vue';
+  import { SelectProps } from 'ant-design-vue';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择服务器厂商'
+    }
+  );
+
+  // 字典数据
+  const data = ref<SelectProps['options']>([]);
+  pageMerchant({}).then((res) => {
+    res?.list.map((d) => {
+      data.value?.push({
+        comments: d.merchantName,
+        label: d.merchantName,
+        text: d.merchantName,
+        value: d.merchantCode
+      });
+    });
+  });
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/components/ProjectSelect/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <ele-table-select
+    ref="selectRef"
+    :allow-clear="true"
+    :placeholder="placeholder"
+    v-model:value="selectedValue"
+    value-key="projectId"
+    label-key="projectName"
+    :table-config="tableConfig"
+    :overlay-style="{ width: '520px', maxWidth: '80%' }"
+    :init-value="initValue"
+    @select="onSelect"
+    @clear="onClear"
+  >
+    <!-- 角色列 -->
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'progress'">
+        <div v-for="(d, i) in projectStatus" :key="i">
+          <span v-if="d.value === record.progress">{{ d.label }}</span>
+        </div>
+      </template>
+    </template>
+    <!-- 表头工具栏 -->
+    <template #toolbar>
+      <ProjectSearch @search="search" />
+    </template>
+  </ele-table-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import ProjectSearch from './project-search.vue';
+  import type { EleTableSelect } from 'ele-admin-pro/es';
+  import type { ProTableProps } from 'ele-admin-pro/es/ele-pro-table/types';
+  import type { WhereType } from './types';
+  import { pageProject, getProject } from '@/api/oa/project';
+  import type { Project } from '@/api/oa/project/model';
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number | 0;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择项目'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'select', where?: Project): void;
+    (e: 'clear'): void;
+  }>();
+
+  const selectedValue = ref<number>();
+  // 回显值
+  const initValue = ref<Project | null>(null);
+  // 选择框实例
+  const selectRef = ref<InstanceType<typeof EleTableSelect> | null>(null);
+  // 获取字典数据
+  const projectStatus = getDictionaryOptions('projectStatus');
+  // 表格配置
+  const tableConfig = reactive<ProTableProps>({
+    datasource: ({ page, limit, where, orders }) => {
+      return pageProject({ ...where, ...orders, page, limit });
+    },
+    columns: [
+      {
+        title: '项目名称',
+        dataIndex: 'projectName',
+        showSorterTooltip: false
+      },
+      {
+        title: '项目进度',
+        dataIndex: 'progress',
+        showSorterTooltip: false
+      }
+    ],
+    toolkit: ['reload', 'columns'],
+    size: 'small',
+    pageSize: 6,
+    toolStyle: {
+      padding: '0 8px'
+    }
+  });
+
+  // 搜索
+  const search = (where: WhereType) => {
+    selectRef.value?.reload({
+      where,
+      page: 1
+    });
+  };
+
+  const onClear = () => {
+    emit('clear');
+  };
+
+  const onSelect = (item) => {
+    emit('select', item);
+  };
+
+  /* 回显数据 */
+  const setInitValue = () => {
+    const projectId = Number(props.value);
+    if (!projectId) {
+      return;
+    }
+    getProject(projectId).then((res) => {
+      if (res) {
+        initValue.value = res;
+      }
+    });
+  };
+
+  setInitValue();
+
+  watch(
+    () => props.value,
+    (value) => {
+      if (value) {
+        setInitValue();
+      }
+    }
+  );
+</script>

src/components/ProjectSelect/project-search.vue

@@ -0,0 +1,36 @@
+<template>
+  <div style="max-width: 240px">
+    <a-input
+      allow-clear
+      v-model:value="where.projectName"
+      placeholder="输入手机号码搜素"
+      prefix-icon="el-icon-search"
+      @change="search"
+    >
+      <template #prefix>
+        <SearchOutlined class="ele-text-placeholder" />
+      </template>
+    </a-input>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import type { WhereType } from './types';
+
+  const emit = defineEmits<{
+    (e: 'search', where: WhereType): void;
+  }>();
+
+  // 搜索表单
+  const where = reactive<WhereType>({
+    keywords: '',
+    projectName: '',
+    projectId: undefined
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+</script>

src/components/ProjectSelect/types/index.ts

@@ -0,0 +1,8 @@
+/**
+ * 搜索表单类型
+ */
+export interface WhereType {
+  keywords?: string;
+  projectName?: string;
+  projectId?: number;
+}

src/components/RedirectLayout/index.ts

@@ -0,0 +1,21 @@
+/** 用于刷新的路由组件 */
+import { defineComponent, unref, h } from 'vue';
+import { useRouter } from 'vue-router';
+import { setRouteReload } from '@/utils/page-tab-util';
+
+export default defineComponent({
+  name: 'RedirectLayout',
+  setup() {
+    const { currentRoute, replace } = useRouter();
+    const { params, query } = unref(currentRoute);
+    const from = Array.isArray(params.path)
+      ? params.path.join('/')
+      : params.path;
+    const path = '/' + from;
+    setTimeout(() => {
+      setRouteReload(null);
+      replace({ path, query });
+    }, 100);
+    return () => h('div');
+  }
+});

src/components/RegionsSelect/index.vue

@@ -0,0 +1,127 @@
+<!-- 省市区级联选择器 -->
+<template>
+  <a-cascader
+    :value="value"
+    :options="regionsData"
+    :show-search="showSearch"
+    :placeholder="placeholder"
+    dropdown-class-name="ele-pop-wrap-higher"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import type { ValueType } from 'ant-design-vue/es/vc-cascader/Cascader';
+  import type { RegionsData } from './types';
+  import { getRegionsData } from './load-data';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string[];
+      placeholder?: string;
+      options?: RegionsData[];
+      valueField?: 'label';
+      type?: 'provinceCity' | 'province';
+      showSearch?: boolean;
+    }>(),
+    {
+      showSearch: true
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: string[]): void;
+    (e: 'load-data-done', value: RegionsData[]): void;
+  }>();
+
+  // 级联选择器数据
+  const regionsData = ref<RegionsData[]>([]);
+
+  /* 更新 value */
+  const updateValue = (value: ValueType) => {
+    emit('update:value', value as string[]);
+  };
+
+  /* 级联选择器数据 value 处理 */
+  const formatData = (data: RegionsData[]) => {
+    if (props.valueField === 'label') {
+      return data.map((d) => {
+        const item: RegionsData = {
+          label: d.label,
+          value: d.label
+        };
+        if (d.children) {
+          item.children = d.children.map((c) => {
+            const cItem: RegionsData = {
+              label: c.label,
+              value: c.label
+            };
+            if (c.children) {
+              cItem.children = c.children.map((cc) => {
+                return {
+                  label: cc.label,
+                  value: cc.label
+                };
+              });
+            }
+            return cItem;
+          });
+        }
+        return item;
+      });
+    } else {
+      return data;
+    }
+  };
+
+  /* 省市区数据筛选 */
+  const filterData = (data: RegionsData[]) => {
+    if (props.type === 'provinceCity') {
+      return formatData(
+        data.map((d) => {
+          const item: RegionsData = {
+            label: d.label,
+            value: d.value
+          };
+          if (d.children) {
+            item.children = d.children.map((c) => {
+              return {
+                label: c.label,
+                value: c.value
+              };
+            });
+          }
+          return item;
+        })
+      );
+    } else if (props.type === 'province') {
+      return formatData(
+        data.map((d) => {
+          return {
+            label: d.label,
+            value: d.value
+          };
+        })
+      );
+    } else {
+      return formatData(data);
+    }
+  };
+
+  watch(
+    () => props.options,
+    (options) => {
+      regionsData.value = filterData(options ?? []);
+      if (!options) {
+        getRegionsData().then((data) => {
+          regionsData.value = filterData(data ?? []);
+          emit('load-data-done', data);
+        });
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>

src/components/RegionsSelect/load-data.ts

@@ -0,0 +1,25 @@
+import request from '@/utils/request';
+import type { RegionsData } from './types';
+const BASE_URL = import.meta.env.BASE_URL;
+let reqPromise: Promise<RegionsData[]>;
+
+/**
+ * 获取省市区数据
+ */
+export function getRegionsData() {
+  if (!reqPromise) {
+    reqPromise = new Promise<RegionsData[]>((resolve, reject) => {
+      request
+        .get<RegionsData[]>(BASE_URL + 'json/regions-data.json', {
+          baseURL: ''
+        })
+        .then((res) => {
+          resolve(res.data ?? []);
+        })
+        .catch((e) => {
+          reject(e);
+        });
+    });
+  }
+  return reqPromise;
+}

src/components/RegionsSelect/types/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 省市区数据类型
+ */
+export interface RegionsData {
+  label: string;
+  value: string;
+  children?: {
+    value: string;
+    label: string;
+    children?: {
+      value: string;
+      label: string;
+    }[];
+  }[];
+}

src/components/RouterLayout/index.vue

@@ -0,0 +1,26 @@
+<!-- router-view 结合 keep-alive 组件 -->
+<template>
+  <router-view v-slot="{ Component }">
+    <transition :name="transitionName" mode="out-in" appear>
+      <keep-alive :include="keepAliveInclude">
+        <component :is="Component" />
+      </keep-alive>
+    </transition>
+  </router-view>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+
+  export default defineComponent({
+    name: 'RouterLayout',
+    setup() {
+      const themeStore = useThemeStore();
+      const { keepAliveInclude, transitionName } = storeToRefs(themeStore);
+
+      return { keepAliveInclude, transitionName };
+    }
+  });
+</script>

src/components/SelectApp/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <a-select
+    :placeholder="placeholder"
+    :default-active-first-option="false"
+    :show-arrow="false"
+    :filter-option="false"
+    :not-found-content="null"
+    allowClear
+    show-search
+    v-model:value="value"
+    @search="onSearch"
+    @change="onChange"
+  >
+    <a-select-option
+      v-for="(item, index) in appList"
+      :key="index"
+      :value="item.appId"
+    >
+      {{ item.appName }}
+      <span class="ele-text-placeholder"> ({{ item.appType }})</span>
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { pageApp } from '@/api/app';
+  import { App } from '@/api/app/model';
+
+  withDefaults(
+    defineProps<{
+      value?: number | undefined;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择应用'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', appId): void;
+    (e: 'select', where?: App): void;
+    (e: 'clear'): void;
+  }>();
+
+  const onSearch = (e) => {
+    reload(e);
+    emit('select', e);
+  };
+  const onChange = (e) => {
+    reload(e);
+    emit('done', e);
+  };
+  // 查询租户列表
+  const appList = ref<App[] | undefined>([]);
+
+  const reload = (appName) => {
+    pageApp({ appName }).then((result) => {
+      appList.value = result?.list;
+    });
+  };
+  reload(undefined);
+</script>
+
+<style scoped></style>

src/components/SelectCompany/components/select-data.vue

@@ -0,0 +1,154 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="companyId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'companyLogo'">
+          <a-image
+            v-if="record.companyLogo"
+            :src="FILE_THUMBNAIL + record.companyLogo"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'companyType'">
+          <a-tag v-if="record.companyType === 10">企业</a-tag>
+          <a-tag v-if="record.companyType === 20">政府单位</a-tag>
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageCompany } from '@/api/system/company';
+  import { FILE_THUMBNAIL } from '@/config/setting';
+  import { EleProTable } from 'ele-admin-pro';
+  import { Company, CompanyParam } from '@/api/system/company/model';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 企业类型
+    companyType?: string;
+    // 修改回显的数据
+    data?: Company | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Company): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '企业ID',
+      dataIndex: 'tenantId'
+    },
+    {
+      title: '企业名称',
+      dataIndex: 'companyName'
+    },
+    {
+      title: '企业类型',
+      dataIndex: 'companyType',
+      key: 'companyType'
+    },
+    {
+      title: 'LOGO',
+      dataIndex: 'companyLogo',
+      key: 'companyLogo'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    if (props.companyType == 'empty') {
+      where.emptyType = true;
+    } else {
+      where.companyType = props.companyType;
+    }
+    where.isStaff = true;
+    return pageCompany({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: CompanyParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Company) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectCompany/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Customer } from '@/api/oa/customer/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      customerType?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Customer): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Customer | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Customer) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+</script>

src/components/SelectCustomer/components/select-data.vue

@@ -0,0 +1,153 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="customerId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'customerLogo'">
+          <a-image
+            v-if="record.customerAvatar"
+            :src="FILE_THUMBNAIL + record.customerAvatar"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageCustomer } from '@/api/oa/customer';
+  import { FILE_THUMBNAIL } from '@/config/setting';
+  import { EleProTable } from 'ele-admin-pro';
+  import { Customer, CustomerParam } from '@/api/oa/customer/model';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 企业类型
+    customerType?: string;
+    // 修改回显的数据
+    data?: Customer | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Customer): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '企业名称',
+      dataIndex: 'customerName'
+    },
+    {
+      title: '企业类型',
+      dataIndex: 'customerType'
+    },
+    {
+      title: '企业LOGO',
+      dataIndex: 'customerLogo',
+      key: 'customerLogo'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    if (props.customerType == 'empty') {
+      where.emptyType = true;
+    } else {
+      where.customerType = props.customerType;
+    }
+    where.isStaff = true;
+    return pageCustomer({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: CustomerParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Customer) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectCustomer/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Customer } from '@/api/oa/customer/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      customerType?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Customer): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Customer | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Customer) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+</script>

src/components/SelectGrade/components/select-data.vue

@@ -0,0 +1,137 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="gradeId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'companyLogo'">
+          <a-image
+            v-if="record.companyLogo"
+            :src="FILE_THUMBNAIL + record.companyLogo"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageGrade } from '@/api/user/grade';
+  import { FILE_THUMBNAIL } from '@/config/setting';
+  import { EleProTable } from 'ele-admin-pro';
+  import { Grade, GradeParam } from '@/api/user/grade/model';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: Grade | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Grade): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '等级名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    where.isStaff = true;
+    return pageGrade({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: GradeParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Grade) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectGrade/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Grade } from '@/api/user/grade/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择会员等级'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Customer): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Grade | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Grade) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+</script>

src/components/SelectOrganization/components/select-data.vue

@@ -0,0 +1,224 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="organizationId"
+      :columns="columns"
+      :datasource="datasource"
+      :parse-data="parseData"
+      :customRow="customRow"
+      :need-page="false"
+      :expand-icon-column-index="1"
+      :expanded-row-keys="expandedRowKeys"
+      cache-key="proSelectOrgTable"
+      @done="onDone"
+      @expand="onExpand"
+    >
+      <template #toolbar>
+        <a-space>
+          <a-button type="dashed" class="ele-btn-icon" @click="expandAll">
+            展开全部
+          </a-button>
+          <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
+            折叠全部
+          </a-button>
+          <!-- 搜索表单 -->
+          <!--          <a-input-search-->
+          <!--            allow-clear-->
+          <!--            v-model:value="searchText"-->
+          <!--            placeholder="请输入搜索关键词"-->
+          <!--            @search="search"-->
+          <!--            @pressEnter="search"-->
+          <!--          />-->
+        </a-space>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'title'">
+          <a-tooltip :title="`分类ID：${record.categoryId}`">
+            <span>{{ record.title }}</span>
+          </a-tooltip>
+        </template>
+        <template v-if="column.key === 'status'">
+          <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+          <a-tag v-if="record.status === 1" color="orange">隐藏</a-tag>
+        </template>
+        <template v-else-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type {
+    DatasourceFunction,
+    ColumnItem,
+    EleProTableDone
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { toTreeData, eachTreeData } from 'ele-admin-pro/es';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import { listOrganizations } from '@/api/system/organization';
+  import {
+    Organization,
+    OrganizationParam
+  } from '@/api/system/organization/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '部门名称',
+      dataIndex: 'organizationName'
+    }
+  ]);
+
+  // 分类数据
+  const categoryData = ref<Organization[]>([]);
+
+  // 表格展开的行
+  const expandedRowKeys = ref<number[]>([]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ where }) => {
+    return listOrganizations({ ...where });
+  };
+
+  /* 数据转为树形结构 */
+  const parseData = (data) => {
+    return toTreeData({
+      data: data.map((d) => {
+        return { ...d, key: d.organizationId, value: d.organizationId };
+      }),
+      idField: 'organizationId',
+      parentIdField: 'parentId'
+    });
+  };
+
+  /* 表格渲染完成回调 */
+  const onDone: EleProTableDone<Organization> = ({ data }) => {
+    categoryData.value = data;
+  };
+
+  /* 刷新表格 */
+  const reload = (where?: OrganizationParam) => {
+    tableRef?.value?.reload({ where });
+  };
+
+  // import { ref } from 'vue';
+  // import {
+  //   ColumnItem,
+  //   DatasourceFunction
+  // } from 'ele-admin-pro/es/ele-pro-table/types';
+  // import {
+  //   listOrganizations,
+  //   pageOrganizations
+  // } from '@/api/system/organization';
+  // import { EleProTable, toTreeData } from 'ele-admin-pro';
+  // import {
+  //   Organization,
+  //   OrganizationParam
+  // } from '@/api/system/organization/model';
+  // import { message } from 'ant-design-vue/es';
+  // import { ArticleCategory } from '@/api/cms/category/model';
+  //
+  // defineProps<{
+  //   // 弹窗是否打开
+  //   visible: boolean;
+  //   // 标题
+  //   title?: string;
+  //   // 修改回显的数据
+  //   data?: Organization | null;
+  // }>();
+  //
+  const emit = defineEmits<{
+    (e: 'done', data: Organization): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+  //
+  // // 表格实例
+  // const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  //
+  // // 表格配置
+  // const columns = ref<ColumnItem[]>([
+  //   {
+  //     title: '部门名称',
+  //     dataIndex: 'organizationName'
+  //   },
+  //   {
+  //     title: '操作',
+  //     key: 'action',
+  //     align: 'center'
+  //   }
+  // ]);
+
+  /* 展开全部 */
+  const expandAll = () => {
+    let keys: number[] = [];
+    eachTreeData(categoryData.value, (d) => {
+      if (d.children && d.children.length && d.organizationId) {
+        keys.push(d.organizationId);
+      }
+    });
+    expandedRowKeys.value = keys;
+  };
+
+  /* 折叠全部 */
+  const foldAll = () => {
+    expandedRowKeys.value = [];
+  };
+
+  /* 点击展开图标时触发 */
+  const onExpand = (expanded: boolean, record: Organization) => {
+    if (expanded) {
+      expandedRowKeys.value = [
+        ...expandedRowKeys.value,
+        record.organizationId as number
+      ];
+    } else {
+      expandedRowKeys.value = expandedRowKeys.value.filter(
+        (d) => d !== record.organizationId
+      );
+    }
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Organization) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectOrganization/components/select-organization.vue

@@ -0,0 +1,123 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="organizationId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageOrganizations } from '@/api/system/organization';
+  import { EleProTable } from 'ele-admin-pro';
+  import {
+    Organization,
+    OrganizationParam
+  } from '@/api/system/organization/model';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: Organization | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Organization): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '部门名称',
+      dataIndex: 'organizationName'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    where.isStaff = true;
+    return pageOrganizations({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: OrganizationParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Organization) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectOrganization/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <select-data
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Organization } from '@/api/system/organization/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Organization): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Organization | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Organization) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+</script>

src/components/SelectRole/components/select-data.vue

@@ -0,0 +1,141 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="roleId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'companyLogo'">
+          <a-image
+            v-if="record.companyLogo"
+            :src="FILE_THUMBNAIL + record.companyLogo"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageRoles } from '@/api/system/role';
+  import { FILE_THUMBNAIL } from '@/config/setting';
+  import { EleProTable } from 'ele-admin-pro';
+  import { Role, RoleParam } from '@/api/system/role/model';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: Role | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Role): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '角色名称',
+      dataIndex: 'roleName'
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    where.isStaff = true;
+    return pageRoles({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: RoleParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Role) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectRole/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Grade } from '@/api/user/grade/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Customer): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Grade | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Grade) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+</script>

src/components/SelectStaff/components/select-data.vue

@@ -0,0 +1,145 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="userId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-space>
+          <a-input-search
+            allow-clear
+            v-model:value="where.keywords"
+            placeholder="请输入搜索关键词"
+            style="width: 200px"
+            @search="reload"
+            @pressEnter="reload"
+          />
+        </a-space>
+      </template>
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageUsers } from '@/api/system/user';
+  import { User, UserParam } from '@/api/system/user/model';
+  import { EleProTable } from 'ele-admin-pro';
+  import useSearch from '@/utils/use-search';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    title?: string;
+    // 修改回显的数据
+    data?: User | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单数据
+  const { where } = useSearch<UserParam>({
+    userId: undefined,
+    nickname: undefined,
+    isStaff: true,
+    keywords: ''
+  });
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '姓名',
+      dataIndex: 'nickname'
+    },
+    {
+      title: '联系电话',
+      dataIndex: 'phone',
+      key: 'phone'
+    },
+    {
+      title: '所属部门',
+      dataIndex: 'organizationName'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.isStaff = true;
+    return pageUsers({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: UserParam) => {
+    // selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  const handleSearch = () => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: User) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectStaff/components/select-user.vue

@@ -0,0 +1,138 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="userId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageUsers } from '@/api/system/user';
+  import { User, UserParam } from '@/api/system/user/model';
+  import { EleProTable } from 'ele-admin-pro';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    title?: string;
+    // 修改回显的数据
+    data?: User | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '姓名',
+      dataIndex: 'nickname'
+    },
+    {
+      title: '联系电话',
+      dataIndex: 'phone',
+      key: 'phone'
+    },
+    {
+      title: '所属部门',
+      dataIndex: 'organizationName'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    where.isStaff = true;
+    return pageUsers({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: UserParam) => {
+    // selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: User) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectStaff/index.ba.vue

@@ -0,0 +1,65 @@
+<template>
+  <a-select
+    :placeholder="placeholder"
+    :default-active-first-option="false"
+    :show-arrow="false"
+    :filter-option="false"
+    :not-found-content="null"
+    allowClear
+    show-search
+    v-model:value="value"
+    style="min-width: 360px"
+    @search="onSearch"
+    @change="onChange"
+  >
+    <template v-for="(item, index) in userList" :key="index">
+      <a-select-option v-if="item.username !== 'www'" :value="item.userId">
+        <span>{{ item.realName }}</span>
+        <span class="ele-text-placeholder"> ({{ item.nickname }})</span>
+      </a-select-option>
+    </template>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { ref } from 'vue';
+  import { pageUsers } from '@/api/system/user';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+      type?: any | 0;
+    }>(),
+    {
+      placeholder: '请选择用户'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', userId): void;
+    (e: 'select', where?: User): void;
+    (e: 'clear'): void;
+  }>();
+
+  const onSearch = (e) => {
+    reload(e);
+    emit('select', e);
+  };
+  const onChange = (e) => {
+    reload(e);
+    emit('done', e);
+  };
+  // 查询租户列表
+  const userList = ref<User[] | undefined>([]);
+
+  const reload = (text?: any) => {
+    pageUsers({ type: 6, realName: text, limit: 50 }).then((result) => {
+      userList.value = result?.list;
+    });
+  };
+  reload();
+</script>
+
+<style scoped></style>

src/components/SelectStaff/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <select-data
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { User } from '@/api/system/user/model';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+      index?: number;
+    }>(),
+    {
+      placeholder: '请选择'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', User): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<User | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: User) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    row.index = Number(props.index);
+    emit('done', row);
+  };
+  // 查询租户列表
+  // const appList = ref<App[] | undefined>([]);
+</script>

src/components/SelectUser/components/select-data.vue

@@ -0,0 +1,176 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="userId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-space>
+          <a-select ref="select" v-model:value="fake" style="width: 120px">
+            <a-select-option :value="0">查看全部</a-select-option>
+            <a-select-option :value="1">气氛组</a-select-option>
+            <a-select-option :value="2">真实用户</a-select-option>
+          </a-select>
+          <a-input-search
+            allow-clear
+            v-model:value="searchText"
+            placeholder="请输入搜索关键词"
+            style="width: 200px"
+            @search="reload"
+            @pressEnter="reload"
+          />
+        </a-space>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'avatar'">
+          <a-avatar :src="record.avatar" />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageUsers } from '@/api/system/user';
+  import { User, UserParam } from '@/api/system/user/model';
+  import { EleProTable } from 'ele-admin-pro';
+  import useSearch from '@/utils/use-search';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    title?: string;
+    // 修改回显的数据
+    data?: User | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+  const fake = ref<number>(0);
+  // 表单数据
+  const { where } = useSearch<UserParam>({
+    userId: undefined,
+    nickname: undefined,
+    isStaff: true,
+    keywords: ''
+  });
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    // {
+    //   key: 'index',
+    //   width: 48,
+    //   align: 'center',
+    //   fixed: 'left',
+    //   hideInSetting: true,
+    //   customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    // },
+    {
+      title: 'ID',
+      dataIndex: 'userId'
+    },
+    {
+      title: '用户名',
+      dataIndex: 'username'
+    },
+    {
+      title: '头像',
+      key: 'avatar',
+      dataIndex: 'avatar'
+    },
+
+    {
+      title: '姓名',
+      dataIndex: 'nickname'
+    },
+    {
+      title: '联系电话',
+      dataIndex: 'phone',
+      key: 'phone'
+    },
+    {
+      title: '所属部门',
+      dataIndex: 'organizationName'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    if (fake.value) {
+      where.fake = fake.value;
+    }
+    return pageUsers({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: UserParam) => {
+    // selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  const handleSearch = () => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: User) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectUser/components/select-user.vue

@@ -0,0 +1,138 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="userId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageUsers } from '@/api/system/user';
+  import { User, UserParam } from '@/api/system/user/model';
+  import { EleProTable } from 'ele-admin-pro';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    title?: string;
+    // 修改回显的数据
+    data?: User | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '姓名',
+      dataIndex: 'nickname'
+    },
+    {
+      title: '联系电话',
+      dataIndex: 'phone',
+      key: 'phone'
+    },
+    {
+      title: '所属部门',
+      dataIndex: 'organizationName'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    where.isStaff = true;
+    return pageUsers({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: UserParam) => {
+    // selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: User) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectUser/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <select-data
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { User } from '@/api/system/user/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', User): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<User | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: User) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+  // 查询租户列表
+  // const appList = ref<App[] | undefined>([]);
+</script>

src/components/SelectWarehouse/components/select-data.vue

@@ -0,0 +1,145 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :confirm-loading="loading"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="warehouseId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageWarehouse } from '@/api/tower/warehouse';
+  import { Warehouse, WarehouseParam } from '@/api/tower/warehouse/model';
+  import { EleProTable } from 'ele-admin-pro';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: Warehouse | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Warehouse): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  const searchText = ref(null);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '仓库名称',
+      dataIndex: 'warehouseName'
+    },
+    {
+      title: '负责人',
+      dataIndex: 'warehouseKeeper'
+    },
+    {
+      title: '联系电话',
+      dataIndex: 'warehousePhone',
+      key: 'totalNum'
+    },
+    {
+      title: '仓库地址',
+      dataIndex: 'address'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 80,
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    console.log(where);
+    return pageWarehouse({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: WarehouseParam) => {
+    // selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Warehouse) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectWarehouse/components/select-warehouse.vue

@@ -0,0 +1,145 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :confirm-loading="loading"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="warehouseId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageWarehouse } from '@/api/tower/warehouse';
+  import { Warehouse, WarehouseParam } from '@/api/tower/warehouse/model';
+  import { EleProTable } from 'ele-admin-pro';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: Warehouse | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Warehouse): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  const searchText = ref(null);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '仓库名称',
+      dataIndex: 'warehouseName'
+    },
+    {
+      title: '负责人',
+      dataIndex: 'warehouseKeeper'
+    },
+    {
+      title: '联系电话',
+      dataIndex: 'warehousePhone',
+      key: 'totalNum'
+    },
+    {
+      title: '仓库地址',
+      dataIndex: 'address'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 80,
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    console.log(where);
+    return pageWarehouse({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: WarehouseParam) => {
+    // selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Warehouse) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/SelectWarehouse/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <select-data
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Warehouse } from '@/api/tower/warehouse/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Warehouse): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Warehouse | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Warehouse) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    console.log(row, '>>>>');
+    emit('done', row);
+  };
+  // 查询租户列表
+  // const appList = ref<App[] | undefined>([]);
+</script>

src/components/Tag/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <template v-for="(item, index) in data" :key="index">
+    <a-tag v-if="item.value == value" :color="item.comments">
+      {{ item.label }}
+    </a-tag>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: undefined
+    }
+  );
+
+  // 字典数据
+  const data = getDictionaryOptions(props.dictCode);
+</script>

src/components/TinymceEditor/index.vue

@@ -0,0 +1,242 @@
+<!-- 富文本编辑器 -->
+<template>
+  <component v-if="inlineEditor" :is="tagName" :id="elementId" />
+  <textarea v-else :id="elementId"></textarea>
+</template>
+
+<script lang="ts" setup>
+  import {
+    watch,
+    onMounted,
+    onBeforeUnmount,
+    onActivated,
+    onDeactivated,
+    nextTick,
+    useAttrs
+  } from 'vue';
+  import tinymce from 'tinymce/tinymce';
+  import type {
+    Editor as TinyMCEEditor,
+    EditorEvent,
+    RawEditorSettings
+  } from 'tinymce';
+  import 'tinymce/themes/silver';
+  import 'tinymce/icons/default';
+  import 'tinymce/plugins/code';
+  import 'tinymce/plugins/preview';
+  import 'tinymce/plugins/fullscreen';
+  import 'tinymce/plugins/paste';
+  import 'tinymce/plugins/searchreplace';
+  import 'tinymce/plugins/save';
+  import 'tinymce/plugins/autosave';
+  import 'tinymce/plugins/link';
+  import 'tinymce/plugins/autolink';
+  import 'tinymce/plugins/image';
+  import 'tinymce/plugins/media';
+  import 'tinymce/plugins/table';
+  import 'tinymce/plugins/codesample';
+  import 'tinymce/plugins/lists';
+  import 'tinymce/plugins/advlist';
+  import 'tinymce/plugins/hr';
+  import 'tinymce/plugins/charmap';
+  import 'tinymce/plugins/emoticons';
+  import 'tinymce/plugins/anchor';
+  import 'tinymce/plugins/directionality';
+  import 'tinymce/plugins/pagebreak';
+  import 'tinymce/plugins/quickbars';
+  import 'tinymce/plugins/nonbreaking';
+  import 'tinymce/plugins/visualblocks';
+  import 'tinymce/plugins/visualchars';
+  import 'tinymce/plugins/wordcount';
+  import 'tinymce/plugins/emoticons/js/emojis';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import {
+    DEFAULT_CONFIG,
+    DARK_CONFIG,
+    uuid,
+    bindHandlers,
+    openAlert
+  } from './util';
+  import type { AlertOption } from './util';
+
+  const props = withDefaults(
+    defineProps<{
+      // 编辑器唯一 id
+      id?: string;
+      // v-model
+      value?: string;
+      // 编辑器配置
+      init?: RawEditorSettings;
+      // 是否内联模式
+      inline?: boolean;
+      // model events
+      modelEvents?: string;
+      // 内联模式标签名
+      tagName?: string;
+      // 是否禁用
+      disabled?: boolean;
+      // 是否跟随框架主题
+      autoTheme?: boolean;
+      // 不跟随框架主题时是否使用暗黑主题
+      darkTheme?: boolean;
+    }>(),
+    {
+      inline: false,
+      modelEvents: 'change input undo redo',
+      tagName: 'div',
+      autoTheme: true
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+  }>();
+
+  const attrs = useAttrs();
+  const themeStore = useThemeStore();
+  const { darkMode } = storeToRefs(themeStore);
+
+  // 编辑器唯一 id
+  const elementId: string = props.id || uuid('tiny-vue');
+
+  // 编辑器实例
+  let editorIns: TinyMCEEditor | null = null;
+
+  // 是否内联模式
+  const inlineEditor: boolean = props.init?.inline || props.inline;
+
+  /* 更新 value */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+
+  /* 修改内容 */
+  const setContent = (value?: string) => {
+    if (
+      editorIns &&
+      typeof value === 'string' &&
+      value !== editorIns.getContent()
+    ) {
+      editorIns.setContent(value);
+    }
+  };
+
+  /* 渲染编辑器 */
+  const render = () => {
+    const isDark = props.autoTheme ? darkMode.value : props.darkTheme;
+    tinymce.init({
+      ...DEFAULT_CONFIG,
+      ...(isDark ? DARK_CONFIG : {}),
+      ...props.init,
+      selector: `#${elementId}`,
+      readonly: props.disabled,
+      inline: inlineEditor,
+      setup: (editor: TinyMCEEditor) => {
+        editorIns = editor;
+        editor.on('init', (e: EditorEvent<any>) => {
+          // 回显初始值
+          if (props.value) {
+            setContent(props.value);
+          }
+          // v-model
+          editor.on(props.modelEvents, () => {
+            updateValue(editor.getContent());
+          });
+          // valid events
+          bindHandlers(e, attrs, editor);
+        });
+        if (typeof props.init?.setup === 'function') {
+          props.init.setup(editor);
+        }
+      }
+    });
+  };
+
+  /* 销毁编辑器 */
+  const destory = () => {
+    if (tinymce != null && editorIns != null) {
+      tinymce.remove(editorIns as any);
+      editorIns = null;
+    }
+  };
+
+  /* 弹出提示框 */
+  const alert = (option?: AlertOption) => {
+    openAlert(editorIns, option);
+  };
+
+  defineExpose({ editorIns, alert });
+
+  watch(
+    () => props.value,
+    (val: string, prevVal: string) => {
+      if (val !== prevVal) {
+        setContent(val);
+      }
+    }
+  );
+
+  watch(
+    () => props.disabled,
+    (disable) => {
+      if (editorIns !== null) {
+        if (typeof editorIns.mode?.set === 'function') {
+          editorIns.mode.set(disable ? 'readonly' : 'design');
+        } else {
+          editorIns.setMode(disable ? 'readonly' : 'design');
+        }
+      }
+    }
+  );
+
+  watch(
+    () => props.tagName,
+    () => {
+      destory();
+      nextTick(() => {
+        render();
+      });
+    }
+  );
+
+  watch(darkMode, () => {
+    if (props.autoTheme) {
+      destory();
+      nextTick(() => {
+        render();
+      });
+    }
+  });
+
+  onMounted(() => {
+    render();
+  });
+
+  onBeforeUnmount(() => {
+    destory();
+  });
+
+  onActivated(() => {
+    render();
+  });
+
+  onDeactivated(() => {
+    destory();
+  });
+</script>
+
+<style>
+  body .tox-tinymce-aux {
+    z-index: 19990000;
+  }
+
+  textarea[id^='tiny-vue'] {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    box-sizing: border-box;
+  }
+</style>

src/components/TinymceEditor/util.ts

@@ -0,0 +1,248 @@
+import type {
+  Editor as TinyMCEEditor,
+  EditorEvent,
+  RawEditorSettings
+} from 'tinymce';
+const BASE_URL = import.meta.env.BASE_URL;
+
+// 默认加载插件
+const PLUGINS: string = [
+  'code',
+  'preview',
+  'fullscreen',
+  'paste',
+  'searchreplace',
+  'save',
+  'autosave',
+  'link',
+  'autolink',
+  'image',
+  'media',
+  'table',
+  'codesample',
+  'lists',
+  'advlist',
+  'hr',
+  'charmap',
+  'emoticons',
+  'anchor',
+  'directionality',
+  'pagebreak',
+  'quickbars',
+  'nonbreaking',
+  'visualblocks',
+  'visualchars',
+  'wordcount'
+].join(' ');
+
+// 默认工具栏布局
+const TOOLBAR: string = [
+  'fullscreen',
+  'preview',
+  'code',
+  '|',
+  'undo',
+  'redo',
+  '|',
+  'forecolor',
+  'backcolor',
+  '|',
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  '|',
+  'alignleft',
+  'aligncenter',
+  'alignright',
+  'alignjustify',
+  '|',
+  'outdent',
+  'indent',
+  '|',
+  'numlist',
+  'bullist',
+  '|',
+  'formatselect',
+  'fontselect',
+  'fontsizeselect',
+  '|',
+  'link',
+  'image',
+  'media',
+  'emoticons',
+  'charmap',
+  'anchor',
+  'pagebreak',
+  'codesample',
+  '|',
+  'ltr',
+  'rtl'
+].join(' ');
+
+// 默认配置
+export const DEFAULT_CONFIG: RawEditorSettings = {
+  height: 300,
+  branding: false,
+  skin_url: BASE_URL + 'tinymce/skins/ui/oxide',
+  content_css: BASE_URL + 'tinymce/skins/content/default/content.min.css',
+  language_url: BASE_URL + 'tinymce/langs/zh_CN.js',
+  language: 'zh_CN',
+  plugins: PLUGINS,
+  toolbar: TOOLBAR,
+  draggable_modal: true,
+  toolbar_mode: 'sliding',
+  quickbars_insert_toolbar: '',
+  images_upload_handler: (blobInfo: any, success: any, error: any) => {
+    if (blobInfo.blob().size / 1024 > 400) {
+      error('大小不能超过 400KB');
+      return;
+    }
+    success('data:image/jpeg;base64,' + blobInfo.base64());
+  },
+  file_picker_types: 'media',
+  file_picker_callback: () => {}
+};
+
+// 暗黑主题配置
+export const DARK_CONFIG: RawEditorSettings = {
+  skin_url: BASE_URL + 'tinymce/skins/ui/oxide-dark',
+  content_css: BASE_URL + 'tinymce/skins/content/dark/content.min.css'
+};
+
+// 支持监听的事件
+export const VALID_EVENTS = [
+  'onActivate',
+  'onAddUndo',
+  'onBeforeAddUndo',
+  'onBeforeExecCommand',
+  'onBeforeGetContent',
+  'onBeforeRenderUI',
+  'onBeforeSetContent',
+  'onBeforePaste',
+  'onBlur',
+  'onChange',
+  'onClearUndos',
+  'onClick',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDblclick',
+  'onDeactivate',
+  'onDirty',
+  'onDrag',
+  'onDragDrop',
+  'onDragEnd',
+  'onDragGesture',
+  'onDragOver',
+  'onDrop',
+  'onExecCommand',
+  'onFocus',
+  'onFocusIn',
+  'onFocusOut',
+  'onGetContent',
+  'onHide',
+  'onInit',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoadContent',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onNodeChange',
+  'onObjectResizeStart',
+  'onObjectResized',
+  'onObjectSelected',
+  'onPaste',
+  'onPostProcess',
+  'onPostRender',
+  'onPreProcess',
+  'onProgressState',
+  'onRedo',
+  'onRemove',
+  'onReset',
+  'onSaveContent',
+  'onSelectionChange',
+  'onSetAttrib',
+  'onSetContent',
+  'onShow',
+  'onSubmit',
+  'onUndo',
+  'onVisualAid'
+];
+
+let unique = 0;
+
+/**
+ * 生成编辑器 id
+ */
+export function uuid(prefix: string): string {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1000000000);
+  unique++;
+  return prefix + '_' + random + unique + String(time);
+}
+
+/**
+ * 绑定事件
+ */
+export function bindHandlers(
+  initEvent: EditorEvent<any>,
+  listeners: Record<string, any>,
+  editor: TinyMCEEditor
+): void {
+  const validEvents = VALID_EVENTS.map((event) => event.toLowerCase());
+  Object.keys(listeners)
+    .filter((key: string) => validEvents.includes(key.toLowerCase()))
+    .forEach((key: string) => {
+      const handler = listeners[key];
+      if (typeof handler === 'function') {
+        if (key === 'onInit') {
+          handler(initEvent, editor);
+        } else {
+          editor.on(key.substring(2), (e: EditorEvent<any>) =>
+            handler(e, editor)
+          );
+        }
+      }
+    });
+}
+
+/**
+ * 弹出提示框
+ */
+export function openAlert(
+  editor: TinyMCEEditor | null,
+  option: AlertOption = {}
+) {
+  editor?.windowManager?.open({
+    title: option.title ?? '提示',
+    body: {
+      type: 'panel',
+      items: [
+        {
+          type: 'htmlpanel',
+          html: `<p>${option.content ?? ''}</p>`
+        }
+      ]
+    },
+    buttons: [
+      {
+        type: 'cancel',
+        name: 'closeButton',
+        text: '确定',
+        primary: true
+      }
+    ]
+  });
+}
+
+export interface AlertOption {
+  title?: string;
+  content?: string;
+}

src/components/TowerCompany/components/select-data.vue

@@ -0,0 +1,153 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="customerId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'customerLogo'">
+          <a-image
+            v-if="record.customerAvatar"
+            :src="FILE_THUMBNAIL + record.customerAvatar"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageCustomer } from '@/api/oa/customer';
+  import { FILE_THUMBNAIL } from '@/config/setting';
+  import { EleProTable } from 'ele-admin-pro';
+  import { Customer, CustomerParam } from '@/api/oa/customer/model';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 企业类型
+    customerType?: string;
+    // 修改回显的数据
+    data?: Customer | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Customer): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '企业名称',
+      dataIndex: 'customerName'
+    },
+    {
+      title: '企业类型',
+      dataIndex: 'customerType'
+    },
+    {
+      title: '企业LOGO',
+      dataIndex: 'customerLogo',
+      key: 'customerLogo'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    if (props.customerType == 'empty') {
+      where.emptyType = true;
+    } else {
+      where.customerType = props.customerType;
+    }
+    where.isStaff = true;
+    return pageCustomer({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: CustomerParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Customer) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/TowerCompany/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Customer } from '@/api/oa/customer/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      customerType?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Customer): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Customer | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Customer) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+</script>

src/components/TowerEquipmentType/index.vue

@@ -0,0 +1,57 @@
+<!-- 选择下拉框 -->
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { listCategory } from '@/api/goods/category';
+  import { ref } from 'vue';
+  import { Category } from '@/api/goods/category/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择分类'
+    }
+  );
+
+  const data = ref<Category[]>([]);
+
+  // 字典数据
+  listCategory({ parentId: 0 }).then((list) => {
+    data.value = list.map((d) => {
+      return {
+        value: d.title,
+        label: d.title,
+        text: d.title
+      };
+    });
+  });
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/components/TowerPlaceSelect/components/select-data.vue

@@ -0,0 +1,150 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="modelId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :striped="true"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'customerLogo'">
+          <a-image
+            v-if="record.customerAvatar"
+            :src="FILE_THUMBNAIL + record.customerAvatar"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">添加</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageTowerModel } from '@/api/tower/model';
+  import { FILE_THUMBNAIL } from '@/config/setting';
+  import { EleProTable } from 'ele-admin-pro';
+  import { TowerModel, TowerModelParam } from '@/api/tower/model/model';
+  import { pageTowerPlace } from "@/api/tower/param/place";
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: TowerModel | null;
+    selection?: TowerModel[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: TowerModel): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      title: '序号',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '部位编号',
+      dataIndex: 'placeCode'
+    },
+    {
+      title: '设备类型',
+      dataIndex: 'equipmentType'
+    },
+    {
+      title: '部位名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '部位类型',
+      dataIndex: 'type'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    return pageTowerPlace({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: TowerModelParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: TowerModel) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/TowerPlaceSelect/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { TowerModel } from '@/api/tower/model/model';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      customerType?: string;
+      placeholder?: string;
+      index?: number;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', TowerModel): void;
+    (e: 'clear'): void;
+    (e: 'multiple', any): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<TowerModel | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: TowerModel) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    // 第几行
+    row.index = Number(props.index);
+    emit('done', row);
+  };
+</script>

src/components/TowerSelectModel/components/select-data.vue

@@ -0,0 +1,144 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="modelId"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :striped="true"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'customerLogo'">
+          <a-image
+            v-if="record.customerAvatar"
+            :src="FILE_THUMBNAIL + record.customerAvatar"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageTowerModel } from '@/api/tower/model';
+  import { FILE_THUMBNAIL } from '@/config/setting';
+  import { EleProTable } from 'ele-admin-pro';
+  import { TowerModel, TowerModelParam } from '@/api/tower/model/model';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: TowerModel | null;
+    selection?: TowerModel[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: TowerModel): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '设备名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '设备型号',
+      dataIndex: 'model'
+    },
+    {
+      title: '使用年限',
+      dataIndex: 'yearLife'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    return pageTowerModel({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: TowerModelParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: TowerModel) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>

src/components/TowerSelectModel/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { TowerModel } from '@/api/tower/model/model';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      customerType?: string;
+      placeholder?: string;
+      index?: number;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', TowerModel): void;
+    (e: 'clear'): void;
+    (e: 'multiple', any): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<TowerModel | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: TowerModel) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    // 第几行
+    row.index = Number(props.index);
+    emit('done', row);
+  };
+</script>

src/components/TowerSelectModelMultiple/components/select-data.vue

@@ -0,0 +1,143 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="onSelect"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="modelId"
+      :datasource="datasource"
+      :columns="columns"
+      v-model:selection="selection"
+      :striped="true"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'customerLogo'">
+          <a-image
+            v-if="record.customerAvatar"
+            :src="FILE_THUMBNAIL + record.customerAvatar"
+            :preview="false"
+            :width="45"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageTowerModel } from '@/api/tower/model';
+  import { FILE_THUMBNAIL } from '@/config/setting';
+  import { EleProTable } from 'ele-admin-pro';
+  import { TowerModel, TowerModelParam } from '@/api/tower/model/model';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: TowerModel | null;
+    multiple?: boolean;
+    selection?: TowerModel[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: TowerModel[]): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表格选中数据
+  const selection = ref<TowerModel[]>([]);
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '设备名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '设备型号',
+      dataIndex: 'model'
+    },
+    {
+      title: '使用年限',
+      dataIndex: 'yearLife'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    return pageTowerModel({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  const onSelect = () => {
+    updateVisible(false);
+    emit('done', selection.value);
+  };
+
+  /* 搜索 */
+  const reload = (where?: TowerModelParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+</script>
+<style lang="less"></style>

src/components/TowerSelectModelMultiple/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Customer } from '@/api/oa/customer/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      customerType?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Customer): void;
+    (e: 'clear'): void;
+    (e: 'multiple', any): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Customer | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Customer) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+</script>

src/components/UploadCert/index.vue

@@ -0,0 +1,87 @@
+<!-- 文件上传组件 -->
+<template>
+  <a-upload
+    :accept="accept"
+    :maxCount="maxCount"
+    :showUploadList="showUploadList"
+    :customRequest="onUpload"
+  >
+    <a-button class="ele-btn-icon">
+      <template #icon>
+        <UploadOutlined />
+      </template>
+      <span>{{ buttonText }}</span>
+    </a-button>
+  </a-upload>
+</template>
+
+<script lang="ts" setup>
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import { message } from 'ant-design-vue';
+  import { uploadCert } from '@/api/system/file';
+  import { messageLoading } from 'ele-admin-pro';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      limit?: number;
+      maxCount?: number | 1;
+      accept?: string;
+      placeholder?: string;
+      buttonText?: string;
+      showUploadList?: boolean;
+    }>(),
+    {
+      placeholder: '请选择上传文件',
+      buttonText: '上传文件',
+      showUploadList: false
+    }
+  );
+
+  // 已上传数据
+  // const images = ref<ItemType[]>([]);
+  //
+  // const onChange = (type) => {
+  //   console.log(type, '>>>>>');
+  // };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    if (file.size / 1024 / 1024 > 100) {
+      message.error('大小不能超过 100MB');
+      return;
+    }
+    const hide = messageLoading({
+      content: '上传中..',
+      duration: 0,
+      mask: true
+    });
+    uploadCert(file)
+      .then((data) => {
+        hide();
+        console.log(data, '上传文件成功！');
+        emit('update:value', String(data.path));
+        message.success('上传成功');
+      })
+      .catch((e) => {
+        message.error(e.message);
+        hide();
+      });
+  };
+
+  // /* 更新选中数据 */
+  // const updateValue = (value: string) => {
+  //   console.log(value, '更新选中数据');
+  //   emit('update:value', value + '更新选中数据');
+  // };
+  /* 失去焦点 */
+  // const onBlur = () => {
+  //   emit('blur');
+  // };
+</script>

src/components/UploadFile/index.vue

@@ -0,0 +1,87 @@
+<!-- 文件上传组件 -->
+<template>
+  <a-upload
+    :accept="accept"
+    :maxCount="maxCount"
+    :showUploadList="showUploadList"
+    :customRequest="onUpload"
+  >
+    <a-button class="ele-btn-icon">
+      <template #icon>
+        <UploadOutlined />
+      </template>
+      <span>{{ buttonText }}</span>
+    </a-button>
+  </a-upload>
+</template>
+
+<script lang="ts" setup>
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import { message } from 'ant-design-vue';
+  import { uploadFile } from '@/api/system/file';
+  import { messageLoading } from 'ele-admin-pro';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      limit?: number;
+      maxCount?: number | 1;
+      accept?: string;
+      placeholder?: string;
+      buttonText?: string;
+      showUploadList?: boolean;
+    }>(),
+    {
+      placeholder: '请选择上传文件',
+      buttonText: '上传文件',
+      showUploadList: false
+    }
+  );
+
+  // 已上传数据
+  // const images = ref<ItemType[]>([]);
+  //
+  // const onChange = (type) => {
+  //   console.log(type, '>>>>>');
+  // };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    if (file.size / 1024 / 1024 > 100) {
+      message.error('大小不能超过 100MB');
+      return;
+    }
+    const hide = messageLoading({
+      content: '上传中..',
+      duration: 0,
+      mask: true
+    });
+    uploadFile(file)
+      .then((data) => {
+        hide();
+        console.log(data, '上传文件成功！');
+        emit('update:value', String(data.path));
+        message.success('上传成功');
+      })
+      .catch((e) => {
+        message.error(e.message);
+        hide();
+      });
+  };
+
+  // /* 更新选中数据 */
+  // const updateValue = (value: string) => {
+  //   console.log(value, '更新选中数据');
+  //   emit('update:value', value + '更新选中数据');
+  // };
+  /* 失去焦点 */
+  // const onBlur = () => {
+  //   emit('blur');
+  // };
+</script>

src/components/User/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <a-popover>
+    <template #content>
+      <div class="user-box">
+        <div class="user-info">
+          <span class="ele-text-secondary">ID：{{ record.userId }} </span>
+          <span class="ele-text-secondary">账号：{{ record.username }} </span>
+          <span class="ele-text-secondary" v-if="record.alias">
+            别名：{{ record.alias }}
+          </span>
+          <span class="ele-text-secondary">昵称：{{ record.nickname }}</span>
+          <span class="ele-text-secondary" v-if="record.realName"
+            >姓名：{{ record.realName }}
+          </span>
+          <span class="ele-text-secondary">手机号：{{ record.phone }}</span>
+          <span class="ele-text-secondary">邮箱：{{ record.email }}</span>
+        </div>
+      </div>
+    </template>
+    <div class="user-box">
+      <a-avatar v-if="record.avatar" :size="32" :src="`${record.avatar}`">
+        <template #icon>
+          <UserOutlined />
+        </template>
+      </a-avatar>
+      <div class="user-info">
+        <router-link :to="'/system/user/details?id=' + record.userId">
+          <span class="ele-text-primary">
+            {{ record.alias ? record.alias : record.nickname }}
+          </span>
+        </router-link>
+        <span class="ele-text-placeholder">{{ record.phone }}</span>
+      </div>
+    </div>
+  </a-popover>
+</template>
+
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  withDefaults(
+    defineProps<{
+      placeholder?: string;
+      record?: User | object;
+    }>(),
+    {
+      placeholder: undefined
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      padding-left: 5px;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      .nickname {
+        text-align: left;
+      }
+    }
+  }
+</style>

src/components/UserChoose/choose-search.vue

@@ -0,0 +1,37 @@
+<template>
+  <div style="max-width: 240px">
+    <a-input
+      allow-clear
+      v-model:value="where.phone"
+      placeholder="输入手机号码搜素"
+      prefix-icon="el-icon-search"
+      @change="search"
+    >
+      <template #prefix>
+        <SearchOutlined class="ele-text-placeholder" />
+      </template>
+    </a-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import type { WhereType } from './types';
+
+  const emit = defineEmits<{
+    (e: 'search', where: WhereType): void;
+  }>();
+
+  // 搜索表单
+  const where = reactive<WhereType>({
+    keywords: '',
+    nickname: '',
+    phone: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+</script>

src/components/UserChoose/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <ele-table-select
+    ref="selectRef"
+    :allow-clear="true"
+    :placeholder="placeholder"
+    v-model:value="selectedValue"
+    value-key="userId"
+    label-key="nickname"
+    :table-config="tableConfig"
+    :overlay-style="{ width: '520px', maxWidth: '80%' }"
+    :init-value="initValue"
+    @select="onSelect"
+    @clear="onClear"
+  >
+    <!-- 角色列 -->
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'nickname'">
+        <a-tooltip :title="`ID：${record.userId}`">
+          <a-avatar
+            :size="30"
+            :src="`${record.avatar}`"
+            style="margin-right: 4px"
+          >
+            <template #icon>
+              <UserOutlined />
+            </template>
+          </a-avatar>
+          {{ record.nickname }}
+        </a-tooltip>
+      </template>
+      <template v-else-if="column.key === 'roles'">
+        <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
+          {{ item.roleName }}
+        </a-tag>
+      </template>
+    </template>
+    <!-- 表头工具栏 -->
+    <template #toolbar>
+      <ChooseSearch @search="search" />
+    </template>
+  </ele-table-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import ChooseSearch from './choose-search.vue';
+  import type { EleTableSelect } from 'ele-admin-pro/es';
+  import type { ProTableProps } from 'ele-admin-pro/es/ele-pro-table/types';
+  import type { WhereType } from './types';
+  import { pageUsers, getUser } from '@/api/system/user';
+  import type { User } from '@/api/user/model';
+  import { UserOutlined } from '@ant-design/icons-vue';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number | 0;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择用户'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'select', where?: User): void;
+    (e: 'clear'): void;
+  }>();
+
+  const selectedValue = ref<number>();
+  // 回显值
+  const initValue = ref<User | null>(null);
+  // 选择框实例
+  const selectRef = ref<InstanceType<typeof EleTableSelect> | null>(null);
+
+  // 表格配置
+  const tableConfig = reactive<ProTableProps>({
+    datasource: ({ page, limit, where, orders }) => {
+      return pageUsers({ ...where, ...orders, page, limit });
+    },
+    columns: [
+      {
+        title: '昵称',
+        dataIndex: 'nickname',
+        key: 'nickname',
+        showSorterTooltip: false
+      },
+      {
+        title: '手机号码',
+        dataIndex: 'phone',
+        showSorterTooltip: false
+      },
+      {
+        title: '角色',
+        dataIndex: 'roles',
+        key: 'roles',
+        showSorterTooltip: false
+      }
+    ],
+    toolkit: ['reload', 'columns'],
+    size: 'small',
+    pageSize: 6,
+    toolStyle: {
+      padding: '0 8px'
+    }
+  });
+
+  // 搜索
+  const search = (where: WhereType) => {
+    selectRef.value?.reload({
+      where,
+      page: 1
+    });
+  };
+
+  const onClear = () => {
+    emit('clear');
+  };
+
+  const onSelect = (item) => {
+    emit('select', item);
+  };
+
+  /* 回显数据 */
+  const setInitValue = () => {
+    const userId = Number(props.value);
+    if (!userId) {
+      return;
+    }
+    getUser(userId).then((res) => {
+      if (res) {
+        initValue.value = res;
+      }
+    });
+  };
+
+  setInitValue();
+
+  watch(
+    () => props.value,
+    (value) => {
+      if (value) {
+        setInitValue();
+      }
+    }
+  );
+</script>

src/components/UserChoose/types/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 搜索表单类型
+ */
+export interface WhereType {
+  keywords?: string;
+  nickname?: string;
+  userId?: number;
+  phone?: string;
+}

src/components/UserSelect/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <ele-table-select
+    ref="selectRef"
+    :allow-clear="true"
+    :placeholder="placeholder"
+    v-model:value="selectedValue"
+    value-key="userId"
+    label-key="nickname"
+    :table-config="tableConfig"
+    :overlay-style="{ width: '520px', maxWidth: '80%' }"
+    :init-value="initValue"
+    @select="onSelect"
+    @clear="onClear"
+  >
+    <!-- 角色列 -->
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'progress'">
+        <div v-for="(d, i) in progressDict" :key="i">
+          <span v-if="d.value === record.progress">{{ d.label }}</span>
+        </div>
+      </template>
+      <template v-if="column.key === 'nickname'">
+        <a-avatar
+          :size="30"
+          :src="`${record.avatar}`"
+          style="margin-right: 4px"
+        />
+        {{ record.nickname }}
+      </template>
+    </template>
+    <!-- 表头工具栏 -->
+    <template #toolbar>
+      <UserSearch @search="search" />
+    </template>
+  </ele-table-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import UserSearch from './user-search.vue';
+  import type { EleTableSelect } from 'ele-admin-pro/es';
+  import type { ProTableProps } from 'ele-admin-pro/es/ele-pro-table/types';
+  import type { WhereType } from './types';
+  import { pageUsers } from '@/api/system/user';
+  import { getDictionaryOptions } from '@/utils/common';
+  import type { User } from '@/api/user/model';
+  import { isArray } from 'lodash-es';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number | 0;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择用户'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'select', where?: User): void;
+    (e: 'clear'): void;
+  }>();
+
+  const selectedValue = ref<number>();
+  // 获取字典数据
+  const progressDict = getDictionaryOptions('userFollowStatus');
+  // 回显值
+  const initValue = ref<User[]>([]);
+  // 选择框实例
+  const selectRef = ref<InstanceType<typeof EleTableSelect> | null>(null);
+
+  // 表格配置
+  const tableConfig = reactive<ProTableProps>({
+    datasource: ({ page, limit, where, orders }) => {
+      return pageUsers({ ...where, ...orders, page, limit });
+    },
+    columns: [
+      {
+        title: '昵称',
+        dataIndex: 'nickname',
+        key: 'nickname',
+        showSorterTooltip: false
+      },
+      {
+        title: '手机号码',
+        dataIndex: 'phone',
+        showSorterTooltip: false
+      },
+      {
+        title: '部门',
+        dataIndex: 'organizationName',
+        showSorterTooltip: false
+      }
+    ],
+    toolkit: ['reload', 'columns'],
+    size: 'small',
+    pageSize: 6,
+    toolStyle: {
+      padding: '0 8px'
+    }
+  });
+
+  // 搜索
+  const search = (where: WhereType) => {
+    selectRef.value?.reload({
+      where,
+      page: 1
+    });
+  };
+
+  const onClear = () => {
+    emit('clear');
+  };
+
+  const onSelect = (item) => {
+    emit('select', item);
+  };
+
+  /* 回显数据 */
+  const setInitValue = () => {
+    if (isArray(props.value)) {
+      initValue.value = props.value;
+    }
+    const userId = Number(props.value);
+    if (userId) {
+    }
+    // getUser(userId).then((res) => {
+    //   if (res) {
+    //     initValue.value = res;
+    //   }
+    // });
+  };
+
+  setInitValue();
+
+  watch(
+    () => props.value,
+    (value) => {
+      if (value) {
+        setInitValue();
+      }
+    }
+  );
+</script>

src/components/UserSelect/types/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 搜索表单类型
+ */
+export interface WhereType {
+  keywords?: string;
+  nickname?: string;
+  userId?: number;
+  phone?: string;
+}

src/components/UserSelect/user-search.vue

@@ -0,0 +1,37 @@
+<template>
+  <div style="max-width: 240px">
+    <a-input
+      allow-clear
+      v-model:value="where.nickname"
+      placeholder="输入用户昵称"
+      prefix-icon="el-icon-search"
+      @change="search"
+    >
+      <template #prefix>
+        <SearchOutlined class="ele-text-placeholder" />
+      </template>
+    </a-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import type { WhereType } from './types';
+
+  const emit = defineEmits<{
+    (e: 'search', where: WhereType): void;
+  }>();
+
+  // 搜索表单
+  const where = reactive<WhereType>({
+    keywords: '',
+    nickname: '',
+    phone: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+</script>