| | |
|---|
| | | </el-dialog>
|
|---|
| | |
|
|---|
| | | <!-- 用户导入对话框 -->
|
|---|
| | | <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
|---|
| | | <el-upload 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" />是否更新已经存在的用户数据
|
|---|
| | | </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 slot="footer" class="dialog-footer">
|
|---|
| | | <el-button type="primary" @click="submitFileForm">确 定</el-button>
|
|---|
| | | <el-button @click="upload.open = false">取 消</el-button>
|
|---|
| | | </div>
|
|---|
| | | </el-dialog>
|
|---|
| | | <excel-import-dialog ref="importUserRef" title="用户导入" action="/system/user/importData" template-action="/system/user/importTemplate" template-file-name="user_template" update-support-label="是否更新已经存在的用户数据" @success="getList" />
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user"
|
|---|
| | | import { getToken } from "@/utils/auth"
|
|---|
| | | import Treeselect from "@riophae/vue-treeselect"
|
|---|
| | | import "@riophae/vue-treeselect/dist/vue-treeselect.css"
|
|---|
| | | import TreePanel from "@/components/TreePanel"
|
|---|
| | | import ExcelImportDialog from "@/components/ExcelImportDialog"
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | name: "User",
|
|---|
| | | dicts: ['sys_normal_disable', 'sys_user_sex'],
|
|---|
| | | components: { Treeselect, TreePanel },
|
|---|
| | | components: { Treeselect, TreePanel, ExcelImportDialog },
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | // 遮罩层
|
|---|
| | |
|---|
| | | roleOptions: [],
|
|---|
| | | // 表单参数
|
|---|
| | | form: {},
|
|---|
| | | // 用户导入参数
|
|---|
| | | upload: {
|
|---|
| | | // 是否显示弹出层（用户导入）
|
|---|
| | | open: false,
|
|---|
| | | // 弹出层标题（用户导入）
|
|---|
| | | title: "",
|
|---|
| | | // 是否禁用上传
|
|---|
| | | isUploading: false,
|
|---|
| | | // 是否更新已经存在的用户数据
|
|---|
| | | updateSupport: 0,
|
|---|
| | | // 设置上传的请求头部
|
|---|
| | | headers: { Authorization: "Bearer " + getToken() },
|
|---|
| | | // 上传的地址
|
|---|
| | | url: process.env.VUE_APP_BASE_API + "/system/user/importData"
|
|---|
| | | },
|
|---|
| | | // 查询参数
|
|---|
| | | queryParams: {
|
|---|
| | | pageNum: 1,
|
|---|
| | |
|---|
| | | },
|
|---|
| | | /** 导入按钮操作 */
|
|---|
| | | handleImport() {
|
|---|
| | | this.upload.title = "用户导入"
|
|---|
| | | this.upload.open = true
|
|---|
| | | },
|
|---|
| | | /** 下载模板操作 */
|
|---|
| | | importTemplate() {
|
|---|
| | | this.download('system/user/importTemplate', {
|
|---|
| | | }, `user_template_${new Date().getTime()}.xlsx`)
|
|---|
| | | },
|
|---|
| | | // 文件上传中处理
|
|---|
| | | handleFileUploadProgress(event, file, fileList) {
|
|---|
| | | this.upload.isUploading = true
|
|---|
| | | },
|
|---|
| | | // 文件上传成功处理
|
|---|
| | | handleFileSuccess(response, file, fileList) {
|
|---|
| | | this.upload.open = false
|
|---|
| | | 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() {
|
|---|
| | | const file = this.$refs.upload.uploadFiles
|
|---|
| | | if (!file || file.length === 0 || !file[0].name.toLowerCase().endsWith('.xls') && !file[0].name.toLowerCase().endsWith('.xlsx')) {
|
|---|
| | | this.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")
|
|---|
| | | return
|
|---|
| | | }
|
|---|
| | | this.$refs.upload.submit()
|
|---|
| | | this.$refs.importUserRef.open()
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
