<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 { getList, add, getDetail, remove, update, } from "@/api/communication/outbound"; import { mapGetters } from "vuex"; import { getToken } from "@/util/auth"; export default { data() { return { form: {}, query: {}, loading: true, page: { pageSize: 10, currentPage: 1, total: 0, }, option: { tip: false, searchShow: true, searchMenuSpan: 6, border: true, index: true, addBtn: true, viewBtn: true, delBtn: true, dialogDrag:true, columnBtn: false, selection: false, dialogClickModal: false, dialogWidth: "60%", column: [ { 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: "userId", type: "select", dicUrl: "/api/iot-system/user/fillData", props: { label: "account", value: "id", }, dataType: "string", span: 12, labelWidth: 130, width: 70, search: false, rules: [ { required: true, message: "请选择用户名称", trigger: "change" }, ], }, { label: "通道名称", prop: "channelId", type: "select", dicUrl: "/api/iot-sim/channel/fillData", props: { label: "name", value: "id", }, dataType: "number", span: 12, labelWidth: 130, width: 100, search: true, rules: [ { required: true, message: "请选择通道名称", trigger: "change" }, ], }, { label: "流量池名称", prop: "flowPoolId", type: "select", dataType: "number", span: 12, labelWidth: 130, searchLabelWidth: 110, width: 110, search: true, display: true, dicUrl: "/api/iot-sim/flowpool/fillData?isSource=" + 2, formatter: (val, value, label) => { if (value == -1) { return "-"; } else { return `${label}`; } }, props: { label: "name", value: "id", }, rules: [ { required: true, message: "请选择流量池名称", trigger: "change", }, ], }, { label: "卡状态", prop: "cardStatus", type: "select", dicUrl: "/api/iot-system/dict/dictionary?code=card_status", props: { label: "dictValue", value: "dictKey", }, dataType: "number", span: 12, labelWidth: 130, width: 70, search: true, rules: [ { required: true, message: "请选择卡状态", trigger: "change" }, ], }, { label: "卡类型", prop: "cardType", type: "select", dicUrl: "/api/iot-system/dict/dictionary?code=card_type", props: { label: "dictValue", value: "dictKey", }, dataType: "number", span: 12, labelWidth: 130, width: 70, search: true, rules: [ { required: true, message: "请选择卡类型", trigger: "change" }, ], }, { label: "批次号", prop: "batchNum", span: 12, labelWidth: 130, search: true, hide: true, addDisplay: false, rules: [ { required: true, message: "请输入批次号", trigger: "blur", }, ], }, { label: "iccid", prop: "iccid", width: 150, span: 12, labelWidth: 130, search: true, rules: [ { required: true, message: "请输入iccid", trigger: "blur", }, ], }, { label: "imsi", prop: "imsi", span: 12, width: 150, labelWidth: 130, search: true, addDisplay: false, rules: [ { required: true, message: "请输入imsi", trigger: "blur", }, ], }, { label: "msisdn", prop: "msisdn", span: 12, width: 150, labelWidth: 130, addDisplay: false, search: true, rules: [ { required: true, message: "请输入msisdn", trigger: "blur", }, ], }, { label: "剩余流量(M)", prop: "surplus", span: 12, type: "number", labelWidth: 130, hide: true, rules: [ { required: true, message: "请输入剩余流量", trigger: "blur" }, { pattern: /^\d+(\.\d+)?$/, message: "请输入正确的剩余流量", trigger: "blur", }, ], }, { label: "使用量(M)", prop: "usage", span: 12, labelWidth: 130, type: "number", hide: true, rules: [ { required: true, message: "请输入使用量", trigger: "blur" }, { pattern: /^\d+(\.\d+)?$/, message: "请输入正确的使用量", trigger: "blur", }, ], }, { label: "总量(M)", prop: "total", span: 12, labelWidth: 130, type: "number", hide: true, rules: [{ required: true, message: "请输入总量", trigger: "blur" }, { pattern: /^\d+(\.\d+)?$/, message: "请输入正确的总量", trigger: "blur", }, ], }, ], }, data: [], }; }, watch: { "form.$channelId"() { const columns = this.findObject(this.option.column, "flowPoolId"); if (this.form.$channelId != undefined) { if (this.form.$channelId.indexOf("电信") != -1) { columns.display = false; this.form.flowPoolId = ""; } else { columns.display = true; } } }, }, 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) { console.log(this.form); 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() { if (process.env.NODE_ENV === "production") { window.open( `http://223.99.228.240:18081/iot-sim/simcarddeliver/export-simCardDeliver?${ this.website.tokenHeader }=${getToken()}` ); } else { window.open( `/api/iot-sim/simcarddeliver/export-simCardDeliver?${ 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>