pengjunjie/JeecgBoot
1
0
Fork 1
mirror of https://github.com/jeecgboot/JeecgBoot.git synced 2026-02-06 02:25:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

JEECG-BOOT 2.0.2版本发布

Browse Source
This commit is contained in:
zhangdaihao
2019-07-05 15:38:38 +08:00
parent 8b08589b78
commit d1253bfeb2
424 changed files with 34593 additions and 20808 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
ant-design-vue-jeecg/src/views/jeecg/ImagPreview.vue Normal file
View 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-vue-jeecg/src/views/jeecg/ImgDragSort.vue Normal file
View 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-vue-jeecg/src/views/jeecg/ImgTurnPage.vue Normal file
View 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>

93
ant-design-vue-jeecg/src/views/jeecg/InterfaceTest.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<a-card :bordered="false">
<a-row>
<a-col :md="2" :sm="4">
<a-select defaultValue="POST" style="width: 90px" @change="handleChange" size="large">
<a-select-option value="POST">POST</a-select-option>
<!--<a-select-option value="GET">GET</a-select-option>-->
</a-select>
</a-col>
<a-col :md="22" :sm="20">
<a-input-search
placeholder="input send url"
v-model="url"
@search="onSearch"
enterButton="Send"
size="large" />
</a-col>
</a-row>
<a-tabs defaultActiveKey="2">
<a-tab-pane tab="params" key="2">
<textarea style="width:100%;font-size: 16px;font-weight:500" :rows="13" @input="changeVal">
</textarea>
</a-tab-pane>
</a-tabs>
<a-tabs defaultActiveKey="1">
<a-tab-pane tab="response" key="1">
<textarea style="width:100%;font-size: 16px;font-weight:500" :rows="10" v-html="resultJson" readonly>
</textarea>
</a-tab-pane>
</a-tabs>
</a-card>
</template>
<script>
import { postAction,getAction } from '@/api/manage'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import Vue from 'vue'
export default {
name: 'FlowTest',
data(){
return {
url:"",
paramJson:"",
resultJson:{},
requestMethod:"POST"
}
},
methods: {
onSearch (value) {
let that = this
this.resultJson = {};
if("POST"===this.requestMethod.toUpperCase()){
postAction(value,this.paramJson).then((res)=>{
console.log(res)
this.resultJson = res
}).catch((err) => {
that.$message.error("请求异常："+err)
})
}else {
getAction(value,this.paramJson).then((res)=>{
console.log(res)
this.resultJson = res;
}).catch((err) => {
that.$message.error("请求异常："+err)
})
}
},
changeVal(e){
try {
let json = e.target.value;
json = json.replace(/\n/g,"");
json = json.replace(/\s*/g,"");
if(json.indexOf(",}")>0){
json = json.replace(",}","}");
}
this.paramJson = JSON.parse(json);
}catch (e) {
console.log(e);
this.$message.error("非法的JSON字符串")
}
},
handleChange(value) {
this.requestMethod = value;
},
created () {
const token = Vue.ls.get(ACCESS_TOKEN);
this.headers = {"X-Access-Token":token}
}
}
}
</script>

382
ant-design-vue-jeecg/src/views/jeecg/JeecgDemoList.vue Normal file
View File

@ -0,0 +1,382 @@
<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">
<a-form-item label="名称">
<a-input placeholder="请输入名称查询" v-model="queryParam.name"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="年龄">
<a-input placeholder="请输入名称查询" v-model="queryParam.age"></a-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8">
<a-form-item label="字典下拉">
<j-dict-select-tag v-model="queryParam.sex" placeholder="请选择用户名称" dictCode="sex"/>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="字典表下拉">
<j-dict-select-tag v-model="queryParam.realname" placeholder="请选择用户" dictCode="sys_user,realname,id"/>
</a-form-item>
</a-col>
</template>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<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-col>
</span>
<a-col :md="6" :sm="24">
<template v-if="superQueryFlag">
<a-tooltip title="已有高级查询条件生效!">
<button :disabled="false" class="ant-btn ant-btn-primary" @click="superQuery">
<a-icon type="appstore" theme="twoTone" spin="true"></a-icon>
<span>高级查询</span>
</button>
</a-tooltip>
</template>
<a-button v-else type="primary" @click="superQuery" icon="filter">高级查询</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator" style="margin-top: 5px">
<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="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">
<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>
<span style="float:right;">
<a @click="loadData()"><a-icon type="sync" />刷新</a>
<a-divider type="vertical" />
<a-popover title="自定义列" trigger="click" placement="leftBottom">
<template slot="content">
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
<a-row>
<template v-for="(item,index) in defColumns">
<template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
<a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
</template>
</template>
</a-row>
</a-checkbox-group>
</template>
<a><a-icon type="setting" />自定义列</a>
</a-popover>
</span>
</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">
<div slot="filterDropdown">
<a-card>
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
<a-row>
<template v-for="(item,index) in defColumns">
<template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
<a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
</template>
</template>
</a-row>
</a-checkbox-group>
</a-card>
</div>
<a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color: '#108ee9' }" />
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<jeecgDemo-modal ref="modalForm" @ok="modalFormOk"></jeecgDemo-modal>
<!-- 一对多表单区域 -->
<JeecgDemoTabsModal ref="jeecgDemoTabsModal" @ok="modalFormOk"></JeecgDemoTabsModal>
<!-- 高级查询区域 -->
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
</a-card>
</template>
<script>
import JeecgDemoModal from './modules/JeecgDemoModal'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
import JeecgDemoTabsModal from './modules/JeecgDemoTabsModal'
import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Vue from 'vue'
//高级查询modal需要参数
const superQueryFieldList=[{
type:"date",
value:"birthday",
text:"生日"
},{
type:"string",
value:"name",
text:"用户名"
},{
type:"int",
value:"age",
text:"年龄"
}]
export default {
name: "JeecgDemoList",
mixins:[JeecgListMixin],
components: {
JeecgDemoModal,
JSuperQuery,
JeecgDemoTabsModal,
},
data() {
return {
description: '用户管理页面',
//字典数组缓存
sexDictOptions: [],
importExcelUrl:`${window._CONFIG['domianURL']}/test/jeecgDemo/importExcel`,
//表头
columns:[],
//列设置
settingColumns:[],
//列定义
defColumns: [
{
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: 'keyWord'
},
{
title: '打卡时间',
align: "center",
dataIndex: 'punchTime'
},
{
title: '性别',
align: "center",
dataIndex: 'sex',
customRender: (text) => {
//字典值替换通用方法
return filterDictText(this.sexDictOptions, text);
}
},
{
title: '年龄',
align: "center",
dataIndex: 'age'
},
{
title: '生日',
align: "center",
dataIndex: 'birthday'
},
{
title: '邮箱',
align: "center",
dataIndex: 'email'
},
{
title: '个人简介',
align: "center",
dataIndex: 'content'
},
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {
filterDropdown: 'filterDropdown',
filterIcon: 'filterIcon',
customRender: 'action'},
}
],
url: {
list: "/test/jeecgDemo/list",
delete: "/test/jeecgDemo/delete",
deleteBatch: "/test/jeecgDemo/deleteBatch",
exportXlsUrl: "/test/jeecgDemo/exportXls"
},
fieldList:superQueryFieldList
}
},
methods: {
initDictConfig() {
console.log("--我才是真的方法!--")
//初始化字典 - 性别
initDictOptions('sex').then((res) => {
if (res.success) {
this.sexDictOptions = res.result;
}
});
},
onetomany: function () {
this.$refs.jeecgDemoTabsModal.add();
this.$refs.jeecgDemoTabsModal.title = "编辑";
},
//跳转单据页面
jump() {
this.$router.push({path: '/jeecg/helloworld'})
},
//列设置更改事件
onColSettingsChange (checkedValues) {
var key = this.$route.name+":colsettings";
Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
this.settingColumns = checkedValues;
const cols = this.defColumns.filter(item => {
if(item.key =='rowIndex'|| item.dataIndex=='action'){
return true
}
if (this.settingColumns.includes(item.dataIndex)) {
return true
}
return false
})
this.columns = cols;
},
initColumns(){
//权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
//this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
var key = this.$route.name+":colsettings";
let colSettings= Vue.ls.get(key);
if(colSettings==null||colSettings==undefined){
let allSettingColumns = [];
this.defColumns.forEach(function (item,i,array ) {
allSettingColumns.push(item.dataIndex);
})
this.settingColumns = allSettingColumns;
this.columns = this.defColumns;
}else{
this.settingColumns = colSettings;
const cols = this.defColumns.filter(item => {
if(item.key =='rowIndex'|| item.dataIndex=='action'){
return true;
}
if (colSettings.includes(item.dataIndex)) {
return true;
}
return false;
})
this.columns = cols;
}
}
},
created() {
this.initColumns();
},
}
</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
}
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
</style>

300
ant-design-vue-jeecg/src/views/jeecg/JeecgEditableTableExample.vue Normal file
View File

@ -0,0 +1,300 @@
<template>
<div>
<a-card :borderd="false">
<a-button @click="handleTableCheck" type="primary">表单验证</a-button>
<span style="padding-left:8px;"></span>
<a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
<a-button @click="handleTableGet" type="primary">获取值</a-button>
</a-tooltip>
<span style="padding-left:8px;"></span>
<a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
<a-button @click="handleTableSet" type="primary">设置值</a-button>
</a-tooltip>
<j-editable-table
ref="editableTable"
:loading="loading"
:columns="columns"
:dataSource="dataSource"
:rowNumber="true"
:rowSelection="true"
:actionButton="true"
style="margin-top: 8px;"
@selectRowChange="handleSelectRowChange">
<template v-slot:action="props">
<a @click="handleDelete(props)">{{ props.text }}</a>
</template>
</j-editable-table>
</a-card>
<br>
<a-card title="只读列表">
<j-editable-table
:columns="columns1"
:dataSource="dataSource1"
:rowNumber="true"
:rowSelection="true"
:maxHeight="200"
:disabled="true"
/>
</a-card>
</div>
</template>
<script>
import moment from 'moment'
import JEditableTable from '@/components/jeecg/JEditableTable'
import { FormTypes } from '@/utils/JEditableTableUtil'
import { randomUUID, randomNumber } from '@/utils/util'
export default {
name: 'JeecgEditableTableExample',
components: {
JEditableTable
},
data() {
return {
loading: false,
columns: [
{
title: '字段名称',
key: 'dbFieldName',
// width: '19%',
width: '300px',
type: FormTypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [
{
required: true, // 必填
message: '请输入${title}' // 显示的文本
},
{
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
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: '300px',
type: FormTypes.select,
options: [ // 下拉选项
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
],
allowInput: true,
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: '100px',
type: FormTypes.inputNumber,
defaultValue: 32,
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: '100px',
type: FormTypes.checkbox,
customValue: ['Y', 'N'], // true ,false
defaultChecked: false
},
{
title: '操作',
key: 'action',
// width: '8%',
width: '100px',
type: FormTypes.slot,
slotName: 'action',
defaultValue: '删除'
}
],
dataSource: [],
selectedRowIds: [],
// table2
columns1: [
{
title: '输入框',
key: 'input',
type: FormTypes.input,
placeholder: '清输入'
},
{
title: '下拉框',
key: 'select',
type: FormTypes.select,
options: [
{ title: 'String', value: 'string' },
{ title: 'Integer', value: 'int' },
{ title: 'Double', value: 'double' },
{ title: 'Boolean', value: 'boolean' }
],
placeholder: '请选择'
},
{
title: '多选框',
key: 'checkbox',
type: FormTypes.checkbox,
customValue: [true, false]
},
{
title: '日期',
key: 'datetime',
type: FormTypes.datetime
}
],
dataSource1: []
}
},
created() {
},
mounted() {
this.randomData(23, false)
this.dataSource1 = [
{ input: 'hello', select: 'int', checkbox: true, datetime: '2019-6-17 14:50:48' },
{ input: 'world', select: 'string', checkbox: false, datetime: '2019-6-16 14:50:48' },
{ input: 'one', select: 'double', checkbox: true, datetime: '2019-6-17 15:50:48' },
{ input: 'two', select: 'boolean', checkbox: false, datetime: '2019-6-14 14:50:48' },
{ input: 'three', select: '', checkbox: false, datetime: '2019-6-13 14:50:48' }
]
},
methods: {
/** 表单验证 */
handleTableCheck() {
this.$refs.editableTable.getValues((error) => {
if (error === 0) {
this.$message.success('验证通过')
} else {
this.$message.error('验证未通过')
}
})
},
/** 获取值，忽略表单验证 */
handleTableGet() {
this.$refs.editableTable.getValues((error, values) => {
console.log('values:', values)
}, false)
console.log('deleteIds:', this.$refs.editableTable.getDeleteIds())
this.$message.info('获取值成功，请看控制台输出')
},
/** 模拟加载1000条数据 */
handleTableSet() {
this.randomData(1000, true)
},
handleSelectRowChange(selectedRowIds) {
this.selectedRowIds = selectedRowIds
},
/* 随机生成数据 */
randomData(size, loading = false) {
if (loading) {
this.loading = true
}
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),
multipleSelect: ['string', ['int', 'double', 'boolean'][randomNumber(0, 2)]],
dbFieldType: ['string', 'int', 'double', 'boolean'][randomNumber(0, 3)],
dbLength: randomNumber(0, 233),
datetime: randomDatetime(),
isNull: ['Y', 'N'][randomNumber(0, 1)]
})
}
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)
}
}
}
</script>
<style scoped>
</style>

192
ant-design-vue-jeecg/src/views/jeecg/JeecgOrderMainList.vue Normal file
View File

