Commit d87f1649 authored by 季圣华's avatar 季圣华
Browse files

去掉多余的文件

parent 1043ee9b
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="消息标题">
<a-input placeholder="请输入消息标题" v-model="queryParam.esTitle"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="发送内容">
<a-input placeholder="请输入发送内容" v-model="queryParam.esContent"></a-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8">
<a-form-item label="接收人">
<a-input placeholder="请输入接收人" v-model="queryParam.esReceiver"></a-input>
</a-form-item>
</a-col>
</template>
<a-col :md="6" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
<a-button type="primary" v-show="show" icon="download" @click="handleExportXls('消息')">导出</a-button>
<a-upload v-show="show" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
@change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<!-- 字符串超长截取省略号显示-->
<span slot="esContent" slot-scope="text">
<j-ellipsis :value="text" :length="10" />
</span>
<span slot="action" slot-scope="text, record">
<a href="javascript:;" @click="handleDetail(record)">详情</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多<a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item v-show="show">
<a @click="handleEdit(record)">编辑</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<sysMessage-modal ref="modalForm" @ok="modalFormOk"></sysMessage-modal>
</a-card>
</template>
<script>
import SysMessageModal from './modules/SysMessageModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JEllipsis from "@/components/jeecg/JEllipsis";
export default {
name: "SysMessageList",
mixins: [JeecgListMixin],
components: {
JEllipsis,
SysMessageModal
},
data() {
return {
description: '消息管理页面',
// 新增修改按钮是否显示
show: false,
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '消息标题',
align: "center",
dataIndex: 'esTitle'
},
{
title: '发送内容',
align: "center",
dataIndex: 'esContent',
scopedSlots: {customRender: 'esContent'},
},
{
title: '接收人',
align: "center",
dataIndex: 'esReceiver'
},
{
title: '发送次数',
align: "center",
dataIndex: 'esSendNum'
},
{
title: '发送状态',
align: 'center',
dataIndex: 'esSendStatus_dictText'
},
{
title: '发送时间',
align: "center",
dataIndex: 'esSendTime'
},
{
title: '发送方式',
align: 'center',
dataIndex: 'esType_dictText'
},
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}
],
url: {
list: "/message/sysMessage/list",
delete: "/message/sysMessage/delete",
deleteBatch: "/message/sysMessage/deleteBatch",
exportXlsUrl: "message/sysMessage/exportXls",
importExcelUrl: "message/sysMessage/importExcel",
},
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {}
}
</script>
<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="模板CODE">
<a-input placeholder="请输入模板CODE" v-model="queryParam.templateCode"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="模板内容">
<a-input placeholder="请输入模板内容" v-model="queryParam.templateContent"></a-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8">
<a-form-item label="模板标题">
<a-input placeholder="请输入模板标题" v-model="queryParam.templateName"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="模板类型">
<a-input placeholder="请输入模板类型" v-model="queryParam.templateType"></a-input>
</a-form-item>
</a-col>
</template>
<a-col :md="6" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('消息模板')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
@change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<!-- 字符串超长截取省略号显示-->
<span slot="templateContent" slot-scope="text">
<j-ellipsis :value="text" :length="25" />
</span>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item>
<a @click="handleTest(record)">发送测试</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<sysMessageTemplate-modal ref="modalForm" @ok="modalFormOk"></sysMessageTemplate-modal>
<sysMessageTest-modal ref="testModal"></sysMessageTest-modal>
</a-card>
</template>
<script>
import SysMessageTemplateModal from './modules/SysMessageTemplateModal'
import SysMessageTestModal from './modules/SysMessageTestModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JEllipsis from "@/components/jeecg/JEllipsis";
export default {
name: "SysMessageTemplateList",
mixins: [JeecgListMixin],
components: {
JEllipsis,
SysMessageTemplateModal,
SysMessageTestModal
},
data() {
return {
description: '消息模板管理页面',
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '模板CODE',
align: "center",
dataIndex: 'templateCode'
},
{
title: '模板标题',
align: "center",
dataIndex: 'templateName'
},
{
title: '模板内容',
align: "center",
dataIndex: 'templateContent',
scopedSlots: {customRender: 'templateContent'},
},
{
title: '模板类型',
align: "center",
dataIndex: 'templateType',
customRender: function (text) {
if(text=='1') {
return "短信";
}
if(text=='2') {
return "邮件";
}
if(text=='3') {
return "微信";
}
if(text=='4') {
return "系统";
}
}
},
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}
],
url: {
list: "/message/sysMessageTemplate/list",
delete: "/message/sysMessageTemplate/delete",
deleteBatch: "/message/sysMessageTemplate/deleteBatch",
exportXlsUrl: "message/sysMessageTemplate/exportXls",
importExcelUrl: "message/sysMessageTemplate/importExcel",
},
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {
handleTest(record){
this.$refs.testModal.open(record);
this.$refs.testModal.title = "发送测试";
}
}
}
</script>
<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
</style>
\ No newline at end of file
<template>
<a-drawer
:title="title"
:maskClosable="true"
width=650
placement="right"
:closable="true"
@close="close"
:visible="visible"
style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息标题">
<a-input placeholder="请输入消息标题" v-decorator="['esTitle', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送内容">
<a-input placeholder="请输入发送内容" v-decorator="['esContent', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送所需参数">
<a-input placeholder="请输入发送所需参数Json格式" v-decorator="['esParam', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="接收人">
<a-input placeholder="请输入接收人" v-decorator="['esReceiver', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送方式">
<j-dict-select-tag :triggerChange="true" dictCode="msgType" v-decorator="[ 'esType', {}]" placeholder="请选择发送方式">
</j-dict-select-tag>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送时间">
<a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'esSendTime', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送状态">
<j-dict-select-tag :triggerChange="true" dictCode="msgSendStatus" v-decorator="[ 'esSendStatus', {}]" placeholder="请选择发送状态">
</j-dict-select-tag>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送次数">
<a-input-number v-decorator="[ 'esSendNum', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="发送失败原因">
<a-input v-decorator="['esResult', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="备注">
<a-input v-decorator="['remark', {}]"/>
</a-form-item>
</a-form>
</a-spin>
<div v-show="!disableSubmit">
<a-button style="margin-right: .8rem" @confirm="handleCancel">取消</a-button>
<a-button @click="handleOk" type="primary" :loading="confirmLoading">提交</a-button>
</div>
</a-drawer>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
export default {
name: "SysMessageModal",
data() {
return {
title: "操作",
visible: false,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {},
disableSubmit: true,
url: {
add: "/message/sysMessage/add",
edit: "/message/sysMessage/edit",
},
}
},
created() {
},
methods: {
add() {
this.edit({});
},
edit(record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'esContent', 'esParam', 'esReceiver', 'esResult', 'esSendNum', 'esSendStatus', 'esTitle', 'esType', 'remark'))
//时间格式化
this.form.setFieldsValue({esSendTime: this.model.esSendTime ? moment(this.model.esSendTime) : null})
});
},
close() {
this.$emit('close');
this.visible = false;
},
handleOk() {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if (!this.model.id) {
httpurl += this.url.add;
method = 'post';
} else {
httpurl += this.url.edit;
method = 'put';
}
let formData = Object.assign(this.model, values);
//时间格式化
formData.esSendTime = formData.esSendTime ? formData.esSendTime.format('YYYY-MM-DD HH:mm:ss') : null;
console.log(formData)
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.$emit('ok');
} else {
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
that.close();
})
}
})
},
handleCancel() {
this.close()
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<a-col :span="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板CODE"
style="margin-right: -35px"
>
<a-input
:disabled="disable"
placeholder="请输入模板编码"
v-decorator="['templateCode', validatorRules.templateCode ]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板类型">
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型">
</j-dict-select-tag>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24" >
<a-col :span="24" pull="2">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板标题"
style="margin-left: -15px">
<a-input
placeholder="请输入模板标题"
v-decorator="['templateName', validatorRules.templateName]"
style="width: 122%"
/>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :span="24" pull="4">
<a-form-item
v-show="!useEditor"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容"
style="margin-left: 4px;width: 126%">
<a-textarea placeholder="请输入模板内容" v-decorator="['templateContent', validatorRules.templateContent ]" :autosize="{ minRows: 8, maxRows: 8 }"/>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="24">
<a-col :span="24" pull="4">
<a-form-item
v-show="useEditor"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容"
style="margin-left: 4px;width: 126%">
<j-editor v-model="templateEditorContent"></j-editor>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import { duplicateCheck } from '@/api/api'
import JEditor from '@/components/jeecg/JEditor'
export default {
name: "SysMessageTemplateModal",
components:{
JEditor
},
data() {
return {
title: "操作",
visible: false,
disable: true,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {
templateCode: {rules: [{required: true, message: '请输入模板CODE!' },{validator: this.validateTemplateCode}]},
templateName: {rules: [{required: true, message: '请输入模板标题!'}]},
templateContent: {rules: []},
templateType: {rules: [{required: true, message: '请输入模板类型!'}]},
},
url: {
add: "/message/sysMessageTemplate/add",
edit: "/message/sysMessageTemplate/edit",
},
useEditor:false,
templateEditorContent:""
}
},
created() {
},
methods: {
add() {
this.disable = false;
this.edit({});
},
edit(record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.useEditor = (record.templateType==2 || record.templateType==4)
if(this.useEditor){
this.templateEditorContent=record.templateContent
}else{
this.templateEditorContent=''
}
this.visible = true;
this.$nextTick(() => {
if(this.useEditor){
this.form.setFieldsValue(pick(this.model, 'templateCode', 'templateName', 'templateTestJson', 'templateType'))
}else{
this.form.setFieldsValue(pick(this.model, 'templateCode', 'templateContent', 'templateName', 'templateTestJson', 'templateType'))
}
});
},
close() {
this.$emit('close');
this.visible = false;
this.disable = true;
},
handleOk() {
this.model.templateType = this.templateType;
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if (!this.model.id) {
httpurl += this.url.add;
method = 'post';
} else {
httpurl += this.url.edit;
method = 'put';
}
let formData = Object.assign(this.model, values);
//时间格式化
if(this.useEditor){
formData.templateContent=this.templateEditorContent
}
console.log(formData)
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.$emit('ok');
} else {
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
that.close();
})
}
})
},
validateTemplateCode(rule, value, callback){
var params = {
tableName: "sys_sms_template",
fieldName: "template_code",
fieldVal: value,
dataId: this.model.id
}
duplicateCheck(params).then((res)=>{
if(res.success){
callback();
}else{
callback(res.message);
}
})
},
handleCancel() {
this.close()
},
handleChangeTemplateType(value){
//如果是邮件类型那么则改变模板内容是富文本编辑器
this.useEditor = (value==2 || value==4)
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板标题">
<a-input disabled v-model="templateName"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="模板内容">
<a-textarea disabled v-model="templateContent" :autosize="{ minRows: 5, maxRows: 8 }"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="测试数据">
<a-textarea placeholder="请输入json格式测试数据" v-model="testData" :autosize="{ minRows: 5, maxRows: 8 }"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息类型">
<j-dict-select-tag
v-model="msgType"
placeholder="请选择消息类型"
dictCode="msgType"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="消息接收方">
<a-input placeholder="请输入消息接收方" v-model="receiver"/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
export default {
name: "SysMessageTestModal",
data() {
return {
title: "操作",
visible: false,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
url: {
send: "/message/sysMessageTemplate/sendMsg",
},
templateName: "",
templateContent: "",
receiver: "",
msgType: "",
testData: "",
sendParams: {}
}
},
methods: {
open(record) {
this.sendParams.templateCode = record.templateCode;
this.templateName = record.templateName;
this.templateContent = record.templateContent;
this.testData = record.templateTestJson;
this.visible = true;
},
close() {
this.receiver = "";
this.msgType = "";
this.sendParams = {};
this.visible = false;
},
handleOk() {
let httpurl = this.url.send;
let method = 'post';
this.sendParams.testData = this.testData;
this.sendParams.receiver = this.receiver;
this.sendParams.msgType = this.msgType;
httpAction(httpurl, this.sendParams, method).then((res) => {
if (res.success) {
this.$message.success(res.message);
} else {
this.$message.warning(res.message);
}
}).finally(() => {
this.confirmLoading = false;
this.close();
})
},
handleCancel() {
this.close()
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-card title="磁盘监控">
<a-row>
<template v-if="diskInfo && diskInfo.length>0">
<a-col :span="8" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
<dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo>
</a-col>
</template>
</a-row>
</a-card>
</template>
<script>
import { getAction } from '@/api/manage'
import DashChartDemo from '@/components/chart/DashChartDemo'
import ARow from 'ant-design-vue/es/grid/Row'
export default {
name: 'DiskMonitoring',
components:{
ARow,
DashChartDemo,
},
data() {
return {
description: '磁盘监控',
//数据集
diskInfo:[],
url:{
queryDiskInfo:'actuator/redis/queryDiskInfo',
}
}
},
created() {
getAction(this.url.queryDiskInfo).then((res)=>{
if(res.success){
for(var i=0;i<res.result.length;i++){
res.result[i].restPPT = res.result[i].restPPT/10;
}
this.diskInfo = res.result;
}
})
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false" class="card-area">
<a-alert type="info" :showIcon="true">
<div slot="message">
共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即刷新</a>
</div>
</a-alert>
<!-- 表格区域 -->
<a-table
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:loading="tableLoading"
:scroll="{ x: 900 }"
style="margin-top: 20px;"
@change="handleTableChange">
<template slot="timeTaken" slot-scope="text">
<a-tag v-if="text < 500" color="green">{{ text }} ms</a-tag>
<a-tag v-else-if="text < 1000" color="cyan">{{ text }} ms</a-tag>
<a-tag v-else-if="text < 1500" color="orange">{{ text }} ms</a-tag>
<a-tag v-else color="red">{{ text }} ms</a-tag>
</template>
<template slot="responseStatus" slot-scope="text">
<a-tag v-if="text < 200" color="pink">{{ text }} </a-tag>
<a-tag v-else-if="text < 201" color="green">{{ text }} </a-tag>
<a-tag v-else-if="text < 399" color="cyan">{{ text }} </a-tag>
<a-tag v-else-if="text < 403" color="orange">{{ text }} </a-tag>
<a-tag v-else-if="text < 501" color="red">{{ text }} </a-tag>
<span v-else>{{ text }}</span>
</template>
<template slot="requestMethod" slot-scope="text">
<a-tag v-if="text === 'GET'" color="#87d068">{{ text }}</a-tag>
<a-tag v-else-if="text === 'POST'" color="#2db7f5">{{ text }}</a-tag>
<a-tag v-else-if="text === 'PUT'" color="#ffba5a">{{ text }}</a-tag>
<a-tag v-else-if="text === 'DELETE'" color="#f50">{{ text }}</a-tag>
<span v-else>{{ text }} ms</span>
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
advanced: false,
dataSource: [],
pagination: {
defaultPageSize: 10,
defaultCurrent: 1,
pageSizeOptions: ['10', '20', '30', '40', '100'],
showQuickJumper: true,
showSizeChanger: true,
showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录,共 ${total} 条记录`
},
loading: true,
tableLoading: true
}
},
computed: {
columns() {
return [{
title: '请求时间',
dataIndex: 'timestamp',
customRender(text) {
return moment(text).format('YYYY-MM-DD HH:mm:ss')
}
}, {
title: '请求方法',
dataIndex: 'request.method',
scopedSlots: { customRender: 'requestMethod' },
filters: [
{ text: 'GET', value: 'GET' },
{ text: 'POST', value: 'POST' },
{ text: 'PUT', value: 'PUT' },
{ text: 'DELETE', value: 'DELETE' }
],
filterMultiple: true,
onFilter: (value, record) => record.request.method.includes(value)
}, {
title: '请求URL',
dataIndex: 'request.uri',
customRender(text) {
return text.split('?')[0]
}
}, {
title: '响应状态',
dataIndex: 'response.status',
scopedSlots: { customRender: 'responseStatus' }
}, {
title: '请求耗时',
dataIndex: 'timeTaken',
scopedSlots: { customRender: 'timeTaken' }
}]
}
},
mounted() {
this.fetch()
},
methods: {
handleClickUpdate() {
this.fetch()
},
handleTableChange() {
this.fetch()
},
fetch() {
this.tableLoading = true
getAction('actuator/httptrace').then((data) => {
let filterData = []
for (let d of data.traces) {
if (d.request.method !== 'OPTIONS' && d.request.uri.indexOf('httptrace') === -1) {
filterData.push(d)
}
}
this.dataSource = filterData
}).catch((e) => {
console.error(e)
this.$message.error('获取HTTP信息失败')
}).finally(() => {
this.loading = false
this.tableLoading = false
})
}
}
}
</script>
<style></style>
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false">
<a-alert type="info" :showIcon="true">
<div slot="message">
上次更新时间:{{ this.time }}
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即更新</a>
</div>
</a-alert>
<a-table
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="tableLoading"
style="margin-top: 20px;">
<template slot="param" slot-scope="text, record">
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
</template>
<template slot="text" slot-scope="text, record">
{{ textInfo[record.param].text }}
</template>
<template slot="value" slot-scope="text, record">
{{ text }} {{ textInfo[record.param].unit }}
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
time: '',
loading: true,
tableLoading: true,
columns: [{
title: '参数',
width: '30%',
dataIndex: 'param',
scopedSlots: { customRender: 'param' }
}, {
title: '描述',
width: '40%',
dataIndex: 'text',
scopedSlots: { customRender: 'text' }
}, {
title: '当前值',
width: '30%',
dataIndex: 'value',
scopedSlots: { customRender: 'value' }
}],
dataSource: [],
// 列表通过 textInfo 渲染出颜色、描述和单位
textInfo: {
'jvm.memory.max': { color: 'purple', text: 'JVM 最大内存', unit: 'MB' },
'jvm.memory.committed': { color: 'purple', text: 'JVM 可用内存', unit: 'MB' },
'jvm.memory.used': { color: 'purple', text: 'JVM 已用内存', unit: 'MB' },
'jvm.buffer.memory.used': { color: 'cyan', text: 'JVM 缓冲区已用内存', unit: 'MB' },
'jvm.buffer.count': { color: 'cyan', text: '当前缓冲区数量', unit: '' },
'jvm.threads.daemon': { color: 'green', text: 'JVM 守护线程数量', unit: '' },
'jvm.threads.live': { color: 'green', text: 'JVM 当前活跃线程数量', unit: '' },
'jvm.threads.peak': { color: 'green', text: 'JVM 峰值线程数量', unit: '' },
'jvm.classes.loaded': { color: 'orange', text: 'JVM 已加载 Class 数量', unit: '' },
'jvm.classes.unloaded': { color: 'orange', text: 'JVM 未加载 Class 数量', unit: '' },
'jvm.gc.memory.allocated': { color: 'pink', text: 'GC 时, 年轻代分配的内存空间', unit: 'MB' },
'jvm.gc.memory.promoted': { color: 'pink', text: 'GC 时, 老年代分配的内存空间', unit: 'MB' },
'jvm.gc.max.data.size': { color: 'pink', text: 'GC 时, 老年代的最大内存空间', unit: 'MB' },
'jvm.gc.live.data.size': { color: 'pink', text: 'FullGC 时, 老年代的内存空间', unit: 'MB' },
'jvm.gc.pause.count': { color: 'blue', text: '系统启动以来GC 次数', unit: '' },
'jvm.gc.pause.totalTime': { color: 'blue', text: '系统启动以来GC 总耗时', unit: '' }
},
// 当一条记录中需要取出多条数据的时候需要配置该字段
moreInfo: {
'jvm.gc.pause': ['.count', '.totalTime']
}
}
},
mounted() {
this.loadTomcatInfo()
},
methods: {
handleClickUpdate() {
this.loadTomcatInfo()
},
loadTomcatInfo() {
this.tableLoading = true
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
Promise.all([
getAction('actuator/metrics/jvm.memory.max'),
getAction('actuator/metrics/jvm.memory.committed'),
getAction('actuator/metrics/jvm.memory.used'),
getAction('actuator/metrics/jvm.buffer.memory.used'),
getAction('actuator/metrics/jvm.buffer.count'),
getAction('actuator/metrics/jvm.threads.daemon'),
getAction('actuator/metrics/jvm.threads.live'),
getAction('actuator/metrics/jvm.threads.peak'),
getAction('actuator/metrics/jvm.classes.loaded'),
getAction('actuator/metrics/jvm.classes.unloaded'),
getAction('actuator/metrics/jvm.gc.memory.allocated'),
getAction('actuator/metrics/jvm.gc.memory.promoted'),
getAction('actuator/metrics/jvm.gc.max.data.size'),
getAction('actuator/metrics/jvm.gc.live.data.size'),
getAction('actuator/metrics/jvm.gc.pause')
]).then((res) => {
let info = []
res.forEach((value, id) => {
let more = this.moreInfo[value.name]
if (!(more instanceof Array)) {
more = ['']
}
more.forEach((item, idx) => {
let param = value.name + item
let val = value.measurements[idx].value
if (param === 'jvm.memory.max'
|| param === 'jvm.memory.committed'
|| param === 'jvm.memory.used'
|| param === 'jvm.buffer.memory.used'
|| param === 'jvm.gc.memory.allocated'
|| param === 'jvm.gc.memory.promoted'
|| param === 'jvm.gc.max.data.size'
|| param === 'jvm.gc.live.data.size'
) {
val = this.convert(val, Number)
}
info.push({ id: param + id, param, text: 'false value', value: val })
})
})
this.dataSource = info
}).catch((e) => {
console.error(e)
this.$message.error('获取JVM信息失败')
}).finally(() => {
this.loading = false
this.tableLoading = false
})
},
convert(value, type) {
if (type === Number) {
return Number(value / 1048576).toFixed(3)
} else if (type === Date) {
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
}
return value
}
}
}
</script>
<style></style>
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card>
<!-- Radis 信息实时监控 -->
<a-row :gutter="8">
<a-col :sm="24" :xl="12">
<area-chart-ty v-bind="memory"/>
</a-col>
<a-col :sm="24" :xl="12">
<area-chart-ty v-bind="key"/>
</a-col>
</a-row>
<h3>Redis 详细信息</h3>
<a-table
:loading="tableLoading"
:columns="columns"
:dataSource="redisInfo"
:pagination="false"/>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
import AreaChartTy from '@/components/chart/AreaChartTy'
export default {
name: 'RedisInfo',
components: {
AreaChartTy
},
data() {
return {
loading: true,
tableLoading: true,
// 定时器ID
timer: null,
// 定时器周期
millisec: 3000,
// Key 实时数量
key: {
title: 'Radis Key 实时数量(个)',
dataSource: [],
y: '数量(个)',
height: 340,
min: 0,
max: 100,
color: '#FF6987',
lineSize: 8,
lineColor: '#DC143C'
},
// 内存实时占用情况
memory: {
title: 'Radis 内存实时占用情况(KB)',
dataSource: [],
y: '内存(KB)',
min: 0,
max: 3000,
height: 340,
lineSize: 8
},
redisInfo: [],
columns: [{
title: 'Key',
align: 'center',
dataIndex: 'key'
}, {
title: 'Description',
align: 'left',
dataIndex: 'description'
}, {
title: 'Value',
align: 'center',
dataIndex: 'value'
}],
url: {
keysSize: '/actuator/redis/keysSize',
memoryInfo: '/actuator/redis/memoryInfo',
info: '/actuator/redis/info'
},
path: '/monitor/redis/info'
}
},
mounted() {
this.openTimer()
this.loadRedisInfo()
setTimeout(() => {
this.loadData()
}, 1000)
},
beforeDestroy() {
this.closeTimer()
},
methods: {
/** 开启定时器 */
openTimer() {
this.loadData()
this.closeTimer()
this.timer = setInterval(() => {
if (this.$route.path === this.path) {
this.loadData()
}
}, this.millisec)
},
/** 关闭定时器 */
closeTimer() {
if (this.timer) clearInterval(this.timer)
},
/** 查询数据 */
loadData() {
Promise.all([
getAction(this.url.keysSize),
getAction(this.url.memoryInfo)
]).then((res) => {
let time = moment().format('hh:mm:ss')
let [{ dbSize: currentSize }, memoryInfo] = res
let currentMemory = memoryInfo.used_memory / 1000
// push 数据
this.key.dataSource.push({ x: time, y: currentSize })
this.memory.dataSource.push({ x: time, y: currentMemory })
// 最大长度为6
if (this.key.dataSource.length > 6) {
this.key.dataSource.splice(0, 1)
this.memory.dataSource.splice(0, 1)
}
// 计算 Key 最大最小值
let keyPole = this.getMaxAndMin(this.key.dataSource, 'y')
this.key.max = Math.floor(keyPole[0]) + 10
this.key.min = Math.floor(keyPole[1]) - 10
if (this.key.min < 0) this.key.min = 0
// 计算 Memory 最大最小值
let memoryPole = this.getMaxAndMin(this.memory.dataSource, 'y')
this.memory.max = Math.floor(memoryPole[0]) + 100
this.memory.min = Math.floor(memoryPole[1]) - 100
if (this.memory.min < 0) this.memory.min = 0
}).catch((e) => {
console.error(e)
this.closeTimer()
this.$message.error('获取 Redis 信息失败')
}).finally(() => {
this.loading = false
})
},
// 获取一组数据中最大和最小的值
getMaxAndMin(dataSource, field) {
let maxValue = null, minValue = null
dataSource.forEach(item => {
let value = Number.parseInt(item[field])
// max
if (maxValue == null) {
maxValue = value
} else if (value > maxValue) {
maxValue = value
}
// min
if (minValue == null) {
minValue = value
} else if (value < minValue) {
minValue = value
}
})
return [maxValue, minValue]
},
loadRedisInfo() {
this.tableLoading = true
getAction(this.url.info).then((res) => {
this.redisInfo = res.result
}).finally(() => {
this.tableLoading = false
})
}
}
}
</script>
<style></style>
<template>
<div>
<div>Redis终端</div>
</div>
</template>
<script>
export default {
name: 'RedisTerminal'
}
</script>
<style>
</style>
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false">
<a-alert type="info" :showIcon="true">
<div slot="message">
上次更新时间:{{ this.time }}
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即更新</a>
</div>
</a-alert>
<a-table
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="tableLoading"
style="margin-top: 20px;">
<template slot="param" slot-scope="text, record">
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
</template>
<template slot="text" slot-scope="text, record">
{{ textInfo[record.param].text }}
</template>
<template slot="value" slot-scope="text, record">
{{ text }} {{ textInfo[record.param].unit }}
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
time: '',
loading: true,
tableLoading: true,
columns: [{
title: '参数',
width: '30%',
dataIndex: 'param',
scopedSlots: { customRender: 'param' }
}, {
title: '描述',
width: '40%',
dataIndex: 'text',
scopedSlots: { customRender: 'text' }
}, {
title: '当前值',
width: '30%',
dataIndex: 'value',
scopedSlots: { customRender: 'value' }
}],
dataSource: [],
// 列表通过 textInfo 渲染出颜色、描述和单位
textInfo: {
'system.cpu.count': { color: 'green', text: 'CPU 数量', unit: '' },
'system.cpu.usage': { color: 'green', text: '系统 CPU 使用率', unit: '%' },
'process.start.time': { color: 'purple', text: '应用启动时间点', unit: '' },
'process.uptime': { color: 'purple', text: '应用已运行时间', unit: '' },
'process.cpu.usage': { color: 'purple', text: '当前应用 CPU 使用率', unit: '%' }
},
// 当一条记录中需要取出多条数据的时候需要配置该字段
moreInfo: {}
}
},
mounted() {
this.loadTomcatInfo()
},
methods: {
handleClickUpdate() {
this.loadTomcatInfo()
},
loadTomcatInfo() {
this.tableLoading = true
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
Promise.all([
getAction('actuator/metrics/system.cpu.count'),
getAction('actuator/metrics/system.cpu.usage'),
getAction('actuator/metrics/process.start.time'),
getAction('actuator/metrics/process.uptime'),
getAction('actuator/metrics/process.cpu.usage')
]).then((res) => {
let info = []
res.forEach((value, id) => {
let more = this.moreInfo[value.name]
if (!(more instanceof Array)) {
more = ['']
}
more.forEach((item, idx) => {
let param = value.name + item
let val = value.measurements[idx].value
if (param === 'system.cpu.usage' || param === 'process.cpu.usage') {
val = this.convert(val, Number)
}
if (param === 'process.start.time') {
val = this.convert(val, Date)
}
info.push({ id: param + id, param, text: 'false value', value: val })
})
})
this.dataSource = info
}).catch((e) => {
console.error(e)
this.$message.error('获取服务器信息失败')
}).finally(() => {
this.loading = false
this.tableLoading = false
})
},
convert(value, type) {
if (type === Number) {
return Number(value * 100).toFixed(2)
} else if (type === Date) {
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
}
return value
}
}
}
</script>
<style></style>
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false">
<a-alert type="info" :showIcon="true">
<div slot="message">
上次更新时间:{{ this.time }}
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即更新</a>
</div>
</a-alert>
<a-table
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="tableLoading"
style="margin-top: 20px;">
<template slot="param" slot-scope="text, record">
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
</template>
<template slot="text" slot-scope="text, record">
{{ textInfo[record.param].text }}
</template>
<template slot="value" slot-scope="text, record">
{{ text }} {{ textInfo[record.param].unit }}
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
time: '',
loading: true,
tableLoading: true,
columns: [{
title: '参数',
width: '30%',
dataIndex: 'param',
scopedSlots: { customRender: 'param' }
}, {
title: '描述',
width: '40%',
dataIndex: 'text',
scopedSlots: { customRender: 'text' }
}, {
title: '当前值',
width: '30%',
dataIndex: 'value',
scopedSlots: { customRender: 'value' }
}],
dataSource: [],
// 列表通过 textInfo 渲染出颜色、描述和单位
textInfo: {
'tomcat.sessions.created': { color: 'green', text: 'tomcat 已创建 session 数', unit: '' },
'tomcat.sessions.expired': { color: 'green', text: 'tomcat 已过期 session 数', unit: '' },
'tomcat.sessions.active.current': { color: 'green', text: 'tomcat 当前活跃 session 数', unit: '' },
'tomcat.sessions.active.max': { color: 'green', text: 'tomcat 活跃 session 数峰值', unit: '' },
'tomcat.sessions.rejected': { color: 'green', text: '超过session 最大配置后,拒绝的 session 个数', unit: '' },
'tomcat.global.sent': { color: 'purple', text: '发送的字节数', unit: 'bytes' },
'tomcat.global.request.max': { color: 'purple', text: 'request 请求最长耗时', unit: '' },
'tomcat.global.request.count': { color: 'purple', text: '全局 request 请求次数', unit: '' },
'tomcat.global.request.totalTime': { color: 'purple', text: '全局 request 请求总耗时', unit: '' },
'tomcat.servlet.request.max': { color: 'cyan', text: 'servlet 请求最长耗时', unit: '' },
'tomcat.servlet.request.count': { color: 'cyan', text: 'servlet 总请求次数', unit: '' },
'tomcat.servlet.request.totalTime': { color: 'cyan', text: 'servlet 请求总耗时', unit: '' },
'tomcat.threads.current': { color: 'pink', text: 'tomcat 当前线程数(包括守护线程)', unit: '' },
'tomcat.threads.config.max': { color: 'pink', text: 'tomcat 配置的线程最大数', unit: '' }
},
// 当一条记录中需要取出多条数据的时候需要配置该字段
moreInfo: {
'tomcat.global.request': ['.count', '.totalTime'],
'tomcat.servlet.request': ['.count', '.totalTime']
}
}
},
mounted() {
this.loadTomcatInfo()
},
methods: {
handleClickUpdate() {
this.loadTomcatInfo()
},
loadTomcatInfo() {
this.tableLoading = true
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
Promise.all([
getAction('actuator/metrics/tomcat.sessions.created'),
getAction('actuator/metrics/tomcat.sessions.expired'),
getAction('actuator/metrics/tomcat.sessions.active.current'),
getAction('actuator/metrics/tomcat.sessions.active.max'),
getAction('actuator/metrics/tomcat.sessions.rejected'),
getAction('actuator/metrics/tomcat.global.sent'),
getAction('actuator/metrics/tomcat.global.request.max'),
getAction('actuator/metrics/tomcat.global.request'),
// 2.1.3.RELEASE 无此API
//getAction('actuator/metrics/tomcat.servlet.request'),
// getAction('actuator/metrics/tomcat.servlet.request.max'),
getAction('actuator/metrics/tomcat.threads.current'),
getAction('actuator/metrics/tomcat.threads.config.max')
]).then((res) => {
let tomcatInfo = []
res.forEach((value, id) => {
let more = this.moreInfo[value.name]
if (!(more instanceof Array)) {
more = ['']
}
more.forEach((item, idx) => {
let param = value.name + item
tomcatInfo.push({
id: param + id, param,
text: 'false value',
value: value.measurements[idx].value
})
})
})
this.dataSource = tomcatInfo
}).catch((e) => {
console.error(e)
this.$message.error('获取Tomcat信息失败')
}).finally(() => {
this.loading = false
this.tableLoading = false
})
}
}
}
</script>
<style></style>
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="表名">
<a-input placeholder="请输入表名" v-model="queryParam.tableName"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="doCgformButton" type="primary" icon="highlight">自定义按钮</a-button>
<a-button @click="doEnhanceJs" type="primary" icon="strikethrough">JS增强</a-button>
<a-button @click="doEnhanceSql" type="primary" icon="filter">SQL增强</a-button>
<a-button @click="doEnhanceJava" type="primary" icon="tool">Java增强</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>
已选择
<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<template slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多
<a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a @click="goPageOnline(record)">功能测试</a>
</a-menu-item>
<a-menu-item>
<a @click="handleOnlineUrlShow(record)">配置地址</a>
</a-menu-item>
<a-menu-item>
<a @click="handleRemoveRecord(record.id)">移除</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</template>
<template slot="dbsync" slot-scope="text">
<span v-if="text==='Y'" style="color:limegreen">已同步</span>
<span v-if="text==='N'" style="color:red">未同步</span>
</template>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<onl-cgform-head-modal ref="modalForm" @ok="modalFormOk" :action-button="false"></onl-cgform-head-modal>
<!-- 提示online报表链接 -->
<a-modal
:title="onlineUrlTitle"
:visible="onlineUrlVisible"
@cancel="handleOnlineUrlClose">
<template slot="footer">
<a-button @click="handleOnlineUrlClose">关闭</a-button>
<a-button type="primary" class="copy-this-text" :data-clipboard-text="onlineUrl" @click="onCopyUrl">复制</a-button>
</template>
<p>{{ onlineUrl }}</p>
</a-modal>
<enhance-js ref="ehjs"></enhance-js>
<enhance-sql ref="ehsql"></enhance-sql>
<enhance-java ref="ehjava"></enhance-java>
<trans-db2-online ref="transd2o" @ok="transOk"></trans-db2-online>
<onl-cgform-button-list ref="btnList"></onl-cgform-button-list>
</a-card>
</template>
<script>
import { deleteAction, postAction,getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Clipboard from 'clipboard'
import { filterObj } from '@/utils/util';
export default {
name: 'OnlCgformHeadList',
mixins: [JeecgListMixin],
components: {
},
data() {
return {
description: 'Online表单视图',
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function(t, r, index) {
return parseInt(index) + 1
}
},
{
title: '视图表名',
align: 'center',
dataIndex: 'tableName'
},
{
title: '视图表描述',
align: 'center',
dataIndex: 'tableTxt'
},
{
title: '原表版本',
align: 'center',
dataIndex: 'tableVersion'
},
{
title: '视图版本',
align: 'center',
dataIndex: 'copyVersion'
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
}
],
url: {
list: '/online/cgform/head/list',
delete: '/online/cgform/head/delete',
deleteBatch: '/online/cgform/head/deleteBatch',
removeRecord: '/online/cgform/head/removeRecord',
},
tableTypeDictOptions: [],
sexDictOptions: [],
syncModalVisible: false,
syncFormId: '',
synMethod: 'normal',
syncLoading: false,
onlineUrlTitle: '',
onlineUrlVisible: false,
onlineUrl: '',
selectedRowKeys: [],
selectedRows: [],
physicId:""
}
},
watch: {
'$route'() {
this.loadData()
}
},
methods: {
getQueryParams() {
//获取查询条件
var param = Object.assign({}, this.queryParam, this.isorter ,this.filters);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
param.copyType = 1;
param.physicId = this.physicId;
return filterObj(param);
},
loadData(arg) {
if(!this.$route.params.code){
return false
}
this.physicId = this.$route.params.code
if(!this.url.list){
this.$message.error("请设置url.list属性!")
return
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams();//查询条件
this.loading = true;
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.dataSource = res.result.records;
this.ipagination.total = res.result.total;
}
if(res.code===510){
this.$message.warning(res.message)
}
this.loading = false;
})
},
goPageOnline(rd) {
if(rd.isTree=='Y'){
this.$router.push({ path: '/online/cgformTreeList/' + rd.id })
}else{
this.$router.push({ path: '/online/cgformList/' + rd.id })
}
},
handleOnlineUrlClose() {
this.onlineUrlTitle = ''
this.onlineUrlVisible = false
},
handleOnlineUrlShow(record) {
if(record.isTree=='Y'){
this.onlineUrl = `/online/cgformTreeList/${record.id}`
}else{
this.onlineUrl = `/online/cgformList/${record.id}`
}
this.onlineUrlVisible = true
this.onlineUrlTitle = '菜单链接[' + record.tableTxt + ']'
},
handleRemoveRecord(id) {
let that = this
this.$confirm({
title: '确认要移除此记录?',
onOk() {
deleteAction(that.url.removeRecord, { id: id }).then((res) => {
if (res.success) {
that.$message.success('移除成功')
that.loadData()
} else {
that.$message.warning(res.message)
}
})
},
onCancel() {
}
})
},
doEnhanceJs() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
this.$refs.ehjs.show(this.selectedRowKeys[0])
},
doEnhanceSql() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
this.$refs.ehsql.show(this.selectedRowKeys[0])
},
doEnhanceJava() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
this.$refs.ehjava.show(this.selectedRowKeys[0])
},
doCgformButton() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
this.$refs.btnList.show(this.selectedRowKeys[0])
//this.$router.push({ path: '/online/cgformButton/' + this.selectedRowKeys[0] })
},
importOnlineForm() {
this.$refs.transd2o.show()
},
transOk() {
this.loadData()
},
onSelectChange(keys, rows) {
this.selectedRowKeys = keys
this.selectedRows = rows
},
onCopyUrl(){
var clipboard = new Clipboard('.copy-this-text')
clipboard.on('success', () => {
clipboard.destroy()
this.$message.success('复制成功')
this.handleOnlineUrlClose()
})
clipboard.on('error', () => {
this.$message.error('该浏览器不支持自动复制')
clipboard.destroy()
})
},
showMyCopyInfo(id){
console.log("查看复制表单的信息",id)
},
copyConfig(id){
postAction(`${this.url.copyOnline}?code=${id}`).then(res=>{
if(res.success){
this.$message.success("复制成功")
this.loadData()
}else{
this.$message.error("复制失败>>"+res.message)
}
})
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style lang="less">
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
.valid-error-cust{
.ant-select-selection{
border:2px solid #f5222d;
}
}
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="表名">
<a-input placeholder="请输入表名" v-model="queryParam.tableName"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="表类型">
<j-dict-select-tag dictCode="cgform_table_type" v-model="queryParam.tableType"/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="表描述">
<a-input placeholder="请输入表描述" v-model="queryParam.tableTxt"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button @click="doCgformButton" type="primary" icon="highlight">自定义按钮</a-button>
<a-button @click="doEnhanceJs" type="primary" icon="strikethrough">JS增强</a-button>
<a-button @click="doEnhanceSql" type="primary" icon="filter">SQL增强</a-button>
<a-button @click="doEnhanceJava" type="primary" icon="tool">Java增强</a-button>
<a-button @click="importOnlineForm" type="primary" icon="database">从数据库导入表单</a-button>
<a-button @click="goGenerateCode" type="primary" icon="database">代码生成</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>
已选择
<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<template slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多
<a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item v-if="record.isDbSynch!='Y'">
<a @click="openSyncModal(record.id)">同步数据库</a>
</a-menu-item>
<template v-if="record.isDbSynch=='Y' && record.tableType !== 3">
<a-menu-item>
<a @click="goPageOnline(record)">功能测试</a>
</a-menu-item>
<a-menu-item>
<a @click="handleOnlineUrlShow(record)">配置地址</a>
</a-menu-item>
</template>
<a-menu-item>
<a @click="copyConfig(record.id)">复制视图</a>
</a-menu-item>
<a-menu-item v-if="record.hascopy==1">
<a @click="showMyCopyInfo(record.id)">配置视图</a>
</a-menu-item>
<a-menu-item>
<a @click="handleRemoveRecord(record.id)">移除</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</template>
<template slot="dbsync" slot-scope="text">
<span v-if="text==='Y'" style="color:limegreen">已同步</span>
<span v-if="text==='N'" style="color:red">未同步</span>
</template>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<onl-cgform-head-modal ref="modalForm" @ok="modalFormOk"></onl-cgform-head-modal>
<!-- 同步数据库提示框 -->
<a-modal
:width="500"
:height="300"
title="同步数据库"
:visible="syncModalVisible"
@cancel="handleCancleDbSync"
style="top:5%;height: 95%;">
<template slot="footer">
<a-button @click="handleCancleDbSync">关闭</a-button>
<a-button type="primary" :loading="syncLoading" @click="handleDbSync">
确定
</a-button>
</template>
<a-radio-group v-model="synMethod">
<a-radio style="display: block;width: 30px;height: 30px" value="normal">普通同步(保留表数据)</a-radio>
<a-radio style="display: block;width: 30px;height: 30px" value="force">强制同步(删除表,重新生成)</a-radio>
</a-radio-group>
</a-modal>
<!-- 提示online报表链接 -->
<a-modal
:title="onlineUrlTitle"
:visible="onlineUrlVisible"
@cancel="handleOnlineUrlClose">
<template slot="footer">
<a-button @click="handleOnlineUrlClose">关闭</a-button>
<a-button type="primary" class="copy-this-text" :data-clipboard-text="onlineUrl" @click="onCopyUrl">复制</a-button>
</template>
<p>{{ onlineUrl }}</p>
</a-modal>
<enhance-js ref="ehjs"></enhance-js>
<enhance-sql ref="ehsql"></enhance-sql>
<enhance-java ref="ehjava"></enhance-java>
<trans-db2-online ref="transd2o" @ok="transOk"></trans-db2-online>
<code-generator ref="cg"></code-generator>
<onl-cgform-button-list ref="btnList"></onl-cgform-button-list>
</a-card>
</template>
<script>
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import { deleteAction, postAction } from '@/api/manage'
import JDictSelectTag from '../../../../components/dict/JDictSelectTag.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Clipboard from 'clipboard'
import { filterObj } from '@/utils/util';
export default {
name: 'OnlCgformHeadList',
mixins: [JeecgListMixin],
components: {
JDictSelectTag,
},
data() {
return {
description: 'Online表单开发管理页面',
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function(t, r, index) {
return parseInt(index) + 1
}
},
{
title: '表类型',
align: 'center',
dataIndex: 'tableType',
customRender: (text, record) => {
let tbTypeText = filterDictText(this.tableTypeDictOptions, `${text}`)
if(record.isTree === 'Y'){
tbTypeText+='(树)'
}
return tbTypeText;
}
},
{
title: '表名',
align: 'center',
dataIndex: 'tableName'
},
{
title: '表描述',
align: 'center',
dataIndex: 'tableTxt'
},
{
title: '版本',
align: 'center',
dataIndex: 'tableVersion'
},
{
title: '同步数据库状态',
align: 'center',
dataIndex: 'isDbSynch',
scopedSlots: { customRender: 'dbsync' }
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
}
],
url: {
list: '/online/cgform/head/list',
delete: '/online/cgform/head/delete',
deleteBatch: '/online/cgform/head/deleteBatch',
doDbSynch: '/online/cgform/api/doDbSynch/',
removeRecord: '/online/cgform/head/removeRecord',
copyOnline: '/online/cgform/head/copyOnline'
},
tableTypeDictOptions: [],
sexDictOptions: [],
syncModalVisible: false,
syncFormId: '',
synMethod: 'normal',
syncLoading: false,
onlineUrlTitle: '',
onlineUrlVisible: false,
onlineUrl: '',
selectedRowKeys: [],
selectedRows: []
}
},
created() {
//初始化字典 - 表类型
initDictOptions('cgform_table_type').then((res) => {
if (res.success) {
this.tableTypeDictOptions = res.result
}
})
},
methods: {
doDbSynch(id) {
postAction(this.url.doDbSynch + id, { synMethod: '1' }).then((res) => {
if (res.success) {
this.$message.success(res.message)
this.loadData()
} else {
this.$message.warning(res.message)
}
})
},
getQueryParams() {
//获取查询条件
var param = Object.assign({}, this.queryParam, this.isorter ,this.filters);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
param.copyType = 0;
return filterObj(param);
},
handleCancleDbSync() {
this.syncModalVisible = false
},
handleDbSync() {
this.syncLoading = true
postAction(this.url.doDbSynch + this.syncFormId + '/' + this.synMethod).then((res) => {
this.syncModalVisible = false
this.syncLoading = false
if (res.success) {
this.$message.success(res.message)
this.loadData()
} else {
this.$message.warning(res.message)
}
})
setTimeout(()=>{
if(this.syncLoading){
this.syncModalVisible = false
this.syncLoading = false
this.$message.success("网络延迟,已自动刷新!")
this.loadData()
}
},10000)
},
openSyncModal(id) {
this.syncModalVisible = true
this.syncLoading = false
this.syncFormId = id
},
goPageOnline(rd) {
if(rd.themeTemplate === 'erp'){
this.$router.push({ path: '/online/cgformErpList/' + rd.id })
}else{
if(rd.isTree=='Y'){
this.$router.push({ path: '/online/cgformTreeList/' + rd.id })
}else{
this.$router.push({ path: '/online/cgformList/' + rd.id })
}
}
},
handleOnlineUrlClose() {
this.onlineUrlTitle = ''
this.onlineUrlVisible = false
},
handleOnlineUrlShow(record) {
if(record.isTree=='Y'){
this.onlineUrl = `/online/cgformTreeList/${record.id}`
}else{
this.onlineUrl = `/online/cgformList/${record.id}`
}
this.onlineUrlVisible = true
this.onlineUrlTitle = '菜单链接[' + record.tableTxt + ']'
},
handleRemoveRecord(id) {
let that = this
this.$confirm({
title: '确认要移除此记录?',
onOk() {
deleteAction(that.url.removeRecord, { id: id }).then((res) => {
if (res.success) {
that.$message.success('移除成功')
that.loadData()
} else {
that.$message.warning(res.message)
}
})
},
onCancel() {
}
})
},
doEnhanceJs() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
this.$refs.ehjs.show(this.selectedRowKeys[0])
},
doEnhanceSql() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
this.$refs.ehsql.show(this.selectedRowKeys[0])
},
doEnhanceJava() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
this.$refs.ehjava.show(this.selectedRowKeys[0])
},
doCgformButton() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
this.$refs.btnList.show(this.selectedRowKeys[0])
//this.$router.push({ path: '/online/cgformButton/' + this.selectedRowKeys[0] })
},
importOnlineForm() {
this.$refs.transd2o.show()
},
transOk() {
this.loadData()
},
goGenerateCode() {
if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
this.$message.warning('请先选中一条记录')
return
}
let row = this.selectedRows[0]
if (!row.isDbSynch || row.isDbSynch == 'N') {
this.$message.warning('请先同步数据库!')
return
}
if (row.tableType == 3) {
this.$message.warning('请选中该表对应的主表生成代码')
return
}
this.$refs.cg.show(this.selectedRowKeys[0])
},
onSelectChange(keys, rows) {
this.selectedRowKeys = keys
this.selectedRows = rows
},
onCopyUrl(){
var clipboard = new Clipboard('.copy-this-text')
clipboard.on('success', () => {
clipboard.destroy()
this.$message.success('复制成功')
this.handleOnlineUrlClose()
})
clipboard.on('error', () => {
this.$message.error('该浏览器不支持自动复制')
clipboard.destroy()
})
},
showMyCopyInfo(id){
this.$router.push({ path: '/online/copyform/' + id })
},
copyConfig(id){
postAction(`${this.url.copyOnline}?code=${id}`).then(res=>{
if(res.success){
this.$message.success("复制成功")
this.loadData()
}else{
this.$message.error("复制失败>>"+res.message)
}
})
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style lang="less">
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
.valid-error-cust{
.ant-select-selection{
border:2px solid #f5222d;
}
}
</style>
\ No newline at end of file
/**
* online 自定义按钮表达式处理类
*/
export default class ButtonExpHandler {
/**
* 构造器
* @param express
*/
constructor(express,record) {
this._express = express;
this._record = record;
}
get show() {
if(!this._express || this._express==''){
return true;
}
let arr = this._express.split('#');
//获取字段值
let fieldValue = this._record[arr[0]];
//获取表达式
let exp = arr[1].toLowerCase();
//判断表达式
if(exp === 'eq'){
return fieldValue == arr[2];
}else if(exp === 'ne'){
return !(fieldValue == arr[2]);
}else if(exp === 'empty'){
if(arr[2]==='true' || arr[2]===true){
return !fieldValue || fieldValue=='';
}else{
return fieldValue && fieldValue.length>0
}
}else if(exp === 'in'){
let arr2 = arr[2].split(',');
return arr2.indexOf(String(fieldValue))>=0;
}
return false;
}
}
\ No newline at end of file
<template>
<a-card :bordered="false" style="height: 100%">
<online-common-list
:ref="'onl_'+mainModel.currentTableName"
:code="code"
:model="mainModel"
@seleted="onSelected">
</online-common-list>
<a-tabs defaultActiveKey="0">
<a-tab-pane v-for="(item,index) in subList" :tab="item.description" :key="index+''" :forceRender="true" >
<online-common-list
:ref="item.currentTableName"
:code="item.code"
:model="item"
:main="selectedRow">
</online-common-list>
</a-tab-pane>
</a-tabs>
</a-card>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
name: 'OnlCgformErpList',
components:{
},
data(){
return {
code:'',
url: {
getColumns: '/online/cgform/api/getErpColumns/',
},
mainModel:{},
subList:[],
mainId:'',
selectedRow:{}
}
},
watch: {
'$route'() {
// 刷新参数放到这里去触发,就可以刷新相同界面了
this.initColumnConfig()
}
},
created() {
this.initColumnConfig();
},
methods:{
getSubIndex(index){
return index+1 + ''
},
getSubRef(item){
let ref = item.currentTableName
console.log("ref string",ref)
return ref;
},
initColumnConfig(){
if(!this.$route.params.code){
return false
}
this.code = this.$route.params.code
getAction(`${this.url.getColumns}${this.code}`).then((res)=>{
console.log("erp表单配置",res)
if(res.success){
this.mainModel = res.result.main
this.subList = res.result.subList
this.$nextTick(()=>{
this.$refs['onl_'+this.mainModel.currentTableName].initListByModel();
if(this.subList && this.subList.length>0){
for(let item of this.subList){
this.$refs[item.currentTableName][0].initListByModel();
}
}
});
}
})
},
onSelected(row){
console.log("onSelected",row)
this.selectedRow = row;
}
}
}
</script>
<style>
.ant-card-body .table-operator{
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td{
padding-top:15px;
padding-bottom:15px;
}
.anty-row-operator button{margin: 0 5px}
.ant-btn-danger{background-color: #ffffff}
.anty-img-wrap{height:25px;position: relative;}
.anty-img-wrap > img{max-height:100%;}
.ant-modal-cust-warp{height: 100%}
.ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
.ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
</style>
\ No newline at end of file
/**
* 同步列表,可以同步新增、修改、删除
* @author sunjianlei
* */
export async function syncAllTable(vm, table1) {
vm.$refs.editableTable.resetScrollTop()
let deleteIds = table1.$refs.editableTable.getDeleteIds()
let table1Value
await table1.$refs.editableTable.getValuesPromise(false).then((values) => {
table1Value = values
return vm.$refs.editableTable.getValuesPromise(false)
}).then((values) => {
table1Value.forEach(value => {
let flag = false
values.forEach((thisValue) => {
if (value.id === thisValue.id) {
// 判断是否修改了值
let dbFieldName = thisValue['dbFieldName']
let dbFieldTxt = thisValue['dbFieldTxt']
// return
if (value.dbFieldName !== dbFieldName
|| value.dbFieldTxt !== dbFieldTxt) {
// 修改了
vm.$refs.editableTable.setValues([{
rowKey: thisValue.id,
values: {
dbFieldName: value.dbFieldName,
dbFieldTxt: value.dbFieldTxt
}
}])
}
flag = true
} else {
// id不匹配则有可能是新增也有可能是删除了的
// 遍历传进来的 deleteIds 进行对比
deleteIds.forEach(delId => {
// 对比成功,则删除该条数据
if (delId === thisValue.id) {
vm.$refs.editableTable.removeRows(vm.$refs.editableTable.caseId + delId)
flag = true
}
})
}
})
// return
// 判断是否操作了该条数据,若没有操作则代表要执行新增操作
if (!flag) {
let record = Object.assign({}, value)
vm.columns.forEach(column => {
if (
column.dataIndex !== 'dbFieldName' &&
column.dataIndex !== 'dbFieldTxt'
) {
record[column.dataIndex] = column.defaultValue
}
})
vm.$refs.editableTable.push(record)
}
})
})
}
/**
* 将数据分类并Set进dataSource
* @author sunjianlei
**/
export function setDataSource(vm, queryData) {
let dataSource = []
// 遍历查询出来的数据
queryData.forEach(value => {
let data = { id: value['id'] }
vm.columns.forEach(column => {
let key = column.key
if (key) {
data[key] = value[key]
// 由于多选下拉框返回的是一个数组,所以需要改成 [1,2,3] 数组的形式,否则组件不识别
// if (key === 'indexField') {
// data[key] = value[key].split(',')
// }
}
})
dataSource.push(data)
})
vm.dataSource = dataSource
}
/** 获取主表的初始化数据 */
export function getMasterTableInitialData() {
return [
{
dbFieldName: 'id',
dbFieldTxt: '主键',
dbLength: 36,
dbPointLength: 0,
dbDefaultVal: '',
dbType: 'string',
dbIsKey: '1',
dbIsNull: '0',
// table2
isShowForm: '0',
isShowList: '0',
isReadOnly: '1',
fieldShowType: 'text',
fieldLength: '120',
queryMode: 'single',
orderNum: 1
},
{
dbFieldName: 'create_by',
dbFieldTxt: '创建人',
dbLength: 50,
dbPointLength: 0,
dbDefaultVal: '',
dbType: 'string',
dbIsKey: '0',
dbIsNull: '1',
// table2
isShowForm: '0',
isShowList: '0',
fieldShowType: 'text',
fieldLength: '120',
queryMode: 'single',
orderNum: 2
},
{
dbFieldName: 'create_time',
dbFieldTxt: '创建日期',
dbLength: 20,
dbPointLength: 0,
dbDefaultVal: '',
dbType: 'Date',
dbIsKey: '0',
dbIsNull: '1',
// table2
isShowForm: '0',
isShowList: '0',
fieldShowType: 'datetime',
fieldLength: '120',
queryMode: 'single',
orderNum: 3
},
{
dbFieldName: 'update_by',
dbFieldTxt: '更新人',
dbLength: 50,
dbPointLength: 0,
dbDefaultVal: '',
dbType: 'string',
dbIsKey: '0',
dbIsNull: '1',
// table2
isShowForm: '0',
isShowList: '0',
fieldShowType: 'text',
fieldLength: '120',
queryMode: 'single',
orderNum: 4
},
{
dbFieldName: 'update_time',
dbFieldTxt: '更新日期',
dbLength: 20,
dbPointLength: 0,
dbDefaultVal: '',
dbType: 'Date',
dbIsKey: '0',
dbIsNull: '1',
// table2
isShowForm: '0',
isShowList: '0',
fieldShowType: 'datetime',
fieldLength: '120',
queryMode: 'single',
orderNum: 5
},{
dbFieldName: 'sys_org_code',
dbFieldTxt: '所属部门',
dbLength: 64,
dbPointLength: 0,
dbDefaultVal: '',
dbType: 'string',
dbIsKey: '0',
dbIsNull: '1',
// table2
isShowForm: '0',
isShowList: '0',
fieldShowType: 'text',
fieldLength: '120',
queryMode: 'single',
orderNum: 6
}
// {
// dbFieldName: 'sys_org_code',
// dbFieldTxt: '所属部门',
// dbLength: 50,
// dbPointLength: 0,
// dbDefaultVal: '',
// dbType: 'string',
// dbIsKey: false,
// dbIsNull: true
// }, {
// dbFieldName: 'sys_company_code',
// dbFieldTxt: '所属公司',
// dbLength: 50,
// dbPointLength: 0,
// dbDefaultVal: '',
// dbType: 'string',
// dbIsKey: false,
// dbIsNull: true
// }, {
// dbFieldName: 'bpm_status',
// dbFieldTxt: '流程状态',
// dbLength: 32,
// dbPointLength: 0,
// dbDefaultVal: '',
// dbType: 'string',
// dbIsKey: false,
// dbIsNull: true
// }
]
}
/** 获取树的初始化数据 */
export function getTreeNeedFields() {
return [{
dbFieldName: 'pid',
dbFieldTxt: '父级节点',
dbLength: 32,
dbPointLength: 0,
dbDefaultVal: '',
dbType: 'string',
dbIsKey: '0',
dbIsNull: '1',
// table2
isShowForm: '1',
isShowList: '0',
fieldShowType: 'text',
fieldLength: '120',
queryMode: 'single',
orderNum: 7
},{
dbFieldName: 'has_child',
dbFieldTxt: '是否有子节点',
dbLength: 3,
dbPointLength: 0,
dbDefaultVal: '',
dbType: 'string',
dbIsKey: '0',
dbIsNull: '1',
// table2
isShowForm: '0',
isShowList: '0',
fieldShowType: 'list',
fieldLength: '120',
queryMode: 'single',
orderNum: 8,
// table3
dictField:"yn"
}]
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment