|
@@ -1,228 +1,96 @@
|
|
|
<template>
|
|
|
<div class="repair-record-box">
|
|
|
<ul class="custom-list-box">
|
|
|
- <li
|
|
|
- class="record-item white-box"
|
|
|
- v-for="item in recordList"
|
|
|
- :key="item.id"
|
|
|
- @click="
|
|
|
- $router.push({
|
|
|
- path: '/repairDetail',
|
|
|
- query: {
|
|
|
- id: item.id,
|
|
|
- },
|
|
|
- })
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="item-head custom-status-box">
|
|
|
- <p class="company">{{ item.companyName }}</p>
|
|
|
- <div :class="['status-btn', setStatusStyle(item.status)]">
|
|
|
- {{ item.statusName }}
|
|
|
+ <li class="customLi" v-for="item in recordList">
|
|
|
+ <div class="firstRow">
|
|
|
+ <span class="rowTitle">{{ item.title }}</span>
|
|
|
+ <span class="rowTags" :class="item.tag==='已处理'?'yclTags':item.tag==='暂存'?'zcTags':''">{{item.tag}}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="item-content">
|
|
|
- <div class="img-box" style="width: 40%">
|
|
|
- <img :src="item.fileUrl != null ? item.fileUrl[0] : ''" alt="" />
|
|
|
+ <div class="secondRow">
|
|
|
+ <img src="https://www.idea-co-sf.com/gardenProduct/image/componeyIcon.png" class="componeyIcon">
|
|
|
+ 无锡 XXXX有限公司
|
|
|
</div>
|
|
|
- <div class="content-box" style="width: 55%">
|
|
|
- {{ item.description }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item-foot">
|
|
|
- <p class="time">
|
|
|
- <i class="iconfont icon-shijian"></i>{{ item.createdAt }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ <div class="lastRow">上报时间:2021/1/21 13:00</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { list } from '@/service/api_repair'
|
|
|
-import Base from '@/pages/base/base'
|
|
|
-import auth from '@/service/auth'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dc_key: ['REPAIR_STATUS'],
|
|
|
- recordList: [],
|
|
|
- params: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- createdBy: auth.currUser().id
|
|
|
- },
|
|
|
- totalPage: 1,
|
|
|
- allData: []
|
|
|
- }
|
|
|
- },
|
|
|
- mixins: [Base],
|
|
|
- created() {
|
|
|
- this.initDict(this.dc_key).then((res) => {
|
|
|
- this.selectData()
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // auth.currUser().id
|
|
|
- selectData() {
|
|
|
- const _this = this
|
|
|
- list(this.params).then((res) => {
|
|
|
- if (res.data) {
|
|
|
- res.data.forEach(function(item) {
|
|
|
- const jsonMap = _this.getItemJson(item)
|
|
|
- _this.recordList.push(jsonMap)
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getItemJson: function(item) {
|
|
|
- item.companyId = '固定公司名'
|
|
|
- const fileUrls = this.$common.castEval(item.fileUrl)
|
|
|
- const fileUrl = []
|
|
|
- fileUrls.forEach((item) => {
|
|
|
- item = item.replace('/server', '/smartParkH5Server')
|
|
|
- fileUrl.push(item)
|
|
|
- })
|
|
|
- item.fileUrl = fileUrl
|
|
|
- item.createdAt = this.$common.transServDate(item.createdAt)
|
|
|
- item.statusName = this.dc_map.REPAIR_STATUS[item.status]
|
|
|
- return item
|
|
|
- },
|
|
|
- /**
|
|
|
- *
|
|
|
- */
|
|
|
- quickSelect(item) {
|
|
|
- if (this.quickSleced.val && this.quickSleced.val === item.val) {
|
|
|
- this.quickSleced = {}
|
|
|
- } else {
|
|
|
- this.quickSleced = item
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 上传文件
|
|
|
- */
|
|
|
- afterRead(file) {
|
|
|
- console.log(file)
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置状态样式
|
|
|
- */
|
|
|
- setStatusStyle(status) {
|
|
|
- let statusClass = null
|
|
|
- switch (status) {
|
|
|
- case 'unAcceptance':
|
|
|
- statusClass = 'pending-btn'
|
|
|
- break
|
|
|
- case 'acceptance':
|
|
|
- statusClass = 'accepted-btn'
|
|
|
- break
|
|
|
- case 'processed':
|
|
|
- statusClass = 'processed-btn'
|
|
|
- break
|
|
|
- case 'evaluated':
|
|
|
- statusClass = 'evaluated-btn'
|
|
|
- break
|
|
|
- }
|
|
|
- return statusClass
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 过滤器
|
|
|
- */
|
|
|
- filters: {
|
|
|
- /**
|
|
|
- * 状态:0、待受理 1、已受理 2、已处理 3、已评价
|
|
|
- */
|
|
|
- statusFilter(val) {
|
|
|
- let res = null
|
|
|
- switch (val) {
|
|
|
- case 'unAcceptance':
|
|
|
- res = '待处理'
|
|
|
- break
|
|
|
- case 'acceptance':
|
|
|
- res = '已受理'
|
|
|
- break
|
|
|
- case 'processed':
|
|
|
- res = '已处理'
|
|
|
- break
|
|
|
- case 'evaluated':
|
|
|
- res = '已评价'
|
|
|
- break
|
|
|
- }
|
|
|
- return res
|
|
|
- }
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ recordList:[
|
|
|
+ {title:'上月水费不太对,怀疑水表异常',tag:'已受理'},
|
|
|
+ {title:'空调坏了,不能使用',tag:'已受理'},
|
|
|
+ {title:'办公室灯泡坏了2个',tag:'已处理'},
|
|
|
+ {title:'厕所水龙头坏了,不出水',tag:'暂存'},
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.repair-record-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- // .record-list {
|
|
|
- // .item-head,
|
|
|
- // .item-content {
|
|
|
- // position: relative;
|
|
|
- // padding: 25px 0;
|
|
|
-
|
|
|
- // &::after {
|
|
|
- // position: absolute;
|
|
|
- // box-sizing: border-box;
|
|
|
- // content: " ";
|
|
|
- // pointer-events: none;
|
|
|
- // right: 16px;
|
|
|
- // bottom: 0;
|
|
|
- // left: 16px;
|
|
|
- // border-bottom: 1px solid #ebedf0;
|
|
|
- // -webkit-transform: scaleY(0.5);
|
|
|
- // transform: scaleY(0.5);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .item-foot {
|
|
|
- // padding: 25px 0;
|
|
|
- // color: $text5;
|
|
|
- // i {
|
|
|
- // font-size: 28px;
|
|
|
- // margin-right: 10px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .item-head {
|
|
|
- // display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- // align-items: center;
|
|
|
- // color: $color4;
|
|
|
- // }
|
|
|
- // .item-content {
|
|
|
- // display: flex;
|
|
|
- // .img-box {
|
|
|
- // width: 400px;
|
|
|
- // height: 160px;
|
|
|
- // border-radius: 10px;
|
|
|
- // overflow: hidden;
|
|
|
- // position: relative;
|
|
|
- // > img {
|
|
|
- // width: 100%;
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- // left: 0;
|
|
|
- // right: 0;
|
|
|
- // bottom: 0;
|
|
|
- // margin: auto;
|
|
|
- // display: block;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .content-box {
|
|
|
- // padding-left: 30px;
|
|
|
- // box-sizing: border-box;
|
|
|
- // line-height: 1.5;
|
|
|
- // text-overflow: -o-ellipsis-lastline;
|
|
|
- // overflow: hidden;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- // display: -webkit-box;
|
|
|
- // -webkit-line-clamp: 3;
|
|
|
- // line-clamp: 3;
|
|
|
- // -webkit-box-orient: vertical;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
+ .custom-list-box{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .customLi{
|
|
|
+ background: white;
|
|
|
+ width: 686rpx;
|
|
|
+ height: 224rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .componeyIcon{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 5rpx;
|
|
|
+ }
|
|
|
+ .firstRow{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12rpx 32rpx;
|
|
|
+ .rowTitle{
|
|
|
+ color:#222222;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .rowTags{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #0365F9;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 112rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: rgba(3, 101, 249, 0.20);
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ .yclTags{
|
|
|
+ color: rgba(34, 181, 101, 1);
|
|
|
+ background: rgba(34, 181, 101, 0.20);
|
|
|
+ }
|
|
|
+ .zcTags{
|
|
|
+ color: rgba(255, 107, 24, 1);
|
|
|
+ background: rgba(254, 134, 67, 0.20);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .secondRow{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding:0 32rpx 24rpx 32rpx;
|
|
|
+ border-bottom: 2rpx solid rgba(230, 230, 230, 1);
|
|
|
+ }
|
|
|
+ .lastRow{
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|