@ -0,0 +1,192 @@
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item label="订单号">
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="订单类型">
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24" >
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('一对多示例')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<jeecgOrderMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderMain-modal>
</a-card>
</template>
<script>
import JeecgOrderMainModal from './modules/JeecgOrderMainModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
name: "JeecgOrderMainList",
mixins: [JeecgListMixin],
components: {
JeecgOrderMainModal
},
data () {
return {
description: '订单管理页面',
importExcelUrl:`${window._CONFIG['domianURL']}/test/jeecgOrderMain/importExcel`,
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title: '订单号',
align:"center",
dataIndex: 'orderCode'
},
{
title: '订单类型',
align:"center",
dataIndex: 'ctype',
customRender: (text, record, index) => {
let re = "";
if (text === '1') {
re = "国内订单";
} else if (text === '2') {
re = "国际订单";
}
return re;
}
},
{
title: '订单日期',
align:"center",
dataIndex: 'orderDate'
},
{
title: '订单金额',
align:"center",
dataIndex: 'orderMoney'
},
{
title: '订单备注',
align:"center",
dataIndex: 'content'
},
{
title: '操作',
dataIndex: 'action',
align:"center",
scopedSlots: { customRender: 'action' },
}
],
url: {
list: "/test/jeecgOrderMain/list",
delete: "/test/jeecgOrderMain/delete",
deleteBatch: "/test/jeecgOrderMain/deleteBatch",
exportXlsUrl: "/test/jeecgOrderMain/exportXls",
}
}
},
methods: {
}
}
</script>
<style scoped>
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
.ant-card-body .table-operator{
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td{
padding-top:15px;
padding-bottom:15px;
}
.anty-row-operator button{margin: 0 5px}
.ant-btn-danger{background-color: #ffffff}
.ant-modal-cust-warp{height: 100%}
.ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
.ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
</style>

217
ant-design-vue-jeecg/src/views/jeecg/JeecgOrderMainListForJEditableTable.vue Normal file
View File

@ -0,0 +1,217 @@
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item label="订单号">
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="订单类型">
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>
<span>已选择</span>
<a style="font-weight: 600">
{{ selectedRowKeys.length }}
</a>
<span>项</span>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
<a-menu slot="overlay">
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<jeecg-order-modal-for-j-editable-table ref="modalForm" @ok="modalFormOk"/>
</a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JeecgOrderModalForJEditableTable from './modules/JeecgOrderModalForJEditableTable'
export default {
name: 'JeecgOrderMainListForJEditableTable',
mixins: [JeecgListMixin],
components: {
JeecgOrderModalForJEditableTable
},
data() {
return {
description: '订单管理页面',
// 请求参数
url: {
list: '/test/jeecgOrderMain/list',
delete: '/test/jeecgOrderMain/delete',
deleteBatch: '/test/jeecgOrderMain/deleteBatch'
},
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function(t, r, index) {
return parseInt(index) + 1
}
},
{
title: '订单号',
align: 'center',
dataIndex: 'orderCode'
},
{
title: '订单类型',
align: 'center',
dataIndex: 'ctype',
customRender: (text) => {
let re = ''
if (text === '1') {
re = '国内订单'
} else if (text === '2') {
re = '国际订单'
}
return re
}
},
{
title: '订单日期',
align: 'center',
dataIndex: 'orderDate'
},
{
title: '订单金额',
align: 'center',
dataIndex: 'orderMoney'
},
{
title: '订单备注',
align: 'center',
dataIndex: 'content'
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
}
]
}
},
methods: {
initDictConfig() {
}
}
}
</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>

122
ant-design-vue-jeecg/src/views/jeecg/JeecgPdfView.vue Normal file
View 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>

80
ant-design-vue-jeecg/src/views/jeecg/JeecgTreeTable.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<a-card :bordered="false">
<j-tree-table
:url="url"
topValue="0"
queryKey="id"
:columns="columns"
:tableProps="tableProps">
<template v-slot:action="props">
<!-- 可使用的参数： -->
<!-- props.text -->
<!-- props.record -->
<!-- props.index -->
<a @click="()=>handleEdit(props.record)">编辑</a>
</template>
</j-tree-table>
</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'
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
],
selectedRowKeys: []
}
},
computed: {
tableProps() {
let _this = this
return {
// 列表项是否可选择
// https://vue.ant.design/components/table-cn/#rowSelection
rowSelection: {
selectedRowKeys: _this.selectedRowKeys,
onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
}
}
}
},
methods: {
handleEdit(record) {
this.$info({
width: 600,
title: '编辑',
content: '编辑ID：' + record.id+"；名称："+record.name,
okText: '确定',
maskClosable: true
})
}
}
}
</script>
<style scoped></style>

166
ant-design-vue-jeecg/src/views/jeecg/PrintDemo.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<a-card :bordered="false" :class="{'abcdefg':true}">
<div class="no-print" style="text-align: right">
<a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
</div>
<section ref="print" id="printContent" class="abcdefg">
<div style="text-align: center">
<p style="font-size: 24px;font-weight: 800">打印测试表单</p>
</div>
<!--签字-->
<a-col :md="24" :sm="24">
<div class="sign" style="text-align: left;height: inherit">
<a-col :span="24">
<span>
打印人员:
</span>
<a-input style="width: 30%" v-model="printer"/>
<span style="margin-left: 12.5%">打印日期:</span>
<a-input style="width: 30%" v-model="printTime"/>
</a-col>
<a-col :span="24">
</a-col>
<a-col :span="24" style="margin-top: 20px">
<span>打印内容:</span>
<a-input style="width: 80%" v-model="printContent"/>
</a-col>
<a-col :span="24" style="margin-top: 20px">
<span>打印目的:</span>
<a-input style="width: 80%" v-model="printReason"/>
</a-col>
<a-col style="margin-top: 20px" :span="24">
<span>打印图片:</span>
<br/>
<a-upload
action="/jsonplaceholder.typicode.com/posts/"
listType="picture-card"
:fileList="fileList"
@preview="handlePreview"
@change="handleChange">
<div v-if="fileList.length < 3">
<a-icon type="plus" />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</a-col>
</div>
</a-col>
</section>
</a-card>
<!--</page-layout>-->
</template>
<script>
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ATextarea from 'ant-design-vue/es/input/TextArea'
export default {
components: {
ATextarea,
ARow,
ACol,
},
name: 'Printgzsld',
props:{
reBizCode:{
type: String,
default: ''
}
},
data(){
return {
columns: [{
}
],
labelCol: {
xs: { span: 24 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 8 },
},
printer:'张三',
printTime:'2019-02-01 12:00:00',
printContent:'打印内容就是,做一个打印测试',
printReason:'做一个打印测试',
previewVisible: false,
previewImage: '',
fileList: [{
uid: '-1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid:'-2',
name:'pic1.png',
status:'done',
url:'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg',
}
],
url:{
loadApplicant:"/sps/register/loadApplicants",
loadRegisterFiles:"/sps/register/getRegisterFilesConfig",
}
}
},
created() {
this.getDate();
},
methods: {
loadData(){
},
getDate(){
// 当前时间
},
handleCancel () {
this.previewVisible = false
},
handlePreview (file) {
this.previewImage = file.url || file.thumbUrl
this.previewVisible = true
},
handleChange ({ fileList }) {
this.fileList = fileList
}
}
}
</script>
<style scoped>
.abcdefg .ant-card-body{
margin-left: 0%;
margin-right: 0%;
margin-bottom: 1%;
border:0px solid black;
min-width: 800px;
}
.explain{
text-align: left;
margin-left: 50px;
}
.explain .ant-input,.sign .ant-input{
font-weight:bolder;
text-align:center;
border-left-width:0px!important;
border-top-width:0px!important;;
border-right-width:0px!important;;
}
.explain div{
margin-bottom: 10px;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>

285
ant-design-vue-jeecg/src/views/jeecg/RowspanTable.vue Normal file
View 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>

417
ant-design-vue-jeecg/src/views/jeecg/SelectDemo.vue Normal file
View File

@ -0,0 +1,417 @@
<template>
<a-card :bordered="false" style="height:100%">
<div class="table-page-search-wrapper">
<a-form layout="inline" :form="form">
<!-- 字典下拉 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="性别">
<j-dict-select-tag v-model="formData.sex" title="性别" dictCode="sex"/>
<!-- <j-dict-select-tag title="性别" dictCode="sex" disabled/>-->
</a-form-item>
</a-col>
<a-col :span="12">选中值：{{ formData.sex}}</a-col>
</a-row>
<!-- 字典表下拉 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="字典表下拉">
<j-dict-select-tag v-model="formData.user" placeholder="请选择用户" dictCode="sys_user,realname,id"/>
</a-form-item>
</a-col>
<a-col :span="12">选中值：{{ formData.user}}</a-col>
</a-row>
<!-- 带条件字典表下拉 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="字典表下拉(带条件)">
<j-dict-select-tag v-model="formData.user2" placeholder="请选择用户" dictCode="sys_user,realname,id,username!='admin' order by create_time"/>
</a-form-item>
</a-col>
<a-col :span="12">选中值：{{ formData.user2}}</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>
<!-- JSuperQuery 高级查询 -->
<!-- JTreeSelect 树组件 -->
<!-- JTreeTable 树列表 -->
<!-- JUpload.上传组件 -->
<!-- JImportModal 导入组件 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="树字典">
<j-tree-dict parentCode="B01" />
</a-form-item>
</a-col>
<a-col :span="12"></a-col>
</a-row>
<!-- VueCron -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="cron表达式">
<a-input @click="openModal" placeholder="corn表达式" v-model="cron.label" readOnly >
<a-icon slot="prefix" type="schedule" title="corn控件"/>
</a-input>
<VueCron ref="innerVueCron" :data="cron" @change="changeCron" ></VueCron>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
</a-card>
</template>
<script>
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'
import JTreeDict from "../../components/jeecg/JTreeDict.vue";
import VueCron from "./modules/VueCronModal.vue";
export default {
name: 'SelectDemo',
components: {
JTreeDict,
JDictSelectTag,
JSelectDepart,
JSelectUserByDep,
JSelectMultiUser,
JCheckbox,
JCodeEditor,
JDate, JEditor, JEllipsis, JGraphicCode, JSlider, JSelectMultiple,
VueCron
},
data() {
return {
selectList: [],
selectedDepUsers: '',
formData:{},
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
},
cron: {
label: '',
value: {}
}
}
},
computed: {
nameList: function() {
var names = []
for (var a = 0; a < this.selectList.length; a++) {
names.push(this.selectList[a].name)
}
return names
}
},
methods: {
handleChange() {
},
getDepartIdValue() {
return this.form.getFieldValue('departId')
},
selectOK: function(data) {
this.selectList = data
},
handleSelect: function() {
this.$refs.selectDemoModal.add()
},
selectReset() {
this.selectList = []
},
//通过组织机构筛选选择用户
onSearchDepUser() {
this.$refs.JSearchUserByDep.showModal()
this.selectedDepUsers = ''
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
},
openModal(){
this.$refs.innerVueCron.show()
},
changeCron(val){
this.cron=val;
console.log(val);
}
}
}
</script>
<style lang="less" scoped>
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
</style>

32
ant-design-vue-jeecg/src/views/jeecg/SplitPanel.vue Normal file
View 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>

266
ant-design-vue-jeecg/src/views/jeecg/TableExpandeSub.vue Normal file
View File

@ -0,0 +1,266 @@
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item label="订单号">
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="订单类型">
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:expandedRowKeys= "expandedRowKeys"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange"
@expand="handleExpand"
>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</span>
<a-table
slot="expandedRowRender"
slot-scope="text"
:columns="innerColumns"
:dataSource="innerData"
size="middle"
bordered
rowKey="id"
:pagination="false"
:loading="loading"
>
</a-table>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<jeecgOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderDMain-modal>
</a-card>
</template>
<script>
import { getAction } from '@/api/manage'
import JeecgOrderDMainModal from '@/views/jeecg/tablist/form/JeecgOrderDMainModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
export default {
name: "TableDemo",
mixins: [JeecgListMixin],
components: {
JeecgOrderDMainModal
},
data() {
return {
// 子表表头
innerColumns: [
{
title: '客户名',
align: "center",
width: 100,
dataIndex: 'name',
key: 'name',
},
{
title: '性别',
align: "center",
dataIndex: 'sex',
customRender: function (text) {
if (text == 1) {
return "男";
} else if (text == 2) {
return "女";
} else {
return text;
}
}
},
{
title: '身份证号码',
align: "center",
dataIndex: 'idcard',
},
{
title: '电话',
dataIndex: 'telphone',
align: "center",
},
],
innerData: [],
expandedRowKeys: [],
id: ' ',
description: '列表展开子表Demo',
// 列表表头
columns: [{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '订单号',
align: "center",
dataIndex: 'orderCode'
},
{
title: '订单类型',
align: "center",
dataIndex: 'ctype',
customRender: (text) => {
let re = "";
if (text === '1') {
re = "国内订单";
} else if (text === '2') {
re = "国际订单";
}
return re;
}
},
{
title: '订单日期',
align: "center",
dataIndex: 'orderDate'
},
{
title: '订单金额',
align: "center",
dataIndex: 'orderMoney'
},
{
title: '订单备注',
align: "center",
dataIndex: 'content'
},
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}],
// 分页参数
type: "radio",
url: {
list: "/test/order/orderList",
delete: "/test/order/delete",
deleteBatch: "/test/order/deleteBatch",
customerListByMainId: "/test/order/listOrderCustomerByMainId",
},
}
},
computed: {
currentId(){
return this.id;
}
},
methods: {
handleExpand(expanded, record){
this.expandedRowKeys=[];
this.innerData=[];
if(expanded===true){
this.loading = true;
this.expandedRowKeys.push(record.id);
getAction(this.url.customerListByMainId, {mainId: record.id}).then((res) => {
if (res.success) {
this.loading = false;
this.innerData = res.result;
}
});
}
},
}
}
</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>

