|
@@ -0,0 +1,461 @@
|
|
|
|
+<style>
|
|
|
|
+.rule-tree-select .ant-form-item-control {
|
|
|
|
+ line-height: inherit;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<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 href="javascript:;" @click="pushRule(record)">推送模板</a>
|
|
|
|
+ <a-divider type="vertical" />
|
|
|
|
+ <a-popconfirm :title="`当前模板关联账户个数为${relationCount},确定删除吗?`" @confirm="deleteRule(record)">
|
|
|
|
+ <a href="javascript:;" @click.stop="showRelativeCount(record)">删除模板</a>
|
|
|
|
+ </a-popconfirm>
|
|
|
|
+ </span>
|
|
|
|
+ <span slot="optionsTwo" 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>
|
|
|
|
+ <!-- pushRuleVisible -->
|
|
|
|
+ <a-modal v-model="pushRuleVisible" title="推送账户选择" @ok="handleOk" :confirmLoading="confirmLoading">
|
|
|
|
+ <a-form layout="inline" class="rule-tree-select">
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="请选择账户"
|
|
|
|
+ :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
|
|
|
|
+ :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
|
|
|
|
+ >
|
|
|
|
+ <Treeselect :appId.sync="accountId" :multiple="false" request="1,3" ref="treeSelect" style="width: 100%" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-form>
|
|
|
|
+ </a-modal>
|
|
|
|
+ </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: '模板id',
|
|
|
|
+ dataIndex: 'id',
|
|
|
|
+ align: 'center',
|
|
|
|
+ key: 'id',
|
|
|
|
+ scopedSlots: { customRender: 'id' },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ title: '模板名称',
|
|
|
|
+ dataIndex: 'templateName',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ key: 'templateName',
|
|
|
|
+ scopedSlots: { customRender: 'templateName' },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '应用媒体',
|
|
|
|
+ dataIndex: 'mediaType',
|
|
|
|
+ align: 'center',
|
|
|
|
+ key: 'mediaType',
|
|
|
|
+ scopedSlots: { customRender: 'mediaType' },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ dataIndex: 'options',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ key: 'options',
|
|
|
|
+ scopedSlots: { customRender: 'options' },
|
|
|
|
+ },
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+let recordsColumns = [
|
|
|
|
+ {
|
|
|
|
+ title: '模板名称',
|
|
|
|
+ dataIndex: 'templateName',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ key: 'templateName',
|
|
|
|
+ scopedSlots: { customRender: 'templateName' },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '模板Id',
|
|
|
|
+ dataIndex: 'templateId',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ key: 'templateId',
|
|
|
|
+ scopedSlots: { customRender: 'templateId' },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '账户',
|
|
|
|
+ dataIndex: 'authName',
|
|
|
|
+ align: 'center',
|
|
|
|
+ key: 'authName',
|
|
|
|
+ scopedSlots: { customRender: 'authName' },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '账户Id',
|
|
|
|
+ dataIndex: 'accountId',
|
|
|
|
+ align: 'center',
|
|
|
|
+ key: 'accountId',
|
|
|
|
+ scopedSlots: { customRender: 'accountId' },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '运营',
|
|
|
|
+ dataIndex: 'userName',
|
|
|
|
+ align: 'center',
|
|
|
|
+ key: 'userName',
|
|
|
|
+ scopedSlots: { customRender: 'userName' },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ dataIndex: 'optionsTwo',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ key: 'optionsTwo',
|
|
|
|
+ scopedSlots: { customRender: 'optionsTwo' },
|
|
|
|
+ },
|
|
|
|
+]
|
|
|
|
+import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
|
|
|
|
+export default {
|
|
|
|
+ name: 'useRuleList',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ relationCount: 2,
|
|
|
|
+ pushRuleVisible: false,
|
|
|
|
+ confirmLoading: false,
|
|
|
|
+ accountId: '',
|
|
|
|
+ templateId: '',
|
|
|
|
+ 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: '',
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ Treeselect,
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ moment,
|
|
|
|
+ onSearch(value) {
|
|
|
|
+ console.log(value)
|
|
|
|
+ },
|
|
|
|
+ tabChange(key) {
|
|
|
|
+ console.log(key)
|
|
|
|
+ let url = ''
|
|
|
|
+ if (key == '1') {
|
|
|
|
+ this.columns = [...existColumns]
|
|
|
|
+ url = '/ruleTemplate/list'
|
|
|
|
+ } else {
|
|
|
|
+ this.columns = [...recordsColumns]
|
|
|
|
+ url = '/ruleAccountTemplate/getTemplateApplied'
|
|
|
|
+ }
|
|
|
|
+ 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)
|
|
|
|
+ if (this.tabKey == '1') {
|
|
|
|
+ var data = { id: record.id, edit: false }
|
|
|
|
+ } else {
|
|
|
|
+ var data = { id: record.templateId, edit: true, accountId: record.accountId }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ localStorage.setItem('getRuleDetail', JSON.stringify(data))
|
|
|
|
+ this.$router.push('/earlyWarningRules/ruleModule')
|
|
|
|
+ },
|
|
|
|
+ pushRule(item) {
|
|
|
|
+ // this.confirmLoading
|
|
|
|
+ this.accountId = ''
|
|
|
|
+ this.templateId = item.id
|
|
|
|
+ this.pushRuleVisible = true
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ handleOk() {
|
|
|
|
+ getAction('/ruleAccountTemplate/checkAccountTemplate', { accountId: this.accountId }).then((res) => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ if (!res.result.isApplication) {
|
|
|
|
+ postAction('/ruleAccountTemplate/pushTemplateToAccount', {
|
|
|
|
+ templateId: this.templateId,
|
|
|
|
+ accountId: this.accountId,
|
|
|
|
+ }).then((r) => {
|
|
|
|
+ var data = { id: this.templateId, edit: true, accountId: this.accountId }
|
|
|
|
+ localStorage.setItem('getRuleDetail', JSON.stringify(data))
|
|
|
|
+ this.$router.push('/earlyWarningRules/ruleModule')
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 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) {
|
|
|
|
+ if (this.tabKey == '1') {
|
|
|
|
+ this.data = res.result.records.map((item) => {
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ status: item.eventRuleStatus == '1' ? true : false,
|
|
|
|
+ spin: false,
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.data = res.result.list.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>
|