zhangdaiscott
5 years ago
parent
046831e700
commit
9e046a07d4
@ -0,0 +1,259 @@
|
||||
.area-zoom-in-top-enter-active,
|
||||
.area-zoom-in-top-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.area-zoom-in-top-enter,
|
||||
.area-zoom-in-top-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.area-select {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
position: relative;
|
||||
outline: 0;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-top-width: 1.02px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.area-select-wrap .area-select {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.area-select * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.area-select:hover {
|
||||
border-color: #40a9ff;
|
||||
border-right-width: 1px !important;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
.area-select:active {
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.area-select.small {
|
||||
width: 126px;
|
||||
}
|
||||
|
||||
.area-select.medium {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.area-select.large {
|
||||
width: 194px;
|
||||
}
|
||||
|
||||
.area-select.is-disabled {
|
||||
background: #eceff5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.area-select.is-disabled:hover {
|
||||
border-color: #e1e2e6;
|
||||
}
|
||||
|
||||
.area-select.is-disabled .area-selected-trigger {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.area-select .area-selected-trigger {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
height: 100%;
|
||||
padding: 8px 20px 7px 12px;
|
||||
}
|
||||
|
||||
.area-select .area-select-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
right: 6px;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
transition: all .3s linear;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.area-select .area-select-icon.active {
|
||||
margin-top: -8px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.area-selectable-list-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-height: 275px;
|
||||
z-index: 15000;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
margin: 2px 0;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
|
||||
transition: opacity 0.15s, transform 0.3s !important;
|
||||
transform-origin: center top !important;
|
||||
}
|
||||
|
||||
.area-selectable-list {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #565656;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.area-selectable-list .area-select-option {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: 0 15px 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.area-selectable-list .area-select-option.hover {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.area-selectable-list .area-select-option.selected {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-weight: 600;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.cascader-menu-list-wrap {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 15000;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
margin: 2px 0;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
|
||||
transition: opacity 0.15s, transform 0.3s !important;
|
||||
transform-origin: center top !important;
|
||||
}
|
||||
|
||||
.cascader-menu-list {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #565656;
|
||||
padding: 6px 0;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
height: 204px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
min-width: 160px;
|
||||
vertical-align: top;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.cascader-menu-list:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.cascader-menu-list .cascader-menu-option {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: 0 15px 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.cascader-menu-list .cascader-menu-option.hover,
|
||||
.cascader-menu-list .cascader-menu-option:hover {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.cascader-menu-list .cascader-menu-option.selected {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-weight: 600;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.cascader-menu-list .cascader-menu-option.cascader-menu-extensible:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -4px;
|
||||
right: 5px;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid transparent;
|
||||
border-left-color: #a1a4ad;
|
||||
}
|
||||
|
||||
.cascader-menu-list::-webkit-scrollbar,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:decremen,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:end:decrement,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:increment,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:start:increment,
|
||||
.cascader-menu-list::-webkit-scrollbar-button:vertical:decremen,
|
||||
.cascader-menu-list::-webkit-scrollbar-button:vertical:end:decrement,
|
||||
.cascader-menu-list::-webkit-scrollbar-button:vertical:increment,
|
||||
.cascader-menu-list::-webkit-scrollbar-button:vertical:start:increment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cascader-menu-list::-webkit-scrollbar-thumb:vertical,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical {
|
||||
background-color: #b8b8b8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cascader-menu-list::-webkit-scrollbar-thumb:vertical:hover,
|
||||
.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
/** [表格主题样式一] 表格强制列不换行 */
|
||||
.j-table-force-nowrap {
|
||||
td, th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ant-table-selection-column {
|
||||
padding: 12px 22px !important;
|
||||
}
|
||||
|
||||
/** 列自适应，弊端会导致列宽失效 */
|
||||
&.ant-table-wrapper .ant-table-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
import { pcaa } from 'area-data'
|
||||
|
||||
/**
|
||||
* 省市区
|
||||
*/
|
||||
export default class Area {
|
||||
/**
|
||||
* 构造器
|
||||
* @param express
|
||||
*/
|
||||
constructor() {
|
||||
let arr = []
|
||||
const province = pcaa['86']
|
||||
Object.keys(province).map(key=>{
|
||||
arr.push({id:key, text:province[key], pid:'86'});
|
||||
const city = pcaa[key];
|
||||
Object.keys(city).map(key2=>{
|
||||
arr.push({id:key2, text:city[key2], pid:key});
|
||||
const qu = pcaa[key2];
|
||||
Object.keys(qu).map(key3=>{
|
||||
arr.push({id:key3, text:qu[key3], pid:key2});
|
||||
})
|
||||
})
|
||||
})
|
||||
this.all = arr;
|
||||
}
|
||||
|
||||
get pca(){
|
||||
return this.all;
|
||||
}
|
||||
|
||||
getCode(text){
|
||||
if(!text || text.length==0){
|
||||
return ''
|
||||
}
|
||||
for(let item of this.all){
|
||||
if(item.text === text){
|
||||
return item.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getText(code){
|
||||
if(!code || code.length==0){
|
||||
return ''
|
||||
}
|
||||
let arr = []
|
||||
this.getAreaBycode(code,arr);
|
||||
return arr.join('/')
|
||||
}
|
||||
|
||||
getRealCode(code){
|
||||
let arr = []
|
||||
this.getPcode(code, arr)
|
||||
return arr;
|
||||
}
|
||||
|
||||
getPcode(id, arr){
|
||||
for(let item of this.all){
|
||||
if(item.id === id){
|
||||
arr.unshift(id)
|
||||
if(item.pid != '86'){
|
||||
this.getPcode(item.pid,arr)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getAreaBycode(code,arr){
|
||||
//console.log("this.all.length",this.all)
|
||||
for(let item of this.all){
|
||||
if(item.id === code){
|
||||
arr.unshift(item.text);
|
||||
this.getAreaBycode(item.pid,arr)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-chart :forceFit="true" :height="height" :data="data">
|
||||
<v-coord type="rect" direction="LB" />
|
||||
<v-tooltip />
|
||||
<v-legend />
|
||||
<v-axis dataKey="State" :label="label" />
|
||||
<v-stack-bar position="State*流程数量" color="流程状态" />
|
||||
</v-chart>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const DataSet = require('@antv/data-set');
|
||||
|
||||
export default {
|
||||
name: 'StackBar',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [
|
||||
{ 'State': '请假', '流转中': 25, '已归档': 18 },
|
||||
{ 'State': '出差', '流转中': 30, '已归档': 20 },
|
||||
{ 'State': '加班', '流转中': 38, '已归档': 42},
|
||||
{ 'State': '用车', '流转中': 51, '已归档': 67}
|
||||
]
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 254
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: { offset: 12 }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data() {
|
||||
const dv = new DataSet.View().source(this.dataSource);
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: ['流转中', '已归档'],
|
||||
key: '流程状态',
|
||||
value: '流程数量',
|
||||
retains: ['State'],
|
||||
});
|
||||
return dv.rows;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,203 +0,0 @@
|
||||
<template>
|
||||
<div class="gc-canvas" @click="reloadPic">
|
||||
<canvas id="gc-canvas" :width="contentWidth" :height="contentHeight"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JGraphicCode',
|
||||
props: {
|
||||
length:{
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
fontSizeMin: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
fontSizeMax: {
|
||||
type: Number,
|
||||
default: 45
|
||||
},
|
||||
backgroundColorMin: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
backgroundColorMax: {
|
||||
type: Number,
|
||||
default: 240
|
||||
},
|
||||
colorMin: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
colorMax: {
|
||||
type: Number,
|
||||
default: 160
|
||||
},
|
||||
lineColorMin: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lineColorMax: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
dotColorMin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
dotColorMax: {
|
||||
type: Number,
|
||||
default: 255
|
||||
},
|
||||
contentWidth: {
|
||||
type: Number,
|
||||
default:136
|
||||
},
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 38
|
||||
},
|
||||
remote:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 生成一个随机数
|
||||
randomNum (min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
},
|
||||
// 生成一个随机的颜色
|
||||
randomColor (min, max) {
|
||||
let r = this.randomNum(min, max)
|
||||
let g = this.randomNum(min, max)
|
||||
let b = this.randomNum(min, max)
|
||||
return 'rgb(' + r + ',' + g + ',' + b + ')'
|
||||
},
|
||||
drawPic () {
|
||||
this.randomCode().then(()=>{
|
||||
let canvas = document.getElementById('gc-canvas')
|
||||
let ctx = canvas.getContext('2d')
|
||||
ctx.textBaseline = 'bottom'
|
||||
// 绘制背景
|
||||
ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
|
||||
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
|
||||
// 绘制文字
|
||||
for (let i = 0; i < this.code.length; i++) {
|
||||
this.drawText(ctx, this.code[i], i)
|
||||
}
|
||||
this.drawLine(ctx)
|
||||
this.drawDot(ctx)
|
||||
this.$emit("success",this.code)
|
||||
})
|
||||
},
|
||||
drawText (ctx, txt, i) {
|
||||
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
|
||||
let fontSize = this.randomNum(this.fontSizeMin, this.fontSizeMax)
|
||||
ctx.font = fontSize + 'px SimHei'
|
||||
let padding = 10;
|
||||
let offset = (this.contentWidth-40)/(this.code.length-1)
|
||||
let x=padding;
|
||||
if(i>0){
|
||||
x = padding+(i*offset)
|
||||
}
|
||||
//let x = (i + 1) * (this.contentWidth / (this.code.length + 1))
|
||||
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
|
||||
if(fontSize>40){
|
||||
y=40
|
||||
}
|
||||
var deg = this.randomNum(-10,10)
|
||||
// 修改坐标原点和旋转角度
|
||||
ctx.translate(x, y)
|
||||
ctx.rotate(deg * Math.PI / 180)
|
||||
ctx.fillText(txt, 0, 0)
|
||||
// 恢复坐标原点和旋转角度
|
||||
ctx.rotate(-deg * Math.PI / 180)
|
||||
ctx.translate(-x, -y)
|
||||
},
|
||||
drawLine (ctx) {
|
||||
// 绘制干扰线
|
||||
for (let i = 0; i <1; i++) {
|
||||
ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
|
||||
ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
|
||||
ctx.stroke()
|
||||
}
|
||||
},
|
||||
drawDot (ctx) {
|
||||
// 绘制干扰点
|
||||
for (let i = 0; i < 100; i++) {
|
||||
ctx.fillStyle = this.randomColor(0, 255)
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
|
||||
ctx.fill()
|
||||
}
|
||||
},
|
||||
reloadPic(){
|
||||
this.drawPic()
|
||||
},
|
||||
randomCode(){
|
||||
return new Promise((resolve)=>{
|
||||
if(this.remote==true){
|
||||
getAction("/sys/getCheckCode").then(res=>{
|
||||
console.log("aaaaa",res)
|
||||
if(res.success){
|
||||
this.checkKey = res.result.key
|
||||
this.code = window.atob(res.result.code)
|
||||
resolve();
|
||||
}else{
|
||||
this.$message.error("生成验证码错误,请联系系统管理员")
|
||||
this.code = 'BUG'
|
||||
resolve();
|
||||
}
|
||||
}).catch(()=>{
|
||||
console.log("生成验证码连接服务器异常")
|
||||
this.code = 'BUG'
|
||||
resolve();
|
||||
})
|
||||
}else{
|
||||
this.randomLocalCode();
|
||||
resolve();
|
||||
}
|
||||
})
|
||||
},
|
||||
randomLocalCode(){
|
||||
let random = ''
|
||||
//去掉了I l i o O
|
||||
let str = "QWERTYUPLKJHGFDSAZXCVBNMqwertyupkjhgfdsazxcvbnm1234567890"
|
||||
for(let i = 0; i < this.length; i++) {
|
||||
let index = Math.floor(Math.random()*57);
|
||||
random += str[index];
|
||||
}
|
||||
this.code = random
|
||||
},
|
||||
getLoginParam(){
|
||||
return {
|
||||
checkCode:this.code,
|
||||
checkKey:this.checkKey
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.drawPic()
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
code:"",
|
||||
checkKey:""
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
minHeight: '200px',
|
||||
previewStyle: 'vertical',
|
||||
useCommandShortcut: true,
|
||||
useDefaultHTMLSanitizer: true,
|
||||
usageStatistics: false,
|
||||
hideModeSwitch: false,
|
||||
toolbarItems: [
|
||||
'heading',
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'divider',
|
||||
'hr',
|
||||
'quote',
|
||||
'divider',
|
||||
'ul',
|
||||
'ol',
|
||||
'task',
|
||||
'indent',
|
||||
'outdent',
|
||||
'divider',
|
||||
'table',
|
||||
'image',
|
||||
'link',
|
||||
'divider',
|
||||
'code',
|
||||
'codeblock'
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div :id="id" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'tui-editor/dist/tui-editor.css'
|
||||
import 'tui-editor/dist/tui-editor-contents.css'
|
||||
|
||||
import Editor from 'tui-editor'
|
||||
import defaultOptions from './default-options'
|
||||
|
||||
export default {
|
||||
name: 'JMarkdownEditor',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: false,
|
||||
default() {
|
||||
return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
|
||||
}
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default() {
|
||||
return defaultOptions
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'markdown'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '300px'
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'en_US'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editorOptions() {
|
||||
const options = Object.assign({}, defaultOptions, this.options)
|
||||
options.initialEditType = this.mode
|
||||
options.height = this.height
|
||||
options.language = this.language
|
||||
return options
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newValue, preValue) {
|
||||
if (newValue !== preValue && newValue !== this.editor.getValue()) {
|
||||
this.editor.setValue(newValue)
|
||||
}
|
||||
},
|
||||
language(val) {
|
||||
this.destroyEditor()
|
||||
this.initEditor()
|
||||
},
|
||||
height(newValue) {
|
||||
this.editor.height(newValue)
|
||||
},
|
||||
mode(newValue) {
|
||||
this.editor.changeMode(newValue)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initEditor()
|
||||
},
|
||||
destroyed() {
|
||||
this.destroyEditor()
|
||||
},
|
||||
methods: {
|
||||
initEditor() {
|
||||
this.editor = new Editor({
|
||||
el: document.getElementById(this.id),
|
||||
...this.editorOptions
|
||||
})
|
||||
if (this.value) {
|
||||
this.editor.setValue(this.value)
|
||||
}
|
||||
this.editor.on('change', () => {
|
||||
this.$emit('change', this.editor.getValue())
|
||||
})
|
||||
},
|
||||
destroyEditor() {
|
||||
if (!this.editor) return
|
||||
this.editor.off('change')
|
||||
this.editor.remove()
|
||||
},
|
||||
setValue(value) {
|
||||
this.editor.setValue(value)
|
||||
},
|
||||
getValue() {
|
||||
return this.editor.getValue()
|
||||
},
|
||||
setHtml(value) {
|
||||
this.editor.setHtml(value)
|
||||
},
|
||||
getHtml() {
|
||||
return this.editor.getHtml()
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<a-switch v-model="checkStatus" :disabled="disabled" @change="handleChange"/>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'JSwitch',
|
||||
props: {
|
||||
value:{
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
disabled:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
options:{
|
||||
type:Array,
|
||||
required:false,
|
||||
default:()=>['Y','N']
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checkStatus: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value:{
|
||||
immediate: true,
|
||||
handler(val){
|
||||
if(!val){
|
||||
this.checkStatus = false
|
||||
this.$emit('change', this.options[1]);
|
||||
}else{
|
||||
if(this.options[0]==val){
|
||||
this.checkStatus = true
|
||||
}else{
|
||||
this.checkStatus = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(checked){
|
||||
let flag = checked===false?this.options[1]:this.options[0];
|
||||
this.$emit('change', flag);
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
title="文件上传"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
@ok="ok"
|
||||
cancelText="取消"
|
||||
@cancel="close">
|
||||
<!--style="top: 20px;"-->
|
||||
<j-upload :file-type="fileType" :value="filePath" @change="handleChange" :disabled="disabled"></j-upload>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JUpload from '@/components/jeecg/JUpload'
|
||||
import { getFileAccessHttpUrl } from '@/api/manage';
|
||||
|
||||
const getFileName=(path)=>{
|
||||
if(path.lastIndexOf("\\")>=0){
|
||||
let reg=new RegExp("\\\\","g");
|
||||
path = path.replace(reg,"/");
|
||||
}
|
||||
return path.substring(path.lastIndexOf("/")+1);
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'JFilePop',
|
||||
components: { JUpload },
|
||||
props:{
|
||||
title:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
},
|
||||
position:{
|
||||
type:String,
|
||||
default:'right',
|
||||
required:false
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:200,
|
||||
required:false
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
default:520,
|
||||
required:false
|
||||
},
|
||||
|
||||
popContainer:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
},
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
filePath:'',
|
||||
id:'',
|
||||
fileType:'file'
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleChange(value){
|
||||
this.filePath = value;
|
||||
},
|
||||
show(id,value,flag){
|
||||
this.id = id;
|
||||
this.filePath = value;
|
||||
this.visible=true
|
||||
if(flag === 'img'){
|
||||
this.fileType = 'image'
|
||||
}else{
|
||||
this.fileType = 'file'
|
||||
}
|
||||
|
||||
},
|
||||
ok(){
|
||||
if(!this.filePath){
|
||||
this.$message.error("未上传任何文件")
|
||||
return false;
|
||||
}
|
||||
let arr = this.filePath.split(",")
|
||||
let obj = {
|
||||
name:getFileName(arr[0]),
|
||||
url:getFileAccessHttpUrl(arr[0]),
|
||||
path:this.filePath,
|
||||
status: 'done',
|
||||
id:this.id
|
||||
}
|
||||
this.$emit('ok',obj)
|
||||
this.visible=false
|
||||
},
|
||||
close(){
|
||||
this.visible=false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<a-popover trigger="contextmenu" v-model="visible" :placement="position">
|
||||
<!--"(node) => node.parentNode.parentNode"-->
|
||||
<div slot="title">
|
||||
<span>{{ title }}</span>
|
||||
<span style="float: right" title="关闭">
|
||||
<a-icon type="close" @click="visible=false"/>
|
||||
</span>
|
||||
</div>
|
||||
<a-input :value="inputContent" @change="handleInputChange">
|
||||
<a-icon slot="suffix" type="fullscreen" @click.stop="pop" />
|
||||
</a-input>
|
||||
<div slot="content">
|
||||
<textarea :value="inputContent" @input="handleInputChange" :style="{ height: height + 'px', width: width + 'px' }"></textarea>
|
||||
</div>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JInputPop',
|
||||
props:{
|
||||
title:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
},
|
||||
position:{
|
||||
type:String,
|
||||
default:'right',
|
||||
required:false
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:200,
|
||||
required:false
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
default:150,
|
||||
required:false
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
required:false
|
||||
},
|
||||
popContainer:{
|
||||
type:String,
|
||||
default:'',
|
||||
required:false
|
||||
}
|
||||
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
inputContent:''
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
watch:{
|
||||
value:{
|
||||
immediate:true,
|
||||
handler:function(){
|
||||
if(this.value && this.value.length>0){
|
||||
this.inputContent = this.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
methods:{
|
||||
handleInputChange(event){
|
||||
this.inputContent = event.target.value
|
||||
this.$emit('change',this.inputContent)
|
||||
},
|
||||
pop(){
|
||||
this.visible=true
|
||||
},
|
||||
getPopupContainer(node){
|
||||
if(!this.popContainer){
|
||||
return node.parentNode
|
||||
}else{
|
||||
return document.getElementById(this.popContainer)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
import { formatDate } from '@/utils/util'
|
||||
import Area from '@/components/_util/Area'
|
||||
|
||||
const onlUtil = {
|
||||
data(){
|
||||
return {
|
||||
mixin_pca:''
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.mixin_pca = new Area()
|
||||
},
|
||||
methods:{
|
||||
simpleDateFormat(millisecond, format){
|
||||
return formatDate(millisecond, format)
|
||||
},
|
||||
getPcaText(code){
|
||||
return this.mixin_pca.getText(code);
|
||||
},
|
||||
getPcaCode(text){
|
||||
return this.mixin_pca.getCode(text)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { onlUtil }
|
||||
@ -0,0 +1,37 @@
|
||||
import Vue from 'vue'
|
||||
const enhance = {
|
||||
state: {
|
||||
enhanceJs:{
|
||||
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
ADD_TABLE_ENHANCE: (state, record) => {
|
||||
if(!state.enhanceJs){
|
||||
let obj = {}
|
||||
let arr = []
|
||||
arr.push({...record})
|
||||
obj[record.code] = arr
|
||||
state.enhanceJs = obj
|
||||
}else{
|
||||
if(!state.enhanceJs[record.code]){
|
||||
let arr = []
|
||||
arr.push({...record})
|
||||
state.enhanceJs[record.code] = arr
|
||||
}
|
||||
state.enhanceJs[record.code].push({...record})
|
||||
}
|
||||
let arr = state.enhanceJs[record.code]
|
||||
while(arr.length>16){
|
||||
arr.shift()
|
||||
}
|
||||
Vue.ls.set('enhance_'+record['code'], arr)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
addEhanceRecord({ commit }, record) {
|
||||
commit('ADD_TABLE_ENHANCE', record)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default enhance
|
||||
@ -1,391 +0,0 @@
|
||||
<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>
|
||||
@ -1,493 +0,0 @@
|
||||
<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>
|
||||
@ -1,41 +0,0 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,111 +0,0 @@
|
||||
<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>
|
||||
@ -1,256 +0,0 @@
|
||||
<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.code"></a-input>
|
||||
</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.name"></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-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="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 @click="popReportURL(record.id)">
|
||||
配置地址
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="goPageOnline(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>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<onlCgreportHead-modal ref="modalForm" @ok="modalFormOk"></onlCgreportHead-modal>
|
||||
|
||||
<!-- 提示online报表链接 -->
|
||||
<a-modal
|
||||
title="报表访问链接"
|
||||
:visible="visible"
|
||||
@cancel="handleCancel">
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button type="primary" class="copy-this-text" :data-clipboard-text="reportUrlText" @click="onCopyUrl">复制</a-button>
|
||||
</template>
|
||||
<p>{{ reportUrlText }}</p>
|
||||
</a-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import Clipboard from 'clipboard'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'OnlCgreportHeadList',
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
Clipboard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '在线报表配置管理页面',
|
||||
visible:false,
|
||||
reportUrlText:'',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '报表名称',
|
||||
align: 'center',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
align: 'center',
|
||||
dataIndex: 'code'
|
||||
},
|
||||
{
|
||||
title: '查询SQL',
|
||||
align: 'center',
|
||||
dataIndex: 'cgrSql'
|
||||
},
|
||||
{
|
||||
title: '数据源',
|
||||
align: 'center',
|
||||
dataIndex: 'dbSource'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
dataIndex: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '/online/cgreport/head/list',
|
||||
delete: '/online/cgreport/head/delete',
|
||||
deleteBatch: '/online/cgreport/head/deleteBatch',
|
||||
getParamsInfo:'/online/cgreport/api/getParamsInfo/'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initReportUrlText(id){
|
||||
getAction(this.url.getParamsInfo+id).then((res) => {
|
||||
let textUrl = ""
|
||||
if (res.success) {
|
||||
if(res.result && res.result.length>0){
|
||||
for(let i of res.result){
|
||||
textUrl+=i.paramName+"=${"+i.paramName+"}&"
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
if(textUrl.length>0){
|
||||
textUrl = textUrl.substring(0,textUrl.length-1)
|
||||
this.reportUrlText = `/online/cgreport/${id}?${textUrl}`
|
||||
}else{
|
||||
this.reportUrlText = `/online/cgreport/${id}`
|
||||
}
|
||||
})
|
||||
},
|
||||
goPageOnline(id){
|
||||
this.$router.push({path: '/online/cgreport/'+id})
|
||||
},
|
||||
popReportURL(id){
|
||||
this.visible = true;
|
||||
this.initReportUrlText(id)
|
||||
},
|
||||
handleCancel(){
|
||||
this.visible = false
|
||||
this.reportUrlText = '';
|
||||
},
|
||||
onCopyUrl(){
|
||||
var clipboard = new Clipboard('.copy-this-text')
|
||||
clipboard.on('success', () => {
|
||||
clipboard.destroy()
|
||||
this.$message.success('复制成功')
|
||||
this.handleCancel()
|
||||
})
|
||||
clipboard.on('error', () => {
|
||||
this.$message.error('该浏览器不支持自动复制')
|
||||
clipboard.destroy()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue