申请记录页面

wjt

2024-06-20 a81784463f06d04e3b94b6ae6b03f12927973808

申请记录页面

 pages.json

@@ -85,6 +85,20 @@
                    {
                        "navigationBarTitleText" : "上报结果"
                    }
                },
                {
                    "path" : "reportRecord/reportRecord",
                    "style" : 
                    {
                        "navigationBarTitleText" : "上报记录"
                    }
                },
                {
                    "path" : "applyRecord/applyRecord",
                    "style" : 
                    {
                        "navigationBarTitleText" : "申请记录"
                    }
                }
            ]
        }

 policy/applyRecord/applyRecord.scss

New file
@@ -0,0 +1,104 @@
.page-box{
    padding-bottom: 40rpx;
    .list{
        margin: 20rpx 32rpx;
        .list-item{
            padding: 24rpx;
            background-color: white;
            border-radius: 10rpx;
            margin-bottom: 20rpx;
            .top-title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 32rpx;
                margin-bottom: 28rpx;
                .status{
                    font-size: 28rpx;
                    color: #B4B9BF;
                }
                .status1{
                    color: #FE7B32;
                }
                .status2{
                    color: #3EB47A;
                }
                .status3{
                    color: #1171E0;
                }
                .status4{
                    color: #EB4746;
                }
            }
            .user-info{
                font-size: 28rpx;
                color: #4A4E60;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .driver{
                    width: 2rpx;
                    height: 20rpx;
                    background: #F1F1F1;
                    margin: 0 20rpx;
                }
            }
            .set-line{
                font-size: 26rpx;
                color: #4A4E60;
                margin-top: 12rpx;
                text{
                    color: #C3C6CD;
                }
            }
            .line{
                border-bottom: 3rpx dotted #F4F4F4;
                margin: 24rpx 0;
            }
            .set-line1{
                font-size: 24rpx;
                color: #4A4E60;
                margin-top: 12rpx;
                text{
                    color: #C3C6CD;
                }
            }
            .button{
                background-color: #1171E0;
                display: inline-block;
                color: white;
                padding: 10rpx 36rpx;
                border-radius: 10rpx;
            }
            .set-start{
                align-items: flex-end;
            }
        }
    }
    .down{
        position: fixed;
        background: white;
        width: 100%;
        bottom: 0;
        padding: 32rpx 22rpx 40rpx;
        text-align: center;
        box-sizing: border-box;
        .button{
            border-radius: 20rpx;
            border: 2rpx solid #ABD2FF;
            background: #F0F8FF;
            color: #1171E0;
            padding: 20rpx 0;
        }
    }
    .set-search{
        margin: 0 32rpx 0;
        padding-top: 26rpx;
		
    }
    .border{
        border-bottom: 2rpx solid #F6F6F6;
        margin: 20rpx 0 0;
    }

}

 policy/applyRecord/applyRecord.vue

