antd of vue from表单 时间组件赋值

在这里插入图片描述

 <a-form-item v-if="item.dictObjectControlTypeName === 'date'">
        <template slot="label">{{ item.showName }}</template>
        <div class="w100 tes-from">
          <a-select
            @change="changeWeek($event,item)"
            allowClear
            style="width: 70px;margin-right:10px"
            >
              <a-select-opt-group>
                <div slot="label">选项</div>
                <a-select-option
                  v-for="sfn in dictData[item.inputValueAddress]"
                  :value="sfn.name"
                  :key="sfn.id"
                >
                  {{ sfn.name }}
                </a-select-option>
              </a-select-opt-group>
          </a-select>
          <a-range-picker
            style="flex:1"
            v-decorator="[item.attributeCode]" 
            :showToday="false"
          >
            
          </a-range-picker>
        </div>
      </a-form-item>
定义一个全局变量
var dateRange = {
    currentDate: new Date(),
    millisecond: 1000 * 60 * 60 * 24,//一天的毫秒数
    getThisDay: function() {
        //起止日期数组
        var startStop = new Array()

        var now = new Date() 
        now.setTime(now.getTime())
        var s1 = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate()
        
        //添加今天
        startStop.push(s1) //今天起始时间
        //添加今天
        startStop.push(s1) //今天终止时间
        //返回
        return startStop;
    },
    getLastDay: function() {
        //起止日期数组
        var startStop = new Array()

        var now = new Date() 
        now.setTime(now.getTime()-24*60*60*1000)
        var s1 = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate()
        //添加昨天
        startStop.push(s1) //昨天起始时间
        //添加昨天
        startStop.push(s1) //昨天终止时间
        //返回
        return startStop;
    },
    getThisWeek: function() {
        //起止日期数组
        var startStop = new Array();
        //返回date是一周中的某一天
        var week = dateRange.currentDate.getDay();
        //减去的天数
        var minusDay = week != 0 ? week - 1 : 6;
        //本周 周一
        var monday = new Date(dateRange.currentDate.getTime() - (minusDay * dateRange.millisecond));
        //本周 周日
        var sunday = new Date(monday.getTime() + (6 * dateRange.millisecond));
        //添加本周时间
        startStop.push(dateRange.formatterDate(monday)); //本周起始时间
        //添加本周最后一天时间
        startStop.push(dateRange.formatterDate(sunday)); //本周终止时间
        //返回
        return startStop;
    },
    /**
     * 获得上一周的起止日期
     */
    getLastWeek: function() {
        //起止日期数组
        var startStop = new Array()
        //返回date是一周中的某一天
        var week = dateRange.currentDate.getDay();
        //减去的天数
        var minusDay = week != 0 ? week - 1 : 6;
        //获得当前周的第一天
        var currentWeekDayOne = new Date(dateRange.currentDate.getTime() - (dateRange.millisecond * minusDay));
        //上周最后一天即本周开始的前一天
        var priorWeekLastDay = new Date(currentWeekDayOne.getTime() - dateRange.millisecond);
        //上周的第一天
        var priorWeekFirstDay = new Date(priorWeekLastDay.getTime() - (dateRange.millisecond * 6));

        startStop.push(dateRange.formatterDate(priorWeekFirstDay));
        startStop.push(dateRange.formatterDate(priorWeekLastDay));
        //返回
        return startStop
    },
    /**
     * 获得这个月的起止日期
     */
    getThisMonth: function() {
        var startStop = new Array();
        //获得当前月份0-11
        var currentMonth = dateRange.currentDate.getMonth();
        //获得当前年份4位年
        var currentYear = dateRange.currentDate.getFullYear();
        //求出本月第一天
        var firstDay = new Date(currentYear, currentMonth, 1);
        //当为12月的时候年份需要加1
        //月份需要更新为0 也就是下一年的第一个月
        //否则只是月份增加,以便求的下一月的第一天
        if (currentMonth == 11) {
            currentYear++;
            currentMonth = 0;
        } else {
            currentMonth++;
        }
        //下月的第一天
        var nextMonthDayOne = new Date(currentYear, currentMonth, 1);
        //求出上月的最后一天
        var lastDay = new Date(nextMonthDayOne.getTime() - dateRange.millisecond);

        startStop.push(dateRange.formatterDate(firstDay));
        startStop.push(dateRange.formatterDate(lastDay));
        //返回
        return startStop;
    },
    /**
     * 获得上个月的起止日期
     */
    getLastMonth: function() {
        var startStop = new Array();
        //获得当前月份0-11
        var currentMonth = dateRange.currentDate.getMonth();
        //获得当前年份4位年
        var currentYear = dateRange.currentDate.getFullYear();
        var currentDay = new Date(currentYear, currentMonth, 1);
        //上个月的第一天
        //年份为0代表,是本年的第一月,所以不能减
        if (currentMonth == 0) {
            currentMonth = 11; //月份为上年的最后月份
            currentYear--; //年份减1
        }
        else {
            currentMonth--;
        }
        var firstDay =  new Date(currentYear, currentMonth, 1);
        //求出上月的最后一天
        var lastDay = new Date(currentDay.getTime() - dateRange.millisecond);

        startStop.push(dateRange.formatterDate(firstDay));
        startStop.push(dateRange.formatterDate(lastDay));
        //返回
        return startStop;
    },
    /**
    * 格式化日期(不含时间)
    */
    formatterDate : function(date) {
        var datetime = date.getFullYear()
            + "-"// "年"
            + ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
            + (date.getMonth() + 1))
            + "-"// "月"
            + (date.getDate() < 10 ? "0" + date.getDate() : date
                .getDate());
        return datetime;
    }
}
select change事件调用 
import moment from 'moment'
    //改变时间周
    changeWeek(value,item){
      var dataFrom = 'YYYY/MM/DD'
      if(value == '昨天'){
        this.form.setFieldsValue(
          { [item.attributeCode] : [moment(dateRange.getLastDay()[0], dataFrom), moment(dateRange.getLastDay()[1], dataFrom)]}
        )
      }else if(value == '今天'){
        this.form.setFieldsValue(
          { [item.attributeCode] : [moment(dateRange.getThisDay()[0], dataFrom), moment(dateRange.getThisDay()[1], dataFrom)]}
        )
      }else if(value == '本周'){
        this.form.setFieldsValue(
          { [item.attributeCode] : [moment(dateRange.getThisWeek()[0], dataFrom), moment(dateRange.getThisWeek()[1], dataFrom)]}
        )
      }else if(value == '上周'){
        this.form.setFieldsValue(
          { [item.attributeCode] : [moment(dateRange.getLastWeek()[0], dataFrom), moment(dateRange.getLastWeek()[1], dataFrom)]}
        )
      }else if(value == '本月'){
        this.form.setFieldsValue(
          { [item.attributeCode] : [moment(dateRange.getThisMonth()[0], dataFrom), moment(dateRange.getThisMonth()[1], dataFrom)]}
        )
      }else if(value == '上月'){
        this.form.setFieldsValue(
          { [item.attributeCode] : [moment(dateRange.getLastMonth()[0], dataFrom), moment(dateRange.getLastMonth()[1], dataFrom)]}
        )
      }
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要安装 `ant-design-vue` 和 `vue3` 。 ``` npm install ant-design-vue@next npm install vue@next ``` 然后,你可以创建一个表单组件 `Form.vue` : ```vue <template> <a-form :form="form" @submit="handleSubmit"> <slot /> </a-form> </template> <script> import { defineComponent, ref } from 'vue'; import { Form } from 'ant-design-vue'; export default defineComponent({ components: { Form }, props: { initialValues: Object, onFinish: Function, onFinishFailed: Function, }, setup(props, { emit }) { const form = ref(null); const handleSubmit = (e) => { e.preventDefault(); form.value .validateFields() .then((values) => { if (props.onFinish) { props.onFinish(values); } }) .catch((error) => { if (props.onFinishFailed) { props.onFinishFailed(error); } }); }; return { form, handleSubmit, }; }, }); </script> ``` 在这个表单组件中,我们使用了 `a-form` 组件和插槽。我们为 `a-form` 组件绑定了 `form` 对象和 `submit` 事件。在组件的 `setup` 函数中,我们定义了一个 `form` 的引用,并且定义了一个 `handleSubmit` 函数,用于处理表单的提交事件。 接下来,我们可以创建一个表单组件 `FormItem.vue` : ```vue <template> <a-form-item :label="label" :name="name" :rules="rules"> <slot /> </a-form-item> </template> <script> import { defineComponent } from 'vue'; import { FormItem } from 'ant-design-vue'; export default defineComponent({ components: { FormItem }, props: { label: String, name: String, rules: Array, }, }); </script> ``` 在这个表单组件中,我们使用了 `a-form-item` 组件和插槽。我们为 `a-form-item` 组件绑定了 `label`、`name` 和 `rules` 属性。 现在,我们可以在 `Form.vue` 组件中使用 `FormItem.vue` 组件来创建表单项了: ```vue <template> <Form :form="form" @submit="handleSubmit"> <FormItem label="Username" name="username" :rules="[{ required: true, message: 'Please input your username' }]"> <a-input v-model:value="formData.username" /> </FormItem> <FormItem label="Password" name="password" :rules="[{ required: true, message: 'Please input your password' }]"> <a-input-password v-model:value="formData.password" /> </FormItem> <FormItem> <a-button type="primary" html-type="submit">Submit</a-button> </FormItem> </Form> </template> <script> import { defineComponent, reactive } from 'vue'; import Form from './Form.vue'; import FormItem from './FormItem.vue'; export default defineComponent({ components: { Form, FormItem }, setup() { const formData = reactive({ username: '', password: '', }); const handleSubmit = (values) => { console.log(values); }; return { formData, handleSubmit, }; }, }); </script> ``` 在这个例子中,我们创建了两个表单项:用户名和密码。我们使用 `v-model` 指令将表单数据绑定到 `formData` 对象上。我们也定义了一个 `handleSubmit` 函数,在表单提交时输出表单数据。 最后,我们需要在 `main.js` 文件中引入 `ant-design-vue` 组件库和 `Form.vue` 组件: ```js import { createApp } from 'vue'; import App from './App.vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; import Form from './components/Form.vue'; const app = createApp(App); app.use(Antd); app.component('Form', Form); app.mount('#app'); ``` 现在,我们就可以在 Vue 3 中使用 Ant Design Vue表单组件了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值