From 96effa733812a27efeaa00e6c0afcf6d8ecde946 Mon Sep 17 00:00:00 2001
From: gongdi <410827992@qq.com>
Date: Thu, 24 Feb 2022 17:23:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=8B=E6=B5=A6=E5=AD=A6=E6=A0=A1=20?=
 =?UTF-8?q?=E5=BE=85=E5=8A=9E=E5=B7=A5=E4=BD=9C=E9=98=B6=E6=AE=B5=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../adminCenter/moduleAndLaySettingConfig.js  |   2 +-
 .../oa/carUseReturn/carUseReturn.vue          | 179 ++++++++++++
 .../oa/carUseReturn/carUseReturnLarge.vue     | 255 ++++++++++++++++++
 .../moduleCom/oa/carUseReturn/infoRow.vue     | 169 ++++++++++++
 .../moduleCom/oa/officeCar/interConfig.js     |   9 +
 5 files changed, 613 insertions(+), 1 deletion(-)
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturn.vue
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturnLarge.vue
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/infoRow.vue

diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleAndLaySettingConfig.js b/src/views/screenAdaptation/pages/adminCenter/moduleAndLaySettingConfig.js
index cef8aa2..6e02d4c 100644
--- a/src/views/screenAdaptation/pages/adminCenter/moduleAndLaySettingConfig.js
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleAndLaySettingConfig.js
@@ -108,7 +108,7 @@ export const moduleData=[
             purview_code:"hbg_rcbg",menu_name:["newOfficeCar","applyCar"],show_oneLevel:false},
 
         {module_id:'vehicle_collection_and_return', module_name:'车辆领用归还', relative_crm:['daliyOffice','newOfficeCar','applyCar'],
-            icon:"icon-chelianglingyongguihuan",module_url_small:'',module_url_large:'',
+            icon:"icon-chelianglingyongguihuan",module_url_small:'oa/carUseReturn/carUseReturn.vue',module_url_large:'oa/carUseReturn/carUseReturnLarge.vue',
             purview_code:"hbg_rcbg",menu_name:["newOfficeCar","applyCar"],show_oneLevel:false},
 
         {module_id:'vehicle_record', module_name:'用车记录', relative_crm:['daliyOffice','newOfficeCar','applyCar'],
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturn.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturn.vue
new file mode 100644
index 0000000..2250300
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturn.vue
@@ -0,0 +1,179 @@
+<template>
+    <div class="car-use-return-style">
+        <div class="search-div">
+            <div class="button-style use-style" @click="changePageType(1)">
+                <span>待领用：{{useNum}}</span>
+                <div v-if="pageType === 1" class="use-button-icon-style"></div>
+            </div>
+            <div class="button-style return-style" @click="changePageType(2)">
+                <span>待归还：{{returnNum}}</span>
+                <div v-if="pageType === 2" class="return-button-icon-style"></div>
+            </div>
+        </div>
+
+        <div class="data-list-box-style">
+            <a-spin :spinning="isLoading">
+                <vue-scroll :ops="listScroll" style="height:20rem">
+                    <div class="data-list-style">
+                        <InfoRow v-for="item,index in dataList" :key="index"
+                                 :pageType="pageType"
+                                 :info="item"
+                        />
+                    </div>
+                </vue-scroll>
+            </a-spin>
+        </div>
+    </div>
+</template>
+<script>
+    /*
+     * 车辆领用归还
+     * */
+    import InterConfig from '../officeCar/interConfig';
+    import InfoRow from './infoRow.vue';
+    import {Spin} from 'ant-design-vue';
+    export default{
+        data(){
+            return {
+                isLoading: false,
+                listScroll: this.StaticParams.scrollOption,
+                pageType: 1,//1 待领用 2 待归还
+                pageNumber: 1,
+                pageSize: 10000,
+                totalPage: 0,
+                totolNum: 0,
+                dataList: [],
+                useNum: 0,//待领用数量
+                returnNum: 0,//待归还数量
+            }
+        },
+        created(){
+            this.getUseDataList();
+            this.getReturnDataList();
+        },
+        methods: {
+            changePageType: function (type) {
+                this.pageType = type;
+                this.getUseDataList();
+                this.getReturnDataList();
+            },
+            getUseDataList: function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    person_id: this.BaseConfig.userInfo.person_id,
+                    page_number: this.pageNumber,
+                    page_size: this.pageSize,
+                    data_type: 1
+                }
+                this.isLoading = true;
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.listSuccessApplyCar.url,
+                    params: param,
+                    method: InterConfig.listSuccessApplyCar.method,
+                    isTestLogin: InterConfig.listSuccessApplyCar.isTestLogin,
+                }], (result) => {
+                    this.isLoading = false;
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        this.useNum = resData.data.list.length;
+                        if (this.pageType === 1) {
+                            this.dataList = resData.data.list;
+                            this.totolNum = resData.data.total_row;
+                            this.totalPage = resData.data.total_page;
+                        }
+                    }
+                })
+            },
+            getReturnDataList: function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    person_id: this.BaseConfig.userInfo.person_id,
+                    page_number: this.pageNumber,
+                    page_size: this.pageSize,
+                    data_type: 2
+                }
+                this.isLoading = true;
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.listSuccessApplyCar.url,
+                    params: param,
+                    method: InterConfig.listSuccessApplyCar.method,
+                    isTestLogin: InterConfig.listSuccessApplyCar.isTestLogin,
+                }], (result) => {
+                    this.isLoading = false;
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        this.returnNum = resData.data.list.length;
+                        if (this.pageType === 2) {
+                            this.dataList = resData.data.list;
+                            this.totolNum = resData.data.total_row;
+                            this.totalPage = resData.data.total_page;
+                        }
+                    }
+                })
+            }
+        },
+        components: {
+            InfoRow,
+            ASpin: Spin
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .car-use-return-style {
+        width: 100%;
+        min-height: 20rem;
+        display: flex;
+        flex-direction: column;
+        .search-div {
+            width: 100%;
+            height: 5rem;
+            display: flex;
+            justify-content: space-between;
+            padding: 0.5rem;
+            .button-style {
+                width: calc(50% - 10px);
+                height: 100%;
+                color: white;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 20px;
+                position: relative;
+                cursor: pointer;
+                .use-button-icon-style {
+                    position: absolute;
+                    top: calc(100% + 5px);
+                    width: 0;
+                    height: 0;
+                    border-left: 10px solid transparent;
+                    border-right: 10px solid transparent;
+                    border-top: 15px solid #ffd54f;
+                }
+                .return-button-icon-style {
+                    position: absolute;
+                    top: calc(100% + 5px);
+                    width: 0;
+                    height: 0;
+                    border-left: 10px solid transparent;
+                    border-right: 10px solid transparent;
+                    border-top: 15px solid #9fa8da;
+                }
+            }
+            .use-style {
+                background-color: #ffd54f;
+            }
+            .return-style {
+                background-color: #9fa8da;
+            }
+        }
+        .data-list-box-style {
+            width: 100%;
+            margin-top: 1rem;
+            .data-list-style {
+                width: 100%;
+                height: auto;
+
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturnLarge.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturnLarge.vue
new file mode 100644
index 0000000..68e21e3
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturnLarge.vue
@@ -0,0 +1,255 @@
+<template>
+    <div class="car-use-return-large-style">
+        <div class="search-div">
+            <a-input placeholder="请输入车辆名称或车牌号搜索" v-model="carInfo" style="width: 210px"/>
+            <span style="margin-left: 0.5rem">申请日期</span>
+            <a-range-picker :locale="locale"
+                            :getCalendarContainer="getCalendarContainer()"
+                            @change="onDateChange"></a-range-picker>
+            <span style="margin-left: 0.5rem">用车时间</span>
+            <a-range-picker class="time-picker-style"
+                            :getCalendarContainer="getCalendarContainer()"
+                            :show-time="{ format: 'HH:mm' }"
+                            format="YYYY-MM-DD HH:mm"
+                            :placeholder="['开始时间', '结束时间']"
+                            @change="onTimeChange"
+                            @ok="onTimeOk"
+            ></a-range-picker>
+            <a-icon type="search" :style="{ fontSize: '16px', color: '#31A8FA',marginLeft:'0.5rem' }" @click="search"/>
+        </div>
+        <div class="content-box-style">
+            <div class="change-page-type-style">
+                <div class="button-style use-style" @click="changePageType(1)">
+                    <span>待领用</span>
+                    <span style="margin-top: 0.5rem">{{useNum}}</span>
+                    <div v-if="pageType === 1" class="use-button-icon-style"></div>
+                </div>
+                <div class="button-style return-style" @click="changePageType(2)">
+                    <span>待归还</span>
+                    <span style="margin-top: 0.5rem">{{returnNum}}</span>
+                    <div v-if="pageType === 2" class="return-button-icon-style"></div>
+                </div>
+            </div>
+            <div class="data-list-box">
+                <a-spin :spinning="isLoading">
+                <vue-scroll :ops="listScroll" style="height:16rem">
+                    <div class="data-list-style">
+                        <InfoRow v-for="item,index in dataList" :key="index"
+                                 :pageType="pageType"
+                                 :info="item"
+                        />
+                    </div>
+                </vue-scroll>
+                </a-spin>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    /*
+     * 车辆领用归还
+     * */
+    import {Input, DatePicker, Icon, Spin} from 'ant-design-vue';
+    import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
+    import moment from 'moment';
+    import InterConfig from '../officeCar/interConfig';
+    import InfoRow from './infoRow.vue';
+    export default{
+        data(){
+            return {
+                isLoading:false,
+                listScroll: this.StaticParams.scrollOption,
+                locale,
+                pageType: 1,//1 待领用 2 待归还
+                carInfo: "",
+                //申请起止日期
+                startDate: "",
+                endDate: "",
+                //用车时间
+                startTime: "",
+                endTime: "",
+                useNum: 0,//待领用数量
+                returnNum: 0,//待归还数量
+                dataList: [],
+                pageNumber: 1,
+                pageSize: 10000,
+                totalPage: 0,
+                totolNum: 0,
+            }
+        },
+        created(){
+            this.getUseDataList();
+            this.getReturnDataList();
+        },
+        methods: {
+            changePageType: function (type) {
+                this.pageType = type;
+                this.getUseDataList();
+                this.getReturnDataList();
+            },
+            search: function () {
+                console.log("search")
+                console.log("carInfo:", this.carInfo)
+                console.log("起止日期:", this.startDate + '--' + this.endDate)
+                console.log("起止时间:", this.startTime + '--' + this.endTime)
+            },
+            getCalendarContainer: function () {
+                return triggerNode => triggerNode.parentNode;
+            },
+            onDateChange(value, dateString) {
+                this.startDate = dateString[0];
+                this.endDate = dateString[1];
+            },
+            onTimeChange: function (value, dateString) {
+                this.startTime = dateString[0];
+                this.endTime = dateString[1];
+            },
+            onTimeOk: function (value) {
+                console.log(value)
+            },
+            getUseDataList: function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    person_id: this.BaseConfig.userInfo.person_id,
+                    page_number: this.pageNumber,
+                    page_size: this.pageSize,
+                    data_type: 1
+                }
+                this.isLoading = true;
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.listSuccessApplyCar.url,
+                    params: param,
+                    method: InterConfig.listSuccessApplyCar.method,
+                    isTestLogin: InterConfig.listSuccessApplyCar.isTestLogin,
+                }], (result) => {
+                    this.isLoading = false;
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        this.useNum = resData.data.list.length;
+                        if (this.pageType === 1) {
+                            this.dataList = resData.data.list;
+                            this.totolNum = resData.data.total_row;
+                            this.totalPage = resData.data.total_page;
+                        }
+                    }
+                })
+            },
+            getReturnDataList: function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    person_id: this.BaseConfig.userInfo.person_id,
+                    page_number: this.pageNumber,
+                    page_size: this.pageSize,
+                    data_type: 2
+                }
+                this.isLoading = true;
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.listSuccessApplyCar.url,
+                    params: param,
+                    method: InterConfig.listSuccessApplyCar.method,
+                    isTestLogin: InterConfig.listSuccessApplyCar.isTestLogin,
+                }], (result) => {
+                    this.isLoading = false;
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        this.returnNum = resData.data.list.length;
+                        if (this.pageType === 2) {
+                            this.dataList = resData.data.list;
+                            this.totolNum = resData.data.total_row;
+                            this.totalPage = resData.data.total_page;
+                        }
+                    }
+                })
+            }
+        },
+        components: {
+            AInput: Input,
+            ADatePicker: DatePicker,
+            ARangePicker: DatePicker.RangePicker,
+            AIcon: Icon,
+            InfoRow,
+            ASpin: Spin
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .car-use-return-large-style {
+        width: 100%;
+        min-height: 20rem;
+        display: flex;
+        flex-direction: column;
+        .search-div {
+            width: 100%;
+            height: 3rem;
+            line-height: 3rem;
+            display: flex;
+            align-items: center;
+            padding: 0.5rem;
+            .ant-calendar-picker {
+                width: 12rem !important;
+                margin-left: 0.5rem;
+            }
+            .time-picker-style {
+                width: 18rem !important;
+            }
+        }
+        .content-box-style {
+            width: 100%;
+            height: 16rem;
+            display: flex;
+            .change-page-type-style {
+                width: 6rem;
+                height: 100%;
+                padding: 0.5rem;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                .button-style {
+                    width: 100%;
+                    height: calc(50% - 10px);
+                    color: white;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 20px;
+                    position: relative;
+                    cursor: pointer;
+                    .use-button-icon-style {
+                        position: absolute;
+                        left: calc(100% + 5px);
+                        width: 0;
+                        height: 0;
+                        border-top: 10px solid transparent;
+                        border-left: 15px solid #ffd54f;
+                        border-bottom: 10px solid transparent;
+                    }
+                    .return-button-icon-style {
+                        position: absolute;
+                        left: calc(100% + 5px);
+                        width: 0;
+                        height: 0;
+                        border-top: 10px solid transparent;
+                        border-left: 15px solid #9fa8da;
+                        border-bottom: 10px solid transparent;
+                    }
+                }
+                .use-style {
+                    background-color: #ffd54f;
+                }
+                .return-style {
+                    background-color: #9fa8da;
+                }
+            }
+            .data-list-box {
+                width: calc(100% - 6rem);
+                height: 100%;
+                padding: 0 0.5rem;
+                .data-list-style {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/infoRow.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/infoRow.vue
new file mode 100644
index 0000000..2dcae68
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/infoRow.vue
@@ -0,0 +1,169 @@
+<template>
+    <div :class="'car-use-return-row-info-style ' + (pageType === 1?'use-car-back':'return-car-back')"
+         @mouseenter="showButton" @mouseleave="hiddenButton"
+    >
+        <div class="user-image-box">
+            <Portrait :personId="info.user_person_id"/>
+            <span style="margin-top: 0.5rem">{{userName}}</span>
+        </div>
+        <div class="apply-info-box">
+            <div class="time-row-style">{{info.send_apply_time}}</div>
+            <div class="car-info-style">
+                <div class="row-info-style">
+                    {{info.car_name}}
+                    <span style="margin-left: 0.5rem;padding: 0.2rem;background-color: #31a8fa;color: white">{{info.car_no}}</span>
+                </div>
+                <div class="row-info-style">
+                    <a-icon type="history"/>
+                    {{info.begin_datetime + '--' + info.end_datetime}}
+                </div>
+                <div class="row-info-style">
+                    <a-icon type="environment" />
+                    {{info.departure_place}}
+                </div>
+                <div class="row-info-style">
+                    <a-icon type="environment" />
+                    {{info.destination_place}}
+                </div>
+            </div>
+        </div>
+        <div class="button-div" v-if="showButtonFlag">
+            <div v-if="pageType === 1" style="width: 100%;height: 100%">
+                <div class="button-span" style="background-color: #31a8fa;color: white">
+                    领用
+                </div>
+                <div class="button-span" style="background-color: red;color: white">
+                    取消
+                </div>
+            </div>
+            <div v-if="pageType === 2" style="width: 100%;height: 100%">
+                <div class="button-span button-row-span" style="background-color: #ff9800;color: white">
+                    还车
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import Portrait from '../common/portrait.vue';
+    import {Icon} from 'ant-design-vue';
+    export default{
+        props: {
+            pageType: {
+                type: Number
+            },
+            info: {
+                type: Object
+            }
+        },
+        data(){
+            return {
+                userName: "",
+                showButtonFlag: false,
+            }
+        },
+        created(){
+            let userName = this.$props.info.user_person_name;
+            if (userName && userName.length > 3) {
+                userName = userName.substring(userName.length - 3);
+            }
+            this.userName = userName;
+        },
+        methods:{
+            showButton:function () {
+                this.showButtonFlag = true;
+            },
+            hiddenButton:function () {
+                this.showButtonFlag = false;
+            }
+        },
+        components: {
+            Portrait,
+            AIcon: Icon
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .car-use-return-row-info-style {
+        width: 100%;
+        height: auto;
+        display: flex;
+        margin-top: 0.5rem;
+        color: #7F7F7F;
+        padding: 0.5rem;
+        position: relative;
+        .user-image-box {
+            width: 80px;
+            height: auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .apply-info-box {
+            width: calc(100% - 50px);
+            height: auto;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            .time-row-style {
+                width: 100%;
+                height: 2rem;
+                line-height: 2rem;
+            }
+            .car-info-style {
+                width: 100%;
+                height: 6rem;
+                background-color: white;
+                margin-top: 0.2rem;
+                display: flex;
+                flex-direction: column;
+                padding: 0.2rem;
+                .row-info-style {
+                    width: 100%;
+                    height: 1.5rem;
+                    line-height: 1.5rem;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+
+        }
+        .button-div {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            /* padding: 1rem 0.5rem;*/
+            color: white;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            opacity: 0.8;
+            flex-wrap: nowrap;
+            .button-span {
+                width: 100%;
+                height: 50%;
+                cursor: pointer;
+                margin-left: 2px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 0.5rem;
+            }
+            .button-row-span{
+                height: 100% !important;
+            }
+        }
+    }
+
+    .use-car-back {
+        background-color: #fff8e1;
+    }
+
+    .return-car-back {
+        background-color: #e8eaf6;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCar/interConfig.js b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCar/interConfig.js
index 624f7ae..32f1a72 100644
--- a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCar/interConfig.js
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCar/interConfig.js
@@ -26,4 +26,13 @@ export default {
         isTestLogin:true
     },
 
+    /*
+     * 领用归还车辆列表
+     * */
+    "listSuccessApplyCar":{
+        url:'/intellioa/carManage/carApply/listSuccessApplyCar',
+        method:'get',
+        isTestLogin:true
+    },
+
 }