tenant-Platform/src/views/consoleManage/components/queryForm.vue

<template>
  <div class="form-filter">
    <el-form label-position="left" :model="queryForm" class='form-content'>
      <template v-for="(option, index) in option.queryFormFields" :key="index">
        <!-- input -->
        <el-form-item :label="option.label" class='form-input r-24 border position-box'
          v-if="option.inputType == 'input'" @mouseenter="option.isShowDelIcon = true"
          @mouseleave="option.isShowDelIcon = false">
          <el-input class="input-deep input-w" v-model="queryForm.data[option.key]" :placeholder="`请输入${option.label}`"
            clearable>
          </el-input>
          <template v-if='!option.defaultFlag'>
            <view class='icon-del' @click='del(option)' v-show='option.isShowDelIcon'>
              <el-icon>
                <CircleCloseFilled color='#ccc' :size='30' />
              </el-icon>
            </view>
          </template>
        </el-form-item>

        <!-- select -->
        <el-form-item :label="option.label" class='form-select-single form-date-cascader  r-24 border position-box'
          v-if="option.inputType == 'select-single'" @mouseenter="option.isShowDelIcon = true"
          @mouseleave="option.isShowDelIcon = false">

          <el-select class='min-w ' v-if="option.label == '保险公司'" v-model="queryForm.data[option.key]" placeholder=""
            @change='singleChange($event, option, false)'>
            <el-option v-for="item in option.listOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-cascader   v-if="option.label == '合作保险公司'" v-model="queryForm.data[option.key]" :options="option.listOption"
            :props="tableProps"></el-cascader>
          <template v-if='!option.defaultFlag'>
            <view class='icon-del' @click='del(option)' v-show='option.isShowDelIcon'>
              <el-icon>
                <CircleCloseFilled color='#ccc' :size='30' />
              </el-icon>
            </view>
          </template>
        </el-form-item>

        <!-- 日期 -->
        <el-form-item :label="option.label" class='form-date-picker  r-24 border position-box'
          v-if="option.inputType == 'date-picker'" @mouseenter="option.isShowDelIcon = true"
          @mouseleave="option.isShowDelIcon = false">
          <el-date-picker v-model="queryForm.data[option.key]" type="daterange" unlink-panels start-placeholder="开始日期"
            end-placeholder="结束日期" :shortcuts="shortcuts" value-format="YYYY-MM-DD">
            <template #range-separator>
              <view>⇀</view>
            </template>
          </el-date-picker>
          <template v-if='!option.defaultFlag'>
            <view class='icon-del' @click='del(option)' v-show='option.isShowDelIcon'>
              <el-icon>
                <CircleCloseFilled color='#ccc' :size='30' />
              </el-icon>
            </view>
          </template>
        </el-form-item>

        <!-- 年份 -->
        <el-form-item :label="option.label" class='form-date-picker  r-24 border position-box'
          v-if="option.inputType == 'date-year'" @mouseenter="option.isShowDelIcon = true"
          @mouseleave="option.isShowDelIcon = false">
          <el-date-picker v-model="queryForm.data[option.key]" type="year" placeholder="选择年份" value-format="YYYY">
            <template #range-separator>
              <view>⇀</view>
            </template>
          </el-date-picker>
          <template v-if='!option.defaultFlag'>
            <view class='icon-del' @click='del(option)' v-show='option.isShowDelIcon'>
              <el-icon>
                <CircleCloseFilled color='#ccc' :size='30' />
              </el-icon>
            </view>
          </template>
        </el-form-item>

        <!-- tree  selectValue: [], //选中的Key存储的值   listOption原始数据 -->
        <el-form-item :label="option.label" class='form-date-tree  r-24 border position-box'
          v-if="option.inputType == 'date-tree'" @mouseenter="option.isShowDelIcon = true"
          @mouseleave="option.isShowDelIcon = false">
          <el-tree-select v-model="queryForm.data[option.key]" :data="option.listOption" :render-after-expand="false"
            :props="defaultProps" node-key="id" show-checkbox multiple
            @check="(data, checked) => handleCheckChange(data, checked, option, queryForm.data[option.key])">
            <template #tag>
              <view v-show='option.selectValue'>{{ option.selectValue }}</view>
            </template>
          </el-tree-select>
          <template v-if='!option.defaultFlag'>
            <view class='icon-del' @click='del(option)' v-show='option.isShowDelIcon'>
              <el-icon>
                <CircleCloseFilled color='#ccc' :size='30' />
              </el-icon>
            </view>
          </template>
        </el-form-item>

        <!-- 级联选择 -->
        <el-form-item :label="option.label" class='form-date-cascader  r-24 border position-box'
          v-if="option.inputType == 'date-cascader'" @mouseenter="option.isShowDelIcon = true"
          @mouseleave="option.isShowDelIcon = false">
          <el-cascader v-model="queryForm.data[option.key]" :options="option.listOption" clearable
            :props="optionProps" />
          <template v-if='!option.defaultFlag'>
            <view class='icon-del' @click='del(option)' v-show='option.isShowDelIcon'>
              <el-icon>
                <CircleCloseFilled color='#ccc' :size='30' />
              </el-icon>
            </view>
          </template>
        </el-form-item>

      </template>
      <el-button type="primary" @click='initQuery'>查询</el-button>
    </el-form>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { timestampFormat } from "@/utils/dayjs";
