vue年份选择器

新增

javascript 复制代码

<a-form-item label="年度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker
                mode="year"
                placeholder="请选择任务年度"
                type="year"
                format="YYYY"
                v-decorator="['year', validatorRules.year]"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
              ></a-date-picker>
            </a-form-item>

import moment from 'moment'

data(){
    return{
        yearShowOne: false,
    }
}

computed:{
    validatorRules(){
        return{
            year: {
            rules: [
              {
                required: !this.formDisabled,
                message: '请选择年度!',
                validator: (rule, value, callback) => {
                  if (!value) {
                    callback('请选择年度!');
                  } else {
                    callback();
                  }
                }
              }
            ]
          },
        }
    }
}
methods:{
    submitForm(){
        let formData = Object.assign(this.model, values);

            if (formData.year) {
            // 如果是 moment 对象则格式化，否则保持原样（已经是字符串）
              if (moment.isMoment(formData.year)) {
                formData.year = formData.year.format('YYYY');
              }
              // 如果不是 moment 对象，则假定它已经是正确的字符串格式
            }

        postAction(httpurl, formData).then((res)=>{
    }

    // 弹出日历和关闭日历的回调
      openChangeOne(status) {
        this.yearShowOne = status;
      },
      // 得到年份选择器的值
      panelChangeOne(value) {
        this.yearShowOne = false;
        // 直接设置moment对象到表单
        this.form.setFieldsValue({
          year: value ? moment(value) : null
        });
      },
}

列表查询框

javascript 复制代码

<a-form-item label="年度">
              <a-date-picker
                placeholder="请选择年度"
                v-model="queryParam.year"
                mode="year"
                format="YYYY"
                :open="yearShow"
                @openChange="handleYearOpenChange"
                @panelChange="handleYearPanelChange"
                style="width: 100%"
              />
            </a-form-item>

data(){
    return{
        yearShow: false, // 控制年份选择器显示状态

        columns:[
            {
            title:'年度',
            align:"center",
            dataIndex: 'year',
            customRender:function (text) {
              // 只显示年份部分
              return !text ? "" : (text.length > 4 ? text.substr(0,4) : text)
            }
          },
        ]
    }
}

methods:{
    // 处理年份选择
      handleYearPanelChange(date) {
        if (date) {
          this.queryParam.year = date.format('YYYY');
        } else {
          this.queryParam.year = undefined;
        }
        this.yearShow = false;
      },

      // 重置查询时清空年份
      searchReset() {
        this.queryParam.year = undefined;
        this.yearShow = false;
        this.loadData(1);
      },
}