<template>
|
<a-row>
|
<a-col :md='6' :sm='24'>
|
<a-card :bordered='false' class='mh'>
|
<!-- 按钮操作区域 -->
|
<a-row class='btn-row'>
|
<a-button type='primary' @click='showOutlineModal'>添加</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 == 1' style='margin-left: 10px' @click='onClearSelected'>取消选择</a>
|
</div>
|
</a-alert>
|
<a-input-search style='width:100%;margin-top: 10px' @change='onChange' placeholder='请输入项目名称' />
|
<!-- 树-->
|
<a-col style="height: calc( 100vh - 400px ); overflow: auto;">
|
<template>
|
<a-dropdown :trigger='[this.dropTrigger]' @visibleChange='dropStatus'>
|
<span style='user-select: none'>
|
|
|
<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 key='1'>添加</a-menu-item>
|
<a-menu-item key='2'><span style='color: red'>删除</span></a-menu-item>
|
<a-menu-item key='3'>取消</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</template>
|
</a-col>
|
</div>
|
|
</a-card>
|
</a-col>
|
|
<a-col :md='18' :sm='24'>
|
<div style='width: 100%;height: 100%;border-left: 1px solid #e8e8e8'>
|
<div style='margin-bottom: 30px;display: flex' v-if='currSelectedTyp.id'>
|
<a-card title="测试电压" style='flex: 1;margin: 0 10px 0 0'>
|
<div style='padding: 10px 5px'>
|
<cond-tag :type='1' :currSelectedTyp='currSelectedTyp'></cond-tag>
|
</div>
|
</a-card>
|
|
|
<a-card title="测试温度" style='flex: 1;margin: 0 0 0 10px'>
|
<div style='padding: 10px 5px'>
|
<cond-tag :type='2' :currSelectedTyp='currSelectedTyp'></cond-tag>
|
</div>
|
</a-card>
|
|
</div>
|
<a-card title="鉴定指标项" class='cu'>
|
<j-vxe-table rowKey='id' keep-source :columns='columns' :dataSource='tableData'
|
@valueChange="handleValueChange">
|
<!-- <template v-for="col in ['max', 'typ', 'min']" :slot='col' slot-scope='text, record, index'>
|
<EditableCell :text='text' @change='onCellChange(record.id, col, $event)' />
|
</template>
|
|
<template slot='unit' slot-scope='text, record, index'>
|
<EdiStrtableCell :text='text' @change='onCellChange(record.id, "unit", $event)' />
|
</template> -->
|
|
<template v-slot:val="props">
|
<j-switch :disabled='props.row.valType == null || props.row.valType == 0'
|
:tips='options[props.row.valType == null ? 0 : props.row.valType]' :value='props.row.val'
|
@change="onSwCellChange(props.rowId, 'val', $event)" style='min-width: 80px'></j-switch>
|
</template>
|
|
<template v-slot:isJudge='props'>
|
<j-switch :value='props.row.isJudge' @change="onSwCellChange(props.rowId, 'isJudge', $event)"
|
style='min-width: 80px'></j-switch>
|
</template>
|
<!-- <template slot='valType' slot-scope='text, record'>
|
<j-dict-select-tag @change="onSelCellChange(record.id, 'valType', $event)" :value="text" title="值类型"
|
dictCode="stand_val_type" placeholder="请选择值类型" style='min-width: 100px' />
|
</template> -->
|
|
<!-- <template slot='judgment' slot-scope='text, record, index'>
|
<EdiStrtableCell :text='text' @change='onCellChange(record.id, "judgment", $event)' />
|
</template> -->
|
|
|
<!-- <template slot='operation' slot-scope='text, record'>
|
<a-popconfirm
|
v-if='tableData.length'
|
title='Sure to delete?'
|
@confirm='() => onDelete(record.id)'
|
>
|
<a href='javascript:;'>Delete</a>
|
</a-popconfirm>
|
</template>-->
|
</j-vxe-table>
|
</a-card>
|
</div>
|
</a-col>
|
<select-outline-modal ref='selectOutModal' @ok='selectOutModalOk'></select-outline-modal>
|
</a-row>
|
</template>
|
|
<script>
|
import { JVXETypes } from '@/components/jeecg/JVxeTable'
|
import { editItemTarget, queryItemTargetList, queryOutlineById, queryTreeByStandId } from '@api/lims'
|
import CondTag from '@views/limsTest/components/CondTag'
|
import EdiStrtableCell from '@views/limsTest/components/EdiStrtableCell'
|
import EditableCell from '@views/limsTest/components/EditableCell'
|
import SelectOutlineModal from '@views/limsTest/modules/SelectOutlineModal'
|
|
export default {
|
name: 'LimsItemTargetIdent',
|
components: { CondTag, EdiStrtableCell, EditableCell, SelectOutlineModal },
|
props: {
|
stand: {
|
type: Object,
|
required: true
|
}
|
|
},
|
data() {
|
return {
|
description: '鉴定指标',
|
loading: false,
|
searchValue: '',
|
//三种表单类型
|
TABLE: { CAT: 'CAT', TYP: 'TYP', ITM: 'ITM' },
|
options: [
|
["启用", "禁用"],
|
["是", "否"],
|
["有", "无"],
|
["OK", "NG"],
|
],
|
editingKey: '',
|
//当前选择
|
currSelected: {},
|
currSelectedTyp: {},
|
dropTrigger: '',
|
checkedKeys: [],
|
selectedKeys: [],
|
iExpandedKeys: [],
|
autoExpandParent: true,
|
checkStrictly: true,
|
treeData: [],
|
outline: {},
|
allTreeKeys: [],
|
model: {},
|
columns: [
|
{
|
title: '项目名称',
|
key: 'itemName',
|
width: '15%',
|
//scopedSlots: { customRender: 'itemName' }
|
},
|
{
|
title: '单位',
|
key: 'unit',
|
type: JVXETypes.input,
|
defaultValue: '',
|
width: '10%',
|
//scopedSlots: { customRender: 'unit' }
|
},
|
{
|
title: '最大值',
|
key: 'max',
|
type: JVXETypes.inputNumber,
|
width: '10%',
|
//scopedSlots: { customRender: 'max' }
|
},
|
{
|
title: '典型值',
|
key: 'typ',
|
type: JVXETypes.inputNumber,
|
width: '10%',
|
// scopedSlots: { customRender: 'typ' }
|
},
|
{
|
title: '最小值',
|
key: 'min',
|
type: JVXETypes.inputNumber,
|
width: '10%',
|
//scopedSlots: { customRender: 'min' }
|
},
|
{
|
title: '判定类型',
|
key: 'valType',
|
type: JVXETypes.select,
|
dictCode: 'stand_val_type',
|
width: '10%',
|
// validateRules: [
|
// {
|
// required: true, // 必填
|
// message: '请选择${title}' // 显示的文本
|
// },]
|
//scopedSlots: { customRender: 'valType' }
|
},
|
{
|
title: '合格值',
|
key: 'val',
|
type: JVXETypes.slot,
|
width: '10%',
|
slotName: 'val'
|
},
|
{
|
title: '是否评判',
|
key: 'isJudge',
|
width: '10%',
|
type: JVXETypes.slot,
|
slotName: 'isJudge'
|
},
|
{
|
title: '判定描述',
|
key: 'judgment',
|
type: JVXETypes.input,
|
width: '10%',
|
//scopedSlots: { customRender: 'judgment' }
|
},
|
/* {
|
title: 'operation',
|
dataIndex: 'operation',
|
scopedSlots: { customRender: 'operation' }
|
}*/
|
],
|
tableData: []
|
}
|
},
|
mounted() {
|
this.queryTreeList()
|
this.queryOutline()
|
},
|
methods: {
|
refresh() {
|
this.queryTreeList()
|
},
|
getCurrSelectedTitle() {
|
return !this.currSelected.title ? '' : this.currSelected.title
|
},
|
onClearSelected() {
|
this.hiding = true
|
this.checkedKeys = []
|
this.currSelected = {}
|
this.currSelectedTyp = {}
|
this.selectedKeys = []
|
this.model = {}
|
|
},
|
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
|
})
|
},
|
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]
|
|
//查询item-target
|
this.queryItemTarget(record)
|
|
//如果点击的是二级菜单，需要显示检测条件录入部分
|
if (record.type === 'TYP') {
|
console.info('show =-=-=-=-=-=-=-=-=-=-=')
|
this.currSelectedTyp = Object.assign({}, record)
|
this.currSelectedTyp.standardId = this.stand.id
|
} else {
|
this.currSelectedTyp = {}
|
}
|
|
|
},
|
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])
|
}
|
}
|
},
|
/**********************网络请求 start**********************/
|
//查询技术大纲明细 cat - typ - itm 树
|
queryTreeList() {
|
this.loading = true
|
console.info(this.stand)
|
queryTreeByStandId({ standardId: this.stand.id, enabled: 1 }).then(res => {
|
console.info(res)
|
if (res.success) {
|
this.allTreeKeys = []
|
this.iExpandedKeys = []
|
let data = res.result
|
this.treeData = []
|
//不展示第三层数据 ITM
|
this.delThridData(data)
|
for (let i = 0; i < data.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
|
})
|
|
},
|
//删除第三层数据 itm
|
delThridData(data) {
|
for (let i = data.length - 1; i >= 0; i--) {
|
let item = data[i]
|
if (item.type == 'ITM') {
|
data.splice(i, 1)
|
}
|
let children = item.children
|
if (children) {
|
this.delThridData(children)
|
}
|
}
|
return data
|
},
|
//查询技术大纲
|
queryOutline() {
|
this.loading = true
|
queryOutlineById({ id: this.stand.outlineId }).then(res => {
|
console.info(res)
|
if (res.success) {
|
this.outline = res.result
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
//查询技术标准-鉴定指标
|
queryItemTarget(record) {
|
const type = record.type
|
if (!type) {
|
return
|
}
|
let params = {}
|
params.pageNo = 1;
|
params.pageSize = 1000;
|
if (type == this.TABLE.CAT) {
|
params.categoryId = record.id
|
|
} else if (type == this.TABLE.TYP) {
|
params.typeId = record.id
|
}
|
params.enabled = 1
|
params.standardId = this.stand.id
|
//不同的目录层级 查询方式不一致
|
//TYPE = 1 使用category_id查询 TYPE = 1 使用type_id 查询
|
queryItemTargetList(params).then(res => {
|
if (res.success) {
|
this.tableData = res.result.records
|
console.log(`output->this.tableData`, this.tableData)
|
}
|
})
|
},
|
//编辑一行数据
|
editItem(item) {
|
editItemTarget(item).then(res => {
|
if (res.success) {
|
//this.$message.success('操作成功！')
|
//编辑成功后重新加载数据
|
// this.queryItemTarget(this.currSelected)
|
}
|
|
})
|
|
},
|
/**********************网络请求 end**********************/
|
|
/**********************可编辑table start**********************/
|
onCellChange(id, dataIndex, value) {
|
const dataSource = [...this.tableData]
|
const target = dataSource.find(item => item.id === id)
|
if (target) {
|
target[dataIndex] = value
|
//this.tableData = dataSource;
|
}
|
this.editItem(target)
|
|
},
|
|
onSelCellChange(id, dataIndex, value) {
|
const dataSource = [...this.tableData];
|
const target = dataSource.find(item => item.id === id);
|
if (target) {
|
target[dataIndex] = value;
|
//this.tableData = dataSource;
|
}
|
|
this.editItem(target)
|
},
|
onSwCellChange(id, dataIndex, value) {
|
console.log(`output->id`, id)
|
console.log(`output->dataIndex`, dataIndex)
|
console.log(`output->value`, value)
|
const dataSource = [...this.tableData]
|
const target = dataSource.find(item => item.id === id)
|
if (target) {
|
target[dataIndex] = value
|
}
|
this.editItem(target)
|
},
|
|
|
onDelete(id) {
|
const dataSource = [...this.tableData]
|
this.tableData = dataSource.filter(item => item.id !== id)
|
},
|
/**********************可编辑table end**********************/
|
|
|
showOutlineModal() {
|
console.info(this.outline)
|
this.$refs.selectOutModal.show(this.outline, this.stand)
|
},
|
selectOutModalOk() {
|
this.queryTreeList()
|
},
|
handleValueChange(event) {
|
console.log('handleValueChange.event: ', event)
|
this.editItem(event.row)
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
.mh {
|
min-height: calc(100vh - 140px);
|
background-color: white;
|
}
|
|
.btn-row {
|
|
button {
|
margin-right: 10px;
|
}
|
}
|
|
/deep/ .ant-card-body {
|
padding-top: 0px;
|
padding-left: 0px;
|
}
|
|
/deep/ .cu .ant-card-body {
|
padding: 0px;
|
}
|
</style>
|
