sl-sfy-safety/src/views/datamanager/alertformdata/components/common/QueryFormSimple.vue

<template>
  <div>
    <el-form :model="queryForm" label-width="auto" :inline="true" ref="formRef">
      <div class="select-group">
        <el-form-item label="类型：" prop="issueTypeList">
          <el-cascader
            v-model="issueTypeValue"
            :options="props.aiOptions"
            :props="issueMainTypeProp"
            clearable
            collapse-tags
            :show-all-levels="false"
            @change="handleIssueMainTypeChange"
          />
        </el-form-item>
        <el-form-item label="地点：" prop="workspaceId">
          <el-cascader
            v-model="workLocation"
            :options="props.locationOptions"
            :props="locationProp"
            clearable
            collapse-tags
            :show-all-levels="false"
            @change="handleCascaderChange"
          />
        </el-form-item>
        <el-form-item label="处理状态：" prop="issueState">
          <el-select v-model="tempState" clearable @change="handleIssueStateChange">
            <el-option
              v-for="item in issueStateOptionsZJC"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            clearable
            unlink-panels
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
            @change="handleDateChange"
          />
        </el-form-item>
      </div>
      <div class="btn-group">
        <el-form-item>
          <el-button class="search-btn" type="primary" @click="handleSearch">查询</el-button>
          <el-button class="reset-btn" @click="handleReset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import type { FormInstance } from 'element-plus';
  import { reactive, ref } from 'vue';
  import { issueStateOptionsZJC } from './constant.question';
  import { TableQueryForm } from '@/api/datamanagement/alert-default';

  const props = defineProps({
    aiOptions: Array<any>,
    locationOptions: Array<any>,
  });
  const emits = defineEmits(['onSearch', 'onReset']);

  const formRef = ref<FormInstance>();
  const queryForm = reactive<TableQueryForm>({
    pageNumber: 1,
    pageSize: 10,
    queryParam: {},
  });

  const issueTypeValue = ref([]);
  const issueMainTypeProp = { multiple: true, expandTrigger: 'hover' as const };
  const workLocation = ref([]); // 级联选择器，为二维数组（提取workspaceId）
  const locationProp = { multiple: true, expandTrigger: 'hover' as const }; // 级联选择器（打开多选）
  const tempState = ref(''); // 状态，字符串转number[]
  const dateRange = ref([]); // 时间段，拆分成startTime/endTime
  const defaultTime = ref<[Date, Date]>([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
  ]);

  const handleSearch = () => {
    emits('onSearch', queryForm);
  };

  const handleReset = () => {
    issueTypeValue.value = [];
    workLocation.value = [];
    tempState.value = '';
    dateRange.value = [];
    Reflect.deleteProperty(queryForm.queryParam, 'startTime');
    Reflect.deleteProperty(queryForm.queryParam, 'endTime');
    Reflect.deleteProperty(queryForm.queryParam, 'issueMainTypeList');
    Reflect.deleteProperty(queryForm.queryParam, 'issueTypeList');
    formRef.value?.resetFields();
    emits('onReset', queryForm);
  };

  const handleIssueMainTypeChange = () => {
    if (issueTypeValue.value.length !== 0) {
      const arrMain = [];
      const arrSub = [];
      issueTypeValue.value.forEach((item) => {
        arrMain.push(item[0]);
        arrSub.push(item[1]);
      });
      queryForm.queryParam.issueMainTypeList = [...new Set(arrMain)];
      queryForm.queryParam.issueTypeList = arrSub;
    } else {
      Reflect.deleteProperty(queryForm.queryParam, 'issueMainTypeList');
      Reflect.deleteProperty(queryForm.queryParam, 'issueTypeList');
    }
  };

  const handleCascaderChange = () => {
    if (workLocation.value.length !== 0) {
      const arr = [];
      workLocation.value.forEach((item) => {
        arr.push(item[1]);
      });
      queryForm.queryParam.workspaceId = arr;
    } else {
      Reflect.deleteProperty(queryForm.queryParam, 'workspaceId');
    }
  };

  const handleIssueStateChange = () => {
    if (tempState.value) queryForm.queryParam.issueState = JSON.parse(tempState.value);
    else Reflect.deleteProperty(queryForm.queryParam, 'issueState');
  };

  const handleDateChange = () => {
    if (dateRange.value != null) {
      queryForm.queryParam.startTime = dateRange.value[0];
      queryForm.queryParam.endTime = dateRange.value[1];
    } else {
      Reflect.deleteProperty(queryForm.queryParam, 'startTime');
      Reflect.deleteProperty(queryForm.queryParam, 'endTime');
    }
  };
</script>

<style scoped lang="less">
  .el-form {
    display: flex;
    justify-content: space-between;
  }

  :deep(.el-form-item__label) {
    padding: 0;
  }

  .select-group {
    flex: 1;
  }

  .btn-group {
    .search-btn {
      width: 65px;
      height: 32px;
      background: #1890ff;
      border-radius: 2px;
    }

    .reset-btn {
      width: 65px;
      height: 32px;
      border-radius: 2px;
      border: 1px solid #1890ff;
      color: #1890ff;
    }
  }

  .el-select {
    --el-select-width: 215px;
  }
</style>