<template>
|
<a-row :gutter='10'>
|
<a-col :md='8' :sm='24'>
|
<a-card :bordered='false' class='mh'>
|
<div> <span style='font-size: 18px;font-weight: bold'>{{ outline.outlineName }} </span> {{ outline.ver }}</div>
|
<!-- 按钮操作区域 -->
|
<a-row class='btn-row'>
|
<a-button type='primary' @click='handleAddCat' :disabled='dis'>添加类别</a-button>
|
<!-- <a-button type='primary' icon='download'>导出</a-button>
|
<a-upload name='file' :showUploadList='false' :multiple='false'>
|
<a-button type='primary' icon='import'>导入</a-button>
|
</a-upload>
|
<a-button title='删除多条数据' type='default'>批量删除</a-button>-->
|
<a-button @click='refresh' type='default' icon='reload' :loading='loading'>刷新</a-button>
|
</a-row>
|
|
<div style='background: #fff;height: 100%; margin-top: 5px'>
|
<a-alert type='info' :showIcon='true'>
|
<div slot='message'>
|
当前选择：<span v-if='this.currSelected.title'>{{ getCurrSelectedTitle() }}</span>
|
<a v-if='this.currSelected.title' style='margin-left: 10px' @click='onClearSelected'>取消选择</a>
|
</div>
|
</a-alert>
|
<a-input-search @search='onSearch' style='width:100%;margin-top: 10px' @change='onChange'
|
placeholder='请输入项目名称' />
|
<!-- 树-->
|
<a-col style=" height: calc( 100vh - 345px );overflow: auto;">
|
<template>
|
<a-dropdown :trigger='[this.dropTrigger]' @visibleChange='dropStatus'>
|
<span style='user-select: none'>
|
|
<!-- checkable-->
|
<!-- multiple-->
|
<a-tree :show-line='true' :show-icon='true' @select='onSelect' @check='onCheck'
|
@rightClick='rightHandle' :selectedKeys='selectedKeys' :checkedKeys='checkedKeys' :treeData='treeData'
|
:checkStrictly='checkStrictly' :expandedKeys='iExpandedKeys' :autoExpandParent='autoExpandParent'
|
@expand='onExpand'>
|
|
<template slot='title' slot-scope='{ title }'>
|
<span v-if='title.indexOf(searchValue) > -1'>
|
{{ title.substr(0, title.indexOf(searchValue)) }}
|
<span style='color: #f50'>{{ searchValue }}</span>
|
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
|
</span>
|
<span v-else>{{ title }}</span>
|
</template>
|
</a-tree>
|
</span>
|
<!--新增右键点击事件,和增加添加和删除功能-->
|
<a-menu slot='overlay'>
|
<a-menu-item v-show='!rightAdd' @click='add' key='1'>添加下级</a-menu-item>
|
<a-menu-item @click='del' key='2'><span style='color: red'>删除</span></a-menu-item>
|
<a-menu-item @click='closeDrop' key='3'>取消</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</template>
|
</a-col>
|
</div>
|
|
</a-card>
|
</a-col>
|
|
<a-col :md='16' :sm='24'>
|
<!-- <a-card :bordered='false'>
|
<a-tabs defaultActiveKey="1" >
|
<a-tab-pane tab="基本信息" key="1" >
|
<a-card :bordered="false" v-if="selectedKeys.length>0">
|
</a-card>
|
<a-card v-else >
|
<a-empty>
|
<span slot="description"> 请先选择一个项目! </span>
|
</a-empty>
|
</a-card>
|
</a-tab-pane>
|
<a-tab-pane tab="用户信息" key="2" forceRender>
|
<div>2</div>
|
</a-tab-pane>
|
<a-tab-pane tab="部门角色" key="3" forceRender>
|
<div>3</div>
|
</a-tab-pane>
|
</a-tabs>
|
</a-card>-->
|
<div class='mh'>
|
<a-card :bordered='false' v-show='model.type == TABLE.CAT'>
|
<a-divider>鉴定类别</a-divider>
|
<lims-testing-category-form ref='catForm' @ok='submitCallback1' :disabled='dis'></lims-testing-category-form>
|
<div style='width: 100%;text-align: center' v-show='!dis'>
|
<a-button type='dashed' @click='onReset1' v-show='!model.id'>
|
重置
|
</a-button>
|
<a-button style='margin-left: 10px' type='primary' @click='onSubmit1'>
|
提交
|
</a-button>
|
</div>
|
</a-card>
|
|
<a-card :bordered='false' v-show='model.type == TABLE.TYP'>
|
<a-divider>鉴定类型</a-divider>
|
<lims-testing-type-form ref='typForm' @ok='submitCallback2' :disabled='dis'></lims-testing-type-form>
|
<div style='width: 100%;text-align: center' v-show='!dis'>
|
<a-button type='dashed' @click='onReset2' v-show='!model.id'>
|
重置
|
</a-button>
|
<a-button style='margin-left: 10px' type='primary' @click='onSubmit2'>
|
提交
|
</a-button>
|
</div>
|
</a-card>
|
|
|
<a-card :bordered='false' v-show='model.type == TABLE.ITM'>
|
<a-divider>鉴定项目</a-divider>
|
<lims-testing-item-form ref='itmForm' @ok='submitCallback3' :disabled='dis'></lims-testing-item-form>
|
<div style='width: 100%;text-align: center' v-show='!dis'>
|
<a-button type='dashed' @click='onReset3' v-show='!model.id'>
|
重置
|
</a-button>
|
<a-button style='margin-left: 10px' type='primary' @click='onSubmit3'>
|
提交
|
</a-button>
|
</div>
|
|
</a-card>
|
|
<a-card v-show='!model.type'>
|
<a-empty>
|
<span slot='description'> 请先选择一个项目! </span>
|
</a-empty>
|
</a-card>
|
</div>
|
</a-col>
|
|
<lims-testing-category-modal :outline-id='outline.outlineId' :outline-name='outline.outlineName'
|
ref='catModal'></lims-testing-category-modal>
|
</a-row>
|
</template>
|
|
<script>
|
import { treeList,queryOutlineById } from '@/api/lims'
|
import LimsTestingCategoryModal from '@views/limsTest/modules/LimsTestingCategoryModal'
|
import LimsTestingCategoryForm from '@views/limsTest/modules/LimsTestingCategoryForm'
|
import LimsTestingTypeForm from '@views/limsTest/modules/LimsTestingTypeForm'
|
import LimsTestingItemForm from '@views/limsTest/modules/LimsTestingItemForm'
|
|
const getParentKey = (key, tree) => {
|
let parentKey
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i]
|
if (node.children) {
|
if (node.children.some(item => item.key === key)) {
|
parentKey = node.key
|
} else if (getParentKey(key, node.children)) {
|
parentKey = getParentKey(key, node.children)
|
}
|
}
|
}
|
return parentKey
|
}
|
export default {
|
name: 'OutlineMaintainPage',
|
components: { LimsTestingItemForm, LimsTestingTypeForm, LimsTestingCategoryForm, LimsTestingCategoryModal },
|
|
data() {
|
return {
|
searchValue: '',
|
//当前选择
|
currSelected: {},
|
dropTrigger: '',
|
checkedKeys: [],
|
selectedKeys: [],
|
iExpandedKeys: [],
|
autoExpandParent: true,
|
checkStrictly: true,
|
treeData: [],
|
allTreeKeys: [],
|
model: {},
|
loading: false,
|
//三种表单类型
|
TABLE: { CAT: 'CAT', TYP: 'TYP', ITM: 'ITM' },
|
//大纲的状态 0-新建 1-发布 2-废止
|
STATU: { S0: 0, S1: 1, S2: 2 },
|
//当前右键的node
|
rightNode: {},
|
rightAdd: true,
|
out: {}
|
|
}
|
},
|
created() {
|
},
|
mounted() {
|
this.queryOutline()
|
this.queryTreeList()
|
},
|
methods: {
|
refresh() {
|
this.queryOutline()
|
this.queryTreeList()
|
},
|
getCurrSelectedTitle() {
|
return !this.currSelected.title ? '' : this.currSelected.title
|
},
|
onClearSelected() {
|
this.hiding = true
|
this.checkedKeys = []
|
this.currSelected = {}
|
this.selectedKeys = []
|
this.model = {}
|
|
},
|
|
onSelect(selectedKeys, e) {
|
console.log('selected', selectedKeys, e)
|
this.hiding = false
|
let record = e.node.dataRef
|
console.log('onSelect-record', record)
|
this.currSelected = Object.assign({}, record)
|
this.model = this.currSelected
|
this.selectedKeys = [record.key]
|
//this.model.parentId = record.parentId
|
this.setValuesToForm(record)
|
|
},
|
setValuesToForm(record) {
|
console.info(record)
|
if (record.type == this.TABLE.CAT) {
|
//1级目录没有pid
|
let parent = { outlineId: this.outline.outlineId, outlineName: this.outline.outlineName }
|
this.$refs.catForm.setData(parent, this.model)
|
} else if (record.type == this.TABLE.TYP) {
|
let parent = { categoryId: record.pid, categoryName: record.pname }
|
this.$refs.typForm.setData(parent, this.model)
|
} else if (record.type == this.TABLE.ITM) {
|
let parent = { typeId: record.pid, typeName: record.pname }
|
this.$refs.itmForm.setData(parent, this.model)
|
}
|
},
|
onCheck(checkedKeys, info) {
|
console.log('onCheck', checkedKeys, info)
|
this.hiding = false
|
//---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------
|
if (this.checkStrictly) {
|
this.checkedKeys = checkedKeys.checked
|
} else {
|
this.checkedKeys = checkedKeys
|
}
|
//---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------
|
},
|
// 右键操作方法
|
rightHandle(node) {
|
console.info(node.node.dataRef)
|
|
|
this.rightAdd = (node.node.dataRef.type == this.TABLE.ITM)
|
this.dropTrigger = 'contextmenu'
|
console.log(node.node.eventKey)
|
//this.rightClickSelectedKey = node.node.eventKey
|
this.rightNode = node.node.dataRef
|
},
|
onExpand(expandedKeys) {
|
console.log('onExpand', expandedKeys)
|
this.iExpandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
|
|
// 右键点击下拉框改变事件
|
dropStatus(visible) {
|
if (visible == false) {
|
this.dropTrigger = ''
|
}
|
},
|
// 右键下拉关闭下拉框
|
closeDrop() {
|
this.dropTrigger = ''
|
},
|
|
setThisExpandedKeys(node) {
|
if (node.children && node.children.length > 0) {
|
this.iExpandedKeys.push(node.key)
|
for (let a = 0; a < node.children.length; a++) {
|
this.setThisExpandedKeys(node.children[a])
|
}
|
}
|
},
|
getAllKeys(node) {
|
// console.log('node',node);
|
this.allTreeKeys.push(node.key)
|
if (node.children && node.children.length > 0) {
|
for (let a = 0; a < node.children.length; a++) {
|
this.getAllKeys(node.children[a])
|
}
|
}
|
},
|
onSearch(value) {
|
|
},
|
onChange(e) {
|
const value = e.target.value
|
const expandedKeys = this.treeData
|
.map(item => {
|
if (item.title.indexOf(value) > -1) {
|
return getParentKey(item.key, this.treeData)
|
}
|
return null
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i)
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: value,
|
autoExpandParent: true
|
})
|
},
|
|
/********************=modal start=**********************/
|
|
add() {
|
console.info(this.rightNode)
|
if (this.rightNode.type == this.TABLE.CAT) {
|
this.handleAddTyp(this.rightNode)
|
|
} else if (this.rightNode.type == this.TABLE.TYP) {
|
this.handleAddItm(this.rightNode)
|
|
} else if (this.rightNode.type == this.TABLE.ITM) {
|
|
}
|
},
|
del() {
|
let that = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div>此操作会删除<span style='color:red;'>当前节点和所有子项</span>且不可恢复，确定删除？</div>,
|
onOk() {
|
if (that.rightNode.type == that.TABLE.CAT) {
|
that.$refs.catForm.del(that.rightNode.id)
|
} else if (that.rightNode.type == that.TABLE.TYP) {
|
that.$refs.typForm.del(that.rightNode.id)
|
|
} else if (that.rightNode.type == that.TABLE.ITM) {
|
that.$refs.itmForm.del(that.rightNode.id)
|
}
|
},
|
onCancel() {
|
|
},
|
class: 'test'
|
})
|
|
},
|
|
handleAddCat() {
|
//this.$refs.catModal.add()
|
this.model = { type: this.TABLE.CAT }
|
let parent = { outlineId: this.outline.outlineId, outlineName: this.outline.outlineName }
|
this.$refs.catForm.setData(parent, this.model)
|
},
|
handleAddTyp(node) {
|
this.model = { type: this.TABLE.TYP }
|
let parent = { categoryId: node.id, categoryName: node.title }
|
this.$refs.typForm.setData(parent, this.model)
|
},
|
handleAddItm(node) {
|
|
this.model = { type: this.TABLE.ITM }
|
let parent = { typeId: node.id, typeName: node.title }
|
this.$refs.itmForm.setData(parent, this.model)
|
},
|
|
/********************=modal end=**********************/
|
|
/********************=网络请求start=**********************/
|
//查询技术大纲
|
queryOutline() {
|
this.loading = true
|
queryOutlineById({ id: this.outline.outlineId }).then(res => {
|
console.info(res)
|
if (res.success) {
|
this.out = res.result
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
queryTreeList() {
|
this.loading = true
|
treeList({ outlineId: this.outline.outlineId }).then(res => {
|
console.info(res)
|
if (res.success) {
|
this.allTreeKeys = []
|
this.iExpandedKeys = []
|
this.treeData = []
|
for (let i = 0; i < res.result.length; i++) {
|
let temp = res.result[i]
|
this.treeData.push(temp)
|
this.setThisExpandedKeys(temp)
|
this.getAllKeys(temp)
|
// console.log(temp.id)
|
}
|
}
|
|
}).finally(() => {
|
this.loading = false
|
})
|
|
},
|
onSubmit1() {
|
this.$refs.catForm.submitForm()
|
},
|
onReset1() {
|
this.$refs.catForm.resetForm()
|
},
|
submitCallback1() {
|
this.queryTreeList()
|
},
|
onSubmit2() {
|
this.$refs.typForm.submitForm()
|
},
|
onReset2() {
|
this.$refs.typForm.resetForm()
|
},
|
submitCallback2() {
|
this.queryTreeList()
|
},
|
onSubmit3() {
|
this.$refs.itmForm.submitForm()
|
},
|
onReset3() {
|
this.$refs.itmForm.resetForm()
|
},
|
submitCallback3() {
|
this.queryTreeList()
|
}
|
|
/********************=网络请求end=**********************/
|
},
|
computed: {
|
outline() {
|
return {
|
//大纲id
|
outlineId: this.$route.query.id,
|
//大纲名称
|
outlineName: this.$route.query.name,
|
ver: this.$route.query.ver,
|
}
|
},
|
dis() {
|
//只有新建状态可以编辑，其他状态不可编辑
|
return this.out.status != this.STATU.S0
|
}
|
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
.mh {
|
min-height: calc(100vh - 140px);
|
background-color: white;
|
}
|
|
.btn-row {
|
margin-top: 10px;
|
|
button {
|
margin-right: 10px;
|
}
|
}
|
</style>
|
