Merge branch 'master' of http://10.0.3.43:9090/JeroBoot/jero-boot
This commit is contained in:
yaoyanan
@@ -0,0 +1,613 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="model" v-show="model">
|
||||
<div class="model-show" @click="model = false">
|
||||
<img :src="modelSrc" alt="" @click="model = false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="show-info">
|
||||
<div class="test test1">
|
||||
<vueCropper
|
||||
ref="cropper"
|
||||
:img="option.img"
|
||||
:outputSize="option.size"
|
||||
:outputType="option.outputType"
|
||||
:info="true"
|
||||
:full="option.full"
|
||||
:canMove="option.canMove"
|
||||
:canMoveBox="option.canMoveBox"
|
||||
:fixedBox="option.fixedBox"
|
||||
:original="option.original"
|
||||
:autoCrop="option.autoCrop"
|
||||
:autoCropWidth="option.autoCropWidth"
|
||||
:autoCropHeight="option.autoCropHeight"
|
||||
:centerBox="option.centerBox"
|
||||
:high="option.high"
|
||||
:infoTrue="option.infoTrue"
|
||||
:maxImgSize="option.maxImgSize"
|
||||
@realTime="realTime"
|
||||
@imgLoad="imgLoad"
|
||||
@cropMoving="cropMoving"
|
||||
:enlarge="option.enlarge"
|
||||
:mode="option.mode"
|
||||
:limitMinSize="option.limitMinSize"
|
||||
></vueCropper>
|
||||
</div>
|
||||
<div class="test-button">
|
||||
<button @click="changeImg" class="btn">changeImg</button>
|
||||
<label class="btn" for="uploads">upload</label>
|
||||
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" ref="uploadImg">
|
||||
<button @click="startCrop" v-if="!crap" class="btn">start</button>
|
||||
<button @click="stopCrop" v-else class="btn">stop</button>
|
||||
<button @click="clearCrop" class="btn">clear</button>
|
||||
<button @click="refreshCrop" class="btn">refresh</button>
|
||||
<button @click="changeScale(1)" class="btn">+</button>
|
||||
<button @click="changeScale(-1)" class="btn">-</button>
|
||||
<button @click="rotateLeft" class="btn">rotateLeft</button>
|
||||
<button @click="rotateRight" class="btn">rotateRight</button>
|
||||
<button @click="finish('base64')" class="btn">preview(base64)</button>
|
||||
<button @click="finish('blob')" class="btn">preview(blob)</button>
|
||||
<button @click="() => option.img = ''" class="btn">清除图片</button>
|
||||
<a @click="down('base64')" class="btn">download(base64)</a>
|
||||
<a @click="down('blob')" class="btn">download(blob)</a>
|
||||
<a :href="downImg" download="demo.png" ref="downloadDom"></a>
|
||||
</div>
|
||||
|
||||
<div class="pre">
|
||||
<section class="pre-item">
|
||||
<p>截图框大小</p>
|
||||
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
|
||||
'margin': '5px'}">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pre-item">
|
||||
<p>中等大小</p>
|
||||
<div :style="previewStyle1">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pre-item">
|
||||
<p>迷你大小</p>
|
||||
<div :style="previewStyle2">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pre-item" title="zoom: (100 / previews.w)">
|
||||
<p>固定为100宽度</p>
|
||||
<div :style="previewStyle3">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pre-item" title="zoom: (100 / previews.h)">
|
||||
<p>固定为100高度</p>
|
||||
<div :style="previewStyle4">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display:block; width: 100%;">
|
||||
<label class="c-item">
|
||||
<span>图片默认渲染方式</span>
|
||||
<select v-model="option.mode">
|
||||
<option value="contain">contain</option>
|
||||
<option value="cover">cover</option>
|
||||
<option value="400px auto">400px auto</option>
|
||||
<option value="auto 400px">auto 400px</option>
|
||||
<option value="50%">50%</option>
|
||||
<option value="auto 50%">auto 50%</option>
|
||||
</select>
|
||||
<section>
|
||||
类似css background属性设置 设置不符合规范不生效， 参照文档说明
|
||||
</section>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>上传时图片最大大小(默认会压缩尺寸到这个大小)</span>
|
||||
<input type="nubmer" v-model="option.maxImgSize">
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
|
||||
<input type="checkbox" v-model="option.original">
|
||||
<span>original: {{ option.original}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否根据dpr生成适合屏幕的高清图片</span>
|
||||
<input type="checkbox" v-model="option.high">
|
||||
<span>high: {{ option.high}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否输出原图比例的截图</span>
|
||||
<input type="checkbox" v-model="option.full">
|
||||
<span>full: {{ option.full}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图信息展示是否是真实的输出宽高</span>
|
||||
<input type="checkbox" v-model="option.infoTrue">
|
||||
<span>infoTrue: {{ option.infoTrue}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>能否拖动图片</span>
|
||||
<input type="checkbox" v-model="option.canMove">
|
||||
<span>canMove: {{ option.canMove}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>能否拖动截图框</span>
|
||||
<input type="checkbox" v-model="option.canMoveBox">
|
||||
<span>canMoveBox: {{ option.canMoveBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图框固定大小</span>
|
||||
<input type="checkbox" v-model="option.fixedBox">
|
||||
<span>fixedBox: {{ option.fixedBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否自动生成截图框</span>
|
||||
<input type="checkbox" v-model="option.autoCrop">
|
||||
<span>autoCrop: {{ option.autoCrop}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>自动生成截图框的宽高</span>
|
||||
<span>宽度: </span><input type="number" v-model="option.autoCropWidth">
|
||||
<span>高度: </span><input type="number" v-model="option.autoCropHeight">
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
|
||||
<input type="checkbox" v-model="option.centerBox">
|
||||
<span>centerBox: {{ option.centerBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否按照截图框比例输出 默认为1 </span>
|
||||
<input type="number" v-model="option.enlarge">
|
||||
</label>
|
||||
<p>输出图片格式</p>
|
||||
<label class="c-item">
|
||||
<label>jpg <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
|
||||
<label>png <input type="radio" name="type" value="png" v-model="option.outputType"></label>
|
||||
<label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
|
||||
export default {
|
||||
name: 'ImagCropper',
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
model: false,
|
||||
modelSrc: "",
|
||||
crap: false,
|
||||
previews: {},
|
||||
lists: [
|
||||
{img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"},
|
||||
{img: "http://cdn.xyxiao.cn/Landscape_1.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Landscape_2.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Landscape_3.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Landscape_4.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Portrait_1.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Portrait_2.jpg"}
|
||||
],
|
||||
option: {
|
||||
img: "",
|
||||
size: 1,
|
||||
full: false,
|
||||
outputType: "png",
|
||||
canMove: true,
|
||||
fixedBox: false,
|
||||
original: false,
|
||||
canMoveBox: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 150,
|
||||
centerBox: false,
|
||||
high: false,
|
||||
cropData: {},
|
||||
enlarge: 1,
|
||||
mode: 'contain',
|
||||
maxImgSize: 3000,
|
||||
limitMinSize: [100, 120]
|
||||
},
|
||||
example2: {
|
||||
img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: "jpeg",
|
||||
canScale: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 300,
|
||||
autoCropHeight: 250,
|
||||
fixed: true,
|
||||
// 真实的输出宽高
|
||||
infoTrue: true,
|
||||
fixedNumber: [4, 3]
|
||||
},
|
||||
example3: {
|
||||
img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true
|
||||
},
|
||||
downImg: "#",
|
||||
previewStyle1: {},
|
||||
previewStyle2: {},
|
||||
previewStyle3: {},
|
||||
previewStyle4: {},
|
||||
code0: '',
|
||||
code1: '',
|
||||
code2: '',
|
||||
code3: '',
|
||||
preview3: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeImg() {
|
||||
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img;
|
||||
},
|
||||
startCrop() {
|
||||
// start
|
||||
this.crap = true;
|
||||
this.$refs.cropper.startCrop();
|
||||
},
|
||||
stopCrop() {
|
||||
// stop
|
||||
this.crap = false;
|
||||
this.$refs.cropper.stopCrop();
|
||||
},
|
||||
clearCrop() {
|
||||
// clear
|
||||
this.$refs.cropper.clearCrop();
|
||||
},
|
||||
refreshCrop() {
|
||||
// clear
|
||||
this.$refs.cropper.refresh();
|
||||
},
|
||||
changeScale(num) {
|
||||
num = num || 1;
|
||||
this.$refs.cropper.changeScale(num);
|
||||
},
|
||||
rotateLeft() {
|
||||
this.$refs.cropper.rotateLeft();
|
||||
},
|
||||
rotateRight() {
|
||||
this.$refs.cropper.rotateRight();
|
||||
},
|
||||
finish(type) {
|
||||
if (type === "blob") {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
var img = window.URL.createObjectURL(data);
|
||||
this.model = true;
|
||||
this.modelSrc = img;
|
||||
});
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 实时预览函数
|
||||
realTime(data) {
|
||||
var previews = data;
|
||||
var h = 0.5;
|
||||
var w = 0.2;
|
||||
|
||||
this.previewStyle1 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: h
|
||||
};
|
||||
|
||||
this.previewStyle2 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: w
|
||||
};
|
||||
|
||||
this.previewStyle3 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: (100 / previews.w)
|
||||
};
|
||||
|
||||
this.previewStyle4 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: (100 / previews.h)
|
||||
};
|
||||
|
||||
this.previews = data;
|
||||
},
|
||||
|
||||
finish2(type) {
|
||||
this.$refs.cropper2.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
},
|
||||
finish3(type) {
|
||||
this.$refs.cropper3.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
},
|
||||
down(type) {
|
||||
// 输出
|
||||
if (type === "blob") {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
this.downImg = window.URL.createObjectURL(data);
|
||||
if (window.navigator.msSaveBlob) {
|
||||
var blobObject = new Blob([data]);
|
||||
window.navigator.msSaveBlob(blobObject, "demo.png");
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click();
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.downImg = data;
|
||||
if (window.navigator.msSaveBlob) {
|
||||
var blobObject = new Blob([data]);
|
||||
window.navigator.msSaveBlob(blobObject, "demo.png");
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
uploadImg(e, num) {
|
||||
//上传图片
|
||||
// this.option.img
|
||||
var file = e.target.files[0];
|
||||
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
||||
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
|
||||
return false;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
let data;
|
||||
if (typeof e.target.result === "object") {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data = e.target.result;
|
||||
}
|
||||
if (num === 1) {
|
||||
this.option.img = data;
|
||||
} else if (num === 2) {
|
||||
this.example2.img = data;
|
||||
}
|
||||
this.$refs.uploadImg.value = ''
|
||||
};
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file);
|
||||
},
|
||||
imgLoad(msg) {
|
||||
console.log(msg);
|
||||
},
|
||||
|
||||
cropMoving(data) {
|
||||
this.option.cropData = data;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
mounted() {
|
||||
this.changeImg();
|
||||
var list = [].slice.call(document.querySelectorAll("pre code"));
|
||||
list.forEach((val, index) => {
|
||||
hljs.highlightBlock(val);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.test-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #c0ccda;
|
||||
color: #1f2d3d;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 20px 10px 0px 0px;
|
||||
padding: 9px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
background-color: #50bfff;
|
||||
border-color: #50bfff;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.des {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
code.language-html {
|
||||
padding: 10px 20px;
|
||||
margin: 10px 0px;
|
||||
display: block;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
overflow-x: auto;
|
||||
font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo,
|
||||
Lucida, Sans, Type, Writer, Ubuntu, Mono;
|
||||
border-radius: 5px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.show-info {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.show-info h2 {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0px;
|
||||
background-image: -webkit-linear-gradient(
|
||||
left,
|
||||
#3498db,
|
||||
#f47920 10%,
|
||||
#d71345 20%,
|
||||
#f7acbc 30%,
|
||||
#ffd400 40%,
|
||||
#3498db 50%,
|
||||
#f47920 60%,
|
||||
#d71345 70%,
|
||||
#f7acbc 80%,
|
||||
#ffd400 90%,
|
||||
#3498db
|
||||
);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-size: 200% 100%;
|
||||
animation: slide 5s infinite linear;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.test {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.model {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.model-show {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.model img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 80%;
|
||||
width: auto;
|
||||
user-select: none;
|
||||
background-position: 0px 0px, 10px 10px;
|
||||
background-size: 20px 20px;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
#eee 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
#eee 75%,
|
||||
#eee 100%
|
||||
),
|
||||
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
|
||||
}
|
||||
|
||||
.c-item {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pre {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pre-item {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.content {
|
||||
max-width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.test {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
<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://static.jeecg.com/upload/test/3a4490d5d1cd495b826e528537a47cc1.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
|
||||
}
|
||||
]
|
||||
},{
|
||||
key:1,
|
||||
fileDetails:[
|
||||
{
|
||||
imgUrl:"https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://static.jeecg.com/upload/test/1_1588149743473.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
url: {
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.table-operator {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||||
background-color: #1890FF !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,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://static.jeecg.com/upload/test/1_1588149743473.jpg'},
|
||||
{id:'111',sort: 1,filePath: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'},
|
||||
{id:'222',sort: 2,filePath: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'},
|
||||
{id:'333',sort: 3,filePath: 'https://static.jeecg.com/temp/国炬软件logo_1606575029126.png'},
|
||||
{id:'444',sort: 4,filePath: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.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>
|
||||
@@ -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://static.jeecg.com/upload/test/1_1588149743473.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-0-1',
|
||||
imgUrl:'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
|
||||
}]
|
||||
},{
|
||||
title: '第二页',
|
||||
key: '0-1',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-1-0',
|
||||
imgUrl:'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-1-1',
|
||||
imgUrl:'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg'
|
||||
}]
|
||||
},{
|
||||
title: '第三页',
|
||||
key: '0-2',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-2-0',
|
||||
imgUrl:'https://static.jeecg.com/upload/test/1374962_1587621329085.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>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-row style="margin-top: 20px">
|
||||
<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-option value="PUT">PUT</a-select-option>
|
||||
<a-select-option value="DELETE">DELETE</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" @blur="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 { axios } from '@/utils/request'
|
||||
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
|
||||
if(!value){
|
||||
that.$message.error("请填写路径")
|
||||
return false
|
||||
}
|
||||
this.resultJson = {};
|
||||
axios({
|
||||
url: value,
|
||||
method: this.requestMethod,
|
||||
data: this.paramJson
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
this.resultJson = res
|
||||
}).catch((err) => {
|
||||
that.$message.error("请求异常："+err)
|
||||
})
|
||||
},
|
||||
changeVal(e){
|
||||
try {
|
||||
let json = e.target.value;
|
||||
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>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-tabs>
|
||||
<a-tab-pane tab="基础示例" key="1" forceRender>
|
||||
<j-vxe-demo1/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="高级示例" key="2" forceRender>
|
||||
<j-vxe-demo2/>
|
||||
</a-tab-pane>
|
||||
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JVxeDemo1 from '@views/demo/JVxeDemo/JVxeDemo1'
|
||||
import JVxeDemo2 from '@views/demo/JVxeDemo/JVxeDemo2'
|
||||
|
||||
export default {
|
||||
name: 'JVXETableDemo',
|
||||
components: {JVxeDemo2, JVxeDemo1},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<j-vxe-table
|
||||
ref="vTable"
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
drag-sort
|
||||
keep-source
|
||||
:height="580"
|
||||
:loading="loading"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
style="margin-top: 8px;"
|
||||
@valueChange="handleValueChange"
|
||||
>
|
||||
|
||||
<template v-slot:toolbarSuffix>
|
||||
<a-button @click="handleTableCheck">表单验证</a-button>
|
||||
<a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
|
||||
<a-button @click="handleTableGet">获取值</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
|
||||
<a-button @click="handleTableSet">设置值</a-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-slot:action="props">
|
||||
<a @click="handleCK(props)">查看</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗？" @confirm="handleDL(props)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
|
||||
</j-vxe-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'JVxeDemo1',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '不可编辑',
|
||||
key: 'normal',
|
||||
type: JVXETypes.normal,
|
||||
width: '180px',
|
||||
fixed: 'left',
|
||||
defaultValue: 'normal-new',
|
||||
},
|
||||
{
|
||||
title: '单行文本',
|
||||
key: 'input',
|
||||
type: JVXETypes.input,
|
||||
width: '180px',
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [
|
||||
{
|
||||
required: true, // 必填
|
||||
message: '请输入${title}' // 显示的文本
|
||||
},
|
||||
{
|
||||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
|
||||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||||
},
|
||||
{
|
||||
unique: true,
|
||||
message: '${title}不能重复'
|
||||
},
|
||||
{
|
||||
handler({cellValue, row, column}, callback, target) {
|
||||
// cellValue 当前校验的值
|
||||
// callback(flag, message) 方法必须执行且只能执行一次
|
||||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||||
// message = 提示的类型，默认使用配置的 message
|
||||
// target 行编辑的实例对象
|
||||
if (cellValue === 'abc') {
|
||||
callback(false, '${title}不能是abc') // false = 未通过校验
|
||||
} else {
|
||||
callback(true) // true = 通过验证
|
||||
}
|
||||
},
|
||||
message: '${title}默认提示'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '多行文本',
|
||||
key: 'textarea',
|
||||
type: JVXETypes.textarea,
|
||||
width: '200px',
|
||||
},
|
||||
{
|
||||
title: '数字',
|
||||
key: 'number',
|
||||
type: JVXETypes.inputNumber,
|
||||
width: '80px',
|
||||
defaultValue: 32,
|
||||
// 【统计列】sum = 求和、average = 平均值
|
||||
statistics: ['sum', 'average'],
|
||||
},
|
||||
{
|
||||
title: '下拉框',
|
||||
key: 'select',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
// 下拉选项
|
||||
options: [
|
||||
{title: 'String', value: 'string'},
|
||||
{title: 'Integer', value: 'int'},
|
||||
{title: 'Double', value: 'double'},
|
||||
{title: 'Boolean', value: 'boolean'}
|
||||
],
|
||||
allowInput: true,
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '下拉框_字典',
|
||||
key: 'select_dict',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
options: [],
|
||||
dictCode: 'sex',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
{
|
||||
title: '下拉框_多选',
|
||||
key: 'select_multiple',
|
||||
type: JVXETypes.selectMultiple,
|
||||
width: '205px',
|
||||
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: '多选',
|
||||
},
|
||||
|
||||
{
|
||||
title: '下拉框_搜索',
|
||||
key: 'select_search',
|
||||
type: JVXETypes.selectSearch,
|
||||
width: '180px',
|
||||
options: [
|
||||
{title: 'String', value: 'string'},
|
||||
{title: 'Integer', value: 'int'},
|
||||
{title: 'Double', value: 'double'},
|
||||
{title: 'Boolean', value: 'boolean'}
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '日期时间',
|
||||
key: 'datetime',
|
||||
type: JVXETypes.datetime,
|
||||
width: '200px',
|
||||
defaultValue: '2019-4-30 14:52:22',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
{
|
||||
title: '复选框',
|
||||
key: 'checkbox',
|
||||
type: JVXETypes.checkbox,
|
||||
width: '100px',
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
type: JVXETypes.slot,
|
||||
fixed: 'right',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
slotName: 'action',
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
this.randomPage(0, 20, true)
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleCK(props) {
|
||||
this.$message.success('请在控制台查看输出')
|
||||
// 参数介绍：
|
||||
// props.value 当前单元格的值
|
||||
// props.row 当前行的数据
|
||||
// props.rowId 当前行ID
|
||||
// props.rowIndex 当前行下标
|
||||
// props.column 当前列的配置
|
||||
// props.columnIndex 当前列下标
|
||||
// props.$table vxe实例，可以调用vxe内置方法
|
||||
// props.target JVXE实例，可以调用JVXE内置方法
|
||||
// props.caseId JVXE实例唯一ID
|
||||
// props.scrolling 是否正在滚动
|
||||
// props.triggerChange 触发change事件，用于更改slot的值
|
||||
console.log('查看: ', {props})
|
||||
},
|
||||
|
||||
handleDL(props) {
|
||||
// 调用删除方法
|
||||
props.target.removeRows(props.row)
|
||||
},
|
||||
|
||||
handleValueChange(event) {
|
||||
console.log('handleValueChange.event: ', event)
|
||||
},
|
||||
|
||||
/** 表单验证 */
|
||||
handleTableCheck() {
|
||||
this.$refs.vTable.validateTable().then(errMap => {
|
||||
if (errMap) {
|
||||
console.log('表单验证未通过：', {errMap})
|
||||
this.$message.error('验证未通过，请在控制台查看详细')
|
||||
} else {
|
||||
this.$message.success('验证通过')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet() {
|
||||
const values = this.$refs.vTable.getTableData()
|
||||
console.log('获取值:', {values})
|
||||
this.$message.success('获取值成功，请看控制台输出')
|
||||
},
|
||||
|
||||
/** 模拟加载1000条数据 */
|
||||
handleTableSet() {
|
||||
this.randomPage(1, 1000, true)
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomPage(current, pageSize, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
let randomDatetime = () => {
|
||||
let time = randomNumber(1000, 9999999999999)
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
let limit = (current - 1) * pageSize
|
||||
|
||||
let options = ['string', 'int', 'double', 'boolean']
|
||||
|
||||
let begin = Date.now()
|
||||
let values = []
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
normal: `normal-${(limit + i) + 1}`,
|
||||
input: `text-${(limit + i) + 1}`,
|
||||
textarea: `textarea-${(limit + i) + 1}`,
|
||||
number: randomNumber(0, 233),
|
||||
select: options[randomNumber(0, 3)],
|
||||
select_dict: randomNumber(1, 2).toString(),
|
||||
select_multiple: (() => {
|
||||
let length = randomNumber(1, 4)
|
||||
let arr = []
|
||||
for (let j = 0; j < length; j++) {
|
||||
pushIfNotExist(arr, options[randomNumber(0, 3)])
|
||||
}
|
||||
return arr
|
||||
})(),
|
||||
select_search: options[randomNumber(0, 3)],
|
||||
datetime: randomDatetime(),
|
||||
checkbox: ['Y', 'N'][randomNumber(0, 1)]
|
||||
})
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
let end = Date.now()
|
||||
let diff = end - begin
|
||||
|
||||
if (loading && diff < pageSize) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, pageSize - diff)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<j-vxe-table
|
||||
ref="vTable"
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
keep-source
|
||||
:height="484"
|
||||
:loading="loading"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
style="margin-top: 8px;"
|
||||
@pageChange="handlePageChange"
|
||||
>
|
||||
|
||||
<template v-slot:toolbarSuffix>
|
||||
<a-button @click="handleTableGet">获取值</a-button>
|
||||
</template>
|
||||
|
||||
</j-vxe-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { randomNumber, randomUUID } from '@/utils/util'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'JVxeDemo2',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '下拉框_字典表搜索',
|
||||
key: 'select_dict_search',
|
||||
type: JVXETypes.selectDictSearch,
|
||||
width: '200px',
|
||||
// 【字典表配置信息】：数据库表名,显示字段名,存储字段名
|
||||
dict: 'sys_user,realname,username',
|
||||
},
|
||||
{
|
||||
title: 'JPopup',
|
||||
key: 'popup',
|
||||
type: JVXETypes.popup,
|
||||
width: '180px',
|
||||
popupCode: 'demo',
|
||||
field: 'name,sex,age',
|
||||
orgFields: 'name,sex,age',
|
||||
destFields: 'popup,popup_sex,popup_age'
|
||||
},
|
||||
{
|
||||
title: 'JP-性别',
|
||||
key: 'popup_sex',
|
||||
type: JVXETypes.select,
|
||||
dictCode: 'sex',
|
||||
disabled: true,
|
||||
width: '100px',
|
||||
},
|
||||
{
|
||||
title: 'JP-年龄',
|
||||
key: 'popup_age',
|
||||
type: JVXETypes.normal,
|
||||
width: '80px',
|
||||
},
|
||||
{
|
||||
title: '进度条',
|
||||
key: 'progress',
|
||||
type: JVXETypes.progress,
|
||||
minWidth: '120px'
|
||||
},
|
||||
{
|
||||
title: '单选',
|
||||
key: 'radio',
|
||||
type: JVXETypes.radio,
|
||||
width: '130px',
|
||||
options: [
|
||||
{text: '男', value: '1'},
|
||||
{text: '女', value: '2'},
|
||||
],
|
||||
// 允许清除选择（再点一次取消选择）
|
||||
allowClear: true
|
||||
},
|
||||
{
|
||||
title: '上传',
|
||||
key: 'upload',
|
||||
type: JVXETypes.upload,
|
||||
width: '180px',
|
||||
btnText: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG['domianURL'] + '/sys/common/upload'
|
||||
},
|
||||
{
|
||||
title: '图片上传',
|
||||
key: 'image',
|
||||
type: JVXETypes.image,
|
||||
width: '180px',
|
||||
token: true,
|
||||
},
|
||||
{
|
||||
title: '文件上传',
|
||||
key: 'file',
|
||||
type: JVXETypes.file,
|
||||
width: '180px',
|
||||
token: true,
|
||||
},
|
||||
],
|
||||
dataSource: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
total: 1000,
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
this.randomPage(this.pagination.current, this.pagination.pageSize, true)
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 当分页参数变化时触发的事件
|
||||
handlePageChange(event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.randomPage(event.current, event.pageSize, true)
|
||||
},
|
||||
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet() {
|
||||
const values = this.$refs.vTable.getTableData()
|
||||
console.log('获取值:', {values})
|
||||
this.$message.success('获取值成功，请看控制台输出')
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomPage(current, pageSize, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
let randomDatetime = () => {
|
||||
let time = randomNumber(1000, 9999999999999)
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
let limit = (current - 1) * pageSize
|
||||
|
||||
let begin = Date.now()
|
||||
let values = []
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
let radio = randomNumber(0, 2)
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
select_dict_search: ['', 'admin', '', 'jero', ''][randomNumber(0, 4)],
|
||||
progress: randomNumber(0, 100),
|
||||
radio: radio ? radio.toString() : null
|
||||
})
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
let end = Date.now()
|
||||
let diff = end - begin
|
||||
|
||||
if (loading && diff < pageSize) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, pageSize - diff)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<a-card title="即时保存示例" :bordered="false">
|
||||
<!--
|
||||
【即时保存大体思路】：
|
||||
1. JVxeTable 上必须加 keep-source 属性
|
||||
2. 监听 edit-closed事件，这个事件是在编辑完成后触发
|
||||
3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作
|
||||
-->
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
:toolbarConfig="toolbarConfig"
|
||||
|
||||
row-number
|
||||
row-selection
|
||||
keep-source
|
||||
async-remove
|
||||
|
||||
:height="340"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
|
||||
@save="handleTableSave"
|
||||
@remove="handleTableRemove"
|
||||
@edit-closed="handleEditClosed"
|
||||
@pageChange="handlePageChange"
|
||||
@selectRowChange="handleSelectRowChange"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction, putAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 即时保存示例
|
||||
export default {
|
||||
name: 'JSBCDemo',
|
||||
data() {
|
||||
return {
|
||||
// 工具栏的按钮配置
|
||||
toolbarConfig: {
|
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
||||
btn: ['add', 'save', 'remove', 'clearSelection']
|
||||
},
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', defaultValue: '张三', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
// 模拟保存单行数据（即时保存）
|
||||
saveRow: '/mock/vxe/immediateSaveRow',
|
||||
// 模拟保存整个表格的数据
|
||||
saveAll: '/mock/vxe/immediateSaveAll',
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载数据
|
||||
loadData() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 【整体保存】点击保存按钮时触发的事件
|
||||
handleTableSave({$table, target}) {
|
||||
// 校验整个表格
|
||||
$table.validate().then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 获取所有数据
|
||||
let tableData = target.getTableData()
|
||||
console.log('当前保存的数据是：', tableData)
|
||||
// 获取新增的数据
|
||||
let newData = target.getNewData()
|
||||
console.log('-- 新增的数据：', newData)
|
||||
// 获取删除的数据
|
||||
let deleteData = target.getDeleteData()
|
||||
console.log('-- 删除的数据：', deleteData)
|
||||
|
||||
// 【模拟保存】
|
||||
this.loading = true
|
||||
postAction(this.url.saveAll, tableData).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(`保存成功！`)
|
||||
} else {
|
||||
this.$message.warn(`保存失败：` + res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 触发单元格删除事件
|
||||
handleTableRemove(event) {
|
||||
|
||||
// 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
|
||||
console.log('待删除的数据: ', event.deleteRows)
|
||||
// 也可以只传ID，因为可以根据ID删除
|
||||
let deleteIds = event.deleteRows.map(row => row.id)
|
||||
console.log('待删除的数据ids: ', deleteIds)
|
||||
|
||||
// 模拟请求后台删除
|
||||
this.loading = true
|
||||
window.setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$message.success('删除成功')
|
||||
// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
|
||||
event.confirmRemove()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
// 单元格编辑完成之后触发的事件
|
||||
handleEditClosed(event) {
|
||||
let {$table, row, column} = event
|
||||
|
||||
let field = column.property
|
||||
let cellValue = row[field]
|
||||
// 判断单元格值是否被修改
|
||||
if ($table.isUpdateByRow(row, field)) {
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 【模拟保存】
|
||||
let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
||||
console.log('即时保存数据：', row)
|
||||
putAction(this.url.saveRow, row).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(`"${column.title}"保存成功！`)
|
||||
// 局部更新单元格为已保存状态
|
||||
$table.reloadRow(row, null, field)
|
||||
} else {
|
||||
this.$message.warn(`"${column.title}"保存失败：` + res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
hideLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 当分页参数变化时触发的事件
|
||||
handlePageChange(event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
// 当选择的行变化时触发的事件
|
||||
handleSelectRowChange(event) {
|
||||
this.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<a-card title="弹出子表示例" :bordered="false">
|
||||
|
||||
<!--
|
||||
【弹出子表大体思路】
|
||||
1. 必须要有 click-row-show-sub-form 属性，如果该属性设为false，那么就不会弹出子表
|
||||
2. 必须要有 sub-form 插槽，用于规定弹出子表的内容
|
||||
3. highlight-current-row 属性可有可无，如果有则点击一行的时候，该行会背景色会常亮
|
||||
-->
|
||||
|
||||
<!--
|
||||
【弹出详细信息（既有主表的数据也有子表的）大体思路】
|
||||
1. 必须要有 click-row-show-main-form 属性，如果该属性设为false，那么就不会弹出详细信息
|
||||
2. 必须要有 main-form 插槽，用于规定弹出子表的内容
|
||||
3. 可选 click-row-show-sub-form 属性，如果有该属性，就会显示子表，否者不显示
|
||||
-->
|
||||
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
|
||||
highlight-current-row
|
||||
click-row-show-sub-form
|
||||
click-row-show-main-form
|
||||
|
||||
:height="750"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
@detailsConfirm="handleDetailsConfirm"
|
||||
>
|
||||
|
||||
<!-- 主表单 -->
|
||||
<template v-slot:mainForm="{row}">
|
||||
<template v-if="row">
|
||||
<a-form-model
|
||||
ref="form2"
|
||||
:model="row"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="ID" prop="id">
|
||||
<a-input v-model="row.id" disabled/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="序号" prop="num">
|
||||
<a-input v-model="row.num"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="船名" prop="ship_name">
|
||||
<a-input v-model="row.ship_name"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="呼叫" prop="call">
|
||||
<a-input v-model="row.call"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="长" prop="len">
|
||||
<a-input v-model="row.len"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="吨" prop="ton">
|
||||
<a-input v-model="row.ton"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="付款方" prop="payer">
|
||||
<a-input v-model="row.payer"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="数" prop="count">
|
||||
<a-input v-model="row.count"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="公司" prop="company">
|
||||
<a-input v-model="row.company"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item label="动向" prop="trend">
|
||||
<a-input v-model="row.trend"/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 子表单 -->
|
||||
<template v-slot:subForm="{row}">
|
||||
<template v-if="loadSubData(row)">
|
||||
<j-vxe-table
|
||||
ref="subFormTable"
|
||||
height="auto"
|
||||
:max-height="350"
|
||||
:loading="subTable.loading"
|
||||
:columns="subTable.columns"
|
||||
:dataSource="subTable.dataSource"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</j-vxe-table>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 弹出子表示例
|
||||
export default {
|
||||
name: 'PopupSubTable',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input},
|
||||
{key: 'call', title: '呼叫', width: '80px'},
|
||||
{key: 'len', title: '长', width: '80px'},
|
||||
{key: 'ton', title: '吨', width: '120px'},
|
||||
{key: 'payer', title: '付款方', width: '120px'},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
minWidth: '180px',
|
||||
// 是否点击显示详细信息
|
||||
// 只有当前单元格不能编辑的时候才能生效
|
||||
// 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
|
||||
showDetails: true
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px'},
|
||||
],
|
||||
// 子表的信息
|
||||
subTable: {
|
||||
currentRowId: null,
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
// 主表form表单字段
|
||||
mainForm: {
|
||||
id: '',
|
||||
num: '',
|
||||
ship_name: '',
|
||||
call: '',
|
||||
len: '',
|
||||
ton: '',
|
||||
payer: '',
|
||||
count: '',
|
||||
company: '',
|
||||
trend: '',
|
||||
},
|
||||
// form表单 col
|
||||
labelCol: {span: 4},
|
||||
wrapperCol: {span: 20},
|
||||
rules: {
|
||||
num: [
|
||||
{required: true, message: '必须输入序号'},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
log: console.log,
|
||||
|
||||
// 加载数据
|
||||
loadData() {
|
||||
// 封装查询条件
|
||||
let formData = {pageNo: 1, pageSize: 30}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 查询子表数据
|
||||
loadSubData(row) {
|
||||
if (row) {
|
||||
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
||||
if (this.subTable.currentRowId === row.id) {
|
||||
return true
|
||||
}
|
||||
this.subTable.currentRowId = row.id
|
||||
let formData = {pageNo: 1, pageSize: 30, parentId: row.id}
|
||||
this.subTable.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.subTable.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.subTable.loading = false
|
||||
})
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
// 详细信息里点了确认按钮
|
||||
handleDetailsConfirm({row, $table, callback}) {
|
||||
console.log('保存的数据：', row)
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 校验子表，如果需要的话，可以操作下面这个对象：
|
||||
// this.$refs.subFormTable
|
||||
|
||||
callback(true)
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$message.success('保存成功')
|
||||
}, 1000)
|
||||
} else {
|
||||
callback(false)
|
||||
this.$message.warn('校验失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<a-card title="无痕刷新示例" :bordered="false">
|
||||
|
||||
<div style="margin-bottom: 8px;">
|
||||
<span>启用数据变动特效：</span>
|
||||
<a-switch v-model="reloadEffect"/>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
【即时保存大体思路】：
|
||||
1. 该功能依赖于【即时保存】功能，请先看即时保存示例
|
||||
2. 必须要有 socket-reload 属性，且设为 true
|
||||
3. 必须要有 socket-key 属性，该属性为当前表格的唯一标识，
|
||||
系统会自动更新所有 socket-key 相同的表格
|
||||
4. 在局部保存 edit-closed 事件中，
|
||||
保存成功后调用 socketSendUpdateRow 方法，将当前 row 传递过去即可 （见第 108 行）
|
||||
-->
|
||||
<j-vxe-table
|
||||
ref="table"
|
||||
row-number
|
||||
row-selection
|
||||
|
||||
keep-source
|
||||
socket-reload
|
||||
socket-key="demo-socket-reload"
|
||||
:reload-effect="reloadEffect"
|
||||
|
||||
:height="340"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
@edit-closed="handleEditClosed"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 无痕刷新示例
|
||||
export default {
|
||||
name: 'SocketReload',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
// 是否启用日历刷新效果
|
||||
reloadEffect: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
// 加载数据
|
||||
loadData() {
|
||||
let formData = {pageNo: 1, pageSize: 200}
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 单元格编辑完成之后触发的事件
|
||||
handleEditClosed(event) {
|
||||
let {$table, row, column} = event
|
||||
|
||||
let field = column.property
|
||||
let cellValue = row[field]
|
||||
// 判断单元格值是否被修改
|
||||
if ($table.isUpdateByRow(row, field)) {
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 【模拟保存】（此处需要替换成真实的请求）
|
||||
let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
||||
setTimeout(() => {
|
||||
hideLoading()
|
||||
this.$message.success(`"${column.title}"保存成功！`)
|
||||
// 局部更新单元格为已保存状态
|
||||
$table.reloadRow(row, null, field)
|
||||
// 发送更新消息
|
||||
this.$refs.table.socketSendUpdateRow(row)
|
||||
}, 555)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
:toolbarConfig="toolbarConfig"
|
||||
|
||||
row-number
|
||||
row-selection
|
||||
row-selection-type="radio"
|
||||
highlight-current-row
|
||||
click-select-row
|
||||
:height="tableHeight"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
:expand-config="expandConfig"
|
||||
style="margin-bottom: 8px"
|
||||
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange"
|
||||
></j-vxe-table>
|
||||
|
||||
<a-tabs v-show="subTabs.show" :class="{'sub-tabs':true, 'un-expand': !subTabs.expand}">
|
||||
<a-tab-pane tab="子表1" key="1">
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
height="auto"
|
||||
:maxHeight="350"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange"
|
||||
@selectRowChange="handleTable2SelectRowChange"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="子表2" key="2">
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
<h1>这里是子表2</h1>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
|
||||
export default {
|
||||
name: 'ErpTemplate',
|
||||
data() {
|
||||
return {
|
||||
toolbarConfig: {
|
||||
// prefix 前缀；suffix 后缀
|
||||
slot: ['prefix', 'suffix'],
|
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
||||
btn: ['add', 'remove', 'clearSelection']
|
||||
},
|
||||
|
||||
expandConfig: {
|
||||
// 是否只能同时展开一行
|
||||
accordion: true
|
||||
},
|
||||
|
||||
// 子表 tabs
|
||||
subTabs: {
|
||||
show: false,
|
||||
// 是否展开
|
||||
expand: true,
|
||||
// 是否自动展开
|
||||
autoExpand: true,
|
||||
},
|
||||
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
showTotal: (total, range) => {
|
||||
// 此处为 jsx 语法
|
||||
let text = <span>{range[0] + '-' + range[1] + ' 共 ' + total + ' 条'}</span>
|
||||
// 判断子表是否显示，如果显示就渲染展开收起按钮
|
||||
if (this.subTabs.show) {
|
||||
let expand = (<span>
|
||||
<a-button type="link" onClick={this.handleToggleTabs}>
|
||||
<a-icon type={this.subTabs.expand ? 'up' : 'down'}/>
|
||||
<span>{this.subTabs.expand ? '收起' : '展开'}</span>
|
||||
</a-button>
|
||||
<a-checkbox vModel={this.subTabs.autoExpand}>自动展开</a-checkbox>
|
||||
</span>)
|
||||
// 返回多个dom用数组
|
||||
return [expand, text]
|
||||
} else {
|
||||
// 直接返回单个dom
|
||||
return text
|
||||
}
|
||||
},
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
currentRowId: null,
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 10, pageSizeOptions: ['5', '10', '20', '30'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
currentSubRow: null,
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableHeight() {
|
||||
let {show, expand} = this.subTabs
|
||||
return show ? (expand ? 350 : 482) : 482
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 查询子表数据
|
||||
loadSubData(row) {
|
||||
if (row) {
|
||||
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
||||
if (this.table2.currentRowId === row.id) {
|
||||
return true
|
||||
}
|
||||
this.table2.currentRowId = row.id
|
||||
this.loadTable2Data()
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
// 查询子表数据
|
||||
loadTable2Data() {
|
||||
let table2 = this.table2
|
||||
let formData = {
|
||||
parentId: table2.currentRowId,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
table2.selectedRows = []
|
||||
table2.dataSource = res.result.records
|
||||
table2.pagination.total = res.result.total
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.table1.selectedRows = event.selectedRows
|
||||
this.subTabs.show = true
|
||||
if (this.subTabs.autoExpand) {
|
||||
this.subTabs.expand = true
|
||||
}
|
||||
this.loadSubData(event.selectedRows[0])
|
||||
},
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange(event) {
|
||||
this.table2.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// 展开或收起子表tabs
|
||||
handleToggleTabs() {
|
||||
this.subTabs.expand = !this.subTabs.expand
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sub-tabs {
|
||||
&.un-expand {
|
||||
/deep/ .ant-tabs-content {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/deep/ .ant-tabs-bar {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .ant-tabs-ink-bar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .ant-tabs-tab {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-tabs>
|
||||
<a-tab-pane tab="ERP布局模板" key="erp">
|
||||
<erp-template/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板1" key="1">
|
||||
<template1/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板2" key="2">
|
||||
<template2/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板3" key="3">
|
||||
<template3/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板4" key="4">
|
||||
<template4/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="布局模板5" key="5">
|
||||
<template5/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Template1 from './Template1'
|
||||
import Template2 from './Template2'
|
||||
import Template3 from './Template3'
|
||||
import Template4 from './Template4'
|
||||
import Template5 from './Template5'
|
||||
import ErpTemplate from './ErpTemplate'
|
||||
|
||||
export default {
|
||||
name: 'LayoutDemo',
|
||||
components: {Template5, Template4, Template3, Template2, Template1, ErpTemplate}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-row :gutter="8">
|
||||
<!-- 这里是父级节点 -->
|
||||
<a-col :span="24" style="margin-bottom: 4px;">
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="340"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange"
|
||||
/>
|
||||
</a-col>
|
||||
<!-- 这里是子级节点 -->
|
||||
<a-col :span="12">
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="340"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange"
|
||||
@selectRowChange="handleTable2SelectRowChange"
|
||||
>
|
||||
</j-vxe-table>
|
||||
</a-col>
|
||||
<!-- 这里是孙级节点 -->
|
||||
<a-col :span="12">
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
:height="340"
|
||||
:loading="table3.loading"
|
||||
:columns="table3.columns"
|
||||
:dataSource="table3.dataSource"
|
||||
:pagination="table3.pagination"
|
||||
@pageChange="handleTable3PageChange"
|
||||
>
|
||||
</j-vxe-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】上面父、左下子、右下孙
|
||||
export default {
|
||||
name: 'Template1',
|
||||
data() {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
formatter({cellValue, row, column}) {
|
||||
let foo = ''
|
||||
if (row.company === '佧伒侾佯有限公司') {
|
||||
foo += '-233'
|
||||
}
|
||||
return cellValue + foo
|
||||
},
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 孙级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table3: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '120px', type: JVXETypes.input},
|
||||
{key: 'power', title: '马力', width: '120px', type: JVXETypes.input},
|
||||
{key: 'nature', title: '性质', width: '120px', type: JVXETypes.input},
|
||||
{key: 'departure_time', title: '发船时间', width: '180px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
['table1.lastRow'](row) {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 监听table2 【子表】选择的数据发生了变化
|
||||
['table2.lastRow']() {
|
||||
this.loadTable3Data()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 当table1【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// 加载table2【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table2, event)
|
||||
},
|
||||
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// 加载table3【孙表】的数据，根据子表的id进行查询
|
||||
loadTable3Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table2.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table3.pagination.total = 0
|
||||
this.table3.dataSource = []
|
||||
this.table3.selectedRows = []
|
||||
return
|
||||
} else if (this.table2.lastRow == null) {
|
||||
this.table2.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table2.lastRow.id,
|
||||
pageNo: this.table3.pagination.current,
|
||||
pageSize: this.table3.pagination.pageSize
|
||||
}
|
||||
this.table3.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table3.pagination.total = res.result.total
|
||||
this.table3.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table3.loading = false
|
||||
})
|
||||
},
|
||||
// 当table3【孙表】分页参数变化时触发的事件
|
||||
handleTable3PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table3.pagination.current = event.current
|
||||
this.table3.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable3Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange(table, event) {
|
||||
let {row, action, selectedRows, $table} = event
|
||||
// 获取最后一个选中的
|
||||
let lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-row :gutter="8">
|
||||
<!-- 左侧父 -->
|
||||
<a-col :span="12">
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="790"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
|
||||
<!-- 左侧选择的数据展示在这里 -->
|
||||
<j-vxe-table
|
||||
row-number
|
||||
:height="381"
|
||||
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.selectedRows"
|
||||
style="margin: 40px 0 8px;"
|
||||
/>
|
||||
|
||||
<!-- 右下子 -->
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
:height="361"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange"
|
||||
@selectRowChange="handleTable2SelectRowChange"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】 左边选择后，记录选到右侧，右侧是父、子
|
||||
export default {
|
||||
name: 'Template2',
|
||||
data() {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
['table1.lastRow']() {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 加载table2【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange(event) {
|
||||
this.table2.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
// 当table1【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange(table, event) {
|
||||
let {row, action, selectedRows, $table} = event
|
||||
// 获取最后一个选中的
|
||||
let lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="12">
|
||||
<!-- 左上父 -->
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="357"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
style="margin-bottom: 8px;"
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange"
|
||||
/>
|
||||
|
||||
<!-- 左下子 -->
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
:height="356"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange"
|
||||
/>
|
||||
</a-col>
|
||||
<!-- 左侧父选择的数据展示在这里 -->
|
||||
<a-col :span="12">
|
||||
<j-vxe-table
|
||||
row-number
|
||||
:height="800"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.selectedRows"
|
||||
style="margin-top: 40px;"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】左侧上边是主表、下边是子表，右侧是选中数据
|
||||
export default {
|
||||
name: 'Template3',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// 主表的配置信息
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{key: 'company', title: '公司', width: '180px', type: JVXETypes.input},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
['table1.lastRow'](row) {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1（主表）的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
// 加载table2（子表）的数据，根据主表的id进行查询
|
||||
loadTable2Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table1【主表】当分页参数变化时触发的事件
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
// 分页后重置选择
|
||||
this.table1.selectedRows = []
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// table2【子表】当分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange(table, event) {
|
||||
let {row, action, selectedRows, $table} = event
|
||||
// 获取最后一个选中的
|
||||
let lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="12">
|
||||
<!-- 左上父 -->
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="340"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:pagination="table1.pagination"
|
||||
style="margin-bottom: 8px;"
|
||||
@pageChange="handleTable1PageChange"
|
||||
@selectRowChange="handleTable1SelectRowChange"
|
||||
/>
|
||||
<!-- 左下子 -->
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
:height="350"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:pagination="table2.pagination"
|
||||
@pageChange="handleTable2PageChange"
|
||||
/>
|
||||
</a-col>
|
||||
<!-- 左侧父选择的数据展示在这里 -->
|
||||
<a-col :span="12">
|
||||
<!-- 右上父 -->
|
||||
<j-vxe-table
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
highlight-current-row
|
||||
:radio-config="{highlight: false}"
|
||||
:checkbox-config="{highlight: false}"
|
||||
:height="340"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.selectedRows"
|
||||
style="margin: 40px 0 8px;"
|
||||
@selectRowChange="handleTable3SelectRowChange"
|
||||
/>
|
||||
<!-- 右下子 -->
|
||||
<j-vxe-table
|
||||
toolbar
|
||||
row-number
|
||||
row-selection
|
||||
click-select-row
|
||||
:height="350"
|
||||
:loading="table4.loading"
|
||||
:columns="table4.columns"
|
||||
:dataSource="table4.dataSource"
|
||||
:pagination="table4.pagination"
|
||||
style="margin: 48px 0 0;"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'Template4',
|
||||
data() {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
table3: {
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
},
|
||||
table4: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 左上【主表】选择的数据发生了变化
|
||||
['table1.lastRow']() {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 监听table3 右上【主表】选择的数据发生了变化
|
||||
['table3.lastRow']() {
|
||||
this.loadTable4Data()
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1左上【主表】的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 当table1左上【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
|
||||
// table1左上【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
|
||||
// 加载table2左下【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 当table2左下【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
|
||||
// table3右上【主表】当选择的行变化时触发的事件
|
||||
handleTable3SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table3, event)
|
||||
},
|
||||
|
||||
|
||||
// 加载table4右下【子表】的数据，根据主表的id进行查询
|
||||
loadTable4Data() {
|
||||
let parentIds = []
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table3.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table4.pagination.total = 0
|
||||
this.table4.dataSource = []
|
||||
this.table4.selectedRows = []
|
||||
return
|
||||
} else if (this.table3.lastRow == null) {
|
||||
this.table3.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table3.lastRow.id,
|
||||
pageNo: this.table4.pagination.current,
|
||||
pageSize: this.table4.pagination.pageSize
|
||||
}
|
||||
this.table4.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table4.pagination.total = res.result.total
|
||||
this.table4.dataSource = res.result.records
|
||||
this.table4.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table4.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 当table4右下【子表】分页参数变化时触发的事件
|
||||
handleTable4PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table4.pagination.current = event.current
|
||||
this.table4.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable4Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange(table, event) {
|
||||
let {row, action, selectedRows, $table} = event
|
||||
// 获取最后一个选中的
|
||||
let lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="6">
|
||||
<!-- 加上 show-line 属性后，展开收起图标自动变成 +- 样式 -->
|
||||
<a-tree
|
||||
class="template-5-tree"
|
||||
:tree-data="treeData"
|
||||
show-icon
|
||||
show-line
|
||||
:expandedKeys="treeExpandedKeys"
|
||||
:selectedKeys="[pagination.current]"
|
||||
@expand="handleTreeExpand"
|
||||
@select="handleTreeSelect"
|
||||
>
|
||||
<!-- 自定义子节点图标 -->
|
||||
<a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;"/>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<j-vxe-table
|
||||
row-number
|
||||
row-selection
|
||||
:height="750"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
@pageChange="handleTablePageChange"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】左侧为树，右侧为行编辑
|
||||
export default {
|
||||
name: 'Template5',
|
||||
data() {
|
||||
return {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 50,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['50'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
// 树的数据，这里模拟分页固定数据，实际情况应该是后台查出来的数据
|
||||
treeData: [
|
||||
// 第1级数据
|
||||
{
|
||||
title: '1-10页',
|
||||
key: '1-10',
|
||||
// 第2级数据
|
||||
children: [
|
||||
{title: '第 1 页', key: 1, slots: {icon: 'myIcon'}},
|
||||
{title: '第 2 页', key: 2, slots: {icon: 'myIcon'}},
|
||||
{
|
||||
title: '第 3 页',
|
||||
key: 3,
|
||||
slots: {icon: 'myIcon'},
|
||||
// 第3级数据
|
||||
children: [
|
||||
{title: '第 333 页', key: 333, slots: {icon: 'myIcon'}},
|
||||
{title: '第 444 页', key: 444, slots: {icon: 'myIcon'}},
|
||||
{title: '第 555 页', key: 555, slots: {icon: 'myIcon'}},
|
||||
// 第4第5级以此类推，加上 children 属性即可
|
||||
],
|
||||
},
|
||||
{title: '第 4 页', key: 4, slots: {icon: 'myIcon'}},
|
||||
{title: '第 5 页', key: 5, slots: {icon: 'myIcon'}},
|
||||
{title: '第 6 页', key: 6, slots: {icon: 'myIcon'}},
|
||||
{title: '第 7 页', key: 7, slots: {icon: 'myIcon'}},
|
||||
{title: '第 8 页', key: 8, slots: {icon: 'myIcon'}},
|
||||
{title: '第 9 页', key: 9, slots: {icon: 'myIcon'}},
|
||||
{title: '第 10 页', key: 10, slots: {icon: 'myIcon'}},
|
||||
],
|
||||
slots: {icon: 'myIcon'},
|
||||
},
|
||||
{
|
||||
title: '11-20页',
|
||||
key: '11-20',
|
||||
children: [
|
||||
{title: '第 11 页', key: 11, slots: {icon: 'myIcon'}},
|
||||
{title: '第 12 页', key: 12, slots: {icon: 'myIcon'}},
|
||||
{title: '第 13 页', key: 13, slots: {icon: 'myIcon'}},
|
||||
{title: '第 14 页', key: 14, slots: {icon: 'myIcon'}},
|
||||
{title: '第 15 页', key: 15, slots: {icon: 'myIcon'}},
|
||||
{title: '第 16 页', key: 16, slots: {icon: 'myIcon'}},
|
||||
{title: '第 17 页', key: 17, slots: {icon: 'myIcon'}},
|
||||
{title: '第 18 页', key: 18, slots: {icon: 'myIcon'}},
|
||||
{title: '第 19 页', key: 19, slots: {icon: 'myIcon'}},
|
||||
{title: '第 20 页', key: 20, slots: {icon: 'myIcon'}},
|
||||
],
|
||||
slots: {icon: 'myIcon'},
|
||||
},
|
||||
],
|
||||
// 树展开的列，默认 1-10
|
||||
treeExpandedKeys: ['1-10'],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载行编辑的数据
|
||||
loadData() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleTablePageChange(event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadData()
|
||||
// 判断树展开的key
|
||||
if (event.current <= 10) {
|
||||
this.treeExpandedKeys = ['1-10']
|
||||
} else {
|
||||
this.treeExpandedKeys = ['11-20']
|
||||
}
|
||||
},
|
||||
|
||||
// 树被选择触发的事件
|
||||
handleTreeSelect(selectedKeys) {
|
||||
let key = selectedKeys[0]
|
||||
if (typeof key === 'string') {
|
||||
// 控制树展开为当前选择的列
|
||||
this.treeExpandedKeys = selectedKeys
|
||||
} else {
|
||||
this.pagination.current = key
|
||||
this.loadData()
|
||||
}
|
||||
},
|
||||
|
||||
// 树被选择触发的事件
|
||||
handleTreeExpand(expandedKeys) {
|
||||
this.treeExpandedKeys = expandedKeys
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/** 隐藏文件小图标 */
|
||||
.template-5-tree.ant-tree {
|
||||
li span.ant-tree-switcher.ant-tree-switcher-noop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="用户名">
|
||||
<j-input placeholder="请输入名称模糊查询" v-model="queryParam.name"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="年龄">
|
||||
<!-- <a-input placeholder="请输入名称查询" v-model="queryParam.age"></a-input>-->
|
||||
<a-input placeholder="最小年龄" type="ge" v-model="queryParam.age_begin" style="width:calc(50% - 15px);"></a-input>
|
||||
<span class="group-query-strig">~</span>
|
||||
<a-input placeholder="最大年龄" type="le" v-model="queryParam.age_end" style="width:calc(50% - 15px);"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="toggleSearchStatus">
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="生日">
|
||||
<a-range-picker v-model="queryParam.birthdayRange"
|
||||
format="YYYY-MM-DD"
|
||||
:placeholder="['开始时间', '结束时间']"
|
||||
@change="onBirthdayChange" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="性别">
|
||||
<j-dict-select-tag v-model="queryParam.sex" placeholder="请选择性别" dictCode="sex"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="选择用户">
|
||||
<j-dict-select-tag v-model="queryParam.id" placeholder="请选择用户" dictCode="demo,name,id"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :xl="6" :lg="7" :md="8" :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 @click="handleToggleSearch" style="margin-left: 8px">
|
||||
{{ toggleSearchStatus ? '收起' : '展开' }}
|
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<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('单表示例')">导出</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>
|
||||
<!-- 高级查询区域 -->
|
||||
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
|
||||
<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 style="width: 400px">
|
||||
<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"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></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 style="width: 400px">
|
||||
<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"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></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 -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeroDemo-modal ref="modalForm" @ok="modalFormOk"></jeroDemo-modal>
|
||||
|
||||
<!-- 一对多表单区域 -->
|
||||
<JeroDemoTabsModal ref="jeroDemoTabsModal" @ok="modalFormOk"></JeroDemoTabsModal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroDemoModal from './modules/JeroDemoModal'
|
||||
import JSuperQuery from '@/components/jero/JSuperQuery.vue';
|
||||
import JInput from '@/components/jero/JInput.vue';
|
||||
import JeroDemoTabsModal from './modules/JeroDemoTabsModal'
|
||||
import {initDictOptions, filterDictText,filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import Vue from 'vue'
|
||||
import { filterObj } from '@/utils/util';
|
||||
|
||||
//高级查询modal需要参数
|
||||
const superQueryFieldList=[
|
||||
{
|
||||
type: "string",
|
||||
value: "name",
|
||||
text: "用户名"
|
||||
}, {
|
||||
type: "int",
|
||||
value: "age",
|
||||
text: "年龄"
|
||||
}, {
|
||||
type: "date",
|
||||
value: "birthday",
|
||||
text: "生日"
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: "JeroDemoList",
|
||||
mixins:[JeroListMixin],
|
||||
components: {
|
||||
JeroDemoModal,
|
||||
JSuperQuery,
|
||||
JeroDemoTabsModal,
|
||||
JInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '单表示例列表',
|
||||
//字典数组缓存
|
||||
sexDictOptions: [],
|
||||
importExcelUrl:`${window._CONFIG['domianURL']}/test/jeroDemo/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 filterDictTextByCache('sex', 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/jeroDemo/list",
|
||||
delete: "/test/jeroDemo/delete",
|
||||
deleteBatch: "/test/jeroDemo/deleteBatch",
|
||||
exportXlsUrl: "/test/jeroDemo/exportXls"
|
||||
},
|
||||
fieldList:superQueryFieldList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams(){
|
||||
//高级查询器
|
||||
let sqp = {}
|
||||
if(this.superQueryParams){
|
||||
sqp['superQueryParams']=encodeURI(this.superQueryParams)
|
||||
sqp['superQueryMatchType'] = this.superQueryMatchType
|
||||
}
|
||||
var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
|
||||
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
delete param.birthdayRange; //范围参数不传递后台
|
||||
return filterObj(param);
|
||||
},
|
||||
initDictConfig() {
|
||||
console.log("--我才是真的方法!--")
|
||||
//初始化字典 - 性别
|
||||
initDictOptions('sex').then((res) => {
|
||||
if (res.success) {
|
||||
this.sexDictOptions = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
onetomany: function () {
|
||||
this.$refs.jeroDemoTabsModal.add();
|
||||
this.$refs.jeroDemoTabsModal.title = "编辑";
|
||||
},
|
||||
//跳转单据页面
|
||||
jump() {
|
||||
this.$router.push({path: '/jero/helloworld'})
|
||||
},
|
||||
onBirthdayChange: function (value, dateString) {
|
||||
console.log(dateString[0],dateString[1]);
|
||||
this.queryParam.birthday_begin=dateString[0];
|
||||
this.queryParam.birthday_end=dateString[1];
|
||||
},
|
||||
//列设置更改事件
|
||||
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>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-tabs>
|
||||
|
||||
<a-tab-pane tab="普通列表" key="1">
|
||||
<default-table/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="只读列表" key="2">
|
||||
<read-only-table/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="三级联动" key="3">
|
||||
<three-linkage/>
|
||||
</a-tab-pane>
|
||||
|
||||
</a-tabs>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DefaultTable from './modules/JEditableTable/DefaultTable'
|
||||
import ReadOnlyTable from './modules/JEditableTable/ReadOnlyTable'
|
||||
import ThreeLinkage from './modules/JEditableTable/ThreeLinkage'
|
||||
|
||||
export default {
|
||||
name: 'JeroEditableTableExample',
|
||||
components: { DefaultTable, ReadOnlyTable, ThreeLinkage },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -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 -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeroOrderMain-modal ref="modalForm" @ok="modalFormOk"></jeroOrderMain-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderMainModal from './modules/JeroOrderMainModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderMainList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderMainModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
importExcelUrl:`${window._CONFIG['domianURL']}/test/jeroOrderMain/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/jeroOrderMain/list",
|
||||
delete: "/test/jeroOrderMain/delete",
|
||||
deleteBatch: "/test/jeroOrderMain/deleteBatch",
|
||||
exportXlsUrl: "/test/jeroOrderMain/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>
|
||||
@@ -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 -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jero-order-modal-for-j-editable-table ref="modalForm" @ok="modalFormOk"/>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import JeroOrderModalForJEditableTable from './modules/JeroOrderModalForJEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'JeroOrderMainListForJEditableTable',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderModalForJEditableTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
// 请求参数
|
||||
url: {
|
||||
list: '/test/jeroOrderMain/list',
|
||||
delete: '/test/jeroOrderMain/delete',
|
||||
deleteBatch: '/test/jeroOrderMain/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>
|
||||
@@ -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: "JeroPdfView",
|
||||
components:{
|
||||
PdfPreviewModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: 'PDF预览页面',
|
||||
// 文件类型集
|
||||
treeData:[{
|
||||
title: '所有PDF电子档',
|
||||
key: '0-0',
|
||||
children: mockdata }],
|
||||
// 文件数据集
|
||||
dataSource: mockdata,
|
||||
allData:mockdata,
|
||||
// 上传文件集
|
||||
defaultExpandAll: true,
|
||||
// 加载中
|
||||
spinning:false,
|
||||
url: {
|
||||
pdfList: "/mock/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>
|
||||
@@ -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/jero/JTreeTable'
|
||||
|
||||
export default {
|
||||
name: 'JeroTreeTable',
|
||||
components: { JTreeTable },
|
||||
data() {
|
||||
return {
|
||||
url: '/mock/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>
|
||||
@@ -0,0 +1,175 @@
|
||||
<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>
|
||||
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
|
||||
* {
|
||||
color: #000000!important;
|
||||
-webkit-tap-highlight-color: #000000!important;
|
||||
}
|
||||
/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */
|
||||
|
||||
.abcdefg .ant-card-body{
|
||||
margin-left: 0%;
|
||||
margin-right: 0%;
|
||||
margin-bottom: 1%;
|
||||
border:0px solid black;
|
||||
min-width: 800px;
|
||||
color:#000000!important;
|
||||
}
|
||||
.explain{
|
||||
text-align: left;
|
||||
margin-left: 50px;
|
||||
color:#000000!important;
|
||||
}
|
||||
.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>
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,665 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="height:100%;padding-bottom:200px; ">
|
||||
|
||||
<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" placeholder="请选择性别"/>
|
||||
<!-- <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-search-select-tag placeholder="请做出你的选择" v-model="formData.searchValue" :dictOptions="searchOptions">
|
||||
</j-search-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.searchValue}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 字典搜索 异步加载 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="字典搜索(异步)">
|
||||
<j-search-select-tag
|
||||
placeholder="请做出你的选择"
|
||||
v-model="formData.asyncSelectValue"
|
||||
dict="sys_depart,depart_name,id"
|
||||
:pageSize="6"
|
||||
:async="true">
|
||||
</j-search-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.asyncSelectValue}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JMultiSelectTag -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="字典下拉(多选)">
|
||||
<j-multi-select-tag
|
||||
v-model="formData.selMuti"
|
||||
dictCode="sex"
|
||||
placeholder="请选择">
|
||||
</j-multi-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">多选组合(v-model)：{{ formData.selMuti }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 部门选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择部门 自定义返回值">
|
||||
<j-select-depart v-model="orgCodes" :trigger-change="true" customReturnField="orgCode" :multi="true"></j-select-depart>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的部门Code(v-decorator):{{ orgCodes }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择部门">
|
||||
<j-select-depart v-model="departId" :multi="true"></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="userIds" :multi="true"></j-select-user-by-dep>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的用户(v-model):{{ userIds }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 用户选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择用户">
|
||||
<j-select-multi-user v-model="multiUser" :query-config="selectUserQueryConfig"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的用户(v-model):{{ multiUser }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 角色选择 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择角色">
|
||||
<j-select-role v-model="formData.selectRole" @change="changeMe"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.selectRole}}</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" :showType="'year'" dateFormat="YYYY"/>
|
||||
</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>
|
||||
|
||||
<!-- 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="JModal弹窗">
|
||||
<a-button style="margin-right: 8px;" @click="()=>modal.visible=true">点击弹出JModal</a-button>
|
||||
<span style="margin-right: 8px;">全屏化：<a-switch v-model="modal.fullscreen"/></span>
|
||||
<span style="margin-right: 8px;">允许切换全屏：<a-switch v-model="modal.switchFullscreen"/></span>
|
||||
|
||||
</a-form-item>
|
||||
|
||||
<j-modal
|
||||
:visible.sync="modal.visible"
|
||||
:width="1200"
|
||||
:title="modal.title"
|
||||
:fullscreen.sync="modal.fullscreen"
|
||||
:switchFullscreen="modal.switchFullscreen"
|
||||
>
|
||||
|
||||
<template v-for="(i,k) of 30">
|
||||
<p :key="k">这是主体内容，高度是自适应的</p>
|
||||
</template>
|
||||
|
||||
</j-modal>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="树字典">
|
||||
<j-tree-dict v-model="formData.treeDict" placeholder="请选择树字典" parentCode="B01" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.treeDict }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="下拉树选择">
|
||||
<j-tree-select
|
||||
v-model="formData.treeSelect"
|
||||
placeholder="请选择菜单"
|
||||
dict="sys_permission,name,id"
|
||||
pidField="parent_id"
|
||||
pidValue=""
|
||||
:isAsync="true"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.treeSelect }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="下拉树多选">
|
||||
<j-tree-select
|
||||
v-model="formData.treeSelectMultiple"
|
||||
placeholder="请选择菜单"
|
||||
dict="sys_permission,name,id"
|
||||
pidField="parent_id"
|
||||
pidValue=""
|
||||
multiple
|
||||
:isAsync="false"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.treeSelectMultiple }}</a-col>
|
||||
</a-row>
|
||||
<!-- 分类字典树 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="分类字典树">
|
||||
<j-category-select v-model="formData.selectCategory" pcode="B01" :multiple="true"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.selectCategory }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- VueCron -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="cron表达式">
|
||||
<j-cron ref="innerVueCron" v-decorator="['cronExpression', { initialValue: '* * * * * ? *' }]" @change="setCorn"></j-cron>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="高级查询">
|
||||
<j-super-query :fieldList="superQuery.fieldList" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="高级查询（自定义按钮）">
|
||||
<j-super-query :fieldList="superQuery.fieldList">
|
||||
<!--
|
||||
v-slot:button 可以更高自由的定制按钮
|
||||
参数介绍：
|
||||
isActive: 是否是激活状态（已有高级查询条件生效）
|
||||
isMobile: 当前是否是移动端，可针对移动端展示不同的样式
|
||||
open: 打开弹窗，一个方法，可绑定点击事件
|
||||
reset: 重置所有查询条件，一个方法，可绑定点击事件
|
||||
-->
|
||||
<template v-slot:button="{isActive,isMobile,open,reset}">
|
||||
<!-- 定义的是普通状态下的按钮 -->
|
||||
<a-button v-if="!isActive" type="primary" ghost icon="clock-circle" @click="open()">高级查询</a-button>
|
||||
<!-- 定义的当有高级查询条件生效状态下的按钮 -->
|
||||
<a-button-group v-else>
|
||||
<a-button type="primary" ghost @click="open()">
|
||||
<a-icon type="plus-circle" spin/>
|
||||
<span>高级查询</span>
|
||||
</a-button>
|
||||
<a-button v-if="isMobile" type="primary" ghost icon="delete" @click="reset()"/>
|
||||
</a-button-group>
|
||||
</template>
|
||||
</j-super-query>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="图片上传">
|
||||
<j-image-upload v-model="imgList"></j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ imgList }}</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24" style="margin-top: 65px;margin-bottom:50px;">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="文件上传">
|
||||
<j-upload v-model="fileList"></j-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
选中的值(v-model)：
|
||||
<j-ellipsis :value="fileList" :length="30" v-if="fileList.length>0"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 特殊查询组件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="特殊查询组件">
|
||||
<a-row>
|
||||
<a-col :span="15">
|
||||
<j-input v-model="formData.jInput" :type="jInput.type"/>
|
||||
</a-col>
|
||||
<a-col :span="4" style="text-align: right;" >查询类型：</a-col>
|
||||
<a-col :span="5">
|
||||
<a-select v-model="jInput.type" :options="jInput.options"></a-select>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">输入的值(v-model)：{{ formData.jInput }}</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="15">
|
||||
<a-form-item label="MarkdownEditor" style="min-height: 300px">
|
||||
<j-markdown-editor v-model="content"></j-markdown-editor>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="9">
|
||||
输入的值(v-model)：{{ content }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 省市县级联 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="省市县级联">
|
||||
<j-area-linkage v-model="formData.areaLinkage1" type="cascader"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">输入的值(v-model)：{{ formData.areaLinkage1 }}</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<!-- 省市县级联 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="省市县级联">
|
||||
<j-area-linkage v-model="formData.areaLinkage2" type="select"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">输入的值(v-model)：{{ formData.areaLinkage2 }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 功能示例：关闭当前页面 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="功能示例：关闭当前页面">
|
||||
<a-button type="primary" @click="handleCloseCurrentPage">点击关闭当前页面</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JPopup示例 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="JPopup示例">
|
||||
<j-popup v-model="formData.jPopup" code="demo" field="name" orgFields="name" destFields="name" :multi="true"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选择的值(v-model)：{{ formData.jPopup }}</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
|
||||
import JSelectDepart from '@/components/jerobiz/JSelectDepart'
|
||||
import JSelectUserByDep from '@/components/jerobiz/JSelectUserByDep'
|
||||
import JSelectMultiUser from '@/components/jerobiz/JSelectMultiUser'
|
||||
import JSelectRole from '@/components/jerobiz/JSelectRole'
|
||||
import JCheckbox from '@/components/jero/JCheckbox'
|
||||
import JCodeEditor from '@/components/jero/JCodeEditor'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import JEditor from '@/components/jero/JEditor'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
import JSlider from '@/components/jero/JSlider'
|
||||
import JSelectMultiple from '@/components/jero/JSelectMultiple'
|
||||
import JTreeDict from "../../components/jero/JTreeDict.vue";
|
||||
import JCron from "@/components/jero/JCron.vue";
|
||||
import JTreeSelect from '@/components/jero/JTreeSelect'
|
||||
import JSuperQuery from '@/components/jero/JSuperQuery'
|
||||
import JUpload from '@/components/jero/JUpload'
|
||||
import JImageUpload from '@/components/jero/JImageUpload'
|
||||
import JCategorySelect from '@comp/jero/JCategorySelect'
|
||||
import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
|
||||
import JInput from '@comp/jero/JInput'
|
||||
import JAreaLinkage from '@comp/jero/JAreaLinkage'
|
||||
import JMarkdownEditor from '@/components/jero/JMarkdownEditor/index'
|
||||
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
|
||||
|
||||
export default {
|
||||
name: 'SelectDemo',
|
||||
inject:['closeCurrent'],
|
||||
components: {
|
||||
JMarkdownEditor,
|
||||
JAreaLinkage,
|
||||
JInput,
|
||||
JCategorySelect,
|
||||
JImageUpload,
|
||||
JUpload,
|
||||
JTreeDict,
|
||||
JDictSelectTag,
|
||||
JSelectDepart,
|
||||
JSelectUserByDep,
|
||||
JSelectMultiUser,
|
||||
JSelectRole,
|
||||
JCheckbox,
|
||||
JCodeEditor,
|
||||
JDate, JEditor, JEllipsis, JSlider, JSelectMultiple,
|
||||
JCron, JTreeSelect, JSuperQuery, JMultiSelectTag,
|
||||
JSearchSelectTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectList: [],
|
||||
selectedDepUsers: '',
|
||||
formData: {
|
||||
areaLinkage1: '110105',
|
||||
areaLinkage2: '140221',
|
||||
sex: 1
|
||||
},
|
||||
form: this.$form.createForm(this),
|
||||
departId: '57197590443c44f083d42ae24ef26a2c,a7d7e77e06c84325a40932163adcdaa6',
|
||||
orgCodes: 'A02A01,A02A02',
|
||||
userIds: 'admin',
|
||||
multiUser: 'admin,jero',
|
||||
jcheckbox: {
|
||||
values: 'spring,jeecgboot',
|
||||
options: [
|
||||
{ label: 'Jero', value: 'jero' },
|
||||
{ label: 'Jero-Boot', value: 'jeroboot' },
|
||||
{ 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: '这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。'
|
||||
},
|
||||
jslider: {
|
||||
value: false
|
||||
},
|
||||
jselectMultiple: {
|
||||
options: [
|
||||
{ text: '字符串', value: 'String' },
|
||||
{ text: '字符串1', value: 'String1' },
|
||||
{ text: '整数型', value: 'Integer' },
|
||||
{ text: '浮点型', value: 'Double' },
|
||||
{ text: '布尔型', value: 'Boolean' }
|
||||
],
|
||||
value: 'Integer,Boolean'
|
||||
},
|
||||
modal: {
|
||||
title: '这里是标题',
|
||||
visible: false,
|
||||
fullscreen: true,
|
||||
switchFullscreen: true,
|
||||
},
|
||||
cron: '',
|
||||
superQuery: {
|
||||
fieldList: [
|
||||
{ type: 'input', value: 'name', text: '姓名', },
|
||||
{ type: 'select', value: 'sex', text: '性别', dictCode: 'sex' },
|
||||
{ type: 'number', value: 'age', text: '年龄', },
|
||||
{
|
||||
type: 'select', value: 'hobby', text: '爱好',
|
||||
options: [
|
||||
{ label: '音乐', value: '1' },
|
||||
{ label: '游戏', value: '2' },
|
||||
{ label: '电影', value: '3' },
|
||||
{ label: '读书', value: '4' },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
fileList:[],
|
||||
imgList:[],
|
||||
jInput: {
|
||||
type: 'like',
|
||||
options: [
|
||||
{ value: 'like', label: '模糊（like）' },
|
||||
{ value: 'ne', label: '不等于（ne）' },
|
||||
{ value: 'ge', label: '大于等于（ge）' },
|
||||
{ value: 'le', label: '小于等于（le)' },
|
||||
],
|
||||
},
|
||||
content: '',
|
||||
searchOptions:[{
|
||||
text:"选项一",
|
||||
value:"1"
|
||||
},{
|
||||
text:"选项二",
|
||||
value:"2"
|
||||
},{
|
||||
text:"选项三",
|
||||
value:"3"
|
||||
}],
|
||||
|
||||
// 选择用户查询条件配置
|
||||
selectUserQueryConfig: [
|
||||
{key: 'phone', label: '电话'},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameList: function() {
|
||||
|
||||
var names = []
|
||||
for (var a = 0; a < this.selectList.length; a++) {
|
||||
names.push(this.selectList[a].name)
|
||||
}
|
||||
return names
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDepartIdValue() {
|
||||
return this.form.getFieldValue('departId')
|
||||
},
|
||||
getOrgCodesValue() {
|
||||
return this.form.getFieldValue('orgCodes')
|
||||
},
|
||||
changeMe() {
|
||||
console.log('you so ... , change Me')
|
||||
},
|
||||
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
|
||||
},
|
||||
handleJSliderSuccess(value) {
|
||||
this.jslider.value = value
|
||||
},
|
||||
setCorn(data){
|
||||
this.$nextTick(() => {
|
||||
this.form.cronExpression = data;
|
||||
})
|
||||
},
|
||||
|
||||
handleCloseCurrentPage() {
|
||||
// 注意：以下代码必须存在
|
||||
// inject:['closeCurrent'],
|
||||
this.closeCurrent()
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-body {
|
||||
height: calc(100% - 110px) !important;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-content {
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<a-button @click="splitPane" type="primary" icon="desktop">点我分屏</a-button>
|
||||
|
||||
<split-panel-modal ref="splitPanelModal"></split-panel-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SplitPanelModal from './modules/SplitPanelModal'
|
||||
|
||||
export default {
|
||||
name: 'SplitPanel',
|
||||
components:{
|
||||
SplitPanelModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '分屏',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
splitPane(){
|
||||
this.$refs.splitPanelModal.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,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 -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeroOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeroOrderDMain-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import JeroOrderDMainModal from '@views/demo/tablist/form/JeroOrderDMainModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: "TableDemo",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderDMainModal
|
||||
},
|
||||
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.records;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-table
|
||||
rowKey="rowIndex"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableTotal',
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
width: '180px',
|
||||
align: 'center',
|
||||
dataIndex: 'rowIndex',
|
||||
customRender: function (text, r, index) {
|
||||
return (text !== '合计') ? (parseInt(index) + 1) : text
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '贡献点',
|
||||
dataIndex: 'point',
|
||||
},
|
||||
{
|
||||
title: '等级',
|
||||
dataIndex: 'level',
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
},
|
||||
],
|
||||
/* 分页参数 */
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
dataSource: [
|
||||
{ id:"1",name: '张三', point: 23, level: 3, updateTime: '2019-8-14' },
|
||||
{ name: '小王', point: 6, level: 1, updateTime: '2019-8-13' },
|
||||
{ name: '李四', point: 53, level: 8, updateTime: '2019-8-12' },
|
||||
{ name: '小红', point: 44, level: 5, updateTime: '2019-8-11' },
|
||||
{ name: '王五', point: 97, level: 10, updateTime: '2019-8-10' },
|
||||
{ name: '小明', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小张', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小六', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小五', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小赵', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '李华', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小康', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
],
|
||||
newArr:[],
|
||||
newDataSource:[],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.tableAddTotalRow(this.columns, this.dataSource)
|
||||
/*新增分页合计方法*/
|
||||
this.newDataSource=this.dataSource
|
||||
this.dataHandling(this.ipagination.pageSize-1)
|
||||
},
|
||||
watch:{
|
||||
'ipagination.pageSize':function(val) {
|
||||
this.dataHandling(val-1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 表格增加合计行 */
|
||||
tableAddTotalRow(columns, dataSource) {
|
||||
let numKey = 'rowIndex'
|
||||
let totalRow = { [numKey]: '合计' }
|
||||
columns.forEach(column => {
|
||||
let { key, dataIndex } = column
|
||||
if (![key, dataIndex].includes(numKey)) {
|
||||
|
||||
let total = 0
|
||||
dataSource.forEach(data => {
|
||||
total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
|
||||
console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN))
|
||||
})
|
||||
|
||||
if (Number.isNaN(total)) {
|
||||
total = '-'
|
||||
}
|
||||
totalRow[dataIndex] = total
|
||||
}
|
||||
})
|
||||
|
||||
dataSource.push(totalRow)
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
this.ipagination = pagination;
|
||||
},
|
||||
/*如果分页走这个方法*/
|
||||
dataHandling(num) {
|
||||
this.newArr=[];
|
||||
let arrLength = this.newDataSource.length; // 数组长度;
|
||||
let index = 0;
|
||||
for (let i = 0; i < arrLength; i++) {
|
||||
if (i % num === 0 && i !== 0) {
|
||||
this.newArr.push(this.newDataSource.slice(index, i));
|
||||
index = i;
|
||||
}
|
||||
if ((i + 1) === arrLength) {
|
||||
this.newArr.push(this.newDataSource.slice(index, (i + 1)));
|
||||
}
|
||||
}
|
||||
var arrs=this.newArr;
|
||||
for (let i =0;i<arrs.length;i++){
|
||||
let arr = arrs[i];
|
||||
let newArr= { };
|
||||
newArr.name="-";
|
||||
newArr.updateTime="-";
|
||||
newArr.rowIndex="合计"
|
||||
var level=0;
|
||||
var point=0;
|
||||
for (let j=0;j<arr.length;j++){
|
||||
level+=arr[j].level;
|
||||
point+=arr[j].point;
|
||||
}
|
||||
newArr.level=level;
|
||||
newArr.point=point;
|
||||
arrs[i].push(newArr);
|
||||
}
|
||||
var newDataSource=[];
|
||||
for (let i =0;i<arrs.length;i++){
|
||||
let arr = arrs[i];
|
||||
for(var j in arr){
|
||||
newDataSource.push(arr[j]);
|
||||
}
|
||||
}
|
||||
console.log(this.dataSource)
|
||||
this.dataSource = Object.values(newDataSource);
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
||||
<a-form @submit="handleSubmit" :form="form">
|
||||
<a-form-item
|
||||
label="标题"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'name',
|
||||
{rules: [{ required: true, message: '请输入标题' }]}
|
||||
]"
|
||||
name="name"
|
||||
placeholder="给目标起个名字" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="起止日期"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-range-picker
|
||||
name="buildTime"
|
||||
style="width: 100%"
|
||||
v-decorator="[
|
||||
'buildTime',
|
||||
{rules: [{ required: true, message: '请选择起止日期' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="目标描述"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-textarea
|
||||
rows="4"
|
||||
placeholder="请输入你阶段性工作目标"
|
||||
v-decorator="[
|
||||
'description',
|
||||
{rules: [{ required: true, message: '请输入目标描述' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="衡量标准"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-textarea
|
||||
rows="4"
|
||||
placeholder="请输入衡量标准"
|
||||
v-decorator="[
|
||||
'type',
|
||||
{rules: [{ required: true, message: '请输入衡量标准' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="客户"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-input
|
||||
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
|
||||
v-decorator="[
|
||||
'customer',
|
||||
{rules: [{ required: true, message: '请描述你服务的客户' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="邀评人"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
>
|
||||
<a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="权重"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
>
|
||||
<a-input-number :min="0" :max="100" />
|
||||
<span> %</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="目标公开"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
help="客户、邀评人默认被分享"
|
||||
>
|
||||
<a-radio-group v-model="value">
|
||||
<a-radio :value="1">公开</a-radio>
|
||||
<a-radio :value="2">部分公开</a-radio>
|
||||
<a-radio :value="3">不公开</a-radio>
|
||||
</a-radio-group>
|
||||
<a-form-item>
|
||||
<a-select mode="multiple" v-if="value === 2">
|
||||
<a-select-option value="4">同事一</a-select-option>
|
||||
<a-select-option value="5">同事二</a-select-option>
|
||||
<a-select-option value="6">同事三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapperCol="{ span: 24 }"
|
||||
style="text-align: center"
|
||||
>
|
||||
<a-button htmlType="submit" type="primary">提交</a-button>
|
||||
<a-button style="margin-left: 8px">保存</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseForm',
|
||||
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>
|
||||
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card class="card" title="仓库管理" :bordered="false">
|
||||
<repository-form ref="repository" :showSubmit="false" />
|
||||
</a-card>
|
||||
<a-card class="card" title="任务管理" :bordered="false">
|
||||
<task-form ref="task" :showSubmit="false" />
|
||||
</a-card>
|
||||
|
||||
<!-- table -->
|
||||
<a-card>
|
||||
<form :autoFormCreate="(form) => this.form = form">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="data"
|
||||
:pagination="false"
|
||||
>
|
||||
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
|
||||
<a-input
|
||||
:key="col"
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
:placeholder="columns[i].title"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</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="remove(record.key)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a @click="saveRow(record.key)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="cancel(record.key)">取消</a>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>
|
||||
<a @click="toggle(record.key)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="remove(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="newMember">新增成员</a-button>
|
||||
</form>
|
||||
</a-card>
|
||||
|
||||
<!-- fixed footer toolbar -->
|
||||
<footer-tool-bar>
|
||||
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
|
||||
</footer-tool-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RepositoryForm from './RepositoryForm'
|
||||
import TaskForm from './TaskForm'
|
||||
import FooterToolBar from '@/components/tools/FooterToolBar'
|
||||
|
||||
export default {
|
||||
name: "AdvancedForm",
|
||||
components: {
|
||||
FooterToolBar,
|
||||
RepositoryForm,
|
||||
TaskForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '高级表单常见于一次性输入和提交大批量数据的场景。',
|
||||
loading: false,
|
||||
|
||||
// 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: '财务部'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
},
|
||||
newMember () {
|
||||
this.data.push({
|
||||
key: '-1',
|
||||
name: '',
|
||||
workId: '',
|
||||
department: '',
|
||||
editable: true,
|
||||
isNew: true
|
||||
})
|
||||
},
|
||||
remove (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
|
||||
},
|
||||
toggle (key) {
|
||||
let target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = !target.editable
|
||||
},
|
||||
getRowByKey (key, newData) {
|
||||
const data = this.data
|
||||
return (newData || data).filter(item => item.key === key)[0]
|
||||
},
|
||||
cancel (key) {
|
||||
let target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
},
|
||||
handleChange (value, key, column) {
|
||||
const newData = [...this.data]
|
||||
const target = newData.filter(item => key === item.key)[0]
|
||||
if (target) {
|
||||
target[column] = value
|
||||
this.data = newData
|
||||
}
|
||||
},
|
||||
|
||||
// 最终全页面提交
|
||||
validate () {
|
||||
this.$refs.repository.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification['error']({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$refs.task.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification['error']({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<a-form @submit="handleSubmit" :form="form" class="form">
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item label="仓库名">
|
||||
<a-input
|
||||
placeholder="请输入仓库名称"
|
||||
v-decorator="[
|
||||
'repository.name',
|
||||
{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库域名">
|
||||
<a-input
|
||||
addonBefore="http://"
|
||||
addonAfter=".com"
|
||||
placeholder="请输入"
|
||||
v-decorator="[
|
||||
'repository.domain',
|
||||
{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库管理员">
|
||||
<a-select placeholder="请选择管理员" v-decorator="[ 'repository.manager', {rules: [{ required: true, message: '请选择管理员'}]} ]">
|
||||
<a-select-option value="王同学">王同学</a-select-option>
|
||||
<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="6" :md="12" :sm="24">
|
||||
<a-form-item
|
||||
label="审批人">
|
||||
<a-select placeholder="请选择审批员" v-decorator="[ 'repository.auditor', {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 :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="生效日期">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
v-decorator="[
|
||||
'repository.effectiveDate',
|
||||
{rules: [{ required: true, message: '请选择生效日期'}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库类型">
|
||||
<a-select
|
||||
placeholder="请选择仓库类型"
|
||||
v-decorator="[
|
||||
'repository.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-form-item v-if="showSubmit">
|
||||
<a-button htmlType="submit" >Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RepositoryForm",
|
||||
props: {
|
||||
showSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification['error']({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
validate (rule, value, callback) {
|
||||
const regex = /^user-(.*)$/
|
||||
if (!regex.test(value)) {
|
||||
callback('需要以 user- 开头')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<a-form @submit="handleSubmit" :form="form" class="form">
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item
|
||||
label="任务名">
|
||||
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="任务描述">
|
||||
<a-input placeholder="请输入任务描述" v-decorator="[ 'task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<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="6" :md="12" :sm="24">
|
||||
<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 :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<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 :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<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-form-item v-if="showSubmit">
|
||||
<a-button htmlType="submit" >Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TaskForm",
|
||||
props: {
|
||||
showSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification['error']({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;">
|
||||
<a-form-item
|
||||
label="付款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-select value="1" placeholder="ant-design@alipay.com">
|
||||
<a-select-option value="1">ant-design@alipay.com</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
|
||||
<a-select defaultValue="alipay" style="width: 100px">
|
||||
<a-select-option value="alipay">支付宝</a-select-option>
|
||||
<a-select-option value="wexinpay">微信</a-select-option>
|
||||
</a-select>
|
||||
<a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款人姓名"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input value="Alex" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="转账金额"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input prefix="￥" value="5000" />
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<a-button type="primary" @click="nextStep">下一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Step1",
|
||||
methods: {
|
||||
nextStep () {
|
||||
this.$emit('nextStep')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;">
|
||||
<a-alert
|
||||
:closable="true"
|
||||
message="确认转账后，资金将直接打入对方账户，无法退回。"
|
||||
style="margin-bottom: 24px;"
|
||||
/>
|
||||
<a-form-item
|
||||
label="付款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
ant-design@alipay.com
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
test@example.com
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款人姓名"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
Alex
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="转账金额"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
￥ 5,000.00
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
|
||||
<a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Step2",
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextStep () {
|
||||
let that = this
|
||||
that.loading = true
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep')
|
||||
}, 1500)
|
||||
},
|
||||
prevStep () {
|
||||
this.$emit('prevStep')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.stepFormText {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.ant-form-item-label,
|
||||
.ant-form-item-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="margin: 40px auto 0;">
|
||||
<result title="操作成功" :is-success="true" description="预计两小时内到账">
|
||||
<div class="information">
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">付款账户：</a-col>
|
||||
<a-col :sm="16" :xs="24">ant-design@alipay.com</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">收款账户：</a-col>
|
||||
<a-col :sm="16" :xs="24">test@example.com</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">收款人姓名：</a-col>
|
||||
<a-col :sm="16" :xs="24">辉夜</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">转账金额：</a-col>
|
||||
<a-col :sm="16" :xs="24"><span class="money">500</span> 元</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div slot="action">
|
||||
<a-button type="primary" @click="finish">再转一笔</a-button>
|
||||
<a-button style="margin-left: 8px" @click="toOrderList">查看账单</a-button>
|
||||
</div>
|
||||
</result>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from '../../../result/Result'
|
||||
|
||||
export default {
|
||||
name: "Step3",
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
finish () {
|
||||
this.$emit('finish')
|
||||
},
|
||||
toOrderList () {
|
||||
this.$router.push('/list/query-list')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.information {
|
||||
line-height: 22px;
|
||||
|
||||
.ant-row:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
.money {
|
||||
font-family: "Helvetica Neue",sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-steps class="steps" :current="currentTab">
|
||||
<a-step title="填写转账信息" />
|
||||
<a-step title="确认转账信息" />
|
||||
<a-step title="完成" />
|
||||
</a-steps>
|
||||
<div class="content">
|
||||
<step1 v-if="currentTab === 0" @nextStep="nextStep"/>
|
||||
<step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
|
||||
<step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Step1 from './Step1'
|
||||
import Step2 from './Step2'
|
||||
import Step3 from './Step3'
|
||||
|
||||
export default {
|
||||
name: "StepForm",
|
||||
components: {
|
||||
Step1,
|
||||
Step2,
|
||||
Step3
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
|
||||
currentTab: 0,
|
||||
|
||||
// form
|
||||
form: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// handler
|
||||
nextStep () {
|
||||
if (this.currentTab < 2) {
|
||||
this.currentTab += 1
|
||||
}
|
||||
},
|
||||
prevStep () {
|
||||
if (this.currentTab > 0) {
|
||||
this.currentTab -= 1
|
||||
}
|
||||
},
|
||||
finish () {
|
||||
this.currentTab = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.steps {
|
||||
max-width: 750px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="card-list" ref="content">
|
||||
<a-list
|
||||
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
|
||||
:dataSource="dataSource"
|
||||
>
|
||||
<a-list-item slot="renderItem" slot-scope="item, index">
|
||||
<template v-if="index === 0">
|
||||
<a-button class="new-btn" type="dashed">
|
||||
<a-icon type="plus"/>
|
||||
新增产品
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-card :hoverable="true">
|
||||
<a-card-meta>
|
||||
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
|
||||
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
|
||||
<div class="meta-content" slot="description">{{ item.content }}</div>
|
||||
</a-card-meta>
|
||||
<template class="ant-card-actions" slot="actions">
|
||||
<a>操作一</a>
|
||||
<a>操作二</a>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const dataSource = []
|
||||
for (let i = 0; i < 12; i++) {
|
||||
dataSource.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
name: "CardList",
|
||||
data () {
|
||||
return {
|
||||
description: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
|
||||
linkList: [
|
||||
{ icon: 'rocket', href: '#', title: '快速开始' },
|
||||
{ icon: 'info-circle-o', href: '#', title: '产品简介' },
|
||||
{ icon: 'file-text', href: '#', title: '产品文档' }
|
||||
],
|
||||
extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
.ant-card-actions {
|
||||
background: #f7f9fa;
|
||||
li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
width: 50%;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 186px;
|
||||
}
|
||||
|
||||
.meta-content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
height: 64px;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="角色ID">
|
||||
<a-input placeholder="请输入"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table :columns="columns" :data="loadData">
|
||||
|
||||
<span slot="actions" slot-scope="text, record">
|
||||
<a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
|
||||
</span>
|
||||
|
||||
<span slot="status" slot-scope="text">
|
||||
{{ text | statusFilter }}
|
||||
</span>
|
||||
|
||||
<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:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="权限名称"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="起一个名字" v-model="mdl.name" id="permission_name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select v-model="mdl.status">
|
||||
<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-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="赋予权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
mode="multiple"
|
||||
v-model="mdl.actions"
|
||||
:allowClear="true"
|
||||
>
|
||||
<a-select-option v-for="(action, index) in permissionList" :key="index" :value="action.value">{{ action.label }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '权限名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '可操作权限',
|
||||
dataIndex: 'actions',
|
||||
scopedSlots: { customRender: 'actions' },
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 向后端拉取可以用的操作列表
|
||||
permissionList: null,
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/permission', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
let result = res.result
|
||||
result.data.map(permission => {
|
||||
permission.actionList = JSON.parse(permission.actionData)
|
||||
return permission
|
||||
})
|
||||
return result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
1: '正常',
|
||||
2: '禁用'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissionList()
|
||||
},
|
||||
methods: {
|
||||
loadPermissionList () {
|
||||
// permissionList
|
||||
new Promise((resolve => {
|
||||
const data = [
|
||||
{ label: '新增', value: 'add', defaultChecked: false },
|
||||
{ label: '查询', value: 'get', defaultChecked: false },
|
||||
{ label: '修改', value: 'update', defaultChecked: false },
|
||||
{ label: '列表', value: 'query', defaultChecked: false },
|
||||
{ label: '删除', value: 'delete', defaultChecked: false },
|
||||
{ label: '导入', value: 'import', defaultChecked: false },
|
||||
{ label: '导出', value: 'export', defaultChecked: false }
|
||||
]
|
||||
setTimeout(resolve(data), 1500)
|
||||
})).then(res => {
|
||||
this.permissionList = res
|
||||
})
|
||||
},
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="角色ID">
|
||||
<a-input placeholder="请输入"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
>
|
||||
<div
|
||||
slot="expandedRowRender"
|
||||
slot-scope="record"
|
||||
style="margin: 0">
|
||||
<a-row
|
||||
:gutter="24"
|
||||
:style="{ marginBottom: '12px' }">
|
||||
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
|
||||
<a-col :span="4">
|
||||
<span>{{ role.permissionName }}：</span>
|
||||
</a-col>
|
||||
<a-col :span="20" v-if="role.actionEntitySet.length > 0">
|
||||
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="20" v-else>-</a-col>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="$refs.modal.edit(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:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<role-modal ref="modal" @ok="handleOk"></role-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
import RoleModal from './modules/RoleModal'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable,
|
||||
RoleModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/role', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permission.actionsOptions = permission.actionEntitySet.map(action => {
|
||||
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
|
||||
})
|
||||
})
|
||||
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
// 新增/修改 成功时，重载列表
|
||||
this.$refs.table.refresh()
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="我的待办" content="8个任务" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="本周完成任务数" content="24个"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<a-card
|
||||
style="margin-top: 24px"
|
||||
:bordered="false"
|
||||
title="标准列表">
|
||||
|
||||
<div slot="extra">
|
||||
<a-radio-group>
|
||||
<a-radio-button>全部</a-radio-button>
|
||||
<a-radio-button>进行中</a-radio-button>
|
||||
<a-radio-button>等待中</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input-search style="margin-left: 16px; width: 272px;" />
|
||||
</div>
|
||||
|
||||
<div class="operate">
|
||||
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
|
||||
</div>
|
||||
|
||||
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
|
||||
<a-list-item :key="index" v-for="(item, index) in data">
|
||||
<a-list-item-meta :description="item.description">
|
||||
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
|
||||
<a slot="title">{{ item.title }}</a>
|
||||
</a-list-item-meta>
|
||||
<div slot="actions">
|
||||
<a>编辑</a>
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<a-dropdown>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item><a>编辑</a></a-menu-item>
|
||||
<a-menu-item><a>删除</a></a-menu-item>
|
||||
</a-menu>
|
||||
<a>更多<a-icon type="down"/></a>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="list-content-item">
|
||||
<span>Owner</span>
|
||||
<p>{{ item.owner }}</p>
|
||||
</div>
|
||||
<div class="list-content-item">
|
||||
<span>开始时间</span>
|
||||
<p>{{ item.startAt }}</p>
|
||||
</div>
|
||||
<div class="list-content-item">
|
||||
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
|
||||
</div>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
|
||||
const data = []
|
||||
data.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
description: '那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
owner: '付晓晓',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 90
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Angular',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
|
||||
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
owner: '曲丽丽',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 54
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
|
||||
description: '生命就像一盒巧克力，结果往往出人意料',
|
||||
owner: '林东东',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 66
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design Pro',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
|
||||
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
owner: '周星星',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 30
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Bootstrap',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
|
||||
description: '那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
owner: '吴加好',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
status: 'exception',
|
||||
value: 100
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
name: "StandardList",
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-avatar-lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.list-content-item {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
span {
|
||||
line-height: 20px;
|
||||
}
|
||||
p {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="规则编号">
|
||||
<a-input placeholder=""/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
<template v-if="advanced">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="调用次数">
|
||||
<a-input-number style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="更新日期">
|
||||
<a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
</template>
|
||||
<a-col :md="!advanced && 8 || 24" :sm="24">
|
||||
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
<a @click="toggleAdvanced" style="margin-left: 8px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="() => this.handleModalVisible(true)">新建</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
|
||||
<!-- lock | unlock -->
|
||||
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px">
|
||||
批量操作 <a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showAlertInfo="true"
|
||||
@onSelect="onChange"
|
||||
>
|
||||
<template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
|
||||
<div :key="index">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="action" slot-scope="text, record, index">
|
||||
<div class="editable-row-operations">
|
||||
<span v-if="record.editable">
|
||||
<a @click="() => save(record)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
|
||||
<a>取消</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a class="edit" @click="() => edit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="delete" @click="() => del(record)">删除</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</s-table>
|
||||
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
|
||||
<!---->
|
||||
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
|
||||
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}">
|
||||
<a-input placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '规则编号',
|
||||
dataIndex: 'no',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
scopedSlots: { customRender: 'description' },
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
needTotal: true,
|
||||
scopedSlots: { customRender: 'callNo' },
|
||||
// customRender: (text) => text + ' 次'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: '100px',
|
||||
needTotal: true,
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
scopedSlots: { customRender: 'updatedAt' },
|
||||
},
|
||||
{
|
||||
table: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '120px',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/service', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
visibleCreateModal:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleChange (value, key, column) {
|
||||
console.log(value, key, column)
|
||||
},
|
||||
edit (row) {
|
||||
row.editable = true
|
||||
// row = Object.assign({}, row)
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
// eslint-disable-next-line
|
||||
del (row) {
|
||||
this.$confirm({
|
||||
title: '警告',
|
||||
content: '真的要删除吗?',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
// 在这里调用删除接口
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
|
||||
}).catch(() => console.log('Oops errors!'));
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
},
|
||||
save (row) {
|
||||
delete row.editable
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
cancel (row) {
|
||||
delete row.editable
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
//添加逻辑
|
||||
handleModalVisible(isVisible) {
|
||||
this.visibleCreateModal = isVisible;
|
||||
},
|
||||
handleCreateModalCancel() {
|
||||
this.visibleCreateModal = false;
|
||||
},
|
||||
handleCreateModalOk() {
|
||||
this.visibleCreateModal = false;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.fold {
|
||||
width: calc(100% - 216px);
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.fold {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="规则编号">
|
||||
<a-input v-model="queryParam.id" placeholder=""/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
<template v-if="advanced">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="调用次数">
|
||||
<a-input-number v-model="queryParam.callNo" style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="更新日期">
|
||||
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
</template>
|
||||
<a-col :md="!advanced && 8 || 24" :sm="24">
|
||||
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
|
||||
<a @click="toggleAdvanced" style="margin-left: 8px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="() => this.handleModalVisible(true)">新建</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
|
||||
<!-- lock | unlock -->
|
||||
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px">
|
||||
批量操作 <a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showAlertInfo="true"
|
||||
@onSelect="onChange"
|
||||
>
|
||||
<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:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则编号"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="规则编号" v-model="mdl.no" id="no" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="服务调用次数"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select defaultValue="1" v-model="mdl.status">
|
||||
<a-select-option value="1">Option 1</a-select-option>
|
||||
<a-select-option value="2">Option 2</a-select-option>
|
||||
<a-select-option value="3">Option 3</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
help="请填写一段描述"
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.description" placeholder="..." id="description"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="更新时间"
|
||||
hasFeedback
|
||||
validateStatus="error"
|
||||
>
|
||||
<a-date-picker
|
||||
style="width: 100%"
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="Select Time"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
|
||||
<!---->
|
||||
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
|
||||
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}">
|
||||
<a-input placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
import ATextarea from "ant-design-vue/es/input/TextArea"
|
||||
import AInput from "ant-design-vue/es/input/Input"
|
||||
import moment from "moment"
|
||||
import axios from 'axios';
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
AInput,
|
||||
ATextarea,
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visibleCreateModal:false,
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 12 },
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: true,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '规则编号',
|
||||
dataIndex: 'no'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description'
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
needTotal: true,
|
||||
customRender: (text) => text + ' 次'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
needTotal: true
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
table: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '150px',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getServiceList(Object.assign(parameter, this.queryParam))
|
||||
.then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getRoleList({ t: new Date()})
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
|
||||
//添加逻辑
|
||||
handleModalVisible(isVisible) {
|
||||
this.visibleCreateModal = isVisible;
|
||||
},
|
||||
handleCreateModalOk() {
|
||||
this.createForm.validateFields((err, fieldsValue) => {
|
||||
if (err) {
|
||||
return;
|
||||
}
|
||||
const description = this.createForm.getFieldValue('description');
|
||||
axios.post('/saveRule', {
|
||||
desc: description,
|
||||
}).then((res) => {
|
||||
this.createForm.resetFields();
|
||||
this.visibleCreateModal = false;
|
||||
this.loadRuleData();
|
||||
});
|
||||
});
|
||||
},
|
||||
handleCreateModalCancel() {
|
||||
this.visibleCreateModal = false;
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
|
||||
console.log(this.$refs.table)
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
|
||||
resetSearchForm () {
|
||||
this.queryParam = {
|
||||
date: moment(new Date())
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="角色ID">
|
||||
<a-input placeholder="请输入"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</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-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
>
|
||||
<div
|
||||
slot="expandedRowRender"
|
||||
slot-scope="record"
|
||||
style="margin: 0">
|
||||
<a-row
|
||||
:gutter="24"
|
||||
:style="{ marginBottom: '12px' }">
|
||||
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
|
||||
<a-col :lg="4" :md="24">
|
||||
<span>{{ role.permissionName }}：</span>
|
||||
</a-col>
|
||||
<a-col :lg="20" :md="24" v-if="role.actionEntitySet.length > 0">
|
||||
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="20" v-else>-</a-col>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<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:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
style="top: 20px;"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色名称"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="起一个名字" v-model="mdl.name" id="role_name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select v-model="mdl.status">
|
||||
<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-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="拥有权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-row :gutter="16" v-for="(permission, index) in mdl.permissions" :key="index">
|
||||
<a-col :span="4">
|
||||
{{ permission.permissionName }}：
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<a-checkbox-group :options="permission.actionsOptions"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getRoleList(parameter)
|
||||
.then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getServiceList().then(res => {
|
||||
console.log('getServiceList.call()', res)
|
||||
})
|
||||
|
||||
getRoleList().then(res => {
|
||||
console.log('getRoleList.call()', res)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permission.actionsOptions = permission.actionEntitySet.map(action => {
|
||||
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
|
||||
})
|
||||
})
|
||||
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
: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="唯一识别码" disabled="disabled" v-decorator="[ 'id', {rules: []} ]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色名称"
|
||||
hasFeedback >
|
||||
<a-input placeholder="起一个名字" v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗？' }] }]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback >
|
||||
<a-select v-decorator="[ 'status', {rules: []} ]">
|
||||
<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-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider/>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="拥有权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
|
||||
<a-col :span="4">
|
||||
{{ permission.name }}：
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<a-checkbox
|
||||
v-if="permission.actionsOptions.length > 0"
|
||||
:indeterminate="permission.indeterminate"
|
||||
:checked="permission.checkedAll"
|
||||
@change="onChangeCheckAll($event, permission)">
|
||||
全选
|
||||
</a-checkbox>
|
||||
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPermissions } from '@/api/manage'
|
||||
import { actionToObject } from '@/utils/permissions'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
name: "RoleModal",
|
||||
data () {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
mdl: {},
|
||||
|
||||
form: this.$form.createForm(this),
|
||||
permissions: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissions()
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({ id: 0 })
|
||||
},
|
||||
edit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
this.visible = true
|
||||
|
||||
// 有权限表，处理勾选
|
||||
if (this.mdl.permissions && this.permissions) {
|
||||
// 先处理要勾选的权限结构
|
||||
const permissionsAction = {}
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
|
||||
})
|
||||
// 把权限表遍历一遍，设定要勾选的权限 action
|
||||
this.permissions.forEach(permission => {
|
||||
permission.selected = permissionsAction[permission.id]
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
|
||||
})
|
||||
console.log('this.mdl', this.mdl)
|
||||
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const _this = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
// 验证表单没错误
|
||||
if (!err) {
|
||||
console.log('form values', values)
|
||||
|
||||
_this.confirmLoading = true
|
||||
// 模拟后端请求 2000 毫秒延迟
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => resolve(), 2000)
|
||||
}).then(() => {
|
||||
// Do something
|
||||
_this.$message.success('保存成功')
|
||||
_this.$emit('ok')
|
||||
}).catch(() => {
|
||||
// Do something
|
||||
}).finally(() => {
|
||||
_this.confirmLoading = false
|
||||
_this.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
onChangeCheck (permission) {
|
||||
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
|
||||
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
|
||||
},
|
||||
onChangeCheckAll (e, permission) {
|
||||
Object.assign(permission, {
|
||||
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
|
||||
indeterminate: false,
|
||||
checkedAll: e.target.checked
|
||||
})
|
||||
},
|
||||
loadPermissions () {
|
||||
getPermissions().then(res => {
|
||||
let result = res.result
|
||||
this.permissions = result.map(permission => {
|
||||
const options = actionToObject(permission.actionData)
|
||||
permission.checkedAll = false
|
||||
permission.selected = []
|
||||
permission.indeterminate = false
|
||||
permission.actionsOptions = options.map(option => {
|
||||
return {
|
||||
label: option.describe,
|
||||
value: option.action
|
||||
}
|
||||
})
|
||||
return permission
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="search-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchLayout",
|
||||
data () {
|
||||
return {
|
||||
tabs: {
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
title: '文章'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: '项目'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
title: '应用'
|
||||
},
|
||||
],
|
||||
active: () => {
|
||||
switch (this.$route.path) {
|
||||
case '/list/search/article':
|
||||
return '1'
|
||||
case '/list/search/project':
|
||||
return '2'
|
||||
case '/list/search/application':
|
||||
return '3'
|
||||
default:
|
||||
return '1'
|
||||
}
|
||||
},
|
||||
callback: (key) => {
|
||||
switch (key) {
|
||||
case '1':
|
||||
this.$router.push('/list/search/article')
|
||||
break
|
||||
case '2':
|
||||
this.$router.push('/list/search/project')
|
||||
break
|
||||
case '3':
|
||||
this.$router.push('/list/search/application')
|
||||
break
|
||||
default:
|
||||
this.$router.push('/workplace')
|
||||
}
|
||||
}
|
||||
},
|
||||
search: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search-head{
|
||||
background-color: #fff;
|
||||
margin: -25px -24px -24px;
|
||||
.search-input{
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.search-content{
|
||||
margin-top: 48px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<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"
|
||||
:dragSort="true"
|
||||
style="margin-top: 8px;"
|
||||
@selectRowChange="handleSelectRowChange">
|
||||
|
||||
<template v-slot:action="props">
|
||||
<a @click="handleDelete(props)">删除</a>
|
||||
</template>
|
||||
|
||||
</j-editable-table>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import { randomUUID, randomNumber } from '@/utils/util'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'DefaultTable',
|
||||
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}必须以字母开头，可包含数字、下划线、横杠'
|
||||
},
|
||||
{
|
||||
unique: true,
|
||||
message: '${title}不能重复'
|
||||
},
|
||||
{
|
||||
handler(type, value, row, column, callback, target) {
|
||||
// type 触发校验的类型（input、change、blur）
|
||||
// value 当前校验的值
|
||||
// callback(flag, message) 方法必须执行且只能执行一次
|
||||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||||
// message = 提示的类型，默认使用配置的 message
|
||||
// target 行编辑的实例对象
|
||||
|
||||
if (type === 'blur') {
|
||||
if (value === 'abc') {
|
||||
callback(false, '${title}不能是abc') // false = 未通过校验
|
||||
} else {
|
||||
callback(true) // true = 通过验证
|
||||
}
|
||||
} else {
|
||||
callback(true) // 不填写或者填写 null 代表不进行任何操作
|
||||
}
|
||||
},
|
||||
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: 'sex_dict',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
options: [],
|
||||
dictCode: 'sex',
|
||||
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}',
|
||||
// 是否是统计列，只有 inputNumber 才能设置统计列
|
||||
statistics: true,
|
||||
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: 'money',
|
||||
width: '320px',
|
||||
type: FormTypes.inputNumber,
|
||||
defaultValue: '100.32',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '可以为空',
|
||||
key: 'isNull',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
{
|
||||
type: FormTypes.popup,
|
||||
key: 'popup',
|
||||
title: 'JPopup',
|
||||
width: '180px',
|
||||
popupCode: 'demo',
|
||||
field: 'name',
|
||||
orgFields: 'name',
|
||||
destFields: 'name'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.slot,
|
||||
slotName: 'action',
|
||||
}
|
||||
|
||||
],
|
||||
dataSource: [],
|
||||
selectedRowIds: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.randomData(23, false)
|
||||
},
|
||||
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>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<j-editable-table
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:maxHeight="400"
|
||||
:disabled="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'ReadOnlyTable',
|
||||
components: { JEditableTable },
|
||||
data() {
|
||||
return {
|
||||
|
||||
columns: [
|
||||
{
|
||||
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
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{ 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' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<j-editable-table
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowNumber="true"
|
||||
:actionButton="true"
|
||||
:rowSelection="true"
|
||||
:maxHeight="400"
|
||||
@valueChange="handleValueChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'ThreeLinkage',
|
||||
components: { JEditableTable },
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '省/直辖市/自治区',
|
||||
key: 's1',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
key: 's2',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '县/区',
|
||||
key: 's3',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
|
||||
mockData: [
|
||||
{ label: '北京市', value: '110000', parent: null },
|
||||
{ label: '天津市', value: '120000', parent: null },
|
||||
{ label: '河北省', value: '130000', parent: null },
|
||||
{ label: '上海市', value: '310000', parent: null },
|
||||
|
||||
{ label: '北京市', value: '110100', parent: '110000' },
|
||||
{ label: '天津市市', value: '120100', parent: '120000' },
|
||||
{ label: '石家庄市', value: '130100', parent: '130000' },
|
||||
{ label: '唐山市', value: '130200', parent: '130000' },
|
||||
{ label: '秦皇岛市', value: '130300', parent: '130000' },
|
||||
{ label: '上海市', value: '310100', parent: '310000' },
|
||||
|
||||
{ label: '东城区', value: '110101', parent: '110100' },
|
||||
{ label: '西城区', value: '110102', parent: '110100' },
|
||||
{ label: '朝阳区', value: '110105', parent: '110100' },
|
||||
{ label: '和平区', value: '120101', parent: '120000' },
|
||||
{ label: '河东区', value: '120102', parent: '120000' },
|
||||
{ label: '河西区', value: '120103', parent: '120000' },
|
||||
{ label: '黄浦区', value: '310101', parent: '310100' },
|
||||
{ label: '徐汇区', value: '310104', parent: '310100' },
|
||||
{ label: '长宁区', value: '310105', parent: '310100' },
|
||||
{ label: '长安区', value: '130102', parent: '130100' },
|
||||
{ label: '桥西区', value: '130104', parent: '130100' },
|
||||
{ label: '新华区', value: '130105', parent: '130100' },
|
||||
{ label: '路南区', value: '130202', parent: '130200' },
|
||||
{ label: '路北区', value: '130203', parent: '130200' },
|
||||
{ label: '古冶区', value: '130204', parent: '130200' },
|
||||
{ label: '海港区', value: '130302', parent: '130300' },
|
||||
{ label: '山海关区', value: '130303', parent: '130300' },
|
||||
{ label: '北戴河区', value: '130304', parent: '130300' },
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化数据
|
||||
this.columns[0].options = this.request(null)
|
||||
},
|
||||
methods: {
|
||||
|
||||
request(parentId) {
|
||||
return this.mockData.filter(i => i.parent === parentId)
|
||||
},
|
||||
|
||||
/** 当选项被改变时，联动其他组件 */
|
||||
handleValueChange(event) {
|
||||
const { type, row, column, value, target } = event
|
||||
|
||||
if (type === FormTypes.select) {
|
||||
|
||||
// 第一列
|
||||
if (column.key === 's1') {
|
||||
// 设置第二列的 options
|
||||
this.columns[1].options = this.request(value)
|
||||
// 清空后两列的数据
|
||||
target.setValues([{
|
||||
rowKey: row.id,
|
||||
values: { s2: '', s3: '' }
|
||||
}])
|
||||
this.columns[2].options = []
|
||||
} else
|
||||
// 第二列
|
||||
if (column.key === 's2') {
|
||||
this.columns[2].options = this.request(value)
|
||||
target.setValues([{
|
||||
rowKey: row.id,
|
||||
values: { s3: '' }
|
||||
}])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<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="性别">
|
||||
<!-- <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>-->
|
||||
<j-dict-select-tag type="radio" v-decorator="['sex', {}]" :trigger-change="true" dictCode="sex"/>
|
||||
</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: "JeroDemoModal",
|
||||
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/jeroDemo/add",
|
||||
edit: "/test/jeroDemo/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>
|
||||
@@ -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: "JeroDemoTabsModal",
|
||||
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/jeroDemo/add",
|
||||
edit: "/test/jeroDemo/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>
|
||||
@@ -0,0 +1,320 @@
|
||||
<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.jeroOrderCustomerList" :key="index">
|
||||
<a-col :span="6" style="display: none">
|
||||
<a-form-item>
|
||||
<a-input placeholder="id" v-decorator="['jeroOrderCustomerList['+index+'].id', {'initialValue':item.id}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-form-item>
|
||||
<a-input placeholder="客户名" v-decorator="['jeroOrderCustomerList['+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="['jeroOrderCustomerList['+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="['jeroOrderCustomerList['+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="['jeroOrderCustomerList['+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>
|
||||
<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.jeroOrderTicketList" :key="index">
|
||||
<a-col :span="6" style="display: none">
|
||||
<a-form-item>
|
||||
<a-input placeholder="id" v-decorator="['jeroOrderTicketList['+index+'].id', {'initialValue':item.id}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item>
|
||||
<a-input placeholder="航班号" v-decorator="['jeroOrderTicketList['+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="['jeroOrderTicketList['+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>
|
||||
<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/jero/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "JeroOrderMainModal",
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
orderMainModel: {jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]},
|
||||
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/jeroOrderMain/add",
|
||||
edit: "/test/jeroOrderMain/edit",
|
||||
orderCustomerList: "/test/jeroOrderMain/queryOrderCustomerListByMainId",
|
||||
orderTicketList: "/test/jeroOrderMain/queryOrderTicketListByMainId",
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.orderMainModel = Object.assign({}, record);
|
||||
this.orderMainModel.jeroOrderCustomerList = [{}];
|
||||
this.orderMainModel.jeroOrderTicketList = [{}];
|
||||
//--------------------------------------------------------
|
||||
//初始化明细表数据
|
||||
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.jeroOrderCustomerList = res.result;
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
//初始化订单客户列表
|
||||
getAction(this.url.orderTicketList,params).then((res)=>{
|
||||
if(res.success){
|
||||
this.orderMainModel.jeroOrderTicketList = 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}) //时间格式化
|
||||
});
|
||||
},
|
||||
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,
|
||||
jeroOrderCustomerList: orderMainData.jeroOrderCustomerList,
|
||||
jeroOrderTicketList: orderMainData.jeroOrderTicketList
|
||||
}
|
||||
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.jeroOrderCustomerList.push({});
|
||||
this.$forceUpdate();
|
||||
},
|
||||
delRowCustom (index) {
|
||||
console.log(index)
|
||||
let all = this.form.getFieldsValue()
|
||||
all['jeroOrderCustomerList'].splice(index,1);
|
||||
this.form.setFieldsValue(all)
|
||||
this.orderMainModel.jeroOrderCustomerList.splice(index,1);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
addRowTicket () {
|
||||
this.orderMainModel.jeroOrderTicketList.push({});
|
||||
console.log(this.orderMainModel.jeroOrderTicketList)
|
||||
this.$forceUpdate();
|
||||
},
|
||||
delRowTicket (index) {
|
||||
console.log(index)
|
||||
let all = this.form.getFieldsValue()
|
||||
all['jeroOrderTicketList'].splice(index,1);
|
||||
this.form.setFieldsValue(all)
|
||||
this.orderMainModel.jeroOrderTicketList.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>
|
||||
@@ -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/jero/JEditableTable'
|
||||
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'JeroOrderModalForJEditableTable',
|
||||
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/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/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, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].values,
|
||||
jeroOrderTicketList: 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>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div style="display: none">
|
||||
<iframe
|
||||
:id="id"
|
||||
:src="url"
|
||||
frameborder="0"
|
||||
width="100%"
|
||||
height="550px"
|
||||
scrolling="auto">
|
||||
</iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
|
||||
export default {
|
||||
name: "PdfPreviewModal",
|
||||
data () {
|
||||
return {
|
||||
url: window._CONFIG['pdfDomainURL'],
|
||||
id:"pdfPreviewIframe",
|
||||
headers:{}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
mounted(){
|
||||
window.addEventListener('message', this.handleScanFileMessage);
|
||||
},
|
||||
methods: {
|
||||
handleScanFileMessage (event) {
|
||||
// 根据上面制定的结构来解析iframe内部发回来的数据
|
||||
const data = event.data;
|
||||
console.log(data);
|
||||
},
|
||||
|
||||
previewFiles (title,token) {
|
||||
var iframe = document.getElementById("pdfPreviewIframe");
|
||||
var json = {"title":title,"token":token};
|
||||
iframe.contentWindow.postMessage(json, "*");
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<a-card style="min-width: 500px;overflow-x: auto">
|
||||
<p>我是左侧页面</p>
|
||||
<img-turn-page></img-turn-page>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: "SplitPanelAModal",
|
||||
components:{
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<a-card style="min-width: 500px;overflow-x: auto">
|
||||
<p>我是右侧页面</p>
|
||||
<img-turn-page></img-turn-page>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: "SplitPanelAModal",
|
||||
components:{
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="分屏"
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:bodyStyle="bodyStyle"
|
||||
style="top: 0px;"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<split-pane :min-percent='20' :default-percent='50' split="vertical">
|
||||
<template slot="paneL">
|
||||
<split-panel-a></split-panel-a>
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
<split-panel-b></split-panel-b>
|
||||
</template>
|
||||
</split-pane>
|
||||
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import splitPane from 'vue-splitpane'
|
||||
import SplitPanelA from './SplitPanelA'
|
||||
import SplitPanelB from './SplitPanelB'
|
||||
export default {
|
||||
name: "SplitPanelModal",
|
||||
components:{
|
||||
splitPane,
|
||||
SplitPanelA,
|
||||
SplitPanelB
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
bodyStyle:{
|
||||
padding: "0",
|
||||
height:(window.innerHeight-150)+"px"
|
||||
},
|
||||
modalWidth:800,
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.modalWidth = window.innerWidth-0;
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true;
|
||||
},
|
||||
handleOk(){
|
||||
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,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>
|
||||
<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>
|
||||
@@ -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.result.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="less">
|
||||
.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="less" 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>
|
||||
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
|
||||
|
||||
<detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
|
||||
<detail-list-item term="创建人">曲丽丽</detail-list-item>
|
||||
<detail-list-item term="订购产品">XX服务</detail-list-item>
|
||||
<detail-list-item term="创建时间">2018-08-07</detail-list-item>
|
||||
<detail-list-item term="关联单据"><a>12421</a></detail-list-item>
|
||||
<detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
|
||||
<detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
|
||||
</detail-list>
|
||||
<a-row slot="extra" class="status-list">
|
||||
<a-col :xs="12" :sm="12">
|
||||
<div class="text">状态</div>
|
||||
<div class="heading">待审批</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12">
|
||||
<div class="text">订单金额</div>
|
||||
<div class="heading">¥ 568.08</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- actions -->
|
||||
<template slot="action">
|
||||
<a-button-group style="margin-right: 4px;">
|
||||
<a-button>操作</a-button>
|
||||
<a-button>操作</a-button>
|
||||
<a-button><a-icon type="ellipsis"/></a-button>
|
||||
</a-button-group>
|
||||
<a-button type="primary" >主操作</a-button>
|
||||
</template>
|
||||
|
||||
<a-card :bordered="false" title="流程进度">
|
||||
<a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
|
||||
<a-step title="创建项目">
|
||||
</a-step>
|
||||
<a-step title="部门初审">
|
||||
</a-step>
|
||||
<a-step title="财务复核">
|
||||
</a-step>
|
||||
<a-step title="完成">
|
||||
</a-step>
|
||||
</a-steps>
|
||||
</a-card>
|
||||
|
||||
<a-card style="margin-top: 24px" :bordered="false" title="用户信息">
|
||||
<detail-list>
|
||||
<detail-list-item term="用户姓名">付晓晓</detail-list-item>
|
||||
<detail-list-item term="会员卡号">32943898021309809423</detail-list-item>
|
||||
<detail-list-item term="身份证">3321944288191034921</detail-list-item>
|
||||
<detail-list-item term="联系方式">18112345678</detail-list-item>
|
||||
<detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
|
||||
</detail-list>
|
||||
<detail-list title="信息组">
|
||||
<detail-list-item term="某某数据">725</detail-list-item>
|
||||
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item > </detail-list-item>
|
||||
<detail-list-item term="某某数据">725</detail-list-item>
|
||||
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item > </detail-list-item>
|
||||
</detail-list>
|
||||
<a-card type="inner" title="多层信息组">
|
||||
<detail-list title="组名称" size="small">
|
||||
<detail-list-item term="负责人">林东东</detail-list-item>
|
||||
<detail-list-item term="角色码">1234567</detail-list-item>
|
||||
<detail-list-item term="所属部门">XX公司-YY部</detail-list-item>
|
||||
<detail-list-item term="过期时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin: 16px 0" />
|
||||
<detail-list title="组名称" size="small" :col="1">
|
||||
<detail-list-item term="学名"> Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin: 16px 0" />
|
||||
<detail-list title="组名称" size="small" :col="2">
|
||||
<detail-list-item term="负责人">付小小</detail-list-item>
|
||||
<detail-list-item term="角色码">1234567</detail-list-item>
|
||||
</detail-list>
|
||||
</a-card>
|
||||
|
||||
</a-card>
|
||||
|
||||
<a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
|
||||
<div class="no-data"><a-icon type="frown-o"/>暂无数据</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作 -->
|
||||
<a-card
|
||||
style="margin-top: 24px"
|
||||
:bordered="false"
|
||||
:tabList="tabList"
|
||||
:activeTabKey="activeTabKey"
|
||||
@tabChange="(key) => {this.activeTabKey = key}"
|
||||
>
|
||||
<a-table
|
||||
v-if="activeTabKey === '1'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation1"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table
|
||||
v-if="activeTabKey === '2'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation2"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table
|
||||
v-if="activeTabKey === '3'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation3"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
|
||||
const DetailListItem = DetailList.Item
|
||||
|
||||
export default {
|
||||
name: "Advanced",
|
||||
components: {
|
||||
PageLayout,
|
||||
DetailList,
|
||||
DetailListItem
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
key: '1',
|
||||
tab: '操作日志一'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tab: '操作日志二'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
tab: '操作日志三'
|
||||
}
|
||||
],
|
||||
activeTabKey: '1',
|
||||
|
||||
operationColumns: [
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '执行结果',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'updatedAt',
|
||||
key: 'updatedAt'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
key: 'remark'
|
||||
}
|
||||
],
|
||||
operation1: [
|
||||
{
|
||||
key: 'op1',
|
||||
type: '订购关系生效',
|
||||
name: '曲丽丽',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
},
|
||||
{
|
||||
key: 'op5',
|
||||
type: '创建订单',
|
||||
name: '汗牙牙',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
],
|
||||
operation2: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
}
|
||||
],
|
||||
operation3: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'agree': '成功',
|
||||
'reject': '驳回'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusTypeFilter(type) {
|
||||
const statusTypeMap = {
|
||||
'agree': 'success',
|
||||
'reject': 'error'
|
||||
}
|
||||
return statusTypeMap[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.detail-layout {
|
||||
margin-left: 44px;
|
||||
}
|
||||
.text {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
color: rgba(0, 0, 0, .25);
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
font-size: 16px;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.detail-layout {
|
||||
margin-left: unset;
|
||||
}
|
||||
.text {
|
||||
|
||||
}
|
||||
.status-list {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<page-layout :title="title">
|
||||
<a-card :bordered="false">
|
||||
<detail-list title="退款申请">
|
||||
<detail-list-item term="取货单号">1000000000</detail-list-item>
|
||||
<detail-list-item term="状态">已取货</detail-list-item>
|
||||
<detail-list-item term="销售单号">1234123421</detail-list-item>
|
||||
<detail-list-item term="子订单">3214321432</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin-bottom: 32px"/>
|
||||
<detail-list title="用户信息">
|
||||
<detail-list-item term="用户姓名">付小小</detail-list-item>
|
||||
<detail-list-item term="联系电话">18100000000</detail-list-item>
|
||||
<detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
|
||||
<detail-list-item term="取货地址">浙江省杭州市西湖区万塘路18号</detail-list-item>
|
||||
<detail-list-item term="备注"> 无</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin-bottom: 32px"/>
|
||||
|
||||
<div class="title">退货商品</div>
|
||||
<s-table
|
||||
style="margin-bottom: 24px"
|
||||
:columns="goodsColumns"
|
||||
:data="loadGoodsData">
|
||||
|
||||
</s-table>
|
||||
|
||||
<div class="title">退货进度</div>
|
||||
<s-table
|
||||
style="margin-bottom: 24px"
|
||||
:columns="scheduleColumns"
|
||||
:data="loadScheduleData">
|
||||
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status" :text="status | statusFilter"/>
|
||||
</template>
|
||||
|
||||
</s-table>
|
||||
</a-card>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import STable from '@/components/table/'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
import ABadge from "ant-design-vue/es/badge/Badge"
|
||||
const DetailListItem = DetailList.Item
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PageLayout,
|
||||
ABadge,
|
||||
DetailList,
|
||||
DetailListItem,
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
goodsColumns: [
|
||||
{
|
||||
title: '商品编号',
|
||||
dataIndex: 'id',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '商品名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '商品条码',
|
||||
dataIndex: 'barcode',
|
||||
key: 'barcode'
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '数量（件）',
|
||||
dataIndex: 'num',
|
||||
key: 'num',
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
align: 'right'
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadGoodsData: () => {
|
||||
return new Promise((resolve => {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
id: '1234561',
|
||||
name: '矿泉水 550ml',
|
||||
barcode: '12421432143214321',
|
||||
price: '2.00',
|
||||
num: '1',
|
||||
amount: '2.00'
|
||||
},
|
||||
{
|
||||
id: '1234562',
|
||||
name: '凉茶 300ml',
|
||||
barcode: '12421432143214322',
|
||||
price: '3.00',
|
||||
num: '2',
|
||||
amount: '6.00'
|
||||
},
|
||||
{
|
||||
id: '1234563',
|
||||
name: '好吃的薯片',
|
||||
barcode: '12421432143214323',
|
||||
price: '7.00',
|
||||
num: '4',
|
||||
amount: '28.00'
|
||||
},
|
||||
{
|
||||
id: '1234564',
|
||||
name: '特别好吃的蛋卷',
|
||||
barcode: '12421432143214324',
|
||||
price: '8.50',
|
||||
num: '3',
|
||||
amount: '25.50'
|
||||
}
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
totalPage: 1,
|
||||
totalCount: 10
|
||||
})
|
||||
})).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
|
||||
scheduleColumns: [
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'time',
|
||||
key: 'time'
|
||||
},
|
||||
{
|
||||
title: '当前进度',
|
||||
dataIndex: 'rate',
|
||||
key: 'rate'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作员ID',
|
||||
dataIndex: 'operator',
|
||||
key: 'operator'
|
||||
},
|
||||
{
|
||||
title: '耗时',
|
||||
dataIndex: 'cost',
|
||||
key: 'cost'
|
||||
}
|
||||
],
|
||||
loadScheduleData: () => {
|
||||
return new Promise((resolve => {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
time: '2017-10-01 14:10',
|
||||
rate: '联系客户',
|
||||
status: 'processing',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '5mins'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
time: '2017-10-01 14:05',
|
||||
rate: '取货员出发',
|
||||
status: 'success',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '1h'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
time: '2017-10-01 13:05',
|
||||
rate: '取货员接单',
|
||||
status: 'success',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '5mins'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
time: '2017-10-01 13:00',
|
||||
rate: '申请审批通过',
|
||||
status: 'success',
|
||||
operator: '系统',
|
||||
cost: '1h'
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
time: '2017-10-01 12:00',
|
||||
rate: '发起退货申请',
|
||||
status: 'success',
|
||||
operator: '用户',
|
||||
cost: '5mins'
|
||||
}
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
totalPage: 1,
|
||||
totalCount: 10
|
||||
})
|
||||
})).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'processing': '进行中',
|
||||
'success': '完成',
|
||||
'failed': '失败'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title () {
|
||||
return this.$route.meta.title
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.title {
|
||||
color: rgba(0,0,0,.85);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -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:'sys/actuator/redis/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="less" 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>
|
||||
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-tabs defaultActiveKey="1" @change="callback">
|
||||
<a-tab-pane tab="柱状图" key="1">
|
||||
<a-row>
|
||||
<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>
|
||||
<div class="statistic" ref="echartBar"></div>
|
||||
</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>
|
||||
<div class="statistic" ref="echartPie"></div>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAction
|
||||
} from '@/api/manage'
|
||||
// 引入echarts
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'ArchivesStatisticst',
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
barType: 'year',
|
||||
pieType: 'year',
|
||||
// 数据集
|
||||
countSource: [],
|
||||
barValue: [],
|
||||
pieValue: [],
|
||||
// 统计图类型
|
||||
tabStatus: "bar",
|
||||
url: {
|
||||
getYearCountInfo: "/mock/api/report/getYearCountInfo",
|
||||
getMonthCountInfo: "/mock/api/report/getMonthCountInfo",
|
||||
getCntrNoCountInfo: "/mock/api/report/getCntrNoCountInfo",
|
||||
getCabinetCountInfo: "/mock/api/report/getCabinetCountInfo",
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
let url = this.url.getYearCountInfo;
|
||||
this.loadDate(url, 'year', {});
|
||||
},
|
||||
methods: {
|
||||
loadDate(url, type, param) {
|
||||
getAction(url, param, 'get').then((res) => {
|
||||
// console.log(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) {
|
||||
let yearList = []
|
||||
let yearCountList = []
|
||||
data.forEach((item) => {
|
||||
yearList.push(item.year)
|
||||
yearCountList.push(item.yearcount)
|
||||
})
|
||||
let pieList = []
|
||||
data.forEach((item) => {
|
||||
let a = {
|
||||
'value': item.yearcount,
|
||||
'name': item.year
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
//判断类型
|
||||
if (this.tabStatus === "bar") {
|
||||
this.barChart(yearList, yearCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
},
|
||||
//按月统计
|
||||
getMonthCountSource(data) {
|
||||
let monthList = []
|
||||
let monthCountList = []
|
||||
data.forEach((item) => {
|
||||
monthList.push(item.month)
|
||||
monthCountList.push(item.monthcount)
|
||||
})
|
||||
let pieList = []
|
||||
data.forEach((item) => {
|
||||
let a = {
|
||||
'value': item.monthcount,
|
||||
'name': item.month
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
//判断类型
|
||||
if (this.tabStatus === "bar") {
|
||||
this.barChart(monthList, monthCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
|
||||
},
|
||||
//按类别统计
|
||||
getCategoryCountSource(data) {
|
||||
let cateList = []
|
||||
let cateCountList = []
|
||||
data.forEach((item) => {
|
||||
cateList.push(item.classifyname)
|
||||
cateCountList.push(item.cntrnocount)
|
||||
})
|
||||
let pieList = []
|
||||
data.forEach((item) => {
|
||||
let a = {
|
||||
'value': item.cntrnocount,
|
||||
'name': item.classifyname
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
//判断类型
|
||||
if (this.tabStatus === "bar") {
|
||||
this.barChart(cateList, cateCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
|
||||
},
|
||||
//按柜号统计
|
||||
getCabinetCountSource(data) {
|
||||
let cabinetList = []
|
||||
let cabinetCountList = []
|
||||
data.forEach((item) => {
|
||||
cabinetList.push(item.cabinetname)
|
||||
cabinetCountList.push(item.cabinetcocunt)
|
||||
})
|
||||
let pieList = []
|
||||
data.forEach((item) => {
|
||||
let a = {
|
||||
'value': item.cabinetcocunt,
|
||||
'name': item.cabinetname
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
//判断类型
|
||||
if (this.tabStatus === "bar") {
|
||||
this.barChart(cabinetList, cabinetCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
|
||||
},
|
||||
//柱状图方法
|
||||
barChart(list, countList) {
|
||||
// console.log(list,countList)
|
||||
var myChart = echarts.init(this.$refs.echartBar)
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
text: "档案统计",
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ["y"],
|
||||
},
|
||||
xAxis: {
|
||||
data: list,
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: "y",
|
||||
type: "bar",
|
||||
data: countList,
|
||||
}, ],
|
||||
}
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
},
|
||||
//饼状图方法
|
||||
TieChart(pieList) {
|
||||
var myChart = echarts.init(this.$refs.echartPie)
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
text: '档案统计',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
},
|
||||
series: [{
|
||||
name: pieList.name,
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: pieList,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
},
|
||||
// 选择统计图类别
|
||||
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, {});
|
||||
}
|
||||
},
|
||||
// 选择请求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);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.statistic {
|
||||
padding: 0px !important;
|
||||
margin-top: 50px;
|
||||
width: 100%;
|
||||
height: 600px
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,166 @@
|
||||
<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 -->
|
||||
<!-- 表单区域 -->
|
||||
<jeroOrderCustomer-modal ref="modalForm" @ok="modalFormOk"></jeroOrderCustomer-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderCustomerModal from './form/JeroOrderCustomerModal'
|
||||
import JeroOrderDMainList from './JeroOrderDMainList'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainModal",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderDMainList,
|
||||
JeroOrderCustomerModal
|
||||
},
|
||||
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;
|
||||
}
|
||||
//update-begin--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
var params = this.getQueryParams();
|
||||
getAction(this.url.list, {orderId: params.mainId, pageNo : this.ipagination.current,
|
||||
pageSize :this.ipagination.pageSize}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
} else {
|
||||
this.dataSource = null;
|
||||
}
|
||||
})
|
||||
//update-end--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
|
||||
},
|
||||
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>
|
||||
@@ -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">
|
||||
<Jero-Order-Customer-List ref="JeroOrderCustomerList"></Jero-Order-Customer-List>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="机票信息" key="2" forceRender>
|
||||
<Jero-Order-Ticket-List ref="JeroOrderTicketList"></Jero-Order-Ticket-List>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeroOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeroOrderDMain-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderDMainModal from './form/JeroOrderDMainModal'
|
||||
import JeroOrderCustomerList from './JeroOrderCustomerList'
|
||||
import JeroOrderTicketList from './JeroOrderTicketList'
|
||||
import {deleteAction} from '@/api/manage'
|
||||
import JeroOrderCustomerModal from './form/JeroOrderCustomerModal'
|
||||
import JeroOrderTicketModal from './form/JeroOrderTicketModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderTicketModal,
|
||||
JeroOrderCustomerModal,
|
||||
JeroOrderDMainModal,
|
||||
JeroOrderCustomerList,
|
||||
JeroOrderTicketList,
|
||||
},
|
||||
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.JeroOrderCustomerList.getOrderMain(this.selectedRowKeys[0]);
|
||||
this.$refs.JeroOrderTicketList.getOrderMain(this.selectedRowKeys[0]);
|
||||
},
|
||||
onClearSelected() {
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
this.$refs.JeroOrderCustomerList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderTicketList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
this.$refs.JeroOrderCustomerList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderCustomerList.selectionRows = [];
|
||||
this.$refs.JeroOrderTicketList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderTicketList.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.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
searchQuery:function(){
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
this.$refs.JeroOrderCustomerList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderTicketList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
this.$refs.JeroOrderCustomerList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderCustomerList.selectionRows = [];
|
||||
this.$refs.JeroOrderTicketList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderTicketList.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>
|
||||
@@ -0,0 +1,154 @@
|
||||
<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 -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<JeroOrderTicket-modal ref="modalForm" @ok="modalFormOk"></JeroOrderTicket-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderTicketModal from './form/JeroOrderTicketModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderTicketList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderTicketModal,
|
||||
},
|
||||
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();
|
||||
//update-begin--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
getAction(this.url.list, {orderId: params.mainId ,pageNo : this.ipagination.current,
|
||||
pageSize :this.ipagination.pageSize}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
} else {
|
||||
this.dataSource = null;
|
||||
}
|
||||
})
|
||||
//update-end--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
},
|
||||
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>
|
||||
@@ -0,0 +1,303 @@
|
||||
<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>
|
||||
<j-image-upload text="上传" v-model="fileList" :isMultiple="true"></j-image-upload>
|
||||
</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 JImageUpload from '../../../../components/jero/JImageUpload'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderCustomerModal",
|
||||
components: { JImageUpload },
|
||||
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",
|
||||
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;
|
||||
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'))
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.fileList = record.idcardPic
|
||||
}, 5)
|
||||
} 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;
|
||||
if(this.fileList != '') {
|
||||
formData.idcardPic = this.fileList;
|
||||
}else{
|
||||
formData.idcardPic = '';
|
||||
}
|
||||
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("您的身份证号码格式不正确!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -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/jero/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainModal",
|
||||
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>
|
||||
@@ -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 :trigger-change="true" v-decorator="['tickectDate',{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/jero/JDate'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
name: 'JeroOrderTicketModal',
|
||||
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>
|
||||
Reference in New Issue
Block a user