From 3fb18d4a177b10de598e50c57d7c9286e2e51997 Mon Sep 17 00:00:00 2001 From: chiayin Date: Fri, 5 Jan 2024 14:24:12 +0800 Subject: [PATCH] feat: upload Rename Input done. --- src/main.js | 2 + src/stores/files.js | 3 -- src/views/Upload/index.vue | 84 +++++++++++++++++++++++++++++--------- 3 files changed, 67 insertions(+), 22 deletions(-) diff --git a/src/main.js b/src/main.js index 8ee1120..d343aca 100644 --- a/src/main.js +++ b/src/main.js @@ -40,6 +40,7 @@ import PickList from 'primevue/picklist'; import Timeline from 'primevue/timeline'; import InputSwitch from 'primevue/inputswitch'; import InputNumber from 'primevue/inputnumber'; +import InputText from 'primevue/inputtext'; import Chart from 'primevue/chart'; import Slider from 'primevue/slider'; import Calendar from 'primevue/calendar'; @@ -92,6 +93,7 @@ app.component('PickList', PickList); app.component('Timeline', Timeline); app.component('InputSwitch', InputSwitch); app.component('InputNumber', InputNumber); +app.component('InputText', InputText); app.component('Chart', Chart); app.component('Slider', Slider); app.component('Calendar', Calendar); diff --git a/src/stores/files.js b/src/stores/files.js index 5d3ee27..fb5ff8d 100644 --- a/src/stores/files.js +++ b/src/stores/files.js @@ -4,7 +4,6 @@ import moment from 'moment'; import apiError from '@/module/apiError.js'; import Swal from 'sweetalert2'; import { uploadFailed, uploadloader, uploadSuccess } from '@/module/alertModal.js' -import { registerRuntimeCompiler } from "vue"; export default defineStore('filesStore', { state: () => ({ @@ -177,10 +176,8 @@ export default defineStore('filesStore', { try { const response = await axios.put(api, data); - console.log('response:', response); this.uploadFileName = null; } catch(error) { - console.log('error:', error); apiError(error, 'Failed to rename.'); } } diff --git a/src/views/Upload/index.vue b/src/views/Upload/index.vue index dd1d87f..398e3c8 100644 --- a/src/views/Upload/index.vue +++ b/src/views/Upload/index.vue @@ -3,7 +3,10 @@
-
{{ fileName }}stylus
+ +
+ +
info @@ -103,6 +106,7 @@ export default { 4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity. 5. Status: Activity status, such as Start or Complete. 6. Attribute: A property that can be associated with a case to provide additional information about that case.`, + // 暫時沒有 Resource // 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset. class: '!max-w-[400px] !text-[10px] !opacity-80', autoHide: false, @@ -122,7 +126,6 @@ export default { informData: [], // 紅字提示，尚未選擇的 type repeatedData: [], // 紅字提示，重複選擇的 type baseTypeData: ['Case ID*', 'Timestamp*', 'Status*', 'Activity*', 'Activity Instance ID*'], - showEdit: true, fileName: this.uploadFileName, }; }, @@ -147,18 +150,52 @@ export default { uploadFailed, uploadSuccess, uploadConfirm, - onFocusout(e){ - console.log('onFocusout:', e); - // 刪除換行 - let node = e.target.childNodes; - for(let i = node.length - 1; i >= 0; i--) { - if(node[i].nodeName === 'BR') e.target.removeChild(node[i]); + /** + * Rename 離開 input 的行為 + * @param {Event} e + */ + onBlur(e) { + const baseWidth = 20; + + if(e.target.value === '') { + e.target.value = this.uploadFileName; + const textWidth = this.getTextWidth(e.target.value, e.target); + e.target.style.width = baseWidth + textWidth + 'px'; + }else if(e.target.value !== e.target.value.trim()) { + e.target.value = e.target.value.trim(); + const textWidth = this.getTextWidth(e.target.value, e.target); + e.target.style.width = baseWidth + textWidth + 'px'; } - this.showEdit = true; }, - onPaste(e) { - e.preventDefault(); - this.fileName = e.clipboardData.getData('text/plain').replace(//gi, '').replace(/\n/g, ''); + /** + * Rename 輸入 input 的行為 + * @param {Event} e + */ + onInput(e) { + const baseWidth = 20; + const textWidth = this.getTextWidth(e.target.value, e.target); + + e.target.style.width = baseWidth + textWidth + 'px'; + }, + /** + * input 寬度隨著 value 響應式改變 + * @param {String} text + * @param {Event} e + */ + getTextWidth(text, e) { + // 替換空格為不斷行的空格 + const processedText = text.replace(/ /g, '\u00a0'); + const hiddenSpan = document.createElement('span'); + let width; + + hiddenSpan.innerHTML = processedText; + hiddenSpan.style.font = window.getComputedStyle(e).font; + hiddenSpan.style.visibility = 'hidden'; + document.body.appendChild(hiddenSpan); + width = hiddenSpan.getBoundingClientRect().width; + document.body.removeChild(hiddenSpan); + + return width; }, /** * 驗證，根據新的 selectedColumns 更新 isInform、informData 和 repeatedData @@ -225,10 +262,9 @@ export default { } }); - // 取得欲更改的檔名 - this.uploadFileName = document.querySelector('#uploadFileName').firstChild.textContent; - // console.log(this.uploadFileName); - // this.FilesStore.rename(); + // 取得欲更改的檔名， + this.uploadFileName = this.fileName; + // this.filesStore.rename(); // 設定第二階段上傳的 data haveValueData.forEach(column => { switch (column.code) { @@ -254,16 +290,26 @@ export default { break; } }); - // this.uploadConfirm(fetchData); + this.uploadConfirm(fetchData); }, }, mounted() { // 要有 uploadID 才能進來 + // 只監聽第一次 + let unwatch = this.$watch('fileName', (newValue) => { + if (newValue) { + const inputElement = document.getElementById('fileNameInput'); + const baseWidth = 20; + const textWidth = this.getTextWidth(this.fileName, inputElement); + inputElement.style.width = baseWidth + textWidth + 'px'; + } + }, + { immediate: true } + ); this.isInform = true; // 初始為藍字提示 this.showEdit = true; - this.fileName = 'abc' - this.uploadFileName = 'kmu_log_without_attribute'; this.filesStore.getUploadDetail(); + unwatch(); this.isLoading = false; }, beforeUnmount() {