<template>
|
<j-modal :title='title' :width='width' :visible='visible' switchFullscreen @ok='handleOk'
|
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel='handleCancel' cancelText='关闭'>
|
|
<a-row :gutter='10'>
|
<a-col :md='8' :sm='24'>
|
<a-card :bordered='false' class='mh'>
|
|
<!-- 按钮操作区域 -->
|
|
|
<div style='background: #fff;height: 100%; margin-top: 5px'>
|
<a-alert type='info' :showIcon='true'>
|
<div slot='message'>
|
大纲：{{ outline.name }} {{ outline.ver }}
|
</div>
|
</a-alert>
|
<a-row class='btn-row'>
|
<a-button @click='refresh' type='default' icon='reload' :loading='loading'>刷新</a-button>
|
</a-row>
|
<a-input-search @search='onSearch' style='width:100%;margin-top: 10px' @change='onChange'
|
placeholder='请输入项目名称' />
|
<!-- 树-->
|
<a-col style="height: calc( 100vh - 440px ); overflow: auto;">
|
<template>
|
|
<span style='user-select: none'>
|
|
<a-tree checkable multiple :show-line='true' @select='onSelect' @check='onCheck'
|
: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>
|
</template>
|
</a-col>
|
</div>
|
|
</a-card>
|
<!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
<div class='drawer-bootom-button'>
|
<a-dropdown :trigger="['click']" placement='topCenter'>
|
<a-menu slot='overlay'>
|
<a-menu-item key='1' @click='switchCheckStrictly(1)'>父子关联</a-menu-item>
|
<!-- <a-menu-item key='2' @click='switchCheckStrictly(2)'>取消关联</a-menu-item>-->
|
<a-menu-item key='3' @click='checkALL'>全部勾选</a-menu-item>
|
<a-menu-item key='4' @click='cancelCheckALL'>取消全选</a-menu-item>
|
<a-menu-item key='5' @click='expandAllItem'>展开所有</a-menu-item>
|
<a-menu-item key='6' @click='closeAll'>合并所有</a-menu-item>
|
</a-menu>
|
<a-button>
|
树操作
|
<a-icon type='up' />
|
</a-button>
|
</a-dropdown>
|
</div>
|
<!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
</a-col>
|
|
<a-col :md='16' :sm='24'>
|
|
<div class='mh'>
|
<a-card :bordered='false' v-show='model.type == TABLE.CAT'>
|
<a-divider>鉴定类别</a-divider>
|
<lims-testing-category-form ref='catForm' :disabled='true'></lims-testing-category-form>
|
|
</a-card>
|
|
<a-card :bordered='false' v-show='model.type == TABLE.TYP'>
|
<a-divider>鉴定类型</a-divider>
|
<lims-testing-type-form ref='typForm' :disabled='true'></lims-testing-type-form>
|
|
</a-card>
|
|
|
<a-card :bordered='false' v-show='model.type == TABLE.ITM'>
|
<a-divider>鉴定项目</a-divider>
|
<lims-testing-item-form ref='itmForm' :disabled='true'></lims-testing-item-form>
|
|
|
</a-card>
|
|
<a-card v-show='!model.type'>
|
<a-empty>
|
<span slot='description'> 请先选择一个项目! </span>
|
</a-empty>
|
</a-card>
|
</div>
|
</a-col>
|
|
|
</a-row>
|
|
|
</j-modal>
|
</template>
|
|
<script>
|
import { treeList, queryTreeByStandId, addItemTargetBatch } from '@api/lims'
|
|
import LimsTestingCategoryForm from '@views/limsTest/modules/LimsTestingCategoryForm'
|
import LimsTestingTypeForm from '@views/limsTest/modules/LimsTestingTypeForm'
|
import LimsTestingItemForm from '@views/limsTest/modules/LimsTestingItemForm'
|
|
export default {
|
name: 'SelectOutlineModal',
|
components: { LimsTestingItemForm, LimsTestingTypeForm, LimsTestingCategoryForm },
|
|
data() {
|
return {
|
title: '选择鉴定大纲',
|
width: 1000,
|
visible: false,
|
disableSubmit: false,
|
|
searchValue: '',
|
//当前选择
|
currSelected: {},
|
dropTrigger: '',
|
checkedKeys: [],
|
//区分是否选择了子项
|
checkedSubKeys: [],
|
selectedKeys: [],
|
iExpandedKeys: [],
|
autoExpandParent: true,
|
checkStrictly: false,
|
treeData: [],
|
allTreeKeys: [],
|
model: {},
|
loading: false,
|
//三种表单类型
|
TABLE: { CAT: 'CAT', TYP: 'TYP', ITM: 'ITM' },
|
|
|
outline: {},
|
stand: {}
|
}
|
},
|
methods: {
|
show(outline, stand) {
|
this.visible = true
|
this.outline = outline
|
this.stand = stand
|
|
this.queryCheckedTreeList()
|
|
},
|
|
close() {
|
this.$emit('close')
|
this.visible = false
|
},
|
handleOk() {
|
console.info(this.checkedSubKeys)
|
if (this.checkedSubKeys.length < 1) {
|
this.$message.warning('至少选择一个项目！')
|
return false
|
}
|
const ids = this.checkedSubKeys.join(',')
|
console.info(ids)
|
this.addItemBatch(ids)
|
|
},
|
submitCallback() {
|
this.$emit('ok')
|
this.visible = false
|
},
|
handleCancel() {
|
this.close()
|
},
|
refresh() {
|
this.queryCheckedTreeList()
|
},
|
getCurrSelectedTitle() {
|
return !this.currSelected.title ? '' : this.currSelected.title
|
},
|
onClearSelected() {
|
this.hiding = true
|
this.checkedKeys = []
|
this.checkedSubKeys = []
|
this.currSelected = {}
|
this.selectedKeys = []
|
this.model = {}
|
|
},
|
|
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 (this.getParentKey(key, node.children)) {
|
parentKey = this.getParentKey(key, node.children)
|
}
|
}
|
}
|
return parentKey
|
},
|
|
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) {
|
if (record.type == this.TABLE.CAT) {
|
//1级目录没有pid
|
let parent = { outlineId: this.outline.id, outlineName: this.outline.name }
|
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.createNodeData(info.checkedNodes)
|
this.hiding = false
|
//---- -- for:切换父子勾选模式 =======------
|
if (this.checkStrictly) {
|
this.checkedKeys = checkedKeys.checked
|
} else {
|
this.checkedKeys = checkedKeys
|
}
|
//---- -- for:切换父子勾选模式 =======------
|
},
|
createNodeData(checkedNodes) {
|
let list = checkedNodes.map(item => {
|
let data = item.data.props.dataRef
|
console.info(data)
|
return {
|
id: data.id,
|
name: data.title,
|
type: data.type,
|
pid: data.pid
|
}
|
})
|
//筛选孙子类
|
let itmList = list.filter(item => item.type == this.TABLE.ITM).map(item => item.id)
|
this.checkedSubKeys = itmList
|
|
|
},
|
onExpand(expandedKeys) {
|
console.log('onExpand', expandedKeys)
|
this.iExpandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
|
|
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])
|
}
|
}
|
},
|
|
//---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------
|
expandAllItem() {
|
this.iExpandedKeys = this.allTreeKeys
|
},
|
closeAll() {
|
this.iExpandedKeys = []
|
},
|
checkALL() {
|
this.checkStriccheckStrictlytly = false
|
this.checkedKeys = this.allTreeKeys
|
this.checkedSubKeys = this.allTreeKeys
|
},
|
cancelCheckALL() {
|
//this.checkedKeys = this.defaultCheckedKeys
|
this.checkedKeys = []
|
this.checkedSubKeys = []
|
},
|
switchCheckStrictly(v) {
|
if (v == 1) {
|
this.checkStrictly = false
|
} else if (v == 2) {
|
this.checkStrictly = true
|
}
|
},
|
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])
|
}
|
}
|
},
|
//---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------
|
onSearch(value) {
|
|
},
|
onChange(e) {
|
const value = e.target.value
|
const expandedKeys = this.treeData
|
.map(item => {
|
if (item.title.indexOf(value) > -1) {
|
return this.getParentKey(item.key, this.treeData)
|
}
|
return null
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i)
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: value,
|
autoExpandParent: true
|
})
|
},
|
fitTreeData() {
|
//TODO 如果数据没有孙子节点，则不需要显示
|
const delBlank = (tree, pindex) => {
|
for (let i = 0; i < tree.length; i++) {
|
let node = tree[i]
|
if (!node.children || node.children.length < 1) {
|
if (node.type == this.TABLE.CAT) {
|
this.treeData.splice(i, 1)
|
} else if (node.type == this.TABLE.TYP) {
|
this.treeData[pindex].children.splice(i, 1)
|
}
|
} else {
|
delBlank(node.children, i)
|
}
|
}
|
}
|
delBlank(this.treeData)
|
|
},
|
|
/********************=网络请求start=**********************/
|
/**
|
* checkIds 已选择项id（服务器数据）
|
* */
|
queryTreeList(checkIds) {
|
this.loading = true
|
queryTreeByStandId({ standardId: this.stand.id, enabled: 0 }).then(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)
|
this.fitTreeData()
|
//树加载完成后赋值已选择的树
|
this.checkedKeys = checkIds
|
this.checkedSubKeys = checkIds
|
}
|
}
|
|
}).finally(() => {
|
this.loading = false
|
})
|
|
},
|
//查询已选择树
|
queryCheckedTreeList() {
|
queryTreeByStandId({ standardId: this.stand.id, enabled: 1 }).then(res => {
|
if (res.success) {
|
let result = res.result
|
//已选择id
|
let ids = []
|
//递归获取已选择ITM ID
|
this.getSubids(result, ids)
|
|
//查询大纲所有树
|
this.queryTreeList(ids)
|
}
|
|
})
|
},
|
//递归获取item id
|
getSubids(tree, ids) {
|
tree.forEach(item => {
|
if (item.type == this.TABLE.ITM) {
|
ids.push(item.id)
|
}
|
if (item.children && item.children.length > 0) {
|
this.getSubids(item.children, ids)
|
}
|
})
|
},
|
//批量添加技术标项
|
addItemBatch(ids) {
|
if (!this.stand.id) {
|
this.$message.error('技术标准参数错误，请退出重试！')
|
return false
|
}
|
if (!this.outline.id) {
|
this.$message.error('鉴定大纲参数错误，请退出重试！')
|
return false
|
}
|
this.loading = true
|
addItemTargetBatch({
|
itemIds: ids, standardId: this.stand.id,
|
outlineId: this.outline.id
|
}).then(res => {
|
if (res.success) {
|
this.$message.success('添加成功！')
|
this.submitCallback()
|
} else {
|
this.$message.error('添加失败！')
|
}
|
|
}).finally(() => {
|
this.loading = false
|
})
|
}
|
|
|
/********************=网络请求end=**********************/
|
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
.mh {
|
background-color: white;
|
}
|
|
.btn-row {
|
margin-top: 10px;
|
|
button {
|
margin-right: 10px;
|
}
|
}
|
</style>
|
