<!-- 物料信息基础档案 --> <script src="../../../main.js"></script> <template> <div class="material-basic" v-loading="failLoad"> <!-- 主体列表 --> <el-card class="material-list" v-loading="loading"> <div style="margin: 0 0 10px 0;"> <!-- 查询条件 --> <el-super-search v-model="params" :size="size" :dict="dict" :columns="SearchColumns" @reset="handleResetQuery" @submit="handleQuery" ></el-super-search> <!-- <el-row :gutter="10"> <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.code" placeholder="物料编码" clearable></el-input> </el-form-item> <el-form-item label="物料名称"> <el-input size="small" v-model="queryForm.name" placeholder="物料名称" clearable></el-input> </el-form-item> <el-form-item label="启用状态"> <el-select size="small" v-model="queryForm.isEnable" placeholder="请选择" clearable> <el-option key="0" label="已启用" value="0"></el-option> <el-option key="2" label="已停用" value="2"></el-option> </el-select> </el-form-item> <el-form-item label="是否同步NC"> <el-select size="small" v-model="queryForm.isSync" placeholder="请选择" clearable> <el-option key="0" label="是" value="0"></el-option> <el-option key="2" label="否" value="2"></el-option> </el-select> </el-form-item> <el-form-item> <el-button size="small" type="primary" @click="handleQuery">搜 索</el-button> <el-button size="small" @click="handleResetQuery">重 置</el-button> </el-form-item> </el-form> </el-col> </el-row> --> </div> <!-- 操作栏 --> <el-row :gutter="10" class="mb10" type="flex" justify="end" > <!-- 新增、修改、删除、复制 --> <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-button size="small" @click="handleIsInvoke" :disabled="checkedList.length != 1" v-hasPermi="['system:material:add']"> <!-- 0:启用 2:停用 --> {{ handleJudgeIsUsing() ? '停用' : '启用' }} </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="handleQueryExport" v-hasPermi="['system:material:export']">批量导出</el-button> </el-button-group> </el-col> </el-row> <el-table v-if="tableHeader.length" border :data="taskList" ref="materialTable" max-height="550" @cell-dblclick="handledbClick" :row-key="getRowKey" @selection-change="handleSelectionChange" @select="handleSelect" @select-all="handleSelectAll" > <!-- --> <el-table-column type="selection" width="45" :reserve-selection="true" fixed/> <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" show-overflow-tooltip > <template slot-scope="scope"> <span v-if="h.apiUrl">{{scope.row[`${h.prop}Name`]}}</span> <el-checkbox v-else-if="h.attribute == 'checkbox'" v-model="scope.row[h.prop]" disabled true-label="0" false-label="2" ></el-checkbox> <el-dict-tag v-else-if="h.dictId" :value="scope.row[h.prop]" :options="dict.type[h.dictId]" ></el-dict-tag> <span v-else>{{ scope.row[h.prop] || '--' }}</span> <!-- {{ h.attribute == 'select' ? scope.row[`${h.prop}Name`] : (h.attribute == 'checkbox' ? (scope.row[h.prop] == '0' ? '√' : '') : scope.row[h.prop]) }} --> </template> </el-table-column> </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"> <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="35%" 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" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="handleDownTemplate">下载模板</el-button> <div slot="tip" class="el-upload__tip">只能上传Excel文件</div> </el-upload> </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'; import { SearchColumns,OtherDictColumns } from './columns'; import { initDicts } from "@/utils/init.js"; export default { name: "material-basic", dicts:[...initDicts([...SearchColumns,...OtherDictColumns])], // dicts:[], components: { ElSuperSearch: () => import("@/components/super-search/index.vue"), ElDictTag: () => import("@/components/DictTag/index.vue"), }, data() { const params = this.$init.params(SearchColumns); return { failLoad: false, params:params, SearchColumns:SearchColumns, size:'mini', // 物料基本信息数据 taskList: [], // 查询表单字段 queryForm: { name: '', code: '', isEnable: '', }, // 总条数 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: { // 判读是否启用 handleJudgeIsUsing() { return this.checkedList.length == 1 && this.checkedList[0].isEnable == '已启用'; }, // 改变分页大小 handleSizeChange(e) { this.queryParams.pageSize = e; this.handleQuery(); }, // 改变当前页 handleCurrentChange(e) { this.queryParams.pageNum = e; this.handleQuery(); }, // 新增 handleInster() { this.$notify({ title: '警告', message: '物料只能通过申请审批增加,不能在节点直接录入!', type: 'warning' }); }, // 修改 handleEdit() { if (this.checkedList.length == 1) { this.$router.push({ path: `/material/basicFile/detail/${this.checkedList[0].id}`, query: { isEdit: true } }); } else { this.$notify({ title: '警告', message: `${this.checkedList.length > 1 ? '修改只能选择单个数据!' : '请选择需要修改的信息!'}`, 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(); // 清空选中数据 this.checkedList = []; this.$refs.materialTable.clearSelection(); } }) } else { this.$notify({ title: '警告', message: `请选择需要删除的数据!`, type: 'warning' }); } }, // 复制 handleCopy() { console.log('复制'); }, //查询 handleQuery() { this.getMaterialList('material'); }, // 重置查询条件 handleResetQuery() { // for (const key in this.queryForm) { // this.queryForm[key] = ''; // } this.queryParams.pageNum = 1; this.queryParams.pageSize = 10; this.params = this.$init.params(SearchColumns); this.handleQuery(); }, // 刷新 handleRefresh() { this.getMaterialList('material'); // for (const key in this.queryForm) { // this.queryForm[key] = ''; // } }, // 过滤 handleFilter(e) { console.log(e, '过滤'); }, filterCondition(type) { return { type } }, // 启用/停用 handleIsInvoke() { // true 当前状态为启用,需要改为停用 // 0:启用 2:停用 let param = { isEnable: this.handleJudgeIsUsing() ? '2' : '0', id: this.checkedList[0].id }; materialApi.updateEnableMaterial(param).then(res => { if (res.code == 200) { this.handleRefresh(); // 清空选中数据 this.checkedList = []; this.$refs.materialTable.clearSelection(); } }) }, isInvoke(val) { return val; }, // 申请单查询 handleQueryForm() { console.log('申请单查询'); }, // 批量导入 handleImport() { this.importData.show = true }, // 导入弹窗关闭前 handlefileDialogColse(done) { this.importData.list = []; done(); }, // 导入弹窗操作 handleImportData(type) { switch (type) { // 取消 case 'cancal': this.importData.list = []; this.importData.show = false; break; // 确认 case 'confirm': 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; this.importData.list = []; if (res.data.flag) { this.failLoad = true; console.log(res.data.datas) let param = {failDatas: res.data.datas} if (null != param) { materialApi.exportMartial(param).then(res => { const blob = new Blob([res], { type: "application/vnd.ms-excel;charset=UTF-8", });// 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象 const downloadElement = document.createElement("a"); //创建a标签 const href = window.URL.createObjectURL(blob); // 创建下载的链接 downloadElement.href = href; //下载地址 downloadElement.download = '导入失败的物料基础档案数据.xlsx'; // 下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); // 点击下载 document.body.removeChild(downloadElement); // 下载完成移除元素 window.URL.revokeObjectURL(href); // 释放blob对象 this.failLoad = false; }) } } this.$notify({ message: res.data.msg, type: res.data.flag ? 'warning' : 'success' }); } else { this.$notify({ message: res.msg, type: res.code == 200 ? 'success' : 'warning' }); } }) } else { this.$notify({ title:'警告', message: '请上传文件之后在确认!', type: 'warning', }); } break; } }, // 删除文件 handleFileRemove(file, fileList) { console.log('删除文件', file, 'file', fileList, 'fileList'); this.importData.list = fileList; }, // 文件发生改变 handleChangeFile(file, fileList) { this.importData.list = fileList; }, // 查询条件导出 handleQueryExport(){ console.log(this.params,'this.params'); this.download('/system/material/export', this.params, `物料基本信息${new Date().getTime()}.xlsx`); }, // 多选批量导出 handleSelectExport() { let ids = this.checkedList.length ? this.checkedList.map(i => i.id) : []; if (ids.length) { let params = { // orgId: '1', ids, } this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`); } else { this.$notify({ title:'警告', message: '请选择需要导出的数据!', type: 'warning' }); } }, // 下载模板 handleDownTemplate() { 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) { this.$router.push({ path: `/material/basicFile/detail/${e.id}`, }); }, // 绑定row-key getRowKey(row) { return row.id; }, // 对象数组去重 handleUnique(arr, key) { // arr 需要去重的数组 type:作为去重依据的key const res = new Map(); return arr.filter((arr) => !res.has(arr[key]) && res.set(arr[key], 1)) }, // 选中数据改变 handleSelectionChange(list) { // this.checkedList = this.handleUnique([...this.checkedList, ...list], 'id'); // this.$emit('headerOption', JSON.stringify({ checkedList: [... this.checkedList] })) }, // 行数据勾选操作 handleSelect(selection, row) { this.checkedList = selection; // // true就是选中,0或者false是取消选中 // let selected = selection.length && selection.indexOf(row) !== -1 }, //手动勾选全选 handleSelectAll(selection) { this.checkedList = selection; }, // 获取物料列表信息 getMaterialList(templateCode, query) { // (params, page) let _this = this; this.loading = true; let page = { pageNum: this.queryParams.pageNum, pageSize: this.queryParams.pageSize, } let param = { templateCode, ...this.params // ...this.queryForm } // 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) { // let dictList = [] // res.data.forEach(item =>{ // if(item.dictId){ // // 字典 // dictList.push({ // item:{...item}, // attr:{ // dictName:item.dictId // } // }); // } // }) // console.log(dictList,'dictList'); // console.log(this,'this'); // this.dict =[...initDicts([...SearchColumns,...dictList])] this.tableHeader = res.data; } }) }, }, created() { // this.getMaterialList('material'); // this.getTagList('material'); }, beforeRouteEnter(to, from, next) { next((vm) => { if (from.name == 'materialDetail') { // this.$store.getQuery(this.queryForm); console.log(vm, 'queryValue', vm.$store); vm.queryForm = vm.$store.state.query.queryVlue; // 清空选中数据 vm.checkedList = []; vm.$refs.materialTable &&vm.$refs.materialTable.clearSelection(); } vm.getTagList('material'); vm.getMaterialList('material'); }); }, // 进入详情,保留查询条件 beforeRouteLeave(to, from, next) { if (to.name == 'materialDetail') { this.$store.commit('SET_QUERY', this.queryForm); } else { this.$store.commit('SET_QUERY', {name: '', code: ''}); } next(); } }; </script> <style lang="scss"> .material-list { // height: calc(100vh - 70px); .el-card__body { height: 100%; box-sizing: border-box; padding: 10px; .el-table { overflow: auto; .el-table__body-wrapper { overflow-y: auto !important; overflow-x: auto !important; } } } .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; } .mb-query >>> .el-select { width: 90px; } .mb-query >>> .el-scrollbar__wrap { margin-bottom: -18px; } </style>