geg-gas-web/src/views/dayPlan/PngMeasureSalesPur/components/searchForm.vue

<template>
  <a-form ref="formRef" :model="formState" v-bind="layout">
    <a-row>
      <a-col :span="6">
        <a-form-item label="计量日期" name="dateMea" >
          <RangePicker v-model:value="formState.dateMea"  />
        </a-form-item>
      </a-col>
      <a-col :span="7">
        <a-form-item label="客户名称/简称/编码" name="cuSname">
          <a-input v-model:value="formState.cuSname"  placeholder="请输入客户名称/简称/编码" />
        </a-form-item>
      </a-col>
      <a-col :span="7">
        <a-form-item label="供应商名称/简称/编码" name="suSname">
          <a-input v-model:value="formState.suSname"  placeholder="请输入供应商名称/简称/编码" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <div class="btnFoot">
          <a-button style="margin: 0 10px" type="primary" @click="onSearch">搜索</a-button>
          <a-button @click="onReset">重置</a-button>
          <AButton type="link" size="small" @click="toggleAdvanced">
            {{ isAdvanced ? t('收起') : t('展开') }}
            <BasicArrow class="ml-1" :expand="!isAdvanced" up />
          </AButton>
        </div>
      </a-col>
      <!-- <a-col :span="6" v-if="isAdvanced">
        <a-form-item label="计划日期" name="reply" >
          <a-range-picker v-model:value="formState.datePlan" />
        </a-form-item>
      </a-col> -->
      <a-col :span="6" v-if="isAdvanced">
        <a-form-item label="上载点" name="pointUpName">
          <a-input v-model:value="formState.pointUpName"  placeholder="请输入" />
          <!-- <a-input-search v-model:value="formState.pointUpName"  readonly placeholder="请选择上载点" @search="onSearchDownLoad('up')" /> -->
        </a-form-item>
      </a-col>
      <a-col :span="7" v-if="isAdvanced">
        <a-form-item label="下载点" name="pointDelyName">
          <a-input v-model:value="formState.pointDelyName"  placeholder="请输入" />
          <!-- <a-input-search v-model:value="formState.pointDelyName" readonly placeholder="请选择下载点" @search="onSearchDownLoad('dely')"/> -->
        </a-form-item>
      </a-col>
      <a-col :span="7" v-if="isAdvanced">
        <a-form-item label="状态" name="statusCode">
          <a-select v-model:value="formState.statusCode" :disabled="isDisable" placeholder="请选择" style="width: 100%" allow-clear >
            <a-select-option v-for="item in statusList" :key="item.value" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <!-- <a-input-search v-model:value="formState.pointDelyName" readonly placeholder="请选择下载点" @search="onSearchDownLoad('dely')"/> -->
        </a-form-item>
      </a-col>
    </a-row>

  </a-form>
  <downloadPointModal @register="register" @success="handleSuccessDownLoad" />
</template>

<script lang="ts" setup>
    import { useRouter } from 'vue-router';
    import { RangePicker } from '/@/components/RangePicker';
    import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent, reactive, defineComponent, watch} from 'vue';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
    import useEventBus from '/@/hooks/event/useEventBus';
    import { useModal } from '/@/components/Modal';
    import dayjs from 'dayjs';
    import { message } from 'ant-design-vue';
    import { useUserStore } from '/@/store/modules/user';
    import downloadPointModal from '/@/components/common/downloadPointModal.vue';
    import { Button as AButton, ButtonProps } from '/@/components/Button';
    import { BasicArrow } from '/@/components/Basic';

    const userStore = useUserStore();

    const { bus, FORM_LIST_MODIFIED } = useEventBus();

    const router = useRouter();
    const { currentRoute } = router;

    const tabStore = useMultipleTabStore();
  
    const spinning = ref(false);
    const { t } = useI18n();
    const formState = ref({});
    const [register, { openModal:openModal}] = useModal();
    const layout = {
      labelCol: { span: 9 },
      wrapperCol: { span: 15 },
    }
    const isAdvanced = ref(false)
    const statusList = [
      {label: '计量中', value: 'JLZ'},
      {label: '结算中', value: 'JSZ'},
      {label: '已结算', value: 'YJS'},
      {label: '计量完成', value: 'JLWC'},
    ]
    
    onMounted(() => {
   
    });

    const emit = defineEmits(['search', 'reset', 'toggle']);
    function toggleAdvanced() {
      isAdvanced.value = !isAdvanced.value 
      emit('toggle', isAdvanced.value)
    }
    const onSearchDownLoad = (val)=> {
      openModal(true,{isUpdate: false, type: val})
    }
    const handleSuccessDownLoad = (val, type)=> {
      if (type === 'up') {
        formState.value.pointUpName = val[0].fullName
        formState.value.pointUpCode = val[0].code
      } else {
        formState.value.pointDelyName = val[0].fullName
        formState.value.pointDelyCode = val[0].code
      }
    }
    const onSearch = () => {
      let obj = {
        ...formState.value,
        // startDate:  formState.value.datePlan ? dayjs(formState.value.datePlan[0]).format('YYYY-MM-DD') : '',
        // endDate:   formState.value.datePlan ? dayjs(formState.value.datePlan[1]).format('YYYY-MM-DD') : '',
        dateMeaStart: formState.value.dateMea ? dayjs(formState.value.dateMea[0]).format('YYYY-MM-DD') : '',
        dateMeaEnd: formState.value.dateMea ? dayjs(formState.value.dateMea[1]).format('YYYY-MM-DD') : '',
      }
      // delete obj.datePlan
      delete obj.dateMea
      emit('search', obj)
    }
    const onReset = () => {
      formState.value ={ page: 1,size: 10}
      emit('reset', formState.value)
    }


</script>

<style lang="less" scoped>
  .btnFoot {
    display: flex;
    align-items: center;
  }
  .ant-form-item {
    margin-bottom: 8px !important;
  }
  :deep( .ant-col-6) {
    width: 320px !important;
    max-width: 320px !important;;
  }
  :deep(.ant-col-6 .ant-form-item-label) {
    width: 70px !important;
    max-width: 70px !important;
  }
  :deep(.ant-col-6 .ant-form-item-control) {
    width: 240px !important;
    max-width: 240px !important;
  }

   
</style>