# 组件方法
# 导出组件
<template>
<q-dialog title="导出" :visible.sync="openExport" width="90%" height="90vh" append-to-body>
<QTable :columns="exportColumn"
:options="exportOptions"
:show-tool="true"
:fileName="excelConfig.sheet.name"
:excelConfig="excelConfig"
:fetch="listInfo"
:fetchParams="queryParams"
>
</QTable>
<div slot="footer" class="dialog-footer">
<el-button @click="openExport = false">关 闭</el-button>
</div>
</q-dialog>
</template>
<script>
export default {
data() {
return {
openExport: false,
excelConfig: {
type: 'table',
sheet: {
name: '餐卡信息'
}
},
exportColumn: [
{
type: 'selection',
label: 'selection',
visible: true,
width: 55
},
{
type: 'index',
label: '序号',
visible: true,
width: 55
},
{
prop: 'cardNo',
label: '卡号',
visible: true
},
{
prop: 'cardType',
label: '卡类型',
type: 'dict.klx',
visible: true
},
]
}
},
computed: {
exportOptions() {
return {
...this.dict.type,
'czt': [
{
label: '正常',
value: 0
},
{
label: '挂失',
value: 1
}
]
}
}
},
}
</script>
# 导入组件
<template>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
>导入
</el-button>
</el-col>
<el-dialog :title="upload.title" :visible.sync="upload.open" width="640px" append-to-body>
<el-card class="box-card" style="margin-bottom: 20px;">
<div slot="header" class="clearfix">
<span>字段参考</span>
</div>
<div>
<template v-for="item in dict.type.klx" v-if="dict.type.klx">
<dict-tag :options="dict.type.klx" :value="item.value" style="display: inline-block"/>
<el-divider direction="vertical"></el-divider>
</template>
<!-- <span>{{dict.type.ajlx.map(item=>item.label).join("、")}}</span>-->
<el-divider content-position="left">卡类型</el-divider>
<template v-for="item in exportOptions.czt" v-if="exportOptions.czt">
<!-- <dict-tag :options="exportOptions.czt" :value="item.value" style="display: inline-block"/>-->
<span>{{ item.label }}</span>
<el-divider direction="vertical"></el-divider>
</template>
<!-- <span>{{dict.type.ysf.map(item=>item.label).join("、")}}</span>-->
<el-divider content-position="left">状态</el-divider>
</div>
</el-card>
<div style="display: flex;align-items: center;justify-content: center">
<el-upload
style="width: 100%;"
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<!-- <el-checkbox v-model="upload.updateSupport"/>-->
<span style="color: red;"> 请参考上方字段进行填写</span>
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate"
>下载模板
</el-link>
</div>
</el-upload>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
// 导入参数
upload: {
// 是否显示弹出层（导入）
open: false,
// 弹出层标题（导入）
title: '' + '导入',
//加载动画
loading: null,
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {Authorization: 'Bearer ' + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/canteen/info/importData',
// 下载的地址（开头无/）
urlDownload: 'canteen/supplier/importTemplate',
}
}
},
computed: {
exportOptions() {
return {
...this.dict.type,
'czt': [
{
label: '正常',
value: 0
},
{
label: '挂失',
value: 1
}
]
}
}
},
methods: {
/** 导入按钮操作 */
handleImport() {
this.upload.open = true
},
/** 下载模板操作 */
importTemplate() {
this.download(this.upload.urlDownload, {}, `${this.upload.title}模板_${new Date().getTime()}.xlsx`)
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.loading = this.$loading({
lock: true,
text: '正在提交数据......',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
})
this.upload.isUploading = true
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false
this.upload.loading.close()
this.upload.isUploading = false
this.$refs.upload.clearFiles()
this.$alert('<div style=\'overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;\'>' + response.msg + '</div>', '导入结果', {dangerouslyUseHTMLString: true})
this.getList()
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
}
}
}
</script>
<style scoped lang="scss">
::v-deep .el-upload-dragger {
background-color: #fff;
border: 1px dashed #d9d9d9;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 600px !important;
height: 180px;
text-align: center;
cursor: pointer;
overflow: hidden;
}
</style>
# 动态组件
<template>
<component :is="currentComponent" v-bind="componentProps"/>
</template>
<script>
export default {
data() {
return {
currentComponent: null,
componentProps: {},
formData: {} // 假设这是你要传递给组件的参数
}
},
created() {
this.componentProps = {form: this.formData}
},
methods: {
async loadComponent(path) {
try {
// 动态导入组件
const components = require.context('@/views', true, /\.vue$/)
console.log('null==>', `@/views${path}.vue`)
const component = components(`.${path}.vue`)
this.currentComponent = component.default || component
} catch (error) {
this.$modal.msgError('加载组件失败:', error)
}
},
}
}
</script>
# 表单验证
使用 Element-UI 的 Form (opens new window)表单。
Copy
# 时间范围
null 至 null
Copy