xiaoshi_system/src/utils/model/date/index.vue

<template>
  <div class="myDatePicker">
    <div class="date">
        <el-date-picker
            v-if="type"
            prefix-icon="el-icon-date"
            v-model="type.time[0]"
            :type="type.type"
            :format="type.format"
            :value-format="type.format"
            :placeholder="type.placeholder"
            @change="changeTime"
            style="width:100%"
        >
        </el-date-picker>
        <template v-if="type && type.range">
            <div class="font">
                至
            </div>
            <el-date-picker
                v-if="type"
                prefix-icon="el-icon-date"
                v-model="type.time[1]"
                :type="type.type"
                :format="type.format"
                :value-format="type.format"
                :placeholder="type.placeholder2"
                @change="changeTime"
                style="width:100%">
            </el-date-picker>
        </template>
    </div>
    
    
    <div class="icon">
        <i class="el-icon-setting" @click="open"></i>
    </div>

    <el-dialog
        title="设置"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div>
            <el-radio-group v-model="radio">
                <div v-for="item in typeList" :key="item.value" class="radio">
                  <el-radio :label="item.value">{{item.label}}</el-radio>  
                </div>
            </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  components: {},
  props: {
    value:{
        type:[String,Array],
        default:()=>{
            return []
        }
    }
  },
  data() {
    return {
        dialogVisible:false,
        typeList:[
            {
                value:'1',
                label:'查询某年月到某年月的数据',
                time:[],
                type:'month',
                range:true,
                format:'yyyy-MM',
                placeholder:'开始日期',
                placeholder2:'结束日期'
            },
            {
                value:'2',
                label:'查询某年到某年的数据',
                time:[],
                type:'year',
                range:true,
                format:'yyyy',
                placeholder:'开始日期',
                placeholder2:'结束日期'
            },
            {
                value:'3',
                operator:'<=',
                label:'查询某年前所有数据',
                time:[],
                type:'year',
                format:'yyyy',
                placeholder:'请选择年'
            },
            {
                value:'4',
                operator:'=',
                label:'查询某一整年的数据',
                time:[],
                type:'year',
                format:'yyyy',
                placeholder:'请选择年'
            },
        ],
        type:{
            value:'3',
            time:[],
            type:'year',
            format:'yyyy',
            placeholder:'请选择年'
        },
        radio:'3',
    };
  },
  watch: {
    value(val){
        if(val){
            this.getValue()
        }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getValue()
  },
  methods: {
    //获取数据
    getValue(){
        var val = this.value
        if(val){
            if(typeof val == 'object'){
                this.type.time = val
            }else{
                this.type.time = [val]
                if(this.type.range){
                    this.type.time[1] = moment().format('yyyy-MM-DD')
                    this.changeTime()
                }
            }
        }
        
    },
    changeTime(){
        if(this.type.range){
            this.$emit('input',this.type.time) 
            this.$emit('operator','')
        }else{
            this.$emit('input',this.type.time[0]) 
            this.$emit('operator',this.type.operator)
        }
        
    },
    //打开弹窗
    open(){
        this.radio = this.type.value
        this.dialogVisible = true
    },
    //关闭弹窗
    handleClose(){
        this.dialogVisible = false
    },
    //确定选择
    submit(){
        this.type = null
        this.$nextTick(()=>{
            this.type = this.typeList.find(item=>{
                return item.value == this.radio
            })
            this.getValue()
            this.handleClose()
        })
        
    }
  },
  
};
</script>
<style lang="scss">
    .myDatePicker{
        .el-icon-date{
            font-size: 22px;
            color: var(--fontcolor);
        }
    }
</style>
<style lang="scss" scoped>

.myDatePicker{
    --fontcolor:#73767d;
    width: 500px;
    display: flex;
    align-items: center;
    .date{
        width: 100%;
        display: flex;
        align-items: center;
        .font{
            padding: 0 5px;
            color: var(--fontcolor);
        }
    }
    .icon{
        margin-left: 5px;
        i{
            font-size: 26px;
            color: var(--fontcolor);
        }
    }
    .radio{
        height: 30px;
    }
}
</style>