|
@@ -0,0 +1,391 @@
|
|
|
+<template>
|
|
|
+ <div class="ruleSetList">
|
|
|
+ <div class="tabBody">
|
|
|
+ <a-tabs v-model="tabKey" @change="tabChange">
|
|
|
+ <a-tab-pane key="1" tab="规则管理"></a-tab-pane>
|
|
|
+ <a-tab-pane key="2" tab="运行记录" ></a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="tableBody">
|
|
|
+ <div class="opt" v-if="tabKey=='1'">
|
|
|
+ <a-button type='primary' @click='createNewRule'>新建空白规则模板</a-button>
|
|
|
+ <p class="title">已创建的规则模板</p>
|
|
|
+ </div>
|
|
|
+ <div class="opts" v-else>
|
|
|
+ <a-input-search placeholder="请输入规则id" style="width:350px" v-model="rulesId" enter-button @search="onSearch" />
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <a-table
|
|
|
+ size="middle"
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="data"
|
|
|
+ bordered
|
|
|
+ id="outTable"
|
|
|
+ :pagination="ipagination"
|
|
|
+ :scroll="{ x: scrollX }"
|
|
|
+ :loading="loading"
|
|
|
+ @change="sort"
|
|
|
+ style="word-break: break-all;"
|
|
|
+ >
|
|
|
+ <span slot="status" slot-scope="text,record">
|
|
|
+ <a-spin :spinning="record.spin" size="small" >
|
|
|
+ <div class="spin-content">
|
|
|
+ <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
+ <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
|
|
|
+ </span>
|
|
|
+ <span slot="mediaType" slot-scope="text">
|
|
|
+ {{text|handleMediaType}}
|
|
|
+ </span>
|
|
|
+ <span slot="processMethod" slot-scope="text">
|
|
|
+ {{text=='SEND'?'仅发送通知':'发送并关停组'}}
|
|
|
+ </span>
|
|
|
+ <span slot="options" slot-scope="text,record">
|
|
|
+ <a href="javascript:;" @click="editRule(record)">编辑</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a-popconfirm
|
|
|
+ :title="`当前模板关联账户个数为${relationCount},确定删除吗?`"
|
|
|
+ @confirm="deleteRule(record)"
|
|
|
+ >
|
|
|
+ <a href="javascript:;" @click.stop="showRelativeCount(record)">删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import moment from 'moment';
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
+let existColumns=[
|
|
|
+ // {
|
|
|
+ // title: '运行/暂停',
|
|
|
+ // dataIndex: 'status',
|
|
|
+ // align: 'center',
|
|
|
+ // width:100,
|
|
|
+ // key: 'status',
|
|
|
+ // scopedSlots: { customRender: 'status' }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: '模板名称',
|
|
|
+ dataIndex: 'templateName',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ key: 'templateName',
|
|
|
+ scopedSlots: { customRender: 'templateName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '应用媒体',
|
|
|
+ dataIndex: 'mediaType',
|
|
|
+ align: 'center',
|
|
|
+ key: 'mediaType',
|
|
|
+ scopedSlots: { customRender: 'mediaType' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '结果操作',
|
|
|
+ dataIndex: 'processMethod',
|
|
|
+ align: 'center',
|
|
|
+ key: 'processMethod',
|
|
|
+ scopedSlots: { customRender: 'processMethod' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建者',
|
|
|
+ dataIndex: 'createrName',
|
|
|
+ align: 'center',
|
|
|
+ key: 'createrName',
|
|
|
+ scopedSlots: { customRender: 'createrName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'options',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ key: 'options',
|
|
|
+ scopedSlots: { customRender: 'options' }
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+let recordsColumns=[
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '模板名称',
|
|
|
+ dataIndex: 'templateName',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ key: 'templateName',
|
|
|
+ scopedSlots: { customRender: 'templateName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '应用媒体',
|
|
|
+ dataIndex: 'mediaType',
|
|
|
+ align: 'center',
|
|
|
+ key: 'mediaType',
|
|
|
+ scopedSlots: { customRender: 'mediaType' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '运行对象',
|
|
|
+ dataIndex: 'accountName',
|
|
|
+ align: 'center',
|
|
|
+ key: 'accountName',
|
|
|
+ scopedSlots: { customRender: 'accountName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '满足条件',
|
|
|
+ dataIndex: 'alarmCondition',
|
|
|
+ align: 'center',
|
|
|
+ key: 'alarmCondition',
|
|
|
+ scopedSlots: { customRender: 'alarmCondition' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '运行结果',
|
|
|
+ dataIndex: 'processMethod',
|
|
|
+ align: 'center',
|
|
|
+ key: 'processMethod',
|
|
|
+ scopedSlots: { customRender: 'processMethod' }
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ relationCount:2,
|
|
|
+
|
|
|
+ tabKey:"1",
|
|
|
+ rulesId:undefined,
|
|
|
+ data:[],
|
|
|
+ columns:[...existColumns],
|
|
|
+ scrollX:0,
|
|
|
+ loading:false,
|
|
|
+ ipagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ // pageSizeOptions: ['10', '20', '30'],
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
|
+ },
|
|
|
+ showQuickJumper: true,
|
|
|
+ showSizeChanger:true,
|
|
|
+ pageSizeOptions: ['10', '30', '50'],
|
|
|
+ total: 0,
|
|
|
+ onChange: (current, pageSize) => {
|
|
|
+ // 切换分页时的回调,
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
+ this.ipagination.current = current;
|
|
|
+ this.ipagination.pageSize= pageSize;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ url:{
|
|
|
+
|
|
|
+ list:'/ruleTemplate/list',
|
|
|
+ delete:'/ruleTemplate/delete',
|
|
|
+ getRelationAccountById:'/ruleAccountTemplate/getRelationAccountById',
|
|
|
+ edit:'',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ onSearch(value) {
|
|
|
+ console.log(value);
|
|
|
+ },
|
|
|
+ tabChange(key){
|
|
|
+ console.log(key);
|
|
|
+ let url=''
|
|
|
+ if(key=='1'){
|
|
|
+ this.columns=[...existColumns]
|
|
|
+ url=this.url.existUrl
|
|
|
+ }else{
|
|
|
+ this.columns=[...recordsColumns]
|
|
|
+ url=this.url.resultRecordUrl
|
|
|
+ }
|
|
|
+ this.getTableListHttp(url)
|
|
|
+ },
|
|
|
+ createNewRule(){
|
|
|
+ this.$router.push('/earlyWarningRules/configRules')
|
|
|
+ },
|
|
|
+ sort(pagination, filters, sorter, { currentDataSource }){
|
|
|
+
|
|
|
+ this.ipagination.current=pagination.current;
|
|
|
+
|
|
|
+ this.ipagination.pageSize=pagination.pageSize;
|
|
|
+ let url=this.tabKey=='1'?this.url.existUrl:this.url.resultRecordUrl
|
|
|
+
|
|
|
+ this.getTableListHttp(url)
|
|
|
+ },
|
|
|
+ editRule(record){
|
|
|
+ console.log(record);
|
|
|
+ this.$router.push(`/earlyWarningRules/configRules?id=${record.id}`)
|
|
|
+ },
|
|
|
+ // recordsRule(record){
|
|
|
+ // console.log(record);
|
|
|
+
|
|
|
+ // },
|
|
|
+ showRelativeCount(record){
|
|
|
+ getAction(this.url.getRelationAccountById,{
|
|
|
+ id:record.id
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ this.relationCount=res.result.relationCount
|
|
|
+ // getAction(this.url.delete,{
|
|
|
+ // id:record.id
|
|
|
+ // }).then(res=>{
|
|
|
+ // console.log(res);
|
|
|
+ // if(res.success){
|
|
|
+ // this.getTableListHttp(this.url.list)
|
|
|
+ // }else{
|
|
|
+ // this.$message.error('删除失败')
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteRule(record){
|
|
|
+ console.log(record);
|
|
|
+ getAction(this.url.getRelationAccountById,{
|
|
|
+ id:record.id
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ // getAction(this.url.delete,{
|
|
|
+ // id:record.id
|
|
|
+ // }).then(res=>{
|
|
|
+ // console.log(res);
|
|
|
+ // if(res.success){
|
|
|
+ // this.getTableListHttp(this.url.list)
|
|
|
+ // }else{
|
|
|
+ // this.$message.error('删除失败')
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ switchChange(text,record){
|
|
|
+ console.log(text,record);
|
|
|
+ record.spin=true;
|
|
|
+ let eventRuleStatus='1'
|
|
|
+ if(text){
|
|
|
+ eventRuleStatus='0'
|
|
|
+
|
|
|
+ }else{
|
|
|
+ eventRuleStatus='1';
|
|
|
+ }
|
|
|
+
|
|
|
+ postAction('/alarm/alarmEventRule/edit',{
|
|
|
+ eventRuleId:record.eventRuleId,
|
|
|
+ eventRuleStatus,
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ record.spin=false;
|
|
|
+ if(res.success){
|
|
|
+ // this.getTableListHttp()
|
|
|
+ if(text){
|
|
|
+ record.status=false
|
|
|
+ eventRuleStatus='0'
|
|
|
+ }else{
|
|
|
+ record.status=true
|
|
|
+ eventRuleStatus='1';
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.$message.error('修改失败')
|
|
|
+ // this.getTableListHttp()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getTableListHttp(url){
|
|
|
+ this.data=[];
|
|
|
+ this.loading=true;
|
|
|
+ // let url='/alarm/alarmEventRule/list'
|
|
|
+ getAction(url,{
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ pageSize:this.ipagination.pageSize
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ this.loading=false;
|
|
|
+ if(res.success){
|
|
|
+ this.data=res.result.records.map(item=>{
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ status:item.eventRuleStatus=='1'?true:false,
|
|
|
+ spin:false,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.ipagination.total=res.result.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted(){
|
|
|
+ this.getTableListHttp(this.url.list)
|
|
|
+ },
|
|
|
+ activated(){
|
|
|
+ this.getTableListHttp(this.url.list)
|
|
|
+ },
|
|
|
+ filters:{
|
|
|
+ handleMediaType(val){
|
|
|
+ switch (val) {
|
|
|
+ case 1:
|
|
|
+ return '头条'
|
|
|
+ break;
|
|
|
+
|
|
|
+ case 2:
|
|
|
+ return '快手'
|
|
|
+ break;
|
|
|
+
|
|
|
+ case 3:
|
|
|
+ return '头条内广'
|
|
|
+ break;
|
|
|
+
|
|
|
+ case 4:
|
|
|
+ return '快手内广'
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.ruleSetList{
|
|
|
+ background: white;
|
|
|
+ padding: 20px;
|
|
|
+ .tabBody{
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .tableBody{
|
|
|
+ .opt{
|
|
|
+ .title{
|
|
|
+ margin: 15px 0;
|
|
|
+ height: 57px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 57px;
|
|
|
+ background: #ffffff;
|
|
|
+ padding-left: 15px;
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1px solid #DADFE3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .opts{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|