New file
@@ -0,0 +1,131 @@
<template>
    <view class="page-box">
        <u-sticky bgColor="white">
            <view class="set-search">
                <u-search placeholder="请输入申请记录关键词 "  shape="square" :showAction="false"></u-search>
            </view>
            <view class="border"></view>
            <u-tabs :list="list1" @click="click" :scrollable="false" bgColor="white"></u-tabs>
        </u-sticky>
        <view class="list">
            <view class="list-item" @click="goReport">
                <view class="top-title">
                    <text>24年5月突击检查消防安全</text>
                    <text class="status">已结束</text>
                </view>
                <view class="user-info">
                    <text>王思雨</text>
                    <view class="driver"></view>
                    <text>执法一大队</text>
                </view>
                <view class="set-line">
                    <text>执法对象：</text>河南觉醒科技有限公司
                </view>
                <view class="line"></view>
                <view class="set-flex set-start set-flex-content-between">
                    <view>
                        <view class="set-line1">
                            <text>执法时间：</text>2024-05-12 12:00
                        </view>
                        <view class="set-line1">
                            <text>申请时间：</text>2024-05-12 12:00:12
                        </view>
                    </view>

                </view>
            </view>
            <view class="list-item">
                <view class="top-title">
                    <text>24年5月突击检查消防安全</text>
                    <text class="status">已结束</text>
                </view>
                <view class="user-info">
                    <text>王思雨</text>
                    <view class="driver"></view>
                    <text>执法一大队</text>
                </view>
                <view class="set-line">
                    <text>执法对象：</text>河南觉醒科技有限公司
                </view>
                <view class="line"></view>
                <view class="set-flex set-start set-flex-content-between">
                    <view>
                        <view class="set-line1">
                            <text>执法时间：</text>2024-05-12 12:00
                        </view>
                        <view class="set-line1">
                            <text>申请时间：</text>2024-05-12 12:00:12
                        </view>
                    </view>

                </view>
            </view>
            <view class="list-item">
                <view class="top-title">
                    <text>24年5月突击检查消防安全</text>
                    <text class="status">已结束</text>
                </view>
                <view class="user-info">
                    <text>王思雨</text>
                    <view class="driver"></view>
                    <text>执法一大队</text>
                </view>
                <view class="set-line">
                    <text>执法对象：</text>河南觉醒科技有限公司
                </view>
                <view class="line"></view>
                <view class="set-flex set-start set-flex-content-between">
                    <view>
                        <view class="set-line1">
                            <text>执法时间：</text>2024-05-12 12:00
                        </view>
                        <view class="set-line1">
                            <text>申请时间：</text>2024-05-12 12:00:12
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list1: [{
                    name: '全部',
                }, {
                    name: '待审批',
                }, {
                    name: '待执行',
                }, {
                    name: '待上报',
                }, {
                    name: '已拒绝',
                }, {
                    name: '已结束',
                }]
            }
        },
        methods: {
            goReport() {
                uni.navigateTo({
                    url: `/policy/reportDetails/reportDetails`
                })
            },
            click() {

            }
        }
    }
</script>
<style>
    page {
        background-color: #F4F4F4;
    }
</style>
<style lang="scss" scoped>
    @import "./applyRecord.scss";
</style>

 policy/components/index.vue

@@ -22,7 +22,7 @@
                <u-button @click="applyPulicy">执法申请</u-button>
                <u-button v-if="isJudge">执法审批</u-button>
                <u-button @click="report">执法结果上报</u-button>
                <u-button>记录查询</u-button>
                <u-button @click="applyRecord">记录查询</u-button>
                <u-button @click="goDataLook">数据看板</u-button>
            </view>
        </view>
@@ -65,6 +65,11 @@
                uni.navigateTo({
                    url: '/policy/reportPage/reportPage'
                })
            },
            applyRecord() {
                uni.navigateTo({
                    url: '/policy/applyRecord/applyRecord'
                })
            }
        }
    }

 policy/reportDetails/reportDetails.scss

New file
@@ -0,0 +1,66 @@
.page-box{
    padding-bottom: 220rpx;
}
.box{
    margin: 32rpx;
    background-color: white;
    border-radius: 10rpx;
    padding: 24rpx;
	
    .form-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        border-bottom: 2rpx solid #F4F4F4;
        padding-bottom: 24rpx;
        margin-bottom: 24rpx;
        .label{
            color: #7E8596;
        }
		
    }
    .form-input-item{
        margin-bottom: 24rpx;
    }
    .form-input-item:last-child{
        margin-bottom: 0;
    }
    .form-item:last-child{
        margin: 0;
        padding: 0;
        border: none;
    }
    .form-label{
        margin-bottom: 16rpx;
        color: #4A4E60;
    }
    .require::after{
        content: '*';
        color: #FF7500;
    }
    /deep/ .u-textarea{
        background-color: #F4F4F4;
        border: none;
        .u-textarea__count{
            background: none !important;
        }
    }

}
    .down{
        position: fixed;
        background: white;
        width: 100%;
        bottom: 0;
        padding: 32rpx 22rpx 40rpx;
        text-align: center;
        box-sizing: border-box;
        .button{
            border-radius: 20rpx;
            border: 2rpx solid #1171E0;
            background: #1171E0;
            color: white;
            padding: 20rpx 0;
        }
    }

 policy/reportDetails/reportDetails.vue

@@ -1,6 +1,53 @@
<template>
    <view>
		
    <view class="page-box">
        <view class="box">
            <view class="form">
                <view class="form-item">
                    <view class="label">执法主题</view>
                    <view class="input">24年5月份消防突击检查</view>
                </view>
                <view class="form-item">
                    <view class="label">执法对象</view>
                    <view class="input">24年5月份消防突击检查</view>
                </view>
                <view class="form-item">
                    <view class="label">执法时间</view>
                    <view class="input">24年5月份消防突击检查</view>
                </view>
                <view class="form-item">
                    <view class="label">执法类型</view>
                    <view class="input">24年5月份消防突击检查</view>
                </view>
                <view class="form-item">
                    <view class="label">执法人员</view>
                    <view class="input">24年5月份消防突击检查</view>
                </view>
                <view class="form-item">
                    <view class="label">执法部门</view>
                    <view class="input">24年5月份消防突击检查</view>
                </view>
            </view>
        </view>
        <view class="box">
            <view class="form-input">
                <view class="form-input-item">
                    <view class="form-label require">执法结果</view>
                    <u-textarea count v-model="form.reasoon" maxlength="500"></u-textarea>
                </view>
                <view class="form-input-item">
                    <view class="form-label require">执法照片</view>
                    <view>
                        <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                            :maxCount="10"></u-upload>
                    </view>
                </view>
            </view>
        </view>
        <view class="down">
            <view class="button">
                上报记录
            </view>
        </view>
    </view>
</template>

@@ -8,15 +55,65 @@
    export default {
        data() {
            return {
				
                form: {
                    reasoon: ''
                },
                fileList1: []
            }
        },
        methods: {
			
            // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
                        filePath: url,
                        name: 'file',
                        formData: {
                            user: 'test'
                        },
                        success: (res) => {
                            setTimeout(() => {
                                resolve(res.data.data)
                            }, 1000)
                        }
                    });
                })
            },
        }
    }
</script>

<style>

    page {
        background-color: #F4F4F4;
    }
</style>
<style lang="scss" scoped>
    @import "./reportDetails.scss";
</style>

 policy/reportPage/reportPage.vue

@@ -1,7 +1,7 @@
<template>
    <view class="page-box">
        <view class="list">
            <view class="list-item">
            <view class="list-item" @click="goReport">
                <view class="top-title">
                    <text>24年5月突击检查消防安全</text>
                    <text class="status">待上报</text>
@@ -87,7 +87,7 @@
            </view>
        </view>
        <view class="down">
            <view class="button">
            <view class="button" @click="goRecord">
                上报记录
            </view>
        </view>
@@ -102,7 +102,16 @@
            }
        },
        methods: {
			
            goReport() {
                uni.navigateTo({
                    url: `/policy/reportRecord/reportRecord`
                })
            },
            goRecord() {
                uni.navigateTo({
                    url: `/policy/reportRecord/reportRecord`
                })
            }
        }
    }
</script>

 policy/reportRecord/reportRecord.scss

