gxtyzx-admin/src/views/approval/instance/components/search.vue

<!-- 单据查询搜索表单 -->
<template>
  <a-form
    :label-col="
      styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
    "
    :wrapper-col="
      styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
    "
  >
    <a-row :gutter="8">
      <a-col v-for="field in basicFields" :key="field.prop" v-bind="colSpan">
        <a-form-item :label="field.label">
          <a-select
            v-if="field.prop === 'docType'"
            v-model:value="form.docType"
            placeholder="全部"
            allow-clear
            :options="docTypeOptions"
          />
          <a-select
            v-else-if="field.prop === 'status'"
            v-model:value="form.status"
            placeholder="全部"
            allow-clear
            :options="statusOptions"
          />
          <a-select
            v-else-if="field.prop === 'reportOrgId'"
            v-model:value="form.reportOrgId"
            placeholder="全部"
            allow-clear
            show-search
            :filter-option="filterOrganization"
            :options="organizationOptions"
          />
          <a-select
            v-else-if="field.prop === 'acceptOrgId'"
            v-model:value="form.acceptOrgId"
            placeholder="全部"
            allow-clear
            show-search
            :filter-option="filterOrganization"
            :options="organizationOptions"
          />
          <a-select
            v-else-if="field.prop === 'reporterId'"
            v-model:value="form.reporterId"
            placeholder="输入姓名或账号搜索"
            allow-clear
            show-search
            :filter-option="false"
            :options="userOptions"
            :loading="userLoading"
            @search="searchUsers"
          />
          <a-input
            v-else
            v-model:value.trim="form[field.prop]"
            placeholder="请输入"
            allow-clear
          />
        </a-form-item>
      </a-col>
      <a-col v-bind="colSpan">
        <a-form-item label="提交时间">
          <a-range-picker
            v-model:value="submitRange"
            :show-time="true"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="ele-fluid"
          />
        </a-form-item>
      </a-col>
      <a-col v-bind="colSpan">
        <a-form-item label="归档时间">
          <a-range-picker
            v-model:value="archiveRange"
            :show-time="true"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="ele-fluid"
          />
        </a-form-item>
      </a-col>
      <a-col v-bind="colSpan">
        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
          <a-space>
            <a-button type="primary" @click="search">查询</a-button>
            <a-button @click="reset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import useFormData from '@/utils/use-form-data';
  import {
    listApprovalOrganizations,
    searchApprovalUsers
  } from '@/api/approval/directory';
  import type {
    ApprovalOrganization,
    ApprovalQueryParam,
    ApprovalUser
  } from '@/api/approval/instance/model';

  const emit = defineEmits<{
    (e: 'search', where?: ApprovalQueryParam): void;
  }>();

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  // 栅格宽度
  const colSpan = {
    xl: 6,
    lg: 12,
    md: 12,
    sm: 24,
    xs: 24
  };

  // 基础字段
  const basicFields: {
    prop:
      | 'docType'
      | 'bizNo'
      | 'keyword'
      | 'reportOrgId'
      | 'acceptOrgId'
      | 'reporterId'
      | 'status';
    label: string;
  }[] = [
    { prop: 'docType', label: '单据类型' },
    { prop: 'bizNo', label: '单号' },
    { prop: 'keyword', label: '标题或名称' },
    { prop: 'reportOrgId', label: '报送部门' },
    { prop: 'acceptOrgId', label: '受理部门' },
    { prop: 'reporterId', label: '发起人' },
    { prop: 'status', label: '状态' }
  ];

  // 单据类型选项
  const docTypeOptions = [
    { label: '业务完成确认单', value: 'completion' },
    { label: '内部协调单', value: 'coordination' }
  ];

  // 状态选项
  const statusOptions = [
    { label: '未提交', value: 'DRAFT' },
    { label: '审批中', value: 'PENDING' },
    { label: '已驳回', value: 'REJECTED' },
    { label: '已撤回', value: 'WITHDRAWN' },
    { label: '审批完成', value: 'APPROVED' },
    { label: '已归档', value: 'ARCHIVED' }
  ];

  // 表单数据
  const { form, resetFields } = useFormData<ApprovalQueryParam>({
    docType: undefined,
    bizNo: '',
    keyword: '',
    reportOrgId: undefined,
    acceptOrgId: undefined,
    reporterId: undefined,
    status: undefined
  });

  // 提交时间范围
  const submitRange = ref<[string, string]>(['', '']);
  // 归档时间范围
  const archiveRange = ref<[string, string]>(['', '']);

  // 组织下拉选项
  const organizationOptions = ref<{ label: string; value: number }[]>([]);

  // 发起人下拉选项
  const userOptions = ref<{ label: string; value: number }[]>([]);
  // 发起人请求状态
  const userLoading = ref(false);

  // 组织远程过滤
  const filterOrganization = (input: string, option: { label: string }) => {
    return (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
  };

  // 远程搜索发起人
  const searchUsers = (keywords?: string) => {
    userLoading.value = true;
    searchApprovalUsers({ keywords })
      .then((data) => {
        userOptions.value = data.map((user: ApprovalUser) => ({
          label:
            (user.realName || user.nickname || user.username || '') +
            (user.username ? '(' + user.username + ')' : ''),
          value: user.userId as number
        }));
      })
      .catch(() => {
        userOptions.value = [];
      })
      .finally(() => {
        userLoading.value = false;
      });
  };

  /* 搜索 */
  const search = () => {
    const [submitTimeStart, submitTimeEnd] = submitRange.value ?? ['', ''];
    const [archiveTimeStart, archiveTimeEnd] = archiveRange.value ?? ['', ''];
    emit('search', {
      ...form,
      submitTimeStart,
      submitTimeEnd,
      archiveTimeStart,
      archiveTimeEnd
    });
  };

  /* 重置 */
  const reset = () => {
    resetFields();
    submitRange.value = ['', ''];
    archiveRange.value = ['', ''];
    userOptions.value = [];
    search();
  };

  onMounted(() => {
    listApprovalOrganizations()
      .then((data) => {
        organizationOptions.value = data.map(
          (organization: ApprovalOrganization) => ({
            label:
              organization.organizationFullName ||
              organization.organizationName ||
              '',
            value: organization.organizationId as number
          })
        );
      })
      .catch(() => {
        organizationOptions.value = [];
      });
  });
</script>