zhangdaihao
7 years ago
parent
383c521c6d
commit
405ee3f226
@ -0,0 +1 @@
|
||||
/src
|
||||
|
After Width: | Height: | Size: 50 KiB |
@ -0,0 +1,35 @@
|
||||
|
||||
<template>
|
||||
<component ref="compModel" :is="comp" :formData="formData" v-if="comp" @ok="callBackOk" @close="callBackClose"></component>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'DynamicComponent',
|
||||
data () {
|
||||
return {
|
||||
compName: this.path
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
comp: function () {
|
||||
return () => import(`@/views/${this.compName}.vue`)
|
||||
}
|
||||
},
|
||||
props: ['path','formData'],
|
||||
methods: {
|
||||
add () {
|
||||
this.$refs.compModel.add();
|
||||
},
|
||||
callBackClose () {
|
||||
this.$emit('close');
|
||||
},
|
||||
handleOk () {
|
||||
this.$refs.compModel.handleOk();
|
||||
},
|
||||
callBackOk(){
|
||||
this.$emit('ok');
|
||||
this.close();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
destroyOnClose
|
||||
cancelText="关闭">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<dynamic-component ref="dynamiclink" :path="path" :formData="formData" @ok="callBackOk" @close="callBackClose"></dynamic-component>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import DynamicComponent from "./DynamicComponent";
|
||||
|
||||
export default {
|
||||
name: "FormCommonModal",
|
||||
props: ['path'],
|
||||
components: {
|
||||
DynamicComponent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
width:"80%",
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
formData:{},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.formData =[];
|
||||
this.title = "新增";
|
||||
this.visible = true;
|
||||
this.$refs.dynamiclink.add();
|
||||
},
|
||||
edit (record) {
|
||||
var data = {
|
||||
dataId:record.id,
|
||||
}
|
||||
this.formData = data;
|
||||
this.visible = true;
|
||||
},
|
||||
callBackClose () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
this.$refs.dynamiclink.handleOk();
|
||||
},
|
||||
callBackOk(){
|
||||
this.$emit('ok');
|
||||
this.callBackClose();
|
||||
},
|
||||
handleCancel () {
|
||||
this.callBackClose()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="280"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:bodyStyle ="bodyStyle"
|
||||
:mask = "false"
|
||||
destroyOnClose
|
||||
:footer="null"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<div style="height: 300px;overflow: hidden;overflow-y: auto;overflow-x: auto;">
|
||||
<template v-for="(item, key, index) in nodeInfos">
|
||||
<table class="gridtable">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th width="90">任务名称</th>
|
||||
<td width="150">{{ item.taskName}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="90">执行人</th>
|
||||
<td width="150">{{ item.taskAssigneeId}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="90">开始时间</th>
|
||||
<td width="150">{{ item.taskBeginTime }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="90">结束时间</th>
|
||||
<td width="150">{{ item.taskEndTime }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="90">耗时</th>
|
||||
<td width="150">{{ item.durationStr }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="90">意见</th>
|
||||
<td width="150">{{ item.remarks }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
name: "ProcNodeInfoModel",
|
||||
data () {
|
||||
return {
|
||||
title:"任务审批详情",
|
||||
visible: false,
|
||||
bodyStyle:{
|
||||
padding: "0",
|
||||
},
|
||||
confirmLoading: false,
|
||||
validatorRules:{
|
||||
},
|
||||
nodeInfos:[],
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
showInfo(record,taskId) {
|
||||
this.nodeInfos = [];
|
||||
for (var item of record) {
|
||||
if(item.taskId == taskId){
|
||||
this.nodeInfos.push(item);
|
||||
}
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
close() {
|
||||
this.nodeInfos = [];
|
||||
this.visible = false;
|
||||
},
|
||||
handleCancel () {
|
||||
this.nodeInfos = [];
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
table.gridtable {
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
font-family: verdana,arial,sans-serif;
|
||||
font-size:12px;
|
||||
color:#333333;
|
||||
border-width: 1px;
|
||||
border-color: #ddd;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.gridtable th {
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
border-style: solid;
|
||||
border-color: #ddd;
|
||||
background-color: #eee;
|
||||
}
|
||||
table.gridtable td {
|
||||
border-width: 1px;
|
||||
padding: 8px;
|
||||
border-style: solid;
|
||||
border-color: #ddd;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="900"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@cancel="handleCancel"
|
||||
:bodyStyle="bodyStyle"
|
||||
style="top: 50px;"
|
||||
destroyOnClose
|
||||
:footer="null"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<img :src="picUrl" alt="流程图" usemap="#planetmap"/>
|
||||
<map name="planetmap">
|
||||
<template v-for="(item, key, index) in nodePositionInfo.positionList">
|
||||
<area shape="rect" :coords="item.coords" title="Venus" @mouseover="showNodeInfo(nodePositionInfo.hisTasks,item.id)">
|
||||
</template>
|
||||
</map>
|
||||
</a-spin>
|
||||
<proc-node-info-model ref="nodeInfoModel"></proc-node-info-model>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import qs from 'qs';
|
||||
import ProcNodeInfoModel from "./ProcNodeInfoModel.vue";
|
||||
|
||||
export default {
|
||||
components: {ProcNodeInfoModel},
|
||||
name: "ProcessInstPicModal",
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
nodePositionInfo:{},
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
bodyStyle:{
|
||||
"overflow-y":"auto",
|
||||
"overflow-x":"auto",
|
||||
height:(window.innerHeight-280)+"px",
|
||||
},
|
||||
confirmLoading: false,
|
||||
picUrl:"",
|
||||
url: {
|
||||
getProcessInfo: "/process/extActFlowData/getProcessInfo",
|
||||
getNodePositionInfo:"/act/task/getNodePositionInfo",
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
preview(flowCode,dataId){
|
||||
this.visible = true;
|
||||
var params = {
|
||||
flowCode:flowCode,
|
||||
dataId:dataId
|
||||
};//查询条件
|
||||
this.confirmLoading = true;
|
||||
getAction(this.url.getProcessInfo,params).then((res)=>{
|
||||
if(res.success){
|
||||
var processInstanceId = res.result.processInstanceId;
|
||||
this.picUrl = this.getResourceURL(processInstanceId);
|
||||
this.getNodePositionInfoData(processInstanceId);
|
||||
console.log("---流程图----",this.picUrl)
|
||||
}else{
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
}).then(() => {
|
||||
this.confirmLoading = false;
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
// 获取静态资源访问地址
|
||||
getResourceURL(processInstanceId) {
|
||||
var params = qs.stringify({
|
||||
//'token': Cookies.get('token'),
|
||||
'_t': Date.parse(new Date())/1000,
|
||||
'processInstanceId': processInstanceId
|
||||
})
|
||||
return `${window._CONFIG['domianURL']}/act/process/processPic?${params}`
|
||||
},
|
||||
// 获取静态资源访问地址
|
||||
getResourceURL(processInstanceId) {
|
||||
var params = qs.stringify({
|
||||
//'token': Cookies.get('token'),
|
||||
'_t': Date.parse(new Date())/1000,
|
||||
'processInstanceId': processInstanceId
|
||||
})
|
||||
return `${window._CONFIG['domianURL']}/act/process/processPic?${params}`
|
||||
},
|
||||
|
||||
// 查询坐标信息数据
|
||||
getNodePositionInfoData(processInstanceId) {
|
||||
var params = {processInstanceId:processInstanceId};//查询条件
|
||||
getAction(this.url.getNodePositionInfo,params).then(res => {
|
||||
if (res.success) {
|
||||
this.nodePositionInfo = res.result
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
}).then(() => {
|
||||
})
|
||||
},
|
||||
showNodeInfo(data,taskId){
|
||||
this.$refs.nodeInfoModel.close();
|
||||
this.$refs.nodeInfoModel.showInfo(data,taskId);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div :style="{ padding: '0 0 32px 32px' }">
|
||||
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
|
||||
<v-tooltip/>
|
||||
<v-legend/>
|
||||
<v-axis/>
|
||||
<v-bar position="type*bar"/>
|
||||
<v-line position="type*line" color="#2fc25b" :size="3"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'BarMultid',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ type: '10:10', bar: 2, line: 2 },
|
||||
{ type: '10:15', bar: 6, line: 3 },
|
||||
{ type: '10:20', bar: 2, line: 5 },
|
||||
{ type: '10:25', bar: 9, line: 1 },
|
||||
{ type: '10:30', bar: 2, line: 3 },
|
||||
{ type: '10:35', bar: 2, line: 1 },
|
||||
{ type: '10:40', bar: 1, line: 2 }
|
||||
]
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 400
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scale: [{
|
||||
dataKey: 'bar',
|
||||
min: 0
|
||||
}, {
|
||||
dataKey: 'line',
|
||||
min: 0
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data() {
|
||||
return this.dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<a-checkbox-group v-if="tagType=='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
|
||||
<a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
|
||||
<a-select
|
||||
v-else-if="tagType=='select'"
|
||||
:value="arrayValue"
|
||||
@change="onChange"
|
||||
:disabled="disabled"
|
||||
mode="multiple"
|
||||
:placeholder="placeholder">
|
||||
<a-select-option
|
||||
v-for="(item,index) in dictOptions"
|
||||
:key="index"
|
||||
:value="item.value">
|
||||
<span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
|
||||
{{ item.text || item.label }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ajaxGetDictItems} from '@/api/api'
|
||||
export default {
|
||||
name: 'JMultiSelectTag',
|
||||
props: {
|
||||
dictCode: String,
|
||||
placeholder: String,
|
||||
triggerChange: Boolean,
|
||||
disabled: Boolean,
|
||||
value: String,
|
||||
type: String,
|
||||
options:Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dictOptions: [],
|
||||
tagType:"",
|
||||
arrayValue:!this.value?[]:this.value.split(",")
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(!this.type || this.type==="list_multi"){
|
||||
this.tagType = "select"
|
||||
}else{
|
||||
this.tagType = this.type
|
||||
}
|
||||
//获取字典数据
|
||||
this.initDictData();
|
||||
},
|
||||
watch:{
|
||||
value (val) {
|
||||
if(!val){
|
||||
this.arrayValue = []
|
||||
}else{
|
||||
this.arrayValue = this.value.split(",")
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDictData() {
|
||||
if(this.options && this.options.length>0){
|
||||
this.dictOptions = [...this.options]
|
||||
}else{
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dictCode, null).then((res) => {
|
||||
if (res.success) {
|
||||
this.dictOptions = res.result;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onChange (selectedValue) {
|
||||
if(this.triggerChange){
|
||||
this.$emit('change', selectedValue.join(","));
|
||||
}else{
|
||||
this.$emit('input', selectedValue.join(","));
|
||||
}
|
||||
},
|
||||
setCurrentDictOptions(dictOptions){
|
||||
this.dictOptions = dictOptions
|
||||
},
|
||||
getCurrentDictOptions(){
|
||||
return this.dictOptions
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<div v-bind="fullScreenParentProps">
|
||||
<a-icon v-if="fullScreen" class="full-screen-icon" type="fullscreen" @click="()=>fullCoder=!fullCoder"/>
|
||||
|
||||
<div class="code-editor-cust full-screen-child">
|
||||
<textarea ref="textarea"></textarea>
|
||||
<span @click="nullTipClick" class="null-tip" :class="{'null-tip-hidden':hasCode}" :style="nullTipStyle">{{ placeholderShow }}</span>
|
||||
<template v-if="languageChange">
|
||||
<a-select v-model="mode" size="small" class="code-mode-select" @change="changeMode" placeholder="请选择主题">
|
||||
<a-select-option
|
||||
v-for="mode in modes"
|
||||
:key="mode.value"
|
||||
:value="mode.value">
|
||||
{{ mode.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/ecmascript-6">
|
||||
// 引入全局实例
|
||||
import _CodeMirror from 'codemirror'
|
||||
|
||||
// 核心样式
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 引入主题后还需要在 options 中指定主题才会生效 darcula gruvbox-dark hopscotch monokai
|
||||
import 'codemirror/theme/panda-syntax.css'
|
||||
//提示css
|
||||
import "codemirror/addon/hint/show-hint.css";
|
||||
|
||||
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
|
||||
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
|
||||
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
|
||||
import 'codemirror/mode/javascript/javascript.js'
|
||||
import 'codemirror/mode/css/css.js'
|
||||
import 'codemirror/mode/xml/xml.js'
|
||||
import 'codemirror/mode/clike/clike.js'
|
||||
import 'codemirror/mode/markdown/markdown.js'
|
||||
import 'codemirror/mode/python/python.js'
|
||||
import 'codemirror/mode/r/r.js'
|
||||
import 'codemirror/mode/shell/shell.js'
|
||||
import 'codemirror/mode/sql/sql.js'
|
||||
import 'codemirror/mode/swift/swift.js'
|
||||
import 'codemirror/mode/vue/vue.js'
|
||||
|
||||
// 尝试获取全局实例
|
||||
const CodeMirror = window.CodeMirror || _CodeMirror
|
||||
|
||||
export default {
|
||||
name: 'JCodeEditor',
|
||||
props: {
|
||||
// 外部传入的内容，用于实现双向绑定
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 外部传入的语法类型
|
||||
language: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
languageChange:{
|
||||
type: Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// 显示行号
|
||||
lineNumbers: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示全屏按钮
|
||||
fullScreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 全屏以后的z-index
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 999
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 内部真实的内容
|
||||
code: '',
|
||||
hasCode:false,
|
||||
// 默认的语法类型
|
||||
mode: 'javascript',
|
||||
// 编辑器实例
|
||||
coder: null,
|
||||
// 默认配置
|
||||
options: {
|
||||
// 缩进格式
|
||||
tabSize: 2,
|
||||
// 主题，对应主题库 JS 需要提前引入
|
||||
theme: 'panda-syntax',
|
||||
line: true,
|
||||
// extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
|
||||
hintOptions: {
|
||||
tables: {
|
||||
users: ['name', 'score', 'birthDate'],
|
||||
countries: ['name', 'population', 'size']
|
||||
}
|
||||
},
|
||||
},
|
||||
// 支持切换的语法高亮类型，对应 JS 已经提前引入
|
||||
// 使用的是 MIME-TYPE ，不过作为前缀的 text/ 在后面指定时写死了
|
||||
modes: [{
|
||||
value: 'css',
|
||||
label: 'CSS'
|
||||
}, {
|
||||
value: 'javascript',
|
||||
label: 'Javascript'
|
||||
}, {
|
||||
value: 'html',
|
||||
label: 'XML/HTML'
|
||||
}, {
|
||||
value: 'x-java',
|
||||
label: 'Java'
|
||||
}, {
|
||||
value: 'x-objectivec',
|
||||
label: 'Objective-C'
|
||||
}, {
|
||||
value: 'x-python',
|
||||
label: 'Python'
|
||||
}, {
|
||||
value: 'x-rsrc',
|
||||
label: 'R'
|
||||
}, {
|
||||
value: 'x-sh',
|
||||
label: 'Shell'
|
||||
}, {
|
||||
value: 'x-sql',
|
||||
label: 'SQL'
|
||||
}, {
|
||||
value: 'x-swift',
|
||||
label: 'Swift'
|
||||
}, {
|
||||
value: 'x-vue',
|
||||
label: 'Vue'
|
||||
}, {
|
||||
value: 'markdown',
|
||||
label: 'Markdown'
|
||||
}],
|
||||
// code 编辑器 是否全屏
|
||||
fullCoder: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// value: {
|
||||
// immediate: false,
|
||||
// handler(value) {
|
||||
// this._getCoder().then(() => {
|
||||
// this.coder.setValue(value)
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
language: {
|
||||
immediate: true,
|
||||
handler(language) {
|
||||
this._getCoder().then(() => {
|
||||
// 尝试从父容器获取语法类型
|
||||
if (language) {
|
||||
// 获取具体的语法类型对象
|
||||
let modeObj = this._getLanguage(language)
|
||||
|
||||
// 判断父容器传入的语法是否被支持
|
||||
if (modeObj) {
|
||||
this.mode = modeObj.label
|
||||
this.coder.setOption('mode', `text/${modeObj.value}`)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholderShow() {
|
||||
if (this.placeholder == null) {
|
||||
return `请在此输入${this.language}代码`
|
||||
} else {
|
||||
return this.placeholder
|
||||
}
|
||||
},
|
||||
nullTipStyle(){
|
||||
if (this.lineNumbers) {
|
||||
return { left: '36px' }
|
||||
} else {
|
||||
return { left: '12px' }
|
||||
}
|
||||
},
|
||||
// coder 配置
|
||||
coderOptions() {
|
||||
return {
|
||||
tabSize: this.options.tabSize,
|
||||
theme: this.options.theme,
|
||||
lineNumbers: this.lineNumbers,
|
||||
line: true,
|
||||
hintOptions: this.options.hintOptions
|
||||
}
|
||||
},
|
||||
fullScreenParentProps(){
|
||||
let props = {
|
||||
class: ['full-screen-parent', this.fullCoder ? 'full-screen' : ''],
|
||||
style: {}
|
||||
}
|
||||
if (this.fullCoder) {
|
||||
props.style['z-index'] = this.zIndex
|
||||
}
|
||||
return props
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化
|
||||
this._initialize()
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
_initialize () {
|
||||
// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
|
||||
this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.coderOptions)
|
||||
// 编辑器赋值
|
||||
this.coder.setValue(this.value || this.code)
|
||||
if(this.value||this.code){
|
||||
this.hasCode=true
|
||||
}else{
|
||||
this.hasCode=false
|
||||
}
|
||||
// 支持双向绑定
|
||||
this.coder.on('change', (coder) => {
|
||||
this.code = coder.getValue()
|
||||
if(this.code){
|
||||
this.hasCode=true
|
||||
}else{
|
||||
this.hasCode=false
|
||||
}
|
||||
if (this.$emit) {
|
||||
this.$emit('input', this.code)
|
||||
}
|
||||
})
|
||||
this.coder.on('focus', () => {
|
||||
this.hasCode=true
|
||||
})
|
||||
this.coder.on('blur', () => {
|
||||
if(this.code){
|
||||
this.hasCode=true
|
||||
}else{
|
||||
this.hasCode=false
|
||||
}
|
||||
})
|
||||
|
||||
/* this.coder.on('cursorActivity',()=>{
|
||||
this.coder.showHint()
|
||||
})*/
|
||||
|
||||
},
|
||||
getCodeContent(){
|
||||
return this.code
|
||||
},
|
||||
setCodeContent(val){
|
||||
this.coder.setValue(val)
|
||||
},
|
||||
// 获取当前语法类型
|
||||
_getLanguage (language) {
|
||||
// 在支持的语法类型列表中寻找传入的语法类型
|
||||
return this.modes.find((mode) => {
|
||||
// 所有的值都忽略大小写，方便比较
|
||||
let currentLanguage = language.toLowerCase()
|
||||
let currentLabel = mode.label.toLowerCase()
|
||||
let currentValue = mode.value.toLowerCase()
|
||||
|
||||
// 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较
|
||||
return currentLabel === currentLanguage || currentValue === currentLanguage
|
||||
})
|
||||
},
|
||||
_getCoder() {
|
||||
let _this = this
|
||||
return new Promise((resolve) => {
|
||||
(function get() {
|
||||
if (_this.coder) {
|
||||
resolve(_this.coder)
|
||||
} else {
|
||||
setTimeout(get, 10)
|
||||
}
|
||||
})()
|
||||
})
|
||||
},
|
||||
// 更改模式
|
||||
changeMode (val) {
|
||||
// 修改编辑器的语法配置
|
||||
this.coder.setOption('mode', `text/${val}`)
|
||||
|
||||
// 获取修改后的语法
|
||||
let label = this._getLanguage(val).label.toLowerCase()
|
||||
|
||||
// 允许父容器通过以下函数监听当前的语法值
|
||||
this.$emit('language-change', label)
|
||||
},
|
||||
nullTipClick(){
|
||||
this.coder.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.code-editor-cust{
|
||||
flex-grow:1;
|
||||
display:flex;
|
||||
position:relative;
|
||||
height:100%;
|
||||
.CodeMirror{
|
||||
flex-grow:1;
|
||||
z-index:1;
|
||||
.CodeMirror-code{
|
||||
line-height:19px;
|
||||
}
|
||||
|
||||
}
|
||||
.code-mode-select{
|
||||
position:absolute;
|
||||
z-index:2;
|
||||
right:10px;
|
||||
top:10px;
|
||||
max-width:130px;
|
||||
}
|
||||
.CodeMirror{
|
||||
height: auto;
|
||||
min-height:100%;
|
||||
}
|
||||
.null-tip{
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 36px;
|
||||
z-index: 10;
|
||||
color: #ffffffc9;
|
||||
line-height: initial;
|
||||
}
|
||||
.null-tip-hidden{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 全屏样式 */
|
||||
.full-screen-parent {
|
||||
position: relative;
|
||||
|
||||
.full-screen-icon {
|
||||
opacity: 0;
|
||||
color: black;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 24px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
z-index: 9;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.full-screen-icon {
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full-screen {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.full-screen-icon {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.full-screen-child {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.full-screen-child {
|
||||
min-height: 120px;
|
||||
max-height: 320px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="gc-canvas" @click="reloadPic">
|
||||
<canvas id="gc-canvas" :width="contentWidth" :height="contentHeight"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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
|
||||
}
|
||||
},
|
||||
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()
|
||||
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(){
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.drawPic()
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
code:""
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="drag" ref="dragDiv">
|
||||
<div class="drag_bg"></div>
|
||||
<div class="drag_text">{{confirmWords}}</div>
|
||||
<div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="border: 0.5px solid #fff;height: 34px;position: absolute;top: 0px;left: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"JSlider",
|
||||
data(){
|
||||
return {
|
||||
beginClientX:0, /*距离屏幕左端距离*/
|
||||
mouseMoveStata:false, /*触发拖动状态 判断*/
|
||||
maxwidth:'', /*拖动最大宽度，依据滑块宽度算出来的*/
|
||||
confirmWords:'拖动滑块验证', /*滑块文字*/
|
||||
confirmSuccess:false /*验证成功判断*/
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isSuccess(){
|
||||
return this.confirmSuccess
|
||||
},
|
||||
mousedownFn:function (e) {
|
||||
if(!this.confirmSuccess){
|
||||
e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
|
||||
this.mouseMoveStata = true;
|
||||
this.beginClientX = e.clientX;
|
||||
}
|
||||
}, //mousedoen 事件
|
||||
successFunction(){
|
||||
this.confirmSuccess = true
|
||||
this.confirmWords = '验证通过';
|
||||
if(window.addEventListener){
|
||||
document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn);
|
||||
document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn);
|
||||
}else {
|
||||
document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{});
|
||||
}
|
||||
document.getElementsByClassName('drag_text')[0].style.color = '#fff'
|
||||
document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
|
||||
document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
|
||||
|
||||
this.$emit("onSuccess",true)
|
||||
}, //验证成功函数
|
||||
mouseMoveFn(e){
|
||||
if(this.mouseMoveStata){
|
||||
let width = e.clientX - this.beginClientX;
|
||||
if(width>0 && width<=this.maxwidth){
|
||||
document.getElementsByClassName('handler')[0].style.left = width + 'px';
|
||||
document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
|
||||
}else if(width>this.maxwidth){
|
||||
this.successFunction();
|
||||
}
|
||||
}
|
||||
}, //mousemove事件
|
||||
moseUpFn(e){
|
||||
this.mouseMoveStata = false;
|
||||
var width = e.clientX - this.beginClientX;
|
||||
if(width<this.maxwidth){
|
||||
document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
|
||||
document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
|
||||
}
|
||||
} //mouseup事件
|
||||
},
|
||||
mounted(){
|
||||
this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
|
||||
document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn);
|
||||
document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drag{
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
.handler{
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
border: 1px solid #ccc;
|
||||
cursor: move;
|
||||
}
|
||||
.handler_bg{
|
||||
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
|
||||
}
|
||||
.handler_ok_bg{
|
||||
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
|
||||
}
|
||||
.drag_bg{
|
||||
background-color: #7ac23c;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_text{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;text-align: center;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select:none;
|
||||
-ms-user-select:none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<a-upload
|
||||
name="file"
|
||||
:multiple="true"
|
||||
:action="uploadAction"
|
||||
:headers="headers"
|
||||
:data="{'isup':1,'bizPath':bizPath}"
|
||||
:fileList="fileList"
|
||||
:beforeUpload="beforeUpload"
|
||||
@change="handleChange">
|
||||
<a-button>
|
||||
<a-icon type="upload" />{{ text }}
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
|
||||
const FILE_TYPE_ALL = "all"
|
||||
const FILE_TYPE_IMG = "image"
|
||||
const FILE_TYPE_TXT = "file"
|
||||
const uidGenerator=()=>{
|
||||
return '-'+parseInt(Math.random()*10000+1,10);
|
||||
}
|
||||
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: 'JUpload',
|
||||
data(){
|
||||
return {
|
||||
uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
|
||||
urlDownload:window._CONFIG['domianURL'] + "/sys/common/download/",
|
||||
headers:{},
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
props:{
|
||||
text:{
|
||||
type:String,
|
||||
required:false,
|
||||
default:"点击上传"
|
||||
},
|
||||
fileType:{
|
||||
type:String,
|
||||
required:false,
|
||||
default:FILE_TYPE_ALL
|
||||
},
|
||||
/*这个属性用于控制文件上传的业务路径*/
|
||||
bizPath:{
|
||||
type:String,
|
||||
required:false,
|
||||
default:"temp"
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
required:false
|
||||
},
|
||||
triggerChange:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.initFileList(val)
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
},
|
||||
|
||||
methods:{
|
||||
initFileList(paths){
|
||||
if(!paths || paths.length==0){
|
||||
return [];
|
||||
}
|
||||
let fileList = [];
|
||||
let arr = paths.split(",")
|
||||
for(var a=0;a<arr.length;a++){
|
||||
fileList.push({
|
||||
uid:uidGenerator(),
|
||||
name:getFileName(arr[a]),
|
||||
status: 'done',
|
||||
url: this.urlDownload+arr[a],
|
||||
response:{
|
||||
status:"history",
|
||||
message:arr[a]
|
||||
}
|
||||
})
|
||||
}
|
||||
this.fileList = fileList
|
||||
},
|
||||
handlePathChange(){
|
||||
let uploadFiles = this.fileList
|
||||
let path = ''
|
||||
if(!uploadFiles || uploadFiles.length==0){
|
||||
path = ''
|
||||
}
|
||||
let arr = [];
|
||||
|
||||
for(var a=0;a<uploadFiles.length;a++){
|
||||
arr.push(uploadFiles[a].response.message)
|
||||
}
|
||||
if(arr.length>0){
|
||||
path = arr.join(",")
|
||||
}
|
||||
if(this.triggerChange){
|
||||
this.$emit('change', path);
|
||||
}else{
|
||||
this.$emit('input', path);
|
||||
}
|
||||
},
|
||||
beforeUpload(file){
|
||||
var fileType = file.type;
|
||||
if(fileType===FILE_TYPE_IMG){
|
||||
if(fileType.indexOf('image')<0){
|
||||
this.$message.warning('请上传图片');
|
||||
return false;
|
||||
}
|
||||
}else if(fileType===FILE_TYPE_TXT){
|
||||
if(fileType.indexOf('image')>=0){
|
||||
this.$message.warning('请上传文件');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
//TODO 扩展功能验证文件大小
|
||||
return true
|
||||
},
|
||||
handleChange(info) {
|
||||
console.log("--文件列表改变--")
|
||||
let fileList = info.fileList
|
||||
if(info.file.status==='done'){
|
||||
if(info.file.response.success){
|
||||
fileList = fileList.map((file) => {
|
||||
if (file.response) {
|
||||
file.url = this.urlDownload+file.response.message;
|
||||
}
|
||||
return file;
|
||||
});
|
||||
}
|
||||
this.$message.success(`${info.file.name} 上传成功!`);
|
||||
}else if (info.file.status === 'error') {
|
||||
this.$message.error(`${info.file.name} 上传失败.`);
|
||||
}else if(info.file.status === 'removed'){
|
||||
this.handleDelete(info.file)
|
||||
}
|
||||
this.fileList = fileList
|
||||
if(info.file.status==='done' || info.file.status === 'removed'){
|
||||
this.handlePathChange()
|
||||
}
|
||||
},
|
||||
handleDelete(file){
|
||||
//如有需要新增 删除逻辑
|
||||
console.log(file)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="components-input-demo-presuffix">
|
||||
<!---->
|
||||
<a-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly :disabled="disabled">
|
||||
<a-icon slot="prefix" type="cluster" title="部门选择控件"/>
|
||||
<a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
|
||||
</a-input>
|
||||
|
||||
<j-select-depart-modal
|
||||
ref="innerDepartSelectModal"
|
||||
:modal-width="modalWidth"
|
||||
:multi="multi"
|
||||
:rootOpened="rootOpened"
|
||||
:depart-id="value"
|
||||
@ok="handleOK"
|
||||
@initComp="initComp"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectDepartModal from './modal/JSelectDepartModal'
|
||||
export default {
|
||||
name: 'JSelectDepart',
|
||||
components:{
|
||||
JSelectDepartModal
|
||||
},
|
||||
props:{
|
||||
modalWidth:{
|
||||
type:Number,
|
||||
default:500,
|
||||
required:false
|
||||
},
|
||||
multi:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
},
|
||||
rootOpened:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
required:false
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
required:false
|
||||
},
|
||||
triggerChange:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
disabled:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
confirmLoading:false,
|
||||
departNames:"",
|
||||
departIds:''
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.departIds = this.value
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.departIds = val
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
initComp(departNames){
|
||||
this.departNames = departNames
|
||||
},
|
||||
openModal(){
|
||||
this.$refs.innerDepartSelectModal.show()
|
||||
},
|
||||
handleOK(rows,idstr){
|
||||
console.log("当前选中部门",rows)
|
||||
console.log("当前选中部门ID",idstr)
|
||||
if(!rows){
|
||||
this.departNames = ''
|
||||
this.departIds=''
|
||||
}else{
|
||||
let temp = ''
|
||||
for(let item of rows){
|
||||
temp+=','+item.departName
|
||||
}
|
||||
this.departNames = temp.substring(1)
|
||||
this.departIds=idstr
|
||||
}
|
||||
|
||||
if(this.triggerChange){
|
||||
this.$emit("change",this.departIds)
|
||||
}else{
|
||||
this.$emit("input",this.departIds)
|
||||
}
|
||||
},
|
||||
getDepartNames(){
|
||||
return this.departNames
|
||||
},
|
||||
handleEmpty(){
|
||||
this.handleOK('')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.components-input-demo-presuffix .anticon-close-circle {
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
transition: color 0.3s;
|
||||
font-size: 12px;
|
||||
}
|
||||
.components-input-demo-presuffix .anticon-close-circle:hover {
|
||||
color: #f5222d;
|
||||
}
|
||||
.components-input-demo-presuffix .anticon-close-circle:active {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
placeholder="Please select"
|
||||
:value="nameList"
|
||||
style="width: calc(100% - 178px);">
|
||||
</a-select>
|
||||
<span style="display: inline-block;width:170px;float: right;overflow: hidden;">
|
||||
<a-button type="primary" @click="handleSelect" icon="search" style="width: 81px">选择</a-button>
|
||||
<a-button type="primary" @click="selectReset" icon="reload" style="margin-left: 8px;width: 81px">清空</a-button>
|
||||
</span>
|
||||
|
||||
<!-- 选择多个用户支持排序 -->
|
||||
<j-select-multi-user-modal ref="selectModal" @selectFinished="selectOK"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectMultiUserModal from './modal/JSelectMultiUserModal'
|
||||
export default {
|
||||
name: 'JSelectMultiUser',
|
||||
components:{ JSelectMultiUserModal },
|
||||
props:{
|
||||
value:{
|
||||
type:String,
|
||||
required:false
|
||||
},
|
||||
triggerChange:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
selectList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameList: function () {
|
||||
var names = [];
|
||||
for (var a = 0; a < this.selectList.length; a++) {
|
||||
names.push(this.selectList[a].name);
|
||||
}
|
||||
let nameStr = ''
|
||||
if(names.length>0){
|
||||
nameStr = names.join(",")
|
||||
}
|
||||
if(this.triggerChange){
|
||||
this.$emit("change",nameStr)
|
||||
}else{
|
||||
this.$emit("input",nameStr)
|
||||
}
|
||||
return names;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleSelect: function () {
|
||||
this.$refs.selectModal.add();
|
||||
},
|
||||
selectReset() {
|
||||
this.selectList = [];
|
||||
},
|
||||
selectOK: function (data) {
|
||||
this.selectList = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-input-search
|
||||
v-model="selectedDepUsers"
|
||||
placeholder="请先选择用户"
|
||||
disabled
|
||||
@search="onSearchDepUser">
|
||||
<a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
|
||||
</a-input-search>
|
||||
<j-select-user-by-dep-modal
|
||||
ref="selectModal"
|
||||
:modal-width="modalWidth"
|
||||
@ok="onSearchDepUserCallBack" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSelectUserByDepModal from './modal/JSelectUserByDepModal'
|
||||
export default {
|
||||
name: 'JSelectUserByDep',
|
||||
components: { JSelectUserByDepModal },
|
||||
props:{
|
||||
modalWidth:{
|
||||
type:Number,
|
||||
default:1250,
|
||||
required:false
|
||||
},
|
||||
value:{
|
||||
type:String,
|
||||
required:false
|
||||
},
|
||||
triggerChange:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
disabled:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedDepUsers:"",
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.selectedDepUsers = this.value
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.selectedDepUsers = val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//通过组织机构筛选选择用户
|
||||
onSearchDepUser() {
|
||||
this.$refs.selectModal.showModal()
|
||||
this.onSearchDepUserCallBack('')
|
||||
},
|
||||
onSearchDepUserCallBack(selectedDepUsers) {
|
||||
this.selectedDepUsers = selectedDepUsers
|
||||
if(this.triggerChange){
|
||||
this.$emit("change",selectedDepUsers)
|
||||
}else{
|
||||
this.$emit("input",selectedDepUsers)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,308 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:title="title"
|
||||
@ok="handleSubmit"
|
||||
@cancel="close"
|
||||
cancelText="关闭"
|
||||
style="margin-top: -70px"
|
||||
wrapClassName="ant-modal-cust-warp"
|
||||
>
|
||||
<a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<!--组织机构-->
|
||||
<a-directory-tree
|
||||
selectable
|
||||
:selectedKeys="selectedKeys"
|
||||
:checkStrictly="true"
|
||||
@select="this.onSelect"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
:treeData="departTree"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="18" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
用户账号:
|
||||
<a-input-search
|
||||
:style="{width:'150px',marginBottom:'15px'}"
|
||||
placeholder=""
|
||||
v-model="queryParam.username"
|
||||
@search="onSearch"
|
||||
/>
|
||||
<a-button @click="searchReset" style="margin-left: 10px" icon="redo">重置</a-button>
|
||||
<!--用户列表-->
|
||||
<a-table
|
||||
ref="table"
|
||||
:scroll="scrollTrigger"
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
style="background-color: white"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util'
|
||||
import { queryDepartTreeList, getUserList, queryUserByDepId, queryUserRoleMap } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: 'SearchUserByDepModal',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryParam: {},
|
||||
columns: [
|
||||
{
|
||||
title: '用户账号',
|
||||
align: 'center',
|
||||
dataIndex: 'username'
|
||||
},
|
||||
{
|
||||
title: '真实姓名',
|
||||
align: 'center',
|
||||
dataIndex: 'realname'
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
align: 'center',
|
||||
dataIndex: 'roleName'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex',
|
||||
customRender: function(text) {
|
||||
if (text === 1) {
|
||||
return '男'
|
||||
} else if (text === 2) {
|
||||
return '女'
|
||||
} else {
|
||||
return text
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
align: 'center',
|
||||
dataIndex: 'phone'
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
align: 'center',
|
||||
dataIndex: 'email'
|
||||
}
|
||||
],
|
||||
scrollTrigger:{},
|
||||
dataSource: [],
|
||||
selectedKeys: [],
|
||||
userNames: [],
|
||||
departName: '',
|
||||
userRolesMap: {},
|
||||
title: '',
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
userData: [],
|
||||
modalWidth: 1250,
|
||||
departTree: [],
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 该方法触发屏幕自适应
|
||||
this.resetScreenSize();
|
||||
},
|
||||
methods: {
|
||||
loadData(arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
let params = this.getQueryParams();//查询条件
|
||||
getUserList(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.assignRoleName(this.dataSource);
|
||||
this.userData = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
})
|
||||
queryUserRoleMap().then((res) => {
|
||||
if (res.success) {
|
||||
this.userRolesMap = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 触发屏幕自适应
|
||||
resetScreenSize(){
|
||||
let screenWidth = document.body.clientWidth;
|
||||
if(screenWidth < 500){
|
||||
this.scrollTrigger = {x : 800};
|
||||
}else{
|
||||
this.scrollTrigger = {};
|
||||
}
|
||||
},
|
||||
showModal() {
|
||||
this.visible = true;
|
||||
this.assignRoleName(this.dataSource);
|
||||
this.queryDepartTree();
|
||||
this.form.resetFields();
|
||||
this.loadData(1);
|
||||
},
|
||||
getQueryParams() {
|
||||
let param = Object.assign({}, this.queryParam, this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
getQueryField() {
|
||||
let str = 'id,';
|
||||
for (let a = 0; a < this.columns.length; a++) {
|
||||
str += ',' + this.columns[a].dataIndex;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
searchReset(num) {
|
||||
let that = this;
|
||||
if(num !== 0){
|
||||
that.loadData(1);
|
||||
}
|
||||
that.selectedRowKeys = [];
|
||||
that.userNames = [];
|
||||
that.queryParam = {};
|
||||
that.selectedKeys = [];
|
||||
that.userNames = [];
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.searchReset(0);
|
||||
this.visible = false;
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
//TODO 筛选
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
|
||||
}
|
||||
this.ipagination = pagination;
|
||||
this.loadData();
|
||||
},
|
||||
handleSubmit() {
|
||||
const that = this;
|
||||
for (let i = 0, len = this.selectedRowKeys.length; i < len; i++) {
|
||||
this.getUserNames(this.selectedRowKeys[i]);
|
||||
}
|
||||
that.$emit('ok', that.userNames.join(','));
|
||||
that.close();
|
||||
},
|
||||
// 遍历匹配,获取用户真实姓名
|
||||
getUserNames(rowId) {
|
||||
let dataSource = this.dataSource;
|
||||
for (let i = 0, len = dataSource.length; i < len; i++) {
|
||||
if (rowId === dataSource[i].id) {
|
||||
this.userNames.push(dataSource[i].realname);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击树节点,筛选出对应的用户
|
||||
onSelect(selectedKeys) {
|
||||
if (selectedKeys[0] != null) {
|
||||
this.queryUser(selectedKeys) // 调用方法根据选选择的id查询用户信息
|
||||
if (this.selectedKeys[0] !== selectedKeys[0]) {
|
||||
this.selectedKeys = [selectedKeys[0]];
|
||||
}
|
||||
}
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectionRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.selectionRows = selectionRows;
|
||||
},
|
||||
onSearch() {
|
||||
this.loadData(1);
|
||||
},
|
||||
// 根据选择的id来查询用户信息
|
||||
queryUser(selectedKeys) {
|
||||
queryUserByDepId({ id: selectedKeys.toString() }).then((res) => {
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.length;
|
||||
this.dataSource = res.result;
|
||||
this.assignRoleName(this.dataSource);
|
||||
}
|
||||
})
|
||||
},
|
||||
// 传入用户id,找到匹配的角色名称
|
||||
queryUserRole(userId) {
|
||||
let map = this.userRolesMap;
|
||||
let roleName = [];
|
||||
for (var key in map) {
|
||||
if (userId === key) {
|
||||
roleName.push(map[key]);
|
||||
}
|
||||
}
|
||||
return roleName.join(',');
|
||||
},
|
||||
queryDepartTree() {
|
||||
queryDepartTreeList().then((res) => {
|
||||
if (res.success) {
|
||||
this.departTree = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 为角色名称赋值
|
||||
assignRoleName(data) {
|
||||
let userId = '';
|
||||
let role = '';
|
||||
for (let i = 0, length = data.length; i < length; i++) {
|
||||
userId = this.dataSource[i].id;
|
||||
role = this.queryUserRole(userId);
|
||||
this.dataSource[i].roleName = role;
|
||||
}
|
||||
},
|
||||
modalFormOk() {
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#components-layout-demo-custom-trigger .trigger {
|
||||
font-size: 18px;
|
||||
line-height: 64px;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="选择部门"
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<a-spin tip="Loading..." :spinning="false">
|
||||
<a-input-search style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索" @search="onSearch" />
|
||||
<a-tree
|
||||
checkable
|
||||
:treeData="treeData"
|
||||
:checkStrictly="true"
|
||||
@check="onCheck"
|
||||
@select="onSelect"
|
||||
@expand="onExpand"
|
||||
:autoExpandParent="autoExpandParent"
|
||||
:expandedKeys="expandedKeys"
|
||||
:checkedKeys="checkedKeys">
|
||||
|
||||
<template slot="title" slot-scope="{title}">
|
||||
<span v-if="title.indexOf(searchValue) > -1">
|
||||
{{title.substr(0, title.indexOf(searchValue))}}
|
||||
<span style="color: #f50">{{searchValue}}</span>
|
||||
{{title.substr(title.indexOf(searchValue) + searchValue.length)}}
|
||||
</span>
|
||||
<span v-else>{{title}}</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryDepartTreeList } from '@/api/api'
|
||||
export default {
|
||||
name: 'JSelectDepartModal',
|
||||
props:['modalWidth','multi','rootOpened','departId'],
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
confirmLoading:false,
|
||||
treeData:[],
|
||||
autoExpandParent:true,
|
||||
expandedKeys:[],
|
||||
dataList:[],
|
||||
checkedKeys:[],
|
||||
checkedRows:[],
|
||||
searchValue:""
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.loadDepart();
|
||||
},
|
||||
watch:{
|
||||
departId(){
|
||||
this.initDepartComponent()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
show(){
|
||||
this.visible=true
|
||||
this.checkedRows=[]
|
||||
this.checkedKeys=[]
|
||||
console.log("this.multi",this.multi)
|
||||
},
|
||||
loadDepart(){
|
||||
queryDepartTreeList().then(res=>{
|
||||
if(res.success){
|
||||
let arr = [...res.result]
|
||||
this.reWriterWithSlot(arr)
|
||||
this.treeData = arr
|
||||
this.initDepartComponent()
|
||||
if(this.rootOpened){
|
||||
this.initExpandedKeys(res.result)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initDepartComponent(){
|
||||
let names = ''
|
||||
if(this.departId){
|
||||
let currDepartId = this.departId
|
||||
for(let item of this.dataList){
|
||||
if(currDepartId.indexOf(item.key)>=0){
|
||||
names+=","+item.title
|
||||
}
|
||||
}
|
||||
if(names){
|
||||
names = names.substring(1)
|
||||
}
|
||||
}
|
||||
this.$emit("initComp",names)
|
||||
},
|
||||
reWriterWithSlot(arr){
|
||||
for(let item of arr){
|
||||
if(item.children && item.children.length>0){
|
||||
this.reWriterWithSlot(item.children)
|
||||
let temp = Object.assign({},item)
|
||||
temp.children = {}
|
||||
this.dataList.push(temp)
|
||||
}else{
|
||||
this.dataList.push(item)
|
||||
item.scopedSlots={ title: 'title' }
|
||||
}
|
||||
}
|
||||
},
|
||||
initExpandedKeys(arr){
|
||||
if(arr && arr.length>0){
|
||||
let keys = []
|
||||
for(let item of arr){
|
||||
if(item.children && item.children.length>0){
|
||||
keys.push(item.id)
|
||||
}
|
||||
}
|
||||
this.expandedKeys=[...keys]
|
||||
}else{
|
||||
this.expandedKeys=[]
|
||||
}
|
||||
},
|
||||
onCheck (checkedKeys,info) {
|
||||
if(!this.multi){
|
||||
let arr = checkedKeys.checked.filter(item=>{
|
||||
return this.checkedKeys.indexOf(item)<0
|
||||
})
|
||||
this.checkedKeys = [...arr]
|
||||
this.checkedRows=[info.node.dataRef]
|
||||
}else{
|
||||
this.checkedKeys = checkedKeys.checked
|
||||
this.checkedRows.push(info.node.dataRef)
|
||||
}
|
||||
//this.$emit("input",this.checkedKeys.join(","))
|
||||
//console.log(this.checkedKeys.join(","))
|
||||
},
|
||||
onSelect (selectedKeys,info) {
|
||||
console.log(selectedKeys)
|
||||
let keys = []
|
||||
keys.push(selectedKeys[0])
|
||||
if(!this.checkedKeys || this.checkedKeys.length==0 || !this.multi){
|
||||
this.checkedKeys = [...keys]
|
||||
this.checkedRows=[info.node.dataRef]
|
||||
}else{
|
||||
let currKey = info.node.dataRef.key
|
||||
if(this.checkedKeys.indexOf(currKey)>=0){
|
||||
this.checkedKeys = this.checkedKeys.filter(item=>{
|
||||
return item !=currKey
|
||||
})
|
||||
this.checkedRows=this.checkedRows.filter(item=>{
|
||||
return item.key !=currKey
|
||||
})
|
||||
}else{
|
||||
this.checkedRows.push(info.node.dataRef)
|
||||
this.checkedKeys.push(...keys)
|
||||
}
|
||||
}
|
||||
},
|
||||
onExpand (expandedKeys) {
|
||||
this.expandedKeys = expandedKeys
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
handleSubmit(){
|
||||
if(!this.checkedKeys || this.checkedKeys.length==0){
|
||||
this.$emit("ok",'')
|
||||
}else{
|
||||
this.$emit("ok",this.checkedRows,this.checkedKeys.join(","))
|
||||
}
|
||||
this.handleClear()
|
||||
},
|
||||
handleCancel(){
|
||||
this.handleClear()
|
||||
},
|
||||
handleClear(){
|
||||
this.visible=false
|
||||
this.checkedKeys=[]
|
||||
},
|
||||
getParentKey(currKey,treeData){
|
||||
let parentKey
|
||||
for (let i = 0; i < treeData.length; i++) {
|
||||
const node = treeData[i]
|
||||
if (node.children) {
|
||||
if (node.children.some(item => item.key === currKey)) {
|
||||
parentKey = node.key
|
||||
} else if (this.getParentKey(currKey, node.children)) {
|
||||
parentKey = this.getParentKey(currKey, node.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
return parentKey
|
||||
},
|
||||
onSearch(value){
|
||||
const expandedKeys = this.dataList.map((item) => {
|
||||
if (item.title.indexOf(value) > -1) {
|
||||
return this.getParentKey(item.key,this.treeData)
|
||||
}
|
||||
return null
|
||||
}).filter((item, i, self) => item && self.indexOf(item) === i)
|
||||
|
||||
Object.assign(this, {
|
||||
expandedKeys,
|
||||
searchValue: value,
|
||||
autoExpandParent: true,
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<a-modal
|
||||
centered
|
||||
:title="title"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<a-row :gutter="18">
|
||||
<a-col :span="16">
|
||||
<a-card title="选择人员" :bordered="true">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :span="10">
|
||||
<a-form-item label="姓名">
|
||||
<a-input placeholder="请输入姓名" v-model="queryParam.name"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="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>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<a-table
|
||||
size="small"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns1"
|
||||
:dataSource="dataSource1"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{ y: 240 }"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card title="用户选择" :bordered="true">
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<a-table
|
||||
size="small"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns2"
|
||||
:dataSource="dataSource2"
|
||||
:loading="loading"
|
||||
:scroll="{ y: 240 }"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a-button type="primary" size="small" @click="handleDelete(record)" icon="delete">删除</a-button>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JSelectMultiUserModal',
|
||||
data () {
|
||||
return {
|
||||
title: "用户列表",
|
||||
names: [],
|
||||
visible: false,
|
||||
placement: 'right',
|
||||
description: '人员管理页面',
|
||||
// 查询条件
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns1: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key:'rowIndex',
|
||||
width:50,
|
||||
align:"center",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
align:"center",
|
||||
width:113,
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
align:"center",
|
||||
width:100,
|
||||
dataIndex: 'age'
|
||||
},
|
||||
{
|
||||
title: '出生日期',
|
||||
align:"center",
|
||||
width:100,
|
||||
dataIndex: 'birthday'
|
||||
}
|
||||
],
|
||||
columns2: [
|
||||
|
||||
{
|
||||
title: '用户账号',
|
||||
align:"center",
|
||||
width:100,
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
width:100,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
//数据集
|
||||
dataSource1:[],
|
||||
dataSource2:[],
|
||||
// 分页参数
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
isorter:{
|
||||
column: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
loading:false,
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
url: {
|
||||
list: "/test/jeecgDemo/list",
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
searchQuery(){
|
||||
this.loadData(1);
|
||||
},
|
||||
searchReset(){
|
||||
this.queryParam={};
|
||||
this.loadData(1);
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk() {
|
||||
this.$emit("selectFinished",this.dataSource2);
|
||||
this.visible = false;
|
||||
},
|
||||
add() {
|
||||
this.visible = true;
|
||||
},
|
||||
loadData (arg){
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if(arg===1){
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
var params = this.getQueryParams();//查询条件
|
||||
getAction(this.url.list,params).then((res)=>{
|
||||
if(res.success){
|
||||
this.dataSource1 = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
getQueryParams(){
|
||||
var param = Object.assign({}, this.queryParam,this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
getQueryField(){
|
||||
//TODO 字段权限控制
|
||||
},
|
||||
onSelectAll (selected, selectedRows, changeRows) {
|
||||
if(selected===true){
|
||||
for(var a = 0;a<changeRows.length;a++){
|
||||
this.dataSource2.push(changeRows[a]);
|
||||
}
|
||||
}else{
|
||||
for(var b = 0;b<changeRows.length;b++){
|
||||
this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]),1);
|
||||
}
|
||||
}
|
||||
// console.log(selected, selectedRows, changeRows);
|
||||
},
|
||||
onSelect (record,selected) {
|
||||
if(selected===true){
|
||||
this.dataSource2.push(record);
|
||||
}else{
|
||||
var index = this.dataSource2.indexOf(record);
|
||||
//console.log();
|
||||
if(index >=0 ){
|
||||
this.dataSource2.splice(this.dataSource2.indexOf(record),1);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
onSelectChange (selectedRowKeys,selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.selectionRows = selectedRows;
|
||||
},
|
||||
onClearSelected(){
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
},
|
||||
handleDelete: function(record){
|
||||
this.dataSource2.splice(this.dataSource2.indexOf(record),1);
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter){
|
||||
//分页、排序、筛选变化时触发
|
||||
console.log(sorter);
|
||||
//TODO 筛选
|
||||
if (Object.keys(sorter).length>0){
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = "ascend"==sorter.order?"asc":"desc"
|
||||
}
|
||||
this.ipagination = pagination;
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
|
||||
<iframe :id="id" :src="url" frameborder="0" width="100%" height="800px" scrolling="auto" style="background-color: #fff;"></iframe>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '../page/PageLayout'
|
||||
import RouteView from './RouteView'
|
||||
|
||||
export default {
|
||||
name: "IframePageContent",
|
||||
data () {
|
||||
return {
|
||||
url: "",
|
||||
id:""
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.goUrl()
|
||||
},
|
||||
updated () {
|
||||
this.goUrl()
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.goUrl();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goUrl () {
|
||||
let url = this.$route.meta.url
|
||||
let id = this.$route.path
|
||||
this.id = id
|
||||
//url = "http://www.baidu.com"
|
||||
console.log("------url------"+url)
|
||||
if (url !== null && url !== undefined) {
|
||||
this.url = url;
|
||||
//window.open(this.url);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,22 @@
|
||||
/**
|
||||
*
|
||||
*/
|
||||
import { disabledAuthFilter } from "@/utils/authFilter"
|
||||
|
||||
export const DisabledAuthFilterMixin = {
|
||||
props: ['formData'],
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
disabledAuth(code){
|
||||
return disabledAuthFilter(code,this.formData);
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,112 @@
|
||||
|
||||
import { USER_AUTH,SYS_BUTTON_AUTH } from "@/store/mutation-types"
|
||||
|
||||
export function disabledAuthFilter(code,formData) {
|
||||
if(nodeDisabledAuth(code,formData)){
|
||||
return true;
|
||||
}else{
|
||||
return globalDisabledAuth(code);
|
||||
}
|
||||
}
|
||||
|
||||
function nodeDisabledAuth(code,formData){
|
||||
console.log("页面权限禁用--NODE--开始");
|
||||
var permissionList = [];
|
||||
try {
|
||||
var obj = formData;
|
||||
//console.log("页面权限禁用--NODE--开始",obj);
|
||||
if (obj) {
|
||||
let bpmList = obj.permissionList;
|
||||
for (var bpm of bpmList) {
|
||||
if(bpm.type == '2') {
|
||||
permissionList.push(bpm);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
//console.log("页面权限异常----", e);
|
||||
}
|
||||
if (permissionList === null || permissionList === "" || permissionList === undefined||permissionList.length<=0) {
|
||||
return false;
|
||||
}
|
||||
let permissions = [];
|
||||
for (var item of permissionList) {
|
||||
if(item.type == '2') {
|
||||
permissions.push(item.action);
|
||||
}
|
||||
}
|
||||
//console.log("页面权限----"+code);
|
||||
if (!permissions.includes(code)) {
|
||||
return false;
|
||||
}else{
|
||||
for (var item2 of permissionList) {
|
||||
if(code === item2.action){
|
||||
console.log("页面权限禁用--NODE--生效");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function globalDisabledAuth(code){
|
||||
console.log("页面禁用权限--Global--开始");
|
||||
|
||||
var permissionList = [];
|
||||
var allPermissionList = [];
|
||||
|
||||
//let authList = Vue.ls.get(USER_AUTH);
|
||||
let authList = JSON.parse(sessionStorage.getItem(USER_AUTH) || "[]");
|
||||
for (var auth of authList) {
|
||||
if(auth.type == '2') {
|
||||
permissionList.push(auth);
|
||||
}
|
||||
}
|
||||
//console.log("页面禁用权限--Global--",sessionStorage.getItem(SYS_BUTTON_AUTH));
|
||||
let allAuthList = JSON.parse(sessionStorage.getItem(SYS_BUTTON_AUTH) || "[]");
|
||||
for (var gauth of allAuthList) {
|
||||
if(gauth.type == '2') {
|
||||
allPermissionList.push(gauth);
|
||||
}
|
||||
}
|
||||
//设置全局配置是否有命中
|
||||
var gFlag = false;//禁用命中
|
||||
var invalidFlag = false;//无效命中
|
||||
if(allPermissionList != null && allPermissionList != "" && allPermissionList != undefined && allPermissionList.length > 0){
|
||||
for (var itemG of allPermissionList) {
|
||||
if(code === itemG.action){
|
||||
if(itemG.status == '0'){
|
||||
invalidFlag = true;
|
||||
break;
|
||||
}else{
|
||||
gFlag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(invalidFlag){
|
||||
return false;
|
||||
}
|
||||
if (permissionList === null || permissionList === "" || permissionList === undefined||permissionList.length<=0) {
|
||||
return gFlag;
|
||||
}
|
||||
let permissions = [];
|
||||
for (var item of permissionList) {
|
||||
if(item.type == '2') {
|
||||
permissions.push(item.action);
|
||||
}
|
||||
}
|
||||
//console.log("页面禁用权限----"+code);
|
||||
if (!permissions.includes(code)) {
|
||||
return gFlag;
|
||||
}else{
|
||||
for (var item2 of permissionList) {
|
||||
if(code === item2.action){
|
||||
console.log("页面权限解除禁用--Global--生效");
|
||||
gFlag = false;
|
||||
}
|
||||
}
|
||||
return gFlag;
|
||||
}
|
||||
}
|
||||
@ -1,27 +1,116 @@
|
||||
import { USER_AUTH,SYS_BUTTON_AUTH } from "@/store/mutation-types"
|
||||
|
||||
const hasPermission = {
|
||||
install (Vue, options) {
|
||||
console.log(options);
|
||||
Vue.directive('has', {
|
||||
inserted: (el, binding, vnode)=>{
|
||||
console.log("页面权限----",el);
|
||||
let permissionList = vnode.context.$route.meta.permissionList;
|
||||
if (permissionList === null || permissionList === "" || permissionList === undefined) {
|
||||
el.parentNode.removeChild(el)
|
||||
return
|
||||
}
|
||||
let permissions = [];
|
||||
for (var item of permissionList) {
|
||||
permissions.push(item.action);
|
||||
}
|
||||
//console.log("页面权限----"+permissions);
|
||||
//console.log("页面权限----"+binding.value);
|
||||
if (!permissions.includes(binding.value)) {
|
||||
//if(el.parentNode)
|
||||
el.parentNode.removeChild(el)
|
||||
}
|
||||
console.log("页面权限控制----");
|
||||
//节点权限处理，如果命中则不进行全局权限处理
|
||||
if(!filterNodePermission(el, binding, vnode)){
|
||||
filterGlobalPermission(el, binding, vnode);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 全局权限控制
|
||||
*/
|
||||
export function filterNodePermission(el, binding, vnode) {
|
||||
console.log("页面权限--NODE--");
|
||||
|
||||
var permissionList = [];
|
||||
try {
|
||||
var obj = vnode.context.$props.formData;
|
||||
if (obj) {
|
||||
let bpmList = obj.permissionList;
|
||||
for (var bpm of bpmList) {
|
||||
if(bpm.type != '2') {
|
||||
permissionList.push(bpm);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
//console.log("页面权限异常----", e);
|
||||
}
|
||||
if (permissionList === null || permissionList === "" || permissionList === undefined||permissionList.length<=0) {
|
||||
//el.parentNode.removeChild(el)
|
||||
return false;
|
||||
}
|
||||
let permissions = [];
|
||||
for (var item of permissionList) {
|
||||
if(item.type != '2') {
|
||||
permissions.push(item.action);
|
||||
}
|
||||
}
|
||||
//console.log("页面权限----"+permissions);
|
||||
//console.log("页面权限----"+binding.value);
|
||||
if (!permissions.includes(binding.value)) {
|
||||
//el.parentNode.removeChild(el)
|
||||
return false;
|
||||
}else{
|
||||
for (var item2 of permissionList) {
|
||||
if(binding.value === item2.action){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 全局权限控制
|
||||
*/
|
||||
export function filterGlobalPermission(el, binding, vnode) {
|
||||
console.log("页面权限--Global--");
|
||||
|
||||
var permissionList = [];
|
||||
var allPermissionList = [];
|
||||
|
||||
//let authList = Vue.ls.get(USER_AUTH);
|
||||
let authList = JSON.parse(sessionStorage.getItem(USER_AUTH) || "[]");
|
||||
for (var auth of authList) {
|
||||
if(auth.type != '2') {
|
||||
permissionList.push(auth);
|
||||
}
|
||||
}
|
||||
//console.log("页面权限--Global--",sessionStorage.getItem(SYS_BUTTON_AUTH));
|
||||
let allAuthList = JSON.parse(sessionStorage.getItem(SYS_BUTTON_AUTH) || "[]");
|
||||
for (var gauth of allAuthList) {
|
||||
if(gauth.type != '2') {
|
||||
allPermissionList.push(gauth);
|
||||
}
|
||||
}
|
||||
//设置全局配置是否有命中
|
||||
var invalidFlag = false;//无效命中
|
||||
if(allPermissionList != null && allPermissionList != "" && allPermissionList != undefined && allPermissionList.length > 0){
|
||||
for (var itemG of allPermissionList) {
|
||||
if(binding.value === itemG.action){
|
||||
if(itemG.status == '0'){
|
||||
invalidFlag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(invalidFlag){
|
||||
return;
|
||||
}
|
||||
if (permissionList === null || permissionList === "" || permissionList === undefined||permissionList.length<=0) {
|
||||
el.parentNode.removeChild(el);
|
||||
return;
|
||||
}
|
||||
let permissions = [];
|
||||
for (var item of permissionList) {
|
||||
if(item.type != '2'){
|
||||
permissions.push(item.action);
|
||||
}
|
||||
}
|
||||
if (!permissions.includes(binding.value)) {
|
||||
el.parentNode.removeChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
export default hasPermission;
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
import Bus from 'vue';
|
||||
let install = function (Vue) {
|
||||
Vue.prototype.$bus = new Bus()
|
||||
}
|
||||
export default { install };
|
||||
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-col :span="18">
|
||||
<a-spin tip="Loading..." :spinning="spinning">
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<p>
|
||||
<a-divider orientation="left">组一</a-divider>
|
||||
</p>
|
||||
</a-col>
|
||||
<a-col :span="6"></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="12">
|
||||
<template>
|
||||
<div v-for="(fileDetail,index) in dataSource[0].fileDetails" :key="index">
|
||||
<div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
|
||||
<div
|
||||
style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="fileDetail.imgUrl" :preview="dataSource[0].key">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<p>
|
||||
<a-divider orientation="left">组二</a-divider>
|
||||
</p>
|
||||
</a-col>
|
||||
<a-col :span="6"></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="12">
|
||||
<template>
|
||||
<div v-for="(fileDetail,index) in dataSource[1].fileDetails" :key="index">
|
||||
<div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
|
||||
<div
|
||||
style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="fileDetail.imgUrl" :preview="dataSource[1].key">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
<p></p>
|
||||
</a-col>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
|
||||
export default {
|
||||
name: 'ImagPreview',
|
||||
components: {
|
||||
ARow
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '电子档补扫页面',
|
||||
spinning:false,
|
||||
//数据集
|
||||
dataSource: [{
|
||||
key:0,
|
||||
fileDetails:[
|
||||
{
|
||||
imgUrl:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3660968530,985748925&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=5e64af964be378c6c2a3b0acc65dfe24"
|
||||
}
|
||||
]
|
||||
},{
|
||||
key:1,
|
||||
fileDetails:[
|
||||
{
|
||||
imgUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=889120611,3801177793&fm=27&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2445468140,2491956848&fm=27&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
url: {
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.table-operator {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||||
background-color: #1890FF !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<a-card title="树形结构图片翻页查看" style="min-width: 800px;overflow-x:auto ">
|
||||
<a-row>
|
||||
<!-- 左侧文件树 -->
|
||||
<a-col :span="5">
|
||||
<a-tree
|
||||
showLine
|
||||
:treeData="treeData"
|
||||
:expandedKeys="[expandedKeys[0]]"
|
||||
:selectedKeys="selectedKeys"
|
||||
:style="{'height':'500px','border-right':'2px solid #c1c1c1','overflow-y':'auto'}"
|
||||
@expand="onExpand"
|
||||
@select="this.onSelect"
|
||||
>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
|
||||
<!--右侧缩略图-->
|
||||
<a-col :span="19">
|
||||
<a-row style="margin-top: 10px">
|
||||
<a-col :span="24" style="padding-left: 2%;margin-bottom: 10px">
|
||||
<a-button @click="prev" type="primary"><a-icon type="left" />上一页</a-button>
|
||||
<a-button @click="next" type="primary" style="margin-left: 8px">下一页<a-icon type="right" /></a-button>
|
||||
<span style="margin-left: 15%;font-weight: bolder">{{ navName }}</span>
|
||||
</a-col>
|
||||
<a-col :span="24" style="padding-left: 2%;">
|
||||
<img :src="imgUrl" preview>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'ImgTurnPage',
|
||||
components:{
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '图片翻页',
|
||||
//数据集
|
||||
treeData: [{
|
||||
title: '第一页',
|
||||
key: '0-0',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-0-0',
|
||||
imgUrl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-0-1',
|
||||
imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg'
|
||||
}]
|
||||
},{
|
||||
title: '第二页',
|
||||
key: '0-1',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-1-0',
|
||||
imgUrl:'https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3660968530,985748925&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=5e64af964be378c6c2a3b0acc65dfe24'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-1-1',
|
||||
imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=889120611,3801177793&fm=27&gp=0.jpg'
|
||||
}]
|
||||
},{
|
||||
title: '第三页',
|
||||
key: '0-2',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-2-0',
|
||||
imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2445468140,2491956848&fm=27&gp=0.jpg'
|
||||
}]
|
||||
}],
|
||||
selectedKeys:[],
|
||||
expandedKeys:[],
|
||||
sort:0,
|
||||
imgUrl:'',
|
||||
navName:'',
|
||||
imgList:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getImgList();
|
||||
},
|
||||
methods: {
|
||||
getImgList(){
|
||||
var count = 0;
|
||||
for(var i=0;i<this.treeData.length;i++){
|
||||
for(var j=0;j<this.treeData[i].children.length;j++){
|
||||
this.imgList.push({key:this.treeData[i].children[j].key,pkey:this.treeData[i].key,sort:count++,
|
||||
imgUrl:this.treeData[i].children[j].imgUrl,navName:this.treeData[i].title+"/"+this.treeData[i].children[j].title})
|
||||
}
|
||||
}
|
||||
this.setValue(this.imgList[this.sort]);
|
||||
},
|
||||
onSelect (selectedKeys, info) {
|
||||
for(var i=0;i<this.imgList.length;i++){
|
||||
if(this.imgList[i].key === selectedKeys[0]){
|
||||
this.sort = this.imgList[i].sort;
|
||||
this.setValue(this.imgList[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onExpand (expandedKeys) {
|
||||
this.expandedKeys = [];
|
||||
if(expandedKeys !== null && expandedKeys !== ''){
|
||||
this.expandedKeys[0] = expandedKeys[1];
|
||||
}
|
||||
},
|
||||
prev(){
|
||||
if(this.sort === 0){
|
||||
this.sort = this.imgList.length-1;
|
||||
}else{
|
||||
this.sort = this.sort - 1;
|
||||
}
|
||||
this.setValue(this.imgList[this.sort]);
|
||||
},
|
||||
next(){
|
||||
if(this.sort === this.imgList.length-1){
|
||||
this.sort = 0;
|
||||
}else{
|
||||
this.sort = this.sort + 1;
|
||||
}
|
||||
this.setValue(this.imgList[this.sort]);
|
||||
},
|
||||
// 设置受控节点值
|
||||
setValue(value){
|
||||
this.selectedKeys = [];
|
||||
this.imgUrl = value.imgUrl;
|
||||
this.selectedKeys[0] = value.key;
|
||||
this.expandedKeys[0] = value.pkey;
|
||||
this.navName = value.navName;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-input-search
|
||||
v-model="this.selectedUserNames"
|
||||
placeholder="请先选择用户"
|
||||
disabled
|
||||
@search="onSearch"
|
||||
size="large">
|
||||
<a-button slot="enterButton">选择用户</a-button>
|
||||
</a-input-search>
|
||||
|
||||
<j-search-user-by-dep-modal ref="JSearchUserByDepModal" @ok="modalFormOk"></j-search-user-by-dep-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSearchUserByDepModal from '@/components/jeecgbiz/JSearchUserByDepModal'
|
||||
|
||||
export default {
|
||||
name: 'JSearchUserByDepList',
|
||||
components: {
|
||||
JSearchUserByDepModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedUserNames: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch() {
|
||||
this.$refs.JSearchUserByDepModal.showModal();
|
||||
this.selectedUserNames = '';
|
||||
this.$refs.JSearchUserByDepModal.title = '根据部门查询用户';
|
||||
},
|
||||
modalFormOk(selectedValue) {
|
||||
this.selectedUserNames = selectedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<j-tree-table :url="url" :columns="columns" :tableProps="tableProps"/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTreeTable from '@/components/jeecg/JTreeTable'
|
||||
|
||||
export default {
|
||||
name: 'JeecgTreeTable',
|
||||
components: { JTreeTable },
|
||||
data() {
|
||||
return {
|
||||
url: '/api/asynTreeList',
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
dataIndex: 'component'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'orderNum'
|
||||
}
|
||||
],
|
||||
selectedRowKeys: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableProps() {
|
||||
let _this = this
|
||||
return {
|
||||
// 列表项是否可选择
|
||||
// https://vue.ant.design/components/table-cn/#rowSelection
|
||||
rowSelection: {
|
||||
selectedRowKeys: _this.selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="8" class="1">
|
||||
<a-form-item label="请假人">
|
||||
<a-input placeholder="请输入请假人" v-model="queryParam.name"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8" class="1">
|
||||
<a-form-item label="请假天数">
|
||||
<a-input placeholder="请输入请假天数" v-model="queryParam.days"></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.beginDate"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="请假结束时间">
|
||||
<a-input placeholder="请输入请假结束时间" v-model="queryParam.endDate"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="请假原因">
|
||||
<a-input placeholder="请输入请假原因" v-model="queryParam.reason"></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" :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="action" slot-scope="text, record">
|
||||
<template v-if="record.bpmStatus === '1'">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="startProcess(record)">提交流程</a>
|
||||
<a-divider type="vertical"/>
|
||||
</template>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item v-if="record.bpmStatus === '1'">
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-else @click="handlePreviewPic(record)">审批进度</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<form-common-modal ref="modalForm" :path="path" @ok="modalFormOk"></form-common-modal>
|
||||
<!-- 审批流程 -->
|
||||
<process-inst-pic-modal ref="processInstPicModal"></process-inst-pic-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAction } from '@/api/manage'
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import JDate from '@/components/jeecg/JDate.vue'
|
||||
import FormCommonModal from "@/components/bpm/FormCommonModal";
|
||||
import ProcessInstPicModal from "@/components/bpm/ProcessInstPicModal";
|
||||
|
||||
export default {
|
||||
name: "JoaDemoList",
|
||||
mixins:[JeecgListMixin],
|
||||
components: {
|
||||
FormCommonModal,
|
||||
ProcessInstPicModal,
|
||||
JDate
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '流程测试管理页面',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key:'rowIndex',
|
||||
width:60,
|
||||
align:"center",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '请假人',
|
||||
align:"center",
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '请假天数',
|
||||
align:"center",
|
||||
dataIndex: 'days'
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
align:"center",
|
||||
dataIndex: 'beginDate'
|
||||
},
|
||||
{
|
||||
title: '结束时间',
|
||||
align:"center",
|
||||
dataIndex: 'endDate'
|
||||
},
|
||||
{
|
||||
title: '请假原因',
|
||||
align:"center",
|
||||
dataIndex: 'reason'
|
||||
},
|
||||
{
|
||||
title: '流程状态',
|
||||
align:"center",
|
||||
dataIndex: 'bpmStatus',
|
||||
customRender:function (text) {
|
||||
if(text=='1'){
|
||||
return "待提交";
|
||||
}else if(text=='2'){
|
||||
return "处理中";
|
||||
}else if(text=='3'){
|
||||
return "已完成";
|
||||
}else if(text=='4'){
|
||||
return "已作废";
|
||||
}else{
|
||||
return text;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
flowCode:"dev_joa_demo_001",
|
||||
path:"jeecg/modules/JoaDemoForm",
|
||||
url: {
|
||||
list: "/test/joaDemo/list",
|
||||
delete: "/test/joaDemo/delete",
|
||||
deleteBatch: "/test/joaDemo/deleteBatch",
|
||||
exportXlsUrl: "test/joaDemo/exportXls",
|
||||
importExcelUrl: "test/joaDemo/importExcel",
|
||||
startProcess: "/process/extActProcess/startMutilProcess",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function(){
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startProcess: function(record){
|
||||
var that = this;
|
||||
this.$confirm({
|
||||
title:"提示",
|
||||
content:"确认提交流程吗?",
|
||||
onOk: function(){
|
||||
var param = {
|
||||
flowCode:that.flowCode,
|
||||
id:record.id,
|
||||
formUrl:that.path,
|
||||
formUrlMobile:that.path
|
||||
}
|
||||
postAction(that.url.startProcess,param).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
that.onClearSelected();
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handlePreviewPic: function(record){
|
||||
var flowCode = this.flowCode;
|
||||
var dataId = record.id;
|
||||
this.$refs.processInstPicModal.preview(flowCode,dataId);
|
||||
this.$refs.processInstPicModal.title="流程图";
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- table区域-begin -->
|
||||
<a-table
|
||||
ref="table"
|
||||
size="default"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:dataSource="dataSource">
|
||||
|
||||
</a-table>
|
||||
<!-- table区域-end -->
|
||||
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "RowspanTable",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '存放位置设置表管理页面',
|
||||
levelNum:{},
|
||||
gridNum:0,
|
||||
boxNum:0,
|
||||
cabinetNo:"",
|
||||
// 表头
|
||||
columns: [ {
|
||||
title: '分组一',
|
||||
align: "center",
|
||||
dataIndex: 'cabinetNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {},
|
||||
};
|
||||
if(index===0){
|
||||
obj.attrs.rowSpan = this.dataSource.length;
|
||||
}else{
|
||||
obj.attrs.rowSpan = 0;
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '分组二',
|
||||
align: "center",
|
||||
dataIndex: 'levelNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {},
|
||||
};
|
||||
//当前列跨行的条数
|
||||
var a = parseInt(this.levelNum);
|
||||
var b = parseInt(this.gridNum)*parseInt(this.boxNum);
|
||||
console.log(a);
|
||||
for(var c=0;c<=a;c++){
|
||||
if(index === (c*b)){
|
||||
console.log(1);
|
||||
console.log(c*b);
|
||||
obj.attrs.rowSpan = b;
|
||||
break;
|
||||
}else{
|
||||
obj.attrs.rowSpan = 0;
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '分组三',
|
||||
align: "center",
|
||||
dataIndex: 'gridNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {},
|
||||
};
|
||||
var a = parseInt(this.levelNum)*parseInt(this.gridNum);
|
||||
var b = parseInt(this.boxNum);
|
||||
for(var c=0;c<=a;c++){
|
||||
if(index === (c*b)){
|
||||
obj.attrs.rowSpan = b;
|
||||
break;
|
||||
}else{
|
||||
obj.attrs.rowSpan = 0;
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
}, {
|
||||
title: '字段一',
|
||||
align: "center",
|
||||
dataIndex: 'boxNo'
|
||||
}, {
|
||||
title: '字段二',
|
||||
align: 'center',
|
||||
dataIndex: 'storedNum'
|
||||
}, {
|
||||
title: '字段三',
|
||||
align: "center",
|
||||
dataIndex: 'maxNum'
|
||||
},],
|
||||
//数据集
|
||||
dataSource: [{
|
||||
"id": "cb1dfd12cbeca3f8ba121439ee7e2411",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "1",
|
||||
"gridNo": "1",
|
||||
"boxNo": "1",
|
||||
"storedNum": 2,
|
||||
"maxNum": 2,
|
||||
"unitNum": 2,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "1",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "f903d50d02904b14175dccf2a7948777",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "1",
|
||||
"gridNo": "1",
|
||||
"boxNo": "2",
|
||||
"storedNum": 2,
|
||||
"maxNum": 2,
|
||||
"unitNum": 2,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "1",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "4f04c0ca4202535d678871b07e706cf6",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "1",
|
||||
"gridNo": "2",
|
||||
"boxNo": "1",
|
||||
"storedNum": 2,
|
||||
"maxNum": 2,
|
||||
"unitNum": 2,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "1",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "d0c91dabedfc03efad0126e50ea72e80",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "1",
|
||||
"gridNo": "2",
|
||||
"boxNo": "2",
|
||||
"storedNum": 2,
|
||||
"maxNum": 2,
|
||||
"unitNum": 2,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "1",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-08"
|
||||
}, {
|
||||
"id": "1e8bfcbe4352afbab8878f9fd368e007",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "2",
|
||||
"gridNo": "1",
|
||||
"boxNo": "1",
|
||||
"storedNum": 1,
|
||||
"maxNum": 2,
|
||||
"unitNum": 1,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "0",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-08"
|
||||
}, {
|
||||
"id": "d76087d8d3ebc7a59d43458588f26941",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "2",
|
||||
"gridNo": "1",
|
||||
"boxNo": "2",
|
||||
"storedNum": 0,
|
||||
"maxNum": 2,
|
||||
"unitNum": 0,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "0",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "7bf7754f12e1bf95edcd501cc6b85e62",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "2",
|
||||
"gridNo": "2",
|
||||
"boxNo": "1",
|
||||
"storedNum": 0,
|
||||
"maxNum": 2,
|
||||
"unitNum": 0,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "0",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "9cd08d733657d5b286bec870f12f6ecf",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "2",
|
||||
"gridNo": "2",
|
||||
"boxNo": "2",
|
||||
"storedNum": 0,
|
||||
"maxNum": 2,
|
||||
"unitNum": 0,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "0",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}],
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
url: {
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
loadData(){
|
||||
this.levelNum=4;
|
||||
this.gridNum = 2;
|
||||
this.boxNum = 2;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style 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>
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-input-search
|
||||
v-model="this.selectedUserNames"
|
||||
placeholder="请先选择用户"
|
||||
disabled
|
||||
@search="onSearch"
|
||||
size="large">
|
||||
<a-button slot="enterButton">选择用户</a-button>
|
||||
</a-input-search>
|
||||
|
||||
<j-search-user-by-dep ref="JSearchUserByDep" @ok="modalFormOk"></j-search-user-by-dep>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSearchUserByDep from '@/components/jeecgbiz/JSearchUserByDep'
|
||||
|
||||
export default {
|
||||
name: 'SearchUserByDepList',
|
||||
components: {
|
||||
JSearchUserByDep,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedUserNames: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch() {
|
||||
this.$refs.JSearchUserByDep.showModal();
|
||||
this.selectedUserNames = '';
|
||||
this.$refs.JSearchUserByDep.title = '根据部门查询用户';
|
||||
},
|
||||
modalFormOk(selectedValue) {
|
||||
this.selectedUserNames = selectedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<a-button @click="splitPane" type="primary" icon="desktop">点我分屏</a-button>
|
||||
|
||||
<split-panel-modal ref="splitPanelModal"></split-panel-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SplitPanelModal from './modules/SplitPanelModal'
|
||||
|
||||
export default {
|
||||
name: 'SplitPanel',
|
||||
components:{
|
||||
SplitPanelModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '分屏',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
splitPane(){
|
||||
this.$refs.splitPanelModal.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
|
||||
<a-form :form="form">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="请假人">
|
||||
<a-input placeholder="请输入请假人" v-decorator="['name', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="请假天数">
|
||||
<a-input-number v-decorator="[ 'days', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="开始时间">
|
||||
<a-date-picker showTime format='YYYY-MM-DD' v-decorator="[ 'beginDate', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="请假结束时间">
|
||||
<a-date-picker showTime format='YYYY-MM-DD' v-decorator="[ 'endDate', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="请假原因">
|
||||
<a-input placeholder="请输入请假原因" v-decorator="['reason', {}]" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction,getAction } from '@/api/manage'
|
||||
import moment from "moment"
|
||||
import pick from 'lodash.pick'
|
||||
import JDate from '@/components/jeecg/JDate.vue'
|
||||
|
||||
export default {
|
||||
name: "JoaDemoModal",
|
||||
components: { JDate },
|
||||
props: ['formData'],
|
||||
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:{
|
||||
name:{},
|
||||
days:{},
|
||||
beginDate:{},
|
||||
endDate:{},
|
||||
reason:{},
|
||||
bpmStatus:{},
|
||||
},
|
||||
url: {
|
||||
queryById: "/test/joaDemo/queryById",
|
||||
add: "/test/joaDemo/add",
|
||||
edit: "/test/joaDemo/edit",
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
console.log("form start");
|
||||
console.log("formdata",this.formData);
|
||||
if(this.formData.dataId){
|
||||
var params = {id:this.formData.dataId};//查询条件
|
||||
getAction(this.url.queryById,params).then((res)=>{
|
||||
if(res.success){
|
||||
console.log("获取表单数据",res);
|
||||
this.edit (res.result);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
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,'name','days','reason','bpmStatus'))
|
||||
//时间格式化
|
||||
this.form.setFieldsValue({beginDate:this.model.beginDate?moment(this.model.beginDate):null})
|
||||
this.form.setFieldsValue({endDate:this.model.endDate?moment(this.model.endDate):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.beginDate = formData.beginDate?formData.beginDate.format('YYYY-MM-DD HH:mm:ss'):null;
|
||||
formData.endDate = formData.endDate?formData.endDate.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>
|
||||
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div style="display: none">
|
||||
<iframe
|
||||
:id="id"
|
||||
:src="url"
|
||||
frameborder="0"
|
||||
width="100%"
|
||||
height="550px"
|
||||
scrolling="auto">
|
||||
</iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
|
||||
export default {
|
||||
name: "PdfPreviewModal",
|
||||
data () {
|
||||
return {
|
||||
url: window._CONFIG['pdfDomainURL'],
|
||||
id:"pdfPreviewIframe",
|
||||
headers:{}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
mounted(){
|
||||
window.addEventListener('message', this.handleScanFileMessage);
|
||||
},
|
||||
methods: {
|
||||
handleScanFileMessage (event) {
|
||||
// 根据上面制定的结构来解析iframe内部发回来的数据
|
||||
const data = event.data;
|
||||
console.log(data);
|
||||
},
|
||||
|
||||
previewFiles (title,token) {
|
||||
var iframe = document.getElementById("pdfPreviewIframe");
|
||||
var json = {"title":title,"token":token};
|
||||
iframe.contentWindow.postMessage(json, "*");
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<a-card style="min-width: 500px;overflow-x: auto">
|
||||
<p>我是左侧页面</p>
|
||||
<img-turn-page></img-turn-page>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: "SplitPanelAModal",
|
||||
components:{
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<a-card style="min-width: 500px;overflow-x: auto">
|
||||
<p>我是右侧页面</p>
|
||||
<img-turn-page></img-turn-page>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: "SplitPanelAModal",
|
||||
components:{
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="分屏"
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:bodyStyle="bodyStyle"
|
||||
style="top: 0px;"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<split-pane :min-percent='20' :default-percent='50' split="vertical">
|
||||
<template slot="paneL">
|
||||
<split-panel-a></split-panel-a>
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
<split-panel-b></split-panel-b>
|
||||
</template>
|
||||
</split-pane>
|
||||
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import splitPane from 'vue-splitpane'
|
||||
import SplitPanelA from './SplitPanelA'
|
||||
import SplitPanelB from './SplitPanelB'
|
||||
export default {
|
||||
name: "SplitPanelModal",
|
||||
components:{
|
||||
splitPane,
|
||||
SplitPanelA,
|
||||
SplitPanelB
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
bodyStyle:{
|
||||
padding: "0",
|
||||
height:(window.innerHeight-150)+"px"
|
||||
},
|
||||
modalWidth:800,
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.modalWidth = window.innerWidth-0;
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true;
|
||||
},
|
||||
handleOk(){
|
||||
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue