<template>
|
<el-form class="demo-form" :model="dataForm" ref="dataForm" label-width="120px">
|
<el-collapse v-model="activeNames">
|
<el-collapse-item name="upload">
|
<template slot="title">
|
<el-tag>文件相关</el-tag>
|
</template>
|
<zt-form-item prop="files" :label="$t('upload.fileUpload')">
|
<zt-uploader v-model="dataForm.files" button-text="自定义按钮" tip="这里是上传提示" multiple :limit="1" accept=".pdf"/>
|
{{dataForm.files}}
|
</zt-form-item>
|
<zt-form-item prop="image" :label="$t('upload.singleImgUpload')">
|
<zt-uploader v-model="dataForm.image" image/>
|
{{dataForm.image}}
|
</zt-form-item>
|
<zt-form-item prop="images" :label="$t('upload.multipleImgUpload')">
|
<zt-uploader v-model="dataForm.images" image multiple :limit="2"/>
|
{{dataForm.images}}
|
</zt-form-item>
|
<zt-form-item prop="image3" :label="$t('upload.cutUpload')">
|
<zt-uploader v-model="dataForm.image3" crop/>
|
{{dataForm.image3}}
|
</zt-form-item>
|
<zt-form-item prop="image2" :label="$t('upload.dragUpload')">
|
<zt-uploader v-model="dataForm.image2" image drag/>
|
{{dataForm.image2}}
|
</zt-form-item>
|
|
<div class="item-line-divider"></div>
|
|
<zt-form-item prop="image3" label="Excel导入">
|
<zt-excel-import action="/sample/excel/import" @success="onSuccess"/>
|
</zt-form-item>
|
|
<zt-form-item prop="image3" label="多表头Excel导入">
|
<zt-excel-import action="/sample/multiple/header/excel/import"/>
|
</zt-form-item>
|
|
<zt-form-item prop="image3" label="多sheet Excel导入">
|
<zt-excel-import action="/sample/multiple/sheet/excel/import"/>
|
</zt-form-item>
|
|
<div class="item-line-divider"></div>
|
|
<zt-form-item prop="image3" label="Excel导出">
|
<zt-button type="export" @click="excelExport()"/>
|
</zt-form-item>
|
|
<zt-form-item prop="image3" label="多表头Excel导出">
|
<zt-button type="export" @click="multipleHeaderExcelExport()"/>
|
</zt-form-item>
|
|
<zt-form-item prop="image3" label="多Sheet Excel导出">
|
<zt-button type="export" @click="multipleSheetExcelExport()"/>
|
</zt-form-item>
|
</el-collapse-item>
|
|
<el-collapse-item name="date">
|
<template slot="title">
|
<el-tag>时间选择</el-tag>
|
</template>
|
<zt-form-item prop="data1" label="日期选择">
|
<zt-date-picker v-model="dataForm.data1" :min="new Date()"/>
|
{{dataForm.data1}}
|
</zt-form-item>
|
<zt-form-item prop="time1" label="时间选择">
|
<zt-time-picker v-model="dataForm.time1" min="10:00:00"/>
|
{{dataForm.time1}}
|
</zt-form-item>
|
<zt-form-item prop="data2" label="日期时间选择">
|
<zt-date-picker type="datetime" v-model="dataForm.data2" :min="new Date()"/>
|
{{dataForm.data2}}
|
</zt-form-item>
|
<zt-form-item prop="range" label="日期范围选择">
|
<zt-date-range-picker v-model="dataForm.range" :start="dataForm.start" :end="dataForm.end" @startChange="dataForm.start = $event" @endChange="dataForm.end = $event" min="2020-08-10"/>
|
{{dataForm.start + ' ~ ' + dataForm.end}}
|
</zt-form-item>
|
</el-collapse-item>
|
|
<el-collapse-item name="dict">
|
<template slot="title">
|
<el-tag>字典</el-tag>
|
</template>
|
<zt-form-item prop="nature" label="字典" rules='required'>
|
<zt-dict v-model="dataForm.gender" dict="gender" :radio="true"></zt-dict>
|
</zt-form-item>
|
<zt-form-item prop="nature" label="字典树" rules='required'>
|
<zt-dict v-model="dataForm.test" dict="test"></zt-dict>
|
</zt-form-item>
|
<zt-form-item prop="nature" label="树(仅值可选)" rules='required'>
|
<zt-dict v-model="dataForm.test" dict="test" :data-only="true"></zt-dict>
|
</zt-form-item>
|
</el-collapse-item>
|
|
<el-collapse-item name="selector">
|
<template slot="title">
|
<el-tag>选公司/部门/人</el-tag>
|
</template>
|
<zt-form-item label="选择公司" prop="companyIds">
|
<zt-company-selector v-model="dataForm.companyIds" multiple/>
|
</zt-form-item>
|
<zt-form-item label="选择部门" prop="deptIds">
|
<zt-dept-selector v-model="dataForm.deptIds" multiple/>
|
</zt-form-item>
|
<zt-form-item label="选择用户" prop="userIds">
|
<zt-user-selector v-model="dataForm.userIds" multiple/>
|
</zt-form-item>
|
</el-collapse-item>
|
|
<el-collapse-item name="combo-tree">
|
<template slot="title">
|
<el-tag>下拉选择</el-tag>
|
</template>
|
<zt-form-item label="zt-select多选" prop="menuId">
|
<zt-select v-model="dataForm.menuId" url="sys/menu/nav" multiple/>
|
{{dataForm.menuId}}
|
</zt-form-item>
|
<zt-form-item label="zt-combo-tre多选" prop="menuIds">
|
<zt-combo-tree v-model="dataForm.menuIds" url="sys/menu/nav" multiple/>
|
{{dataForm.menuIds}}
|
</zt-form-item>
|
</el-collapse-item>
|
|
<el-collapse-item name="2">
|
<template slot="title">
|
<el-tag>其他</el-tag>
|
</template>
|
<zt-form-item label="zt-tree-select懒加载" prop="menuIds">
|
<zt-combo-tree v-model="dataForm.menuIds" url="sys/menu/nav" multiple lazy/>
|
{{dataForm.menuIds}}
|
</zt-form-item>
|
<zt-form-item label="zt-tree-select大量数据懒加载" prop="product">
|
<zt-combo-tree :datas="produces" v-model="dataForm.product" multiple lazy :expandLevel="1"/>
|
{{dataForm.product}}
|
</zt-form-item>
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-form>
|
</template>
|
|
<script>
|
import Cookies from 'js-cookie'
|
import qs from 'qs'
|
export default {
|
data() {
|
return {
|
activeNames: [],
|
dataForm: {
|
start: '2020-08-26',
|
end: '2020-09-01',
|
gender: '1',
|
menuId: '1280671912309116929',
|
menuIds: '1283384276716363777,1298061262269313026,1283359546445709314',
|
product: ''
|
},
|
produces: []
|
}
|
},
|
computed: {
|
},
|
mounted() {
|
let that = this
|
setTimeout((timer) => {
|
that.produces = require('./products.json')
|
}, 1000)
|
},
|
methods: {
|
excelExport() {
|
var params = qs.stringify({
|
'token': Cookies.get('token')
|
}) // 参数
|
let apiURL = `/sample/excel/export`
|
window.open(`${window.SITE_CONFIG['apiURL']}${apiURL}?${params}`)
|
},
|
multipleHeaderExcelExport() {
|
var params = qs.stringify({
|
'token': Cookies.get('token')
|
}) // 参数
|
let apiURL = `/sample/multiple/header/excel/export`
|
window.open(`${window.SITE_CONFIG['apiURL']}${apiURL}?${params}`)
|
},
|
multipleSheetExcelExport() {
|
var params = qs.stringify({
|
'token': Cookies.get('token')
|
}) // 参数
|
let apiURL = `/sample/multiple/sheet/excel/export`
|
window.open(`${window.SITE_CONFIG['apiURL']}${apiURL}?${params}`)
|
},
|
onSuccess(data) {
|
this.$tip.success(data || '导入成功')
|
}
|
}
|
}
|
</script>
|
<style>
|
.demo-form {
|
background: white;
|
padding: 15px;
|
}
|
.demo-form > .el-form-item, .demo-form .el-collapse-item__content > .el-form-item {
|
width: 33.33333%;
|
float: left;
|
}
|
|
.demo-form .item-line-divider {
|
width: 100%;
|
height: 0px;
|
float: left;
|
}
|
|
</style>
|
