<template>
|
<div>
|
<av-page-header :title="$t(`menu.list.searchtable`)">
|
<div slot="breadcrumb">
|
<a-breadcrumb>
|
<a-breadcrumb-item>
|
<a >{{$t(`menu.home`)}}</a>
|
</a-breadcrumb-item>
|
<a-breadcrumb-item>
|
<a >{{$t(`menu.list`)}}</a>
|
</a-breadcrumb-item>
|
<a-breadcrumb-item>{{$t(`menu.list.searchtable`)}}</a-breadcrumb-item>
|
</a-breadcrumb>
|
</div>
|
<div slot="content">
|
{{$t(`menu.list.searchtable`)}}
|
</div>
|
</av-page-header>
|
|
<a-card :bordered="false">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form @submit="handleSearch" layout="horizontal" :autoFormCreate="(form)=>{this.searchForm = form}">
|
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
|
<a-col :md="8" :sm="24">
|
<a-form-item label="规则名称" fieldDecoratorId="name" v-bind="searchFormLayout">
|
<a-input placeholder="请输入" />
|
</a-form-item>
|
</a-col>
|
<a-col :md="8" :sm="24">
|
<a-form-item label="使用状态" fieldDecoratorId="status" v-bind="searchFormLayout">
|
<a-select placeholder="请选择" style="width: '100%'">
|
<a-select-option value="0">关闭</a-select-option>
|
<a-select-option value="1">运行中</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="8" :sm="24" v-if="expandForm">
|
<a-form-item label="调用次数" fieldDecoratorId="number" v-bind="searchFormLayout">
|
<a-input-number :style="{ width: '100%' }" />
|
</a-form-item>
|
</a-col>
|
<a-col :md="8" :sm="24" v-if="!expandForm">
|
<span class="submitButtons">
|
<a-button type="primary" htmlType="submit">
|
查询
|
</a-button>
|
<a-button style="margin-left: 8px" @click="this.handleFormReset">
|
重置
|
</a-button>
|
<a style="margin-left: 8px" @click="this.toggleForm">
|
展开 <a-icon type="down" />
|
</a>
|
</span>
|
</a-col>
|
|
</a-row>
|
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }" v-if="expandForm">
|
<a-col :md="8" :sm="24">
|
<a-form-item label="更新日期" fieldDecoratorId="date" v-bind="searchFormLayout">
|
<a-date-picker :style="{ width: '100%' }" placeholder="请输入更新日期" />
|
</a-form-item>
|
</a-col>
|
<a-col :md="8" :sm="24">
|
<a-form-item label="使用状态" fieldDecoratorId="status3" v-bind="searchFormLayout">
|
<a-select placeholder="请选择" :style="{ width: '100%' }">
|
<a-select-option value="0">关闭</a-select-option>
|
<a-select-option value="1">运行中</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="8" :sm="24">
|
<a-form-item label="使用状态" fieldDecoratorId="status4" v-bind="searchFormLayout">
|
<a-select placeholder="请选择" :style="{ width: '100%' }">
|
<a-select-option value="0">关闭</a-select-option>
|
<a-select-option value="1">运行中</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<div :style="{ overflow: 'hidden' }" v-if="expandForm">
|
<div :style="{ float: 'right', marginBottom: 24 }">
|
<a-button type="primary" htmlType="submit">
|
查询
|
</a-button>
|
<a-button :style="{ 'margin-left': '8px' }" @click="this.handleFormReset">
|
重置
|
</a-button>
|
<a :style="{ 'margin-left': '8px' }" @click="this.toggleForm">
|
收起 <a-icon type="up" />
|
</a>
|
</div>
|
</div>
|
</a-form>
|
</div>
|
<div class="tableListOperator">
|
<a-button icon="plus" type="primary" @click="() => this.handleModalVisible(true)">
|
新建
|
</a-button>
|
|
<a-button icon="plus" type="primary" @click="() => this.test()">
|
测试功能
|
</a-button>
|
|
<span v-if="selectedRows.length > 0">
|
<a-button>批量操作</a-button>
|
<a-dropdown>
|
<template slot="overlay">
|
<a-menu @click="handleMenuClick">
|
<a-menu-item key="remove">删除</a-menu-item>
|
<a-menu-item key="approval">批量审批</a-menu-item>
|
</a-menu>
|
</template>
|
<a-button>
|
更多操作 <a-icon type="down" />
|
</a-button>
|
</a-dropdown>
|
</span>
|
</div>
|
<av-standard-table :dataSource="dataSource" :selectedRows="selectedRows" :columns="columns" :loading="tableLoading" @tableChange="handlerTableChange" @selectChange="handlerSelectChange">
|
</av-standard-table>
|
</div>
|
</a-card>
|
|
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
|
<!---->
|
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}">
|
<a-input placeholder="请输入" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
|
<update-task-form :visible.sync="updateTaskFormVisible" :record="updateRecord" @ok="handleUpdateOk"></update-task-form>
|
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
} from 'vue-property-decorator';
|
import {
|
State,
|
Mutation,
|
namespace,
|
} from 'vuex-class';
|
|
import moment from 'moment';
|
import axios from 'axios';
|
|
import { Observable, Subscription, BehaviorSubject } from 'rxjs';
|
|
import UpdateTaskForm from './components/UpdateTaskForm.vue';
|
|
/**/
|
import TestModal from './components/TestModal.vue';
|
|
|
import modalService from '@/core/ModalService.ts';
|
|
const statusMap = ['default', 'processing', 'success', 'error'];
|
const status = ['关闭', '运行中', '已上线', '异常'];
|
|
@Component({
|
components: {
|
UpdateTaskForm,
|
},
|
})
|
export default class QueryList extends Vue {
|
private searchForm: any;
|
|
private searchFormLayout: any = {
|
labelCol: {
|
span: 5,
|
},
|
wrapperCol: {
|
span: 18,
|
offset: 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 createForm: any = null;
|
|
private updateRecord: any = {};
|
|
private columns: any[] = [{
|
title: '规则名称',
|
dataIndex: 'title',
|
},
|
{
|
title: '描述',
|
dataIndex: 'description',
|
},
|
{
|
title: '服务调用次数',
|
dataIndex: 'callNo',
|
sorter: true,
|
align: 'right',
|
customRender: this.rightRender,
|
needTotal: true,
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
filters: [{
|
text: status[0],
|
value: 0,
|
},
|
{
|
text: status[1],
|
value: 1,
|
},
|
{
|
text: status[2],
|
value: 2,
|
},
|
{
|
text: status[3],
|
value: 3,
|
},
|
],
|
customRender: this.statusRender,
|
},
|
{
|
title: '上次调度时间',
|
dataIndex: 'updatedAt',
|
sorter: true,
|
customRender: this.updatedAtRender,
|
},
|
{
|
title: '操作',
|
customRender: this.opRender,
|
},
|
];
|
|
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 {}
|
|
private handleSearch(): void {}
|
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
|
}
|
|
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 handleCreateModalOk() {
|
this.createForm.validateFields((err: any, fieldsValue: any) => {
|
if (err) {
|
return;
|
}
|
const description = this.createForm.getFieldValue('description');
|
axios.post('/saveRule', {
|
desc: description,
|
}).then((res: any) => {
|
this.createForm.resetFields();
|
this.visibleCreateModal = false;
|
this.loadRuleData();
|
});
|
});
|
}
|
|
private handleUpdateOk() {
|
this.loadRuleData();
|
}
|
|
private handleCreateModalCancel(): any {
|
this.visibleCreateModal = false;
|
}
|
|
private handlerSelectChange(arr1: any, arr2: any) {
|
this.selectedRows = arr2;
|
}
|
|
private handleMenuClick(e: any) {
|
}
|
|
private mounted() {
|
this.loadRuleData();
|
}
|
|
private loadRuleData() {
|
this.tableLoading = true;
|
axios.get('/rule').then((res) => {
|
this.dataSource = res.data;
|
})
|
.finally(() => {
|
this.tableLoading = false;
|
});
|
}
|
|
private rightRender(text: string) {
|
return `${text} 万`;
|
}
|
|
private statusRender(text: any, record: any, index: number) {
|
return <a-badge status = {
|
statusMap[text]
|
}
|
text = {
|
status[text]
|
}
|
/>;
|
}
|
|
private updatedAtRender(text: string) {
|
return <span> {
|
moment(text).format('YYYY-MM-DD HH:mm:ss')
|
} </span>;
|
}
|
|
private opRender(text: string, record: any, index: number) {
|
return <div>
|
<a onClick = {
|
() => this.handleUpdateModalVisible(true, record)
|
} > 配置 </a>
|
<a-divider type = 'vertical' />
|
<a href = '' > 订阅警报 </a>
|
</div>;
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
