Skip to content

W
web
Commit af280d82 authored by 盖献康's avatar 盖献康
Browse files
Options

feat: 任务处理 - 代办任务 - 填写、确认问卷

parent d45d3b0b
Show whitespace changes
Inline Side-by-side
Showing with 1527 additions and 3 deletions
src/views/processing/confirm-result/index.vue 0 → 100644
View file @ af280d82
<template>
<!--查看审查问卷页面-->
<div>
<page-standard>
<div>
<!--1-抬头标题-->
<div class="title-style">
<div class="title-content-style">
确认审查结果(所属任务: 广汽丰田体系审查)
</div>
<div class="title-content-style">
<el-button type="text" @click="goToProcessedReview">返回</el-button>
</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>
<!--card统计值-->
<el-row
:gutter="60"
style="display: flex; margin-left: 2rem; margin-right: 2rem"
>
<el-col :span="6">
<div
class="card-statistical-style"
style="background-color: #5ad8a6"
>
<span class="content">
<span class="value">80%</span>
<span class="title">审查通过率</span>
</span>
<img
class="img"
src="@/assets/images/questionnaire/tongguolv.png"
/>
</div>
</el-col>
<el-col :span="6">
<div
class="card-statistical-style"
style="background-color: #ff99c3"
>
<span class="content">
<span class="value">20%</span>
<span class="title">审查失败率</span>
</span>
<img
class="img"
src="@/assets/images/questionnaire/shibailv.png"
/>
</div>
</el-col>
<el-col :span="6">
<div
class="card-statistical-style"
style="background-color: #6dc8ec"
>
<span class="content">
<span class="value">100条</span>
<span class="title">审查细则数</span>
</span>
<img
class="img"
src="@/assets/images/questionnaire/xizeshu.png"
/>
</div>
</el-col>
<el-col :span="6">
<div
class="card-statistical-style"
style="background-color: #5b8ff9"
>
<span class="content">
<span class="value">5人</span>
<span class="title">参与审查人数</span>
</span>
<img
class="img"
src="@/assets/images/questionnaire/shencharenshu.png"
/>
</div>
</el-col>
</el-row>
<!--审查问卷概要-->
<div v-if="isShow">
<div class="form-review-questionnaire">
<div class="title-display">
<span class="title-i"></span>
<span class="title-content">审查问卷概要</span>
</div>
<table border="1" style="width: 100%">
<thead>
<tr>
<th>标准章节</th>
<th>标准要求</th>
<th>审查要点</th>
<th>审查细则</th>
<th>符合场景</th>
<th>审查结果</th>
<th>填写人</th>
</tr>
</thead>
<tbody>
<!-- 循环遍历 arr -->
<template v-for="(item, index) in questionnaireSummary">
<tr :key="index">
<td align="center" :rowspan="getRows2(item)">
{{ item.chapter }}
</td>
<td align="center" :rowspan="getRows2(item)">
{{ item.text }}
</td>
</tr>
<!-- 循环遍历 keyPointList -->
<template v-for="(i, PointIndex) in item.keyPointList">
<tr :key="PointIndex">
<td align="center" :rowspan="getRows(i)">
{{ i.text }}
</td>
</tr>
<!-- 循环遍历 reviewDetailsList -->
<template
v-for="(v, reviewDetailIndex) in i.reviewDetailsList"
>
<tr :key="reviewDetailIndex">
<td
align="center"
:rowspan="v.reviewSceneList.length + 1"
>
{{ v.text }}
</td>
</tr>
<!-- 循环遍历 reviewSceneList -->
<template
v-for="(s, reviewSceneIndex) in v.reviewSceneList"
>
<tr :key="reviewSceneIndex">
<td align="center">{{ s.text }}</td>
<td align="center">{{ s.result }}</td>
<td align="center">{{ s.people }}</td>
</tr>
</template>
</template>
</template>
</template>
</tbody>
</table>
</div>
<!--签字确认-->
<div class="form-signature-confirmation">
<div class="title-display">
<span class="title-i"></span>
<span class="title-content">签字确认</span>
</div>
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
class="img-display"
>
<el-form-item prop="enterpriseLeader" label="车企负责人">
<img
class="img"
src="@/assets/images/questionnaire/sign1.png"
/>
</el-form-item>
<el-form-item prop="inspectionLeader" label="检验负责人">
<img
class="img"
src="@/assets/images/questionnaire/sign2.png"
/>
</el-form-item>
</el-form>
</div>
</div>
<div v-else class="form-review-questionnaire">
<div class="title-display">
<span class="title-i"></span>
<span class="title-content">审查问卷概要</span>
<span class="tips">
<i class="el-icon-warning"></i>
审查细则有新增、审查场景有变更，需要修改表格内容，
</span>
<span class="update-tip">去修改</span>
</div>
<div class="update-content">
<i class="el-icon-warning"></i>
<div>表单内容发生变更</div>
<div>审查场景有3条变更，需要修改表单填写内容</div>
<el-button type="primary">去修改表格</el-button>
</div>
</div>
<!--返回按钮-->
<div class="bottom-btn">
<el-button type="warning" @click="goToProcessedReview">
返回
</el-button>
<el-button type="primary" @click="goToProcessedReview">
确认提交
</el-button>
</div>
</div>
</div>
</page-standard>
</div>
</template>
<!--js逻辑-->
<script>
export default {
data() {
return {
isShow: true,
questionnaireSummary: [
{
id: 1734848009319092224,
chapter: '5.1',
text: '标准要求-车辆制造商应具备车辆全生命周期的汽车信息安全管理体系。注：车辆全生命周期包括车辆的开发阶段、生产阶段及后生产阶段。',
keyPointList: [
{
id: 1734848009323286528,
text: '审查要点-车辆制造商是否建立汽车信息安全管理制度。',
reviewStandardId: 1734848009319092224,
reviewDetailsList: [
{
id: 1734848009323286529,
text: '审查细则-车辆制造商是否能够提供/展示汽车信息安全管理制度正式发布的证明材料。',
reviewKeypointId: 1734848009323286528,
reviewSceneList: [
{
id: 1734848009323286530,
text: '符合场景-1.管理制度发布会红头文件',
result: '合格',
people: '小明',
reviewDetailsId: 1734848009323286529
},
{
id: 1734848010472525824,
text: '2.管理制度正式发布会议纪要',
result: '不合格',
people: '小三',
reviewDetailsId: 1734848009323286529
},
{
id: 1734848010719989760,
text: '3.专用系统正式发布流程或记录',
result: '合格',
people: '小明',
reviewDetailsId: 1734848009323286529
}
]
}
]
}
]
},
{
id: 1734848011609182208,
chapter: '5.2',
text: '汽车信息安全管理体系应包括以下内容。建立企业内部管理汽车信息安全的过程。',
keyPointList: [
{
id: 1734848011609182209,
text: '车辆制造商汽车信息安全管理制度是否建立并明确汽车信息安全管理制度的组织架构及权责。',
reviewStandardId: 1734848011609182208,
reviewDetailsList: [
{
id: 1734848011609182210,
text: '车辆制造商汽车信息安全管理制度的角色应覆盖车辆/车辆产品在生命周期中的信息安全活动。',
reviewKeypointId: 1734848011609182209,
reviewSceneList: [
{
id: 1734848011609182211,
text: '1.汽车信息安全管理制度或其配套的流程文件中包含流程图，定义了信息安全活动及对应的角色，并有角色的权责定义。',
reviewDetailsId: 1734848011609182210,
result: '合格',
people: '小明'
}
]
},
{
id: 1734848012057972736,
text: '车辆制造商汽车信息安全管理制度的角色应与车辆制造商的组织架构匹配。',
reviewKeypointId: 1734848011609182209,
reviewSceneList: [
{
id: 1734848012057972737,
text: '1.汽车信息安全管理制度中定义的角色与车辆制造商的组织架构岗位名称一致。',
reviewDetailsId: 1734848012057972736,
result: '合格',
people: '小明'
},
{
id: 1734848012225744896,
text: '2.汽车信息安全管理制度中定义的角色与车辆制造商的组织架构岗位有映射关系。',
reviewDetailsId: 1734848012057972736,
result: '不合格',
people: '小明'
}
]
}
]
},
{
id: 1734848012976525312,
text: '车辆制造商汽车信息安全管理制度是否明确为保障汽车信息安全需求实现和维持所投入的资源。',
reviewStandardId: 1734848011609182208,
reviewDetailsList: [
{
id: 1734848012976525313,
text: '车辆制造商应提供在信息安全方面提供资源支持的证明材料，包括投入的场地、基础软硬件设备、技术人员和资金等。',
reviewKeypointId: 1734848012976525312,
reviewSceneList: [
{
id: 1734848012976525314,
text: '1.典型的资源要求为人力投入，例如负责网络安全风险管理的人员、研发人员和事件管理响应人员。',
reviewDetailsId: 1734848012976525313,
result: '合格',
people: '小明'
}
]
}
]
},
{
id: 1734848013714722816,
text: '车辆制造商汽车信息安全管理制度是否明确与其它管理流程（如QMS、ISMS）的适配性。',
reviewStandardId: 1734848011609182208,
reviewDetailsList: [
{
id: 1734848013714722817,
text: '车辆制造商应提供信息安全管理制度在建设实施中与企业其他管理流程相适配的证明材料。',
reviewKeypointId: 1734848013714722816,
reviewSceneList: [
{
id: 1734848013714722818,
text: '1.明确信息安全管理要求融合到现有管理制度流程中，如在现有ISMS制度中增加汽车信息安全管理要求。',
reviewDetailsId: 1734848013714722817,
result: '合格',
people: '小明'
},
{
id: 1734848013899272192,
text: '2.在信息安全管理制度中明确与其它管理流程的接口。',
reviewDetailsId: 1734848013714722817,
result: '不合格',
people: '小明'
}
]
}
]
}
]
}
],
dataList: [
{
id: 1734848009319092224,
chapter: '5.1',
text: '车辆制造商应具备车辆全生命周期的汽车信息安全管理体系。注：车辆全生命周期包括车辆的开发阶段、生产阶段及后生产阶段。',
keyPointList: [
{
id: 1734848009323286528,
text: '车辆制造商是否建立汽车信息安全管理制度。',
reviewStandardId: 1734848009319092224,
reviewDetailsList: [
{
id: 1734848009323286529,
text: '车辆制造商是否能够提供/展示汽车信息安全管理制度正式发布的证明材料。',
reviewKeypointId: 1734848009323286528,
reviewSceneList: [
{
id: 1734848009323286530,
text: '1.管理制度发布会红头文件',
reviewDetailsId: 1734848009323286529
},
{
id: 1734848010472525824,
text: '2.管理制度正式发布会议纪要',
reviewDetailsId: 1734848009323286529
},
{
id: 1734848010719989760,
text: '3.专用系统正式发布流程或记录',
reviewDetailsId: 1734848009323286529
}
]
}
]
}
]
},
{
id: 1734848011609182208,
chapter: '5.2',
text: '汽车信息安全管理体系应包括以下内容。建立企业内部管理汽车信息安全的过程。',
keyPointList: [
{
id: 1734848011609182209,
text: '车辆制造商汽车信息安全管理制度是否建立并明确汽车信息安全管理制度的组织架构及权责。',
reviewStandardId: 1734848011609182208,
reviewDetailsList: [
{
id: 1734848011609182210,
text: '车辆制造商汽车信息安全管理制度的角色应覆盖车辆/车辆产品在生命周期中的信息安全活动。',
reviewKeypointId: 1734848011609182209,
reviewSceneList: [
{
id: 1734848011609182211,
text: '1.汽车信息安全管理制度或其配套的流程文件中包含流程图，定义了信息安全活动及对应的角色，并有角色的权责定义。',
reviewDetailsId: 1734848011609182210
}
]
},
{
id: 1734848012057972736,
text: '车辆制造商汽车信息安全管理制度的角色应与车辆制造商的组织架构匹配。',
reviewKeypointId: 1734848011609182209,
reviewSceneList: [
{
id: 1734848012057972737,
text: '1.汽车信息安全管理制度中定义的角色与车辆制造商的组织架构岗位名称一致。',
reviewDetailsId: 1734848012057972736
},
{
id: 1734848012225744896,
text: '2.汽车信息安全管理制度中定义的角色与车辆制造商的组织架构岗位有映射关系。',
reviewDetailsId: 1734848012057972736
}
]
}
]
},
{
id: 1734848012976525312,
text: '车辆制造商汽车信息安全管理制度是否明确为保障汽车信息安全需求实现和维持所投入的资源。',
reviewStandardId: 1734848011609182208,
reviewDetailsList: [
{
id: 1734848012976525313,
text: '车辆制造商应提供在信息安全方面提供资源支持的证明材料，包括投入的场地、基础软硬件设备、技术人员和资金等。',
reviewKeypointId: 1734848012976525312,
reviewSceneList: [
{
id: 1734848012976525314,
text: '1.典型的资源要求为人力投入，例如负责网络安全风险管理的人员、研发人员和事件管理响应人员。',
reviewDetailsId: 1734848012976525313
}
]
}
]
},
{
id: 1734848013714722816,
text: '车辆制造商汽车信息安全管理制度是否明确与其它管理流程（如QMS、ISMS）的适配性。',
reviewStandardId: 1734848011609182208,
reviewDetailsList: [
{
id: 1734848013714722817,
text: '车辆制造商应提供信息安全管理制度在建设实施中与企业其他管理流程相适配的证明材料。',
reviewKeypointId: 1734848013714722816,
reviewSceneList: [
{
id: 1734848013714722818,
text: '1.明确信息安全管理要求融合到现有管理制度流程中，如在现有ISMS制度中增加汽车信息安全管理要求。',
reviewDetailsId: 1734848013714722817
},
{
id: 1734848013899272192,
text: '2.在信息安全管理制度中明确与其它管理流程的接口。',
reviewDetailsId: 1734848013714722817
}
]
}
]
}
]
}
],
columns: [],
ruleForm: {
enterpriseLeader: '',
inspectionLeader: ''
},
rules: {
enterpriseLeader: [
{ required: true, message: '请输入车企负责人', trigger: 'blur' }
],
inspectionLeader: [
{ required: true, message: '请输入检验负责人', trigger: 'blur' }
]
},
tableData: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
]
}
},
created() {
if (this.dataList.length > 0) {
const firstItem = this.dataList[0]
this.columns = Object.keys(firstItem)
}
},
methods: {
getRowspan(arr) {
return arr.length > 0
? arr.reduce((acc, curr) => acc + curr.reviewDetailsList.length, 0)
: 1
},
/* 返回跳转*/
goToProcessedReview() {
this.$modal.msgSuccess('确认提交成功')
this.$router.back()
},
getRows(i) {
let n = 0
if (i.reviewDetailsList) {
n = i.reviewDetailsList.length
}
i.reviewDetailsList.map(s => {
n = n * s.reviewSceneList.length
})
return n + 2
},
getRows2(item) {
let n = 0
if (item.keyPointList) {
n = item.keyPointList.length
}
item.keyPointList.map(i => {
i.reviewDetailsList.map(s => {
n *= s.reviewSceneList.length
})
n *= i.reviewDetailsList.length
})
return n + 3
}
}
}
</script>
<!--样式-->
<style scoped lang="scss">
/*标题样式*/
.title-style {
background-color: #f9f9f9;
height: 3.5rem;
width: 100%;
display: flex;
padding-right: 2rem;
justify-content: space-between;
align-items: center;
}
/*标题文字样式*/
.title-content-style {
color: #666666;
font-size: 1rem;
font-weight: bold;
margin-left: 1.5rem;
}
::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;
}
}
/*任务编号,名称,单位样式*/
.task {
padding: 3rem 0rem 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 {
width: unset !important;
margin-right: 13rem;
margin-left: unset !important;
padding-left: unset !important;
}
/*卡片统计值样式*/
.card-statistical-style {
//width: 18rem;
display: flex;
padding: 1.5rem 2rem 1.5rem 2rem;
justify-content: space-between;
border-radius: 0.5rem;
align-items: center;
height: 8rem;
/*图片*/
.img {
width: 3rem;
height: 3.625rem;
}
.content {
display: flex;
flex-direction: column;
}
.title {
color: #ffffff;
font-size: 1.75rem;
margin: 0 !important;
}
.value {
color: #ffffff;
font-size: 1.75rem;
}
}
/*审查文件表格样式(最外层)*/
.form-review-questionnaire {
height: max-content;
width: 100%;
padding: 2.5rem 4rem 1rem 4rem;
.title-display {
display: flex;
align-items: center;
justify-content: flex-start;
.title-i {
height: 1.625rem;
margin-right: 1rem;
background-color: #409eff;
width: 0.625rem;
}
.title-content {
color: #409eff;
font-size: 1rem;
font-weight: bold;
}
}
::v-deep .el-table--border {
width: unset !important;
}
}
/*签字确认样式(最外层)*/
.form-signature-confirmation {
height: max-content;
width: 100%;
padding: 2.5rem 4rem 0rem 4rem;
/*图片*/
.img-display {
display: flex;
margin-top: 1rem;
align-items: center;
justify-content: flex-start;
.img {
border: solid 1px #b6b6b6;
width: 30rem;
height: 20rem;
margin: 0.5rem 10rem 0rem 0rem;
}
}
.title-display {
display: flex;
align-items: center;
justify-content: flex-start;
.title-i {
height: 1.625rem;
margin-right: 1rem;
background-color: #409eff;
width: 0.625rem;
}
.title-content {
color: #409eff;
font-size: 1rem;
font-weight: bold;
}
}
}
table {
margin-top: 20px;
border-collapse: collapse;
width: 100%;
}
thead {
background-color: #e7e6e6;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
width: 300px;
height: 100%;
}
.bottom-btn {
position: absolute;
bottom: 20px; /* 调整按钮距离底部的距离 */
left: 50%; /* 将按钮水平居中 */
transform: translateX(-50%);
}
.tips {
color: #f56c6c;
margin-left: 30px;
i {
color: #f56c6c;
}
}
.update-tip {
color: #409eff;
text-decoration: underline;
cursor: pointer;
}
.update-content {
margin-top: 50px;
padding: 20px;
border: 1px solid #e4e4e4;
text-align: center;
div {
margin-bottom: 10px;
}
i {
color: #ff9900;
font-size: 100px;
}
}
</style>
src/views/processing/unprocessed-review/index.vue
View file @ af280d82
...@@ -158,10 +158,15 @@ ...@@ -158,10 +158,15 @@
<div v-if="isSysReview" class="card-cell"> <div v-if="isSysReview" class="card-cell">
<div class="cell-lable">审查问卷</div> <div class="cell-lable">审查问卷</div>
<div class="cell-value"> <div class="cell-value">
<el-link v-if="item.progress < 90" type="primary" <el-link
v-if="item.progress < 90"
type="primary"
@click="handleReviewQuestionnaire"
>填写审查问卷</el-link >填写审查问卷</el-link
> >
<el-link v-else type="primary">确认审查结果</el-link> <el-link v-else type="primary" @click="handleConfirmFindings"
>确认审查结果</el-link
>
</div> </div>
</div> </div>
<div v-if="isSysReview" class="card-cell"> <div v-if="isSysReview" class="card-cell">
...@@ -297,6 +302,16 @@ export default { ...@@ -297,6 +302,16 @@ export default {
this.$router.push({ this.$router.push({
path: '/processing/reviewReport' path: '/processing/reviewReport'
}) })
},
handleReviewQuestionnaire() {
this.$router.push({
path: '/processing/write-check-form'
})
},
handleConfirmFindings() {
this.$router.push({
path: '/processing/confirm-result'
})
} }
} }
} }
......
src/views/processing/write-check-form/index.vue 0 → 100644
View file @ af280d82
<template>
<div class="app-container">
<el-card class="custom-card">
<div slot="header" class="clearfix">
<span>填写检查表单(所属任务：广汽丰田体系审查)</span>
<el-button icon="el-icon-back" class="back-btn" @click="handleBack">
返回
</el-button>
<el-button class="back-btn">意见表</el-button>
</div>
<div class="main-content">
<div class="prompt-message">
<span>问卷填写情况：共10条审查细则，已完成1条，未完成9条</span>
<!-- <span class="center-text">有 3 条场景变更待处理</span>-->
<el-checkbox v-model="checked">仅显示未完成页面</el-checkbox>
</div>
<el-row>
<!-- 步骤条 -->
<el-col :span="2">
<div class="left-content" style="height: 300px; width: 110px">
<div v-for="(item, index) in circleList" :key="index">
<div
:class="{
'exclamation-point': item.problem === true,
'no-exclamation-point': item.problem === false
}"
>
<div v-show="item.problem" class="exclamation">!</div>
</div>
<div
:class="{
'select-circle': item.checked === true,
'no-select-circle': item.checked === false
}"
@click="handleCircle(item)"
>
<span class="inner-text">{{ item.id }}</span>
</div>
<span v-show="item.tick" class="tick-class">
<i class="el-icon-check" />
</span>
</div>
</div>
</el-col>
<!-- 内容 -->
<el-col :span="22">
<el-form
ref="form"
class="right-content"
:model="form"
label-width="90px"
>
<el-form-item label="标准章节">
<span>5.1</span>
</el-form-item>
<el-form-item label="标准要求">
<span
>车辆制造商应具备车辆全生命周期的汽车信息安全管理体系。
注：车辆全生命周期包括车辆的开发阶段、生产阶段及后生产阶段。</span
>
</el-form-item>
<el-form-item label="审查要点">
<span>车辆制造商是否建立汽车信息安全管理制度。</span>
</el-form-item>
<el-form-item label="审查细则">
<span
>车辆制造商是否能够提供/展示汽车信息安全管理制度文件，制度文件应定义信息安全政策以及信息安全规则和流程，信息安全政策应致力于管理与车辆制造商活动相关的信息安全风险。</span
>
</el-form-item>
<el-form-item :label="'符合场景'">
<template slot="label">
<span>符合场景</span>
<el-button
class="label-btn"
size="mini"
type="warning"
@click="handleAddScene"
>
<span>新增场景</span>
</el-button>
</template>
<div class="match-scene">
<div>1.管理制度发布会红头文件</div>
<div>2.管理制度正式发布会议纪要</div>
<div>3.专用系统正式发布流程或记录</div>
</div>
</el-form-item>
<el-form-item label="审查结果">
<el-radio-group v-model="radio">
<el-radio :label="1">符合</el-radio>
<el-radio :label="2">不符合</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="相关记录">
<el-row>
<el-col :span="8">
<div>
文件名称
<el-input
v-model="addData.fileName"
placeholder="请输入文件名称"
/>
</div>
</el-col>
<el-col :span="8" :offset="1">
<div>
章节条目或范围
<el-input
v-model="addData.chapterEntry"
placeholder="请输入具体章节条目或范围"
/>
</div>
</el-col>
</el-row>
<!-- 文件第一次提示 -->
<div class="file-prompt">
<div>
<i class="el-icon-info"></i
>该文件第一次出现，请维护如下相关信息
</div>
</div>
<!-- 车企文件信息 -->
<el-card>
<div slot="header" class="clearfix">
<span>车企文件信息</span>
</div>
<el-form
ref="fileRef"
:model="fileData"
label-width="100px"
class="file-form-class"
:rules="fileRules"
>
<el-row>
<el-col :span="12">
<el-form-item label="企业名称" prop="enterpriseName">
<el-input
v-model="fileData.enterpriseName"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="文件名称" prop="fileName">
<el-input
v-model="fileData.fileName"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="文件版本" prop="fileVersion">
<el-input
v-model="fileData.fileVersion"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发布日期" prop="releaseDate">
<el-date-picker
v-model="fileData.releaseDate"
type="date"
placeholder="选择日期"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="文件状态" prop="fileStatus">
<el-select
v-model="fileData.fileStatus"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="item in dict.type.file_status"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="存储位置" prop="storageLocation">
<el-input
v-model="fileData.storageLocation"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="文件识别号"
prop="fileIdentification"
>
<el-input
v-model="fileData.fileIdentification"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="文件照片" prop="filePicture">
<ImageUpload
v-model="fileData.filePicture"
:limit="1"
></ImageUpload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-button
type="primary"
icon="el-icon-folder-add"
@click="handleSaveFile"
>保存车企文件</el-button
>
</el-card>
</el-form-item>
<el-form-item label="条目填写人">
<span>赵小刚</span>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<div class="bottom-btn">
<el-button type="warning" @click="saveCurrentItem">
保存当前边界
</el-button>
<el-button type="primary" @click="submitQuestionnaire"
>提交表格</el-button
>
</div>
</el-card>
<!-- 新增场景对话框 -->
<el-dialog
title="新增场景对话框"
:visible.sync="senceDialogVisible"
width="35%"
append-to-body
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleSceneClose"
>
<div class="file-prompt">
<div>
<i
class="el-icon-info"
/>新增场景，需要组织评审，评审通过后新增场景自动进入场景库。
</div>
</div>
<el-form
ref="sceneForm"
:model="sceneForm"
:rules="sceneRules"
label-width="80px"
class="scene-form"
>
<el-form-item label="评审类型" prop="reviewType">
<!-- 下拉框 -->
<el-select
v-model="sceneForm.reviewType"
placeholder="请选择评审类型"
style="width: 100%"
>
<el-option
v-for="item in reviewTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="场景分类" prop="sceneClassification">
<el-select
v-model="sceneForm.sceneClassification"
placeholder="请选择评审类型"
style="width: 100%"
>
<el-option
v-for="item in reviewTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="场景内容" prop="sceneContent">
<el-input
v-model="sceneForm.sceneContent"
maxlength="100"
show-word-limit
type="textarea"
/>
</el-form-item>
<el-form-item label="评审人员" prop="assessor">
<div>组长-xxx</div>
<div>组员-xxx、xxx、xxx</div>
</el-form-item>
<el-form-item label="备注信息" prop="remark">
<el-input
v-model="sceneForm.remark"
maxlength="100"
show-word-limit
type="textarea"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="senceDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSaveNewScene">
确 定
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
dicts: ['file_status'],
data() {
return {
sceneForm: {},
senceDialogVisible: false,
form: {},
checked: false,
circleList: [
{ id: 1, checked: false, problem: false, tick: true },
{ id: 2, checked: true, problem: false, tick: false },
{ id: 3, checked: false, problem: true, tick: false },
{ id: 4, checked: false, problem: false, tick: false },
{ id: 5, checked: false, problem: false, tick: false },
{ id: 6, checked: false, problem: false, tick: false },
{ id: 7, checked: false, problem: false, tick: false },
{ id: 8, checked: false, problem: false, tick: false },
{ id: 9, checked: false, problem: false, tick: false },
{ id: 10, checked: false, problem: false, tick: false }
],
fileRules: {
enterpriseName: [
{ required: true, message: '请输入企业名称', trigger: 'blur' }
],
fileName: [
{ required: true, message: '请输入文件名称', trigger: 'blur' }
],
fileVersion: [
{ required: true, message: '请输入文件版本', trigger: 'blur' }
],
releaseDate: [
{ required: true, message: '请选择发布日期', trigger: 'change' }
],
fileStatus: [
{ required: true, message: '请选择文件状态', trigger: 'change' }
],
storageLocation: [
{ required: true, message: '请输入存储位置', trigger: 'blur' }
],
fileIdentification: [
{ required: true, message: '请输入文件识别号', trigger: 'blur' }
],
filePicture: [
{ required: true, message: '请选择文件照片', trigger: 'change' }
]
},
sceneRules: {
reviewType: [
{ required: true, message: '请选择评审类型', trigger: 'change' }
],
sceneClassification: [
{ required: true, message: '请选择场景分类', trigger: 'change' }
],
sceneContent: [
{ required: true, message: '请输入场景内容', trigger: 'blur' }
]
},
// TODO 删除
checkedTwo: false,
checkedThree: false,
radio: 1,
addData: {
fileName: '',
chapterEntry: ''
},
fileData: {
enterpriseName: '',
fileStatus: '',
filePicture: '',
storageLocation: ''
},
value1: '',
reviewTypeOptions: []
}
},
created() {
console.log('人', this.$store.state.user.name)
},
methods: {
/**
* 点击左侧圆圈触发的回调函数
* @param item 圆圈对象
*/
handleCircle(item) {
this.circleList.forEach(item => {
item.checked = false
})
item.checked = true
},
// 返回
handleBack() {
this.$router.go(-1)
},
// 新增场景
handleAddScene() {
this.senceDialogVisible = true
console.log('a')
},
// 保存当前条目
saveCurrentItem() {
this.$modal.msgSuccess('保存当前边界成功')
},
submitQuestionnaire() {
this.$modal.msgSuccess('提交表格成功')
this.$router.back()
},
// 新增场景对话框关闭时触发的回调函数
handleSceneClose() {
this.senceDialogVisible = false
this.$refs.sceneForm.resetFields()
},
handleSaveFile() {
// vue表单校验
this.$refs.fileRef.validate(valid => {
if (valid) {
console.log('ddd')
}
})
},
handleSaveNewScene() {
// vue表单校验vue表单校验
this.$refs.sceneForm.validate(valid => {
if (valid) {
console.log('ddd')
}
})
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
.custom-card {
::v-deep.el-card__header {
background-color: #f9f9f9;
}
.back-btn {
margin-left: 10px;
float: right;
}
.other-btn {
float: right;
}
.main-content {
min-height: 550px;
.prompt-message {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
.center-text {
color: #f56c6c;
}
}
.left-content {
.tick-class {
float: right;
position: relative;
top: -1.8em;
left: -1em;
i {
color: #25c173;
}
}
.no-exclamation-point {
float: left;
width: 1px;
height: 1px;
padding-left: 30px;
}
.exclamation-point {
float: left;
margin-top: 6px;
margin-right: 10px;
position: relative;
width: 20px;
height: 20px;
border: 2px solid #f56c6c;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
.exclamation {
position: absolute;
font-size: 12px;
color: #f56c6c;
font-weight: bold;
}
}
.no-select-circle {
cursor: pointer;
width: 35px;
height: 35px;
border: 3px solid #c0c0c0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
position: relative;
margin-bottom: 5px;
.inner-text {
position: absolute;
font-size: 16px;
z-index: 1;
color: #c0c0c0;
}
}
.select-circle {
cursor: pointer;
width: 35px;
height: 35px;
border: 3px solid #6ab3ff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
position: relative;
margin-bottom: 5px;
.inner-text {
position: absolute;
font-size: 16px;
z-index: 1;
color: #6ab3ff;
}
}
}
.right-content {
.file-form-class {
::v-deep.el-form-item {
margin-bottom: 20px;
}
}
.match-scene {
display: flex;
flex-direction: column;
background-color: #fafafa;
padding: 5px;
}
.file-prompt {
margin: 10px 0 10px 0;
background-color: #ebf5ff;
div {
padding-left: 10px;
i {
color: #409eff;
margin-right: 10px;
}
}
}
}
}
.bottom-btn {
display: flex;
justify-content: center;
}
}
}
.file-prompt {
margin: 0 0 10px 0;
padding: 10px;
background-color: #ebf5ff;
div {
font-size: 12px;
padding-left: 10px;
i {
color: #409eff;
margin-right: 10px;
}
}
}
.label-btn {
width: 60px;
span {
font-size: 12px;
position: relative;
right: 9px;
}
}
</style>
src/views/task/confirm-result/index.vue
View file @ af280d82
...@@ -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">
确认审查结果(所属任务: 广汽丰田体系审查)21 确认审查结果(所属任务: 广汽丰田体系审查)
</div> </div>
<div class="title-content-style"> <div class="title-content-style">
<el-button type="text" @click="goToProcessedReview">返回</el-button> <el-button type="text" @click="goToProcessedReview">返回</el-button>
......
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