导入下拉菜单按钮

This commit is contained in:
zzyuan 2026-01-26 11:25:31 +08:00
parent bcbf107d7a
commit 7e97367afb
2 changed files with 108 additions and 23 deletions

View File

@ -1,7 +1,7 @@
<template>
<div>
<!-- 查询条件 -->
<el-form :model="queryParams" ref="queryFormRef" :inline="true" inline label-width="auto" size="small">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" inline label-width="140px" size="small">
<el-card class="search-box" shadow="never">
<el-row>
<!-- <el-form-item label="审批状态" prop="status">-->
@ -56,8 +56,7 @@
@input="handleNumberInput('minOriginalValue')"
v-model.trim="queryParams.minOriginalValue"
/>
</el-form-item>
<el-form-item prop="maxOriginalValue" label="-" style="margin-left: -6%">
<span>-</span>
<el-input
clearable
style="width: 95px"
@ -66,7 +65,15 @@
v-model.trim="queryParams.maxOriginalValue"
/>
</el-form-item>
<!-- <el-form-item prop="maxOriginalValue" label="-" style="margin-left: -6%">
<el-input
clearable
style="width: 95px"
placeholder="请输入"
@input="handleNumberInput('maxOriginalValue')"
v-model.trim="queryParams.maxOriginalValue"
/>
</el-form-item> -->
<el-form-item style="float: right">
<el-button icon="el-icon-search" type="primary" @click="queryTableList" size="mini" style="background: #2CBAB2;"> 查询</el-button>
<el-button icon="el-icon-refresh" @click="resetTableList" size="mini"> 重置</el-button>
@ -84,16 +91,27 @@
<el-button type="primary" size="mini" @click="equipmentDeployment" v-show="!isAddVisible" style="background: #2CBAB2;">
新增装备
</el-button>
<el-button type="primary" size="mini" @click="handleImport" v-show="!isAddVisible" style="background: #2CBAB2;"> 批量导入</el-button>
<el-button
type="primary"
size="mini"
@click="handleImportImg"
v-show="!isAddVisible"
:disabled="tableData.length == 0"
>
批量导入文件
</el-button>
<el-dropdown size="mini" placement="bottom-start" v-show="!isAddVisible" trigger="click" @visible-change="handleVisibleChange" @command="(command) => handleCommand(command)">
<el-button plain size="mini" class="el-dropdown-link">
导入 <i class="el-icon-arrow-up el-icon--right" :class="{ 'rotate': isDropdownOpen }"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDownload">下载导入模板</el-dropdown-item>
<el-dropdown-item command="handleImport">导入</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-dropdown size="mini" v-show="!isAddVisible" :disabled="tableData.length == 0" trigger="click" @visible-change="handleVisibleChange2" @command="(command) => handleCommand2(command)">
<el-button plain size="mini" class="el-dropdown-link">
导入文件
<i class="el-icon-arrow-up el-icon--right" :class="{ 'rotate': isDropdownOpen2 }"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDownload">下载导入模板</el-dropdown-item>
<el-dropdown-item command="handleImport">导入文件</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown> -->
<!-- <el-button type="primary" size="mini" @click="handleImport" v-show="!isAddVisible" style="background: #2CBAB2;"> 批量导入</el-button> -->
<el-button type="primary" size="mini" @click="handleImportImg" v-show="!isAddVisible" :disabled="tableData.length == 0">批量导入文件</el-button>
<el-button
size="small"
type="primary"
@ -620,13 +638,13 @@
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xlsxlsx格式文件</span>
<el-link
<!-- <el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板
</el-link>
</el-link> -->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
@ -740,6 +758,8 @@ export default {
//
tableData: [],
total: 0,
isDropdownOpen: false,
isDropdownOpen2: false,
upload: {
//
open: false,
@ -816,8 +836,7 @@ export default {
{ key: 42, label: `特征项9`, prop: 'featureItem9', visible: true },
{ key: 43, label: `特征值9`, prop: 'featureValue9', visible: true }
],
fieldVoList:[],
fieldVoList:[],
dialogVisible: false,
dialogTitle: '',
dialogList: [],
@ -1252,6 +1271,38 @@ export default {
}
}
},
//
handleCommand(command) {
switch (command) {
case 'handleDownload':
this.importTemplate()
break
case 'handleImport':
this.handleImport()
break
default:
break
}
},
handleVisibleChange(visible) {
this.isDropdownOpen = visible;
},
handleCommand2(command) {
switch (command) {
case 'handleDownload':
this.importTemplate2()
break
case 'handleImport':
this.handleImportImg()
break
default:
break
}
},
handleVisibleChange2(visible) {
this.isDropdownOpen2 = visible;
},
handleImport() {
this.upload.title = '导入'
this.upload.open = true
@ -1386,7 +1437,7 @@ export default {
},
importTemplate2() {
this.download(
`/material-mall/order/zip?orderId=${this.queryParams.orderId}`,
`/material-mall/order/zip?orderId=${this.orderId}`,
{},
`批量导入图片模板_${new Date().getTime()}.zip`
)
@ -1682,7 +1733,9 @@ export default {
},
replaceRoute(orderId) {
const routerParams = this.$route.query || {}
console.log('orderId--->>', orderId)
console.log('routerParams--->>', routerParams)
this.orderId=orderId;
this.$router.replace({
query: {
id: routerParams.id || '',
@ -1849,4 +1902,10 @@ export default {
background-color: #2CBAB2;
border-color: #2CBAB2;
}
.el-icon-arrow-up {
transition: transform 0.3s ease;
}
.el-icon-arrow-up.rotate {
transform: rotate(180deg);
}
</style>

View File

@ -98,10 +98,19 @@
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-upload2" style="background: rgba(44,186,178,0.2);color: #2CBAB2;border-color: rgba(44,186,178,0.2);" size="mini" @click="handleImport"
<!-- <el-button type="primary" icon="el-icon-upload2" style="background: rgba(44,186,178,0.2);color: #2CBAB2;border-color: rgba(44,186,178,0.2);" size="mini" @click="handleImport"
v-hasPermi="['system:user:import']"
>导入
</el-button>
</el-button> -->
<el-dropdown size="mini" placement="bottom-start" trigger="click" @visible-change="handleVisibleChange" @command="(command) => handleCommand(command)">
<el-button plain size="mini" class="el-dropdown-link" v-hasPermi="['system:user:import']">
导入 <i class="el-icon-arrow-up el-icon--right" :class="{ 'rotate': isDropdownOpen }"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDownload">下载导入模板</el-dropdown-item>
<el-dropdown-item command="handleImport">导入</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-download" style="background: rgba(44,186,178,0.2);color: #2CBAB2;border-color: rgba(44,186,178,0.2);" size="mini" @click="handleExport"
@ -313,10 +322,10 @@
是否更新已经存在的用户数据
</div>
<span>仅允许导入xlsxlsx格式文件</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
<!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate"
>下载模板
</el-link>
</el-link> -->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
@ -416,6 +425,7 @@
//
url: process.env.VUE_APP_BASE_API + '/system/user/importData'
},
isDropdownOpen: false,
//
queryParams: {
pageNum: 1,
@ -841,6 +851,22 @@
...this.queryParams
}, `user_${new Date().getTime()}.xlsx`)
},
//
handleCommand(command) {
switch (command) {
case 'handleDownload':
this.importTemplate()
break
case 'handleImport':
this.handleImport()
break
default:
break
}
},
handleVisibleChange(visible) {
this.isDropdownOpen = visible;
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = '用户导入'