<template>
|
<div>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form @submit="handleSearch" layout="horizontal" :form="searchForm">
|
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
|
<a-button
|
icon="plus"
|
type="primary"
|
@click="() => this.handleModalVisible(true)"
|
style="margin-left: 25px;"
|
>新建</a-button
|
>
|
<a-form-item
|
v-bind="searchFormLayout"
|
style="width: 240px;float: right;"
|
>
|
<a-input
|
v-model="serch.name"
|
placeholder="请输入型号名称"
|
allow-clear
|
/>
|
</a-form-item>
|
</a-row>
|
</a-form>
|
</div>
|
|
<av-standard-table
|
:dataSource="dataSource"
|
:selectedRows="selectedRows"
|
:columns="columns"
|
:loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
@selectChange="handlerSelectChange"
|
></av-standard-table>
|
</div>
|
</a-card>
|
|
<a-modal
|
title="添加-型号"
|
destroyOnClose
|
:visible="visibleCreateModal"
|
@ok="handleCreateModalOk"
|
@cancel="handleCreateModalCancel"
|
okText="保存"
|
>
|
<a-form style="margin-top: 8px" :form="createForm">
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
has-feedback
|
>
|
<a-input
|
placeholder="型号名称"
|
type="string"
|
v-decorator="[
|
'deviceName',
|
{ rules: [{ required: true, message: '请输入名称！' }] },
|
]"
|
/>
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="备注"
|
>
|
<a-input
|
placeholder="型号名称"
|
type="string"
|
v-decorator="['desc']"
|
/>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
|
<update-task-form
|
:visible.sync="updateTaskFormVisible"
|
:record="updateRecord"
|
@ok="handleUpdateOk"
|
></update-task-form>
|
<distribution-version
|
:visible.sync="distributionMenuVisible"
|
:record="updateRecord1"
|
@ok="handleUpdateOk"
|
></distribution-version>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";
|
|
import moment from "moment";
|
import { get, post } from "@/util/request";
|
|
import UpdateTaskForm from "./components/UpdateTaskFormVersion.vue";
|
import DistributionVersion from "./components/DistributionVersion.vue";
|
|
import modalService from "@/core/ModalService.ts";
|
|
const statusMap = ["default", "processing", "success", "error"];
|
const status = ["关闭", "运行中", "已上线", "异常"];
|
|
@Component({
|
components: {
|
UpdateTaskForm,
|
DistributionVersion,
|
},
|
})
|
export default class QueryList extends Vue {
|
private searchForm: any;
|
|
private serch: any = {
|
name: "",
|
};
|
|
private searchFormLayout: any = {
|
labelCol: {
|
span: 5,
|
},
|
wrapperCol: {
|
span: 18,
|
offset: 1,
|
},
|
};
|
|
private form: any = {};
|
@Watch("serch.name")
|
private watchsearchInform(newVal: string, oldval: string) {
|
this.loadRuleData(1);
|
}
|
|
private expandForm: boolean = false;
|
|
private selectedRowKeys: any[] = [];
|
|
private selectedRows: any[] = [];
|
|
private tableLoading: boolean = false;
|
|
private moment: any = moment;
|
|
private dataSource: any[] = [];
|
|
private visibleCreateModal: boolean = false;
|
|
private updateTaskFormVisible: boolean = false;
|
|
private distributionMenuVisible: boolean = false;
|
|
private createForm: any = null;
|
|
private updateRecord: any = {};
|
|
private updateRecord1: any = {};
|
|
private columns: any[] = [
|
{
|
title: "序号",
|
dataIndex: "key",
|
key: "key",
|
align: "center",
|
customRender: (text: any, record: any, index: any) => `${index + 1}`,
|
width: 60,
|
},
|
{
|
title: "名称",
|
dataIndex: "name",
|
},
|
|
{
|
title: "创建日期",
|
dataIndex: "createTime",
|
},
|
{
|
title: "备注",
|
dataIndex: "desc",
|
},
|
{
|
title: "操作",
|
customRender: this.opRender,
|
},
|
];
|
|
private pagination: any = {
|
total: 0,
|
current: 1,
|
pageSize: 10,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
pageSizeOptions: ["10", "30", "60", "100"],
|
showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据
|
};
|
constructor() {
|
super();
|
}
|
|
get status() {
|
return status;
|
}
|
|
get statusMap() {
|
return statusMap;
|
}
|
|
get statuFilters() {
|
return [
|
{
|
text: status[0],
|
value: 0,
|
},
|
{
|
text: status[1],
|
value: 1,
|
},
|
{
|
text: status[2],
|
value: 2,
|
},
|
{
|
text: status[3],
|
value: 3,
|
},
|
];
|
}
|
|
//新建
|
private handleModalVisible(isVisible: boolean): void {
|
this.visibleCreateModal = isVisible;
|
}
|
|
private toggleForm(): void {
|
this.expandForm = !this.expandForm;
|
}
|
|
private handleFormReset(): void {
|
this.serch.name = null;
|
this.loadRuleData(1);
|
}
|
|
private handleSearch(): void {
|
get("manageRole/getManageRoleByNameFuzzy", {
|
name: this.serch.name,
|
current: 1,
|
size: 100,
|
})
|
.then((res) => {
|
this.dataSource = res.data.data.manageRoles;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.pagination.current = pagination.current;
|
this.pagination.pageSize = pagination.pageSize;
|
this.pagination.total = pagination.total;
|
this.loadRuleData(pagination.current);
|
}
|
|
private testCallback(param: any) {}
|
|
private test() {
|
/* webpackChunkName: "list.testmodal" */
|
/*
|
const ComponentClass: any = () => import( './components/TestModal.vue');
|
const instance = new ComponentClass();
|
instance.then((comp: any) => {
|
const modalInstance = new comp.default({
|
propsData: {
|
'props': { user: 'admin2' },
|
...{ user: 'admin2' },
|
},
|
}
|
);
|
modalInstance.$mount();
|
});*/
|
|
/*
|
// TestModal
|
const instance = modalService.show(TestModal , { user: 'admin2' } );
|
*/
|
const instance = modalService.showAsync(
|
import(
|
/* webpackChunkName: "list.testmodal" */ "./components/TestModal.vue"
|
),
|
{ user: "admin2" }
|
);
|
instance.subscribe((res: any) => {});
|
}
|
|
private handleUpdateModalVisible(visible: boolean, record: any): void {
|
this.updateTaskFormVisible = true;
|
this.updateRecord = record;
|
}
|
|
private handleUpdateModalVisible1(visible: boolean, record: any): void {
|
this.updateRecord1 = record;
|
this.distributionMenuVisible = true;
|
}
|
|
private handleCreateModalOk() {
|
this.createForm.validateFields((err: any, fieldsValue: any) => {
|
if (err) {
|
return;
|
}
|
post("version/insert", {
|
name: this.createForm.getFieldValue("deviceName"),
|
desc: this.createForm.getFieldValue("desc"),
|
})
|
.then((res: any) => {
|
if (res.data.code !== 0) {
|
this.$message.warning(res.data.message, 2);
|
return;
|
}
|
this.createForm.resetFields();
|
this.$message.success(res.data.message, 2);
|
this.visibleCreateModal = false;
|
this.loadRuleData(1);
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
});
|
}
|
|
private handleUpdateOk() {
|
this.loadRuleData(1);
|
}
|
|
private handleCreateModalCancel(): any {
|
this.visibleCreateModal = false;
|
}
|
|
private handlerSelectChange(arr1: any, arr2: any) {
|
this.selectedRows = arr2;
|
}
|
|
private handleMenuClick(e: any) {}
|
|
private created() {
|
this.createForm = this.$form.createForm(this, { name: "devicesVersion" });
|
this.searchForm = this.$form.createForm(this, { name: "devicesVersion" });
|
this.loadRuleData(1);
|
}
|
|
private loadRuleData(page: number) {
|
this.tableLoading = true;
|
get("version/query", {
|
name: this.serch.name,
|
orderType: 1,
|
order: "createTime",
|
page: page,
|
size: this.pagination.pageSize,
|
}).then((res) => {
|
if (res.data.code !== 0) {
|
this.$message.error(res.data.message, 2);
|
} else {
|
this.tableLoading = false;
|
this.pagination.current = res.data.data.current;
|
this.pagination.total = res.data.data.total;
|
this.pagination.pageSize = res.data.data.size;
|
this.dataSource = res.data.data.versions;
|
}
|
});
|
}
|
|
private deleteManageRole(record: any) {
|
post("version/delete", { id: record.id })
|
.then((res) => {
|
if (res.data.code === 0) {
|
this.$message.success("删除成功", 2);
|
this.loadRuleData(1);
|
}
|
})
|
.catch((err) => {
|
this.$message.warning(err, 2);
|
});
|
}
|
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div>
|
<a onClick={() => this.handleUpdateModalVisible(true, record)}>
|
{" "}
|
编辑{" "}
|
</a>
|
<a-divider type="vertical" />
|
<a-popconfirm
|
title="确认删除吗？"
|
ok-text="确定"
|
cancel-text="取消"
|
onConfirm={() => this.deleteManageRole(record)}
|
>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
<a-divider type="vertical" />
|
<a onClick={() => this.handleUpdateModalVisible1(true, record)}>
|
配置传感器
|
</a>
|
</div>
|
);
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
