<!-- 物料信息基础档案 --> <script src="../../../main.js"></script> <template> <div class="material-basic" v-loading="failLoad"> <!-- 主体列表 --> <el-card class="material-list" v-loading="loading" :body-style="{ height: '100%', padding: '10px ', display: 'flex', 'flex-direction': 'column', }" > <!-- 查询条件 --> <el-super-search v-model="params" :size="size" :dict="dict" :columns="SearchColumns" @reset="handleResetQuery" @submit="handleQuery" ></el-super-search> <!-- 操作栏 --> <el-row :gutter="10" class="mb10" type="flex" justify="end" style="margin: 10px 0" > <!-- 新增、修改、删除、复制 --> <el-col :span="1.5"> <el-button-group> <el-button :size="size" @click="handleEdit">修改</el-button> <el-button :size="size" @click="handleRefresh">刷新</el-button> </el-button-group> </el-col> <!-- 启用 --> <el-col :span="1.5"> <is-using :size="size" :select-data="checkedList" @success="handleQuery" ></is-using> </el-col> <!-- 导入导出 --> <el-col :span="1.5"> <el-button-group> <el-button :size="size" @click="handleImport" v-hasPermi="['system:material:import']" >批量导入</el-button > <el-button :size="size" @click="handleExport" v-hasPermi="['system:material:export']" >批量导出</el-button > </el-button-group> </el-col> <!-- <el-col :span="1.5"> <whlbButton :data="checkedList" :size="size"></whlbButton> </el-col> --> </el-row> <div class="el-super-ux-table" v-resize="resize" style=" position: relative; display: flex; flex: 1; flex-direction: column; overflow: auto; " > <ux-grid v-if="tableHeader.length" border use-virtual keep-source beautify-table :size="size" :data="taskList" :height="tableHeight" ref="materialTable" @cell-dblclick="handledbClick" @select="handleSelect" @select-all="handleSelectAll" :header-row-style="{ color: '#515a6e', }" style="flex: 1" > < <!-- 多选 --> <ux-table-column fixed="left" width="60" align="center" type="checkbox" resizable reserve-selection :column-key="rowKey" ></ux-table-column> <!-- 序号 --> <ux-table-column fixed="left" width="50" title="序号" type="index" align="center" class="is-index" resizable ></ux-table-column> <!-- <ux-table-column type="selection" width="45" :reserve-selection="true" fixed/> <ux-table-column type="index" title="序号" width="55" align="center"/> --> <ux-table-column width="150" v-for="h in tableHeader" v-if="h.show" :title="h.name" align="center" resizable 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> </ux-table-column> </ux-grid> <div style=" height: 50px; display: flex; justify-content: space-between; align-items: center; " :style="{ height: '50px', }" > <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="handleQuery" style=" height: 32px; padding: 0 !important; flex: 1; overflow-x: auto; " /> </div> </div> </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="size" type="primary" >选取文件</el-button > <el-button style="margin-left: 10px" :size="size" 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])], components: { ElSuperSearch: () => import("@/components/super-search/index.vue"), ElDictTag: () => import("@/components/DictTag/index.vue"), IsUsing: () => import("./isUsing/index.vue"), whlbButton: () => import("./wei-hu-lei-bie/index.vue"), }, data() { const params = this.$init.params(SearchColumns); return { failLoad: false, params: params, SearchColumns: SearchColumns, rowKey: "id", size: "mini", // 物料基本信息数据 taskList: [], // 查询表单字段 queryForm: { name: "", code: "", isEnable: "", }, // 总条数 total: 1, loading: false, importData: { show: false, list: [], }, // 查询参数 queryParams: { pageNum: 1, pageSize: 50, code: null, name: null, }, // 表头 tableHeader: [], // 多选数组 checkedList: [], // 列表选中数据 // checkedList: [], // 操作弹窗 optionDialog: { show: false, op: "", }, resizeHeight: 0, }; }, computed: { tableHeight: { get() { return this.resizeHeight; }, set() {}, }, }, directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象 let width = "", height = ""; function isReize() { const style = document.defaultView.getComputedStyle(el); if (width !== style.width || height !== style.height) { binding.value(); // 关键 } width = style.width; height = style.height; } el.__vueSetInterval__ = setInterval(isReize, 300); }, unbind(el) { clearInterval(el.__vueSetInterval__); }, }, }, methods: { resize() { this.resizeHeight = document.getElementsByClassName("el-super-ux-table")[0].offsetHeight - 55; }, // 判读是否启用 handleJudgeIsUsing() { return ( this.checkedList.length == 1 && this.checkedList[0].isEnable == "已启用" ); }, // 修改 handleEdit() { if (this.checkedList.length == 1) { this.$router.push({ path: `/material/basicFile/detail/${this.checkedList[0].id}`, query: { isEdit: true, }, }); } else { this.$notify.warning({ message: `${ this.checkedList.length > 1 ? "修改只能选择单个数据!" : "请选择需要修改的信息!" }`, }); } }, // 删除 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.warning({ message: `请选择需要删除的数据!`, }); } }, //查询 handleQuery() { // 重新查询后需要清空列表选中的数据 this.checkedList = []; this.$refs.materialTable.clearSelection(); this.getMaterialList(); }, // 重置查询条件 handleResetQuery() { this.queryParams.pageNum = 1; this.queryParams.pageSize = 100; this.params = this.$init.params(SearchColumns); this.handleQuery(); }, // 刷新 handleRefresh() { this.getMaterialList(); // for (const key in this.queryForm) { // this.queryForm[key] = ''; // } }, // 批量导入 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; }, // 批量导出 handleExport() { 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 { let params = { templateCode: "material", ...this.params, createTimeBegin: (this.params.createTimeQueue && this.params.createTimeQueue[0]) || "", createTimeEnd: (this.params.createTimeQueue && this.params.createTimeQueue[1]) || "", updateTimeBegin: (this.params.updateTimeQueue && this.params.updateTimeQueue[0]) || "", updateTimeEnd: (this.params.updateTimeQueue && this.params.updateTimeQueue[1]) || "", }; this.download( "/system/material/export", params, `物料基本信息${new Date().getTime()}.xlsx` ); } }, // 下载模板 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)); }, // 行数据勾选操作 handleSelect(selection, row) { this.checkedList = selection; // // true就是选中,0或者false是取消选中 // let selected = selection.length && selection.indexOf(row) !== -1 }, //手动勾选全选 handleSelectAll(selection) { this.checkedList = selection; }, // 获取物料列表信息 async getMaterialList() { try { this.loading = true; let page = { pageNum: this.queryParams.pageNum, pageSize: this.queryParams.pageSize, }; let param = { templateCode: "material", ...this.params, createTimeBegin: (this.params.createTimeQueue && this.params.createTimeQueue[0]) || "", createTimeEnd: (this.params.createTimeQueue && this.params.createTimeQueue[1]) || "", updateTimeBegin: (this.params.updateTimeQueue && this.params.updateTimeQueue[0]) || "", updateTimeEnd: (this.params.updateTimeQueue && this.params.updateTimeQueue[1]) || "", }; let { code, data } = await materialApi.materialList(param, page); if (code == 200) { this.taskList = data.tableBody.rows; this.total = data.tableBody.total; } } catch (error) { } finally { this.loading = false; } // 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() {}, 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_list"); vm.getMaterialList(); }); }, // 进入详情,保留查询条件 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-basic { height: calc(100vh); } .material-list { // height: calc(100vh - 70px); height: 100%; .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; } ::v-deep.uxbeautifyTableClass .elx-header--column .elx-resizable.is--line:before { height: 100%; background-color: #dfe6ec; } </style>