¶Ô±ÈÐÂÎļþ |
| | |
| | | <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> |