mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-04 17:45:34 +08:00
JEECG-BOOT 2.0.2版本发布
This commit is contained in:
zhangdaihao
43
ant-design-vue-jeecg/src/components/jeecg/JCheckbox.vue
Normal file
43
ant-design-vue-jeecg/src/components/jeecg/JCheckbox.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<a-checkbox-group :options="options" :value="checkboxArray" @change="onChange" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JCheckbox',
|
||||
props: {
|
||||
value:{
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
/*label value*/
|
||||
options:{
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
checkboxArray:!this.value?[]:this.value.split(",")
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value (val) {
|
||||
if(!val){
|
||||
this.checkboxArray = []
|
||||
}else{
|
||||
this.checkboxArray = this.value.split(",")
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onChange (checkedValues) {
|
||||
this.$emit('change', checkedValues.join(","));
|
||||
},
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
409
ant-design-vue-jeecg/src/components/jeecg/JCodeEditor.vue
Normal file
409
ant-design-vue-jeecg/src/components/jeecg/JCodeEditor.vue
Normal file
@ -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>
|
||||
85
ant-design-vue-jeecg/src/components/jeecg/JDate.vue
Normal file
85
ant-design-vue-jeecg/src/components/jeecg/JDate.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<a-date-picker
|
||||
:disabled="disabled || readOnly"
|
||||
:placeholder="placeholder"
|
||||
@change="handleDateChange"
|
||||
:value="momVal"
|
||||
:showTime="showTime"
|
||||
:format="dateFormat"
|
||||
:getCalendarContainer="getCalendarContainer"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
name: 'JDate',
|
||||
props: {
|
||||
placeholder:{
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
value:{
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
dateFormat:{
|
||||
type: String,
|
||||
default: 'YYYY-MM-DD',
|
||||
required: false
|
||||
},
|
||||
//此属性可以被废弃了
|
||||
triggerChange:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
readOnly:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
disabled:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
showTime:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
getCalendarContainer: {
|
||||
type: Function,
|
||||
default: () => document.body
|
||||
}
|
||||
},
|
||||
data () {
|
||||
let dateStr = this.value;
|
||||
return {
|
||||
decorator:"",
|
||||
momVal:!dateStr?null:moment(dateStr,this.dateFormat)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
if(!val){
|
||||
this.momVal = null
|
||||
}else{
|
||||
this.momVal = moment(val,this.dateFormat)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
handleDateChange(mom,dateStr){
|
||||
this.$emit('change', dateStr);
|
||||
}
|
||||
},
|
||||
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
1662
ant-design-vue-jeecg/src/components/jeecg/JEditableTable.vue
Normal file
1662
ant-design-vue-jeecg/src/components/jeecg/JEditableTable.vue
Normal file
File diff suppressed because it is too large
Load Diff
104
ant-design-vue-jeecg/src/components/jeecg/JEditor.vue
Normal file
104
ant-design-vue-jeecg/src/components/jeecg/JEditor.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="tinymce-editor">
|
||||
<editor
|
||||
v-model="myValue"
|
||||
:init="init"
|
||||
:disabled="disabled"
|
||||
@onClick="onClick">
|
||||
</editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tinymce from 'tinymce/tinymce'
|
||||
import Editor from '@tinymce/tinymce-vue'
|
||||
import 'tinymce/themes/silver/theme'
|
||||
import 'tinymce/plugins/image'
|
||||
import 'tinymce/plugins/media'
|
||||
import 'tinymce/plugins/table'
|
||||
import 'tinymce/plugins/lists'
|
||||
import 'tinymce/plugins/contextmenu'
|
||||
import 'tinymce/plugins/wordcount'
|
||||
import 'tinymce/plugins/colorpicker'
|
||||
import 'tinymce/plugins/textcolor'
|
||||
import 'tinymce/plugins/fullscreen'
|
||||
export default {
|
||||
components: {
|
||||
Editor
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
required:false
|
||||
},
|
||||
triggerChange:{
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required:false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
plugins: {
|
||||
type: [String, Array],
|
||||
default: 'lists image media table textcolor wordcount contextmenu fullscreen'
|
||||
},
|
||||
toolbar: {
|
||||
type: [String, Array],
|
||||
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | fullscreen'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//初始化配置
|
||||
init: {
|
||||
language_url: '/tinymce/langs/zh_CN.js',
|
||||
language: 'zh_CN',
|
||||
skin_url: '/tinymce/skins/lightgray',
|
||||
height: 300,
|
||||
plugins: this.plugins,
|
||||
toolbar: this.toolbar,
|
||||
branding: false,
|
||||
menubar: false,
|
||||
images_upload_handler: (blobInfo, success) => {
|
||||
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
|
||||
success(img)
|
||||
}
|
||||
},
|
||||
myValue: this.value
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
tinymce.init({})
|
||||
},
|
||||
methods: {
|
||||
|
||||
onClick(e) {
|
||||
this.$emit('onClick', e, tinymce)
|
||||
},
|
||||
//可以添加一些自己的自定义事件，如清空内容
|
||||
clear() {
|
||||
this.myValue = ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newValue) {
|
||||
this.myValue = newValue
|
||||
},
|
||||
myValue(newValue) {
|
||||
console.log(newValue)
|
||||
if(this.triggerChange){
|
||||
console.log(1)
|
||||
this.$emit('change', newValue)
|
||||
}else{
|
||||
console.log(2)
|
||||
this.$emit('input', newValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
29
ant-design-vue-jeecg/src/components/jeecg/JEllipsis.vue
Normal file
29
ant-design-vue-jeecg/src/components/jeecg/JEllipsis.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template slot="title">
|
||||
<span>{{value}}</span>
|
||||
</template>
|
||||
{{ value | ellipsis(length) }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JEllipsis',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
length: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 25,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
48
ant-design-vue-jeecg/src/components/jeecg/JFormContainer.vue
Normal file
48
ant-design-vue-jeecg/src/components/jeecg/JFormContainer.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div v-if="disabled" class="jeecg-form-container-disabled">
|
||||
<fieldset disabled>
|
||||
<slot></slot>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div v-else>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 使用方法
|
||||
* 在form下直接写这个组件就行了，
|
||||
*<a-form layout="inline" :form="form" >
|
||||
* <j-form-container :disabled="true">
|
||||
* <!-- 表单内容省略..... -->
|
||||
* </j-form-container>
|
||||
*</a-form>
|
||||
*/
|
||||
export default {
|
||||
name: 'JFormContainer',
|
||||
props:{
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log("我是表单禁用专用组件,但是我并不支持表单中iframe的内容禁用")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.jeecg-form-container-disabled{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.jeecg-form-container-disabled fieldset[disabled] {
|
||||
-ms-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.jeecg-form-container-disabled .ant-select{
|
||||
-ms-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
163
ant-design-vue-jeecg/src/components/jeecg/JGraphicCode.vue
Normal file
163
ant-design-vue-jeecg/src/components/jeecg/JGraphicCode.vue
Normal file
@ -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>
|
||||
110
ant-design-vue-jeecg/src/components/jeecg/JImportModal.vue
Normal file
110
ant-design-vue-jeecg/src/components/jeecg/JImportModal.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="导入EXCEL"
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:confirmLoading="uploading"
|
||||
@cancel="handleClose">
|
||||
|
||||
<a-upload
|
||||
name="file"
|
||||
:multiple="true"
|
||||
accept=".xls,.xlsx"
|
||||
:fileList="fileList"
|
||||
:remove="handleRemove"
|
||||
:beforeUpload="beforeUpload">
|
||||
<a-button>
|
||||
<a-icon type="upload" />
|
||||
选择导入文件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
|
||||
<template slot="footer">
|
||||
<a-button @click="handleClose">关闭</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleImport"
|
||||
:disabled="fileList.length === 0"
|
||||
:loading="uploading">
|
||||
{{ uploading ? '上传中...' : '开始上传' }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAction } from '@/api/manage'
|
||||
export default {
|
||||
name: 'JImportModal',
|
||||
props:{
|
||||
url:{
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
uploading:false,
|
||||
fileList:[],
|
||||
uploadAction:''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
url (val) {
|
||||
if(val){
|
||||
this.uploadAction = window._CONFIG['domianURL']+val
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.uploadAction = window._CONFIG['domianURL']+this.url
|
||||
},
|
||||
|
||||
methods:{
|
||||
handleClose(){
|
||||
this.visible=false
|
||||
},
|
||||
show(){
|
||||
this.fileList = []
|
||||
this.uploading = false
|
||||
this.visible = true
|
||||
},
|
||||
handleRemove(file) {
|
||||
const index = this.fileList.indexOf(file);
|
||||
const newFileList = this.fileList.slice();
|
||||
newFileList.splice(index, 1);
|
||||
this.fileList = newFileList
|
||||
},
|
||||
beforeUpload(file) {
|
||||
this.fileList = [...this.fileList, file]
|
||||
return false;
|
||||
},
|
||||
handleImport() {
|
||||
const { fileList } = this;
|
||||
const formData = new FormData();
|
||||
fileList.forEach((file) => {
|
||||
formData.append('files[]', file);
|
||||
});
|
||||
this.uploading = true
|
||||
postAction(this.uploadAction, formData).then((res) => {
|
||||
this.uploading = false
|
||||
if(res.success){
|
||||
this.$message.success(res.message)
|
||||
this.visible=false
|
||||
this.$emit('ok')
|
||||
}else{
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-select :value="arrayValue" @change="onChange" mode="multiple" :placeholder="placeholder">
|
||||
<a-select-option
|
||||
v-for="(item,index) in options"
|
||||
:key="index"
|
||||
:value="item.value">
|
||||
{{ item.text || item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//option {label:,value:}
|
||||
export default {
|
||||
name: 'JSelectMultiple',
|
||||
props: {
|
||||
placeholder:{
|
||||
type: String,
|
||||
default:'',
|
||||
required: false
|
||||
},
|
||||
value:{
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
readOnly:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
options:{
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
triggerChange:{
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
arrayValue:!this.value?[]:this.value.split(",")
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value (val) {
|
||||
if(!val){
|
||||
this.arrayValue = []
|
||||
}else{
|
||||
this.arrayValue = this.value.split(",")
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onChange (selectedValue) {
|
||||
if(this.triggerChange){
|
||||
this.$emit('change', selectedValue.join(","));
|
||||
}else{
|
||||
this.$emit('input', selectedValue.join(","));
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
111
ant-design-vue-jeecg/src/components/jeecg/JSlider.vue
Normal file
111
ant-design-vue-jeecg/src/components/jeecg/JSlider.vue
Normal file
@ -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>
|
||||
152
ant-design-vue-jeecg/src/components/jeecg/JSuperQuery.vue
Normal file
152
ant-design-vue-jeecg/src/components/jeecg/JSuperQuery.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="高级查询构造器"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@cancel="handleCancel"
|
||||
:mask="false"
|
||||
wrapClassName="ant-modal-cust-warp"
|
||||
style="top:5%;max-height: 95%;">
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关 闭</a-button>
|
||||
<a-button @click="handleReset" style="float: left">重 置</a-button>
|
||||
<a-button type="primary" @click="handleOk">查 询</a-button>
|
||||
</template>
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form>
|
||||
<div>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
|
||||
|
||||
<a-col :span="6">
|
||||
<a-select placeholder="选择查询字段" v-model="item.field" @select="(val,option)=>handleSelected(option,item)">
|
||||
<a-select-option v-for="(f,fIndex) in fieldList" :key=" 'field'+fIndex" :value="f.value" :data-type="f.type">{{ f.text }}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-select placeholder="选择匹配规则" v-model="item.rule">
|
||||
<a-select-option value="eq">等于</a-select-option>
|
||||
<a-select-option value="ne">不等于</a-select-option>
|
||||
<a-select-option value="gt">大于</a-select-option>
|
||||
<a-select-option value="ge">大于等于</a-select-option>
|
||||
<a-select-option value="lt">小于</a-select-option>
|
||||
<a-select-option value="le">小于等于</a-select-option>
|
||||
<a-select-option value="right_like">以..开始</a-select-option>
|
||||
<a-select-option value="left_like">以..结尾</a-select-option>
|
||||
<a-select-option value="like">包含</a-select-option>
|
||||
<a-select-option value="in">在...中</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<j-date v-if=" item.type=='date' " v-model="item.val" placeholder="请选择日期"></j-date>
|
||||
<j-date v-else-if=" item.type=='datetime' " v-model="item.val" placeholder="请选择时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss"></j-date>
|
||||
<a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/>
|
||||
<a-input v-else v-model="item.val" placeholder="请输入值" />
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-button @click="handleAdd" icon="plus"></a-button>
|
||||
<a-button @click="handleDel( index )" icon="minus"></a-button>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import JDate from '@/components/jeecg/JDate.vue';
|
||||
|
||||
export default {
|
||||
name: 'JSuperQuery',
|
||||
components: {
|
||||
ACol,
|
||||
JDate
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
visible:false,
|
||||
confirmLoading:false,
|
||||
queryParamsModel:[{}]
|
||||
}
|
||||
},
|
||||
props:{
|
||||
/* fieldList:[{value:'',text:'',type:''}]
|
||||
* type:date datetime int number string
|
||||
* */
|
||||
fieldList:{
|
||||
type:Array,
|
||||
required:true
|
||||
},
|
||||
/*
|
||||
* 这个回调函数接收一个数组参数 即查询条件
|
||||
* */
|
||||
callback:{
|
||||
type:String,
|
||||
required:false,
|
||||
default:'handleSuperQuery'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
show(){
|
||||
if(!this.queryParamsModel ||this.queryParamsModel.length==0){
|
||||
this.queryParamsModel = [{}]
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
handleOk(){
|
||||
console.log("---高级查询参数--->",this.queryParamsModel)
|
||||
if(!this.isNullArray()){
|
||||
this.$emit(this.callback, this.queryParamsModel)
|
||||
}else{
|
||||
this.$emit(this.callback)
|
||||
}
|
||||
},
|
||||
handleCancel(){
|
||||
this.close()
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleAdd () {
|
||||
this.queryParamsModel.push({});
|
||||
},
|
||||
handleDel (index) {
|
||||
|
||||
this.queryParamsModel.splice(index,1);
|
||||
this.$message.warning("请关闭后重新打开")
|
||||
},
|
||||
handleSelected(option,item){
|
||||
item['type'] = option.data.attrs['data-type']
|
||||
},
|
||||
handleReset(){
|
||||
this.queryParamsModel=[{}]
|
||||
this.$emit(this.callback)
|
||||
},
|
||||
isNullArray(){
|
||||
//判断是不是空数组对象
|
||||
if(!this.queryParamsModel || this.queryParamsModel.length==0){
|
||||
return true
|
||||
}
|
||||
if(this.queryParamsModel.length==1){
|
||||
let obj = this.queryParamsModel[0]
|
||||
if(!obj.field || !obj.val || !obj.rule){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style >
|
||||
|
||||
</style>
|
||||
195
ant-design-vue-jeecg/src/components/jeecg/JTreeDict.vue
Normal file
195
ant-design-vue-jeecg/src/components/jeecg/JTreeDict.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<a-tree-select
|
||||
allowClear
|
||||
labelInValue
|
||||
style="width: 100%"
|
||||
:disabled="disabled"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
:placeholder="placeholder"
|
||||
:loadData="asyncLoadTreeData"
|
||||
:value="treeValue"
|
||||
:treeData="treeData"
|
||||
@change="onChange"
|
||||
@search="onSearch">
|
||||
</a-tree-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JTreeDict',
|
||||
data(){
|
||||
return {
|
||||
treeData:[],
|
||||
treeValue:"",
|
||||
url_root:"/sys/category/loadTreeRoot",
|
||||
url_children:"/sys/category/loadTreeChildren",
|
||||
url_view:'/sys/category/loadOne',
|
||||
}
|
||||
},
|
||||
props:{
|
||||
value:{
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
placeholder:{
|
||||
type: String,
|
||||
default: '请选择',
|
||||
required: false
|
||||
},
|
||||
parentCode:{
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
field:{
|
||||
type: String,
|
||||
default: 'id',
|
||||
required: false
|
||||
},
|
||||
root:{
|
||||
type:Object,
|
||||
required:false,
|
||||
default:()=>{
|
||||
return {
|
||||
pid:'0'
|
||||
}
|
||||
}
|
||||
},
|
||||
async:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
},
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
root:{
|
||||
handler(val){
|
||||
console.log("root-change",val)
|
||||
},
|
||||
deep:true
|
||||
},
|
||||
parentCode:{
|
||||
handler(){
|
||||
this.loadRoot()
|
||||
}
|
||||
},
|
||||
value:{
|
||||
handler(){
|
||||
this.loadViewInfo()
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.loadRoot()
|
||||
this.loadViewInfo()
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
methods:{
|
||||
loadViewInfo(){
|
||||
if(!this.value || this.value=="0"){
|
||||
this.treeValue = ""
|
||||
}else{
|
||||
let param = {
|
||||
field:this.field,
|
||||
val:this.value
|
||||
}
|
||||
getAction(this.url_view,param).then(res=>{
|
||||
if(res.success){
|
||||
this.treeValue = {
|
||||
value:this.value,
|
||||
label:res.result.name
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
loadRoot(){
|
||||
let param = {
|
||||
async:this.async,
|
||||
pcode:this.parentCode
|
||||
}
|
||||
getAction(this.url_root,param).then(res=>{
|
||||
if(res.success){
|
||||
this.handleTreeNodeValue(res.result)
|
||||
console.log("aaaa",res.result)
|
||||
this.treeData = [...res.result]
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
asyncLoadTreeData (treeNode) {
|
||||
return new Promise((resolve) => {
|
||||
if(!this.async){
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
if (treeNode.$vnode.children) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
let pid = treeNode.$vnode.key
|
||||
let param = {
|
||||
pid:pid
|
||||
}
|
||||
getAction(this.url_children,param).then(res=>{
|
||||
if(res.success){
|
||||
this.handleTreeNodeValue(res.result)
|
||||
this.addChildren(pid,res.result,this.treeData)
|
||||
this.treeData = [...this.treeData]
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
addChildren(pid,children,treeArray){
|
||||
if(treeArray && treeArray.length>0){
|
||||
for(let item of treeArray){
|
||||
if(item.key == pid){
|
||||
if(!children || children.length==0){
|
||||
item.leaf = true
|
||||
}else{
|
||||
item.children = children
|
||||
}
|
||||
break
|
||||
}else{
|
||||
this.addChildren(pid,children,item.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleTreeNodeValue(result){
|
||||
let storeField = this.field=='code'?'code':'key'
|
||||
for(let i of result){
|
||||
i.value = i[storeField]
|
||||
i.isLeaf = (!i.leaf)?false:true
|
||||
if(i.children && i.children.length>0){
|
||||
this.handleTreeNodeValue(i.children)
|
||||
}
|
||||
}
|
||||
},
|
||||
onChange(value){
|
||||
console.log(value)
|
||||
this.$emit('change', value.value);
|
||||
this.treeValue = value
|
||||
},
|
||||
onSearch(value){
|
||||
console.log(value)
|
||||
},
|
||||
getCurrTreeData(){
|
||||
return this.treeData
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
206
ant-design-vue-jeecg/src/components/jeecg/JTreeSelect.vue
Normal file
206
ant-design-vue-jeecg/src/components/jeecg/JTreeSelect.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<a-tree-select
|
||||
allowClear
|
||||
labelInValue
|
||||
style="width: 100%"
|
||||
:disabled="disabled"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
:placeholder="placeholder"
|
||||
:loadData="asyncLoadTreeData"
|
||||
:value="treeValue"
|
||||
:treeData="treeData"
|
||||
@change="onChange"
|
||||
@search="onSearch">
|
||||
</a-tree-select>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
/*
|
||||
* 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件
|
||||
* <j-tree-select dict="aa_tree_test,aad,id" pid-field="pid" ></j-tree-select>
|
||||
* */
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JTreeSelect',
|
||||
props: {
|
||||
value:{
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
placeholder:{
|
||||
type: String,
|
||||
default: '请选择',
|
||||
required: false
|
||||
},
|
||||
dict:{
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
pidField:{
|
||||
type: String,
|
||||
default: 'pid',
|
||||
required: false
|
||||
},
|
||||
pidValue:{
|
||||
type: String,
|
||||
default: '0',
|
||||
required: false
|
||||
},
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
required:false
|
||||
},
|
||||
hasChildField:{
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
treeValue:"",
|
||||
treeData:[],
|
||||
url:"/sys/dict/loadTreeData",
|
||||
view:'/sys/dict/loadDictItem/',
|
||||
tableName:"",
|
||||
text:"",
|
||||
code:"",
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value () {
|
||||
this.loadItemByCode()
|
||||
},
|
||||
dict(){
|
||||
this.initDictInfo()
|
||||
this.loadRoot();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.initDictInfo()
|
||||
this.loadRoot()
|
||||
this.loadItemByCode()
|
||||
},
|
||||
methods: {
|
||||
loadItemByCode(){
|
||||
if(!this.value || this.value=="0"){
|
||||
this.treeValue = ""
|
||||
}else{
|
||||
getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{
|
||||
if(res.success){
|
||||
this.treeValue = {
|
||||
key:this.value,
|
||||
value:this.value,
|
||||
label:res.result
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
initDictInfo(){
|
||||
let arr = this.dict.split(",")
|
||||
this.tableName = arr[0]
|
||||
this.text = arr[1]
|
||||
this.code = arr[2]
|
||||
},
|
||||
asyncLoadTreeData (treeNode) {
|
||||
return new Promise((resolve) => {
|
||||
if (treeNode.$vnode.children) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
let pid = treeNode.$vnode.key
|
||||
let param = {
|
||||
pid:pid,
|
||||
tableName:this.tableName,
|
||||
text:this.text,
|
||||
code:this.code,
|
||||
pidField:this.pidField,
|
||||
hasChildField:this.hasChildField
|
||||
}
|
||||
getAction(this.url,param).then(res=>{
|
||||
if(res.success){
|
||||
for(let i of res.result){
|
||||
i.value = i.key
|
||||
if(i.leaf==false){
|
||||
i.isLeaf=false
|
||||
}else if(i.leaf==true){
|
||||
i.isLeaf=true
|
||||
}
|
||||
}
|
||||
this.addChildren(pid,res.result,this.treeData)
|
||||
this.treeData = [...this.treeData]
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
addChildren(pid,children,treeArray){
|
||||
if(treeArray && treeArray.length>0){
|
||||
for(let item of treeArray){
|
||||
if(item.key == pid){
|
||||
if(!children || children.length==0){
|
||||
item.isLeaf=true
|
||||
}else{
|
||||
item.children = children
|
||||
}
|
||||
break
|
||||
}else{
|
||||
this.addChildren(pid,children,item.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
loadRoot(){
|
||||
let param = {
|
||||
pid:this.pidValue,
|
||||
tableName:this.tableName,
|
||||
text:this.text,
|
||||
code:this.code,
|
||||
pidField:this.pidField,
|
||||
hasChildField:this.hasChildField
|
||||
}
|
||||
getAction(this.url,param).then(res=>{
|
||||
if(res.success && res.result){
|
||||
for(let i of res.result){
|
||||
i.value = i.key
|
||||
if(i.leaf==false){
|
||||
i.isLeaf=false
|
||||
}else if(i.leaf==true){
|
||||
i.isLeaf=true
|
||||
}
|
||||
}
|
||||
this.treeData = [...res.result]
|
||||
}else{
|
||||
console.log("数根节点查询结果-else",res)
|
||||
}
|
||||
})
|
||||
},
|
||||
onChange(value){
|
||||
if(!value){
|
||||
this.$emit('change', '');
|
||||
this.treeValue = ''
|
||||
}else{
|
||||
this.$emit('change', value.value);
|
||||
this.treeValue = value
|
||||
}
|
||||
|
||||
},
|
||||
onSearch(value){
|
||||
console.log(value)
|
||||
},
|
||||
getCurrTreeData(){
|
||||
return this.treeData
|
||||
}
|
||||
},
|
||||
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
140
ant-design-vue-jeecg/src/components/jeecg/JTreeTable.vue
Normal file
140
ant-design-vue-jeecg/src/components/jeecg/JTreeTable.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<a-table
|
||||
:rowKey="rowKey"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
v-bind="tableProps"
|
||||
@expand="handleExpand">
|
||||
|
||||
<template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">
|
||||
<slot :name="slotItem" v-bind="{text,record,index}"></slot>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JTreeTable',
|
||||
props: {
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
// 根据什么查询，如果传递 id 就根据 id 查询
|
||||
queryKey: {
|
||||
type: String,
|
||||
default: 'parentId'
|
||||
},
|
||||
queryParams: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
// 查询顶级时的值，如果顶级为0，则传0
|
||||
topValue: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
childrenUrl: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
tableProps: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataSource: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getChildrenUrl() {
|
||||
if (this.childrenUrl) {
|
||||
return this.childrenUrl
|
||||
} else {
|
||||
return this.url
|
||||
}
|
||||
},
|
||||
slots() {
|
||||
let slots = []
|
||||
for (let column of this.columns) {
|
||||
if (column.scopedSlots && column.scopedSlots.customRender) {
|
||||
slots.push(column.scopedSlots.customRender)
|
||||
}
|
||||
}
|
||||
return slots
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
queryParams: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 加载数据*/
|
||||
loadData(id = this.topValue, first = true, url = this.url) {
|
||||
let params = Object.assign({}, this.queryParams || {})
|
||||
params[this.queryKey] = id
|
||||
return getAction(url, params).then(res => {
|
||||
let dataSource = res.result.map(item => {
|
||||
// 判断是否标记了带有子级
|
||||
if (item.hasChildren === true) {
|
||||
// 定义默认展开时显示的loading子级，实际子级数据只在展开时加载
|
||||
let loadChild = { id: `${item.id}_loadChild`, name: 'loading...', isLoading: true }
|
||||
item.children = [loadChild]
|
||||
}
|
||||
return item
|
||||
})
|
||||
if (first) {
|
||||
this.dataSource = dataSource
|
||||
}
|
||||
return Promise.resolve(dataSource)
|
||||
})
|
||||
},
|
||||
|
||||
/** 点击展开图标时触发 */
|
||||
handleExpand(expanded, record) {
|
||||
// 判断是否是展开状态
|
||||
if (expanded) {
|
||||
// 判断子级的首个项的标记是否是“正在加载中”，如果是就加载数据
|
||||
if (record.children[0].isLoading === true) {
|
||||
this.loadData(record.id, false, this.getChildrenUrl).then(dataSource => {
|
||||
// 处理好的数据可直接赋值给children
|
||||
if (dataSource.length === 0) {
|
||||
record.children = null
|
||||
} else {
|
||||
record.children = dataSource
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
173
ant-design-vue-jeecg/src/components/jeecg/JUpload.vue
Normal file
173
ant-design-vue-jeecg/src/components/jeecg/JUpload.vue
Normal file
@ -0,0 +1,173 @@
|
||||
<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(",")
|
||||
}
|
||||
this.$emit('change', 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)
|
||||
},
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
511
ant-design-vue-jeecg/src/components/jeecg/README.md
Normal file
511
ant-design-vue-jeecg/src/components/jeecg/README.md
Normal file
@ -0,0 +1,511 @@
|
||||
# JDate 日期组件 使用文档
|
||||
|
||||
###### 说明: antd-vue日期组件需要用moment中转一下，用起来不是很方便，特二次封装，使用时只需要传字符串即可
|
||||
## 参数配置
|
||||
| 参数 | 类型 | 必填 |说明|
|
||||
|--------------|---------|----|---------|
|
||||
| placeholder |string | | placeholder |
|
||||
| readOnly | boolean | | true/false 默认false |
|
||||
| value | string | | 绑定v-model或是v-decorator后不需要设置 |
|
||||
| showTime | boolean | | 是否展示时间true/false 默认false |
|
||||
| dateFormat | string | |日期格式 默认'YYYY-MM-DD' 若showTime设置为true则需要将其设置成对应的时间格式(如:YYYY-MM-DD HH:mm:ss) |
|
||||
| triggerChange | string | |触发组件值改变的事件是否是change,当使用v-decorator时且没有设置decorator的option.trigger为input需要设置该值为true |
|
||||
使用示例
|
||||
----
|
||||
1.组件带有v-model的使用方法
|
||||
```vue
|
||||
<j-date v-model="dateStr"></j-date>
|
||||
```
|
||||
|
||||
2.组件带有v-decorator的使用方法
|
||||
a).设置trigger-change属性为true
|
||||
```vue
|
||||
<j-date :trigger-change="true" v-decorator="['dateStr',{}]"></j-date>
|
||||
```
|
||||
|
||||
b).设置decorator的option.trigger为input
|
||||
```vue
|
||||
<j-date v-decorator="['dateStr',{trigger:'input'}]"></j-date>
|
||||
```
|
||||
|
||||
3.其他使用
|
||||
添加style
|
||||
```vue
|
||||
<j-date v-model="dateStr" style="width:100%"></j-date>
|
||||
```
|
||||
添加placeholder
|
||||
```vue
|
||||
<j-date v-model="dateStr" placeholder="请输入dateStr"></j-date>
|
||||
```
|
||||
添加readOnly
|
||||
```vue
|
||||
<j-date v-model="dateStr" :read-only="true"></j-date>
|
||||
```
|
||||
|
||||
备注:
|
||||
script内需引入jdate
|
||||
```vue
|
||||
<script>
|
||||
import JDate from '@/components/jeecg/JDate'
|
||||
export default {
|
||||
name: "demo",
|
||||
components: {
|
||||
JDate
|
||||
}
|
||||
//...
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
# JSuperQuery 高级查询 使用文档
|
||||
## 参数配置
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|--------------|---------|----|----------------------|
|
||||
| fieldList | array |✔| 需要查询的列集合示例如下，type类型有:date/datetime/string/int/number |
|
||||
| callback | array | | 回调函数名称(非必须)默认handleSuperQuery |
|
||||
|
||||
fieldList结构示例：
|
||||
```vue
|
||||
const superQueryFieldList=[{
|
||||
type:"date",
|
||||
value:"birthday",
|
||||
text:"生日"
|
||||
},{
|
||||
type:"string",
|
||||
value:"name",
|
||||
text:"用户名"
|
||||
},{
|
||||
type:"int",
|
||||
value:"age",
|
||||
text:"年龄"
|
||||
}]
|
||||
```
|
||||
页面代码概述:
|
||||
----
|
||||
1.import之后再components之内声明
|
||||
```vue
|
||||
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
|
||||
export default {
|
||||
name: "JeecgDemoList",
|
||||
components: {
|
||||
JSuperQuery
|
||||
},
|
||||
|
||||
```
|
||||
2.页面引用
|
||||
```vue
|
||||
<!-- 高级查询区域 -->
|
||||
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
|
||||
```
|
||||
3.list页面data中需要定义三个属性：
|
||||
```vue
|
||||
fieldList:superQueryFieldList,
|
||||
superQueryFlag:false,
|
||||
superQueryParams:""
|
||||
```
|
||||
4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可)
|
||||
```vue
|
||||
//高级查询方法
|
||||
handleSuperQuery(arg) {
|
||||
if(!arg){
|
||||
this.superQueryParams=''
|
||||
this.superQueryFlag = false
|
||||
}else{
|
||||
this.superQueryFlag = true
|
||||
this.superQueryParams=JSON.stringify(arg)
|
||||
}
|
||||
this.loadData()
|
||||
},
|
||||
```
|
||||
5.改造list页面方法
|
||||
```vue
|
||||
// 获取查询条件
|
||||
getQueryParams() {
|
||||
let sqp = {}
|
||||
if(this.superQueryParams){
|
||||
sqp['superQueryParams']=encodeURI(this.superQueryParams)
|
||||
}
|
||||
var param = Object.assign(sqp, this.queryParam, this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
```
|
||||
6.打开弹框调用show方法：
|
||||
```vue
|
||||
this.$refs.superQueryModal.show();
|
||||
```
|
||||
|
||||
# JEllipsis 字符串超长截取省略号显示
|
||||
|
||||
###### 说明: 遇到超长文本展示，通过此标签可以截取省略号显示，鼠标放置会提示全文本
|
||||
## 参数配置
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|--------|---------|----|----------------|
|
||||
| value |string | 必填 | 字符串文本|
|
||||
| length | number | 非必填 | 默认25 |
|
||||
使用示例
|
||||
----
|
||||
1.组件带有v-model的使用方法
|
||||
```vue
|
||||
<j-ellipsis :value="text"/>
|
||||
|
||||
|
||||
# Modal弹框实现最大化功能
|
||||
|
||||
1.定义modal的宽度：
|
||||
```vue
|
||||
<a-modal
|
||||
:width="modalWidth"
|
||||
|
||||
|
||||
/>
|
||||
```
|
||||
2.自定义modal的title,居右显示切换图标
|
||||
```vue
|
||||
<template slot="title">
|
||||
<div style="width: 100%;">
|
||||
<span>{{ title }}</span>
|
||||
<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
|
||||
<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
3.定义toggleScreen事件,用于切换modal宽度
|
||||
```vue
|
||||
toggleScreen(){
|
||||
if(this.modaltoggleFlag){
|
||||
this.modalWidth = window.innerWidth;
|
||||
}else{
|
||||
this.modalWidth = 800;
|
||||
}
|
||||
this.modaltoggleFlag = !this.modaltoggleFlag;
|
||||
},
|
||||
```
|
||||
4.data中声明上述用到的属性
|
||||
```vue
|
||||
data () {
|
||||
return {
|
||||
modalWidth:800,
|
||||
modaltoggleFlag:true,
|
||||
```
|
||||
|
||||
# <a-select/> 下拉选项滚动错位的解决方法
|
||||
|
||||
## 问题描述
|
||||
|
||||
当使用了 `a-modal` 或其他带有滚动条的组件时，使用`a-select`组件并打开下拉框时滚动滚动条，就会导致错位的问题产生。
|
||||
|
||||
## 解决方法
|
||||
|
||||
大多数情况下，在 `a-select` 上添加一个 `getPopupContainer` 属性，值为`node => node.parentNode`即可解决。
|
||||
但是如果遇到 `a-select` 标签层级过深的情况，可能仍然会显示异常，只需要多加几个`.parentNode` （例：node => node.parentNode.parentNode.parentNode）多尝试几次直到解决问题即可。
|
||||
|
||||
### 代码示例
|
||||
|
||||
```html
|
||||
<a-select
|
||||
placeholder="请选择展示模板"
|
||||
:options="dicts.displayTemplate"
|
||||
:getPopupContainer="node => node.parentNode"
|
||||
/>
|
||||
```
|
||||
|
||||
# JAsyncTreeList 异步数列表组件使用说明
|
||||
|
||||
## 引入组件
|
||||
|
||||
```js
|
||||
import JTreeTable from '@/components/jeecg/JTreeTable'
|
||||
export default {
|
||||
components: { JTreeTable }
|
||||
}
|
||||
```
|
||||
|
||||
## 所需参数
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|-------------|--------|--------|--------------------------------------------------------------|
|
||||
| rowKey | String | 非必填 | 表格行 key 的取值，默认为"id" |
|
||||
| columns | Array | 必填 | 表格列的配置描述，具体见Antd官方文档 |
|
||||
| url | String | 必填 | 数据查询url |
|
||||
| childrenUrl | String | 非必填 | 查询子级时的url，若不填则使用url参数查询子级 |
|
||||
| queryKey | String | 非必填 | 根据某个字段查询，如果传递 id 就根据 id 查询，默认为parentId |
|
||||
| queryParams | Object | 非必填 | 查询参数，当查询参数改变的时候会自动重新查询，默认为{} |
|
||||
| topValue | String | 非必填 | 查询顶级时的值，如果顶级为0，则传0，默认为null |
|
||||
| tableProps | Object | 非必填 | 自定义给内部table绑定的props |
|
||||
|
||||
## 代码示例
|
||||
|
||||
```html
|
||||
<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: 'AsyncTreeTable',
|
||||
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>
|
||||
```
|
||||
|
||||
# JCheckbox 使用文档
|
||||
|
||||
###### 说明: antd-vue checkbox组件处理的是数组，用起来不是很方便，特二次封装，使用时只需处理字符串即可
|
||||
## 参数配置
|
||||
| 参数 | 类型 | 必填 |说明|
|
||||
|--------------|---------|----|---------|
|
||||
| options |array |✔| checkbox需要配置的项，是个数组，数组中每个对象包含两个属性:label(用于显示)和value(用于存储) |
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
<template>
|
||||
<a-form :form="form">
|
||||
<a-form-item label="v-model式用法">
|
||||
<j-checkbox v-model="sport" :options="sportOptions"></j-checkbox><span>{{ sport }}</span>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="v-decorator式用法">
|
||||
<j-checkbox v-decorator="['sport']" :options="sportOptions"></j-checkbox><span>{{ getFormFieldValue('sport') }}</span>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JCheckbox from '@/components/jeecg/JCheckbox'
|
||||
export default {
|
||||
components: {JCheckbox},
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
sport:'',
|
||||
sportOptions:[
|
||||
{
|
||||
label:"足球",
|
||||
value:"1"
|
||||
},{
|
||||
label:"篮球",
|
||||
value:"2"
|
||||
},{
|
||||
label:"乒乓球",
|
||||
value:"3"
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFormFieldValue(field){
|
||||
return this.form.getFieldValue(field)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
# JCodeEditor 使用文档
|
||||
|
||||
###### 说明: 一个简易版的代码编辑器，支持语法高亮
|
||||
## 参数配置
|
||||
| 参数 | 类型 | 必填 |说明|
|
||||
|--------------|---------|----|---------|
|
||||
| language |string | | 表示当前编写代码的类型 javascript/html/css/sql |
|
||||
| placeholder |string | | placeholder |
|
||||
| lineNumbers |Boolean | | 是否显示行号 |
|
||||
| fullScreen |Boolean | | 是否显示全屏按钮 |
|
||||
| zIndex |string | | 全屏以后的z-index |
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<j-code-editor
|
||||
language="javascript"
|
||||
v-model="editorValue"
|
||||
:fullScreen="true"
|
||||
style="min-height: 100px"/>
|
||||
{{ editorValue }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JCodeEditor from '@/components/jeecg/JCodeEditor'
|
||||
export default {
|
||||
components: {JCodeEditor},
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
editorValue:'',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
# JFormContainer 使用文档
|
||||
|
||||
###### 说明: 暂用于表单禁用
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
<!-- 在form下直接写这个组件，设置disabled为true就能将此form中的控件禁用 -->
|
||||
<a-form layout="inline" :form="form" >
|
||||
<j-form-container disabled>
|
||||
<!-- 表单内容省略..... -->
|
||||
</j-form-container>
|
||||
</a-form>
|
||||
```
|
||||
|
||||
# JImportModal 使用文档
|
||||
|
||||
###### 说明: 用于列表页面导入excel功能
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
|
||||
<template>
|
||||
<!-- 此处省略部分代码...... -->
|
||||
<a-button @click="handleImportXls" type="primary" icon="upload">导入</a-button>
|
||||
<!-- 此处省略部分代码...... -->
|
||||
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
|
||||
<!-- 此处省略部分代码...... -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JCodeEditor from '@/components/jeecg/JCodeEditor'
|
||||
export default {
|
||||
components: {JCodeEditor},
|
||||
data() {
|
||||
return {
|
||||
//省略代码......
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//省略部分代码......
|
||||
handleImportXls(){
|
||||
this.$refs.importModal.show()
|
||||
},
|
||||
getImportUrl(){
|
||||
return '你自己处理上传业务的后台地址'
|
||||
},
|
||||
importOk(){
|
||||
this.loadData(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
# JSelectMultiple 多选下拉组件
|
||||
online用 实际开发请使用components/dict/JMultiSelectTag
|
||||
|
||||
# JSlider 滑块验证码
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
<template>
|
||||
<div style="width: 300px">
|
||||
<j-slider @onSuccess="sliderSuccess"></j-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSlider from '@/components/jeecg/JSlider'
|
||||
export default {
|
||||
components: {JSlider},
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
editorValue:'',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sliderSuccess(){
|
||||
console.log("验证完成")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
# JTreeSelect 树形下拉组件
|
||||
异步加载的树形下拉组件
|
||||
|
||||
## 参数配置
|
||||
| 参数 | 类型 | 必填 |说明|
|
||||
|--------------|---------|----|---------|
|
||||
| placeholder |string | | placeholder |
|
||||
| dict |string | ✔| 表名,显示字段名,存储字段名拼接的字符串 |
|
||||
| pidField |string | ✔| 父ID的字段名 |
|
||||
| pidValue |string | | 根节点父ID的值 默认'0' 不可以设置为空,如果想使用此组件，而数据库根节点父ID为空，请修改之 |
|
||||
|
||||
使用示例
|
||||
----
|
||||
```vue
|
||||
<template>
|
||||
<a-form>
|
||||
<a-form-item label="树形下拉测试" style="width: 300px">
|
||||
<j-tree-select
|
||||
v-model="departId"
|
||||
placeholder="请选择部门"
|
||||
dict="sys_depart,depart_name,id"
|
||||
pidField="parent_id">
|
||||
</j-tree-select>
|
||||
{{ departId }}
|
||||
</a-form-item>
|
||||
</a-form >
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTreeSelect from '@/components/jeecg/JTreeSelect'
|
||||
export default {
|
||||
components: {JTreeSelect},
|
||||
data() {
|
||||
return {
|
||||
departId:""
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@ -0,0 +1,507 @@
|
||||
# JEditableTable 帮助文档
|
||||
|
||||
## 参数配置
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|--------------|---------|------|----------------------------------------------------------------|
|
||||
| columns | array | ✔️ | 表格列的配置描述，具体项见下表 |
|
||||
| dataSource | array | ✔️ | 表格数据 |
|
||||
| loading | boolean | | 是否正在加载，加载中不会显示任何行，默认false |
|
||||
| actionButton | boolean | | 是否显示操作按钮，包括"新增"、"删除"，默认false |
|
||||
| rowNumber | boolean | | 是否显示行号，默认false |
|
||||
| rowSelection | boolean | | 是否可选择行，默认false |
|
||||
| maxHeight | number | | 设定最大高度(px)，默认400 |
|
||||
| disabledRows | object | | 设定禁用的行，被禁用的行无法被选择和编辑，配置方法可以查看示例 |
|
||||
| disabled | boolean | | 是否禁用所有行，默认false |
|
||||
|
||||
### columns 参数详解
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|---------------|--------|------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| title | string | ✔️ | 表格列头显示的问题 |
|
||||
| key | string | ✔️ | 列数据在数据项中对应的 key，必须是唯一的 |
|
||||
| type | string | ✔️ | 表单的类型，可以通过`JEditableTableUtil.FormTypes`赋值 |
|
||||
| width | string | | 列的宽度，可以是百分比，也可以是`px`或其他单位，建议设置为百分比，且每一列的宽度加起来不应超过100%，否则可能会不能达到预期的效果。留空会自动计算百分比 |
|
||||
| placeholder | string | | 表单预期值的提示信息，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`） |
|
||||
| defaultValue | string | | 默认值，在新增一行时生效 |
|
||||
| validateRules | array | | 表单验证规则，配置方式见[validateRules 配置规则](#validaterules-配置规则) |
|
||||
| props | object | | 设置添加给表单元素的自定义属性，例如:`props:{title: 'show title'}` |
|
||||
|
||||
#### 当 type=checkbox 时所需的参数
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|----------------|---------|------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| defaultChecked | boolean | | 默认值是否选中 |
|
||||
| customValue | array | | 自定义值，checkbox需要的是boolean值，如果数据是其他值（例如`'Y' or 'N'`）时，就会导致错误，所以提供了该属性进行转换，例：`customValue: ['Y','N']`，会将`true`转换为`'Y'`，`false`转换为`'N'`，反之亦然 |
|
||||
|
||||
#### 当 type=select 时所需的参数
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|------------|---------|------|--------------------------------------|
|
||||
| options | array | ✔️ | 下拉选项列表，详见下表 |
|
||||
| allowInput | boolean | | 是否允许用户输入内容，并创建新的内容 |
|
||||
|
||||
##### options 所需参数
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|-----------|------------|------|----------------------------------------------------------------------|
|
||||
| text | string | ✔️ | 显示标题 |
|
||||
| value | string | ✔️ | 真实值 |
|
||||
| ~~title~~ | ~~string~~ | | ~~显示标题（已废弃，若同时填写了 title 和 text 那么优先使用 text）~~ |
|
||||
|
||||
#### 当 type=upload 时所需的参数
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|--------------|---------|------|--------------------------------------------------------------------------------------|
|
||||
| action | string | ✔️ | 上传文件路径 |
|
||||
| token | boolean | | 上传的时候是否传递token |
|
||||
| responseName | string | ✔️ | 若要从上传成功后从response中取出返回的文件名，那么这里填后台返回的包含文件名的字段名 |
|
||||
|
||||
#### 当 type=slot 时所需的参数
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|----------|--------|------|------------|
|
||||
| slotName | string | ✔️ | slot的名称 |
|
||||
|
||||
### validateRules 配置规则
|
||||
|
||||
`validateRules` 需要的是一个数组，数组里每项都是一个规则，规则是object类型，规则的各个参数如下
|
||||
|
||||
- `required` 是否必填，可选值为`true`or`false`
|
||||
- `pattern` 正则表达式验证，只有成功匹配该正则的值才能成功通过验证
|
||||
- `message` 当验证未通过时显示的提示文本，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`）
|
||||
- 配置示例请看[示例二](#示例二)
|
||||
|
||||
## 事件
|
||||
|
||||
| 事件名 | 触发时机 | 参数 |
|
||||
|-----------------|----------------------------------------------------|-------------------------------|
|
||||
| added | 当添加行操作完成后触发 | |
|
||||
| deleted | 当删除行操作完成后触发（批量删除操作只会触发一次） | `deleteIds` 被逻辑删除的id |
|
||||
| selectRowChange | 当行被选中或取消选中时触发 | `selectedRowIds` 被选中行的id |
|
||||
|
||||
## 方法
|
||||
|
||||
关于方法的如何调用的问题，请在**FAQ**中查看[方法如何调用](#方法如何调用)
|
||||
|
||||
### initialize
|
||||
|
||||
用于初始化表格（清空表格）
|
||||
|
||||
- `参数:` 无
|
||||
- `返回值:` 无
|
||||
|
||||
### resetScrollTop
|
||||
|
||||
重置滚动条Top位置
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|--------|------|--------------------------------------------------------------------------------------------------------|
|
||||
| top | number | | 新top位置，留空则滚动到上次记录的位置，用于解决切换tab选项卡时导致白屏以及自动将滚动条滚动到顶部的问题 |
|
||||
|
||||
- `返回值:` 无
|
||||
|
||||
### add
|
||||
|
||||
主动添加行，默认情况下，当用户的滚动条已经在底部的时候，会将滚动条固定在底部，即添加后无需用户手动滚动，而会自动滚动到底部
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|---------------------|---------|------|---------------------------------------------------------------------|
|
||||
| num | number | | 添加几行，默认为1 |
|
||||
| forceScrollToBottom | boolean | | 是否在添加后无论用户的滚动条在什么位置都强制滚动到底部，默认为false |
|
||||
|
||||
- `返回值:` 无
|
||||
|
||||
### removeRows
|
||||
|
||||
主动删除一行或多行
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|-----------------|------|--------------------------------------------------------------------------------------------|
|
||||
| id | string 或 array | ✔️ | 被删除行的id。如果要删除一个，可以直接传id，如果要删除多个，需要将多个id封装成一个数组传入 |
|
||||
|
||||
- `返回值:` 无
|
||||
|
||||
### removeSelectedRows
|
||||
|
||||
主动删除被选中的行
|
||||
|
||||
- `参数:` 无
|
||||
- `返回值:` 无
|
||||
|
||||
### getValues
|
||||
|
||||
用于获取表格里所有表单的值，可进行表单验证
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|----------|----------|------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| callback | function | ✔️ | 获取值的回调方法，会传入`error`和`values`两个参数。`error`：未通过验证的数量，当等于`0`时代表验证通过；`values`：获取的值（即使未通过验证该字段也有数据） |
|
||||
| validate | boolean | | 是否进行表单验证，默认为`true`，设为`false`则代表忽略表单验证 |
|
||||
| rowIds | array | | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 |
|
||||
|
||||
- `返回值:` 无
|
||||
|
||||
|
||||
### getValuesSync
|
||||
|
||||
`getValues`的同步版，会直接将获取到的数据返回
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|---------|--------|------|------------------------|
|
||||
| options | object | | 选项，详见下方所需参数 |
|
||||
|
||||
- - `options` 所需参数
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|----------|---------|------|----------------------------------------------------------------------------------------------------------------------|
|
||||
| validate | boolean | | 是否进行表单验证，默认为`true`，设为`false`则代表忽略表单验证 |
|
||||
| rowIds | array | | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 |
|
||||
|
||||
- `返回值:` object
|
||||
- `error` 未通过验证的数量，当等于`0`时代表验证通过
|
||||
- `values` 获取的值（即使未通过验证该字段也有数据）
|
||||
|
||||
- `使用示例`
|
||||
|
||||
```js
|
||||
let { error, values } = this.$refs.editableTable.getValuesSync({ validate: true, rowIds: ['rowId1', 'rowId2'] })
|
||||
if (error === 0) {
|
||||
console.log('表单验证通过，数据：', values);
|
||||
} else {
|
||||
console.log('未通过表单验证，数据：', values);
|
||||
}
|
||||
```
|
||||
|
||||
### getValuesPromise
|
||||
|
||||
`getValues`的promise版，会在`resolve`中传入获取到的值，会在`reject`中传入失败原因，例如`VALIDATE_NO_PASSED`
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|----------|---------|------|----------------------------------------------------------------------------------------------------------------------|
|
||||
| validate | boolean | | 同`getValues`的`validate`参数 |
|
||||
| rowIds | array | | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 |
|
||||
|
||||
- `返回值:` Promise
|
||||
|
||||
### getDeleteIds
|
||||
|
||||
用于获取被逻辑删除的行的id，返回一个数组，用户可将该数组传入后台，并进行批量删除
|
||||
|
||||
- `参数:` 无
|
||||
- `返回值:` array
|
||||
|
||||
### getAll
|
||||
|
||||
获取所有的数据，包括values、deleteIds
|
||||
会在`resolve`中传入获取到的值：`{values, deleteIds}`
|
||||
会在`reject`中传入失败原因，例如`VALIDATE_NO_PASSED`
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|----------|---------|------|-------------------------------|
|
||||
| validate | boolean | | 同`getValues`的`validate`参数 |
|
||||
|
||||
- `返回值:` Promise
|
||||
|
||||
### setValues
|
||||
|
||||
主动设置表格中某行某列的值
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|-------|------|------------------------------------------------------------|
|
||||
| values | array | | 传入一个数组，数组中的每项都是一行的新值，具体见下面的示例 |
|
||||
|
||||
- `返回值:` 无
|
||||
- `示例：`
|
||||
|
||||
```js
|
||||
setValues([
|
||||
{
|
||||
rowKey: id1, // 行的id
|
||||
values: { // 在这里 values 中的 name 是你 columns 中配置的 key
|
||||
'name': 'zhangsan',
|
||||
'age': '20'
|
||||
}
|
||||
},
|
||||
{
|
||||
rowKey: id2,
|
||||
values: {
|
||||
'name': 'lisi',
|
||||
'age': '23'
|
||||
}
|
||||
}
|
||||
])
|
||||
```
|
||||
|
||||
## ${...} 变量使用方式
|
||||
|
||||
在`placeholder`和`message`这两个属性中可以使用`${...}`变量来替换文本
|
||||
在[示例二](#示例二)中，配置了`title`为`名称`的一列，而`placeholder`配置成了`请输入${title}`，那么最终显示效果为`请输入名称`
|
||||
这就是`${...}`变量的使用方式，在`${}`中可以使用的变量有`title`、`key`、`defaultValue`这三个属性的值
|
||||
|
||||
## JEditableTableUtil 使用说明
|
||||
|
||||
在之前配置`columns`时提到过`JEditableTableUtil`这个工具类，那么如果想要知道详细的使用说明就请看这里
|
||||
|
||||
### export 的常量
|
||||
|
||||
#### FormTypes
|
||||
|
||||
这是配置`columns.type`时用到的常量值，其中包括
|
||||
|
||||
- `normal` 默认，直接显示值，不渲染表单
|
||||
- `input` 显示输入框
|
||||
- `inputNumber` 显示数字输入框
|
||||
- `checkbox` 显示多选框
|
||||
- `select` 显示选择器（下拉框）
|
||||
- `date` 日期选择器
|
||||
- `datetime` 日期时间选择器
|
||||
- `upload` 上传组件（文件域）
|
||||
- `slot` 自定义插槽
|
||||
|
||||
### VALIDATE_NO_PASSED
|
||||
|
||||
在判断表单验证是否通过时使用，如果 reject 的值 === VALIDATE_NO_PASSED 则代表表单验证未通过，你可以做相应的其他处理，反之则可能是发生了报错，可以使用 `console.error` 输出
|
||||
|
||||
### 封装的方法
|
||||
|
||||
#### validateTables
|
||||
|
||||
当你的页面中存在多个JEditableTable实例的时候，如果要获取每个实例的值、判断表单验证是否通过，就会让代码变得极其冗余、繁琐，于是我们就将该操作封装成了一个函数供你调用，它可以同时获取并验证多个JEditableTable实例的值，只有当所有实例的表单验证都通过后才会返回值，否则将会告诉你具体哪个实例没有通过验证。具体使用方法请看下面的示例
|
||||
|
||||
- `参数:`
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|-------|------|--------------------------------------------------------|
|
||||
| cases | array | | 传入一个数组，数组中的每项都是一个JEditableTable的实例 |
|
||||
|
||||
- `返回值:` Promise
|
||||
- `示例：`
|
||||
|
||||
```js
|
||||
import { validateTables, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
|
||||
// 封装cases
|
||||
let cases = []
|
||||
cases.push(this.$refs.editableTable1)
|
||||
cases.push(this.$refs.editableTable2)
|
||||
cases.push(this.$refs.editableTable3)
|
||||
cases.push(this.$refs.editableTable4)
|
||||
cases.push(this.$refs.editableTable5)
|
||||
// 同时验证并获取多个实例的值
|
||||
validateTables(cases).then((all) => {
|
||||
// all 是一个数组，每项都对应传入cases的下标，包含values和deleteIds
|
||||
console.log('所有实例的值：', all)
|
||||
}).catch((e = {}) => {
|
||||
// 判断表单验证是否未通过
|
||||
if (e.error === VALIDATE_NO_PASSED) {
|
||||
console.log('未通过验证的实例下标:', e.index)
|
||||
} else {
|
||||
console.error('发生异常:', e)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## FAQ
|
||||
|
||||
### 方法如何调用？
|
||||
|
||||
在[示例一](#示例一)中，设定了一个 `ref="editableTable"` 的属性，那么在vue中就可以使用`this.$refs.editableTable`获取到该表格的实例，并调取其中的方法。
|
||||
假如我要调取`initialize`方法，就可以这么写：`this.$refs.editableTable.initialize()`
|
||||
|
||||
### 如何获取表单的值？
|
||||
|
||||
使用`getValue`方法进行获取，详见[示例三](#示例三)
|
||||
|
||||
### 如何进行表单验证？
|
||||
|
||||
在获取值的时候默认会进行表单验证操作，用户在输入的时候也会对正在输入的表单进行验证，只要配置好规则就可以了
|
||||
|
||||
### 如何添加或删除一行？
|
||||
|
||||
该功能已封装到组件中，你只需要将 `actionButton` 设置为 `true` 即可，当然你也可以在代码中主动调用新增方法或修改，具体见上方的方法介绍。
|
||||
|
||||
### 为什么使用了ATab组件后，切换选项卡会导致白屏或滚动条位置会归零？
|
||||
|
||||
在ATab组件中确实会导致滚动条位置归零，且不会触发`onscroll`方法，所以无法动态加载行，导致白屏的问题出现。
|
||||
解决方法是在ATab组件的`onChange`事件触发时执行实例提供的`resetScrollTop()`方法即可，但是需要注意的是：代码主动改变ATab的`activeKey`不会触发`onChange`事件，还需要你手动调用下。
|
||||
|
||||
- `示例`
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-tabs @change="handleChangeTab">
|
||||
<a-tab-pane tab="表格1" :forceRender="true" key="1">
|
||||
<j-editable-table
|
||||
ref="editableTable1"
|
||||
:loading="tab1.loading"
|
||||
:columns="tab1.columns"
|
||||
:dataSource="tab1.dataSource"/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="表格2" :forceRender="true" key="2">
|
||||
<j-editable-table
|
||||
ref="editableTable2"
|
||||
:loading="tab2.loading"
|
||||
:columns="tab2.columns"
|
||||
:dataSource="tab2.dataSource"/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
```
|
||||
|
||||
```js
|
||||
/*--- 忽略部分代码片段 ---*/
|
||||
methods: {
|
||||
|
||||
/** 切换tab选项卡的时候重置editableTable的滚动条状态 */
|
||||
handleChangeTab(key) {
|
||||
this.$refs[`editableTable${key}`].resetScrollTop()
|
||||
}
|
||||
|
||||
}
|
||||
/*--- 忽略部分代码片段 ---*/
|
||||
```
|
||||
|
||||
### slot(自定义插槽)如何使用？
|
||||
|
||||
代码示例请看：[示例四(slot)](#示例四(slot))
|
||||
|
||||
----------------------------------------------------------------------------------------
|
||||
|
||||
## 示例一
|
||||
|
||||
```html
|
||||
<j-editable-table
|
||||
ref="editableTable"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:actionButton="true"
|
||||
style="margin-top: 8px;"
|
||||
@selectRowChange="handleSelectRowChange"/>
|
||||
```
|
||||
|
||||
## 示例二
|
||||
|
||||
```js
|
||||
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
|
||||
/*--- 忽略部分代码片断 ---*/
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
type: FormTypes.input,
|
||||
placeholder: '请输入${title}',
|
||||
defaultValue: '称名',
|
||||
// 表单验证规则
|
||||
validateRules: [
|
||||
{
|
||||
required: true, // 必填
|
||||
message: '${title}不能为空' // 提示的文本
|
||||
},
|
||||
{
|
||||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
|
||||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
type: FormTypes.inputNumber,
|
||||
placeholder: '请输入${title}',
|
||||
defaultValue: 18,
|
||||
validateRules: [{required: true, message: '${title}不能为空'}]
|
||||
}
|
||||
]
|
||||
/*--- 忽略部分代码片断 ---*/
|
||||
```
|
||||
|
||||
## 示例三
|
||||
|
||||
```js
|
||||
// 获取被逻辑删除的字段id
|
||||
let deleteIds = this.$refs.editableTable.getDeleteIds();
|
||||
// 获取所有表单的值，并进行验证
|
||||
this.$refs.editableTable.getValues((error, values) => {
|
||||
// 错误数 = 0 则代表验证通过
|
||||
if (error === 0) {
|
||||
this.$message.success('验证通过')
|
||||
// 将通过后的数组提交到后台或自行进行其他处理
|
||||
console.log(deleteIds, values)
|
||||
} else {
|
||||
this.$message.error('验证未通过')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 示例四(slot)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<j-editable-table :columns="columns" :dataSource="dataSource">
|
||||
<!-- 定义插槽 -->
|
||||
<!-- 这种定义插槽的写法是vue推荐的新版写法（https://cn.vuejs.org/v2/guide/components-slots.html#具名插槽），旧版已被废弃的写法不再支持 -->
|
||||
<!-- 若webstorm这样写报错，请看这篇文章：https://blog.csdn.net/lxq_9532/article/details/81870651 -->
|
||||
<template v-slot:action="props">
|
||||
<a @click="handleDelete(props)">删除</a>
|
||||
</template>
|
||||
</j-editable-table>
|
||||
</template>
|
||||
<script>
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jeecg/JEditableTable'
|
||||
export default {
|
||||
components: { JEditableTable },
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
// ...
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: '8%',
|
||||
type: FormTypes.slot, // 定义该列为 自定义插值列
|
||||
slotName: 'action' // slot 的名称，对应 v-slot 冒号后面和等号前面的内容
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* a 标签的点击事件，删除当前选中的行 */
|
||||
handleDelete(props) {
|
||||
// 参数解释
|
||||
// props.text ：当前值，可能是defaultValue定义的值，也可能是从dataSource中取出的值
|
||||
// props.rowId ：当前选中行的id，如果是新增行则是临时id
|
||||
// props.column ：当前操作的列
|
||||
// props.getValue ：这是一个function，执行后可以获取当前行的所有值（禁止在template中使用）
|
||||
// 例：const value = props.getValue()
|
||||
// props.target ：触发当前事件的实例，可直接调用该实例内的方法（禁止在template中使用）
|
||||
// 例：target.add()
|
||||
|
||||
// 使用实例：删除当前操作的行
|
||||
let { rowId, target } = props
|
||||
target.removeRows(rowId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
5
ant-design-vue-jeecg/src/components/jeecg/index.js
Normal file
5
ant-design-vue-jeecg/src/components/jeecg/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import T from './JFormContainer.vue'
|
||||
let install = function (Vue) {
|
||||
Vue.component('JFormContainer',T);
|
||||
}
|
||||
export default { install };
|
||||
Reference in New Issue
Block a user