177 lines
4.2 KiB
Vue
177 lines
4.2 KiB
Vue
<template>
|
|
<div style="margin: 20px">
|
|
<a-row style="margin-bottom: 20px">
|
|
<a-button type="primary" @click="handleCreate">添加</a-button>
|
|
</a-row>
|
|
<a-table
|
|
:columns="tableCols"
|
|
:data-source="tableRows"
|
|
:loading="loading"
|
|
:rowKey="idName"
|
|
@change="handleTableChange"
|
|
>
|
|
<span slot="anyone" slot-scope="isanyone">
|
|
<a-tag v-if="isanyone"> 是 </a-tag>
|
|
<a-tag v-else> 否 </a-tag>
|
|
</span>
|
|
<span slot="project" slot-scope="project">
|
|
<a-tag v-if="project !== null">
|
|
{{ project.name }}
|
|
</a-tag>
|
|
</span>
|
|
<span slot="action" slot-scope="record">
|
|
<a-button size="small" type="link" @click="() => handleDetail(record)"
|
|
>查看</a-button
|
|
>
|
|
<a-divider type="vertical" />
|
|
<a-button type="danger" size="small" @click="() => handleDelete(record)"
|
|
>删除</a-button
|
|
>
|
|
</span>
|
|
</a-table>
|
|
<a-modal
|
|
v-model="visible"
|
|
:title="isCreate ? '添加设备' : '查看设备'"
|
|
:destroyOnClose="true"
|
|
:footer="null"
|
|
>
|
|
<device-detail
|
|
:detail="record"
|
|
@ok="handleOk"
|
|
@cancle="visible = false"
|
|
/>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { deleteJSON, patchJSON, postJSON, getData, URL_MAP } from "@/utils/http";
|
|
import DeviceDetail from "../forms/DeviceDetail.vue";
|
|
export default {
|
|
components: { DeviceDetail },
|
|
data() {
|
|
return {
|
|
tableRows: [],
|
|
tableCols: [
|
|
{
|
|
dataIndex: "_id",
|
|
key: "_id",
|
|
title: "设备ID",
|
|
},
|
|
{
|
|
dataIndex: "device_name",
|
|
key: "device_name",
|
|
title: "设备名称",
|
|
},
|
|
{
|
|
dataIndex: "device_uint",
|
|
key: "device_uint",
|
|
title: "设备型号",
|
|
},
|
|
{
|
|
dataIndex: "isanyone",
|
|
key: "isanyone",
|
|
title: "是否公开",
|
|
scopedSlots: { customRender: "anyone" },
|
|
},
|
|
{
|
|
dataIndex: "project",
|
|
key: "project",
|
|
title: "所属项目",
|
|
scopedSlots: { customRender: "project" },
|
|
},
|
|
{
|
|
key: "action",
|
|
title: "操作",
|
|
scopedSlots: { customRender: "action" },
|
|
},
|
|
],
|
|
pages: {},
|
|
loading: false,
|
|
listUrl: URL_MAP.DEVICE_LIST,
|
|
detailUrl: URL_MAP.DEVICE_DETAIL,
|
|
idName: "_id",
|
|
visible: false,
|
|
record: {},
|
|
isCreate: false,
|
|
};
|
|
},
|
|
methods: {
|
|
handleTableChange(pagination, filters, sorter) {
|
|
console.log(pagination);
|
|
},
|
|
async fetch(params) {
|
|
this.loading = true;
|
|
try {
|
|
let results = await getData(this.listUrl, params);
|
|
let data = results.data;
|
|
const pagination = { ...this.pages };
|
|
console.log(data)
|
|
pagination.total = data.length;
|
|
this.tableRows = data;
|
|
this.pages = pagination;
|
|
} catch (e) {
|
|
console.log(e);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
handleDetail(record) {
|
|
this.visible = true;
|
|
this.record = record;
|
|
},
|
|
async handleDelete(record) {
|
|
this.loading = true
|
|
try{
|
|
await deleteJSON(URL_MAP.DEVICE_DETAIL, { 'id': record._id })
|
|
await this.fetch({})
|
|
}catch(e)
|
|
{
|
|
console.log(e)
|
|
}
|
|
finally{
|
|
this.loading = false
|
|
}
|
|
},
|
|
async handleOk(form) {
|
|
this.visible = false;
|
|
this.loading = true;
|
|
try {
|
|
if (!this.isCreate) {
|
|
form["id"] = form["_id"];
|
|
// console.log(form)
|
|
let data = await patchJSON(URL_MAP.DEVICE_DETAIL, form);
|
|
} else {
|
|
form["id"] = form["_id"];
|
|
let data = await postJSON(URL_MAP.DEVICE_LIST, form);
|
|
}
|
|
await this.fetch({});
|
|
} catch (e) {
|
|
console.log(e);
|
|
} finally {
|
|
this.isCreate = false;
|
|
this.loading = false;
|
|
}
|
|
},
|
|
handleCreate() {
|
|
this.isCreate = true
|
|
this.visible = true
|
|
this.record = {
|
|
'_id':'',
|
|
'device_name':'',
|
|
'device_uint':'',
|
|
'isanyone':false,
|
|
'state':0,
|
|
'sensors':[],
|
|
'project':null
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetch({});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |