mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-06 18:45:42 +08:00
jeecg-boot 2.0 模块开发版本发布
This commit is contained in:
zhangdaihao
119
ant-design-jeecg-vue/src/views/jeecg/ImagPreview.vue
Normal file
119
ant-design-jeecg-vue/src/views/jeecg/ImagPreview.vue
Normal file
@ -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>
|
||||
75
ant-design-jeecg-vue/src/views/jeecg/ImgDragSort.vue
Normal file
75
ant-design-jeecg-vue/src/views/jeecg/ImgDragSort.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<draggable @end="end" :options="{animation: 300}" v-model="dataSource" style="display: inline-block">
|
||||
<template v-for="(data,index) in dataSource">
|
||||
<div style="float: left;width:150px;height:150px;margin-right: 10px;margin: 0 8px 8px 0;" :key="index">
|
||||
<div style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="data.filePath" preview="index">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-button @click="sureChange" type="primary" style="margin-top: 115px">确定</a-button>
|
||||
</draggable>
|
||||
<br/>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<p>拖拽前json数据：</p>
|
||||
<textarea rows="25" style="width: 780px">{{ oldDateSource }}</textarea>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<p>拖拽后json数据：</p>
|
||||
<textarea rows="25" style="width: 780px">{{ newDateSource }}</textarea>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
|
||||
export default {
|
||||
name: 'ImgDragSort',
|
||||
components:{
|
||||
ACol,
|
||||
ARow,
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '图片拖拽排序',
|
||||
spinning: false,
|
||||
//数据集
|
||||
dataSource: [
|
||||
{id:'000',sort: 0,filePath: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg'},
|
||||
{id:'111',sort: 1,filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg'},
|
||||
{id:'222',sort: 2,filePath: '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'},
|
||||
{id:'333',sort: 3,filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=889120611,3801177793&fm=27&gp=0.jpg'},
|
||||
{id:'444',sort: 4,filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2445468140,2491956848&fm=27&gp=0.jpg'}
|
||||
],
|
||||
oldDateSource:[],
|
||||
newDateSource:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.oldDateSource = this.dataSource;
|
||||
},
|
||||
methods:{
|
||||
end: function (evt) {
|
||||
console.log("拖动前的位置"+evt.oldIndex);
|
||||
console.log("拖动后的位置"+evt.newIndex);
|
||||
},
|
||||
sureChange(){
|
||||
for(var i=0;i<this.dataSource.length;i++){
|
||||
this.dataSource[i].sort = i;
|
||||
}
|
||||
this.newDateSource = this.dataSource;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
147
ant-design-jeecg-vue/src/views/jeecg/ImgTurnPage.vue
Normal file
147
ant-design-jeecg-vue/src/views/jeecg/ImgTurnPage.vue
Normal file
@ -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>
|
||||
@ -61,8 +61,8 @@
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="plus" @click="jump">创建单据</a-button>
|
||||
<a-button type="primary" icon="plus" @click="onetomany">一对多</a-button>
|
||||
<a-button type="primary" icon="download" @click="exportXls">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('demo')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
@ -231,28 +231,12 @@
|
||||
list: "/test/jeecgDemo/list",
|
||||
delete: "/test/jeecgDemo/delete",
|
||||
deleteBatch: "/test/jeecgDemo/deleteBatch",
|
||||
exportXlsUrl: "/test/jeecgDemo/exportXls"
|
||||
},
|
||||
fieldList:superQueryFieldList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportXls(){
|
||||
let paramsStr = encodeURI(JSON.stringify(this.getQueryParams()));
|
||||
console.log('paramsStr: ' + paramsStr)
|
||||
let url = `${window._CONFIG['domianURL']}/test/jeecgDemo/exportXls?paramsStr=${paramsStr}`;
|
||||
window.location.href = url;
|
||||
},
|
||||
handleImportExcel(info){
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
this.$message.success(`${info.file.name} 文件上传成功`);
|
||||
this.loadData();
|
||||
} else if (info.file.status === 'error') {
|
||||
this.$message.error(`${info.file.name} 文件上传失败.`);
|
||||
}
|
||||
},
|
||||
initDictConfig() {
|
||||
console.log("--我才是真的方法!--")
|
||||
//初始化字典 - 性别
|
||||
|
||||
@ -23,18 +23,23 @@
|
||||
:rowSelection="true"
|
||||
:actionButton="true"
|
||||
style="margin-top: 8px;"
|
||||
@selectRowChange="handleSelectRowChange"/>
|
||||
@selectRowChange="handleSelectRowChange">
|
||||
|
||||
<template v-slot:action="props">
|
||||
<a @click="handleDelete(props)">{{ props.text }}</a>
|
||||
</template>
|
||||
|
||||
</j-editable-table>
|
||||
|
||||
</a-card>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import moment from 'moment'
|
||||
import JEditableTable from '@/components/jeecg/JEditableTable'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import { randomUUID, randomString, randomNumber } from '@/utils/util'
|
||||
import { randomUUID, randomNumber } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'JeecgEditableTableExample',
|
||||
@ -48,7 +53,8 @@
|
||||
{
|
||||
title: '字段名称',
|
||||
key: 'dbFieldName',
|
||||
width: '19%',
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
@ -64,18 +70,21 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '字段备注',
|
||||
key: 'dbFieldTxt',
|
||||
width: '19%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '请输入${title}' }]
|
||||
title: '文件域',
|
||||
key: 'upload',
|
||||
type: FormTypes.upload,
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
placeholder: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG['domianURL'] + '/sys/common/upload'
|
||||
},
|
||||
{
|
||||
title: '字段类型',
|
||||
key: 'dbFieldType',
|
||||
width: '18%',
|
||||
// width: '18%',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: 'String', value: 'string' },
|
||||
@ -86,32 +95,61 @@
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
}, {
|
||||
title: '多选测试',
|
||||
key: 'multipleSelect',
|
||||
// width: '18%',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
props: { 'mode': 'multiple' }, // 支持多选
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
defaultValue: ['int', 'boolean'], // 多个默认项
|
||||
// defaultValue: 'string,double,int', // 也可使用这种方式
|
||||
placeholder: '这里可以多选',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '字段长度',
|
||||
key: 'dbLength',
|
||||
width: '8%',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.inputNumber,
|
||||
defaultValue: 32,
|
||||
placeholder: '${title}',
|
||||
validateRules: [{ required: true, message: '请输入${title}' }]
|
||||
},
|
||||
{
|
||||
title: '默认值',
|
||||
key: 'dbDefaultVal',
|
||||
width: '22%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '请输入${title}' }]
|
||||
title: '日期',
|
||||
key: 'datetime',
|
||||
// width: '22%',
|
||||
width: '320px',
|
||||
type: FormTypes.datetime,
|
||||
defaultValue: '2019-4-30 14:52:22',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '可以为空',
|
||||
key: 'isNull',
|
||||
width: '8%',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.slot,
|
||||
slot: 'action',
|
||||
defaultValue:"删除"
|
||||
}
|
||||
|
||||
],
|
||||
@ -161,26 +199,44 @@
|
||||
randomData(size, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
let randomDatetime = () => {
|
||||
let time = parseInt(randomNumber(1000, 9999999999999))
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
let begin = Date.now()
|
||||
let values = []
|
||||
for (let i = 0; i < size; i++) {
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
dbFieldName: `name_${i + 1}`,
|
||||
dbFieldTxt: randomString(10),
|
||||
// dbFieldTxt: randomString(10),
|
||||
multipleSelect: ['string', ['int', 'double', 'boolean'][randomNumber(0, 2)]],
|
||||
dbFieldType: ['string', 'int', 'double', 'boolean'][randomNumber(0, 3)],
|
||||
dbLength: randomNumber(0, 233),
|
||||
dbDefaultVal: randomString(8),
|
||||
datetime: randomDatetime(),
|
||||
isNull: ['Y', 'N'][randomNumber(0, 1)]
|
||||
})
|
||||
}
|
||||
this.dataSource = values
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
let end = Date.now()
|
||||
let diff = end - begin
|
||||
|
||||
if (loading && diff < size) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, size - diff)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
handleDelete(props) {
|
||||
let { rowId, target } = props
|
||||
target.removeRows(rowId)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="download" @click="exportXls">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('一对多示例')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
|
||||
@ -163,27 +163,11 @@
|
||||
list: "/test/jeecgOrderMain/list",
|
||||
delete: "/test/jeecgOrderMain/delete",
|
||||
deleteBatch: "/test/jeecgOrderMain/deleteBatch",
|
||||
exportXlsUrl: "/test/jeecgOrderMain/exportXls",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportXls(){
|
||||
let paramsStr = encodeURI(JSON.stringify(this.getQueryParams()));
|
||||
console.log('paramsStr: ' + paramsStr)
|
||||
let url = `${window._CONFIG['domianURL']}/test/jeecgOrderMain/exportXls?paramsStr=${paramsStr}`;
|
||||
window.location.href = url;
|
||||
},
|
||||
handleImportExcel(info){
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
this.$message.success(`${info.file.name} 文件上传成功`);
|
||||
this.loadData();
|
||||
} else if (info.file.status === 'error') {
|
||||
this.$message.error(`${info.file.name} 文件上传失败.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
122
ant-design-jeecg-vue/src/views/jeecg/JeecgPdfView.vue
Normal file
122
ant-design-jeecg-vue/src/views/jeecg/JeecgPdfView.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 左侧文件树 -->
|
||||
<a-col :span="4" class="clName">
|
||||
<a-tree
|
||||
:treeData="treeData"
|
||||
:defaultExpandAll="defaultExpandAll"
|
||||
@select="this.onSelect"
|
||||
style="height: 500px;overflow-y: auto;"
|
||||
>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<!-- 中间面板 -->
|
||||
<a-col :span="2"/>
|
||||
<!--右侧缩略图-->
|
||||
<a-col :span="18">
|
||||
<a-spin tip="Loading..." :spinning="spinning">
|
||||
<div v-for="(file, key) in dataSource" :key="key">
|
||||
<a-row>
|
||||
<a-col :span="24"><p><a-divider orientation="left">{{ file.fileName }}</a-divider></p></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="24">
|
||||
<template v-if="file.filePdfPath">
|
||||
<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;" @click="pdfPreview(file.title)">
|
||||
<img style="width: 100%;" src="~@/assets/pdf4.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
(暂无材料，点击右侧"选择文件"或"扫描上传"上传文件)
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-col>
|
||||
<pdf-preview-modal ref="pdfmodal"></pdf-preview-modal >
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getAction } from '@/api/manage'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
import Vue from 'vue'
|
||||
import PdfPreviewModal from './modules/PdfPreviewModal'
|
||||
const mockdata=[{
|
||||
"id": "1",
|
||||
"key": "1",
|
||||
"title": "实例.pdf",
|
||||
"fileCode": "shili",
|
||||
"fileName": "实例",
|
||||
"filePdfPath": "实例"
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: "JeecgPdfView",
|
||||
components:{
|
||||
PdfPreviewModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: 'PDF预览页面',
|
||||
// 文件类型集
|
||||
treeData:[{
|
||||
title: '所有PDF电子档',
|
||||
key: '0-0',
|
||||
children: mockdata }],
|
||||
// 文件数据集
|
||||
dataSource: mockdata,
|
||||
allData:mockdata,
|
||||
// 上传文件集
|
||||
defaultExpandAll: true,
|
||||
// 加载中
|
||||
spinning:false,
|
||||
url: {
|
||||
pdfList: "/api/pdfList",
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//this.loadData();
|
||||
},
|
||||
methods: {
|
||||
loadData (){
|
||||
this.spinning = false;
|
||||
getAction(this.url.pdfList).then((res)=>{
|
||||
if(res.length>0){
|
||||
this.allData = res;
|
||||
this.dataSource = res;
|
||||
this.treeData[0].children = res;
|
||||
}
|
||||
this.spinning = false;
|
||||
})
|
||||
},
|
||||
pdfPreview:function(title){
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
this.$refs.pdfmodal.previewFiles(title,token);
|
||||
},
|
||||
// 选择文件类型
|
||||
onSelect (selectedKeys, info) {
|
||||
this.dataSource = [];
|
||||
if(selectedKeys[0] === undefined || selectedKeys[0] === '0-0'){
|
||||
this.dataSource = this.allData;
|
||||
}else{
|
||||
this.dataSource.push(info.node._props.dataRef);
|
||||
}
|
||||
console.log("SELECT-->dataSource",this.dataSource );
|
||||
},
|
||||
// model回调
|
||||
modalFormOk () {
|
||||
this.loadData();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{width:10px}
|
||||
</style>
|
||||
49
ant-design-jeecg-vue/src/views/jeecg/JeecgTreeTable.vue
Normal file
49
ant-design-jeecg-vue/src/views/jeecg/JeecgTreeTable.vue
Normal file
@ -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>
|
||||
250
ant-design-jeecg-vue/src/views/jeecg/JoaDemoList.vue
Normal file
250
ant-design-jeecg-vue/src/views/jeecg/JoaDemoList.vue
Normal file
@ -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>
|
||||
285
ant-design-jeecg-vue/src/views/jeecg/RowspanTable.vue
Normal file
285
ant-design-jeecg-vue/src/views/jeecg/RowspanTable.vue
Normal file
@ -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>
|
||||
@ -2,7 +2,7 @@
|
||||
<a-card :bordered="false" style="height:100%">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-form layout="inline" :form="form">
|
||||
<!-- 选择多个用户，可排序 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
@ -10,7 +10,7 @@
|
||||
<a-select
|
||||
mode="multiple"
|
||||
placeholder="Please select"
|
||||
:value=nameList
|
||||
:value="nameList"
|
||||
@change="handleChange"
|
||||
>
|
||||
</a-select>
|
||||
@ -41,63 +41,325 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 通过部门筛选，选择人 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="性别">
|
||||
<j-dict-select-tag title="性别" dictCode="sex" disabled/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 部门选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择部门">
|
||||
<j-select-depart v-decorator="['departId']" :trigger-change="true"></j-select-depart>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的部门ID(v-decorator):{{ getDepartIdValue() }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择部门">
|
||||
<j-select-depart v-model="departId"></j-select-depart>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的部门ID(v-model):{{ departId }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 用户选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择用户">
|
||||
<j-select-user-by-dep v-model="userRealName"></j-select-user-by-dep>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的用户(v-model):{{ userRealName }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 用户选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择用户">
|
||||
<j-select-multi-user v-model="multiUser"></j-select-multi-user>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的用户(v-model):{{ multiUser }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JCheckbox -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="多选组合">
|
||||
<j-checkbox
|
||||
v-model="jcheckbox.values"
|
||||
:options="jcheckbox.options"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">多选组合(v-model)：{{ jcheckbox.values }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JCodeEditor -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="代码输入框" style="min-height: 120px">
|
||||
<j-code-editor
|
||||
language="javascript"
|
||||
v-model="jcodedditor.value"
|
||||
:fullScreen="true"
|
||||
style="min-height: 100px"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">代码输入框(v-model)：{{ jcodedditor.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JDate -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="日期选择框">
|
||||
<j-date v-model="jdate.value" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">日期选择框(v-model)：{{ jdate.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JEditor -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="富文本编辑器" style="min-height: 300px">
|
||||
<j-editor v-model="jeditor.value"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">富文本编辑器(v-model)：{{ jeditor.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JEllipsis -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="过长剪切">
|
||||
<j-ellipsis :value="jellipsis.value" :length="30"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">过长剪切：{{ jellipsis.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JGraphicCode -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="验证码">
|
||||
<j-graphic-code @success="generateCode"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">验证码：{{ jgraphicCode.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSlider -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="滑块验证码">
|
||||
<j-slider @onSuccess="handleJSliderSuccess"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">滑块验证码验证通过：{{ jslider.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSelectMultiple -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="多选下拉框">
|
||||
<j-select-multiple v-model="jselectMultiple.value" :options="jselectMultiple.options"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">多选下拉框(v-model)：{{ jselectMultiple.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSelectMultiple -->
|
||||
<a-row :gutter="24">
|
||||
<a-col>
|
||||
|
||||
<a-form-item label="最大化弹窗">
|
||||
<a-button @click="()=>modal.visible=true">最大化弹窗</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<a-modal
|
||||
:visible="modal.visible"
|
||||
:width="modal.width"
|
||||
:style="modal.style"
|
||||
@ok="()=>modal.visible=false"
|
||||
@cancel="()=>modal.visible=false">
|
||||
|
||||
<template slot="title">
|
||||
<div style="width: 100%;height:20px;padding-right:32px;">
|
||||
<div style="float: left;">{{ modal.title }}</div>
|
||||
<div style="float: right;">
|
||||
<a-button
|
||||
icon="fullscreen"
|
||||
style="width:56px;height:100%;border:0"
|
||||
@click="handleClickToggleFullScreen"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-for="(i,k) of 30">
|
||||
<p :key="k">这是主体内容，高度是自适应的</p>
|
||||
</template>
|
||||
|
||||
</a-modal>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 选择多个用户支持排序 -->
|
||||
<select-multiple-user-modal ref="selectDemoModal" @selectFinished="selectOK"></select-multiple-user-modal>
|
||||
<j-select-multiple-user ref="selectDemoModal" @selectFinished="selectOK"></j-select-multiple-user>
|
||||
<!-- 通过部门筛选，选择人 -->
|
||||
<search-user-by-dep-modal ref="SearchUserByDepModal" @ok="onSearchDepUserCallBack"></search-user-by-dep-modal>
|
||||
<j-search-user-by-dep ref="JSearchUserByDep" @ok="onSearchDepUserCallBack"></j-search-user-by-dep>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectMultipleUserModal from '@/components/jeecgbiz/SelectMultipleUserModal'
|
||||
import SearchUserByDepModal from '@/components/jeecgbiz/SearchUserByDepModal'
|
||||
import JSelectMultipleUser from '@/components/jeecgbiz/JSelectMultipleUser'
|
||||
import JSearchUserByDep from '@/components/jeecgbiz/JSearchUserByDep'
|
||||
import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
|
||||
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
|
||||
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
|
||||
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
|
||||
import JCheckbox from '@/components/jeecg/JCheckbox'
|
||||
import JCodeEditor from '@/components/jeecg/JCodeEditor'
|
||||
import JDate from '@/components/jeecg/JDate'
|
||||
import JEditor from '@/components/jeecg/JEditor'
|
||||
import JEllipsis from '@/components/jeecg/JEllipsis'
|
||||
import JGraphicCode from '@/components/jeecg/JGraphicCode'
|
||||
import JSlider from '@/components/jeecg/JSlider'
|
||||
import JSelectMultiple from '@/components/jeecg/JSelectMultiple'
|
||||
|
||||
export default {
|
||||
name: "SelectDemo",
|
||||
name: 'SelectDemo',
|
||||
components: {
|
||||
SelectMultipleUserModal,
|
||||
SearchUserByDepModal
|
||||
JDictSelectTag,
|
||||
JSelectMultipleUser,
|
||||
JSearchUserByDep,
|
||||
JSelectDepart,
|
||||
JSelectUserByDep,
|
||||
JSelectMultiUser,
|
||||
JCheckbox,
|
||||
JCodeEditor,
|
||||
JDate, JEditor, JEllipsis, JGraphicCode, JSlider, JSelectMultiple
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectList: [],
|
||||
selectedDepUsers: ''
|
||||
selectedDepUsers: '',
|
||||
form: this.$form.createForm(this),
|
||||
departId: '4f1765520d6346f9bd9c79e2479e5b12,57197590443c44f083d42ae24ef26a2c',
|
||||
userRealName: '',
|
||||
multiUser: '',
|
||||
jcheckbox: {
|
||||
values: 'spring,jeecgboot',
|
||||
options: [
|
||||
{ label: 'Jeecg', value: 'jeecg' },
|
||||
{ label: 'Jeecg-Boot', value: 'jeecgboot' },
|
||||
{ label: 'Spring', value: 'spring', disabled: true },
|
||||
{ label: 'MyBaits', value: 'mybatis' }
|
||||
]
|
||||
},
|
||||
jcodedditor: {
|
||||
value: `function sayHi(word) {
|
||||
alert(word)
|
||||
}
|
||||
sayHi('hello, world!')`
|
||||
},
|
||||
jdate: {
|
||||
value: '2019-5-10 15:33:06'
|
||||
},
|
||||
jeditor: {
|
||||
value: '<h2 style="text-align: center;">富文本编辑器</h2> <p>这里是富文本编辑器。</p>'
|
||||
},
|
||||
jellipsis: {
|
||||
value: '这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。'
|
||||
},
|
||||
jgraphicCode: {
|
||||
value: ''
|
||||
},
|
||||
jslider: {
|
||||
value: false
|
||||
},
|
||||
jselectMultiple: {
|
||||
options: [
|
||||
{ text: '字符串', value: 'String' },
|
||||
{ text: '整数型', value: 'Integer' },
|
||||
{ text: '浮点型', value: 'Double' },
|
||||
{ text: '布尔型', value: 'Boolean' }
|
||||
],
|
||||
value: 'Integer,Boolean'
|
||||
},
|
||||
modal: {
|
||||
title: '这里是标题',
|
||||
visible: false,
|
||||
width: '100%',
|
||||
style: { top: '20px' },
|
||||
fullScreen: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameList: function () {
|
||||
var names = [];
|
||||
nameList: function() {
|
||||
|
||||
var names = []
|
||||
for (var a = 0; a < this.selectList.length; a++) {
|
||||
names.push(this.selectList[a].name);
|
||||
names.push(this.selectList[a].name)
|
||||
}
|
||||
return names;
|
||||
return names
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
},
|
||||
selectOK: function (data) {
|
||||
this.selectList = data;
|
||||
getDepartIdValue() {
|
||||
return this.form.getFieldValue('departId')
|
||||
},
|
||||
handleSelect: function () {
|
||||
this.$refs.selectDemoModal.add();
|
||||
selectOK: function(data) {
|
||||
this.selectList = data
|
||||
},
|
||||
handleSelect: function() {
|
||||
this.$refs.selectDemoModal.add()
|
||||
},
|
||||
selectReset() {
|
||||
this.selectList = [];
|
||||
this.selectList = []
|
||||
},
|
||||
//通过组织机构筛选选择用户
|
||||
onSearchDepUser() {
|
||||
this.$refs.SearchUserByDepModal.showModal()
|
||||
this.$refs.JSearchUserByDep.showModal()
|
||||
this.selectedDepUsers = ''
|
||||
this.$refs.SearchUserByDepModal.selectedKeys = []
|
||||
this.$refs.SearchUserByDepModal.title = '根据部门查询用户'
|
||||
this.$refs.JSearchUserByDep.title = '根据部门查询用户'
|
||||
},
|
||||
onSearchDepUserCallBack(selectedDepUsers) {
|
||||
this.selectedDepUsers = selectedDepUsers
|
||||
},
|
||||
generateCode(value) {
|
||||
this.jgraphicCode.value = value.toLowerCase()
|
||||
},
|
||||
handleJSliderSuccess(value) {
|
||||
this.jslider.value = value
|
||||
},
|
||||
/** 切换全屏显示 */
|
||||
handleClickToggleFullScreen() {
|
||||
let mode = !this.modal.fullScreen
|
||||
if (mode) {
|
||||
this.modal.width = '100%'
|
||||
this.modal.style.top = '20px'
|
||||
} else {
|
||||
this.modal.width = '1200px'
|
||||
this.modal.style.top = '50px'
|
||||
}
|
||||
this.modal.fullScreen = mode
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
32
ant-design-jeecg-vue/src/views/jeecg/SplitPanel.vue
Normal file
32
ant-design-jeecg-vue/src/views/jeecg/SplitPanel.vue
Normal file
@ -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>
|
||||
@ -237,10 +237,6 @@
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
margin: 12px 16px 0 !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
160
ant-design-jeecg-vue/src/views/jeecg/modules/JoaDemoForm.vue
Normal file
160
ant-design-jeecg-vue/src/views/jeecg/modules/JoaDemoForm.vue
Normal file
@ -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>
|
||||
27
ant-design-jeecg-vue/src/views/jeecg/modules/SplitPanelA.vue
Normal file
27
ant-design-jeecg-vue/src/views/jeecg/modules/SplitPanelA.vue
Normal file
@ -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>
|
||||
27
ant-design-jeecg-vue/src/views/jeecg/modules/SplitPanelB.vue
Normal file
27
ant-design-jeecg-vue/src/views/jeecg/modules/SplitPanelB.vue
Normal file
@ -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>
|
||||
@ -12,7 +12,7 @@
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-form v-if="barType === 'month'" layout="inline" style="margin-top: -4px">
|
||||
<a-form v-if="barType === 'month' && false" layout="inline" style="margin-top: -4px">
|
||||
<a-form-item label="月份区间">
|
||||
<a-range-picker
|
||||
:placeholder="['开始月份', '结束月份']"
|
||||
@ -25,7 +25,7 @@
|
||||
<a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置</a-button>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<bar class="statistic" title="档案统计" :dataSource="countSource"/>
|
||||
<bar class="statistic" title="档案统计" :dataSource="countSource" :height="400"/>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-form v-if="pieType === 'month'" layout="inline" style="margin-top: -4px">
|
||||
<a-form v-if="pieType === 'month' && false" layout="inline" style="margin-top: -4px">
|
||||
<a-row :gutter="24">
|
||||
<a-form-item label="月份区间">
|
||||
<a-range-picker
|
||||
@ -55,7 +55,7 @@
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<pie class="statistic" title="档案统计" :dataSource="countSource"/>
|
||||
<pie class="statistic" title="档案统计" :dataSource="countSource" :height="450"/>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
@ -63,6 +63,10 @@
|
||||
<a-tab-pane tab="Liquid" key="14">
|
||||
<liquid :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- BarAndLine -->
|
||||
<a-tab-pane tab="BarAndLine" key="15">
|
||||
<bar-and-line :height="height"/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
@ -82,13 +86,14 @@
|
||||
import RankList from '@/components/chart/RankList'
|
||||
import TransferBar from '@/components/chart/TransferBar'
|
||||
import Trend from '@/components/chart/Trend'
|
||||
import BarAndLine from '@/components/chart/BarAndLine'
|
||||
|
||||
export default {
|
||||
name: 'ViserChartDemo',
|
||||
components: {
|
||||
Bar, MiniBar, BarMultid, AreaChartTy, LineChartMultid,
|
||||
Pie, Radar, DashChartDemo, MiniProgress, RankList,
|
||||
TransferBar, Trend, Liquid, MiniArea
|
||||
TransferBar, Trend, Liquid, MiniArea, BarAndLine
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user