71
ant-design-vue-jeecg/src/views/jeecg/helloworld.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<a-card :bordered="false">
<a-form @submit="handleSubmit" :form="form">
<a-col :md="24" :sm="24">
<a-form-item label="Note" :labelCol="{ span: 7 }" :wrapperCol="{ span: 15 }">
<a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]"/>
</a-form-item>
</a-col>
<a-col :md="24" :sm="24">
<a-form-item label="Gender" :labelCol="{ span: 7 }" :wrapperCol="{ span: 15 }">
<a-select v-decorator="['gender',{rules: [{ required: true, message: 'Please select your gender!' }]}]" placeholder="Select a option and change input text above" @change="this.handleSelectChange">
<a-select-option value="male">male</a-select-option>
<a-select-option value="female">female</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="24" :sm="24">
<a-form-item label="Gender" :labelCol="{ span: 7 }" :wrapperCol="{ span: 15 }">
<a-cascader :options="areaOptions" @change="onChange" :showSearch="{filter}" placeholder="Please select" />
</a-form-item>
</a-col>
<a-form-item :wrapperCol="{ span: 12, offset: 5 }">
<a-col :md="24" :sm="24">
<a-button type="primary" htmlType="submit">Submit</a-button>
</a-col>
</a-form-item>
</a-form>
</a-card>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
data () {
return {
formLayout: 'horizontal',
form: this.$form.createForm(this),
areaOptions:[]
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values)
}
})
},
handleSelectChange (value) {
console.log(value)
this.form.setFieldsValue({
note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
})
},
onChange(value, selectedOptions) {
console.log(value, selectedOptions);
},
filter(inputValue, path) {
return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1));
},
},
created (){
getAction('/api/area').then((res) => {
console.log("------------")
console.log(res)
this.areaOptions = res;
})
}
}
</script>

31
ant-design-vue-jeecg/src/views/jeecg/helloworld2.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div>
hello world!
</div>
</template>
<script>
export default {
data () {
return {
description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
value: 1,
// form
form: this.$form.createForm(this),
}
},
methods: {
// handler
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
// eslint-disable-next-line no-console
console.log('Received values of form: ', values)
}
})
}
}
}
</script>

181
ant-design-vue-jeecg/src/views/jeecg/modules/JeecgDemoModal.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="姓名"
hasFeedback >
<a-input placeholder="请输入姓名" v-decorator="['name', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="关键词"
hasFeedback >
<a-input placeholder="请输入关键词" v-decorator="['keyWord', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="打卡时间"
hasFeedback >
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'punchTime', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="sex">
<a-select v-decorator="['sex', {}]" placeholder="请选择性别">
<a-select-option value="">请选择性别</a-select-option>
<a-select-option value="1">男性</a-select-option>
<a-select-option value="2">女性</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="年龄"
hasFeedback >
<a-input placeholder="请输入年龄" v-decorator="['age', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="生日"
hasFeedback >
<a-date-picker v-decorator="[ 'birthday', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="邮箱"
hasFeedback >
<a-input placeholder="请输入邮箱" v-decorator="['email', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="个人简介"
hasFeedback >
<a-input placeholder="请输入个人简介" v-decorator="['content', {}]" />
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
export default {
name: "JeecgDemoModal",
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:{
},
url: {
add: "/test/jeecgDemo/add",
edit: "/test/jeecgDemo/edit",
},
}
},
created () {
},
methods: {
add () {
this.edit({});
},
edit (record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'name','keyWord','sex','age','email','content'))
//时间格式化
this.form.setFieldsValue({punchTime:this.model.punchTime?moment(this.model.punchTime,'YYYY-MM-DD HH:mm:ss'):null})
this.form.setFieldsValue({birthday:this.model.birthday?moment(this.model.birthday):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.punchTime = formData.punchTime?formData.punchTime.format('YYYY-MM-DD HH:mm:ss'):null;
formData.birthday = formData.birthday?formData.birthday.format():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>

285
ant-design-vue-jeecg/src/views/jeecg/modules/JeecgDemoTabsModal.vue Normal file
View File

@ -0,0 +1,285 @@
<template>
<a-modal
:title="title"
:width="1200"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-card class="card" :bordered="false">
<a-row class="form-row" :gutter="16">
<a-col :lg="8">
<a-form-item label="任务名">
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]"/>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item label="任务描述">
<a-input placeholder="请输入任务描述" v-decorator="['task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]"/>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item label="执行人">
<a-select placeholder="请选择执行人" v-decorator="['task.executor',{rules: [{ required: true, message: '请选择执行人'}]} ]">
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
<a-select-option value="李大刀">李大刀</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="8">
<a-form-item label="责任人">
<a-select placeholder="请选择责任人" v-decorator="['task.manager', {rules: [{ required: true, message: '请选择责任人'}]} ]">
<a-select-option value="王伟">王伟</a-select-option>
<a-select-option value="李红军">李红军</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item label="提醒时间">
<a-time-picker style="width: 100%" v-decorator="['task.time', {rules: [{ required: true, message: '请选择提醒时间'}]} ]"/>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item
label="任务类型">
<a-select placeholder="请选择任务类型" v-decorator="['task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]">
<a-select-option value="定时执行">定时执行</a-select-option>
<a-select-option value="周期执行">周期执行</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-tabs defaultActiveKey="1" >
<a-tab-pane tab="Tab 1" key="1">
<a-table :columns="columns" :dataSource="data" :pagination="false" size="middle">
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
<a-tooltip title="必填项" :defaultVisible="false" overlayStyle="{ color: 'red' }">
<a-input :key="col" v-if="record.editable" style="margin: -5px 0" :value="text" :placeholder="columns[i].title" @change="e => handlerRowChange(e.target.value, record.key, col)"/>
<template v-else>{{ text }}</template>
</a-tooltip>
</template>
<template slot="operation" slot-scope="text, record, index">
<template v-if="record.editable">
<span v-if="record.isNew">
<a @click="saveRow(record.key)">添加</a>
<a-divider type="vertical"/>
<a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)"><a>删除</a></a-popconfirm>
</span>
<span v-else>
<a @click="saveRow(record.key)">保存</a>
<a-divider type="vertical"/>
<a @click="cancelEditRow(record.key)">取消</a>
</span>
</template>
<span v-else>
<a @click="editRow(record.key)">编辑</a>
<a-divider type="vertical"/>
<a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)"><a>删除</a></a-popconfirm>
</span>
</template>
</a-table>
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增成员</a-button>
</a-tab-pane>
<a-tab-pane tab="Tab 2" key="2" forceRender>
Content of Tab Pane 2
</a-tab-pane>
<a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
export default {
name: "JeecgDemoTabsModal",
data() {
return {
title: "操作",
visible: false,
model: {},
// table
columns: [
{
title: '成员姓名',
dataIndex: 'name',
key: 'name',
width: '20%',
scopedSlots: {customRender: 'name'}
},
{
title: '工号',
dataIndex: 'workId',
key: 'workId',
width: '20%',
scopedSlots: {customRender: 'workId'}
},
{
title: '所属部门',
dataIndex: 'department',
key: 'department',
width: '40%',
scopedSlots: {customRender: 'department'}
},
{
title: '操作',
key: 'action',
scopedSlots: {customRender: 'operation'}
}
],
data: [
{
key: '1',
name: '小明',
workId: '001',
editable: false,
department: '行政部'
},
{
key: '2',
name: '李莉',
workId: '002',
editable: false,
department: 'IT部'
},
{
key: '3',
name: '王小帅',
workId: '003',
editable: false,
department: '财务部'
}
],
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {},
url: {
add: "/test/jeecgDemo/add",
edit: "/test/jeecgDemo/edit",
},
}
},
created() {
},
methods: {
add() {
this.edit({});
},
edit(record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'name', 'keyWord', 'sex', 'age', 'email', 'content'))
//时间格式化
this.form.setFieldsValue({punchTime: this.model.punchTime ? moment(this.model.punchTime, 'YYYY-MM-DD HH:mm:ss') : null})
this.form.setFieldsValue({birthday: this.model.birthday ? moment(this.model.birthday) : 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.punchTime = formData.punchTime ? formData.punchTime.format('YYYY-MM-DD HH:mm:ss') : null;
formData.birthday = formData.birthday ? formData.birthday.format() : 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()
},
newRow () {
// 通过时间戳生成 UUID
let uuid = Math.round(new Date().getTime()).toString();
console.log('uuid: '+ uuid)
this.data.push({
key: uuid,
name: '',
workId: '',
department: '',
editable: true,
isNew: true
})
},
removeRow (key) {
const newData = this.data.filter(item => item.key !== key)
this.data = newData
},
saveRow (key) {
let target = this.data.filter(item => item.key === key)[0]
target.editable = false
target.isNew = false
},
handlerRowChange (value, key, column) {
const newData = [...this.data]
const target = newData.filter(item => key === item.key)[0]
if (target) {
target[column] = value
this.data = newData
}
},
editRow (key) {
let target = this.data.filter(item => item.key === key)[0]
target.editable = !target.editable
},
cancelEditRow (key) {
let target = this.data.filter(item => item.key === key)[0]
target.editable = false
},
}
}
</script>
<style scoped>
.ant-modal-body {
padding: 8px!important;
}
</style>

306
ant-design-vue-jeecg/src/views/jeecg/modules/JeecgOrderMainModal.vue Normal file
View File

@ -0,0 +1,306 @@
<template>
<a-modal
:title="title"
:width="1200"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<!-- 主表单区域 -->
<a-row class="form-row" :gutter="16">
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号">
<a-input placeholder="请输入订单号" v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]" />
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单类型">
<a-select placeholder="请输入订单类型" v-decorator="['ctype',{}]">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单日期">
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'orderDate',{}]"/>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单金额">
<a-input-number style="width: 200px" v-decorator="[ 'orderMoney', {}]" />
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单备注">
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]" />
</a-form-item>
</a-col>
</a-row>
<!-- 子表单区域 -->
<a-tabs defaultActiveKey="1" >
<a-tab-pane tab="客户信息" key="1">
<div>
<a-row type="flex" style="margin-bottom:10px" :gutter="16">
<a-col :span="5">客户名</a-col>
<a-col :span="5">性别</a-col>
<a-col :span="5">身份证号码</a-col>
<a-col :span="5">手机号</a-col>
<a-col :span="4">操作</a-col>
</a-row>
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeecgOrderCustomerList" :key="index">
<a-col :span="5">
<a-form-item>
<a-input placeholder="客户名" v-decorator="['jeecgOrderCustomerList['+index+'].name', {'initialValue':item.name,rules: [{ required: true, message: '请输入用户名!' }]}]" />
</a-form-item>
</a-col>
<a-col :span="5">
<a-form-item>
<a-select placeholder="性别" v-decorator="['jeecgOrderCustomerList['+index+'].sex', {'initialValue':item.sex}]">
<a-select-option value="1">男</a-select-option>
<a-select-option value="2">女</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="5">
<a-form-item>
<a-input placeholder="身份证号" v-decorator="['jeecgOrderCustomerList['+index+'].idcard', {'initialValue':item.idcard,rules: [{ pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$', message: '身份证号格式不对!' }]}]"/>
</a-form-item>
</a-col>
<a-col :span="5">
<a-form-item>
<a-input placeholder="手机号" v-decorator="['jeecgOrderCustomerList['+index+'].telphone', {'initialValue':item.telphone,rules: [{ pattern: '^1(3|4|5|7|8)\\d{9}$', message: '手机号格式不对!' }]}]"/>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item>
<a-button @click="addRowCustom" icon="plus"></a-button>&nbsp;
<a-button @click="delRowCustom(index)" icon="minus"></a-button>
</a-form-item>
</a-col>
</a-row>
</div>
</a-tab-pane>
<a-tab-pane tab="机票信息" key="2" forceRender>
<div>
<a-row type="flex" style="margin-bottom:10px" :gutter="16">
<a-col :span="6">航班号</a-col>
<a-col :span="6">航班时间</a-col>
<a-col :span="6">操作</a-col>
</a-row>
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeecgOrderTicketList" :key="index">
<a-col :span="6">
<a-form-item>
<a-input placeholder="航班号" v-decorator="['jeecgOrderTicketList['+index+'].ticketCode', {'initialValue':item.ticketCode,rules: [{ required: true, message: '请输入航班号!' }]}]" />
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item>
<j-date placeholder="航班时间" :trigger-change="true" v-decorator="['jeecgOrderTicketList['+index+'].tickectDate', {'initialValue':item.tickectDate}]"></j-date>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item>
<a-button @click="addRowTicket" icon="plus"></a-button>&nbsp;
<a-button @click="delRowTicket(index)" icon="minus"></a-button>
</a-form-item>
</a-col>
</a-row>
</div>
</a-tab-pane>
</a-tabs>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { httpAction,getAction } from '@/api/manage'
import JDate from '@/components/jeecg/JDate'
import pick from 'lodash.pick'
import moment from "moment"
export default {
name: "JeecgOrderMainModal",
components: {
JDate
},
data () {
return {
title:"操作",
visible: false,
orderMainModel: {jeecgOrderCustomerList: [{}],
jeecgOrderTicketList: [{}]},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules:{
},
url: {
add: "/test/jeecgOrderMain/add",
edit: "/test/jeecgOrderMain/edit",
orderCustomerList: "/test/jeecgOrderMain/queryOrderCustomerListByMainId",
orderTicketList: "/test/jeecgOrderMain/queryOrderTicketListByMainId",
},
}
},
created () {
},
methods: {
add () {
this.edit({});
},
edit (record) {
this.form.resetFields();
this.orderMainModel = Object.assign({}, record);
this.orderMainModel.jeecgOrderCustomerList = [{}];
this.orderMainModel.jeecgOrderTicketList = [{}];
//--------------------------------------------------------
//初始化明细表数据
console.log(this.orderMainModel.id)
if(this.orderMainModel.id){
let params = {id:this.orderMainModel.id}
//初始化订单机票列表
getAction(this.url.orderCustomerList,params).then((res)=>{
if(res.success){
this.orderMainModel.jeecgOrderCustomerList = res.result;
this.$forceUpdate()
}
})
//初始化订单客户列表
getAction(this.url.orderTicketList,params).then((res)=>{
if(res.success){
this.orderMainModel.jeecgOrderTicketList = res.result;
this.$forceUpdate()
}
})
}
//--------------------------------------------------------
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.orderMainModel,'orderCode','ctype','orderMoney','content'))
this.form.setFieldsValue({orderDate:this.orderMainModel.orderDate?moment(this.orderMainModel.orderDate):null}) //时间格式化
});
console.log(this.orderMainModel)
},
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.orderMainModel.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
let orderMainData = Object.assign(this.orderMainModel, values);
//时间格式化
orderMainData.orderDate = orderMainData.orderDate?orderMainData.orderDate.format('YYYY-MM-DD HH:mm:ss'):null;
let formData = {
...orderMainData,
jeecgOrderCustomerList: orderMainData.jeecgOrderCustomerList,
jeecgOrderTicketList: orderMainData.jeecgOrderTicketList
}
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()
},
addRowCustom () {
this.orderMainModel.jeecgOrderCustomerList.push({});
this.$forceUpdate();
},
delRowCustom (index) {
console.log(index)
this.orderMainModel.jeecgOrderCustomerList.splice(index,1);
this.$forceUpdate();
},
addRowTicket () {
this.orderMainModel.jeecgOrderTicketList.push({});
console.log(this.orderMainModel.jeecgOrderTicketList)
this.$forceUpdate();
},
delRowTicket (index) {
console.log(index)
this.orderMainModel.jeecgOrderTicketList.splice(index,1);
this.$forceUpdate();
},
}
}
</script>
<style scoped>
.ant-btn {
padding: 0 10px;
margin-left: 3px;
}
.ant-form-item-control {
line-height: 0px;
}
/** 主表单行间距 */
.ant-form .ant-form-item {
margin-bottom: 10px;
}
/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
margin-bottom: 0px;
}
</style>

