From 334a28c5ef11126f71a3f7f49697ba8cfbfcb255 Mon Sep 17 00:00:00 2001
From: Yuan <yuanliyedefy@gmail.com>
Date: Tue, 11 Oct 2022 17:20:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/baseUrl.js                          |   4 +-
 src/views/system/exampleCaseManage/create.vue | 157 +++++++++++-------
 2 files changed, 99 insertions(+), 62 deletions(-)

diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js
index b654d6b38..b23886d27 100644
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@@ -25,13 +25,13 @@ export function handlerUrl(data) {
         // const data = null;
         // BASE_API = 'https://joylink.club/jlcloud';
         // BASE_API = 'https://test.joylink.club/jlcloud';
-        // BASE_API = 'http://192.168.3.233/rtss-server';
+        BASE_API = 'http://192.168.3.233/rtss-server';
         // BASE_API = 'http://114.116.51.125/jlcloud';
         // BASE_API = 'http://192.168.3.90:9100'; // 周寅
         // BASE_API = 'http://192.168.3.94:9000'; // 旭强
         // BASE_API = 'http://192.168.3.15:9000'; // 张赛
         // BASE_API = 'http://192.168.3.5:9000'; // 夏增彬
-        BASE_API = 'http://192.168.3.37:9000'; // 卫志宏
+        // BASE_API = 'http://192.168.3.37:9000'; // 卫志宏
         // BASE_API = 'http://b29z135112.zicp.vip';
         // BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康
         // BASE_API = 'http://2i38984j47.qicp.vip'; // 张赛
diff --git a/src/views/system/exampleCaseManage/create.vue b/src/views/system/exampleCaseManage/create.vue
index 8ce186ad7..0b37fc5b4 100644
--- a/src/views/system/exampleCaseManage/create.vue
+++ b/src/views/system/exampleCaseManage/create.vue
@@ -1,31 +1,33 @@
 <template>
 	<el-dialog :visible="show" center :close-on-click-modal="false" title="新增文件" :before-close="doClose" destroy-on-close>
 		<el-form ref="form" :model="formData" inline :rules="rules">
-			<el-form-item label="分类" required prop="directory">
-				<el-input v-model="formData.directory"></el-input>
+			<el-form-item label="目录" required prop="directory">
+				<el-select v-model="formData.directory">
+					<el-option v-for="dir in directories" :key="dir" :label="dir" :value="dir"></el-option>
+				</el-select>
 			</el-form-item>
-			<el-form-item label="标题" required prop="title">
-				<el-input v-model="formData.title"></el-input>
+			<el-form-item label="文件名" required prop="fileName">
+				<el-input v-model="formData.fileName"></el-input>
 			</el-form-item>
 		</el-form>
-		<el-upload
-			ref="upload"
-			:auto-upload="false"
-			:action="uploadTarget"
-			:limit="1"
-			list-type="picture-card"
-			:on-change="onUploadChange"
-			:http-request="httpRequset"
-		>
-			<i slot="default" class="el-icon-upload"></i>
-			<div class="block" slot="file" slot-scope="{ file }">
-				<div class="file-type">{{ file.raw.type.split('/').pop() }}</div>
-				<div class="file-name">{{ file.name }}</div>
-				<span class="el-upload-list__item-actions">
-					<span class="el-upload-list__item-delete" @click="handleDelete(file)"> <i class="el-icon-delete"></i></span>
-				</span>
+		<div class="wrapper">
+			<label v-show="showUpload" for="file">
+				<el-card shadow="hover" class="card">
+					<i class="el-icon-upload"></i>
+				</el-card>
+			</label>
+			<input ref="file" @change="onUploadChange" style="display: none;" type="file" id="file" />
+			<div v-show="!showUpload" class="preview" @mouseenter="showDelete = true" @mouseleave="showDelete = false">
+				<el-card shadow="hover" class="card">
+					<div class="file-type">{{ fileType }}</div>
+					<div class="file-name">{{ formData.fileName }}</div>
+					<div class="delete" v-show="showDelete" @click="handleDelete">
+						<i class="el-icon-delete-solid"></i>
+					</div>
+				</el-card>
 			</div>
-		</el-upload>
+		</div>
+		<div class="path-display">文件存储路径: {{ formData.directory }}/{{ formData.fileName }}</div>
 		<footer>
 			<el-button type="primary" size="small" @click="handleUpload">上传</el-button>
 			<el-button size="small" @click="doClose">取消</el-button>
@@ -34,6 +36,7 @@
 </template>
 
 <script>
+const directories = ['logo', 'recognition', 'txt', 'image', 'pdf']
 import { getUploadUrl } from '@/api/projectConfig'
 import { checkIsExist } from '@/api/management/minio'
 export default {
@@ -42,14 +45,16 @@ export default {
 		return {
 			show: false,
 			showUpload: true,
-			uploadTarget: '',
+			showDelete: false,
+			directories,
+			fileType: '',
 			formData: {
 				directory: '',
-				title: '',
+				fileName: '',
 			},
 			rules: {
 				directory: [{ required: true, message: '请选择目录', trigger: 'blur' }],
-				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+				fileName: [{ required: true, message: '请输入标题', trigger: 'blur' }],
 			},
 		}
 	},
@@ -61,52 +66,49 @@ export default {
 			this.show = false
 			this.handleDelete()
 			this.formData.directory = ''
-			this.formData.title = ''
+			this.formData.fileName = ''
 		},
-		onUploadChange(file, fileList) {
+		onUploadChange(e) {
+			const fileList = e.target.files
+			console.log(fileList)
 			if (!fileList.length) return
 			this.showUpload = false
-			this.formData.title = file.name.split('.')[0]
+			this.formData.fileName = fileList[0].name
+			this.fileType = fileList[0].type.split('/').pop()
 		},
 		handleUpload() {
 			const form = this.$refs.form
-			const file = this.$refs.upload.uploadFiles[0]
+			const file = this.$refs.file.files[0]
 			const params = {
 				directory: this.formData.directory,
-				fileName: file.name,
+				fileName: this.formData.fileName,
 			}
 			form.validate().then(valid => {
 				if (valid && file.size > 0) {
 					checkIsExist(params)
+						.then(resp => resp.data)
+						.then(() => getUploadUrl({ ...params, method: 'PUT' }))
 						.then(resp => {
-							return resp.data
+							console.log(resp)
+							const url = resp.data
+							const xhr = new XMLHttpRequest()
+							xhr.open('PUT', url)
+							xhr.upload.onprogress = function(e) {
+								console.log(e)
+							}
+							xhr.upload.onload = function(e) {
+								console.log(e)
+							}
+							xhr.send(file)
 						})
-						.then(() => {})
-					// getUploadUrl({ ...params, method: 'PUT' }).then(resp => {
-					// 	this.uploadTarget = resp.data
-					// 	this.$nextTick(() => {
-					// 		this.$refs.upload.submit()
-					// 	})
-					// })
 				}
 			})
 		},
-		httpRequset(data) {
-			console.log(data)
-			const xhr = new XMLHttpRequest()
-			xhr.open('PUT', data.action)
-			xhr.upload.onprogress = function(e) {
-				console.log(e)
-			}
-			xhr.upload.onload = function(e) {
-				console.log(e)
-			}
-			xhr.send(data.file)
-		},
-		handleDelete(file, fileList) {
-			this.$refs.upload.clearFiles()
+		handleDelete() {
+			this.$refs.file.value = ''
 			this.showUpload = true
-			this.formData.title = ''
+			this.formData.fileName = ''
+			this.fileType = ''
 		},
 	},
 }
@@ -122,14 +124,49 @@ footer {
 	user-select: none;
 	padding: 5px;
 	color: #909399;
-	.file-type {
-		text-align: center;
-		font-size: 4rem;
-		line-height: 6rem;
-	}
-	.file-name {
-		line-height: 1.2em;
-		text-align: center;
+}
+.wrapper {
+	display: flex;
+	justify-content: center;
+	.card {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		color: #909399;
+		cursor: pointer;
+		width: 150px;
+		height: 150px;
+		.el-icon-upload {
+			font-size: 4em;
+		}
+		.file-type {
+			text-align: center;
+			font-size: 4rem;
+			line-height: 6rem;
+		}
+		.file-name {
+			line-height: 1.2em;
+			text-align: center;
+		}
+		.delete {
+			position: absolute;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			top: 0;
+			left: 0%;
+			width: 100%;
+			height: 100%;
+			background-color: #000000;
+			opacity: 0.5;
+			transition-duration: 1s;
+			transition-property: all;
+			font-size: 3em;
+		}
 	}
 }
+.path-display {
+	margin-top: 10px;
+}
 </style>