<template>
|
<div>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form @submit="handleSearch" layout="horizontal">
|
<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
|
fieldDecoratorId="name"
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 18,offset:1 }"
|
style="width: 240px;float: right;"
|
>
|
<a-input v-model="serch.name" placeholder="请输入名称或编码" />
|
</a-form-item>
|
</a-row>
|
</a-form>
|
</div>
|
|
<av-standard-table
|
:dataSource="dataSource"
|
:columns="columns"
|
:loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
></av-standard-table>
|
</div>
|
</a-card>
|
|
<a-modal
|
title="添加-因子"
|
destroyOnClose
|
:visible="visibleCreateModal"
|
@ok="handleCreateModalOk"
|
@cancel="handleCreateModalCancel"
|
okText="保存"
|
>
|
<a-form style="margin-top: 8px" :form="form">
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称">
|
<a-input
|
v-decorator="['sensorName', {rules: [{ required: true,message:'请输入因子'}] }]"
|
placeholder="请输入因子名称"
|
/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="code">
|
<a-input
|
v-decorator="['sensorCode', {rules: [{ required: true,message:'请输入code'}] ,},]"
|
placeholder="请输入code"
|
/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="下限值">
|
<a-input
|
v-decorator="['lower', {rules: [{ required: false}] }]"
|
placeholder="请输入下限值"
|
/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="上限值">
|
<a-input
|
v-decorator="['upper', {rules: [{ required:false}] }]"
|
placeholder="请输入上限值"
|
/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="默认单位">
|
|
<a-select
|
placeholder="请选择单位"
|
type="string"
|
allow-clear
|
:filter-option="filterOption"
|
show-search
|
v-decorator="['unit', { rules: [{ required: true, message:'请选择单位' }] }]"
|
>
|
<a-select-option v-for="(item,index) in this.selectTypes" :key="index">{{item}}</a-select-option>
|
</a-select>
|
</a-form-item>
|
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述">
|
<a-input v-decorator="['sensorDesc']" placeholder="请输入描述" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
|
<update-task-form
|
:visible.sync="updateTaskFormVisible"
|
:record="updateRecord"
|
@ok="handleUpdateOk"
|
@updateData="loadRuleData(1)"
|
></update-task-form>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";
|
import UpdateTaskForm from "./components/UpdateSensorBasic.vue";
|
import { get, post } from "@/util/request";
|
|
@Component({
|
components: {
|
UpdateTaskForm
|
}
|
})
|
export default class sensorBasic extends Vue {
|
private serch: any = {
|
name: ""
|
};
|
|
private form: any = {};
|
private selectTypes:any[]=[];
|
|
private pagination: any = {
|
total: 0,
|
current: 1,
|
pageSize: 10,
|
showSizeChanger: false,
|
showQuickJumper: false
|
};
|
|
@Watch("serch.name")
|
private watchsearchInform(newVal: string, oldval: string) {
|
if (newVal == "") {
|
this.loadRuleData(1);
|
} else {
|
this.handleSearch();
|
}
|
}
|
private tableLoading: boolean = false;
|
|
private dataSource: any[] = [];
|
|
private visibleCreateModal: boolean = false;
|
|
private updateTaskFormVisible: boolean = false;
|
|
private updateRecord: any = {};
|
|
private columns: any[] = [
|
{
|
title: "名称",
|
dataIndex: "name"
|
},
|
{
|
title: "编码",
|
dataIndex: "code"
|
},
|
{
|
title: "下限值",
|
dataIndex: "lower"
|
},
|
{
|
title: "上限值",
|
dataIndex: "upper"
|
},
|
{
|
title: "默认单位",
|
dataIndex: "default_unit_key"
|
},
|
{
|
title: "创建时间",
|
dataIndex: "createTime"
|
},
|
{
|
title: "描述",
|
dataIndex: "desc"
|
},
|
{
|
title: "操作",
|
customRender: this.opRender
|
}
|
];
|
|
//初始加载所有因子
|
private created() {
|
this.form = this.$form.createForm(this, { name: "sensorBasic" });
|
this.loadRuleData(1);
|
}
|
//默认单位下拉框筛选，选择
|
private filterOption(input, option) {
|
return (
|
option.componentOptions.children[0].text
|
.toLowerCase()
|
.indexOf(input.toLowerCase()) >= 0
|
);
|
}
|
|
|
//新建点击按钮
|
private handleModalVisible(isVisible: boolean): void {
|
//加载默认单位
|
get("dict/data/query?type=unit", {})
|
.then(res => {
|
this.selectTypes = res.data.data;
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
this.visibleCreateModal = isVisible;
|
}
|
|
private handleFormReset(): void {
|
|
this.serch.name = null;
|
this.loadRuleData(1);
|
}
|
|
//模糊查询
|
private handleSearch(): void {
|
get("sensor/getSensorByFuzzy", {
|
key: this.serch.name,
|
current: 1,
|
size: 100,
|
orderType: 1
|
})
|
.then(res => {
|
if (res.data.code != 0) {
|
this.$message.error(res.data.message);
|
} else {
|
this.dataSource = res.data.data.sensors;
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
|
//切换页码触发
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.loadRuleData(pagination.current);
|
}
|
|
private handleUpdateModalVisible(visible: boolean, record: any): void {
|
this.updateTaskFormVisible = true;
|
this.updateRecord = record;
|
|
}
|
|
// 新建保存
|
private handleCreateModalOk() {
|
this.form.validateFields((err: any, values: any) => {
|
if (err) {
|
return;
|
}
|
post("sensor/insertOneSensor", {
|
name: values.sensorName?values.sensorName:null,
|
code: values.sensorCode?values.sensorCode:null,
|
desc: values.sensorDesc? values.sensorDesc:null,
|
lower:values.lower? values.lower:null,
|
defaultUnitKey:values.unit?values.unit:null,
|
upper:values.upper?values.upper:null
|
}
|
).then((res: any) => {
|
if (res.data.code !== 0) {
|
this.$message.warning(res.data.message, 2);
|
} else {
|
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 loadRuleData(pageCurrent) {
|
this.tableLoading = true;
|
get("sensor/getAllSensor", {
|
current: pageCurrent,
|
size: 10,
|
orderType: 1
|
})
|
.then(res => {
|
if (res.data.code !== 0) {
|
this.$message.error(res.data.message, 2);
|
} else {
|
|
this.pagination.total = res.data.data.totalNumber;
|
this.pagination.current = res.data.data.current;
|
this.tableLoading = false;
|
this.dataSource = res.data.data.sensors;
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
|
private deleteManageRole(record: any) {
|
post(
|
"sensor/deleteSensor",
|
{
|
id: record.id
|
}
|
)
|
.then(res => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message, 2);
|
this.loadRuleData(1);
|
}else {
|
this.$message.success(res.data.message, 2);
|
}
|
|
})
|
.catch(function(error) {
|
console.log("删除失败");
|
});
|
}
|
|
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>
|
</div>
|
);
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