340
ant-design-vue-jeecg/src/views/jeecg/modules/JeecgOrderModalForJEditableTable.vue Normal file
View File

@ -0,0 +1,340 @@
<template>
<a-modal
:title="title"
:width="1200"
:visible="visible"
:maskClosable="false"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<!-- 主表单区域 -->
<a-row class="form-row" :gutter="0">
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号">
<a-input
placeholder="请输入订单号"
v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]"/>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单类型">
<a-select placeholder="请选择订单类型" v-decorator="['ctype',{}]">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单日期">
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-decorator="[ 'orderDate',{}]"/>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="0">
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单金额">
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-decorator="[ 'orderMoney', {}]"/>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单备注">
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 子表单区域 -->
<a-tabs v-model="activeKey" @change="handleChangeTabs">
<a-tab-pane tab="客户信息" key="1" :forceRender="true">
<j-editable-table
ref="editableTable1"
:loading="table1.loading"
:columns="table1.columns"
:dataSource="table1.dataSource"
:maxHeight="300"
:rowNumber="true"
:rowSelection="true"
:actionButton="true"/>
</a-tab-pane>
<a-tab-pane tab="机票信息" key="2" :forceRender="true">
<j-editable-table
ref="editableTable2"
:loading="table2.loading"
:columns="table2.columns"
:dataSource="table2.dataSource"
:maxHeight="300"
:rowNumber="true"
:rowSelection="true"
:actionButton="true"/>
</a-tab-pane>
</a-tabs>
</a-spin>
</a-modal>
</template>
<script>
import JEditableTable from '@/components/jeecg/JEditableTable'
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil'
import { httpAction, getAction } from '@/api/manage'
import JDate from '@/components/jeecg/JDate'
import pick from 'lodash.pick'
import moment from 'moment'
export default {
name: 'JeecgOrderModalForJEditableTable',
components: {
JDate, JEditableTable
},
data() {
return {
title: '操作',
visible: false,
form: this.$form.createForm(this),
confirmLoading: false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 24 - 6 }
},
activeKey: '1',
// 客户信息
table1: {
loading: false,
dataSource: [],
columns: [
{
title: '客户名',
key: 'name',
width: '24%',
type: FormTypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{
title: '性别',
key: 'sex',
width: '18%',
type: FormTypes.select,
options: [ // 下拉选项
{ title: '男', value: '1' },
{ title: '女', value: '2' }
],
defaultValue: '',
placeholder: '请选择${title}'
},
{
title: '身份证号',
key: 'idcard',
width: '24%',
type: FormTypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
message: '${title}格式不正确'
}]
},
{
title: '手机号',
key: 'telphone',
width: '24%',
type: FormTypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{
pattern: '^1(3|4|5|7|8)\\d{9}$',
message: '${title}格式不正确'
}]
}
]
},
// 机票信息
table2: {
loading: false,
dataSource: [],
columns: [
{
title: '航班号',
key: 'ticketCode',
width: '40%',
type: FormTypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{
title: '航班时间',
key: 'tickectDate',
width: '30%',
type: FormTypes.date,
placeholder: '请选择${title}',
defaultValue: ''
}
]
},
url: {
add: '/test/jeecgOrderMain/add',
edit: '/test/jeecgOrderMain/edit',
orderCustomerList: '/test/jeecgOrderMain/queryOrderCustomerListByMainId',
orderTicketList: '/test/jeecgOrderMain/queryOrderTicketListByMainId'
}
}
},
created() {
},
methods: {
// 获取所有的editableTable实例
getAllTable() {
return Promise.all([
getRefPromise(this, 'editableTable1'),
getRefPromise(this, 'editableTable2')
])
},
add() {
// 默认新增一条数据
this.getAllTable().then(editableTables => {
editableTables[0].add()
editableTables[1].add()
})
this.edit({})
},
edit(record) {
this.visible = true
this.activeKey = '1'
this.form.resetFields()
this.model = Object.assign({}, record)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'orderCode', 'ctype', 'orderMoney', 'content'))
//时间格式化
this.form.setFieldsValue({ orderDate: this.model.orderDate ? moment(this.model.orderDate) : null })
})
// 加载子表数据
if (this.model.id) {
let params = { id: this.model.id }
this.requestTableData(this.url.orderCustomerList, params, this.table1)
this.requestTableData(this.url.orderTicketList, params, this.table2)
}
},
close() {
this.visible = false
this.getAllTable().then(editableTables => {
editableTables[0].initialize()
editableTables[1].initialize()
})
this.$emit('close')
},
/** 查询某个tab的数据 */
requestTableData(url, params, tab) {
tab.loading = true
getAction(url, params).then(res => {
tab.dataSource = res.result || []
}).finally(() => {
tab.loading = false
})
},
handleOk() {
this.validateFields()
},
handleCancel() {
this.close()
},
/** ATab 选项卡切换事件 */
handleChangeTabs(key) {
getRefPromise(this, `editableTable${key}`).then(editableTable => {
editableTable.resetScrollTop()
})
},
/** 触发表单验证 */
validateFields() {
this.getAllTable().then(tables => {
/** 一次性验证主表和所有的次表 */
return validateFormAndTables(this.form, tables)
}).then(allValues => {
let formData = this.classifyIntoFormData(allValues)
// 发起请求
return this.requestAddOrEdit(formData)
}).catch(e => {
if (e.error === VALIDATE_NO_PASSED) {
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
} else {
console.error(e)
}
})
},
/** 整理成formData */
classifyIntoFormData(allValues) {
let orderMain = Object.assign(this.model, allValues.formValue)
//时间格式化
orderMain.orderDate = orderMain.orderDate ? orderMain.orderDate.format('YYYY-MM-DD HH:mm:ss') : null
return {
...orderMain, // 展开
jeecgOrderCustomerList: allValues.tablesValue[0].values,
jeecgOrderTicketList: allValues.tablesValue[1].values
}
},
/** 发起新增或修改的请求 */
requestAddOrEdit(formData) {
let url = this.url.add, method = 'post'
if (this.model.id) {
url = this.url.edit
method = 'put'
}
this.confirmLoading = true
httpAction(url, formData, method).then((res) => {
if (res.success) {
this.$message.success(res.message)
this.$emit('ok')
this.close()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
}
}
</script>
<style scoped>
</style>

56
ant-design-vue-jeecg/src/views/jeecg/modules/PdfPreviewModal.vue Normal file
View File

@ -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-vue-jeecg/src/views/jeecg/modules/SplitPanelA.vue Normal file
View 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-vue-jeecg/src/views/jeecg/modules/SplitPanelB.vue Normal file
View 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>

63
ant-design-vue-jeecg/src/views/jeecg/modules/SplitPanelModal.vue Normal file
View File

@ -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>

95
ant-design-vue-jeecg/src/views/jeecg/modules/SuperQueryModal.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<a-modal
title="高级查询构造器"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
:mask="false"
okText="查询"
@cancel="handleCancel"
cancelText="关闭">
<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">
<a-select-option value="name">用户名</a-select-option>
<a-select-option value="key_word">关键词</a-select-option>
<a-select-option value="birthday">生日</a-select-option>
<a-select-option value="age">年龄</a-select-option>
</a-select>
</a-col>
<a-col :span="6">
<a-select placeholder="选择匹配规则" v-model="item.rule">
<a-select-option value="=">等于</a-select-option>
<a-select-option value="!=">不等于</a-select-option>
<a-select-option value=">">大于</a-select-option>
<a-select-option value=">=">大于等于</a-select-option>
<a-select-option value="<">小于</a-select-option>
<a-select-option value="<=">小于等于</a-select-option>
<a-select-option value="LEFT_LIKE">以..开始</a-select-option>
<a-select-option value="RIGHT_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"><a-input placeholder="请输入值" v-model="item.val"/></a-col>
<a-col :span="6">
<a-button @click="handleAdd" icon="plus"></a-button>&nbsp;
<a-button @click="handleDel( index )" icon="minus"></a-button>
</a-col>
</a-row>
</div>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
export default {
name: "SuperQueryModal",
data () {
return {
visible: false,
queryParamsModel: [{},{}],
confirmLoading: false
}
},
created () {
},
methods: {
show () {
this.visible = true;
},
close () {
this.$emit('close');
this.visible = false;
},
handleOk () {
console.log(this.queryParamsModel)
// 子组件中触发父组件方法ee并传值cc12345
this.$emit('handleSuperQuery', this.queryParamsModel)
},
handleCancel () {
this.close()
},
handleAdd () {
this.queryParamsModel.push({});
},
handleDel (index) {
console.log(index)
this.queryParamsModel.splice(index,1);
}
}
}
</script>
<style scoped>
</style>

729
ant-design-vue-jeecg/src/views/jeecg/modules/VueCronModal.vue Normal file
View File

@ -0,0 +1,729 @@
<template>
<a-modal
title="corn表达式"
:width="modalWidth"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="change"
@cancel="close"
cancelText="关闭">
<div class="card-container">
<a-tabs type="card">
<a-tab-pane key="1" type="card">
<span slot="tab"><a-icon type="schedule" /> 秒</span>
<a-radio-group v-model="result.second.cronEvery">
<a-row>
<a-radio value="1">每一秒钟</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.second.incrementIncrement" :min="1" :max="60"></a-input-number>
秒执行 从
<a-input-number size="small" v-model="result.second.incrementStart" :min="0" :max="59"></a-input-number>
秒开始
</a-radio>
</a-row>
<a-row>
<a-radio value="3">具体秒数(可多选)</a-radio>
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.second.specificSpecific">
<a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">周期从
<a-input-number size="small" v-model="result.second.rangeStart" :min="1" :max="60"></a-input-number>
到
<a-input-number size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input-number>
秒
</a-radio>
</a-row>
</a-radio-group>
</a-tab-pane>
<a-tab-pane key="2">
<span slot="tab"><a-icon type="schedule" />分</span>
<div class="tabBody">
<a-radio-group v-model="result.minute.cronEvery">
<a-row>
<a-radio value="1">每一分钟</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input-number>
分执行 从
<a-input-number size="small" v-model="result.minute.incrementStart" :min="0" :max="59"></a-input-number>
分开始
</a-radio>
</a-row>
<a-row>
<a-radio value="3">具体分钟数(可多选)</a-radio>
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.minute.specificSpecific">
<a-select-option v-for="(val,index) in Array(60)" :key="index" :value="index"> {{ index }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">周期从
<a-input-number size="small" v-model="result.minute.rangeStart" :min="1" :max="60"></a-input-number>
到
<a-input-number size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input-number>
分
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="3">
<span slot="tab"><a-icon type="schedule" /> 时</span>
<div class="tabBody">
<a-radio-group v-model="result.hour.cronEvery">
<a-row>
<a-radio value="1">每一小时</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input-number>
小时执行 从
<a-input-number size="small" v-model="result.hour.incrementStart" :min="0" :max="23"></a-input-number>
小时开始
</a-radio>
</a-row>
<a-row>
<a-radio class="long" value="3">具体小时数(可多选)</a-radio>
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.hour.specificSpecific">
<a-select-option v-for="(val,index) in Array(24)" :key="index" >{{ index }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">周期从
<a-input-number size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input-number>
到
<a-input-number size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input-number>
小时
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="4">
<span slot="tab"><a-icon type="schedule" /> 天</span>
<div class="tabBody">
<a-radio-group v-model="result.day.cronEvery">
<a-row>
<a-radio value="1">每一天</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input-number>
周执行 从
<a-select size="small" v-model="result.week.incrementStart">
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
</a-select>
开始
</a-radio>
</a-row>
<a-row>
<a-radio value="3">每隔
<a-input-number size="small" v-model="result.day.incrementIncrement" :min="1" :max="31"></a-input-number>
天执行 从
<a-input-number size="small" v-model="result.day.incrementStart" :min="1" :max="31"></a-input-number>
天开始
</a-radio>
</a-row>
<a-row>
<a-radio class="long" value="4">具体星期几(可多选)</a-radio>
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.week.specificSpecific">
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio class="long" value="5">具体天数(可多选)</a-radio>
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific">
<a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index">{{ index+1 }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="6">在这个月的最后一天</a-radio>
</a-row>
<a-row>
<a-radio value="7">在这个月的最后一个工作日</a-radio>
</a-row>
<a-row>
<a-radio value="8">在这个月的最后一个
<a-select size="small" v-model="result.day.cronLastSpecificDomDay">
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
</a-select>
</a-radio>
</a-row>
<a-row>
<a-radio value="9">
<a-input-number size="small" v-model="result.day.cronDaysBeforeEomMinus" :min="1" :max="31"></a-input-number>
在本月底前
</a-radio>
</a-row>
<a-row>
<a-radio value="10">最近的工作日（周一至周五）至本月
<a-input-number size="small" v-model="result.day.cronDaysNearestWeekday" :min="1" :max="31"></a-input-number>
日
</a-radio>
</a-row>
<a-row>
<a-radio value="11">在这个月的第
<a-input-number size="small" v-model="result.week.cronNthDayNth" :min="1" :max="5"></a-input-number>
个
<a-select size="small" v-model="result.week.cronNthDayDay">
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
</a-select>
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="5">
<span slot="tab"><a-icon type="schedule" /> 月</span>
<div class="tabBody">
<a-radio-group v-model="result.month.cronEvery">
<a-row>
<a-radio value="1">每一月</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input-number>
月执行 从
<a-input-number size="small" v-model="result.month.incrementStart" :min="0" :max="12"></a-input-number>
月开始
</a-radio>
</a-row>
<a-row>
<a-radio class="long" value="3">具体月数(可多选)</a-radio>
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.month.specificSpecific">
<a-select-option v-for="(val,index) in Array(12)" :key="index" :value="index">{{ index+1 }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">从
<a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number>
到
<a-input-number size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input-number>
月之间的每个月
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="6">
<span slot="tab"><a-icon type="schedule" /> 年</span>
<div class="tabBody">
<a-radio-group v-model="result.year.cronEvery">
<a-row>
<a-radio value="1">每一年</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input-number>
年执行 从
<a-input-number size="small" v-model="result.year.incrementStart" :min="2019" :max="2119"></a-input-number>
年开始
</a-radio>
</a-row>
<a-row>
<a-radio class="long" value="3">具体年份(可多选)</a-radio>
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.year.specificSpecific">
<a-select-option v-for="(val,index) in Array(100)" :key="index" :value="2019+index">{{ 2019+index }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">从
<a-input-number size="small" v-model="result.year.rangeStart" :min="2019" :max="2119"></a-input-number>
到
<a-input-number size="small" v-model="result.year.rangeEnd" :min="2019" :max="2119"></a-input-number>
年之间的每一年
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
</a-tabs>
<div class="bottom">
<span class="value">{{this.cron.label }}</span>
</div>
</div>
</a-modal>
</template>
<script>
import pick from 'lodash.pick'
export default {
name:'VueCron',
props:['data','i18n'],
data(){
return {
visible: false,
confirmLoading:false,
size:'large',
weekDays:['天','一','二','三','四','五','六'].map(val=>'星期'+val),
result: {
second:{
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:0,
specificSpecific:[],
},
minute:{
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:'0',
specificSpecific:[],
},
hour:{
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:'0',
rangeEnd:'0',
specificSpecific:[],
},
day:{
cronEvery:'',
incrementStart:1,
incrementIncrement:'1',
rangeStart:'',
rangeEnd:'',
specificSpecific:[],
cronLastSpecificDomDay:1,
cronDaysBeforeEomMinus:'',
cronDaysNearestWeekday:'',
},
week:{
cronEvery:'',
incrementStart:1,
incrementIncrement:'1',
specificSpecific:[],
cronNthDayDay:1,
cronNthDayNth:'1',
},
month:{
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:1,
specificSpecific:[],
},
year:{
cronEvery:'',
incrementStart:2017,
incrementIncrement:1,
rangeStart:2019,
rangeEnd: 2019,
specificSpecific:[],
},
label:''
},
output:{
second:{
cronEvery:'',
incrementStart:'',
incrementIncrement:'',
rangeStart:'',
rangeEnd:'',
specificSpecific:[],
},
minute:{
cronEvery:'',
incrementStart:'',
incrementIncrement:'',
rangeStart:'',
rangeEnd:'',
specificSpecific:[],
},
hour:{
cronEvery:'',
incrementStart:'',
incrementIncrement:'',
rangeStart:'',
rangeEnd:'',
specificSpecific:[],
},
day:{
cronEvery:'',
incrementStart:'',
incrementIncrement:'',
rangeStart:'',
rangeEnd:'',
specificSpecific:[],
cronLastSpecificDomDay:'',
cronDaysBeforeEomMinus:'',
cronDaysNearestWeekday:'',
},
week:{
cronEvery:'',
incrementStart:'',
incrementIncrement:'',
specificSpecific:[],
cronNthDayDay:'',
cronNthDayNth:'',
},
month:{
cronEvery:'',
incrementStart:'',
incrementIncrement:'',
rangeStart:'',
rangeEnd:'',
specificSpecific:[],
},
year:{
cronEvery:'',
incrementStart:'',
incrementIncrement:'',
rangeStart:'',
rangeEnd:'',
specificSpecific:[],
}
}
}
},
computed: {
modalWidth(){
return 608;
},
text(){
return Language['cn']
},
secondsText() {
let seconds = '';
let cronEvery=this.result.second.cronEvery;
switch (cronEvery.toString()){
case '1':
seconds = '*';
break;
case '2':
seconds = this.result.second.incrementStart+'/'+this.result.second.incrementIncrement;
break;
case '3':
this.result.second.specificSpecific.map(val=> {seconds += val+','});
seconds = seconds.slice(0, -1);
break;
case '4':
seconds = this.result.second.rangeStart+'-'+this.result.second.rangeEnd;
break;
}
return seconds;
},
minutesText() {
let minutes = '';
let cronEvery=this.result.minute.cronEvery;
switch (cronEvery.toString()){
case '1':
minutes = '*';
break;
case '2':
minutes = this.result.minute.incrementStart+'/'+this.result.minute.incrementIncrement;
break;
case '3':
this.result.minute.specificSpecific.map(val=> {
minutes += val+','
});
minutes = minutes.slice(0, -1);
break;
case '4':
minutes = this.result.minute.rangeStart+'-'+this.result.minute.rangeEnd;
break;
}
return minutes;
},
hoursText() {
let hours = '';
let cronEvery=this.result.hour.cronEvery;
switch (cronEvery.toString()){
case '1':
hours = '*';
break;
case '2':
hours = this.result.hour.incrementStart+'/'+this.result.hour.incrementIncrement;
break;
case '3':
this.result.hour.specificSpecific.map(val=> {
hours += val+','
});
hours = hours.slice(0, -1);
break;
case '4':
hours = this.result.hour.rangeStart+'-'+this.result.hour.rangeEnd;
break;
}
return hours;
},
daysText() {
let days='';
let cronEvery=this.result.day.cronEvery;
switch (cronEvery.toString()){
case '1':
break;
case '2':
case '4':
case '11':
days = '?';
break;
case '3':
days = this.result.day.incrementStart+'/'+this.result.day.incrementIncrement;
break;
case '5':
this.result.day.specificSpecific.map(val=> {
days += val+','
});
days = days.slice(0, -1);
break;
case '6':
days = "L";
break;
case '7':
days = "LW";
break;
case '8':
days = this.result.day.cronLastSpecificDomDay + 'L';
break;
case '9':
days = 'L-' + this.day.cronDaysBeforeEomMinus;
break;
case '10':
days = this.result.day.cronDaysNearestWeekday+"W";
break
}
return days;
},
weeksText() {
let weeks = '';
let cronEvery=this.result.day.cronEvery;
switch (cronEvery.toString()){
case '1':
case '3':
case '5':
weeks = '?';
break;
case '2':
weeks = this.result.week.incrementStart+'/'+this.result.week.incrementIncrement;
break;
case '4':
this.result.week.specificSpecific.map(val=> {
weeks += val+','
});
weeks = weeks.slice(0, -1);
break;
case '6':
case '7':
case '8':
case '9':
case '10':
weeks = "?";
break;
case '11':
weeks = this.result.week.cronNthDayDay+"#"+this.result.week.cronNthDayNth;
break;
}
return weeks;
},
monthsText() {
let months = '';
let cronEvery=this.result.month.cronEvery;
switch (cronEvery.toString()){
case '1':
months = '*';
break;
case '2':
months = this.result.month.incrementStart+'/'+this.result.month.incrementIncrement;
break;
case '3':
this.result.month.specificSpecific.map(val=> {
months += val+','
});
months = months.slice(0, -1);
break;
case '4':
months = this.result.month.rangeStart+'-'+this.result.month.rangeEnd;
break;
}
return months;
},
yearsText() {
let years = '';
let cronEvery=this.result.year.cronEvery;
switch (cronEvery.toString()){
case '1':
years = '*';
break;
case '2':
years = this.result.year.incrementStart+'/'+this.result.year.incrementIncrement;
break;
case '3':
this.result.year.specificSpecific.map(val=> {
years += val+','
});
years = years.slice(0, -1);
break;
case '4':
years = this.result.year.rangeStart+'-'+this.result.year.rangeEnd;
break;
}
return years;
},
cron(){
return {
value: this.result,
label:`${this.secondsText||'*'} ${this.minutesText||'*'} ${this.hoursText||'*'} ${this.daysText||'*'} ${this.monthsText||'*'} ${this.weeksText||'*'} ${this.yearsText||'*'}`
}
},
},
watch:{
data(){
//this.rest(this.data);
}
},
methods: {
show(){
//this.rest(pick(this.data.value,'second','minute','hour','day','week','month','year'));
//this.rest(this.data.value);
Object.assign(this.data.value,this.result);
console.log('data初始化',this.data);
//this.result = this.data.value;
this.visible=true;
},
getValue(){
return this.cron;
},
change(){
console.log('返回前',this.cron);
this.$emit('change',this.cron);
this.close();
this.visible = false;
},
close(){
this.visible = false;
//this.$emit('close')
},
rest(data){
for(let i in data){
console.log(data[i]);
if(data[i] instanceof Object){
this.rest(data[i])
}else {
switch(typeof data[i]) {
case 'object':
data[i] = [];
break;
case 'string':
data[i] = '';
break;
case 'number':
data[i] = null;
break;
}
}
}
},
callback (key) {
console.log(key)
}
}
}
</script>
<style lang="scss">
.card-container {
background: #fff;
overflow: hidden;
padding: 12px;
position: relative;
width: 100%;
.ant-tabs{
border:1px solid #e6ebf5;
padding: 0;
.ant-tabs-bar {
margin: 0;
outline: none;
border-bottom: none;
.ant-tabs-nav-container{
margin: 0;
.ant-tabs-tab {
padding: 0 24px!important;
background-color: #f5f7fa!important;
margin-right: 0px!important;
border-radius: 0;
line-height: 38px;
border: 1px solid transparent!important;
border-bottom: 1px solid #e6ebf5!important;
}
.ant-tabs-tab-active.ant-tabs-tab{
color: #409eff;
background-color: #fff!important;
border-right:1px solid #e6ebf5!important;
border-left:1px solid #e6ebf5!important;
border-bottom:1px solid #fff!important;
font-weight: normal;
transition:none!important;
}
}
}
.ant-tabs-tabpane{
padding: 15px;
.ant-row{
margin: 10px 0;
}
.ant-select,.ant-input-number{
width: 100px;
}
}
}
}
</style>
<style lang="scss" scoped>
.container-widthEn{
width: 755px;
}
.container-widthCn{
width: 608px;
}
.language{
text-align: center;
position: absolute;
right: 13px;
top: 13px;
border: 1px solid transparent;
height: 40px;
line-height: 38px;
font-size: 16px;
color: #409eff;
z-index: 1;
background: #f5f7fa;
outline: none;
width: 47px;
border-bottom: 1px solid #e6ebf5;
border-radius: 0;
}
.card-container{
.bottom{
display: flex;
justify-content: center;
padding: 10px 0 0 0;
.cronButton{
margin: 0 10px;
line-height: 40px;
}
}
}
.tabBody{
.a-row{
margin: 10px 0;
.long{
.a-select{
width:354px;
}
}
.a-input-number{
width: 110px;
}
}
}
</style>

698
ant-design-vue-jeecg/src/views/jeecg/report/Analysis.vue Normal file
View File

@ -0,0 +1,698 @@
<template>
<div class="page-header-index-wide">
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area :dataSource="chartData.sll" />
</div>
<template slot="footer">今日受理量：<span>{{ todaySll }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area :dataSource="chartData.bjl"/>
</div>
<template slot="footer">今日办结量：<span>{{ todayBjl }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-bar :dataSource="chartData.isll"/>
</div>
<template slot="footer">用户今日受理量：<span>{{ todayISll }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-bar :dataSource="chartData.ibjl"/>
</div>
<template slot="footer">用户今日办结量：<span>{{ todayIBjl }}</span></template>
</chart-card>
</a-col>
</a-row>
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}" />
</div>
<a-tab-pane loading="true" tab="受理监管" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="受理量统计" />
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a-row>
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="交互监管" key="2">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar-multid :dataSource="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a-row>
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="效率监管" key="3">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<line-chart-multid :dataSource="xljgData" :fields="xljgFields" title="平台与部门交互效率统计"></line-chart-multid>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a-row>
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="存储监管" key="4">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<a-row>
<template v-if="diskInfo && diskInfo.length>0">
<a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
<dash-chart-demo :title="item.name" :dataSource="item.restPPT"></dash-chart-demo>
</a-col>
</template>
</a-row>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a-row>
<a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</div>
</a-card>
<a-row :gutter="12">
<a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<a-radio-group defaultValue="1">
<a-radio-button value="1">转移登记</a-radio-button>
<a-radio-button value="2">抵押登记</a-radio-button>
</a-radio-group>
</div>
<a-tab-pane loading="true" tab="业务流程限时监管" key="1">
<a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination">
<template slot="flowRate" slot-scope="text, record, index">
<a-progress :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
</template>
</a-table>
</a-tab-pane>
<a-tab-pane loading="true" tab="业务节点限时监管" key="2">
<a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination">
<template slot="flowRate" slot-scope="text, record, index">
<span style="color: red;">{{ record.flowRate }}分钟</span>
</template>
</a-table>
</a-tab-pane>
</a-tabs>
</a-card>
</a-row>
</div>
</template>
<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import AreaChartTy from '@/components/chart/AreaChartTy'
import DashChartDemo from '@/components/chart/DashChartDemo'
import BarMultid from '@/components/chart/BarMultid'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import Trend from '@/components/Trend'
import { getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import moment from 'dayjs'
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '白鹭岛 ' + (i+1) + ' 号店',
total: 1234.56 - i * 100
})
}
const dataCol1 = [{
title: '业务号',
align:"center",
dataIndex: 'reBizCode'
},{
title: '权利类型',
align:"center",
dataIndex: 'droitType'
},{
title: '登记类型',
align:"center",
dataIndex: 'registeType'
},{
title: '座落',
align:"center",
dataIndex: 'beLocated'
},{
title: '权利人',
align:"center",
dataIndex: 'qlr'
},{
title: '义务人',
align:"center",
dataIndex: 'ywr'
},{
title: '受理人',
align:"center",
dataIndex: 'acceptBy'
},{
title: '受理时间',
align:"center",
dataIndex: 'acceptDate'
},{
title: '当前节点',
align:"center",
dataIndex: 'curNode'
},{
title: '办理进度',
align:"center",
dataIndex: 'flowRate',
scopedSlots: { customRender: 'flowRate' }
}];
const dataCol2 = [{
title: '业务号',
align:"center",
dataIndex: 'reBizCode'
},{
title: '权利类型',
align:"center",
dataIndex: 'droitType'
},{
title: '登记类型',
align:"center",
dataIndex: 'registeType'
},{
title: '座落',
align:"center",
dataIndex: 'beLocated'
},{
title: '权利人',
align:"center",
dataIndex: 'qlr'
},{
title: '义务人',
align:"center",
dataIndex: 'ywr'
},{
title: '受理人',
align:"center",
dataIndex: 'acceptBy'
},{
title: '发起时间',
align:"center",
dataIndex: 'acceptDate'
},{
title: '当前节点',
align:"center",
dataIndex: 'curNode'
},{
title: '超时时间',
align:"center",
dataIndex: 'flowRate',
scopedSlots: { customRender: 'flowRate' }
}];
const jhjgData = [
{ type: '房管', '一月': 900, '二月': 1120, '三月': 1380, '四月': 1480, '五月': 1450, '六月': 1100, '七月':1300, '八月':900,'九月':1000 ,'十月':1200 ,'十一月':600 ,'十二月':900 },
{ type: '税务', '一月':1200, '二月': 1500, '三月': 1980, '四月': 2000, '五月': 1000, '六月': 600, '七月':900, '八月':1100,'九月':1300 ,'十月':2000 ,'十一月':900 ,'十二月':1100 },
{ type: '不动产', '一月':2000, '二月': 1430, '三月': 1300, '四月': 1400, '五月': 900, '六月': 500, '七月':600, '八月':1000,'九月':600 ,'十月':1000 ,'十一月':1500 ,'十二月':1200 }
]
const jhjgFields=[
'一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'
]
const xljgData = [
{type:'一月',"房管":1.12,"税务":1.55,"不动产":1.2},
{type:'二月',"房管":1.65,"税务":1.32,"不动产":1.42},
{type:'三月',"房管":1.85,"税务":1.1,"不动产":1.5},
{type:'四月',"房管":1.33,"税务":1.63,"不动产":1.4},
{type:'五月',"房管":1.63,"税务":1.8,"不动产":1.7},
{type:'六月',"房管":1.85,"税务":1.98,"不动产":1.8},
{type:'七月',"房管":1.98,"税务":1.5,"不动产":1.76},
{type:'八月',"房管":1.48,"税务":1.2,"不动产":1.3},
{type:'九月',"房管":1.41,"税务":1.9,"不动产":1.6},
{type:'十月',"房管":1.1,"税务":1.1,"不动产":1.4},
{type:'十一月',"房管":1.85,"税务":1.6,"不动产":1.5},
{type:'十二月',"房管":1.5,"税务":1.4,"不动产":1.3}
]
const xljgFields=["房管","税务","不动产"]
export default {
name: "Analysis",
components: {
ATooltip,
ACol,
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
LineChartMultid,
AreaChartTy,
DashChartDemo,
BarMultid
},
data() {
return {
xljgData,
xljgFields,
jhjgData,
jhjgFields,
loading: true,
rankList,
zsll:0,
zbjl:0,
todaySll:0,
todayBjl:0,
todayISll:0,
todayIBjl:0,
registerTypeList:[{
text:"业务受理"
},{
text:"业务管理"
},{
text:"文件管理"
},{
text:"信息查询"
}],
// 分页参数
ipagination:{
current: 1,
pageSize: 5,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
//数据集
dataSource:[],
dataSource1:[],
dataSource2:[],
url:{
analysis:"/sps/register/analysis",
list:"sps/register/virtualList",
countSll:"sps/register/sllTenDaysCount",
countBjl:"sps/register/bjlTenDaysCount",
countISll:'sps/register/ISllTenDaysCount',
countIBjl:'sps/register/IBjlTenDaysCount',
queryDiskInfo:'api/queryDiskInfo'
},
chartData:{
sll:[],
bjl:[],
isll:[],
ibjl:[]
},
cardCount:{
sll:0,
bjl:0,
isll:0,
ibjl:0
},
columns:dataCol1,
columns2:dataCol2,
diskInfo:[]
}
},
methods:{
goPage(index){
if(index==0){
this.$router.push({
path: '/isps/registerStepForm',
name: 'isps-registerStepForm',
});
}else if(index==1){
this.$router.push({
path: '/isps/registerList',
name: 'isps-registerList',
});
}else if(index==2){
this.$router.push({
path: '/isps/fileManage',
name: 'isps-fileManage',
});
}else if(index==3){
this.$router.push({
path: '/isps/infoSearch',
name: 'isps-infoSearch',
});
}
},
loadList (arg){
if(arg===1){
this.ipagination.current = 1;
}
var params = this.getQueryParams();//查询条件
getAction(this.url.list,params).then((res)=>{
console.log("dsdsd",res.result)
this.dataSource1 = res.result.data1;
this.dataSource2 = res.result.data2;
this.ipagination.total = 5;
});
},
getQueryParams(){
var param = {flowStatus:"-3"};
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
return filterObj(param);
},
formatRespectiveHoldCert(value){
return (value=="1"||eval(value))?"是":"否"
},
formatCertFormat(value){
if(value=="1"){
return "单一版"
}else if(value=="2"){
return "集成版"
}else{
return value;
}
},
getFlowRateNumber(value){
return Number(value)
},
getFlowPercent(record){
if(record.flowStatus=="3"){
return 100
}else if(record.flowStatus=="0"){
return 0
}else{
return record.flowRate
}
},
getFlowStatus(status){
if(status=="4"){
return "exception";
}else if(status=="0"){
return "normal";
}else if(status=="3"){
return "success";
}else{
return "active";
}
},
queryCount(){
getAction(this.url.analysis).then((res)=>{
if(res.success){
this.cardCount = res.result
}
console.log(res);
});
},
loadDiskInfo(){
getAction(this.url.queryDiskInfo).then((res)=>{
if(res.success){
console.log(res.result)
let one=0,two="";
for(let a in res.result){
let tempNum = Number(res.result[a].max)
if(tempNum>one){
one = tempNum
two = res.result[a].name
}
}
let ontItem = res.result.filter((item)=>{return item.name == two})[0]
ontItem.restPPT = ontItem.restPPT/10
this.diskInfo.push(ontItem);
if(res.result.length>1){
let one2=0,two2="";
for(let a in res.result){
if(res.result[a].name == two){
continue;
}
let tempNum = Number(res.result[a].max)
if(tempNum>one2){
one2 = tempNum
two2 = res.result[a].name
}
}
let one2Item = res.result.filter((item)=>{return item.name == two2})[0]
one2Item.restPPT = one2Item.restPPT/10
this.diskInfo.push(one2Item);
}
}else{
console.log(res.message)
}
})
},
loadChartData(){
getAction(this.url.countSll).then((res)=>{
if(res.success){
let map = res.result;
for(var key in map){
let dataStr = key;
let value = map[key];
let today = moment(new Date()).format('YYYY-MM-DD');
if(dataStr == today){
this.todaySll = map[today];
}
this.chartData.sll.push({
x: dataStr,
y: value
});
}
}
}),
getAction(this.url.countBjl).then((res)=>{
if(res.success){
let map = res.result;
for(var key in map){
let dataStr = key;
let value = map[key];
let today = moment(new Date()).format('YYYY-MM-DD');
if(dataStr == today){
this.todayBjl = map[today];
}
this.chartData.bjl.push({
x: dataStr,
y: value
});
}
}
}),
getAction(this.url.countISll).then((res)=>{
if(res.success){
let map = res.result;
for(var key in map){
let dataStr = key;
let value = map[key];
let today = moment(new Date()).format('YYYY-MM-DD');
if(dataStr == today){
this.todayISll = map[today];
}
this.chartData.isll.push({
x: key,
y: value
});
}
}
}),
getAction(this.url.countIBjl).then((res)=>{
if(res.success){
let map = res.result;
for(var key in map){
let dataStr = key;
let value = map[key];
let today = moment(new Date()).format('YYYY-MM-DD');
if(dataStr == today){
this.todayIBjl = map[today];
}
this.chartData.ibjl.push({
x: key,
y: value
});
}
}
})
}
},
created() {
this.loadDiskInfo()
this.queryCount();
this.loadChartData();
this.loadList(1);
setTimeout(() => {
this.loading = !this.loading
}, 1000)
}
}
</script>
<style lang="scss" scoped>
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
.item-group {
padding: 20px 0 8px 24px;
font-size: 0;
a {
color: rgba(0, 0, 0, 0.65);
display: inline-block;
font-size: 14px;
margin-bottom: 13px;
width: 25%;
}
}
.item-group {
.more-btn {
margin-bottom: 13px;
text-align: center;
}
}
.list-content-item {
color: rgba(0, 0, 0, .45);
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin-left: 40px;
}
@media only screen and (min-width: 1600px) {
.list-content-item{
margin-left:60px;
}
}
@media only screen and (max-width: 1300px) {
.list-content-item{
margin-left:20px;
}
.width-hidden4{
display:none
}
}
.list-content-item{
span{line-height: 20px;}
}
.list-content-item{
p{margin-top: 4px;margin-bottom:0;line-height:22px;}
}
.anty-list-cust {
.ant-list-item-meta{flex: 0.3 !important;}
}
.anty-list-cust {
.ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
}
</style>

315
ant-design-vue-jeecg/src/views/jeecg/report/ArchivesStatisticst.vue Normal file
View File

@ -0,0 +1,315 @@
<template>
<a-card :bordered="false">
<a-tabs defaultActiveKey="1" @change="callback">
<a-tab-pane tab="柱状图" key="1">
<a-row :gutter="24">
<a-col :span="10">
<a-radio-group :value="barType" @change="statisticst">
<a-radio-button value="year">按年统计</a-radio-button>
<a-radio-button value="month">按月统计</a-radio-button>
<a-radio-button value="category">按类别统计</a-radio-button>
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
</a-radio-group>
</a-col>
<a-col :span="14">
<a-form v-if="barType === 'month' && false" layout="inline" style="margin-top: -4px">
<a-form-item label="月份区间">
<a-range-picker
:placeholder="['开始月份', '结束月份']"
format="YYYY-MM"
:value="barValue"
:mode="barDate"
@panelChange="handleBarDate"/>
</a-form-item>
<a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatebar">查询</a-button>
<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" :height="400"/>
</a-row>
</a-tab-pane>
<a-tab-pane tab="饼状图" key="2">
<a-row :gutter="24">
<a-col :span="10">
<a-radio-group :value="pieType" @change="statisticst">
<a-radio-button value="year">按年统计</a-radio-button>
<a-radio-button value="month">按月统计</a-radio-button>
<a-radio-button value="category">按类别统计</a-radio-button>
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
</a-radio-group>
</a-col>
<a-col :span="14">
<a-form v-if="pieType === 'month' && false" layout="inline" style="margin-top: -4px">
<a-row :gutter="24">
<a-form-item label="月份区间">
<a-range-picker
:placeholder="['开始月份', '结束月份']"
format="YYYY-MM"
:value="pieValue"
:mode="pieDate"
@panelChange="handlePieDate"/>
</a-form-item>
<a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatepie">查询</a-button>
<a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置</a-button>
</a-row>
</a-form>
</a-col>
<pie class="statistic" title="档案统计" :dataSource="countSource" :height="450"/>
</a-row>
</a-tab-pane>
</a-tabs>
</a-card>
</template>
<script>
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import ACol from 'ant-design-vue/es/grid/Col'
import { getAction } from '@/api/manage'
export default {
name: 'ArchivesStatisticst',
components: {
ACol,
Bar,
Pie
},
data() {
return {
description: '档案统计页面',
// 查询条件
queryParam: {},
// 数据集
countSource: [],
// 柱状图
barType: 'year',
barDate: ['month', 'month'],
barValue: [],
// 饼状图
pieType: 'year',
pieDate: ['month', 'month'],
pieValue: [],
// 统计图类型
tabStatus:"bar",
url: {
getYearCountInfo: "/api/report/getYearCountInfo",
getMonthCountInfo:"/api/report/getMonthCountInfo",
getCntrNoCountInfo:"/api/report/getCntrNoCountInfo",
getCabinetCountInfo:"/api/report/getCabinetCountInfo",
},
}
},
created() {
let url = this.url.getYearCountInfo;
this.loadDate(url,'year',{});
},
methods: {
loadDate(url,type,param) {
getAction(url,param,'get').then((res) => {
if (res.success) {
this.countSource = [];
if(type === 'year'){
this.getYearCountSource(res.result);
}
if(type === 'month'){
this.getMonthCountSource(res.result);
}
if(type === 'category'){
this.getCategoryCountSource(res.result);
}
if(type === 'cabinet'){
this.getCabinetCountSource(res.result);
}
}else{
var that=this;
that.$message.warning(res.message);
}
})
},
getYearCountSource(data){
for (let i = 0; i < data.length; i++) {
if(this.tabStatus === "bar"){
this.countSource.push({
x: `${data[i].year}年`,
y: data[i].yearcount
})
}else{
this.countSource.push({
item: `${data[i].year}年`,
count:data[i].yearcount
})
}
}
},
getMonthCountSource(data){
for (let i = 0; i < data.length; i++) {
if(this.tabStatus === "bar"){
this.countSource.push({
x: data[i].month,
y: data[i].monthcount
})
}else{
this.countSource.push({
item: data[i].month,
count:data[i].monthcount
})
}
}
},
getCategoryCountSource(data){
for (let i = 0; i < data.length; i++) {
if(this.tabStatus ==="bar"){
this.countSource.push({
x: data[i].classifyname,
y: data[i].cntrnocount
})
}else{
this.countSource.push({
item: data[i].classifyname,
count:data[i].cntrnocount
})
}
}
},
getCabinetCountSource(data){
for (let i = 0; i < data.length; i++) {
if(this.tabStatus === "bar"){
this.countSource.push({
x: data[i].cabinetname,
y: data[i].cabinetcocunt
})
}else{
this.countSource.push({
item: data[i].cabinetname,
count:data[i].cabinetcocunt
})
}
}
},
// 选择统计图类别
callback(key) {
if(key === "1"){
this.tabStatus = "bar";
this.queryDatebar();
}else{
this.tabStatus = "pie";
this.queryDatepie();
}
},
// 选择统计类别
statisticst(e) {
if(this.tabStatus === "pie"){
this.pieType = e.target.value;
this.queryDatepie();
}else{
this.barType = e.target.value;
this.queryDatebar();
}
},
// 按月份查询
queryDatebar(){
if(this.barValue.length>0){
this.getUrl(this.barType,{startTime:this.barValue[0]._d,endTime:this.barValue[1]._d});
}else{
this.getUrl(this.barType,{});
}
},
queryDatepie(){
if(this.pieValue.length>0){
this.getUrl(this.pieType,{startTime:this.pieValue[0]._d,endTime:this.pieValue[1]._d});
}else{
this.getUrl(this.pieType,{});
}
},
searchReset(){
console.log(this.tabStatus);
if(this.tabStatus === "pie"){
this.pieValue = [];
}else{
this.barValue = [];
}
this.getUrl(this.barType,{});
},
// 选择请求url
getUrl(type,param){
let url = "";
if(type === 'year'){
url = this.url.getYearCountInfo;
}
if(type === 'month'){
url = this.url.getMonthCountInfo;
}
if(type === 'category'){
url = this.url.getCntrNoCountInfo;
}
if(type === 'cabinet'){
url = this.url.getCabinetCountInfo;
}
this.loadDate(url,type,param);
},
// 选择月份日期
handleBarDate(value, mode) {
this.barValue = value
this.barDate = [
mode[0] === 'date' ? 'month' : mode[0],
mode[1] === 'date' ? 'month' : mode[1]
]
},
handlePieDate(value, mode) {
this.pieValue = value
this.pieDate = [
mode[0] === 'date' ? 'month' : mode[0],
mode[1] === 'date' ? 'month' : mode[1]
]
},
}
}
</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
}
.statistic {
padding: 0px !important;
margin-top: 50px;
}
.statistic h4 {
margin-bottom: 20px;
text-align: center !important;
font-size: 24px !important;;
}
.statistic #canvas_1 {
width: 100% !important;
}
</style>

141
ant-design-vue-jeecg/src/views/jeecg/report/ViserChartDemo.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<a-card :bordered="false">
<a-tabs defaultActiveKey="1">
<!-- 柱状图 -->
<a-tab-pane tab="柱状图" key="1">
<bar title="销售额排行" :dataSource="barData" :height="height"/>
</a-tab-pane>
<!-- 多列柱状图 -->
<a-tab-pane tab="多列柱状图" key="2">
<bar-multid title="多列柱状图" :height="height"/>
</a-tab-pane>
<!-- 迷你柱状图 -->
<a-tab-pane tab="迷你柱状图" key="3">
<mini-bar :dataSource="barData" :width="400" :height="200"/>
</a-tab-pane>
<!-- 面积图 -->
<a-tab-pane tab="面积图" key="4">
<area-chart-ty title="销售额排行" :dataSource="areaData" x="月份" y="销售额" :height="height"/>
</a-tab-pane>
<!-- 迷你面积图 -->
<a-tab-pane tab="迷你面积图" key="5">
<div style="padding-top: 100px;width:600px;height:200px">
<mini-area :dataSource="areaData" x="月份" y="销售额" :height="height"/>
</div>
</a-tab-pane>
<!-- 多行折线图 -->
<a-tab-pane tab="多行折线图" key="6">
<line-chart-multid title="多行折线图" :height="height"/>
</a-tab-pane>
<!-- 饼图 -->
<a-tab-pane tab="饼图" key="7">
<pie title="饼图" :height="height"/>
</a-tab-pane>
<!-- 雷达图 -->
<a-tab-pane tab="雷达图" key="8">
<radar title="雷达图" :height="height"/>
</a-tab-pane>
<!-- 仪表盘 -->
<a-tab-pane tab="仪表盘" key="9">
<dash-chart-demo title="仪表盘" :value="9" :height="height"/>
</a-tab-pane>
<!-- 进度条 -->
<a-tab-pane tab="进度条" key="10">
<mini-progress :percentage="30" :target="40" :height="30"/>
<mini-progress :percentage="51" :target="60" :height="30" color="#FFA500"/>
<mini-progress :percentage="66" :target="80" :height="30" color="#1E90FF"/>
<mini-progress :percentage="74" :target="70" :height="30" color="#FF4500"/>
<mini-progress :percentage="92" :target="100" :height="30" color="#49CC49"/>
</a-tab-pane>
<!-- 排名列表 -->
<a-tab-pane tab="排名列表" key="11">
<rank-list title="门店销售排行榜" :list="rankList" style="width: 600px;margin: 0 auto;"/>
</a-tab-pane>
<!-- TransferBar -->
<a-tab-pane tab="TransferBar" key="12">
<transfer-bar title="年度消耗流量一览表" :data="barData" x="月份" y="流量(Mb)" :height="height"/>
</a-tab-pane>
<!-- Trend -->
<a-tab-pane tab="Trend" key="13">
<trend title="Trend" term="Trend：" :percentage="30"/>
</a-tab-pane>
<!-- Liquid -->
<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>
<script>
import AreaChartTy from '@/components/chart/AreaChartTy'
import Bar from '@/components/chart/Bar'
import BarMultid from '@/components/chart/BarMultid'
import DashChartDemo from '@/components/chart/DashChartDemo'
import LineChartMultid from '@/components/chart/LineChartMultid'
import Liquid from '@/components/chart/Liquid'
import MiniBar from '@/components/chart/MiniBar'
import MiniArea from '@/components/chart/MiniArea'
import MiniProgress from '@/components/chart/MiniProgress'
import Pie from '@/components/chart/Pie'
import Radar from '@/components/chart/Radar'
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, BarAndLine
},
data() {
return {
height: 420,
rankList: [],
barData: [],
areaData: []
}
},
created() {
setTimeout(() => {
this.loadBarData()
this.loadAreaData()
this.loadRankListData()
}, 100)
},
methods: {
loadData(x, y, max, min, before = '', after = '月') {
let data = []
for (let i = 0; i < 12; i += 1) {
data.push({
[x]: `${before}${i + 1}${after}`,
[y]: Math.floor(Math.random() * max) + min
})
}
return data
},
// 加载柱状图数据
loadBarData() {
this.barData = this.loadData('x', 'y', 1000, 200)
},
// 加载AreaChartTy的数据
loadAreaData() {
this.areaData = this.loadData('x', 'y', 500, 100)
},
loadRankListData() {
this.rankList = this.loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店')
}
}
}
</script>
<style scoped>
</style>

161
ant-design-vue-jeecg/src/views/jeecg/tablist/JeecgOrderCustomerList.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<a-card :bordered="false">
<!-- 操作按钮区域 -->
<div class="table-operator" :md="24" :sm="24" style="margin: -25px 0px 10px 0px">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;" @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<jeecgOrderCustomer-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderCustomer-modal>
</a-card>
</template>
<script>
import JeecgOrderCustomerModal from './form/JeecgOrderCustomerModal'
import JeecgOrderDMainList from './JeecgOrderDMainList'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction} from '@/api/manage'
export default {
name: "JeecgOrderCustomerList",
mixins: [JeecgListMixin],
components: {
JeecgOrderDMainList,
JeecgOrderCustomerModal
},
data() {
return {
description: '订单客户信息',
// 表头
columns: [
{
title: '客户名',
align: "center",
width: 100,
dataIndex: 'name',
key: 'name',
},
{
title: '性别',
align: "center",
dataIndex: 'sex',
customRender: function (text) {
if (text == 1) {
return "男";
} else if (text == 2) {
return "女";
} else {
return text;
}
}
},
{
title: '身份证号码',
align: "center",
dataIndex: 'idcard',
},
{
title: '电话',
dataIndex: 'telphone',
align: "center",
},
{
title: '操作',
key: 'operation',
align: 'center',
width: 130,
scopedSlots: {customRender: 'action'},
},
],
url: {
list: "/test/order/listOrderCustomerByMainId",
delete: "/test/order/deleteCustomer",
deleteBatch: "/test/order/deleteBatchCustomer",
}
}
},
methods: {
loadData(arg) {
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams();
getAction(this.url.list, {mainId: params.mainId}).then((res) => {
if (res.success) {
this.dataSource = res.result;
} else {
this.dataSource = null;
}
})
},
getOrderMain(orderId) {
this.queryParam.mainId = orderId;
this.loadData(1);
},
handleAdd: function () {
this.$refs.modalForm.add(this.queryParam.mainId);
this.$refs.modalForm.title = "添加客户信息";
},
}
}
</script>
<style scoped>
.ant-card {
margin-left: -30px;
margin-right: -30px;
}
</style>

284
ant-design-vue-jeecg/src/views/jeecg/tablist/JeecgOrderDMainList.vue Normal file
View File

@ -0,0 +1,284 @@
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item label="订单号">
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="订单类型">
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
filterMultiple="filterMultiple"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:type}"
@change="handleTableChange"
:customRow="clickThenCheck"
>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</span>
</a-table>
</div>
<!-- table区域-end -->
<a-tabs defaultActiveKey="1">
<a-tab-pane tab="客户信息" key="1">
<Jeecg-Order-Customer-List ref="JeecgOrderCustomerList"></Jeecg-Order-Customer-List>
</a-tab-pane>
<a-tab-pane tab="机票信息" key="2" forceRender>
<Jeecg-Order-Ticket-List ref="JeecgOrderTicketList"></Jeecg-Order-Ticket-List>
</a-tab-pane>
</a-tabs>
<!-- 表单区域 -->
<jeecgOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderDMain-modal>
</a-card>
</template>
<script>
import JeecgOrderDMainModal from './form/JeecgOrderDMainModal'
import JeecgOrderCustomerList from './JeecgOrderCustomerList'
import JeecgOrderTicketList from './JeecgOrderTicketList'
import {deleteAction} from '@/api/manage'
import JeecgOrderCustomerModal from './form/JeecgOrderCustomerModal'
import JeecgOrderTicketModal from './form/JeecgOrderTicketModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
export default {
name: "JeecgOrderDMainList",
mixins: [JeecgListMixin],
components: {
JeecgOrderTicketModal,
JeecgOrderCustomerModal,
JeecgOrderDMainModal,
JeecgOrderCustomerList,
JeecgOrderTicketList,
},
data() {
return {
description: '订单管理页面',
/* 分页参数 */
ipagination:{
current: 1,
pageSize: 5,
pageSizeOptions: ['5', '10', '20'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
// 表头
columns: [{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '订单号',
align: "center",
dataIndex: 'orderCode'
},
{
title: '订单类型',
align: "center",
dataIndex: 'ctype',
customRender: (text) => {
let re = "";
if (text === '1') {
re = "国内订单";
} else if (text === '2') {
re = "国际订单";
}
return re;
}
},
{
title: '订单日期',
align: "center",
dataIndex: 'orderDate'
},
{
title: '订单金额',
align: "center",
dataIndex: 'orderMoney'
},
{
title: '订单备注',
align: "center",
dataIndex: 'content'
},
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}],
// 分页参数
type: "radio",
url: {
list: "/test/order/orderList",
delete: "/test/order/delete",
deleteBatch: "/test/order/deleteBatch",
},
}
},
methods: {
clickThenCheck(record) {
return {
on: {
click: () => {
this.onSelectChange(record.id.split(","), [record]);
}
}
};
},
onSelectChange(selectedRowKeys, selectionRows) {
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectionRows;
this.$refs.JeecgOrderCustomerList.getOrderMain(this.selectedRowKeys[0]);
this.$refs.JeecgOrderTicketList.getOrderMain(this.selectedRowKeys[0]);
},
onClearSelected() {
this.selectedRowKeys = [];
this.selectionRows = [];
this.$refs.JeecgOrderCustomerList.queryParam.mainId = null;
this.$refs.JeecgOrderTicketList.queryParam.mainId = null;
this.$refs.JeecgOrderCustomerList.loadData();
this.$refs.JeecgOrderTicketList.loadData();
this.$refs.JeecgOrderCustomerList.selectedRowKeys = [];
this.$refs.JeecgOrderCustomerList.selectionRows = [];
this.$refs.JeecgOrderTicketList.selectedRowKeys = [];
this.$refs.JeecgOrderTicketList.selectionRows = [];
},
handleDelete: function (id) {
var that = this;
deleteAction(that.url.delete, {id: id}).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.loadData();
this.$refs.JeecgOrderCustomerList.loadData();
this.$refs.JeecgOrderTicketList.loadData();
} else {
that.$message.warning(res.message);
}
});
},
searchQuery:function(){
this.selectedRowKeys = [];
this.selectionRows = [];
this.$refs.JeecgOrderCustomerList.queryParam.mainId = null;
this.$refs.JeecgOrderTicketList.queryParam.mainId = null;
this.$refs.JeecgOrderCustomerList.loadData();
this.$refs.JeecgOrderTicketList.loadData();
this.$refs.JeecgOrderCustomerList.selectedRowKeys = [];
this.$refs.JeecgOrderCustomerList.selectionRows = [];
this.$refs.JeecgOrderTicketList.selectedRowKeys = [];
this.$refs.JeecgOrderTicketList.selectionRows = [];
this.loadData();
}
}
}
</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>

150
ant-design-vue-jeecg/src/views/jeecg/tablist/JeecgOrderTicketList.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<a-card :bordered="false">
<!-- 操作按钮区域 -->
<div class="table-operator" :md="24" :sm="24" style="margin: -25px 0px 10px 2px">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
<a-icon type="delete"/>
删除
</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;" @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<JeecgOrderTicket-modal ref="modalForm" @ok="modalFormOk"></JeecgOrderTicket-modal>
</a-card>
</template>
<script>
import JeecgOrderTicketModal from './form/JeecgOrderTicketModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction} from '@/api/manage'
export default {
name: "JeecgOrderTicketList",
mixins: [JeecgListMixin],
components: {
JeecgOrderTicketModal,
},
data() {
return {
description: '机票信息',
// 表头
columns: [{
title: '航班号',
align: "center",
dataIndex: 'ticketCode'
}, {
title: '航班时间',
align: "center",
dataIndex: 'tickectDate'
}, {
title: '订单号码',
align: "center",
dataIndex: 'orderId',
}, {
title: '创建人',
align: "center",
dataIndex: 'createBy'
}, {
title: '创建时间',
align: "center",
dataIndex: 'createTime',
sorter: true
}, {
title: '操作',
key: 'operation',
align: "center",
width: 130,
scopedSlots: {customRender: 'action'},
}],
url: {
list: "/test/order/listOrderTicketByMainId",
delete: "/test/order/deleteTicket",
deleteBatch: "/test/order/deleteBatchTicket",
}
}
},
methods: {
loadData(arg) {
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams();
getAction(this.url.list, {mainId: params.mainId}).then((res) => {
if (res.success) {
this.dataSource = res.result;
} else {
this.dataSource = null;
}
})
},
getOrderMain(orderId) {
this.queryParam.mainId = orderId;
this.loadData(1);
},
handleAdd: function () {
this.$refs.modalForm.add(this.queryParam.mainId);
this.$refs.modalForm.title = "添加机票信息";
},
}
}
</script>
<style scoped>
.ant-card {
margin-left: -30px;
margin-right: -30px;
}
</style>

346
ant-design-vue-jeecg/src/views/jeecg/tablist/form/JeecgOrderCustomerModal.vue Normal file
View File

@ -0,0 +1,346 @@
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
:okButtonProps="{ props: {disabled: disableSubmit} }"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<!-- 编辑 -->
<a-spin :spinning="confirmLoading" v-if="editStatus">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="客户姓名"
hasFeedback>
<a-input placeholder="请输入客户姓名" v-decorator="['name', {rules: [{ required: true, message: '请输入客户姓名!' }]}]"
:readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="性别"
hasFeedback>
<a-select v-decorator="['sex', {}]" placeholder="请选择性别">
<a-select-option value="1">男性</a-select-option>
<a-select-option value="2">女性</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="身份证号码"
hasFeedback>
<a-input placeholder="请输入身份证号码" v-decorator="['idcard', validatorRules.idcard]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="身份证扫描件"
hasFeedback>
<a-upload
:action="uploadAction"
listType="picture-card"
:headers="headers"
:fileList="fileList"
@change="handleChange"
@preview="handlePreview"
>
<a-button>
<a-icon type="upload"/>
upload
</a-button>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handlePicCancel">
<img alt="example" style="width: 100%" :src="previewImage"/>
</a-modal>
<br/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="联系方式"
hasFeedback>
<a-input v-decorator="[ 'telphone', validatorRules.telphone]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号码"
v-model="this.orderId"
:hidden="hiding"
hasFeedback>
<a-input v-decorator="[ 'orderId', {}]" disabled="disabled"/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import { getUploadFileList,getFilePaths } from '@/utils/commonUploadFile.js'
export default {
name: "JeecgOrderCustomerModal",
data() {
return {
title: "操作",
visible: false,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
// 表头
columns: [
{
title: '客户名',
align: "center",
dataIndex: 'name',
},
{
title: '性别',
align: "center",
dataIndex: 'sex',
},
{
title: '身份证号码',
align: "center",
dataIndex: 'idcard',
},
{
title: '身份证扫描件',
align: "center",
dataIndex: 'idcardPic',
},
{
title: '电话',
dataIndex: 'telphone',
align: "center",
},
{
title: '订单号码',
dataIndex: 'orderId',
align: "center",
},
{
title: '创建人',
dataIndex: 'createBy',
align: "center",
},
{
title: '创建时间',
dataIndex: 'createTime',
align: "center",
},
{
title: '更新时间',
dataIndex: 'updateBy',
align: "center",
},
{
title: '更新人',
dataIndex: 'updateTime',
align: "center",
},
],
fileList: [],
disableSubmit: false,
selectedRowKeys: [],
orderId: "",
hiding: false,
headers: {},
picUrl: "",
picArray:[],
previewVisible: false,
previewImage: '',
addStatus: false,
editStatus: false,
confirmLoading: false,
form: this.$form.createForm(this),
url: {
add: "/test/order/addCustomer",
edit: "/test/order/editCustomer",
fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
imgerver: window._CONFIG['domianURL'] + "/sys/common/view",
getOrderCustomerList: "/test/order/listOrderCustomerByMainId",
},
validatorRules: {
telphone: {rules: [{validator: this.validateMobile}]},
idcard: {rules: [{validator: this.validateIdCard}]}
},
}
},
computed: {
uploadAction: function () {
return this.url.fileUpload;
}
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN);
this.headers = {"X-Access-Token": token}
},
methods: {
add(orderId) {
this.hiding = true;
if (orderId) {
this.orderId = orderId;
this.edit({orderId}, '');
} else {
this.$message.warning("请选择一个客户信息");
}
},
detail(record) {
this.edit(record, 'd');
},
edit(record, v) {
if (v == 'e') {
this.hiding = false;
this.disableSubmit = false;
} else if (v == 'd') {
this.hiding = false;
this.disableSubmit = true;
} else {
this.hiding = true;
this.disableSubmit = false;
}
this.form.resetFields();
this.orderId = record.orderId;
let currFileList = getUploadFileList(record.idcardPic)
this.fileList = [...currFileList]
this.model = Object.assign({}, record);
if (record.id) {
this.hiding = false;
this.addStatus = false;
this.editStatus = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'id', 'name', 'sex', 'idcard','telphone', 'orderId', 'createBy', 'createTime', 'updateBy', 'updateTime'))
});
} else {
this.addStatus = false;
this.editStatus = true;
}
this.visible = true;
},
close() {
this.$emit('close');
this.visible = false;
this.picUrl = "";
this.fileList=[];
},
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);
console.log(formData);
formData.orderId = this.orderId;
formData.idcardPic = getFilePaths(this.fileList)
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();
},
validateMobile(rule, value, callback) {
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
callback();
} else {
callback("您的手机号码格式不正确!");
}
},
validateIdCard(rule, value, callback) {
if (!value || new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
callback();
} else {
callback("您的身份证号码格式不正确!");
}
},
handleChange(info) {
this.fileList = info.fileList;
if (info.file.status === 'uploading') {
return
}
if (info.file.status === 'done') {
var response = info.file.response;
if (!response.success) {
this.$message.warning(response.message);
}
}
},
handlePicCancel() {
this.previewVisible = false
this.previewImage=''
},
handlePicView(url){
this.previewImage = this.url.imgerver + "/" + url
this.previewVisible = true
},
handlePreview(file) {
this.previewImage = file.url || file.thumbUrl
this.previewVisible = true
},
getIdCardView(url) {
// let pics = this.model.idcardPic.split(",");
//let pics_len = pics.length;
// 显示上传的最后一个图片
return this.url.imgerver + "/" + url
}
}
}
</script>
<style scoped>
/* tile uploaded pictures */
.upload-list-inline > > > .ant-upload-list-item {
float: left;
width: 200px;
margin-right: 8px;
}
.upload-list-inline > > > .ant-upload-animate-enter {
animation-name: uploadAnimateInlineIn;
}
.upload-list-inline > > > .ant-upload-animate-leave {
animation-name: uploadAnimateInlineOut;
}
</style>

176
ant-design-vue-jeecg/src/views/jeecg/tablist/form/JeecgOrderDMainModal.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<a-modal
:title="title"
:width="1000"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<!-- 主表单区域 -->
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号"
hasFeedback>
<a-input
placeholder="请输入订单号"
v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单类型">
<a-select placeholder="请输入订单类型" v-decorator="['ctype',{}]">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单日期">
<a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'orderDate',{}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单金额">
<a-input-number style="width: 200px" v-decorator="[ 'orderMoney', {}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单备注">
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]"/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
import JDate from '@/components/jeecg/JDate'
import pick from 'lodash.pick'
import moment from "moment"
export default {
name: "JeecgOrderDMainModal",
components: {
JDate
},
data() {
return {
title: "操作",
visible: false,
orderMainModel: {
jeecgOrderCustomerList: [{}],
jeecgOrderTicketList: [{}]
},
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {},
url: {
add: "/test/order/add",
edit: "/test/order/edit",
orderCustomerList: "/test/order/listOrderCustomerByMainId",
orderTicketList: "/test/order/listOrderTicketByMainId",
},
}
},
methods: {
add() {
this.edit({});
},
edit(record) {
this.form.resetFields();
this.orderMainModel = Object.assign({}, record);
//初始化明细表数据
console.log(this.orderMainModel.id)
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.orderMainModel, 'orderCode', 'ctype', 'orderMoney', 'content'))
this.form.setFieldsValue({orderDate: this.orderMainModel.orderDate ? moment(this.orderMainModel.orderDate) : null}) //时间格式化
});
console.log(this.orderMainModel)
},
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.orderMainModel.id) {
httpurl += this.url.add;
method = 'post';
} else {
httpurl += this.url.edit;
method = 'put';
}
let orderMainData = Object.assign(this.orderMainModel, values);
//时间格式化
orderMainData.orderDate = orderMainData.orderDate ? orderMainData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null;
let formData = {
...orderMainData
}
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>
.ant-btn {
padding: 0 10px;
margin-left: 3px;
}
.ant-form-item-control {
line-height: 0px;
}
/** 主表单行间距 */
.ant-form .ant-form-item {
margin-bottom: 10px;
}
/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
margin-bottom: 0px;
}
</style>

176
ant-design-vue-jeecg/src/views/jeecg/tablist/form/JeecgOrderTicketModal.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:okButtonProps="{ props: {disabled: disableSubmit} }"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="航班号"
hasFeedback>
<a-input
placeholder="请输入航班号"
:readOnly="disableSubmit"
v-decorator="['ticketCode', {rules:[{ required: true,message: '请输入航班号!'}]}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="航班时间"
hasFeedback>
<j-date v-decorator="['tickectDate',{trigger:'input',rules:[{ required: true,message: '请输入航班号!'}]}]"></j-date>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号码"
v-model="this.orderId"
:hidden="hiding"
hasFeedback>
<a-input v-decorator="[ 'orderId', {}]" disabled="disabled"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="创建人"
:hidden="hiding"
hasFeedback>
<a-input v-decorator="[ 'createBy', {}]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="创建时间"
:hidden="hiding"
hasFeedback>
<a-input v-decorator="[ 'createTime', {}]" :readOnly="disableSubmit"/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import JDate from '@/components/jeecg/JDate'
export default {
components: {
JDate
},
name: 'JeecgOrderTicketModal',
data() {
return {
title: '操作',
visible: false,
model: {},
labelCol: {
xs: {span: 24},
sm: {span: 5}
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16}
},
moment,
format: 'YYYY-MM-DD HH:mm:ss',
disableSubmit: false,
orderId: '',
hiding: false,
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {},
url: {
add: '/test/order/addTicket',
edit: '/test/order/editTicket'
}
}
},
created() {
},
methods: {
add(orderId) {
if (orderId) {
this.edit({orderId}, '')
} else {
this.$message.warning('请选择一条航班数据')
}
},
detail(record) {
this.edit(record, 'd')
},
edit(record, v) {
if (v == 'e') {
this.hiding = false;
this.disableSubmit = false;
} else if (v == 'd') {
this.hiding = false;
this.disableSubmit = true;
} else {
this.hiding = true;
this.disableSubmit = false;
}
this.form.resetFields();
this.orderId = record.orderId;
this.model = Object.assign({}, record);
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'ticketCode', 'tickectDate', 'orderId', 'createBy', 'createTime', 'updateBy', 'updateTime'))
})
},
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.mainId = this.orderId;
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>