<template> <basic-container> <avue-crud :option="option" :table-loading="loading" :data="data" :page="page" :permission="permissionList" :before-open="beforeOpen" :search.sync="search" :header-cell-class-name="headerClass" v-model="form" ref="crud" @row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad"> <template slot="menuLeft"> <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.toolinventoryrecord_delete" @click="handleDelete">批量删除 </el-button> </template> <template slot="menuRight"> <el-button type="primary" size="small" plain @click="handleDetailAdd">新增 </el-button> <el-button type="primary" size="small" plain @click="handleAuditing">批量审核 </el-button> <el-button type="primary" size="small" plain @click="handleReject">批量驳回 </el-button> <el-button type="primary" size="small" plain @click="handleExport">导出 </el-button> </template> <template #menu="{row,index,size}"> <el-button @click="handleDetailSearch(row,index)" type="text">查看</el-button> <el-button @click="rowDel(row)" type="text">删除</el-button> </template> </avue-crud> </basic-container> </template> <script> import {getList, getDetail, add, remove, reject, auditing} from "@/api/leger/toolinventoryrecord"; import {mapGetters} from "vuex"; import {getToken} from "@/util/auth"; export default { data() { return { form: {}, query: {}, loading: true, page: { pageSize: 10, currentPage: 1, total: 0 }, selectionList: [], option: { height: 'auto', calcHeight: 210, searchShow: true, searchMenuSpan: 6, tip: false, border: true, index: false, viewBtn: true, selection: true, column: [ { label: "工器具编码", prop: "toolsCodeId", search: true, }, { label: "工器具名称", prop: "toolName", search: true, }, { label: "工器具类别", prop: "toolCategory", }, { label: "工器具类别描述", prop: "toolTypeDescription", }, { label: "规格型号", prop: "modelSpecification", }, { label: "工器具状态", prop: "toolStatus", search: true, }, { label: "工器具状态描述", prop: "toolStatusDescription", }, { label: "配置日期", prop: "configurationDate", }, { label: "已用年限", prop: "yearsInUsed", }, { label: "出厂编号", prop: "factoryNo", }, { label: "责任班组", prop: "responsibleTeam", }, { label: "责任人", prop: "responsiblPerson", }, { label: "是否检验周期内", prop: "isInspectionPeriod", type: "select", search: true, dicUrl: "/api/daf-system/dict/dictionary?code=yes_no", props: { label: "dictValue", value: "dictKey" }, }, { label: "场站", prop: "stations", type: "select", search: true, dicUrl: "/api/daf-system/dict/dictionary?code=station", props: { label: "dictValue", value: "dictKey" }, }, ] }, data: [] }; }, computed: { ...mapGetters(["permission"]), permissionList() { // this.option.column = this.option.column.filter(v => { // return this.permission['toolinventoryrecord_col_' + v.prop] // }) return { addBtn: false, viewBtn: false, delBtn: false, editBtn: false }; }, ids() { let ids = []; this.selectionList.forEach(ele => { ids.push(ele.id); }); return ids.join(","); } }, methods: { rowSave(row, done, loading) { add(row).then(() => { done(); this.onLoad(this.page); this.$message({ type: "success", message: "操作成功!" }); }, error => { window.console.log(error); loading(); }); }, rowDel(row) { this.$confirm("确定将选择数据删除?", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { return remove(row.id); }) .then(() => { this.onLoad(this.page); this.$message({ type: "success", message: "操作成功!" }); }); }, // 新增按钮处理 handleDetailAdd() { this.$router.push({ path: "/leger/toolinventoryrecordDetail", query: { frameMode:"add" }, }); }, // 查看操作处理 handleDetailSearch(row) { debugger this.$router.push({ path: "/leger/toolinventoryrecordDetail", query: { frameMode:"search", id: row.id }, }); }, // 批量删除按钮处理 handleDelete() { if (this.selectionList.length === 0) { this.$message.warning("请选择至少一条数据"); return; } this.$confirm("确定将选择数据删除?", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { return remove(this.ids); }) .then(() => { this.onLoad(this.page); this.$message({ type: "success", message: "操作成功!" }); this.$refs.crud.toggleSelection(); }); }, // 批量审核按钮处理 handleAuditing() { if (this.selectionList.length === 0) { this.$message.warning("请选择至少一条数据"); return; } this.$confirm("是否将选择数据审核?", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { return auditing(this.ids); }) .then(() => { this.onLoad(this.page); this.$message({ type: "success", message: "操作成功!" }); this.$refs.crud.toggleSelection(); }); }, // 批量驳回按钮处理 handleReject() { if (this.selectionList.length === 0) { this.$message.warning("请选择至少一条数据"); return; } this.$confirm("是否将选择数据审核?", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { return reject(this.ids); }) .then(() => { this.onLoad(this.page); this.$message({ type: "success", message: "操作成功!" }); this.$refs.crud.toggleSelection(); }); }, // 导出按钮处理 handleExport() { this.$confirm("是否导出数据?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { window.open(`/api/equipmentledger/export?daf-auth=${getToken()}`); }); }, beforeOpen(done, type) { if (["edit", "view"].includes(type)) { getDetail(this.form.id).then(res => { this.form = res.data.data; }); } done(); }, searchReset() { this.query = {}; this.onLoad(this.page); }, searchChange(params, done) { this.query = params; this.page.currentPage = 1; this.onLoad(this.page, params); done(); }, selectionChange(list) { this.selectionList = list; }, selectionClear() { this.selectionList = []; this.$refs.crud.toggleSelection(); }, currentChange(currentPage){ this.page.currentPage = currentPage; }, sizeChange(pageSize){ this.page.pageSize = pageSize; }, onLoad(page, params = {}) { this.loading = true; getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => { const data = res.data.data; this.page.total = data.total; this.data = data.records; this.loading = false; this.selectionClear(); }); }, headerClass() { return 'header-class' } } }; </script> <style> .header-class{ background-color: #3366cc !important; color: #FFFFFF !important; } </style>