Skip to content

W
web
Commit 251390f2 authored by zhang's avatar zhang
Browse files
Options

style: 提交8月21日修改

parent 17704faa
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 60 deletions
src/views/setting/standardTerms/index.vue
View file @ 251390f2
......@@ -27,8 +27,8 @@
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="status">
</el-form-item> -->
<!-- <el-form-item prop="status">
<el-select v-model="queryParams.standardId" placeholder="请选择标准号">
<el-option
v-for="item in standardList"
......@@ -38,6 +38,8 @@
</el-option>
</el-select>
</el-form-item> -->
<!--章节选择：select-->
<el-form-item prop="status">
<el-select v-model="queryParams.chapter" clearable placeholder="请选择章节">
<el-option
......@@ -48,6 +50,7 @@
</el-option>
</el-select>
</el-form-item>
<!--标准要求输入：input-->
<el-form-item prop="status">
<el-input
v-model="queryParams.text"
......@@ -64,6 +67,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- handleQuery:执行函数loadData -->
<el-form-item>
<el-button
type="primary"
......@@ -72,6 +76,7 @@
@click="handleQuery"
>查询</el-button
>
<!-- reset:清空条件参数queryParams属性值并执行函数loadData -->
<el-button
type="default"
icon="el-icon-refresh"
......@@ -136,6 +141,21 @@
</template>
</el-table-column>
</el-table> -->
<!--
树形结构
(1) loading:是否执行加载动画,
(2) data:数据源（
结构为：
tableData:{
label:''
children:[]
}
）
(3) defaultProps: 属性设置
(4) bordered: 设置边框
(5) @node-click: 点击node时执行handleNodeClick函数
-->
<el-tree
ref="tree"
class="tree"
......@@ -145,13 +165,16 @@
bordered
@node-click="handleNodeClick"
>
<!-- node:节点信息(由defaultProps定义) data: 当前节点包含的数据对象 -->
<span slot-scope="{ node,data }" style="display: flex;width: 1100px;;justify-content: space-between">
<div>
<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>
</div>
<span v-if="data.label == '审查要点' && node.level == 2 " >
<!-- 当三级树为审查要点时将详情图标向左移动20px -->
<span v-if="data.label == '审查要点' && node.level == 2 " style="margin-right: 20px;">
<page-button
v-hasPermi="['setting:standardTerms:content']"
icon="doc-search"
......@@ -179,6 +202,12 @@
@pagination="loadData"
>
</pagination> -->
<!-- 详情弹窗
ref: 绑定detailModel组件
dialog-manger: 设置传递到detail-model组件的参数
@close: 点击右上角的 x 时关闭弹窗
-->
<detail-model
ref="detailModel"
:dialog-manger="detailModelManager"
......@@ -212,6 +241,7 @@ import { listInspection } from '../../../api/setting/standardTerms'
import detailModel from './components/detailModel.vue'
import standard from '../../../store/modules/standard'
export default {
// 绑定组件
components: {
'vehiclemodel-dialog': vehicleModelDialog,
'document-review-dialog': documentReviewDialog,
......@@ -221,10 +251,10 @@ export default {
mixins: [page],
data() {
return {
listUrl: '/review/standard/list',
modelData:[],
chapterOptions:[],
reviewTypeList: [
listUrl: '/review/standard/list', // 获取章节数据信息路径
modelData:[], // 储存原始获取的数据
chapterOptions:[], // 储存章节选项
reviewTypeList: [ // 类型列表
{
label: '体系审查',
value: 'system'
......@@ -238,7 +268,7 @@ export default {
value: 'test'
}
],
defaultProps: {
defaultProps: { // node格式设置
children: 'children',
label: 'label',
isLeaf: (data, node) => {
......@@ -248,22 +278,22 @@ export default {
}
},
showSearch: true,
tableData: [],
queryParams: {
chapter: '',
showSearch: true, // 是否显示搜索框
tableData: [], // 储存最终处理后的数据信息
queryParams: { // 条件参数,储存用于搜索的条件
chapter: '',
text: '',
name:'',
standardNo:'',
standardId: this.$store.getters.standard,
type: 'system'
},
detailModelManager:{
dialogVisible:false,
detailModelManager:{ // 传递参数,储存传递给弹窗的信息
dialogVisible:false, // 弹窗是否显现
refreshList: false,
source: {
judge:{},
standard:{
source: { // 数据源
judge:{}, // 标准信息
standard:{ // 审查信息
standard:{
standardNo:'4869'
}
......@@ -307,19 +337,19 @@ export default {
}
}
},
filters: {
filters: { // 过滤器:当字符串超过64位时,之后的字符用...代替
ellipsis (value) {
if (!value) return ''
if (value.length > 64) {
return value.slice(0, 64) + '...'
if (value.length > 55) {
return value.slice(0, 55) + '...'
}
return value
}
},
computed: {
computed: { // 获取store储存数据
...mapGetters(['standard', 'standardList'])
},
created () {
created () { // 进入页面时获取数据
this.loadData()
},
methods: {
......@@ -329,7 +359,7 @@ export default {
handleNodeClick(data) {
console.log(data);
},
async loadData() {
async loadData() { // 获取源数据并进行处理处理
if (this.queryParams.standardId !== '') {
this.loading = true
await request({
......@@ -340,7 +370,7 @@ export default {
.then(async res => {
if (res.code === 200) {
console.log(res.rows)
this.modelData = res.rows
this.modelData = res.rows // 储存原始数据
// res.rows[0].carReviewStatus = 'FINISH'
// res.rows[0].reviewStatus = 'SIGNED'
// res.rows[0].carReviewStatus = 'FINISH'
......@@ -349,22 +379,23 @@ export default {
this.tableData = []
this.loading = false
}else{
this.loading = true
this.tableData = []
let page = []
let tempData = res.rows
for(let i = 0 ; i < tempData.length ; i++){
this.loading = true // 开始执行加载动画
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:[]
label:tempData[i].chapter,// 章节信息
content:' ',// 章节内容(当章节下只有一个标准要求时用到)
length:0,// 章节所包含的标准要求的数量
children:[] // 章节所包含的具体的标准要求信息
}
page.push(obj)
}
let cache = []
let tempOptions = []
forEach(page,(item)=>{
let cache = [] // 去重后结果容器
let tempOptions = [] // 临时章节选项容器
forEach(page,(item)=>{// 去重
if(cache.find(c=>c.label == item.label)){
cache.find(c=>c.label == item.label).length++
}else{
......@@ -378,16 +409,18 @@ export default {
})
page = cache
this.chapterOptions = tempOptions
forEach(page,(pageItem)=>{
forEach(tempData,async (tempDataItem)=>{
if(tempDataItem.chapter == pageItem.label){
forEach(page,(pageItem)=>{ // 继续加工数据,对page容器中的每条数据pageItem处理
forEach(tempData,async (tempDataItem)=>{ // 对临时数据tempData中每条数据tempDataItem处理
if(tempDataItem.chapter == pageItem.label){// 当pageItem和tempDataItem章节属性匹配时,将tempDataItem数据进行模板化并储存到page容器中
let obj = {
id:tempDataItem.id,
label:'标准要求',
content:tempDataItem.text,
children:[]
}
await listInspection({id:tempDataItem.id}).then(res=>{
// 异步处理
await listInspection({id:tempDataItem.id}).then(res=>{// 根据tempDataItem的id搜索详细数据
if(res.code == 200){
let temp = res.data
forEach(temp,(pointItem)=>{
......@@ -398,13 +431,13 @@ export default {
obj.children.push(pointDeepItem)
})
})
this.loading = false
this.loading = false // 加载动画结束
}
})
if(pageItem.length>1){
if(pageItem.length>1){ // 当pageItem数据有多条标准要求时(length > 1),将模板化后的tempDataItem数据储存到pageItem数据的children中
pageItem.children.push(obj)
}else{
}else{ // 当pageItem数据只有一条标准要求时(length == 1),用二级子树的content和children替换一级树的content和children
//pageItem.children.push(obj)
pageItem.content = obj.content
pageItem.children = obj.children
......@@ -412,7 +445,7 @@ export default {
}
})
})
this.tableData = page
this.tableData = page // 将临时数据容器赋给结果数据容器
//this.tableData = res.rows
this.total = res.total
}
......@@ -437,20 +470,21 @@ export default {
this.queryParams.standardNo = ''
this.loadData()
},
handleUpdate(node) {
let data = this.modelData.find((item)=>item.id === node.quireId)
let standard = this.standardList.find((item)=>item.id == this.standard)
handleUpdate(node) { // 查看检验内容 data:标准信息 node:审查信息
let data = this.modelData.find((item)=>item.id === node.quireId) // 获取当前审查信息
let standard = this.standardList.find((item)=>item.id == this.standard)// 获取当前审查信息的standard信息
if(standard){
data.standard = standard
}else{
data.standard = '--'
}
data.type =this.reviewTypeList.find((item)=>item.value == this.queryParams.type).label
node.content = node.content.trim()
this.detailModelManager.source.standard = data
data.type =this.reviewTypeList.find((item)=>item.value == this.queryParams.type).label // 获取当前审查信息的类型
node.content = node.content.trim() // 去空格
this.detailModelManager.source.standard = data // 赋值传递弹窗
this.detailModelManager.source.judge = node
forEach(node.reviewDetailsList,(detail)=>{
// 当点击审查信息时,将审查信息中的关联场景拼接为字符串,如果已经为字符串了则不做更改,当关联场景没有数据时以"--"代替
forEach(node.reviewDetailsList,(detail)=>{
if(typeof detail.reviewSceneList != 'string'){
let str = ''
forEach(detail.reviewSceneList,(scene)=>{
......@@ -473,9 +507,10 @@ export default {
// }
// console.log('dialogEditId', this.vehicleModelDialogManger.dialogEditId)
this.detailModelManager.dialogVisible = true
},
}
// handleQuery(){
// this.$store.dispatch('standard/setStandard', this.standardList.find((item)=>item.id == this.queryParams.standardId))
// this.loadData()
// }
}
}
......@@ -505,18 +540,19 @@ export default {
justify-content: space-between;
height: 50px;
}
// el-tree的样式设置
.tree{
padding: 10px 20px;
.el-tree-node{
.el-tree-node{ // 节点样式
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.is-leaf::before{
.is-leaf::before{ // 叶子节点箭头样式设置:不显示
opacity: 0;
}
.el-tree-node__content {
.el-tree-node__content { // 节点内容样式设置
width: 100%;
height: 40px;
//display: flex;
......@@ -527,13 +563,13 @@ export default {
border-radius: 5px;
background-color: #C0C0C0;
}
.el-tree-node__content .el-tree-node__expand-icon {
.el-tree-node__content .el-tree-node__expand-icon { // 节点箭头样式设置
color: black;
}
.el-tree-node__children{
.el-tree-node__children{ // 子节点样式设置
transition: all 0.5s;
}
.el-tree-node__children .el-tree-node__content{
.el-tree-node__children .el-tree-node__content{// 子节点内容样式设置
height: 30px;
margin: 5px 0;
background-color: white;
......@@ -541,12 +577,12 @@ export default {
.el-tree-node__children .el-tree-node__children .el-tree-node__content .el-tree-node__expand-icon{
opacity: 0;
}
.el-tree-label{
.el-tree-label{ // 树中显示标题(label)设置
text-align: center;
font-size: 13px;
font-weight: bold;
}
.el-tree-content{
.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