charles
2024-07-29 a78f6ae9b480f1f86f1a07d551585f5f0cac07fd
src/views/dmx/knowledgeLib/add.vue
@@ -4,30 +4,41 @@
    <template #icon>
      <icon-plus />
    </template>
    新建文件
    新增文件
  </a-button>
  <a-modal v-model:visible="visible" title="上传文件" @before-open="handleOpened" @cancel="handleCancel" @before-ok="handleBeforeOk" title-align="start">
    <a-tabs :default-active-key="activeKey" @change="activeKeyChange">
      <a-tab-pane key="1" title="文件">
        <div class="aUpload">
<!--          <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm," :custom-request="customRequest" />-->
          <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt," :custom-request="customRequest" />
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" title="文件夹">
        <div class="aUpload">
          <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt,"  directory   :custom-request="customRequest" />
        </div>
      </a-tab-pane>
    </a-tabs>
    <div class="aUpload">
      <!--          <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm," :custom-request="customRequest" />-->
      <a-upload
        action="/"
        :auto-upload="false"
        ref="uploadRef"
        :file-list="uploadList"
        draggable
        :directory="directory"
        @change="onChange"
        multiple
      />
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";
import { onMounted, onBeforeMount, reactive, ref, computed } from "vue";
import axios from 'axios';
import { kbdocumentupload } from "@/api/kbList";
import { Message } from '@arco-design/web-vue';
let CancelToken = axios.CancelToken
let source = null
const visible = ref(false);
const loading = ref(false);
const directory = ref(false);
const activeKey = ref('1');
const formRef = ref(null);
const uploadList = ref([]);
@@ -37,64 +48,65 @@
  post: '',// 岗位
  txt: '',// 备注
});
const customRequest = (option) => {
  const {onProgress, onError, onSuccess, fileItem, name} = option
  const xhr = new XMLHttpRequest();
  if (xhr.upload) {
    xhr.upload.onprogress = function (event) {
      let percent;
      if (event.total > 0) {
        // 0 ~ 1
        percent = event.loaded / event.total;
      }
      onProgress(percent, event);
    };
const props =  defineProps(['kbobj'])
const emit =  defineEmits(['changeFetchData'])
const uploadRef = ref();
const files = ref([]);
console.log(props.kbobj);
const acceptNameList = computed(
  ()=>{
    return '.word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm,'
  }
  xhr.onerror = function error(e) {
    onError(e);
  };
  xhr.onload = function onload() {
    if (xhr.status < 200 || xhr.status >= 300) {
      return onError(xhr.responseText);
    }
    onSuccess(xhr.response);
  };
  const formData = new FormData();
  formData.append(name || 'file', fileItem.file);
  xhr.open('post', '//upload-z2.qbox.me/', true);
  xhr.send(formData);
  return {
    abort() {
      xhr.abort()
    }
)
// 上传文件
const submitForm = async()=>{
  if (files.value && files.value.length > 0) {
    files.value.map((item) => {
      const formData = new FormData()
      formData.append(name || 'file', item.file);
      formData.append('kb_id', props.kbobj.id);
      kbdocumentupload(formData).then((res) => {
        if(res.code == 0){
          emit('changeFetchData')
          Message.success('上传成功');
          visible.value = false;
        }
      })
    })
  }
};
}
const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)
}
const onChange = (fileList) => {
  files.value = fileList;
};
const handleClick = () => {
  visible.value = true;
};
const handleBeforeOk = (done) => {
  submitForm();
};
const handleCancel = () => {
  visible.value = false;
}
const handleOpened =(el) => {
  console.log(props.kbobj);
  uploadList.value = [];
  console.log(uploadList, 'uploadList');
  console.log(activeKey.value, 'activeKey');
}
const activeKeyChange = (value)=>{
  activeKey.value = value;
  directory.value = value == '2' ? true : false;
}
onBeforeMount(()=>{