<template> <div class="app-container"> <!-- 搜索工作栏 --> <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" /> <!-- 列表 --> <base-table :table-props="tableProps" :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-data="list" @emitFun="handleEmitFun"> <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" fixed="right" :method-list="tableBtn" @clickBtn="handleTableBtnClick" /> </base-table> <!-- 分页组件 --> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 对话框(添加 / 修改) --> <base-dialog :dialogTitle="title" :dialogVisible="open" width="50%" @close="cancel" @cancel="cancel" @confirm="submitForm"> <DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> </base-dialog> </div> </template> <script> import { createQualityInspectionBoxBtn, updateQualityInspectionBoxBtn, deleteQualityInspectionBoxBtn, getQualityInspectionBoxBtn, getQualityInspectionBoxBtnPage, exportQualityInspectionBoxBtnExcel, } from '@/api/base/qualityInspectionBoxBtn'; import basicPageMixin from '@/mixins/lb/basicPageMixin'; import moment from 'moment'; export default { name: 'QualityInspectionBoxBtn', mixins: [basicPageMixin], components: {}, data() { return { rows: [ [ { select: true, label: '产线', url: '/base/production-line/listAll', prop: 'productionId', rules: [{ required: true, message: '不能为空', trigger: 'blur' }], bind: { filterable: true, }, }, ], [ { select: true, label: '工段', url: '/base/workshop-section/listAll', prop: 'sectionId', rules: [{ required: true, message: '不能为空', trigger: 'blur' }], }, ], [ { input: true, label: '按钮盒识别码', prop: 'buttonId', rules: [ { type: 'number', message: '请输入整数', trigger: 'blur', transform: (val) => Number.isInteger(Number(val)) && Number(val), }, ], }, ], [{ input: true, label: '按钮盒模式', prop: 'model' }], [ { input: true, label: '按钮值', prop: 'keyValue', rules: [ { type: 'number', message: '请输入100以内的数字', trigger: 'blur', transform: (val) => Number(val) <= 100 && Number(val), }, ], bind: { type: 'number', min: 0, max: 100 }, }, ], [ { textarea: true, label: '检测内容', prop: 'inspectionDetContent', // rules: [{ required: true, message: '不能为空', trigger: 'blur' }], }, ], ], searchBarFormConfig: [ { type: 'input', label: '检查内容', placeholder: '请输入检查内容', param: 'inspectionDetContent', }, { type: 'button', btnName: '查询', name: 'search', color: 'primary', }, { type: 'separate', }, { type: this.$auth.hasPermi('base:quality-inspection-box-btn:create') ? 'button' : '', btnName: '新增', name: 'add', plain: true, color: 'success', }, ], tableBtn: [ this.$auth.hasPermi('base:quality-inspection-box-btn:update') ? { type: 'edit', btnName: '修改', } : undefined, this.$auth.hasPermi('base:quality-inspection-box-btn:delete') ? { type: 'delete', btnName: '删除', } : undefined, ].filter((v) => v), tableProps: [ { prop: 'createTime', label: '添加时间', fixed: true, width: 180, filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), }, { prop: 'productionName', label: '产线', }, { prop: 'sectionName', label: '工段', }, { prop: 'inspectionDetContent', label: '检测内容', }, { width: 160, prop: 'buttonId', label: '按钮盒识别码', }, // { // width: 256, // prop: 'productionId', // label: '按钮盒所在产线ID', // , // }, // { // width: 256, // prop: 'sectionId', // label: '按钮盒所在工段ID', // , // }, { width: 90, prop: 'keyValue', label: '按钮值' }, { width: 128, prop: 'model', label: '按钮盒模式' }, ], // 查询参数 queryParams: { pageNo: 1, pageSize: 10, inspectionDetContent: null, }, // 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应 searchBarKeys: ['inspectionDetContent'], form: { id: null, buttonId: null, inspectionDetContent: null, productionId: null, sectionId: null, model: null, keyValue: null, }, }; }, created() { this.getList(); }, methods: { /** 查询列表 */ getList() { this.loading = true; // 执行查询 getQualityInspectionBoxBtnPage(this.queryParams).then((response) => { this.list = response.data.list; this.total = response.data.total; this.loading = false; }); }, /** 表单重置 */ reset() { this.form = { id: null, buttonId: null, inspectionDetContent: null, productionId: null, sectionId: null, model: null, keyValue: null, }; this.resetForm('form'); }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = '添加安灯按钮16键对应'; }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id; getQualityInspectionBoxBtn(id).then((response) => { this.form = response.data; this.open = true; this.title = '修改安灯按钮16键对应'; }); }, /** 提交按钮 */ submitForm() { this.$refs['form'].validate((valid) => { if (!valid) { return; } // 修改的提交 if (this.form.id != null) { updateQualityInspectionBoxBtn(this.form).then((response) => { this.$modal.msgSuccess('修改成功'); this.open = false; this.getList(); }); return; } // 添加的提交 createQualityInspectionBoxBtn(this.form).then((response) => { this.$modal.msgSuccess('新增成功'); this.open = false; this.getList(); }); }); }, /** 删除按钮操作 */ handleDelete(row) { const id = row.id; this.$modal .confirm('是否确认删除安灯按钮16键对应编号为"' + id + '"的数据项?') .then(function () { return deleteQualityInspectionBoxBtn(id); }) .then(() => { this.getList(); this.$modal.msgSuccess('删除成功'); }) .catch(() => {}); }, /** 导出按钮操作 */ handleExport() { // 处理查询参数 let params = { ...this.queryParams }; params.pageNo = undefined; params.pageSize = undefined; this.$modal .confirm('是否确认导出所有安灯按钮16键对应数据项?') .then(() => { this.exportLoading = true; return exportQualityInspectionBoxBtnExcel(params); }) .then((response) => { this.$download.excel(response, '安灯按钮16键对应.xls'); this.exportLoading = false; }) .catch(() => {}); }, }, }; </script>