<template>
|
<j-modal width="85%" :title="title" :visible="visible" @cancel="handleCancel" :maskClosable="false" centered
|
@ok="handleAssignDocumentToDevice" :confirmLoading="confirmLoading">
|
<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="9" :sm="9">
|
<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,type:'radio'}"
|
@change="handleTableChange" :customRow="customRow"
|
: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: 26%">
|
<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" checkStrictly
|
:treeData="treeDataSource" @check="handleTreeNodeCheck" @expand="handleTreeNodeExpand">
|
<template slot="title" slot-scope="{ label, parentId, entity, key:treeKey,type}">
|
<a-tooltip :title="label" v-if="type==99">
|
<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>
|
</a-tooltip>
|
<template v-else>
|
<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>
|
</template>
|
</a-tree>
|
</div>
|
|
<a-form-model ref="form" :rules="validateRules" :model="queryParam">
|
<a-form-model-item label="指派原因" prop="applyReason">
|
<a-textarea placeholder="请输入指派原因" v-model="queryParam.applyReason" rows="3" style="resize: none"/>
|
</a-form-model-item>
|
</a-form-model>
|
</div>
|
</a-spin>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</div>
|
</j-modal>
|
</template>
|
|
<script>
|
import { getAction } from '@/api/manage'
|
import dncApi from '@/api/dnc'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
export default {
|
name: 'HasReceivedDocumentAssignModal',
|
components: {},
|
mixins: [JeecgListMixin],
|
props: {
|
currentDocumentInfo: {
|
type: Object
|
},
|
currentTreeNodeInfo: {
|
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' },
|
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
|
}
|
],
|
validateRules: {
|
applyReason: [
|
{ required: true, message: '请输入指派原因' }
|
]
|
},
|
searchValue: '',
|
searchInput: '',
|
spinning: false,
|
treeDataSource: [],
|
allTreeKeys: [],
|
checkedKeys: [],
|
expandedKeys: [],
|
autoExpandParent: true,
|
isExpandAllTreeNode: false,
|
confirmLoading: false,
|
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 = []
|
}
|
}
|
},
|
created() {
|
this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
},
|
beforeDestroy() {
|
this.$bus.$off('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
},
|
methods: {
|
// 设备树右键菜单指派到产品弹窗
|
handleDeviceRecAssign() {
|
this.visible = true
|
},
|
|
// 获取当前工序或工步对应文档列表
|
loadData() {
|
this.dataSource = []
|
if (!this.url.list) {
|
this.$message.error('请设置url.list属性!')
|
return
|
}
|
var params = this.getQueryParams()//查询条件
|
if (!params) return false
|
let paramType, paramId
|
if (this.currentTreeNodeInfo) {
|
const { key, type } = this.currentTreeNodeInfo
|
paramType = type
|
paramId = key
|
} else if (this.currentDocumentInfo) {
|
const { attributionType, attributionId } = this.currentDocumentInfo
|
paramType = attributionType
|
paramId = attributionId
|
}
|
|
params.attributionType = paramType
|
params.attributionId = paramId
|
params.docClassCode = 'REC'
|
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
|
})
|
},
|
|
/**
|
* 自定义表格行
|
* @param record 表格行记录
|
*/
|
customRow(record) {
|
return {
|
style: {
|
cursor: 'pointer'
|
},
|
on: {
|
click: () => {
|
this.onSelectChange([record.docId], [record])
|
}
|
}
|
}
|
},
|
|
// 获取DNC产品树
|
getDocumentAssignDeviceTreeByApi() {
|
this.spinning = true
|
this.treeDataSource = []
|
dncApi.getAllProductTreeDataApi()
|
.then(res => {
|
if (res.success) {
|
this.dataList = []
|
this.allTreeKeys = []
|
this.treeDataSource = res.result
|
console.log('treeDataSource', res.result)
|
this.generateList(this.treeDataSource)
|
this.expandedKeys = [this.treeDataSource[0].id]
|
} 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, selectionRows, selectedRowKeys, $confirm, $notification, queryParam: { applyReason }, $destroyAll, handleCancel } = this
|
|
if (checkedKeys.length === 0 || selectedRowKeys.length === 0) {
|
$notification.warning({
|
message: '消息',
|
description: '请选择设备或文档'
|
})
|
return
|
}
|
|
const that = this
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
const { docId, attributionId, publishFileId } = selectionRows[0]
|
const params = {
|
docId: checkedKeys[0],
|
equipmentDocId: docId,
|
equipmentId: attributionId,
|
equipmentFileId: publishFileId,
|
applyReason
|
}
|
|
$confirm({
|
title: '提示',
|
content: `确认提交吗？`,
|
okText: '确认',
|
cancelText: '取消',
|
onOk: () => {
|
that.confirmLoading = true
|
dncApi.assignNcToProductApi(params)
|
.then(res => {
|
if (res.success) {
|
handleCancel()
|
$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
} else {
|
$notification.error({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.finally(() => {
|
$destroyAll()
|
that.confirmLoading = false
|
})
|
},
|
onCancel: () => {
|
$destroyAll()
|
}
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
|
/* 输入查询内容变化时触发 */
|
handleSearchInputChange() {
|
let search = this.searchInput
|
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(checkedObj, { node }) {
|
console.log('checkedObj', checkedObj)
|
console.log('node', node.dataRef)
|
let record = node.dataRef
|
if (record.type !== 99) return
|
this.checkedKeys = checkedObj.checked.slice(-1)
|
},
|
|
/**
|
* 树节点选中时触发（模拟树节点复选框选中时的效果）
|
* @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
|
} 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
|
this.dataList.push({ key, title })
|
this.allTreeKeys.push(key)
|
this.setTreeNodeIcon(node)
|
if (node.children) this.generateList(node.children)
|
}
|
},
|
|
/**
|
* 设置树节点图标
|
* @param treeNode
|
*/
|
setTreeNodeIcon(treeNode) {
|
switch (+treeNode.type) {
|
case 1:
|
treeNode.slots = { icon: 'product' }
|
break
|
case 2:
|
treeNode.slots = { icon: 'component' }
|
break
|
case 3:
|
treeNode.slots = { icon: 'part' }
|
break
|
case 4:
|
treeNode.slots = { icon: 'processSpecVersion' }
|
break
|
case 5:
|
treeNode.slots = { icon: 'process' }
|
break
|
case 6:
|
treeNode.slots = { icon: 'processStep' }
|
break
|
default:
|
}
|
},
|
|
resetData() {
|
this.searchInput = this.searchValue = ''
|
this.expandedKeys = []
|
this.selectedRowKeys = []
|
this.selectionRows = {}
|
this.checkedKeys = []
|
this.filters = {}
|
this.isorter = Object.assign({}, this.defaultSorter)
|
},
|
|
handleCancel() {
|
this.visible = false
|
},
|
|
triggerCorrespondingMethod({ methodName, modalTitle }) {
|
if (this[methodName]) {
|
this[methodName]()
|
this.title = modalTitle
|
}
|
}
|
}
|
}
|
</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>
|
