报事新增，报事列表

guoshilong

2023-11-06 87ca9eb54cd11e74324056e1fa79b995ec820169

报事新增，报事列表

 api/task/taskReportForRepairs.js

New file
@@ -0,0 +1,32 @@
import http from '@/http/api.js'

//获取报事统计数据
export const getStatistics = (params) => {
    return http.request({
        url: '/blade-taskReportForRepairs/taskReportForRepairs/getStatisticsCount',
        method: 'GET',
        params: {
            ...params
        }
    })
}

export const getPage = (params) => {
    return http.request({
        url: '/blade-taskReportForRepairs/taskReportForRepairs/page',
        method: 'GET',
        params: {
            ...params
        }
    })
}


//添加
export const save = (data) => {
    return http.request({
        url: '/blade-taskReportForRepairs/taskReportForRepairs/save',
        method: 'POST',
        data: data
    })
}

 pages.json

@@ -66,7 +66,7 @@
                }
            ]
        },
		

        //工作台
        {
            "root": "subPackage/workbench",
@@ -80,7 +80,7 @@
                    }
                },
                {
                    "path":"views/rental",
                    "path": "views/rental",
                    "style": {
                        "navigationBarTitleText": "出租房管理",
                        "enablePullDownRefresh": false,
@@ -147,7 +147,16 @@
                    }
                },
                {
                    "path":"views/addRepair",
                    "path": "views/addRepair",
                    "style": {
                        "navigationBarTitleText": "公共维修",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
                    }
                },
                {
                    "path": "views/repairList",
                    "style": {
                        "navigationBarTitleText": "公共维修",
                        "enablePullDownRefresh": false,

 subPackage/bs/views/addRepair.vue

@@ -9,13 +9,13 @@
            <text class="address f-28">万达华府26栋1903室 万达华府26栋1903室</text>
        </view>
        <view class="content bgc-ff">
            <u-form labelPosition="left" :model="info" :rules="rules" ref="uForm" labelWidth="90"
            <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="90"
                :labelStyle="{fontSize:'28rpx'}">
                <u-form-item label="姓名" prop="info.name" borderBottom ref="item1">
                    <u-input v-model="info.title" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                <u-form-item label="姓名" prop="realName" borderBottom ref="realName">
                    <u-input v-model="info.realName" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                        inputAlign="right"></u-input>
                </u-form-item>
                <u-form-item label="手机" prop="info.phone" :borderBottom="false" ref="item1">
                <u-form-item label="手机" prop="phone" :borderBottom="false" ref="phone">
                    <u-input v-model="info.phone" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                        inputAlign="right"></u-input>
                </u-form-item>
@@ -24,9 +24,10 @@

        <view class="upload bgc-ff">
            <view class="f-28 mb-20">描述</view>
            <u-textarea v-model="desc" placeholder="请输入内容" border="none" placeholderClass="c-99 f-26"></u-textarea>
            <u-textarea v-model="info.remark" placeholder="请输入内容" border="none"
                placeholderClass="c-99 f-26"></u-textarea>
            <view class="mt-20">
                <u-upload :fileList="images" :previewFullImage="uploadConfig.previewFullImage"
                <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
                    :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
                    :capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
                    <view class="upload-item upload-icon flex_base">
@@ -38,28 +39,34 @@


        <button class="submit-btn" @click="sumitInfo">提交</button>
        <button class="list-btn" @click="navigatorPage">我上报的事件</button>

    </view>
</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    import {
        save
    } from "@/api/task/taskReportForRepairs";
    export default {
        mixins: [uploadMixin],
        data() {
            return {
                info: {
                    title: "",
                    content: ""
                    realName: "",
                    phone: "",
                    remark: "",
                    type: -1,
                },
                rules: {
                    'title': {
                    'realName': {
                        type: 'string',
                        required: true,
                        message: '请输入姓名',
                        trigger: ['blur', 'change']
                    },
                    'content': {
                    'phone': {
                        type: 'string',
                        required: true,
                        message: '请输入手机号',
@@ -67,12 +74,43 @@
                    },
                },
                desc: "",
                images: []
                title: "",
            }
        },
        onLoad(option) {
            this.title = option.title
            uni.setNavigationBarTitle({
                title: this.title
            })
            this.info.type = option.type
        },
        methods: {
            sumitInfo() {

                const that = this
                this.$refs.form.validate().then(valid => {
                    if (this.form.images.length > 0) {
                        let urls = []
                        this.form.images.forEach(e => {
                            urls.push(e.name)
                        })
                        this.info.imageUrls = urls.join(",")
                    }
                    save(that.info).then(res => {
                        uni.showToast({
                            icon: 'success',
                            title: '提交成功',
                            success() {
                                setTimeout(() => {
                                    that.$u.func.globalNavigator("", "navBack")
                                }, 1000)
                            }
                        })
                    })
                })
            },
            navigatorPage() {
                let url = "/subPackage/bs/views/repairList" + "?title=" + this.title + "&type=" + this.info.type
                this.$u.func.globalNavigator(url, "navTo")
            }
        }
    }
@@ -113,7 +151,7 @@
        margin: 0 30rpx;
        padding: 30rpx;

		

    }

    .submit-btn {
@@ -126,4 +164,15 @@
        color: #fff;
        margin-top: 50rpx;
    }

    .list-btn {
        width: 690rpx;
        height: 78rpx;
        line-height: 78rpx;
        background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 32rpx;
        color: #fff;
        margin-top: 50rpx;
    }
</style>

 subPackage/bs/views/repair.vue

@@ -1,194 +1,244 @@
<template>
    <view class="">
        <u-navbar height="48" :autoBack="true"  safeAreaInsetTop placeholder  bgColor="transparent"  leftIconColor="#fff">
        <u-navbar height="48" :autoBack="true" safeAreaInsetTop placeholder bgColor="transparent" leftIconColor="#fff">
        </u-navbar>
        <view class="top">
            <image class="top-img" src="/static/img/repair-bg.png" mode="aspectFill"></image>
        </view>
		

        <view class="container">
            <view class="c-ff f-36">请选择您需要的服务</view>
            <view class="serve-box bgc-ff mb-20 flex j-c-s-b a-i-c">
                <view class="flex a-i-c">
                    <u-icon name="/static/icon/nav-09.png"  width="91rpx"  height="70rpx"></u-icon>
                    <u-icon name="/static/icon/nav-09.png" width="91rpx" height="70rpx"></u-icon>
                    <view class="flex f-d-c ml-40">
                        <text class="f-36">总申请</text>
                        <view class="flex a-i-c">
                            <text class="f-48 c-blue fw mr-6">50</text>
                            <text class="f-48 c-blue fw mr-6">{{statistic.total}}</text>
                            <text class="f-24 c-99">件</text>
                        </view>
                    </view>
                </view>
                <view class="flex a-i-c">
                    <u-icon name="/static/icon/nav-10.png"  width="91rpx"  height="70rpx"></u-icon>
                    <u-icon name="/static/icon/nav-10.png" width="91rpx" height="70rpx"></u-icon>
                    <view class="flex f-d-c ml-40">
                        <text class="f-36">已处理</text>
                        <view class="flex a-i-c">
                            <text class="f-48 c-green fw mr-6">50</text>
                            <text class="f-48 c-green fw mr-6">{{statistic.handle}}</text>
                            <text class="f-24 c-99">件</text>
                        </view>
                    </view>
                </view>
            </view>
			

            <view class="site-box bgc-ff flex">
                <view class="flex a-i-c">
                    <u-icon name="map-fill" color="#AAAAAA"></u-icon>
                    <text class="f-28 c-aa ml-20">当前小区：</text>
                </view>
				

                <text class="address f-28">万达华府26栋1903室 万达华府26栋1903室</text>
            </view>
			

            <view class="nav flex flex-wrap j-c-s-b">
				
                <view class="nav-item"  v-for="(i,k) in navList"  :key="k"   @click="navTo(i.path)">

                <view class="nav-item" v-for="(i,k) in navList" :key="k" @click="navTo(i)">
                    <image class="nav-item-bg" :src="i.bgImg" mode="aspectFill"></image>
                    <view class="nav-item-inner flex f-d-c">
                        <text class="f-32 mb-30">{{i.title}}</text>
                        <button class="item-btn"   :style="{backgroundColor:i.background}"  >立即上报</button>
                        <button class="item-btn" :style="{backgroundColor:i.background}">立即上报</button>
                    </view>
                </view>
				
				


            </view>
        </view>
		

    </view>
	

</template>

<script>
    import {
        getStatistics
    } from '@/api/task/taskReportForRepairs'
    export default {
        data(){
        data() {
            return {
                navList:[
                    {
                        title:"公共维修",
                        bgImg:"/static/icon/nav-bg-06.png",
                        path:"addRepair",
                        background:"#63C875"
                statistic: {
                    total: 0,
                    handle: 0,
                },
                navList: [{
                        title: "公共维修",
                        type: 1,
                        bgImg: "/static/icon/nav-bg-06.png",
                        path: "addRepair",
                        background: "#63C875"
                    },
                    {
                        title:"居家维修",
                        bgImg:"/static/icon/nav-bg-07.png",
                        path:"",
                        background:"#4D98E2"
                        title: "居家维修",
                        type: 2,
                        bgImg: "/static/icon/nav-bg-07.png",
                        path: "addRepair",
                        background: "#4D98E2"
                    },
                    {
                        title:"矛盾纠纷",
                        bgImg:"/static/icon/nav-bg-08.png",
                        path:"",
                        background:"#EC7E51"
                        title: "矛盾纠纷",
                        type: 3,
                        bgImg: "/static/icon/nav-bg-08.png",
                        path: "addRepair",
                        background: "#EC7E51"
                    },
                    {
                        title:"投诉举报",
                        bgImg:"/static/icon/nav-bg-09.png",
                        path:"",
                        background:"#F4B862"
                        title: "投诉举报",
                        type: 4,
                        bgImg: "/static/icon/nav-bg-09.png",
                        path: "addRepair",
                        background: "#F4B862"
                    },
					
                    {
                        title: "企业商户上报",
                        type: 5,
                        bgImg: "/static/icon/nav-bg-09.png",
                        path: "addRepair",
                        background: "#F4B862"
                    },

                ]
            }
        },
        methods:{
            navTo(path){
                if(path){
                    this.$u.func.globalNavigator(path, "navTo")
        computed: {

        },
        onShow() {
            this.getStatistics()
        },

        methods: {
            navTo(item) {
                if (item.path) {
                    let url = item.path + "?title=" + item.title + "&type=" + item.type
                    this.$u.func.globalNavigator(url, "navTo")
                }
				
            },

            getStatistics() {
                getStatistics().then(res => {
                    this.statistic = res.data
                })
            }


        }
    }
</script>

<style lang="scss">
    page{
        width:100%;
        height:100%;
    page {
        width: 100%;
        height: 100%;
    }
    .top{
        width:100%;
        height:659rpx;
        background: linear-gradient(180deg, #017BFC 0%, rgba(1,123,252,0) 100%);

    .top {
        width: 100%;
        height: 659rpx;
        background: linear-gradient(180deg, #017BFC 0%, rgba(1, 123, 252, 0) 100%);
        position: fixed;
        top:0;
        left:0;
        .top-img{
            width:100%;
            height:659rpx;
        top: 0;
        left: 0;

        .top-img {
            width: 100%;
            height: 659rpx;
        }
    }
    .container{
        width:100%;

    .container {
        width: 100%;
        padding: 0 30rpx;
        position: fixed;
        box-sizing: border-box;
        top:130rpx;
        left:0;
        top: 130rpx;
        left: 0;
        z-index: 100;
        .serve-box{
            width:100%;
            height:213rpx;

        .serve-box {
            width: 100%;
            height: 213rpx;
            border-radius: 8rpx;
            margin-top:30rpx;
            margin-top: 30rpx;
            padding: 0 60rpx 0 40rpx;
            box-sizing: border-box;
        }
        .f-48{
            font-size:48rpx;

        .f-48 {
            font-size: 48rpx;
        }
        .c-blue{
            color:#677CF8;
			

        .c-blue {
            color: #677CF8;

        }
        .c-green{
            color:#30D17C;

        .c-green {
            color: #30D17C;
        }
        .ml-40{
            margin-left:40rpx;

        .ml-40 {
            margin-left: 40rpx;
        }
        .site-box{
            width:100%;
            padding:30rpx;

        .site-box {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            border-radius: 4rpx;
            .c-aa{
                color:#aaa;

            .c-aa {
                color: #aaa;
            }
            .address{
                width:60%;
                margin-left:25rpx;

            .address {
                width: 60%;
                margin-left: 25rpx;
            }
        }
        .nav{
            width:100%;
            .nav-item,.nav-item-bg,.nav-item-inner{
                width:330rpx;
                height:167rpx;

        .nav {
            width: 100%;

            .nav-item,
            .nav-item-bg,
            .nav-item-inner {
                width: 330rpx;
                height: 167rpx;
            }
            .nav-item{

            .nav-item {
                position: relative;
                margin-top:30rpx;
                margin-top: 30rpx;
            }
            .nav-item-inner{
                padding:30rpx 30rpx 0;

            .nav-item-inner {
                padding: 30rpx 30rpx 0;
                position: absolute;
                top:0;
                left:0;
				
                top: 0;
                left: 0;

            }
            .item-btn{
                width:125rpx;
                height:42rpx;

            .item-btn {
                width: 125rpx;
                height: 42rpx;
                line-height: 42rpx;
                border-radius: 20rpx;
                color:#fff;
                font-size:22rpx;
                padding:0;
                margin:0;
                color: #fff;
                font-size: 22rpx;
                padding: 0;
                margin: 0;
            }
        }
		

    }
</style>

 subPackage/bs/views/repairList.vue

New file
@@ -0,0 +1,137 @@
<template>
    <view class="container">
        <view v-if="dataList.length>0" class="list">
            <view class="item" v-for="(item,index) in dataList" :key="item.id">
                <view class="line">
                    <view class="label">上报时间</view>
                    <view class="value">{{item.createTime}}</view>
                </view>

                <view class="line">
                    <view class="label">上报状态</view>
                    <view class="value">{{formatStatus(item.status)}}</view>
                </view>

                <view class="line">
                    <view class="label">问题描述</view>
                    <view class="value">{{item.remark}}</view>
                </view>
            </view>
        </view>

        <view v-else>
            <u-empty marginTop="50%" mode="list"></u-empty>
        </view>

        <u-loading-page :loading="loadingPage"></u-loading-page>
        <u-loading-icon :show="loadingIcon"></u-loading-icon>
    </view>
</template>

<script>
    import {
        getPage
    } from '@/api/task/taskReportForRepairs'
    export default {
        data() {
            return {
                dataList: [],
                page: {
                    current: 1,
                    size: 10
                },
                loadingPage: false,
                loadingIcon: false,
                query: {
                    createUser: uni.getStorageSync("userInfo").user_id,
                    type: "",
                },
            }
        },
        computed: {
            formatStatus() {
                return (val => {
                    if (val == 1) {
                        return "待处理"
                    } else if (val == 10) {
                        return "已处理"
                    }
                })
            }
        },
        created() {

        },
        mounted() {

        },
        onLoad(option) {
            uni.setNavigationBarTitle({
                title: option.title
            })
            this.query.type = option.type
            this.getList()
        },
        onShow() {

        },
        onReachBottom() {
            this.page.current += 1
            this.getList()
        },
        methods: {
            getList() {

                this.page.current == 1 ? this.loadingPage = true : this.loadingIcon = true

                console.log(this.userInfo)
                let param = {}

                getPage(Object.assign(param, this.query, this.page)).then(res => {
                    let data = res.data.records
                    this.dataList = this.dataList.concat(data)
                    this.page.current == 1 ? this.loadingPage = false : this.loadingIcon = false
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

    .container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #F9F9FA;

        .list {

            .item {
                background-color: #ffffff;
                padding: 40rpx 20rpx;
                margin-top: 20rpx;

                .line {
                    display: flex;
                    font-size: 28rpx;
                    padding: 6rpx;

                    .label {
                        color: #a4a4a4;
                        width: 25%;
                    }

                    .value {}
                }
            }

        }
    }
</style>