import api from "@/api";
const emit = defineEmits(["query", "delSelect"]);
const props = defineProps({
  option: {
    type: Object,
    default: () => {
      return {
        labelWidth: {}, // label宽度,
      };
    },
  },
});

const defaultProps = {
  children: "children",
  label: "name",
};

const optionProps = {
  value: "areaCode",
  label: "areaCname",
  children: "child",
};

let companyoption = ref([])
const tableProps = ref({
    value: "id",
    label: "name",
    children: "children",
    checkStrictly: true,
});
const showDelete = ref(false);
let queryForm = reactive({ data: {} });
const shortcuts = [
  {
    text: "今日",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime());
      return [start, end];
    },
  },
  {
    text: "最近7天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "本月",
    value: () => {
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const date = new Date(year, month, 0).getDate();

      const end = new Date(year, month - 1, date);
      const start = new Date(year, new Date().getMonth(), 1);
      return [start, end];
    },
  },
  {
    text: "本年",
    value: () => {
      const end = new Date(new Date().getFullYear(), 11, 31);
      const start = new Date(new Date().getFullYear(), 0, 1);
      return [start, end];
    },
  },
];
//获取默认值
const propsOption = props.option;
const isEmptyValue = (value) => {
  return (
    value == null ||
    value == undefined ||
    (Array.isArray(value) && value.length === 0)
  );
};
const initDefaultSaveForm = () => {
  const defaultSaveForm = {};
  const { queryFormFields = [] } = propsOption;
  const currentTimestamp = Date.now();
  const formatTime = (timestamp, format = "") => {
    return timestampFormat(timestamp, format);
  };
  // 处理不同输入类型
  const typeHandlers = {
    "date-picker": (item, baseValue) => {
      if (isEmptyValue(baseValue)) {
        const defaultTime = formatTime(currentTimestamp);
        return [defaultTime, defaultTime];
      }
      return baseValue;
    },
    "date-year": () => {
      return [formatTime(currentTimestamp, "YYYY")];
    },
    "select-multiple": (item, baseValue) => {
      const base = item.listOption ? baseValue : "0";
      const resultValue =
        base == "0" ? ["0"] : Array.isArray(base) ? base : [base];
      if (base != "0" && base != 0) {
        moreChange(resultValue, item, item.listOption);
      }
      return resultValue;
    },
    "select-single": (item, baseValue) => {
      const value = item.listOption || item.defaultValue ? baseValue : "";
      if (item.isFirst) {
        singleChange(baseValue, item, true);
      }
      return value;
    },
    "date-tree": (item, baseValue) => {
      return item.selectValue ? baseValue : [];
    },
    default: (_, baseValue) => baseValue,
  };

  queryFormFields.forEach((item) => {
    if (!item?.key) return;
    const { key, inputType } = item;
    const baseValue = queryForm.data[key] ?? item.defaultValue;

    const handler = typeHandlers[inputType] || typeHandlers.default;
    defaultSaveForm[key] = handler(item, baseValue);
  });

  // 更新表单数据并返回
  queryForm.data = { ...defaultSaveForm };

  // 处理单选框返回值格式
  const processedForm = { ...defaultSaveForm };
  queryFormFields
    .filter((item) => item.inputType == "select-single")
    .forEach((item) => {
      const { key } = item;
      const value = processedForm[key] ?? item.defaultValue;
      processedForm[key] =
        item.key === "companyId"
          ? value
          : Array.isArray(value)
            ? value
            : [value];
    });

  return processedForm;
};

