总结统计下拉框

src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/common/dateChoose.vue

@@ -1,41 +1,54 @@
 <template>
     <div class="date-choose-div">
+        <a-icon type="left" class="dateIcon"></a-icon>
         <a-date-picker v-model="beginDate"
                        :getCalendarContainer="getCalendarContainer()"
                        @change="getBeginDateRange"></a-date-picker>
-        <span>至</span>
+        <span class="middleText">至</span>
-        <a-date-picker v-model="endDate" :getCalendarContainer="getCalendarContainer()" @change="getEndDateRange"></a-date-picker>
+        <a-date-picker v-model="endDate" :getCalendarContainer="getCalendarContainer()"
-        <span class="date-choose-icon" v-on:click="flushDate">刷新</span>
+                       @change="getEndDateRange"></a-date-picker>
+        <a-icon type="right" class="dateIcon"></a-icon>
+        <a-select
+                ref="select"
+                v-model:value="value1"
+                @change="handleChange"
+                v-if="deptSelect"
+        >
+            <a-select-option value="jack">部门1</a-select-option>
+            <a-select-option value="lucy">部门2</a-select-option>
+            <a-select-option value="disabled">部门3</a-select-option>
+            <a-select-option value="Yiminghe">部门4</a-select-option>
+        </a-select>
     </div>
 </template>
 <script>
     /*
-    * 日期选择组件
+     * 日期选择组件
-    * 2021-05-01 至 2021-05-19(今)
+     * 2021-05-01 至 2021-05-19(今)
-    * 日期可选
+     * 日期可选
-    * begin_date:"" 默认当前月1号
+     * begin_date:"" 默认当前月1号
-    * end_date:""   默认当天
+     * end_date:""   默认当天
-    * hideDefaultDate:"" 是否隐藏默认日期
+     * hideDefaultDate:"" 是否隐藏默认日期
-    * callInter:是否立刻回调
+     * callInter:是否立刻回调
-    * @flushDate 接收回传起止日期
+     * */
-    * */
 
-    import {DatePicker} from 'ant-design-vue';
+    import {DatePicker, Icon, Select} from 'ant-design-vue';
     import moment from 'moment';
     import interConfig from './interConfig';
     export default{
         data(){
             return {
-                beginDate:"",
+                beginDate: "",
-                endDate:"",
+                endDate: "",
+                value1: 'jack',
             }
         },
         created(){
-            if(!this.$props.hideDefaultDate){
+            if (!this.$props.hideDefaultDate) {
                 this.getNowTime();
             }
         },
-        props:['begin_date','end_date','hideDefaultDate','callInter'],
+        props: ['begin_date', 'end_date', 'hideDefaultDate', 'callInter', 'deptSelect'],
 //        props:{
 //            begin_date:{
 //                type:moment,
@@ -50,16 +63,16 @@
 //                }
 //            }
 //        },
-        watch:{
+        watch: {
-            begin_date:function (newVal) {
+            begin_date: function (newVal) {
-                if(typeof newVal == 'string'){
+                if (typeof newVal == 'string') {
                     this.beginDate = moment(newVal);
                     return
                 }
                 this.beginDate = newVal;
             },
-            end_date:function (newVal) {
+            end_date: function (newVal) {
-                if(typeof newVal == 'string'){
+                if (typeof newVal == 'string') {
                     this.endDate = moment(newVal);
                     return
                 }
@@ -70,8 +83,8 @@
             this.beginDate = this.$props.begin_date;
             this.endDate = this.$props.end_date;
         },
-        methods:{
+        methods: {
-            getNowTime:function () {
+            getNowTime: function () {
                 this.InterfaceConfig.callInterface([{
                     url: interConfig.getNowTime.url,
                     params: {},
@@ -86,55 +99,70 @@
                             let day = resData.data.day;
                             this.beginDate = moment(year + "-" + month + "-01");
                             this.endDate = moment(year + "-" + month + "-" + day);
-                            if(this.callInter === true){
-                                this.flushDate();
-                            }
                         }
                     }
                 })
             },
-            getCalendarContainer:function () {
+            getCalendarContainer: function () {
                 return triggerNode => triggerNode.parentNode;
             },
-            getBeginDateRange:function (date) {
+            getBeginDateRange: function (date) {
                 this.beginDate = date;
             },
-            getEndDateRange:function (date) {
+            getEndDateRange: function (date) {
                 this.endDate = date;
             },
-            flushDate:function () {
-                this.$emit("flushDate",{beginDate:this.beginDate,endDate:this.endDate});
-            }
         },
-        components:{
+        components: {
-            ADatePicker:DatePicker,
+            ADatePicker: DatePicker,
+            AIcon: Icon,
+            ASelect: Select,
+            ASelectOption: Select.Option,
         }
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-    .date-choose-div{
+    .date-choose-div {
         width: 100%;
-        height: 3rem;
+        height: 2rem;
-        display: flex;
+        /*display: flex;*/
-        align-items: center;
+        /*align-items: center;*/
-        justify-content: center;
+        /deep/ .ant-select {
-        .ant-calendar-picker{
+            width: 85px !important;
-            width: 8rem;
+            float: right !important;
+            z-index: 8888;
+            .ant-select-selection {
+                background: none !important;
+                border: 1px solid #08E2ED !important;
+                color: #08E2ED !important;
+                height: 26px !important;
+                .ant-select-arrow {
+                    color: #08E2ED !important;
+                    margin-top: -4px !important;
+                }
+                .ant-select-selection__rendered {
+                    line-height: 26px !important;
+                }
+            }
+        }
+        .dateIcon {
+            font-size: 12px;
         }
-        .ant-calendar-picker-container{
+        /deep/ .ant-calendar-picker {
+            width: 5.5rem;
+            .ant-input {
+                padding: 0 !important;
+                background: rgba(0, 0, 0, 0) !important;
+                color: #fff !important;
+                border: none !important;
+                text-align: center !important;
+            }
+        }
+        /deep/ .ant-calendar-picker-container {
             position: absolute;
             left: 0 !important;
             top: 0 !important;
         }
-        span:nth-child(2){
-            padding: 0 0.5rem;
-        }
-        .date-choose-icon{
-            font-size: 14px;
-            color: #31a8fa;
-            cursor: pointer;
-            margin-left: 0.5rem;
-        }
     }
 </style>