zjugis_OA/client/src/views/OaSystem/contractManagement/components/Form.vue

<template>
  <el-form :inline="true" class="searchBox">
    <el-form-item label="合同日期:" class="form">
      <el-date-picker
        v-model="queryParams.date"
        type="date"
        placeholder="请选择月份"
        :clearable="false"
      />
    </el-form-item>
    <el-form-item label="合同编号" class="form">
      <el-input v-model="queryParams.code" clearable />
    </el-form-item>
    <el-form-item label="合同名称" class="form project-name">
      <el-input v-model="queryParams.name" clearable />
    </el-form-item>
    <el-form-item class="search-button">
      <el-button type="primary" :icon="Search" @click="onSearchHandle">查询</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
/**
 * @description 查询表单
 */

import { Search } from '@element-plus/icons-vue'
import moment from 'moment'
import PubsubService from '@/utils/PubsubService'

interface IProps {
  pageKey: string // 页面的唯一标识
}
const { pageKey } = defineProps<IProps>()

interface IQuery {
  date: string // 合同日期
  code: string // 合同编号
  name: string // 合同名称
}
const queryParams = reactive<IQuery>({
  date: moment().format('YYYY-MM-DD'),
  code: '',
  name: ''
})

// 查询
const onSearchHandle: () => void = () => {
  queryParams.date = moment(queryParams.date).format('YYYY-MM-DD')
  const params = { ...queryParams }
  // 发布查询事件
  PubsubService.publish(pageKey, params)
  // onSearch?.(queryParams)
}
</script>

<style scoped lang="scss">
.project-name {
  width: 400px !important;
}
.search-button {
  display: flex;
  margin: 5px 0;
  align-items: center;
  flex-shrink: 0;
}
</style>