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>
|