<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" allow-clear></a-input>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="11" :sm="11">
|
<a-form-item label="上传时间">
|
<a-range-picker v-model="date" value-format="YYYY-MM-DD"
|
@change="handleDateChange" allow-clear></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,selectedRows:selectionRows, onChange: onSelectChange}"
|
@change="handleTableChange"
|
:scroll="{y:456}" :size="size" rowKey="docId">
|
|
<!-- 字符串超长截取省略号显示-->
|
<span slot="docName" slot-scope="text">
|
<j-ellipsis :value="text"/>
|
</span>
|
</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="{ title, parentId, entity, key:treeKey,type}">
|
<span v-if="title.indexOf(searchValue) > -1">{{ title.substr(0, title.indexOf(searchValue)) }}<span
|
class="replaceSearch">{{
|
searchValue
|
}}</span>{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}</span>
|
<span v-else>{{ title }}</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',
|
key: 'docName',
|
align: 'center',
|
scopedSlots: { customRender: 'docName' },
|
width: 300,
|
sorter: true
|
},
|
{ title: '设备编号', dataIndex: 'docCode', align: 'center' },
|
{
|
title: '出库状态',
|
dataIndex: 'pullStatus_dictText',
|
key: 'pullStatus',
|
align: 'center',
|
filters: [
|
{ text: '未出库', value: 1 },
|
{ text: '已出库', value: 2 }
|
]
|
},
|
{
|
title: '状 态',
|
dataIndex: 'docDispatchStatus_dictText',
|
key: 'docDispatchStatus',
|
align: 'center',
|
filters: [
|
{ text: '编制', value: 1 },
|
{ text: '校对', value: 2 },
|
{ text: '批准', value: 3 },
|
{ text: '试切', value: 4 },
|
{ text: '定型', value: 5 }
|
]
|
},
|
{
|
title: '创建时间',
|
dataIndex: 'createTime',
|
align: 'center',
|
width: 200,
|
sorter: true
|
}
|
],
|
searchValue: '',
|
searchInput: '',
|
spinning: false,
|
treeDataSource: [],
|
allTreeKeys: [],
|
checkedKeys: [],
|
expandedKeys: [],
|
autoExpandParent: true,
|
isExpandAllTreeNode: true,
|
date: [],
|
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
|
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
|
})
|
},
|
|
// 获取DNC设备树
|
getDocumentAssignDeviceTreeByApi() {
|
this.spinning = true
|
this.treeDataSource = []
|
dncApi.getDeviceTreeDataApi()
|
.then(res => {
|
if (res.success) {
|
this.dataList = []
|
this.allTreeKeys = []
|
this.treeDataSource = res.result
|
this.generateList(this.treeDataSource)
|
this.expandedKeys = this.allTreeKeys
|
} else {
|
this.$message.warn(res.message)
|
}
|
})
|
.finally(() => {
|
this.spinning = false
|
})
|
},
|
|
// 时间选择器选择完成后触发
|
handleDateChange(value) {
|
this.queryParam.startTime = value[0]
|
this.queryParam.endTime = value[1]
|
},
|
|
/**
|
* 表格分页、排序改变、筛选时触发
|
* @param pagination 分页器选项
|
* @param filters 筛选选项
|
* @param sorter 排序选项
|
*/
|
handleTableChange(pagination, filters, sorter) {
|
if (sorter.order) {
|
this.isorter.column = sorter.field
|
this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
|
} else {
|
this.isorter.column = 'createTime'
|
this.isorter.order = 'desc'
|
}
|
for (let key in filters) {
|
this.filters[key] = filters[key].join(',')
|
}
|
this.loadData()
|
},
|
|
// 指派到设备窗口点击确定指派设备后触发
|
handleAssignDocumentToDevice() {
|
const {
|
checkedKeys,
|
selectedRowKeys,
|
selectionRows,
|
dataList,
|
$confirm,
|
$notification,
|
currentDocumentInfo,
|
queryParam: { applyReason },
|
$destroyAll,
|
$bus
|
} = this
|
const { attributionId, attributionType } = currentDocumentInfo
|
const paramsArray = []
|
// 过滤车间key仅放入设备key
|
const treeCheckedDeviceKeys = []
|
checkedKeys.forEach(checkedKey => {
|
const device = dataList.find(item => item.key === checkedKey && item.type === 2)
|
if (device) treeCheckedDeviceKeys.push(device.key)
|
})
|
|
if (treeCheckedDeviceKeys.length === 0 || selectedRowKeys.length === 0) {
|
$notification.warning({
|
message: '消息',
|
description: '请选择设备或文档'
|
})
|
return
|
}
|
|
$confirm({
|
title: '提示',
|
content: `确认提交吗？`,
|
okText: '确认',
|
cancelText: '取消',
|
onOk: () => {
|
// 双重循环确定每一组设备与文档的参数
|
treeCheckedDeviceKeys.forEach(deviceId => {
|
selectionRows.forEach(({ docId, publishFileId }) => {
|
paramsArray.push({
|
docId,
|
deviceId,
|
fileId: publishFileId,
|
attributionId,
|
attributionType,
|
applyReason
|
})
|
})
|
})
|
|
paramsArray.forEach(item => {
|
dncApi.assignDocumentToDeviceApi(item)
|
.then(res => {
|
if (res.success) {
|
$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
|
})
|
})
|
.finally(() => {
|
$destroyAll()
|
})
|
})
|
},
|
onCancel: () => {
|
$destroyAll()
|
}
|
})
|
},
|
|
/* 输入查询内容变化时触发 */
|
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
|
},
|
|
/**
|
* 树节点选中时触发（模拟树节点复选框选中时的效果）
|
* @param selectedKeys 选中节点key
|
* @param {node} node 节点对象
|
*/
|
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++) {
|
const node = data[i]
|
const key = node.key
|
const title = node.title
|
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.selectionRows = {}
|
this.checkedKeys = []
|
this.filters = {}
|
this.isorter = Object.assign({}, this.defaultSorter)
|
}
|
}
|
}
|
</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>
|
