Skip to content

W
web
Commit b37bb587 authored by jiaxu.yan's avatar jiaxu.yan
Browse files
Options

feat(任务处理模块): 体系审查 页面修改

parent 3efc7c32
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 942 additions and 592 deletions
.eslintrc.js
View file @ b37bb587
...@@ -29,6 +29,7 @@ module.exports = { ...@@ -29,6 +29,7 @@ module.exports = {
"vue/multiline-html-element-content-newline":"off", "vue/multiline-html-element-content-newline":"off",
"vue/name-property-casing": ["error", "PascalCase"], "vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off", "vue/no-v-html": "off",
"vue/no-v-for-template-key": "off",
'accessor-pairs': 2, 'accessor-pairs': 2,
'arrow-spacing': [2, { 'arrow-spacing': [2, {
'before': true, 'before': true,
......
src/assets/styles/index.scss
View file @ b37bb587
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
@import './btn.scss'; @import './btn.scss';
@import './process.scss'; @import './process.scss';
@import url(//at.alicdn.com/t/c/font_4370984_m7nz5mfgt6.css); @import url(//at.alicdn.com/t/c/font_4370984_hp4hi2sk2a6.css);
body { body {
height: 100%; height: 100%;
......
src/assets/styles/process.scss
View file @ b37bb587
...@@ -25,3 +25,54 @@ ...@@ -25,3 +25,54 @@
margin-bottom: 50px; margin-bottom: 50px;
/* 调整按钮距离底部的距离 */ /* 调整按钮距离底部的距离 */
} }
/* 任务编号,名称,单位样式 */
.task {
margin-top: 20px;
margin-bottom: 40px;
.task-label {
font-weight: bold;
color: rgb(153, 153, 153);
font-size: 18px;
}
.task-content {
color: rgb(153, 153, 153);
font-size: 18px;
}
}
.standard-box {
display: flex;
justify-content: flex-start;
align-items: center;
.standard {
color: #2b85e4;
margin: 0 10px;
}
}
.message-list{
display:flex;
flex-wrap:wrap;
display: -webkit-flex; /* Safari */
padding: 1.5rem 4rem 1rem 4rem;
.message-box{
flex: 1;
display: flex;
//
align-items: center;
justify-content: flex-start;
.icon{
font-size: 60px;
}
.message-detail{
display: flex;
margin-left: 10px;
align-items:flex-start;
justify-content: flex-start;
flex-flow: column;
}
}
}
src/assets/svg/standard.svg 0 → 100644
View file @ b37bb587
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="350px" height="30px" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M 12 0 C 12 0 8.99999999999999 0.128571428571429 8.99999999999999 0.128571428571429 C 8.99999999999999 0.128571428571429 0 15 0 15 C 0 15 8.99999999999999 29.8714285714286 8.99999999999999 29.8714285714286 C 8.99999999999999 29.8714285714286 12 30 12 30 C 12 30 350 30 350 30 C 350 30 350 0 350 0 C 350 0 12 0 12 0 Z " fill-rule="nonzero" fill="#fec03d" stroke="none" />
</g>
</svg>
\ No newline at end of file
src/components/Collapse/collapse-item.vue 0 → 100644
View file @ b37bb587
<template>
<div
class="el-collapse-item"
:class="{ 'is-active': isActive, 'is-disabled': disabled }"
>
<div
role="tab"
:aria-expanded="isActive"
:aria-controls="`el-collapse-content-${id}`"
:aria-describedby="`el-collapse-content-${id}`"
>
<div
class="el-collapse-item__header"
@click="handleHeaderClick"
role="button"
:id="`el-collapse-head-${id}`"
:tabindex="disabled ? undefined : 0"
@keyup.space.enter.stop="handleEnterClick"
:class="{
focusing: focusing,
'is-active': isActive
}"
@focus="handleFocus"
@blur="focusing = false"
>
<i
class="iconfont"
:class="isActive ? 'icon-xiangxiazhankai-xianxingyuankuang' : 'icon-xiangshangshouqi-xianxingyuankuang'"
>
</i>
<slot name="title"></slot>
</div>
</div>
<collapse-transition>
<div
class="el-collapse-item__wrap"
v-show="isActive"
role="tabpanel"
:aria-hidden="!isActive"
:aria-labelledby="`el-collapse-head-${id}`"
:id="`el-collapse-content-${id}`"
>
<div class="el-collapse-item__content">
<slot></slot>
</div>
</div>
</collapse-transition>
</div>
</template>
<script>
import CollapseTransition from './collapse-transition'
import Emitter from './emitter'
export default {
name: 'CollapseItem',
componentName: 'CollapseItem',
mixins: [Emitter],
components: { CollapseTransition },
data() {
return {
contentWrapStyle: {
height: 'auto',
display: 'block'
},
contentHeight: 0,
focusing: false,
isClick: false,
id: Math.floor(Math.random() * 10000)
}
},
inject: ['collapse'],
props: {
title: String,
name: {
type: [String, Number],
default() {
return this._uid
}
},
disabled: Boolean
},
computed: {
isActive() {
return this.collapse.activeNames.indexOf(this.name) > -1
}
},
methods: {
handleFocus() {
setTimeout(() => {
if (!this.isClick) {
this.focusing = true
} else {
this.isClick = false
}
}, 50)
},
handleHeaderClick() {
if (this.disabled) return
this.dispatch('Collapse', 'item-click', this)
this.focusing = false
this.isClick = true
},
handleEnterClick() {
this.dispatch('Collapse', 'item-click', this)
}
}
}
</script>
<style scoped>
.el-collapse-item__header{
background-color: #f0f7ff !important;
padding: 0 15px !important;
}
.el-collapse-item__content{
padding-left: 40px !important;
}
</style>
src/components/Collapse/collapse-transition.js 0 → 100644
View file @ b37bb587
/* istanbul ignore next */
function addClass(el, cls) {
if (!el) return;
var curClass = el.className;
var classes = (cls || '').split(' ');
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.add(clsName);
} else if (!hasClass(el, clsName)) {
curClass += ' ' + clsName;
}
}
if (!el.classList) {
el.setAttribute('class', curClass);
}
};
/* istanbul ignore next */
function removeClass(el, cls) {
if (!el || !cls) return;
var classes = cls.split(' ');
var curClass = ' ' + el.className + ' ';
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.remove(clsName);
} else if (hasClass(el, clsName)) {
curClass = curClass.replace(' ' + clsName + ' ', ' ');
}
}
if (!el.classList) {
el.setAttribute('class', trim(curClass));
}
};
class Transition {
beforeEnter(el) {
addClass(el, 'collapse-transition');
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = '0';
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + 'px';
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.height = '';
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = 'hidden';
}
afterEnter(el) {
// for safari: remove class then reset height is necessary
removeClass(el, 'collapse-transition');
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
}
beforeLeave(el) {
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = el.scrollHeight + 'px';
el.style.overflow = 'hidden';
}
leave(el) {
if (el.scrollHeight !== 0) {
// for safari: add class after set height, or it will jump to zero height suddenly, weired
addClass(el, 'collapse-transition');
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
}
afterLeave(el) {
removeClass(el, 'collapse-transition');
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
}
export default {
name: 'ElCollapseTransition',
functional: true,
render(h, { children }) {
const data = {
on: new Transition()
};
return h('transition', data, children);
}
};
src/components/Collapse/collapse.vue 0 → 100644
View file @ b37bb587
<template>
<div class="el-collapse" role="tablist" aria-multiselectable="true">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Collapse',
componentName: 'Collapse',
props: {
accordion: Boolean,
value: {
type: [Array, String, Number],
default() {
return [];
}
}
},
data() {
return {
activeNames: [].concat(this.value)
};
},
provide() {
return {
collapse: this
};
},
watch: {
value(value) {
this.activeNames = [].concat(value);
}
},
methods: {
setActiveNames(activeNames) {
activeNames = [].concat(activeNames);
let value = this.accordion ? activeNames[0] : activeNames;
this.activeNames = activeNames;
this.$emit('input', value);
this.$emit('change', value);
},
handleItemClick(item) {
if (this.accordion) {
this.setActiveNames(
(this.activeNames[0] || this.activeNames[0] === 0) &&
this.activeNames[0] === item.name
? '' : item.name
);
} else {
let activeNames = this.activeNames.slice(0);
let index = activeNames.indexOf(item.name);
if (index > -1) {
activeNames.splice(index, 1);
} else {
activeNames.push(item.name);
}
this.setActiveNames(activeNames);
}
}
},
created() {
this.$on('item-click', this.handleItemClick);
}
};
</script>
\ No newline at end of file
src/components/Collapse/emitter.js 0 → 100644
View file @ b37bb587
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
var name = child.$options.componentName;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
methods: {
dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root;
var name = parent.$options.componentName;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.componentName;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
src/views/processing/carReview/review-form/index.vue
View file @ b37bb587
...@@ -5,9 +5,7 @@ ...@@ -5,9 +5,7 @@
<div> <div>
<!--1-抬头标题--> <!--1-抬头标题-->
<div class="title-style"> <div class="title-style">
<div class="title-content-style"> <div class="title-content-style">查看车型审查表单</div>
查看车型审查表单(所属任务：{{ model.carReviewTask.name }})
</div>
<div class="title-content-style"> <div class="title-content-style">
<a href="/processing/unprocessed-review">返回</a> <a href="/processing/unprocessed-review">返回</a>
</div> </div>
...@@ -15,105 +13,98 @@ ...@@ -15,105 +13,98 @@
<!--2-统计值--> <!--2-统计值-->
<div class="main-content-style"> <div class="main-content-style">
<!--任务编号,名称,单位--> <!--任务编号,名称,单位-->
<el-form label-width="6.25rem" class="task"> <el-row :gutter="60" class="task">
<el-row :gutter="60"> <el-col :span="8">
<el-col :span="8"> <span class="task-label">任务编号:</span>
<el-form-item label="任务编号:"> <span class="task-content">
<span>{{ model.carReviewTask.taskNo }}</span> {{ model.carReviewTask.taskNo }}
</el-form-item> </span>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="任务名称:"> <span class="task-label">任务名称:</span>
<span>{{ model.carReviewTask.name }}</span> <span class="task-content">
</el-form-item> {{ model.carReviewTask.name }}
</el-col> </span>
<el-col :span="8"> </el-col>
<el-form-item label="委托单位:"> <el-col :span="8">
<span>{{ model.carReviewTask.taskInitiatorDept }}</span> <span class="task-label">委托单位:</span>
</el-form-item> <span class="task-content">
</el-col> {{ model.carReviewTask.taskInitiatorDep }}
</el-row> </span>
</el-form> </el-col>
</el-row>
<div class="control-btns">
<div class="control-btn" @click="openAll()">
<i class="iconfont icon-xiangxiazhankai-yuankuang"></i>
全部展开
</div>
<div class="control-btn" @click="closeAll()">
<i class="iconfont icon-xiangshangshouqi"></i>
全部收起
</div>
</div>
<!--审查问卷概要--> <!--审查问卷概要-->
<div class="form-review-questionnaire"> <collapse v-model="activeNames">
<table class="table" style="width: 100%" border="1"> <collapse-item
<thead> v-for="(item, key) in model.systemReviewTask.standard"
:key="key"
:name="item.chapter"
>
<span slot="title">
<div class="standard-box">
<div class="standard">标准：</div>
<div class="standard-title">
{{ item.chapter + item.text }}
</div>
</div>
</span>
<table class="table">
<tr> <tr>
<th>标准章节</th>
<th>标准要求</th>
<th>审查要点</th> <th>审查要点</th>
<th>审查细则</th> <th>审查细则</th>
<th>审查结果</th> <th>审查结果</th>
<th colspan="2">记录</th>
<th>填写人</th> <th>填写人</th>
</tr> </tr>
</thead> <template v-for="(keyPoint, keyPointKey) in item.keyPointList">
<tbody> <tr :key="keyPointKey">
<!-- 循环遍历 arr --> <td :rowspan="keyPoint.reviewDetailsList.length + 1">
<template v-for="(item, index) in model.carReviewTask.standard"> {{ keyPoint.text }}
<tr :key="'standard-' + index">
<td
align="center"
style="text-align: center"
:rowspan="getRows2(item)"
>
{{ item.chapter }}
</td>
<td align="center" :rowspan="getRows2(item)">
{{ item.text }}
</td> </td>
</tr> </tr>
<!-- 循环遍历 keyPointList --> <template
<template v-for="(i, PointIndex) in item.keyPointList"> v-for="(
<tr :key="'PointIndex-2' + PointIndex + index"> reviewDetail, reviewDetailKey
<td align="center" :rowspan="getRows(i)"> ) in keyPoint.reviewDetailsList"
{{ i.text }} >
<tr :key="reviewDetailKey">
<td>{{ reviewDetail.text }}</td>
<td align="center">
{{
reviewDetail.result
? reviewDetail.result.passed === null
? '__'
: reviewDetail.result.passed === 0
? '不通过'
: '通过'
: '__'
}}
</td> </td>
</tr> <td align="center">
<!-- 循环遍历 reviewDetailsList --> {{
<template reviewDetail.result
v-for="(v, reviewDetailIndex) in i.reviewDetailsList" ? reviewDetail.result.userName
> ? reviewDetail.result.userName
<tr
:key="
'reviewDetailIndex-3' +
PointIndex +
reviewDetailIndex +
index
"
>
<td align="center">
{{ v.text }}
</td>
<td align="center" style="text-align: center">
{{
v.result
? v.result.passed === null
? '__'
: v.result.passed === 0
? '不通过'
: '通过'
: '__'
}}
</td>
<td align="center"></td>
<td align="center"></td>
<td align="center" style="text-align: center">
{{
v.result
? v.result.userName
? v.result.userName
: '__'
: '__' : '__'
}} : '__'
</td> }}
</tr> </td>
</template> </tr>
</template> </template>
</template> </template>
</tbody> </table>
</table> </collapse-item>
</div> </collapse>
<!--返回按钮--> <!--返回按钮-->
<div class="bottom-btn"> <div class="bottom-btn">
...@@ -133,13 +124,17 @@ ...@@ -133,13 +124,17 @@
<!--js逻辑--> <!--js逻辑-->
<script> <script>
import { checkTaskDetail } from '@/api/task/task' import { checkTaskDetail } from '@/api/task/task'
import { getRows, getRows2 } from '@/utils/reviewDetailsTable.js' import collapse from '@/components/Collapse/collapse'
import collapseItem from '@/components/Collapse/collapse-item'
export default { export default {
components: {
collapse: collapse,
'collapse-item': collapseItem
},
data() { data() {
return { return {
model: { model: {
carReviewTask: {}, carReviewTask: {},
systemReviewTask: {},
reviewSceneChangeTasks: {}, reviewSceneChangeTasks: {},
detailsList: [] detailsList: []
}, },
...@@ -177,9 +172,7 @@ export default { ...@@ -177,9 +172,7 @@ export default {
/* 返回跳转*/ /* 返回跳转*/
goToProcessedReview() { goToProcessedReview() {
this.$router.push('/processing/unprocessed-review') this.$router.push('/processing/unprocessed-review')
}, }
getRows,
getRows2
} }
} }
</script> </script>
......
src/views/processing/systemReview/write-check-form/index.vue
View file @ b37bb587
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-container"> <div class="app-container">
<el-card class="custom-card"> <el-card class="custom-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>填写检查表单(所属任务：{{ model.systemReviewTask.name }})</span> <span>填写体系审查表单</span>
<div class="back-btn"> <div class="back-btn">
<el-button type="primary" plain @click="handlePreview"> <el-button type="primary" plain @click="handlePreview">
预览表单 预览表单
...@@ -11,7 +11,27 @@ ...@@ -11,7 +11,27 @@
</div> </div>
</div> </div>
<div class="main-content"> <div class="main-content">
<div class="prompt-message"> <el-row :gutter="60" class="task">
<el-col :span="8">
<span class="task-label">任务编号:</span>
<span class="task-content">
{{ model.systemReviewTask.taskNo }}
</span>
</el-col>
<el-col :span="8">
<span class="task-label">任务名称:</span>
<span class="task-content">
{{ model.systemReviewTask.name }}
</span>
</el-col>
<el-col :span="8">
<span class="task-label">委托单位:</span>
<span class="task-content">
{{ model.systemReviewTask.taskInitiatorDep }}
</span>
</el-col>
</el-row>
<div class="prompt-message mt10">
<span <span
>问卷填写情况：共{{ model.detailsList.length }}条审查细则，已完成{{ >问卷填写情况：共{{ model.detailsList.length }}条审查细则，已完成{{
readNumber readNumber
......
src/views/processing/unprocessed-review/index.vue
View file @ b37bb587
...@@ -77,6 +77,9 @@ ...@@ -77,6 +77,9 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-card v-for="(item, index) in tableData" :key="index" class="box-card"> <el-card v-for="(item, index) in tableData" :key="index" class="box-card">
<div class="inspection-standard">
检验依据：GB XXXXX《汽车整车信息安全技术要求》
</div>
<div class="card-cell"> <div class="card-cell">
<div class="cell-lable"> <div class="cell-lable">
<i class="el-icon-timer"></i> <i class="el-icon-timer"></i>
...@@ -407,6 +410,29 @@ export default { ...@@ -407,6 +410,29 @@ export default {
...mapGetters(['userId']) ...mapGetters(['userId'])
}, },
methods: { methods: {
// loadData() {
// this.loading = true
// request({
// url: this.listUrl,
// method: 'post',
// data: this.queryParams
// })
// .then(res => {
// if (res.code === 200) {
// console.log(res.rows)
// res.rows[0].carReviewStatus = 'NEW'
// this.tableData = res.rows
// this.total = res.total
// }
// this.loading = false
// })
// .catch(error => {
// if (error.msg) {
// this.$message.error(error.msg)
// }
// this.loading = false
// })
// },
/** /**
* 企业留档文件 * 企业留档文件
* @param item 对象 * @param item 对象
...@@ -633,13 +659,14 @@ export default { ...@@ -633,13 +659,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.card-cell { .card-cell {
display: flex; display: flex;
justify-content: space-around; justify-content: center;
align-items: flex-start; align-items: flex-start;
height: 140px; height: 140px;
color: rgb(153 153 153); color: rgb(153 153 153);
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 140px; width: 140px;
// padding-top: 30px;
} }
.cell-option { .cell-option {
...@@ -660,6 +687,19 @@ export default { ...@@ -660,6 +687,19 @@ export default {
.box-card { .box-card {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 14px; font-size: 14px;
position: relative;
height: 150px;
.inspection-standard {
position: absolute;
top: 0px;
left: 0px;
background-image: url('~@/assets/svg/standard.svg');
line-height: 30px;
background-repeat: no-repeat;
color: white;
padding-left: 15px;
}
::v-deep .el-card__body { ::v-deep .el-card__body {
display: flex; display: flex;
...@@ -684,14 +724,15 @@ export default { ...@@ -684,14 +724,15 @@ export default {
color: #515a6e; color: #515a6e;
font-size: 13px; font-size: 13px;
height: 20px; height: 20px;
// margin-bottom: 10px;
} }
.cell-value { .cell-value {
height: 80px;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
min-height: 40px;
} }
.cell-status { .cell-status {
...@@ -701,7 +742,7 @@ export default { ...@@ -701,7 +742,7 @@ export default {
.cell-item { .cell-item {
height: 25px; height: 25px;
margin: 8px 0; margin-top: 8px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
......
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