计量

src/views/dayPlan/PngMeasureSalesPur/components/searchForm.vue

@@ -0,0 +1,120 @@
+<template>
+  <a-form ref="formRef" :model="formState" v-bind="layout">
+    <a-row>
+      <a-col :span="6">
+        <a-form-item label="计量日期" name="dateMea" >
+          <a-range-picker 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="7" v-if="isAdvanced">
+        <a-form-item label="上载点" name="pointUpName">
+          <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-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 { 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)
+    
+    onMounted(() => {
+   
+    });
+
+    const emit = defineEmits(['search', 'reset']);
+    function toggleAdvanced() {
+      isAdvanced.value = !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 = () => {
+      emit('search', formState.value)
+    }
+    const onReset = () => {
+      formState.value ={ page: 1,size: 10}
+      emit('reset', formState.value)
+    }
+
+
+</script>
+
+<style lang="less" scoped>
+  .btnFoot {
+    display: flex;
+    align-items: center;
+  }
+</style>