From cf5c3cde7d0dbec44d4c2f7bea87c4d5362accb0 Mon Sep 17 00:00:00 2001 From: yangyin <1850366751@qq.com> Date: 星期五, 06 九月 2024 09:56:19 +0800 Subject: [PATCH] 修改按钮的text修改为link --- src/views/project/yw/dataManage/graph/AddGraph.vue | 94 +++++++++++++++++++++++++++++++--------------- 1 files changed, 63 insertions(+), 31 deletions(-) diff --git a/src/views/project/yw/dataManage/graph/AddGraph.vue b/src/views/project/yw/dataManage/graph/AddGraph.vue index e60d30e..e98b819 100644 --- a/src/views/project/yw/dataManage/graph/AddGraph.vue +++ b/src/views/project/yw/dataManage/graph/AddGraph.vue @@ -1,7 +1,7 @@ <template> <div class="h100 overflow-y-auto p-[16px]"> <div class="mb-[10px] flex items-center"> - <el-button style="margin-left: 8px; width: 40px" text @click="handleExitFlow"> + <el-button style="margin-left: 8px; width: 40px" link @click="handleExitFlow"> <el-icon style="font-size: 24px !important"> <ArrowLeft /> </el-icon> @@ -12,7 +12,13 @@ <div class="relative transition-[opacity 0.3s]"> <div class="set-form-height"> <div class="flex flex-col"> - <el-form :model="state.categoryForm" label-width="120px" label-position="left" :rules="state.categoryFormRules"> + <el-form + :model="state.categoryForm" + label-width="120px" + label-position="left" + :rules="state.categoryFormRules" + ref="categoryFormRef" + > <el-form-item label="瀵煎叆绫荤洰:"> <label>{{ state.categoryForm.ImportCategory }}</label> </el-form-item> @@ -20,15 +26,20 @@ <label>{{ state.categoryForm.CategoryType }}</label> </el-form-item> <el-form-item label="瀵煎叆鏂瑰紡:" prop="importType"> - <el-upload ref="uploadRef" class="upload-demo w-[530px]" :http-request="uploadFile" drag :accept="state.allowType"> + <el-upload + ref="uploadRef" + class="upload-demo w-[530px]" + :http-request="uploadFile" + drag + :accept="state.allowType" + :on-remove="handleRemove" + > <el-icon class="el-icon--upload"><upload-filled /></el-icon> <div class="el-upload__text"> <em>鐐瑰嚮鎴栨嫋鎷戒笂浼犳枃浠�</em> </div> <template #tip> - <div class="el-upload__tip"> - 鏀寔鏍煎紡锛歿{ state.allowType }};闄愬埗澶у皬{{ state.size }}M,鏈�澶氫笂浼爗{ state.limit }}涓枃浠� - </div> + <div class="el-upload__tip">鏀寔鏍煎紡锛歿{ state.allowType }};闄愬埗澶у皬{{ state.size }}M</div> </template> </el-upload> </el-form-item> @@ -52,7 +63,7 @@ <div class="set-form-footer"> <el-button type="primary" @click="onSubmit">纭� 璁�</el-button> - <el-button>鍙栨秷</el-button> + <el-button @click="handleExitFlow">鍙栨秷</el-button> </div> </div> </div> @@ -64,15 +75,21 @@ <script setup lang="ts"> import type { UploadUserFile } from 'element-plus'; import { ElMessage } from 'element-plus'; -import { reactive, ref } from 'vue'; +import { onMounted, reactive, ref } from 'vue'; import { useRoute, useRouter } from 'vue-router'; import { add_knowledge_file } from '/@/api/knowledge/group'; - +const uploadFileChange = (rule, value, callback) => { + if (fileList.value.length === 0) { + return callback('璇烽�夋嫨闇�瑕佷笂浼犵殑鏂囦欢'); + } else { + return true; + } +}; // 瀹氫箟鍙橀噺鍐呭 const state = reactive({ detailTitle: '瀵煎叆鏁版嵁', categoryForm: { - ImportCategory: '榛樿绫荤洰', + ImportCategory: '', CategoryType: '鏈湴绫荤洰', DocumentRecognition: '1', }, @@ -82,46 +99,61 @@ size: 5, demoDesc: '浣跨敤闃块噷浜戞枃妗f櫤鑳借В鏋愭湇鍔℃嵁瑙f瀽鏂囨。锛屾娊鍙栨枃妗e唴瀹广�佸眰绾х粨鏋勭瓑淇℃伅銆�', categoryFormRules: { - importType: [ - { - required: true, - message: '璇烽�夋嫨鏂囦欢', - trigger: 'change', - }, - ], + importType: [{ required: true, validator: uploadFileChange, trigger: 'change' }], }, }); const fileList = ref<UploadUserFile[]>([]); +const categoryFormRef = ref(null); const router = useRouter(); const route = useRoute(); //杩斿洖 const handleExitFlow = () => { //鏄惁鏄剧ず杩斿洖 router.back(); + categoryFormRef.value.resetFields(); + fileList.value = []; }; const flag = ref(true); const uploadFile = (file: UploadUserFile) => { fileList.value.push(file); + categoryFormRef.value.validateField(['importType']); //绉婚櫎涓婁紶鏂囦欢閿欒鎻愮ず!杩欐槸閲嶇偣锛侊紒 }; - +// 鏂囦欢鍒楄〃绉婚櫎鏂囦欢鏃剁殑閽╁瓙 +const handleRemove = (file) => { + // 4銆佸垹闄ゆ枃浠舵椂鍚屾椂鍒犻櫎姝ゆ枃浠跺凡涓婁紶鐨勬枃浠秈d锛堟鎿嶄綔瑙嗗叿浣撴儏鍐碉級 + fileList.value.forEach((item, index) => { + if (item.file == file.raw) { + fileList.value.splice(index, 1); + } + }); +}; //纭 const onSubmit = async () => { let group_id = route.query.group_id; - const data = new FormData(); - fileList.value.forEach((item: any) => { - data.append('file', item.file); + if (group_id == null || group_id == '' || group_id == undefined) return; + categoryFormRef.value.validate(async (valid: boolean) => { + if (valid) { + const data = new FormData(); + fileList.value.forEach((item: any) => { + data.append('file', item.file); + }); + data.append('group_id', group_id); + const res = await add_knowledge_file(data); + if (res.json_ok) { + ElMessage.success('瀵煎叆鎴愬姛'); + router.push({ + name: 'GraphIndex', + }); + } else { + ElMessage.error(res.json_msg); + } + } }); - data.append('group_id', group_id); - const res = await add_knowledge_file(data); - if (res.json_ok) { - ElMessage.success('瀵煎叆鎴愬姛'); - router.push({ - name: 'GraphIndex', - }); - } else { - ElMessage.error(res.json_msg); - } }; +onMounted(() => { + const group_title = route.query.title; + state.categoryForm.ImportCategory = group_title; +}); </script> <style scoped lang="scss"> .set-form-height { -- Gitblit v1.9.3