<!-- 物料信息基础档案 --> <template> <div class="material-basic"> <!-- 操作栏 --> <el-row :gutter="10" class="mb10"> <!-- 新增、修改、删除、复制 --> <el-col :span="1.5"> <el-button-group> <!-- <el-button size="small" @click="handleInster">新增</el-button> --> <el-button size="small" @click="handleEdit">修改</el-button> <!-- <el-button size="small" @click="handleDel">删除</el-button> --> <!-- <el-button size="small" @click="handleCopy">复制</el-button> --> </el-button-group> </el-col> <!-- 查询、刷新、过滤 --> <el-col :span="1.5"> <el-button-group> <!-- <el-dropdown size="small" @command="handleFilter"> <el-button size="small"> 过滤<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="filterCondition('stop')">显示停用</el-dropdown-item> <el-dropdown-item :command="filterCondition('allot')">显示已分配</el-dropdown-item> </el-dropdown-menu> </el-dropdown> --> <!-- <el-button size="small" @click="handleQuery">查询</el-button> --> <el-button size="small" @click="handleRefresh">刷新</el-button> </el-button-group> </el-col> <!-- 启用 --> <!-- <el-col :span="1.5"> <el-button-group> <el-dropdown split-button size="small" @click="handleIsInvoke(true)" @command="handleIsInvoke"> 启用 <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="isInvoke(true)">启用</el-dropdown-item> <el-dropdown-item :command="isInvoke(false)">停用</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-button-group> </el-col> --> <!-- 申请单查询 --> <!-- <el-col :span="1.5"> <el-button-group> <el-button size="small" @click="handleQueryForm">申请单查询</el-button> </el-button-group> </el-col> --> <!-- 导入导出 --> <el-col :span="1.5"> <el-button-group> <el-button size="small" @click="handleImport" v-hasPermi="['system:material:import']">批量导入</el-button> <el-button size="small" @click="handleExport" v-hasPermi="['system:material:export']">批量导出</el-button> </el-button-group> </el-col> <el-col :span="1.5"> <!-- 查询框 --> <el-form :inline="true" :model="queryForm" class="mb-query" @submit.native.prevent> <el-form-item label="物料名称"> <el-input size="small" v-model="queryForm.name" placeholder="物料名称" clearable></el-input> </el-form-item> <el-form-item label="物料编码"> <el-input size="small" v-model="queryForm.code" placeholder="物料编码" clearable></el-input> </el-form-item> <el-form-item> <el-button size="small" type="primary" @click="handleQuery">查询</el-button> </el-form-item> </el-form> </el-col> </el-row> <!-- 主体列表 --> <el-card class="material-list" v-loading="loading"> <el-table :data="taskList" @cell-dblclick="handledbClick" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="20" /> <el-table-column type="index" label="序号" width="55" align="center" /> <el-table-column width="150" v-for="h in tableHeader" v-if="h.show" :label="h.name" align="center" :prop="h.attribute == 'select' ? `${h.prop}Name` : h.prop" show-overflow-tooltip /> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-card> <!-- 操作提示 --> <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center> <span>是否确认{{ optionDialog.op }}?</span> <span slot="footer" class="dialog-footer"> <el-button @click="handleOptionShow('option', false)">取 消</el-button> <el-button type="primary" @click="handleComfirmOption('cancal')">确 定</el-button> </span> </el-dialog> <!-- 导入弹窗 --> <el-dialog title="批量导入" :visible.sync="importData.show" width="30%" center @before-close="handlefileDialogColse"> <div class="mb-import"> <el-upload class="upload-demo" accept=".xls, .xlsx" ref="upload" action="#" :on-remove="handleFileRemove" :file-list="importData.list" :auto-upload="false" :on-change="handleChangeFile" :limit="1"> <el-button slot="trigger" type="primary">选取文件</el-button> <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="handleSubmitUpload">上传到服务器</el-button> --> <div slot="tip" class="el-upload__tip">只能上传Excel文件</div> </el-upload> <el-button type="success" @click="handleDownTemplate">下载模板</el-button> </div> <span slot="footer"> <el-button @click="handleImportData('cancal')">取 消</el-button> <el-button type="primary" @click="handleImportData('confirm')">确 定</el-button> </span> </el-dialog> </div> </template> <script> import './style/index.scss'; import materialApi from '@/api/material/basic'; export default { name: "material-basic", data() { return { // 物料基本信息数据 taskList: [], // 查询表单字段 queryForm: { name: '', }, // 总条数 total: 1, loading: false, importData: { show: false, list: [] }, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, code: null, name: null }, // 表头 tableHeader: [], // 多选数组 checkedList: [], // 列表选中数据 checkedList: [], // 操作弹窗 optionDialog: { show: false, op: '' }, } }, methods: { // 改变分页大小 handleSizeChange(e) { this.queryParams.pageSize = e; this.handleQuery(); }, // 改变当前页 handleCurrentChange(e) { this.queryParams.pageNum = e; this.handleQuery(); }, // 新增 handleInster() { this.$message({ message: '物料只能通过申请审批增加,不能在节点直接录入!', type: 'warning' }); }, // 修改 handleEdit() { console.log(this.checkedList, 'this.checkedList'); if (this.checkedList.length == 1) { this.$router.push({ path: `/material/basicFile/detail/${this.checkedList[0].id}`, query: { isEdit: true } }); } else if (this.checkedList.length > 1) { this.$message({ message: '修改只能选择单个数据!', type: 'warning' }); } else { this.$message({ message: '请选择需要修改的信息!', type: 'warning' }); } }, // 删除 handleDel() { console.log('删除', this.checkedList); // delMaterial if (this.checkedList.length) { let ids = this.checkedList.map(i => i.id); materialApi.delMaterial(ids).then(res => { if (res.code == 200) this.handleRefresh(); }) } else { this.$message({ message: '请选择需要删除的数据!', type: 'warning' }); } }, // 复制 handleCopy() { console.log('复制'); }, //查询 handleQuery() { console.log('查询'); this.getMaterialList('material', this.queryForm); }, // 刷新 handleRefresh() { console.log('刷新'); this.getMaterialList('material'); for (const key in this.queryForm) { this.queryForm[key] = ''; } }, // 过滤 handleFilter(e) { console.log(e, '过滤'); }, filterCondition(type) { return { type } }, // 启用 handleIsInvoke(e) { console.log('启用', e); }, isInvoke(val) { return val; }, // 申请单查询 handleQueryForm() { console.log('申请单查询'); }, // 批量导入 handleImport() { console.log('批量导入'); this.importData.show = true }, // 导入弹窗关闭前 handlefileDialogColse(done) { this.importData.list = []; done(); }, // 导入弹窗操作 handleImportData(type) { console.log('导入弹窗操作'); switch (type) { // 取消 case 'cancal': this.importData.list = []; this.importData.show = false; break; // 确认 case 'confirm': console.log(this.importData.list, 'this.fileList'); if (this.importData.list.length) { let formData = new FormData(); formData.append('file', this.importData.list[0].raw); materialApi.fileImport(formData).then(res => { if (res.code == 200) this.importData.show = false; }) } else { this.$message({ message: '请上传文件之后在确认!', type: 'warning' }); } break; } }, // 删除文件 handleFileRemove(file, fileList) { console.log('删除文件', file, 'file', fileList, 'fileList'); this.importData.list = fileList; }, // 文件发生改变 handleChangeFile(file, fileList) { this.importData.list = fileList; console.log(this.importData.list, '文件发生改变'); }, // 批量导出 handleExport() { console.log('批量导出', this.checkedList); let ids = this.checkedList.length ? this.checkedList.map(i => i.id) : []; let params = { // orgId: '1', ids, } this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`) }, // 下载模板 handleDownTemplate() { console.log('下载模板'); this.download('/system/material/download', {}, `物料基本信息模板.xlsx`) }, // 操作弹窗显隐 handleOptionShow(type, val) { switch (type) { case 'option': this.optionDialog.show = val; break; } }, // 操作弹窗确认按钮 handleComfirmOption(op) { switch (op) { case 'cancal': this.handleOptionShow('option', false); break; } }, // 双击行 handledbClick(e) { console.log(e, '双击行'); this.$router.push({ path: `/material/basicFile/detail/${e.id}`, }); }, // 选中数据改变 handleSelectionChange(list) { this.checkedList = list; this.$emit('headerOption', JSON.stringify({ checkedList: [...list] })) }, // 获取物料列表信息 getMaterialList(templateCode, query) { let _this = this; this.loading = true; let page = { pageNum: this.queryParams.pageNum, pageSize: this.queryParams.pageSize, } let param = { templateCode, ...query } console.log(param, 'param'); materialApi.materialList(param, page).then((res) => { _this.loading = false; console.log(res, '获取物料列表信息以及表头字段'); let { code, data } = res; if (code == 200) { _this.taskList = data.tableBody.rows; _this.total = data.tableBody.total; } }) }, // 获取物料列表表头 getTagList(templateCode) { materialApi.tagList({ templateCode }).then(res => { console.log(res, '获取物料列表表头'); if (res.code == 200) { this.tableHeader = res.data; } }) }, }, created() { this.getMaterialList('material'); this.getTagList('material'); }, }; </script> <style lang="scss"> .material-list { // height: calc(100% - 100px); height: calc(100% - 70px); .el-card__body { height: 100%; box-sizing: border-box; .el-table { height: calc(100% - 35px); overflow: auto; .el-table__body-wrapper { // height: calc(100% - 150px); height: calc(100% - 70px); overflow-y: auto !important; overflow-x: auto !important; // .el-table__body { // height: 100%; // } } } } .el-pagination { margin-top: 8px; text-align: right; } } .mb-import { padding: 0 20%; text-align: center; display: flex; align-items: flex-start; justify-content: space-around; } </style> <style scoped> .el-dialog__header { background-color: rgb(244, 244, 244); } .mb-query>>>.el-form-item__label { font-weight: normal; font-size: 12px; } .mb-query>>>.el-form-item { margin-bottom: 8px; } </style>