<template> <basic-container> <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad" > <template slot="menuLeft"> <el-button size="small" type="primary" icon="el-icon-download" @click="handleExport" >导出 </el-button> </template> </avue-crud> </basic-container> </template> <script> import { getDetail, getList, add, remove, update, } from "@/api/communication/device"; import { mapGetters } from "vuex"; import { getToken } from "@/util/auth"; export default { data() { return { form: {}, query: {}, loading: false, page: { pageSize: 10, currentPage: 1, total: 0, }, option: { tip: false, searchShow: true, searchMenuSpan: 6, border: true, index: true, addBtn: true, viewBtn: true, dialogDrag: true, //表单窗口拖拽 delBtn: true, columnBtn: false, selection: false, dialogClickModal: false, dialogWidth: "60%", column: [ { label: "批次号", prop: "batchNum", span: 12, labelWidth: 130, search: true, rules: [ { required: true, message: "请输入批次号", trigger: "blur", }, ], }, { label: "imei", prop: "imei", span: 12, labelWidth: 130, searchLabelWidth: 90, search: true, rules: [ { required: true, message: "请输入imei", trigger: "blur", }, ], }, { label: "租户名称", prop: "tenantId", type: "select", dicUrl: "/api/iot-system/tenant/fillData", props: { label: "tenantName", value: "tenantId", }, dataType: "String", span: 12, labelWidth: 130, width: 140, search: true, rules: [ { required: true, message: "请选择租户名称", trigger: "change" }, ], }, { label: "设备名称", prop: "name", span: 12, labelWidth: 130, search: true, rules: [ { required: true, message: "请输入设备名称", trigger: "blur", }, ], }, { label: "设备号", prop: "sn", span: 12, labelWidth: 130, search: true, rules: [ { required: true, message: "请输入设备号", trigger: "blur", }, ], }, { label: "贴片卡iccid", prop: "simChipIccid", span: 12, labelWidth: 130, search: false, hide: true, rules: [ { required: true, message: "请输入贴片卡id", trigger: "blur", }, ], }, { label: "插拔卡iccid", prop: "simExtraIccid", span: 12, labelWidth: 130, search: false, hide: true, rules: [ { required: false, message: "请输入插拔卡id", trigger: "blur", }, ], }, { label: "是否出库", prop: "isDeliver", type: "select", dicUrl: "/api/iot-system/dict/dictionary?code=yes_no", props: { label: "dictValue", value: "dictKey", }, dataType: "number", span: 12, labelWidth: 130, search: true, rules: [ { required: true, message: "请选择是否出库", trigger: "change" }, ], }, { label: "设备读卡类型", prop: "type", type: "select", span: 12, dicUrl: "/api/iot-system/dict/dictionary?code=device_type", props: { label: "dictValue", value: "dictKey", }, dataType: "number", labelWidth: 120, searchLabelWidth: 140, search: true, rules: [ { required: true, message: "请选择设备读卡类型", trigger: "change", }, ], }, ], }, data: [], }; }, computed: { ...mapGetters(["permission"]), permissionList() { return { // viewBtn: this.vaildData(this.permission.sourceApi_view, false), // editBtn: this.vaildData(this.permission.sourceApi_edit, false), // delBtn: this.vaildData(this.permission.sourceApi_delete, false), }; }, }, methods: { 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(); }, //新增 rowSave(row, done, loading) { add(row).then( () => { this.onLoad(this.page); this.$message({ type: "success", message: "操作成功!", }); done(); }, (error) => { window.console.log(error); loading(); } ); }, //修改 rowUpdate(row, index, done, loading) { update(row).then( () => { this.onLoad(this.page); this.$message({ type: "success", message: "操作成功!", }); done(); }, (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: "操作成功!", }); }); }, currentChange(currentPage) { this.page.currentPage = currentPage; }, sizeChange(pageSize) { this.page.pageSize = pageSize; }, refreshChange() { this.onLoad(this.page, this.query); }, //导出 handleExport() { window.open( `${this.baseUrl}/${this.apis}iot-sim/device/export-device?${ this.website.tokenHeader }=${getToken()}` ); }, 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; }); }, }, }; </script> <style></style>