<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"
@selection-change="selectionChange"
@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>
<el-button
type="primary"
size="small"
icon="el-icon-upload2"
@click="handleImport"
>导入</el-button
>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
plain
@click="handleDelete"
>删 除
</el-button>
</template>
</avue-crud>
<el-dialog
title="设备数据导入"
append-to-body
:visible.sync="excelBox"
width="555px"
>
<avue-form
:option="excelOption"
v-model="excelForm"
:upload-after="uploadAfter"
>
<template slot="excelTemplate">
<el-button type="primary" @click="handleTemplate">
点击下载<i class="el-icon-download el-icon--right"></i>
</el-button>
</template>
</avue-form>
</el-dialog>
</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,
excelBox: false,
selectionList: [],
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: true,
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: [],
excelForm: {},
excelOption: {
submitBtn: false,
emptyBtn: false,
column: [
{
label: "导入设备",
prop: "excelFile",
type: "upload",
drag: true,
loadText: "设备上传中，请稍等",
span: 24,
propsHttp: {
res: "data",
},
tip: "请上传 .xls,.xlsx 标准格式文件",
action: "/api/iot-system/user/import-user",
},
{
label: "数据覆盖",
prop: "isCovered",
type: "switch",
align: "center",
width: 80,
dicData: [
{
label: "否",
value: 0,
},
{
label: "是",
value: 1,
},
],
value: 0,
slot: true,
rules: [
{
required: true,
message: "请选择是否覆盖",
trigger: "blur",
},
],
},
{
label: "模板下载",
prop: "excelTemplate",
formslot: true,
span: 24,
},
],
},
};
},
watch: {
"excelForm.isCovered"() {
if (this.excelForm.isCovered !== "") {
const column = this.findObject(this.excelOption.column, "excelFile");
column.action = `${this.baseUrl}/${this.apis}/iot-sim/device/import-device?isCovered=${this.excelForm.isCovered}`;
}
},
},
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),
};
},
ids() {
let ids = [];
this.selectionList.forEach((ele) => {
ids.push(ele.id);
});
return ids.join(",");
},
},
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: "操作成功!",
});
});
},
//批量删除
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();
});
},
//多选框
selectionChange(list) {
this.selectionList = list;
},
//多选框清除
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
handleImport() {
this.excelBox = true;
},
uploadAfter(res, done, loading, column) {
window.console.log(column);
this.excelBox = false;
this.refreshChange();
done();
},
handleExport() {
this.$confirm("是否导出用户数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
window.open(
`/api/iot-system/user/export-user?${
this.website.tokenHeader
}=${getToken()}&account=${this.search.account}&realName=${
this.search.realName
}`
);
});
},
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>