Skip to content

C
car-database-web
Commit 2dc0a080 authored by zhang's avatar zhang
Browse files
Options

feat: (首页/信息管理/检验内容库)新增章节选择功能，更新页面样式

parent 159fc919
Show whitespace changes
Inline Side-by-side
Showing with 357 additions and 92 deletions
src/api/standard/standard.js
View file @ 2dc0a080
......@@ -8,3 +8,11 @@ export function getStandardList(data) {
data
})
}
export function getReviewStandardList(data){
return request({
url:'/review/standard/getReviewStandardList',
method: 'post',
data
})
}
src/components/Page/standardOption.vue
View file @ 2dc0a080
......@@ -2,10 +2,10 @@ empty
<template>
<div class="page-data">
<div class="page-box">
<el-row :gutter="20">
<el-col :span="3">
<el-row :gutter="24">
<el-col :span="4">
<div class="standard-box">
<el-input
<!-- <el-input
v-model="queryParams.name"
placeholder="输入标准关键词"
@keyup.enter.native="search()"
......@@ -16,9 +16,9 @@ empty
slot="suffix"
>
</i>
</el-input>
</el-input> -->
<ul class="select-list">
<template v-for="item in standardList">
<!-- <template v-for="item in standardList">
<li
@click="selectStandard(item)"
:class="item.id === standard ? 'selected' : ''"
......@@ -31,11 +31,28 @@ empty
<div class="standard-item">{{ item.standardNo }}</div>
</el-tooltip>
</li>
</template>
</template> -->
<el-tree
ref="tree"
class="tree"
v-loading="loading"
:data="tableData"
:props="defaultProps"
:default-expanded-keys="defaultExpandIds"
node-key="key"
bordered
@node-click="handleNodeClick"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
>
<span :class="{'clickChange':node.isCurrent}" style="display: flex; justify-content:center;align-items: center;" slot-scope="{ node,data }" >
<span >{{data.label}}</span>
</span>
</el-tree>
</ul>
</div>
</el-col>
<el-col :span="21">
<el-col :span="20">
<div class="table-box">
<template v-if="$slots.tab && $slots.tab.length">
<!-- <div slot="header" class="clearfix"> -->
......@@ -54,6 +71,10 @@ empty
<script>
// import request from '@/utils/request'
import { mapGetters } from 'vuex'
import request from '@/utils/request'
import {getReviewStandardList} from '@/api/standard/standard.js'
import { forEach } from 'lodash';
import standard from '../../store/modules/standard';
export default {
name: 'standardOption',
props: {
......@@ -61,11 +82,44 @@ export default {
},
data() {
return {
//listUrl: '/review/standard/list',
queryParams: {
value: '',
pageNum: 1,
pageSize: 99
}
pageSize: 99,
chapter: '',
standardId: this.$store.getters.standard,
type: 'system'
},
tableData:[],
loading:false,
expandedList:[],
clickChange:false,
defaultExpandIds: [],
// reviewTypeList: [ // 类型列表
// {
// label: '体系审查',
// type:'system'
// },
// {
// label: '车型审查',
// type:'car'
// },
// {
// label: '车型试验',
// type:'test'
// }
// ],
defaultProps: { // node格式设置
children: 'children',
label: 'label',
// isLeaf: (data, node) => {
// if (node.level === 2 || data.length == 1) {
// return true
// }
// }
},
count:0
}
},
created() {
......@@ -77,13 +131,165 @@ export default {
computed: {
...mapGetters(['standard', 'standardList'])
},
watch: {
'$store.getters.standard': {
handler(newVal, oldVal) {
this.queryParams.standardId = newVal
this.count++
if(this.count<=1){
this.loadData()
}
}
},
'$store.getters.standard_type': {
handler(newVal, oldVal) {
this.queryParams.type = newVal
}
},
'$store.getters.standard_chapter':{
handler(newVal, oldVal) {
this.queryParams.chapter = newVal
}
}
},
methods: {
search() {
this.queryParams.pageNum = 1
this.$store.dispatch('standard/setStandardList', this.queryParams.name)
},
selectStandard(value) {
console.log(value)
this.$store.dispatch('standard/setStandard', value)
this.loadData()
},
handleNodeClick(node,data){
console.log(data)
if(data.isCurrent){
node.isCurrent = true
}
if(data.isLeaf){
this.queryParams.chapter = node.chapter
this.queryParams.type = node.type
let standard = {
id:node.id,
name:node.label,
type:node.type || 'system',
chapter: data.level == 1 ? ' ' : node.label
}
this.$store.dispatch('standard/setStandard', standard)
}
//this.$store.dispatch('standard/setStandard', standard)
},
handleNodeExpand(node){
let flag = false
this.defaultExpandIds.some(item => {
if (item === node.key) { // 判断当前节点是否存在， 存在不做处理
flag = true
return true
}
})
if (!flag) { // 不存在则存到数组里
this.defaultExpandIds.push(node.key)
}
},
handleNodeCollapse(node) {
// 删除当前关闭的节点
this.defaultExpandIds.some((item, i) => {
if (item === node.key) {
this.defaultExpandIds.splice(i, 1)
}
})
this.removeChildrenIds(node) // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
},
removeChildrenIds(data) {
const ts = this
if (data.children) {
data.children.forEach(function(item) {
const index = ts.defaultExpandIds.indexOf(item.key)
if (index > 0) {
ts.defaultExpandIds.splice(index, 1)
}
ts.removeChildrenIds(item)
})
}
},
async loadData(){
this.loading = true
this.tableData = []
for(let i = 0; i < this.standardList.length ; i++ ){
let data = {
standardId: this.standardList[i].id,
standardNo: this.standardList[i].standardNo
}
await getReviewStandardList(data).then(res=>{
if(res.code === 200){
let typeList = res.data.typeList
forEach(typeList,(item)=>{
item.isCurrent = false,
item.children = item.reviewStandardChapterListResponses
forEach(item.children,(c)=>{
c.label = c.chapter
})
let cache = []
forEach(item.children,(p)=>{// 去重
if(cache.find(c=>c.label == p.label)){
}else{
item.length = 1
cache.push({
label:p.label,
chapter:p.label,
isCurrent:false,
id:this.standardList[i].id,
type:item.type
})
}
})
item.children = cache
switch(item.type){
case 'system':
item.label='体系审查'
break;
case 'car':
item.label='车型审查'
break;
case 'test':
item.label='车型实验'
break;
}
})
let obj = {
id:this.standardList[i].id,
label:this.standardList[i].standardNo,
children:typeList,
isCurrent:false
}
this.tableData.push(obj)
//let chapters = res.rows
// obj.children.forEach(t=>{
// if(t.type == this.queryParams.type){
// t.children = cache
// }
// })
// page.push(obj)
// this.tableData = page
// console.log(this.standardList)
// this.loading = false
}
})
}
this.loading = false
}
}
}
......@@ -100,7 +306,7 @@ export default {
display: flex;
flex-flow: column;
justify-content: flex-start;
padding: 15px 11px;
padding: 15px 0;
flex-wrap: wrap;
align-items: flex-start;
min-height: 80vh;
......@@ -145,5 +351,57 @@ export default {
color: $--color-primary;
font-weight: bold;
}
.tree {
padding: 10px 10px;
::v-deep .el-tree-node{ // 节点样式
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
::v-deep .is-leaf::before{ // 叶子节点箭头样式设置:不显示
opacity: 0;
}
::v-deep .el-tree-node__content { // 节点内容样式设置
width: 100%;
//display: flex;
//justify-content: space-between;
margin-top: 5px;
color:black;
font-size: 13px;
border-radius: 5px;
}
::v-deep .el-tree-node__content:hover { // 节点内容样式设置
background-color: #f0f7ff;
}
::v-deep .el-tree-node__content .el-tree-node__expand-icon { // 节点箭头样式设置
color: black;
}
::v-deep .el-tree-node__children{ // 子节点样式设置
transition: all 0.5s;
}
::v-deep .el-tree-node__children .el-tree-node__content{// 子节点内容样式设置
height: 25px;
background-color: white;
}
::v-deep .el-tree-node__children .el-tree-node__children .el-tree-node__content .el-tree-node__expand-icon{
opacity: 0;
}
::v-deep .el-tree-label{ // 树中显示标题(label)设置
text-align: center;
font-size: 13px;
font-weight: bold;
}
::v-deep .el-tree-content{ // 树中显示内容(content)设置
font-size: 13px;
}
::v-deep .clickChange{
color:blue;
}
}
}
</style>
src/store/getters.js
View file @ 2dc0a080
......@@ -18,6 +18,8 @@ const getters = {
sidebarRouters: state => state.permission.sidebarRouters,
companyFiles: state => state.processing.companyFiles,
standard: state => state.standard.standard,
standard_type: state => state.standard.standard_type,
standard_chapter: state => state.standard.standard_chapter,
standard_name: state => state.standard.standard_name,
standardList: state => state.standard.standardList,
testScenarioList: state => state.testScenario.testScenarioList,
......
src/store/modules/standard.js
View file @ 2dc0a080
......@@ -4,6 +4,8 @@ const standard = {
state: {
standard: '',
standard_name: '',
standard_type:'',
standard_chapter:'',
standardList: []
},
......@@ -16,6 +18,12 @@ const standard = {
},
SET_STANDARDNAME: (state, standard) => {
state.standard_name = standard
},
SET_STANDARDTYPE: (state,type) => {
state.standard_type = type
},
SET_STANDARDCHAPTER: (state,chapter) => {
state.standard_chapter = chapter
}
},
......@@ -23,6 +31,8 @@ const standard = {
setStandard({ commit }, standard) {
commit('SET_STANDARD', standard.id)
commit('SET_STANDARDNAME', standard.name)
commit('SET_STANDARDTYPE', standard.type)
commit('SET_STANDARDCHAPTER', standard.chapter)
},
setStandardList({ commit }, name) {
getStandardList({
......@@ -41,6 +51,7 @@ const standard = {
}
})
}
}
}
......
src/views/setting/standardTerms/index.vue
View file @ 2dc0a080
<template>
<page-standard-option>
<div slot="tab">
<el-tabs v-model="queryParams.type" @tab-click="loadData">
<el-tab-pane
v-for="(dict, key) in reviewTypeList"
:key="key"
:label="dict.label"
:name="dict.value"
>
</el-tab-pane>
</el-tabs>
</div>
<div class="container">
<div>
<el-form
......@@ -41,14 +30,12 @@
<!--章节选择：select-->
<el-form-item prop="status">
<el-select v-model="queryParams.chapter" clearable placeholder="请选择章节">
<el-option
v-for="item in chapterOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input
v-model="queryParams.chapter"
placeholder="请输入章节"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!--标准要求输入：input-->
<el-form-item prop="status">
......@@ -171,18 +158,11 @@
<span class="el-tree-label">{{ node.label | ellipsis }}</span>
<!-- 多个空格 -->
<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span>
<span v-if="data.content" class="el-tree-content">{{ data.content | ellipsis }}</span>
<span v-if="data.chapter" class="el-tree-content"> {{ data.chapter+"\u00a0"+data.content | ellipsis }}</span>
<span v-else class="el-tree-content"> {{ data.content | ellipsis }}</span>
</div>
<!-- 当三级树为审查要点时将详情图标向左移动20px -->
<span v-if="data.label == '审查要点' && node.level == 2 " style="margin-right: 20px;">
<page-button
v-hasPermi="['setting:standardTerms:content']"
icon="doc-search"
title="检验内容"
@click.native="handleUpdate(data)"
></page-button>
</span>
<span v-if="data.label == '审查要点' && node.level == 3 " style="margin-right: 20px;">
<span v-if="data.label == '审查要点' " style="margin-right: 30px;" >
<page-button
v-hasPermi="['setting:standardTerms:content']"
icon="doc-search"
......@@ -281,13 +261,14 @@ export default {
showSearch: true, // 是否显示搜索框
tableData: [], // 储存最终处理后的数据信息
queryParams: { // 条件参数,储存用于搜索的条件
chapter: '',
chapter: this.$store.getters.standard_chapter,
text: '',
name:'',
standardNo:'',
standardId: this.$store.getters.standard,
type: 'system'
type:this.$store.getters.standard_type || 'system'
},
queryParams_final:{},
detailModelManager:{ // 传递参数,储存传递给弹窗的信息
dialogVisible:false, // 弹窗是否显现
refreshList: false,
......@@ -313,7 +294,8 @@ export default {
source: {},
dialogEditId: ''
},
refreshList: false
refreshList: false,
count:0
}
},
watch: {
......@@ -321,6 +303,27 @@ export default {
'$store.getters.standard': {
handler(newVal, oldVal) {
this.queryParams.standardId = newVal
this.count++
if(this.count>2){
this.loadData()
}
}
},
'$store.getters.standard_type': {
handler(newVal, oldVal) {
console.log(this.count)
this.queryParams.type = newVal
this.count++
if(this.count>3){
this.loadData()
}
}
},
'$store.getters.standard_chapter': {
handler(newVal, oldVal) {
this.queryParams.chapter = newVal
this.loadData()
}
},
......@@ -347,7 +350,7 @@ export default {
}
},
computed: { // 获取store储存数据
...mapGetters(['standard', 'standardList'])
...mapGetters(['standard', 'standardList','standard_type'])
},
created () { // 进入页面时获取数据
this.loadData()
......@@ -359,7 +362,8 @@ export default {
handleNodeClick(data) {
console.log(data);
},
async loadData() { // 获取源数据并进行处理处理
async loadData() {
console.log(this.queryParams) // 获取源数据并进行处理处理
if (this.queryParams.standardId !== '') {
this.loading = true
await request({
......@@ -383,31 +387,18 @@ export default {
this.tableData = [] // 初始化结果数据容器
let page = [] // 临时结果容器
let tempData = res.rows // 临时数据
for(let i = 0 ; i < tempData.length ; i++){ // 处理数据,将临时数据的每条数据处理为模板对象,之后放入临时结果容器中
// 模板对象格式
let obj = {
label:tempData[i].chapter,// 章节信息
content:' ',// 章节内容(当章节下只有一个标准要求时用到)
length:0,// 章节所包含的标准要求的数量
children:[] // 章节所包含的具体的标准要求信息
}
page.push(obj)
}
// for(let i = 0 ; i < tempData.length ; i++){ // 处理数据,将临时数据的每条数据处理为模板对象,之后放入临时结果容器中
// // 模板对象格式
// let obj = {
// label:tempData[i].chapter,// 章节信息
// content:' ',// 章节内容(当章节下只有一个标准要求时用到)
// length:0,// 章节所包含的标准要求的数量
// children:[] // 章节所包含的具体的标准要求信息
// }
// page.push(obj)
// }
let cache = [] // 去重后结果容器
let tempOptions = [] // 临时章节选项容器
forEach(page,(item)=>{// 去重
if(cache.find(c=>c.label == item.label)){
cache.find(c=>c.label == item.label).length++
}else{
item.length = 1
cache.push(item)
tempOptions.push({
label:item.label,
value:item.label
})
}
})
page = cache
if(this.chapterOptions.length < tempOptions.length || this.chapterOptions.length == 0){
......@@ -415,12 +406,13 @@ export default {
}
forEach(page,(pageItem)=>{ // 继续加工数据,对page容器中的每条数据pageItem处理
// 继续加工数据,对page容器中的每条数据pageItem处理
forEach(tempData,async (tempDataItem)=>{ // 对临时数据tempData中每条数据tempDataItem处理
if(tempDataItem.chapter == pageItem.label){// 当pageItem和tempDataItem章节属性匹配时,将tempDataItem数据进行模板化并储存到page容器中
// 当pageItem和tempDataItem章节属性匹配时,将tempDataItem数据进行模板化并储存到page容器中
let obj = {
id:tempDataItem.id,
label:'标准要求',
chapter:tempDataItem.chapter,
content:tempDataItem.text,
children:[]
}
......@@ -439,18 +431,11 @@ export default {
})
this.loading = false // 加载动画结束
}
})
if(pageItem.length>1){ // 当pageItem数据有多条标准要求时(length > 1),将模板化后的tempDataItem数据储存到pageItem数据的children中
pageItem.children.push(obj)
}else{ // 当pageItem数据只有一条标准要求时(length == 1),用二级子树的content和children替换一级树的content和children
//pageItem.children.push(obj)
pageItem.content = obj.content
pageItem.children = obj.children
}
}
page.push(obj)
})
console.log(tempDataItem)
})
this.tableData = page // 将临时数据容器赋给结果数据容器
//this.tableData = res.rows
this.total = res.total
......@@ -477,6 +462,7 @@ export default {
this.loadData()
},
handleUpdate(node) { // 查看检验内容 data:标准信息 node:审查信息
console.log(node)
let data = this.modelData.find((item)=>item.id === node.quireId) // 获取当前审查信息
let standard = this.standardList.find((item)=>item.id == this.standard)// 获取当前审查信息的standard信息
if(standard){
......@@ -521,7 +507,7 @@ export default {
}
}
</script>
<style lang="scss">
<style scoped lang="scss">
.item-box {
flex: 1;
display: flex;
......@@ -547,18 +533,18 @@ export default {
height: 50px;
}
// el-tree的样式设置
.tree{
.tree {
padding: 10px 20px;
.el-tree-node{ // 节点样式
::v-deep .el-tree-node{ // 节点样式
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.is-leaf::before{ // 叶子节点箭头样式设置:不显示
::v-deep .is-leaf::before{ // 叶子节点箭头样式设置:不显示
opacity: 0;
}
.el-tree-node__content { // 节点内容样式设置
::v-deep .el-tree-node__content { // 节点内容样式设置
width: 100%;
height: 40px;
//display: flex;
......@@ -567,28 +553,28 @@ export default {
color:black;
font-size: large;
border-radius: 5px;
background-color: #C0C0C0;
background-color: #f0f7ff;
}
.el-tree-node__content .el-tree-node__expand-icon { // 节点箭头样式设置
::v-deep .el-tree-node__content .el-tree-node__expand-icon { // 节点箭头样式设置
color: black;
}
.el-tree-node__children{ // 子节点样式设置
::v-deep .el-tree-node__children{ // 子节点样式设置
transition: all 0.5s;
}
.el-tree-node__children .el-tree-node__content{// 子节点内容样式设置
::v-deep .el-tree-node__children .el-tree-node__content{// 子节点内容样式设置
height: 30px;
margin: 5px 0;
background-color: white;
}
.el-tree-node__children .el-tree-node__children .el-tree-node__content .el-tree-node__expand-icon{
::v-deep .el-tree-node__children .el-tree-node__children .el-tree-node__content .el-tree-node__expand-icon{
opacity: 0;
}
.el-tree-label{ // 树中显示标题(label)设置
::v-deep .el-tree-label{ // 树中显示标题(label)设置
text-align: center;
font-size: 13px;
font-weight: bold;
}
.el-tree-content{ // 树中显示内容(content)设置
::v-deep .el-tree-content{ // 树中显示内容(content)设置
font-size: 14px;
}
}
......
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