461 lines
11 KiB
Vue
461 lines
11 KiB
Vue
<template>
|
||
<page-meta :page-font-size="$store.state.vuex_fontsize+'px'" :root-font-size="$store.state.vuex_fontsize+'px'"></page-meta>
|
||
<view class="con">
|
||
<view class="top-box">
|
||
<view class="top-title-box">{{detail.projectName}}</view>
|
||
<view class="subtitle-box">
|
||
<view class="subtitle1">{{detail.handbookName}}</view>
|
||
<view :class="detail.type==0?'subtitle2':'subtitle2-2'">{{detail.type==0?'现场履职':'班组履职'}}</view>
|
||
</view>
|
||
<view class="people-box">
|
||
<view class="people1">履职人：{{detail.nickName}}</view>
|
||
<view class="time">{{detail.createTime?detail.createTime.substr(0,16):''}}</view>
|
||
</view>
|
||
<view class="people-box">
|
||
<view v-if='detail.otherUserName' class="people2">同行人：{{detail.otherUserName}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="title-box" v-if="isOther==false&&detail!=''">{{detail.children[classIndex].name}}</view>
|
||
<view class="title-box" v-if="isOther">其他情况</view>
|
||
<view class="content-problem" v-if="isOther==false">
|
||
<view class="content-box" v-if="detail!=''">
|
||
<view class="content-name">
|
||
{{(1+parseInt(classIndex2))+'. '+detail.children[classIndex].children[classIndex2].name}}
|
||
</view>
|
||
<view class="content-content">
|
||
{{detail.children[classIndex].children[classIndex2].content}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-problem">
|
||
|
||
<view class="problem-box">
|
||
<view class="problem-top-box">
|
||
<view class="problem-title">发现问题</view>
|
||
<!-- <view class="jc-one-btns">
|
||
<u-icon class="jc-one-icon" size="18" name="checkmark-circle" color="rgb(96, 98, 102)"></u-icon>
|
||
<u-icon class="jc-one-icon" size="18" name="warning-fill" color="#F56C6C"
|
||
style="margin-left:50%">
|
||
</u-icon>
|
||
</view> -->
|
||
<view class="copy-box" @click="gotoCopy">复制</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-problem" v-for="(itemForm,index) in form" :key="index">
|
||
<view class="problem-box">
|
||
|
||
<!-- <view class="wwt-box">无问题</view> -->
|
||
<view class="problem-form-box">
|
||
<u--form labelPosition="left" :model="form[index]" :ref="'uForm'+index" :labelStyle="{'fontWeight': 'bold'}">
|
||
<u-form-item label="现场情况:" prop="remark" borderBottom labelWidth="70">
|
||
<text class="txt">{{form[index].remark}}</text>
|
||
</u-form-item>
|
||
<u-form-item v-if="isShow()" label="责任人:" prop="responsiblePerson" borderBottom labelWidth="70">
|
||
<text class="txt">{{form[index].responsiblePerson}}</text>
|
||
</u-form-item>
|
||
<u-form-item label="照片:" prop="photo" labelWidth="70">
|
||
<u-album :singleSize="70" :urls="getimg(form[index].img)"></u-album>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
<view class="problem-box" v-if="form[index].zgType==1">
|
||
<view class="problem-form-box">
|
||
<u--form labelPosition="left" :model="form[index]" :ref="'uForm'+index" :labelStyle="{'fontWeight': 'bold'}">
|
||
<u-form-item label="整改描述:" prop="remark" borderBottom labelWidth="70">
|
||
<text class="txt">{{form[index].zgRemark}}</text>
|
||
</u-form-item>
|
||
<!-- <u-form-item v-if="isShow()" label="责任人:" prop="responsiblePerson" borderBottom labelWidth="70">
|
||
<text class="txt">{{form[index].responsiblePerson}}</text>
|
||
</u-form-item> -->
|
||
<u-form-item label="照片:" prop="photo" labelWidth="70">
|
||
<u-album :singleSize="70" :urls="getimg(form[index].zgImg)"></u-album>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- 复制弹出框 -->
|
||
<view>
|
||
<u-modal :show="copyShow" title="履职内容" confirmText="复制" cancelText="取消" :showCancelButton='true'
|
||
@cancel="copyCancel" @confirm="copyConfirm" confirmColor="#24BD8E">
|
||
<view class="slot-content">
|
||
<rich-text :nodes="content"></rich-text>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
baseUrl
|
||
} from '../../config.js'
|
||
import {
|
||
getRecordInfo,
|
||
getRecordProblem
|
||
} from '@/api/handbook.js'
|
||
import auth from "@/plugins/auth.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: "",
|
||
detail: {},
|
||
classIndex: "",
|
||
classIndex2: "",
|
||
form: {},
|
||
copyShow: false,
|
||
content: ``,
|
||
isOther: false,
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id;
|
||
if (option.isOther == 1) {
|
||
this.isOther = true;
|
||
}
|
||
|
||
this.classIndex = option.classIndex;
|
||
this.classIndex2 = option.classIndex2;
|
||
this.getRecordInfo(option.id);
|
||
},
|
||
methods: {
|
||
isShow() {
|
||
console.log(auth.hasPermi('system:config:showResponsiblePerson'));
|
||
return auth.hasPermi('system:config:showResponsiblePerson');
|
||
},
|
||
getRecordInfo(id) {
|
||
getRecordInfo(id).then(res => {
|
||
this.detail = res.data;
|
||
|
||
if (this.isOther) {
|
||
this.getRecordProblem(this.detail.id, 1);
|
||
} else {
|
||
let indexId = this.detail.children[this.classIndex].children[this.classIndex2].id;
|
||
this.getRecordProblem(this.detail.id, indexId);
|
||
}
|
||
|
||
})
|
||
},
|
||
getRecordProblem(recordId, indexId) {
|
||
getRecordProblem({
|
||
recordId: recordId,
|
||
indexId: indexId
|
||
}).then(res => {
|
||
this.form = res.data.list;
|
||
|
||
})
|
||
|
||
},
|
||
getimg(jsonStr) {
|
||
let jsonData = jsonStr ? JSON.parse(jsonStr) : [];
|
||
let urls = []
|
||
jsonData.forEach(item => {
|
||
urls.push(baseUrl + item.url);
|
||
})
|
||
return urls
|
||
},
|
||
// 点击复制按钮
|
||
gotoCopy() {
|
||
this.copyShow = true;
|
||
var copyData = [];
|
||
this.form.forEach((e, i) => {
|
||
copyData.push(
|
||
i + 1 + '、' + e.remark + '。'
|
||
)
|
||
})
|
||
this.content =
|
||
`${this.detail.projectName}项目在${this.detail.createTime}${this.detail.type==0?'现场履职':'班组履职'}，发现以下问题：<br>${copyData.join('<br>')}`
|
||
},
|
||
copyCancel() {
|
||
this.copyShow = false;
|
||
},
|
||
copyConfirm() {
|
||
this.copyShow = false;
|
||
this.copyToClipboard(this.content.replace(/<br\s*\/?>/g, "\r"));
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
copyToClipboard(text) {
|
||
try {
|
||
// navigator.clipboard.writeText(text);
|
||
uni.setClipboardData({
|
||
data: text,
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
});
|
||
console.log('内容已复制到剪贴板');
|
||
} catch (err) {
|
||
console.error('复制到剪贴板失败', err);
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.con {
|
||
background-color: #FAFAFA;
|
||
}
|
||
|
||
.top-box {
|
||
font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: white;
|
||
padding: 10px;
|
||
margin: 10px;
|
||
box-shadow: 0px 0px 2px 0px #ccc;
|
||
|
||
.top-title-box {
|
||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
letter-spacing: normal;
|
||
color: #333333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.subtitle-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-family: '微软雅黑', sans-serif;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
letter-spacing: normal;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
|
||
.subtitle2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 60px;
|
||
height: 25px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
background: linear-gradient(180deg, #FEC52B 0%, #FC7833 100%);
|
||
box-shadow: none;
|
||
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.subtitle2-2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 60px;
|
||
height: 25px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
background: linear-gradient(180deg, #2BF3FE 0%, #348BFC 100%);
|
||
box-shadow: none;
|
||
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.people-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-family: '微软雅黑', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
letter-spacing: normal;
|
||
color: #666;
|
||
margin-top: 5px;
|
||
|
||
.time {
|
||
font-size: 13px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-first {
|
||
margin: 10px;
|
||
margin-bottom: 10px;
|
||
height: 71px;
|
||
background-color: white;
|
||
box-shadow: 0px 0px 2px 0px #ccc;
|
||
padding: 0 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 10%;
|
||
}
|
||
|
||
.content {
|
||
width: 70%;
|
||
margin-left: 5px;
|
||
|
||
.title {
|
||
font-size: 17px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 13px;
|
||
color: #666;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 20%;
|
||
font-size: 14px;
|
||
color: #13BC6A;
|
||
font-weight: bold;
|
||
|
||
}
|
||
}
|
||
|
||
.title-box {
|
||
margin: 10px;
|
||
margin-top: 20px;
|
||
overflow: auto;
|
||
display: flex;
|
||
font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 19px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
}
|
||
|
||
.content-problem {
|
||
margin: 10px;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgb(242, 242, 242);
|
||
box-sizing: border-box;
|
||
box-shadow: 0px 0px 2px 0px #ccc;
|
||
background: #ffffff;
|
||
padding: 5px;
|
||
|
||
.content-box {
|
||
.content-name {
|
||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #000000;
|
||
text-align: left;
|
||
line-height: 28px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.content-content {
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(228, 228, 228, 1);
|
||
// border-radius: 16rpx;
|
||
|
||
font-size: 14px;
|
||
color: #333;
|
||
text-align: left;
|
||
line-height: 20px;
|
||
padding: 8px;
|
||
}
|
||
}
|
||
|
||
.problem-box {
|
||
margin: 10px;
|
||
|
||
.problem-top-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.problem-title {
|
||
font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: rgb(217, 0, 27);
|
||
text-align: left;
|
||
line-height: 28px;
|
||
|
||
}
|
||
|
||
.jc-one-btns {
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-left: 50%;
|
||
}
|
||
|
||
.copy-box {
|
||
width: 35px;
|
||
height: 24px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: 'Font Awesome 5 Pro', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 13px;
|
||
letter-spacing: 1px;
|
||
color: #16B988;
|
||
background-color: #E6F4ED;
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: #16B988;
|
||
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.txt {
|
||
color: #333;
|
||
font-size: 14px;
|
||
|
||
}
|
||
|
||
.wwt-box {
|
||
font-family: 'Font Awesome 5 Pro', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
letter-spacing: 1px;
|
||
font-size: 16px;
|
||
color: #19BE6B;
|
||
line-height: 13px;
|
||
text-align: center;
|
||
margin: 20px 0px;
|
||
}
|
||
}
|
||
}
|
||
</style> |