From 05ba26afc5ee6414ed7834fe2d1e43d85b53d0bc Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期六, 23 十一月 2024 15:31:28 +0800
Subject: [PATCH] 项目库基本样式完善2
---
src/views/projectEngineering/projectLibrary/index.vue | 28 ++++--
/dev/null | 29 -------
src/components/VisibilityToolbar/index.vue | 35 ++++++--
src/views/projectEngineering/component/FileDialog.vue | 107 ++++++++++----------------
4 files changed, 83 insertions(+), 116 deletions(-)
diff --git a/src/components/VisibilityToolbar/index.vue b/src/components/VisibilityToolbar/index.vue
index 4f8ff18..2773bb6 100644
--- a/src/components/VisibilityToolbar/index.vue
+++ b/src/components/VisibilityToolbar/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="top-right-btn" :style="style">
+ <div class="top-right-btn">
<el-row>
<el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '闅愯棌鎼滅储' : '鏄剧ず鎼滅储'" placement="top">
<el-button size="small" circle icon="el-icon-search" @click="toggleSearch"></el-button>
@@ -12,12 +12,18 @@
</el-tooltip>
</el-row>
- <el-drawer :visible.sync="table" title="淇℃伅鏄鹃殣绛涢��" size="30%" append-to-body>
+ <el-drawer
+ :visible.sync="table"
+ title="淇℃伅鏄鹃殣绛涢��"
+ size="30%"
+ append-to-body
+ :wrapperCLosable="false"
+ :with-header="true">
<div slot="header">
<span>淇℃伅鏄鹃殣绛涢��</span>
</div>
- <div slot="default">
- <el-table :data="pagedColumns" style="width: 100%; height: 80%">
+ <div slot="default" style="margin-left: 20px;margin-top: 20px">
+ <el-table :data="pagedColumns" style="width: 95%; height: 80%;;margin-bottom: 40px;">
<el-table-column prop="index" label="搴忓彿" width="80"></el-table-column>
<el-table-column prop="label" label="鏁版嵁鍚嶇О"></el-table-column>
<el-table-column prop="visible" label="鏄惁鏄剧ず">
@@ -25,7 +31,8 @@
<el-switch
v-model="scope.row.visible"
class="ml-2"
- style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+ active-color="#13ce66"
+ inactive-color="#ff4949"
@change="switchChange(scope.row)"
></el-switch>
</template>
@@ -36,7 +43,6 @@
</template>
</el-table-column>
</el-table>
-
<el-pagination
v-if="total > pageSize"
:page-size="pageSize"
@@ -46,7 +52,7 @@
@current-change="handlePageChange"
></el-pagination>
</div>
- <div slot="footer">
+ <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; text-align: right;">
<el-button @click="table = false">鍙� 娑�</el-button>
<el-button type="primary" @click="resetSort">閲� 缃�</el-button>
</div>
@@ -126,10 +132,7 @@
mounted() {
this.columns.forEach((item, index) => {
if (item.visible) {
- // 娉ㄦ剰锛氳繖閲屽亣璁綾olumnRef搴旇鏄竴涓猚heckbox缁勪欢鐨勫紩鐢紝
- // 浣嗗湪Vue 2涓紝鎴戜滑鍙兘闇�瑕佸彟涓�绉嶆柟寮忔潵绠＄悊checked鐘舵�侊紝
- // 鍥犱负Vue 2娌℃湁ref鐨勮嚜鍔ㄥ疄渚嬬粦瀹氾紝涓旇繖閲岀殑columnRef閫昏緫浼间箮涓嶅畬鏁存垨閿欒銆�
- // 鍙兘闇�瑕佺Щ闄ゆ垨閲嶅啓杩欓儴鍒嗛�昏緫銆�
+
}
});
},
@@ -157,4 +160,14 @@
.show-btn {
margin-left: 12px;
}
+.drawer-footer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20px;
+ background: #fff;
+ border-top: 1px solid #e8e8e8;
+ text-align: right;
+}
</style>
diff --git a/src/enums/fileType.js b/src/enums/fileType.js
deleted file mode 100644
index d61a14a..0000000
--- a/src/enums/fileType.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// 鏂囦欢绫诲瀷鏋氫妇
-const FileTypeEnum = {
- JPEG: 'image/jpeg',
- JPG: 'image/jpg',
- PNG: 'image/png',
- GIF: 'image/gif',
- SVG: 'image/svg+xml',
- MP4: 'video/mp4',
- AVI: 'video/x-msvideo',
- MOV: 'video/quicktime',
- MKV: 'video/x-matroska',
- WMV: 'video/x-ms-wmv',
- PDF: 'application/pdf',
- DOC: 'application/msword',
- DOCX: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
- XLS: 'application/vnd.ms-excel',
- XLSX: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
- PPT: 'application/vnd.ms-powerpoint',
- PPTX: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
- TXT: 'text/plain',
- CSV: 'text/csv',
- JSON: 'application/json',
- XML: 'application/xml',
- ZIP: 'application/zip',
- RAR: 'application/x-rar-compressed',
- MP3: 'audio/mpeg',
- WAV: 'audio/wav',
- OGG: 'audio/ogg'
-};
diff --git a/src/views/projectEngineering/component/FileDialog.vue b/src/views/projectEngineering/component/FileDialog.vue
index 31395be..d06e5bd 100644
--- a/src/views/projectEngineering/component/FileDialog.vue
+++ b/src/views/projectEngineering/component/FileDialog.vue
@@ -1,3 +1,4 @@
+
<template>
<div>
<el-dialog
@@ -8,7 +9,7 @@
close-on-click-modal
@close="closeDialog"
>
- <template slot="header">
+ <template slot="title">
<span style="padding-bottom: 18px">
{{ isImportOrExport ? '璇锋寜鐓ч渶姹傚鍑虹洰鏍囧唴瀹�' : '璇锋寜鐓фā鏉挎牱寮忎笂浼犻」鐩枃浠�' }}
</span>
@@ -18,17 +19,17 @@
<el-upload
ref="uploadRef"
class="upload-demo"
- :action="upload.url"
+ :action="uploadUrl"
:limit="1"
:accept="accept"
- :headers="upload.headers"
- :disabled="upload.isUploading"
+ :headers=" uploadHeaders"
+ :disabled="uploadIsUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
- <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+ <i class="el-icon-upload"></i>
<div class="el-upload__text">璇蜂笂浼�<em>Zip</em>鏂囦欢锛屽ぇ灏忓湪<em>100M</em>浠ュ唴</div>
</el-upload>
<span>浠呭厑璁稿鍏ip鏍煎紡鏂囦欢銆�</span>
@@ -53,15 +54,10 @@
</template>
<script>
-// import UploadFilled from '@element/icons-vue/es/icons/UploadFilled.vue';
import { globalHeaders } from '@/utils/request';
-import { FileTypeEnum } from '@/enums/fileType';
export default {
name: 'FileDialog',
- // components: {
- // UploadFilled
- // },
props: {
isImportOrExport: {
type: Boolean,
@@ -82,49 +78,18 @@
return {
uploadRef: null,
targetColumn: [],
- accept: `${FileTypeEnum.ZIP}`,
- upload: {
- open: false,
- title: '',
- isUploading: false,
- updateSupport: 0,
- headers: globalHeaders(),
- url: process.env.VITE_APP_BASE_API + '/project/import'
- }
+ accept: `.zip`,
+ uploadUrl: '/project/import',
+ uploadHeaders: globalHeaders(),
+ uploadIsUploading: false
};
- },
- computed: {
- // In Vue 2, computed properties don't use setters and getters as objects.
- // Instead, you define them as functions for reading and use methods for writing.
- // However, in this case, we can use a watcher to update the prop.
- fileDialogVisible: {
- get() {
- return this.isFileDialogVisible;
- },
- set(value) {
- this.$emit('update:fileDialogVisible', value);
- }
- }
- // Note: In Vue 2, you cannot directly define a computed property with a setter for a prop.
- // Instead, you should use a watcher or a method to handle changes.
- // Since `fileDialogVisible` is a prop, we'll use a watcher to sync it with the internal state.
- // However, for simplicity, we'll rename `fileDialogVisible` to `isFileDialogVisible` in data and use a watcher.
- },
- watch: {
- fileDialogVisible(newVal) {
- this.isFileDialogVisible = newVal;
- },
- isFileDialogVisible(newVal) {
- this.$emit('update:fileDialogVisible', newVal);
- }
},
methods: {
handleFileUploadProgress() {
- this.upload.isUploading = true;
+ this.uploadIsUploading = true;
},
handleFileSuccess(response, file) {
- this.upload.open = false;
- this.upload.isUploading = false;
+ this.uploadIsUploading = false;
if (this.uploadRef) {
this.uploadRef.handleRemove(file);
}
@@ -140,24 +105,24 @@
},
handleDownloadFile() {
const self = this;
- fetch(`${process.env.VITE_APP_BASE_API}/project/export/template`, {
- method: 'GET',
- headers: self.upload.headers
- })
- .then(response => response.blob())
- .then(blob => {
- const url = window.URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.style.display = 'none';
- a.href = url;
- a.download = `椤圭洰鏂囦欢妯℃澘_${new Date().getTime()}.zip`;
- document.body.appendChild(a);
- a.click();
- window.URL.revokeObjectURL(url);
- })
- .catch(error => {
- console.error('鏂囦欢涓嬭浇澶辫触:', error);
- });
+ // fetch(`${process.env.VITE_APP_BASE_API}/project/export/template`, {
+ // method: 'GET',
+ // headers: self.upload.headers
+ // })
+ // .then(response => response.blob())
+ // .then(blob => {
+ // const url = window.URL.createObjectURL(blob);
+ // const a = document.createElement('a');
+ // a.style.display = 'none';
+ // a.href = url;
+ // a.download = `椤圭洰鏂囦欢妯℃澘_${new Date().getTime()}.zip`;
+ // document.body.appendChild(a);
+ // a.click();
+ // window.URL.revokeObjectURL(url);
+ // })
+ // .catch(error => {
+ // console.error('鏂囦欢涓嬭浇澶辫触:', error);
+ // });
},
submitFileForm() {
if (this.uploadRef) {
@@ -172,8 +137,11 @@
this.targetColumn = this.currentColumns.filter(item => item.visible);
}
},
+ mounted() {
+ this.uploadRef = this.$refs.uploadRef;
+ },
created() {
- // Initialize the computed property as a data property in Vue 2
+
this.isFileDialogVisible = this.fileDialogVisible;
}
};
@@ -186,6 +154,7 @@
align-items: center;
flex-direction: column;
height: 300px;
+
.export-button {
margin-left: 0;
margin-bottom: 10px;
@@ -198,4 +167,10 @@
.upload-demo {
width: 100%;
}
+::v-deep .el-upload{
+ width: 100%;
+}
+::v-deep .el-upload .el-upload-dragger{
+ width: 100%;
+}
</style>
diff --git a/src/views/projectEngineering/projectLibrary/index.vue b/src/views/projectEngineering/projectLibrary/index.vue
index 3d16906..9abbf0d 100644
--- a/src/views/projectEngineering/projectLibrary/index.vue
+++ b/src/views/projectEngineering/projectLibrary/index.vue
@@ -164,7 +164,7 @@
</div>
<VisibilityToolbar
v-model:showSearch="showSearch"
- :columns="columnList"
+ :columns="columns"
@queryTable="handleQuery"
></VisibilityToolbar>
<!-- @update:columns="handleUpdateColumns"-->
@@ -239,27 +239,28 @@
@pagination="getList"
/>
-<!-- <FileDialog-->
-<!-- v-model:fileDialogVisible="fileDialogVisible"-->
-<!-- :isImportOrExport="isImportOrExport"-->
-<!-- @fileDialogCancel="fileDialogCancel"-->
-<!-- :currentColumns="currentColumns"-->
-<!-- />-->
+ <FileDialog
+ :fileDialogVisible.sync="fileDialogVisible"
+ :isImportOrExport="isImportOrExport"
+ @fileDialogCancel="fileDialogCancel"
+ :currentColumns="columns"
+ />
</div>
</template>
<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/projectInfo";
import { current } from './list';
-
+import FileDialog from '../component/FileDialog';
export default {
name: "projectInfo",
+ components: {
+ FileDialog
+ },
data() {
return {
isImportOrExport: false,
fileDialogVisible: false,
- //鎺у埗鏄鹃殣鐨勮〃鍗�
- columnList: [],
//鏄惁闇�瑕佹柊澧炴寜閽�(鍌ㄨ搫椤圭洰闇�瑕�)
isReserve: false,
//琛ㄥご
@@ -327,6 +328,13 @@
this.getList();
},
methods: {
+ // 鍏抽棴鏂囦欢澶勭悊寮规鐨勬柟娉�
+ fileDialogCancel() {
+ this.tableLoading = true;
+ this.fileDialogVisible = false;
+ // this.getList();
+ this.tableLoading = false;
+ },
handlePopover() {
this.popoverValue.value = !this.popoverValue.value;
},
--
Gitblit v1.8.0