Skip to content

W
web
Commit 5e80c73f authored by 高滢's avatar 高滢
Browse files
Options

feat(任务处理): 检查表单

parent 51eb67f5
Hide whitespace changes
Inline Side-by-side
Showing with 358 additions and 11 deletions
src/views/processing/review-form/index.vue 0 → 100644
View file @ 5e80c73f
<template>
<!--查看检查表单-->
<div>
<page-standard>
<div>
<!--1-抬头标题-->
<div class="title-style">
<div class="title-content-style">
查看检查表单(所属任务: 广汽丰田体系审查)
</div>
<div class="title-content-style">
<a href="/processing/unprocessed-review">返回</a>
</div>
</div>
<!--2-统计值-->
<div class="main-content-style">
<!--任务编号,名称,单位-->
<el-form label-width="6.25rem" class="task">
<el-row :gutter="60">
<el-col :span="8">
<el-form-item label="任务编号:">
<span>IATF17889</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="任务名称:">
<span>iso三体系审核</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="委托单位:">
<span>广汽丰田有限公司</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!--审查问卷概要-->
<div class="form-review-questionnaire">
<table class="table" style="width: 100%">
<thead>
<tr>
<th>标准章节</th>
<th>标准要求</th>
<th>审查要点</th>
<th>审查细则</th>
<th>符合场景</th>
<th>审查结果</th>
<th :colspan="2">记录</th>
<th>填写人</th>
</tr>
</thead>
<tbody>
<!-- 循环遍历 arr -->
<template v-for="(item, index) in questionnaireSummary">
<tr :key="index">
<td :rowspan="getRows2(item)">
{{ item.chapter }}
</td>
<td :rowspan="getRows2(item)">
{{ item.text }}
</td>
</tr>
<!-- 循环遍历 keyPointList -->
<template v-for="(i, keyPointIndex) in item.keyPointList">
<tr :key="keyPointIndex">
<td :rowspan="getRows(i)">{{ i.text }}</td>
</tr>
<!-- 循环遍历 reviewDetailsList -->
<template
v-for="(v, reviewDetailIndex) in i.reviewDetailsList"
>
<tr :key="reviewDetailIndex">
<td>
{{ v.id}}
</td>
<td>{{ v.text }}</td>
<td>{{v.text }}</td>
<td>{{v.text}}</td>
<td>{{v.text}}</td>
<td>{{v.text}}</td>
</tr>
</template>
</template>
</template>
</tbody>
</table>
</div>
<!--返回按钮-->
<el-button
class="btn"
type="primary"
plain
@click="goToProcessedReview"
>返 回
</el-button>
</div>
</div>
</page-standard>
</div>
</template>
<!--js逻辑-->
<script>
export default {
data() {
return {
questionnaireSummary: [
{
id: 1734848009319092224,
chapter: '5.1',
text: '标准要求-车辆制造商应具备车辆全生命周期的汽车信息安全管理体系。注：车辆全生命周期包括车辆的开发阶段、生产阶段及后生产阶段。',
keyPointList: [
{
id: 1734848013714722816,
text: '车辆制造商汽车信息安全管理制度是否明确与其它管理流程（如QMS、ISMS）的适配性。',
reviewStandardId: 1734848011609182208,
reviewDetailsList: [
{
id: 1734848013714722817,
text: '车辆制造商应提供信息安全管理制度在建设实施中与企业其他管理流程相适配的证明材料。',
reviewKeypointId: 1734848013714722816
},
{
id: 1734848013714722817,
text: '车辆制造商应提供信息安全管理制度在建设实施中与企业其他管理流程相适配的证明材料。',
reviewKeypointId: 1734848013714722816
}
]
}
]
},
{
id: 1734848011609182208,
chapter: '5.2',
text: '汽车信息安全管理体系应包括以下内容。建立企业内部管理汽车信息安全的过程。',
keyPointList: [
{
id: 1734848011609182209,
text: '车辆制造商汽车信息安全管理制度是否建立并明确汽车信息安全管理制度的组织架构及权责。',
reviewStandardId: 1734848011609182208,
reviewDetailsList: [
{
id: 1734848011609182210,
text: '车辆制造商汽车信息安全管理制度的角色应覆盖车辆/车辆产品在生命周期中的信息安全活动。',
reviewKeypointId: 1734848011609182209
},
{
id: 1734848012057972736,
text: '车辆制造商汽车信息安全管理制度的角色应与车辆制造商的组织架构匹配。',
reviewKeypointId: 1734848011609182209
}
]
},
]
}
],
ruleForm: {
enterpriseLeader: '',
inspectionLeader: ''
},
rules: {
enterpriseLeader: [
{ required: true, message: '请输入车企负责人', trigger: 'blur' }
],
inspectionLeader: [
{ required: true, message: '请输入检验负责人', trigger: 'blur' }
]
}
}
},
created() {
},
methods: {
getRows(i) {
let n = 0
if (i.reviewDetailsList) {
n = i.reviewDetailsList.length
}
return n+1
},
getRows2(item) {
let n = 0
if (item.keyPointList) {
n = item.keyPointList.length
}
item.keyPointList.map(i => {
n += i.reviewDetailsList.length
})
return n+1
},
/* 返回跳转*/
goToProcessedReview() {
this.$router.push('/processing/unprocessed-review')
}
}
}
</script>
<!--样式-->
<style scoped lang="scss">
/* 标题样式 */
.title-style {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 2rem;
width: 100%;
height: 3.5rem;
background-color: #f9f9f9;
}
/* 标题文字样式 */
.title-content-style {
margin-left: 1.5rem;
font-size: 1rem;
font-weight: bold;
color: #666666;
}
::v-deep .el-card__body {
padding: unset !important;
}
/* 主体内容布局 */
.main-content-style {
display: flex;
flex-direction: column;
width: 100%;
.btn {
margin: 0 8rem 8rem 4rem;
width: 5rem;
}
.main-statistics{
display: flex;
margin: 0 65px;
justify-content: space-between;
.statistics-card{
width: 320px;
height: 120px;
background: #5ad8a6;
border-radius: 10px;
display: flex;
justify-content: space-between;
padding: 30px;
.card-left{
color: #f3f3f3;
font-size: 20px;
font-weight: bold;
}
.card-right{
::v-deep.iconfont {
font-size: 50px;
}
}
}
}
}
.form-custom{
margin-top:3rem ;
}
/* 任务编号,名称,单位样式 */
.task {
padding: 3rem 0 1rem 6rem;
::v-deep .el-form-item--medium .el-form-item__label {
font-size: 1.25rem;
font-weight: bold;
color: #999999;
}
::v-deep .el-form-item--medium .el-form-item__content {
font-size: 1.25rem;
color: #767676;
}
}
::v-deep .el-col-8 {
margin-right: 13rem;
margin-left: unset !important;
padding-left: unset !important;
width: unset !important;
}
/* 审查文件表格样式(最外层) */
.form-review-questionnaire {
padding: 2.5rem 4rem 1rem;
width: 100%;
height: max-content;
.title-display {
display: flex;
justify-content: flex-start;
align-items: center;
.title-i {
margin-right: 1rem;
width: 0.625rem;
height: 1.625rem;
background-color: #409eff;
}
.title-content {
font-size: 1rem;
font-weight: bold;
color: #409eff;
}
}
::v-deep .el-table--border {
width: unset !important;
}
.table{
th{
text-align: center;
}
}
}
/* 表格样式 */
table {
margin-top: 20px;
border-collapse: collapse;
width: 100%;
}
/* 表格样式 */
thead {
background-color: #e7e6e6;
}
/* 表格样式 */
th,
td {
padding: 8px;
width: 300px;
height: 100%;
border: 1px solid black;
text-align: left;
}
</style>
src/views/processing/review-questionnaire/index.vue
View file @ 5e80c73f
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<!--1-抬头标题--> <!--1-抬头标题-->
<div class="title-style"> <div class="title-style">
<div class="title-content-style"> <div class="title-content-style">
查看审查问卷(所属任务: 广汽丰田体系审查) 查看审查记录(所属任务: 广汽丰田体系审查)
</div> </div>
<div class="title-content-style"> <div class="title-content-style">
<a href="/processing/processed-review">返回</a> <a href="/processing/processed-review">返回</a>
...@@ -36,40 +36,52 @@ ...@@ -36,40 +36,52 @@
</el-form> </el-form>
<div class="main-statistics"> <div class="main-statistics">
<div class="statistics-card"> <div class="statistics-card" style="background-color: #5ad8a6">
<div class="card-left"> <div class="card-left">
<div>90</div> <div>90</div>
<div>审查通过率</div> <div>审查通过率</div>
</div> </div>
<div class="card-right"> <div class="card-right">
<i class="iconfont icon-tongguo"></i> <img
class="img"
src="@/assets/images/questionnaire/tongguolv.png"
/>
</div> </div>
</div> </div>
<div class="statistics-card"> <div class="statistics-card" style="background-color: #ff99c3">
<div class="card-left"> <div class="card-left">
<div>90</div> <div>90</div>
<div>审查失败率</div> <div>审查失败率</div>
</div> </div>
<div class="card-right"> <div class="card-right">
<i class="iconfont icon-shuaka"></i> <img
class="img"
src="@/assets/images/questionnaire/shibailv.png"
/>
</div> </div>
</div> </div>
<div class="statistics-card"> <div class="statistics-card" style="background-color: #6dc8ec">
<div class="card-left"> <div class="card-left">
<div>90</div> <div>90</div>
<div>审查细则数</div> <div>审查细则数</div>
</div> </div>
<div class="card-right"> <div class="card-right">
<i class="iconfont icon-24gl-box2"></i> <img
class="img"
src="@/assets/images/questionnaire/xizeshu.png"
/>
</div> </div>
</div> </div>
<div class="statistics-card"> <div class="statistics-card" style="background-color: #5b8ff9">
<div class="card-left"> <div class="card-left">
<div>90</div> <div>90</div>
<div>参与审查人数</div> <div>参与审查人数</div>
</div> </div>
<div class="card-right"> <div class="card-right">
<i class="iconfont icon-icon_new_group"></i> <img
class="img"
src="@/assets/images/questionnaire/shencharenshu.png"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -314,8 +326,10 @@ export default { ...@@ -314,8 +326,10 @@ export default {
font-weight: bold; font-weight: bold;
} }
.card-right{ .card-right{
::v-deep.iconfont { /*图片*/
font-size: 50px; .img {
width: 3rem;
height: 3.625rem;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment