修改按钮的text修改为link

yangyin

2024-09-06 cf5c3cde7d0dbec44d4c2f7bea87c4d5362accb0

 src/views/project/yw/dataManage/graph/AddGraph.vue

@@ -1,119 +1,169 @@
<template>
   <el-card shadow="hover" :body-style="{ paddingBottom: '0' }" class="h100 right-card w100">
      <div class="bg-[#fff] mb-[10px] flex items-center">
         <el-button style="margin-left: 8px; width: 40px" text @click="handleExitFlow">
   <div class="h100 overflow-y-auto p-[16px]">
      <div class="mb-[10px] flex items-center">
         <el-button style="margin-left: 8px; width: 40px" link @click="handleExitFlow">
            <el-icon style="font-size: 24px !important">
               <ArrowLeft />
            </el-icon>
         </el-button>
         <span class="text-[24px] text-[#26244c] font-[700]">{{ state.detailTitle }}</span>
      </div>
      <div class="p-[20px] set-form-height">
         <el-form :model="state.categoryForm" label-width="120px" label-position="left">
            <el-form-item label="导入类目:">
               <label>{{ state.categoryForm.ImportCategory }}</label>
            </el-form-item>
            <el-form-item label="类目类型:">
               <label>{{ state.categoryForm.CategoryType }}</label>
            </el-form-item>
            <el-form-item label="导入方式:">
               <el-upload
                  ref="uploadRef"
                  v-model:file-list="fileList"
                  class="upload-demo w-[530px]"
                  drag
                  :multiple="true"
                  :auto-upload="false"
                  :accept="state.allowType"
                  :limit="state.limit"
                  :before-upload="beforeAvatarUpload"
               >
                  <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>
                  </template>
               </el-upload>
            </el-form-item>
            <el-form-item label="文档识别:">
               <div class="bg-[#f6f5ff] border-[1px] border-solid border-[#0062be] py-[12px] w-[215px] px-[16px] rounded-lg cursor-pointer">
                  <el-radio-group v-model="state.categoryForm.DocumentRecognition">
                     <el-radio value="1" size="large">
                        <span class="font-[700] text[14px]">文档智能解析</span>
                     </el-radio>
                  </el-radio-group>
                  <el-tooltip :content="state.demoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
                     <div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
                        {{ state.demoDesc }}
                     </div>
                  </el-tooltip>
               </div>
            </el-form-item>
         </el-form>
      <div class="relative">
         <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"
                     ref="categoryFormRef"
                  >
                     <el-form-item label="导入类目:">
                        <label>{{ state.categoryForm.ImportCategory }}</label>
                     </el-form-item>
                     <el-form-item label="类目类型:">
                        <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"
                           :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</div>
                           </template>
                        </el-upload>
                     </el-form-item>
                     <el-form-item label="文档识别:">
                        <div
                           class="bg-[#f6f5ff] border-[1px] border-solid border-[#0062be] py-[12px] w-[215px] px-[16px] rounded-lg cursor-pointer"
                        >
                           <el-radio-group v-model="state.categoryForm.DocumentRecognition">
                              <el-radio value="1" size="large">
                                 <span class="font-[700] text[14px]">文档智能解析</span>
                              </el-radio>
                           </el-radio-group>
                           <el-tooltip :content="state.demoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
                              <div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
                                 {{ state.demoDesc }}
                              </div>
                           </el-tooltip>
                        </div>
                     </el-form-item>
                  </el-form>

         <div class="set-form-footer">
            <el-button type="primary" @click="onSubmit">确 认</el-button>
            <el-button>取消</el-button>
                  <div class="set-form-footer">
                     <el-button type="primary" @click="onSubmit">确 认</el-button>
                     <el-button @click="handleExitFlow">取消</el-button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </el-card>
   </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import type { FormInstance, UploadProps, UploadUserFile, UploadRawFile } from 'element-plus';

import type { UploadUserFile } from 'element-plus';
import { ElMessage } from 'element-plus';
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',
   },
   allowType: '.pdf,.doc,.docx,.txt,.md,.pptx,.ppt',
   // allowType: '.pdf,.doc,.docx,.txt,.md,.pptx,.ppt',
   allowType: 'md',
   limit: 5,
   size: 5,
   demoDesc: '使用阿里云文档智能解析服务据解析文档，抽取文档内容、层级结构等信息。',
   categoryFormRules: {
      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 beforeAvatarUpload = () => {
   fileList.value.forEach((item: any) => {
      console.log(item);
      const type = item.name.split('.')[1];
      if (state.allowType.indexOf(type) == -1) {
         ElMessage({
            type: 'error',
            message: `格式错误,支持格式:${state.allowType}!`,
         });
         flag.value = false;
         return;
      } else if (item.size / 1024 / 1024 > state.size) {
         ElMessage.error(`文件最大${state.size}MB!`);
         flag.value = false;
         return;
const uploadFile = (file: UploadUserFile) => {
   fileList.value.push(file);
   categoryFormRef.value.validateField(['importType']); //移除上传文件错误提示!这是重点！！
};
// 文件列表移除文件时的钩子
const handleRemove = (file) => {
   // 4、删除文件时同时删除此文件已上传的文件id（此操作视具体情况）
   fileList.value.forEach((item, index) => {
      if (item.file == file.raw) {
         fileList.value.splice(index, 1);
      }
   });
   return flag.value;
};
//确认
const onSubmit = () => {};
const onSubmit = async () => {
   let group_id = route.query.group_id;
   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);
         }
      }
   });
};
onMounted(() => {
   const group_title = route.query.title;
   state.categoryForm.ImportCategory = group_title;
});
</script>
<style scoped lang="scss">
.set-form-height {
   height: calc(100% - 62px);
   background: #fff;
   border-radius: 16px 16px 0 0;
   flex: 1;
   margin: 0 24px 64px;
   overflow-y: auto;
   padding: 20px;
}
.set-desc {
   -webkit-line-clamp: 2;