New file
@@ -0,0 +1,81 @@
.page-box{
    .list{
        margin: 20rpx 32rpx;
        .list-item{
            padding: 24rpx;
            background-color: white;
            border-radius: 10rpx;
            margin-bottom: 20rpx;
            .top-title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 32rpx;
                margin-bottom: 28rpx;
                .status{
                    font-size: 28rpx;
                    color: #B4B9BF;
                }
            }
            .user-info{
                font-size: 28rpx;
                color: #4A4E60;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .driver{
                    width: 2rpx;
                    height: 20rpx;
                    background: #F1F1F1;
                    margin: 0 20rpx;
                }
            }
            .set-line{
                font-size: 26rpx;
                color: #4A4E60;
                margin-top: 12rpx;
                text{
                    color: #C3C6CD;
                }
            }
            .line{
                border-bottom: 3rpx dotted #F4F4F4;
                margin: 24rpx 0;
            }
            .set-line1{
                font-size: 24rpx;
                color: #4A4E60;
                margin-top: 12rpx;
                text{
                    color: #C3C6CD;
                }
            }
            .button{
                background-color: #1171E0;
                display: inline-block;
                color: white;
                padding: 10rpx 36rpx;
                border-radius: 10rpx;
            }
            .set-start{
                align-items: flex-end;
            }
        }
    }
    .down{
        position: fixed;
        background: white;
        width: 100%;
        bottom: 0;
        padding: 32rpx 22rpx 40rpx;
        text-align: center;
        box-sizing: border-box;
        .button{
            border-radius: 20rpx;
            border: 2rpx solid #ABD2FF;
            background: #F0F8FF;
            color: #1171E0;
            padding: 20rpx 0;
        }
    }
}

 policy/reportRecord/reportRecord.vue

New file
@@ -0,0 +1,119 @@
<template>
    <view class="page-box">
        <u-sticky bgColor="white">
            <u-tabs :list="list1" @click="click" :scrollable="false" bgColor="white"></u-tabs>
        </u-sticky>
        <view class="list">
            <view class="list-item" @click="goReport">
                <view class="top-title">
                    <text>24年5月突击检查消防安全</text>
                    <text class="status">已结束</text>
                </view>
                <view class="user-info">
                    <text>王思雨</text>
                    <view class="driver"></view>
                    <text>执法一大队</text>
                </view>
                <view class="set-line">
                    <text>执法对象：</text>河南觉醒科技有限公司
                </view>
                <view class="line"></view>
                <view class="set-flex set-start set-flex-content-between">
                    <view>
                        <view class="set-line1">
                            <text>执法时间：</text>2024-05-12 12:00
                        </view>
                        <view class="set-line1">
                            <text>申请时间：</text>2024-05-12 12:00:12
                        </view>
                    </view>
					
                </view>
            </view>
            <view class="list-item">
                <view class="top-title">
                    <text>24年5月突击检查消防安全</text>
                    <text class="status">已结束</text>
                </view>
                <view class="user-info">
                    <text>王思雨</text>
                    <view class="driver"></view>
                    <text>执法一大队</text>
                </view>
                <view class="set-line">
                    <text>执法对象：</text>河南觉醒科技有限公司
                </view>
                <view class="line"></view>
                <view class="set-flex set-start set-flex-content-between">
                    <view>
                        <view class="set-line1">
                            <text>执法时间：</text>2024-05-12 12:00
                        </view>
                        <view class="set-line1">
                            <text>申请时间：</text>2024-05-12 12:00:12
                        </view>
                    </view>
					
                </view>
            </view>
            <view class="list-item">
                <view class="top-title">
                    <text>24年5月突击检查消防安全</text>
                    <text class="status">已结束</text>
                </view>
                <view class="user-info">
                    <text>王思雨</text>
                    <view class="driver"></view>
                    <text>执法一大队</text>
                </view>
                <view class="set-line">
                    <text>执法对象：</text>河南觉醒科技有限公司
                </view>
                <view class="line"></view>
                <view class="set-flex set-start set-flex-content-between">
                    <view>
                        <view class="set-line1">
                            <text>执法时间：</text>2024-05-12 12:00
                        </view>
                        <view class="set-line1">
                            <text>申请时间：</text>2024-05-12 12:00:12
                        </view>
                    </view>
					
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                      list1: [{
                                    name: '待上报',
                                }, {
                                    name: '已上报',
                                }]
            }
        },
        methods: {
            goReport() {
                uni.navigateTo({
                    url: `/policy/reportDetails/reportDetails`
                })
            },
            click() {
				
            }
        }
    }
</script>
<style>
    page{
        background-color: #F4F4F4;
    }
</style>
<style lang="scss" scoped>
@import "./reportRecord.scss";
</style>