//多选中发生变化
const moreChange = (selectedValues: CheckboxValueType, item, foodList) => {
  const foodLabels = getMultiLabels(selectedValues, foodList, "value");
  item.selectValue = foodLabels.join("，");
};

//tree  change
const handleCheckChange = (data, row, option, ids) => {
  const foodLabels = getMultiLabels(ids, row.checkedNodes, "id");
  option.selectValue = foodLabels.join("，");
};

//数据过滤
const getMultiLabels = (selectedValues, foodList, key) => {
  return selectedValues.map((targetValue) => {
    const matchedItem = foodList.find((item) => item[key] === targetValue);
    return matchedItem ? matchedItem.label || matchedItem.name : "";
  });
};

//单选查联动数据
const singleChange = async (val, option, isDefault) => {
  if (option.isFirst) {
    //查询合作的保险公司数据
    const  info=option.listOption.find((a)=>a.value==val)//获取选中的保险公司名称
    const { data } = await api.agreementApi.findTree({name:info.label});
    propsOption.queryFormFields.forEach((e) => {
      if (e.key == "partnerCompanyIds") {
        e.listOption = data;
        queryForm.data.partnerCompanyIds =
          option.defaultValue && isDefault ? option.defaultValue : "0";
      }
    });
  }
};

//查询
const querySelect = () => {
  const from = { ...queryForm.data };
  const { queryFormFields } = propsOption;
  const typeHandlers = {
    "select-single": (item, value) => {
      // 特殊处理companyId，其他单选转换为数组格式
      return item.key === "companyId"
        ? value
        : Array.isArray(value)
          ? value
          : [value];
    },
    "date-tree": (item, value) => {
      // 日期树选择器：无默认值时转换为空数组
      return item.selectValue ? value : [];
    },
    "select-multiple": (item, value) => {
      // 多选框：无默认值时转换为空数组
      return item.defaultValue ? value : [];
    },
    "date-picker": (item, value) => {
      // 日期选择器：无值时转换为空数组
      return value ? value : [];
    },
    "date-year": (item, value) => {
      // 年份选择器：确保始终返回数组格式
      if (!value) return [];
      return Array.isArray(value) ? value : [value];
    },
  };
  queryFormFields.forEach((item) => {
    const { inputType, key } = item;
    const handler = typeHandlers[inputType];
    if (handler) {
      from[key] = handler(item, from[key]);
    }
  });
  return from;
};

const initQuery = () => {
  const from = querySelect();
  emit("query", from);
};
//删除
const del = (option) => {
  const { inputType, key, id } = option;
  const isInputOrCompanyId = inputType === "input" || key === "companyId";
  if (isInputOrCompanyId) {
    queryForm.data[key] = "";
  } else {
    option.selectValue = "";
    queryForm.data[key] = [];
  }
  emit("delSelect", id);
};

// 暴露给父组件的方法
defineExpose({
  initDefaultSaveForm,
  querySelect,
});
</script>

<style scoped lang="scss">
.form-content {
  display: flex;
  flex-wrap: wrap;

  .r-24 {
    margin-right: 24px;
  }

  .border {
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #e5e5e5;
  }

  :deep(.el-form-item__label) {
    padding-left: 12px;
  }

  .min-w {
    min-width: 200px;
  }

  .input-w {
    width: 200px;
  }

  .position-box {
    position: relative;

    .icon-del {
      position: absolute;
      right: -8px;
      top: -14px;
    }

    :deep(.el-icon) {
      font-size: 20px;
    }
  }

  .text-color {
    color: #a3a8b3;
  }
}

// input
.form-input {
  .input-deep {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;

      .el-input__inner {
        cursor: default !important;
      }
    }
  }
}

//select
.form-select-single,
.form-select-multiple {
  :deep(.el-select__wrapper) {
    border: none;
    /* 去除边框 */
    box-shadow: none;
  }
}

//picker
.form-date-picker {
  :deep(.el-date-editor.el-input__wrapper) {
    border: none;
    /* 去除边框 */
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    width: 240px;
  }

  :deep(.el-input__wrapper) {
    border: none;
    /* 去除边框 */
    box-shadow: none;
  }

  :deep(.el-date-editor .el-range__icon) {
    display: none;
  }
}

//tree
.form-date-tree {
  :deep(.el-select__wrapper) {
    box-shadow: none;
    min-width: 240px;
  }
}

//el-cascader
.form-date-cascader {
  :deep(.el-cascader .el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  }
}

</style>