<template>
|
<a-modal width="75%" :title="title" :visible="visible" @cancel="visible=false" :maskClosable="false" centered
|
@ok="handleAssignDocumentToDevice">
|
<div class="tabs-container">
|
<div style="width: 72%">
|
<a-tabs>
|
<a-tab-pane tab="文档列表">
|
<div class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :md="7" :sm="7">
|
<a-form-item label="文件名称">
|
<a-input placeholder="请输入文件名称" v-model="queryParam.docName"></a-input>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="11" :sm="11">
|
<a-form-item label="上传时间">
|
<a-range-picker v-model="queryParam.collectTime"></a-range-picker>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="4" :sm="4">
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
|
<a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :loading="loading"
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
:scroll="{y:456}" :size="size" rowKey="docId">
|
|
</a-table>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
|
<div style="width: 25%">
|
<a-tabs>
|
<a-tab-pane tab="设备列表">
|
<a-spin :spinning="spinning">
|
<div style="display: flex;flex-direction: column;">
|
<div style="display: flex">
|
<a-input placeholder="输入关键字进行搜索" allowClear v-model="searchInput"
|
@change="handleSearchInputChange"/>
|
<a-button type="primary" @click="isExpandAllTreeNode=!isExpandAllTreeNode" style="margin: 0 8px">
|
展开/折叠
|
</a-button>
|
</div>
|
|
<!--产品结构树-->
|
<div style="overflow:auto;margin-top: 10px;height: 400px">
|
<a-tree blockNode checkable :checkedKeys="checkedKeys" :expandedKeys.sync="expandedKeys"
|
:autoExpandParent="autoExpandParent" @select="handleTreeNodeSelect"
|
:treeData="treeDataSource" @check="handleTreeNodeCheck" @expand="handleTreeNodeExpand">
|
<template slot="title" slot-scope="{ label, parentId, entity, key:treeKey,type}">
|
<span v-if="label.indexOf(searchValue) > -1">{{ label.substr(0, label.indexOf(searchValue)) }}<span
|
class="replaceSearch">{{ searchValue }}</span>{{ label.substr(label.indexOf(searchValue) + searchValue.length) }}</span>
|
<span v-else>{{ label }}</span>
|
</template>
|
</a-tree>
|
</div>
|
|
<div>
|
<a-form>
|
<a-form-item label="指派原因">
|
<a-textarea v-model="queryParam.applyReason" rows="3" style="resize: none"></a-textarea>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</a-spin>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</div>
|
</a-modal>
|
</template>
|
|
<script>
|
import { getAction } from '@/api/manage'
|
import dncApi from '@/api/dnc'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
export default {
|
name: 'NcDocumentAssignModal',
|
components: {},
|
mixins: [JeecgListMixin],
|
props: {
|
currentDocumentInfo: {
|
type: Object
|
},
|
size: {
|
type: String
|
}
|
},
|
data() {
|
return {
|
disableMixinCreated: true,
|
visible: false,
|
title: '',
|
columns: [
|
{
|
title: '序号',
|
dataIndex: 'rowIndex',
|
key: 'rowIndex',
|
width: 65,
|
align: 'center',
|
customRender: function(t, r, index) {
|
return parseInt(index) + 1
|
}
|
},
|
{ title: '文件名称', dataIndex: 'docName', align: 'center', width: 300 },
|
{ title: '设备编号', dataIndex: 'docCode', align: 'center' },
|
{ title: '出库状态', dataIndex: 'pullStatus_dictText', align: 'center' },
|
{ title: '状 态', dataIndex: 'docStatus_dictText', align: 'center' },
|
{ title: '上传时间', dataIndex: 'createTime', align: 'center', width: 200 }
|
],
|
searchValue: '',
|
searchInput: '',
|
spinning: false,
|
treeDataSource: [],
|
allTreeKeys: [],
|
checkedKeys: [],
|
expandedKeys: [],
|
autoExpandParent: true,
|
isExpandAllTreeNode: false,
|
url: {
|
list: '/nc/doc/find/list'
|
}
|
}
|
},
|
watch: {
|
visible: {
|
handler(value) {
|
if (value) {
|
this.resetData()
|
this.loadData()
|
this.getDocumentAssignDeviceTreeByApi()
|
}
|
}
|
},
|
isExpandAllTreeNode: {
|
handler(value) {
|
if (value) this.expandedKeys = this.allTreeKeys
|
else this.expandedKeys = []
|
}
|
}
|
},
|
methods: {
|
loadData() {
|
this.dataSource = []
|
if (!this.url.list) {
|
this.$message.error('请设置url.list属性!')
|
return
|
}
|
var params = this.getQueryParams()//查询条件
|
if (!params) {
|
return false
|
}
|
const { attributionType, attributionId, param } = this.currentDocumentInfo
|
params.attributionType = attributionType
|
params.attributionId = attributionId
|
params.docClassCode = param
|
console.log('params', params)
|
this.loading = true
|
getAction(this.url.list, params).then((res) => {
|
if (res.success) this.dataSource = res.result
|
else this.$message.warning(res.message)
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
|
getDocumentAssignDeviceTreeByApi() {
|
this.spinning = true
|
this.treeDataSource = []
|
dncApi.getDocumentAssignDeviceTreeApi(this.currentDocumentInfo)
|
.then(res => {
|
if (res.success) {
|
this.dataList = []
|
this.allTreeKeys = []
|
this.treeDataSource = res.list
|
this.generateList(this.treeDataSource)
|
} else {
|
this.$message.warn(res.message)
|
}
|
})
|
.finally(() => {
|
this.spinning = false
|
})
|
},
|
|
handleAssignDocumentToDevice() {
|
const { checkedKeys, selectedRowKeys, dataList, $confirm, $notification, currentDocumentInfo, queryParam: { applyReason }, $set } = this
|
const { publishFileId, attributionId } = currentDocumentInfo
|
const paramsArray = []
|
// 过滤分组Id仅放入设备Id
|
const treeCheckedDeviceKeys = []
|
checkedKeys.forEach(checkedKey => {
|
const deviceId = dataList.find(item => item.key === checkedKey && item.type === 2)
|
if (deviceId) treeCheckedDeviceKeys.push(deviceId.key)
|
})
|
|
if (treeCheckedDeviceKeys.length === 0 || selectedRowKeys.length === 0) {
|
$notification.warning({
|
message: '消息',
|
description: '请选择设备或文档'
|
})
|
return
|
}
|
|
$confirm({
|
title: '提示',
|
content: `确认提交吗？`,
|
okText: '确认',
|
cancelText: '取消',
|
onOk: () => {
|
treeCheckedDeviceKeys.forEach(deviceId => {
|
selectedRowKeys.forEach(docId => {
|
paramsArray.push({
|
docId,
|
deviceId,
|
fileId: publishFileId,
|
processId: attributionId,
|
applyReason
|
})
|
})
|
})
|
|
paramsArray.forEach(item => {
|
dncApi.assignDocumentToDeviceApi(item)
|
.then(res => {
|
if (res.success) {
|
this.$bus.$emit('reloadMainBottomTableData', 'useDocumentEquipment')
|
$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
} else {
|
$notification.error({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.catch(err => {
|
$notification.error({
|
message: '消息',
|
description: err.message
|
})
|
})
|
})
|
console.log('paramsArray', paramsArray)
|
}
|
})
|
// console.log('table', this.selectedRowKeys)
|
// console.log('treeCheckedDeviceKeys', treeCheckedDeviceKeys)
|
// console.log('currentDocumentInfo', this.currentDocumentInfo)
|
},
|
|
/* 输入查询内容变化时触发 */
|
handleSearchInputChange() {
|
let search = this.searchInput
|
console.log('data', this.dataList)
|
console.log('search', search)
|
let expandedKeys = this.dataList
|
.map(item => {
|
if (item.title != null) {
|
if (item.title.indexOf(search) > -1) {
|
return this.getParentKey(item.key, this.treeDataSource)
|
}
|
return null
|
}
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i)
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: search,
|
autoExpandParent: true
|
})
|
},
|
|
/**
|
* 树节点展开合并时触发
|
* @param expandedKeys 展开项key
|
*/
|
handleTreeNodeExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
|
/**
|
* 树节点复选框选中时触发
|
* @param selectedKeys 选中节点key
|
* @param {node} node 节点对象
|
*/
|
handleTreeNodeCheck(checkedKeys, { node }) {
|
let record = node.dataRef
|
this.checkedKeys = checkedKeys
|
},
|
|
handleTreeNodeSelect(selectedKeys, { node }) {
|
node.$el.childNodes[1].click()
|
},
|
|
/**
|
* 递归获得输入项的父级key
|
* @param key 子项key
|
* @param tree 子项
|
*/
|
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
|
console.log('parentKey', parentKey)
|
} else if (
|
this.getParentKey(key, node.children)) {
|
parentKey = this.getParentKey(key, node.children)
|
}
|
}
|
}
|
return parentKey
|
},
|
|
/**
|
* 递归获得所有树节点key
|
* @param data
|
*/
|
generateList(data) {
|
for (let i = 0; i < data.length; i++) {
|
data[i].key = data[i].id
|
const node = data[i]
|
const key = node.id
|
const title = node.label
|
const type = node.type
|
this.dataList.push({ key, title, type })
|
this.allTreeKeys.push(key)
|
if (node.children) this.generateList(node.children)
|
}
|
},
|
|
resetData() {
|
this.searchInput = ''
|
this.expandedKeys = []
|
this.selectedRowKeys = []
|
this.checkedKeys = []
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-modal {
|
.tabs-container {
|
display: flex;
|
justify-content: space-between;
|
|
.replaceSearch {
|
color: #40a9ff;
|
font-weight: bold;
|
background-color: rgb(204, 204, 204);
|
}
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
width: 8px;
|
}
|
</style>
|
