<template> <a-card :bordered="false" :class="'cust-erp-sub-tab'"> <!-- 操作按钮区域 --> <div class="table-operator" v-if="mainId"> <a-button @click="handleAdd" v-has="'bomDetail:add'" type="primary" icon="plus">新增</a-button> <a-button type="primary" icon="download" @click="handleExportXls('bom子表')">导出</a-button> <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel"> <a-button type="primary" icon="import">导入</a-button> </a-upload> <a-dropdown v-if="selectedRowKeys.length > 0"> <a-menu slot="overlay" v-has="'bomDetail:deleteBatch'"> <a-menu-item key="1" @click="batchDel"> <a-icon type="delete"/> 删除 </a-menu-item> </a-menu> <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/> </a-button> </a-dropdown> </div> <!-- table区域-begin --> <div> <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;"> <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项 <a style="margin-left: 24px" @click="onClearSelected">清空</a> </div> <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{x:true}" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange"> <template slot="htmlSlot" slot-scope="text"> <div v-html="text"></div> </template> <template slot="imgSlot" slot-scope="text"> <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span> <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/> </template> <template slot="fileSlot" slot-scope="text"> <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span> <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)"> 下载 </a-button> </template> <span slot="action" slot-scope="text, record"> <a v-has="'bomDetail:edit'" @click="handleEdit(record)">编辑</a> <a-divider type="vertical"/> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"> <a v-has="'bomDetail:delete'">删除</a> </a-popconfirm> </span> </a-table> </div> <bomDetail-modal ref="modalForm" @ok="modalFormOk" :mainId="mainId"></bomDetail-modal> </a-card> </template> <script> import {JeecgListMixin} from '@/mixins/JeecgListMixin' import BomDetailModal from './modules/BomDetailModal' export default { name: "BomDetailList", mixins: [JeecgListMixin], components: {BomDetailModal}, props: { mainId: { type: String, default: '', required: false } }, watch: { mainId: { immediate: true, handler(val) { if (!this.mainId) { this.clearList() } else { this.queryParam['bomHeaderId'] = val this.loadData(1); } } } }, data() { return { description: 'bom主表管理页面', disableMixinCreated: true, // 表头 columns: [ { title: '#', dataIndex: '', key: 'rowIndex', width: 60, align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } }, { title: '货主', align: "center", dataIndex: 'companyCode' }, { title: '物料编码', align: "center", dataIndex: 'materialCode' }, { title: '物料名称', align: "center", dataIndex: 'materialName' }, { title: '物料单位', align: "center", dataIndex: 'materialUnit' }, { title: '组套层次', align: "center", dataIndex: 'buildLevel' }, { title: '组套序号', align: "center", dataIndex: 'buildSequence' }, { title: '数量', align: "center", dataIndex: 'qty' }, { title: '创建人', align: "center", dataIndex: 'createBy' }, { title: '创建日期', align: "center", dataIndex: 'createTime' }, { title: '更新人', align: "center", dataIndex: 'updateBy' }, { title: '更新日期', align: "center", dataIndex: 'updateTime' }, { title: '操作', dataIndex: 'action', align: "center", fixed: "right", width: 147, scopedSlots: {customRender: 'action'}, } ], url: { list: "/config/bomHeader/listBomDetailByMainId", delete: "/config/bomHeader/deleteBomDetail", deleteBatch: "/config/bomHeader/deleteBatchBomDetail", exportXlsUrl: "/config/bomHeader/exportBomDetail", importUrl: "/config/bomHeader/importBomDetail", }, dictOptions: { enable: [], } } }, created() { }, computed: { importExcelUrl() { return `${window._CONFIG['domianURL']}/${this.url.importUrl}/${this.mainId}`; } }, methods: { clearList() { this.dataSource = [] this.selectedRowKeys = [] this.ipagination.current = 1 } } } </script> <style scoped> @import '~@assets/less/common.less' </style>