新版UI对话页面开发

liudong

2024-08-16 e4dbf13e917784f0e690709e2dd405e7475a86a1

 src/views/dmx/knowledgeLib/add.vue

@@ -1,4 +1,3 @@

<template>
  <a-button type="primary" @click="handleClick">
    <template #icon>
@@ -6,187 +5,128 @@
    </template>
    新增文件
  </a-button>
  <a-modal v-model:visible="visible" title="上传文件" @before-open="handleOpened" @cancel="handleCancel" @before-ok="handleBeforeOk" title-align="start">
  <a-modal
    v-model:visible="visible"
    title="上传文件"
    @open="handleOpened"
    @cancel="handleCancel"
    :ok-loading="loading"
    @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="acceptNameList" :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-tab-pane key="1" title="文件"> </a-tab-pane>
      <a-tab-pane key="2" title="文件夹"> </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, computed } from "vue";
import axios from 'axios';
let CancelToken = axios.CancelToken
let source = null
const visible = ref(false);
const loading = ref(false);
const activeKey = ref('1');
const formRef = ref(null);
const uploadList = ref([]);
const form = reactive({
  name: '',// 用户名
  nameJoin: '',// 昵称
  post: '',// 岗位
  txt: '',// 备注
});
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,'
  }
)
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);
    };
  }
  xhr.onerror = function error(e) {
    onError(e);
  };
  xhr.onload = function onload() {
    if (xhr.status < 200 || xhr.status >= 300) {
      return onError(xhr.responseText);
  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([]);
  const form = reactive({
    name: '', // 用户名
    nameJoin: '', // 昵称
    post: '', // 岗位
    txt: '', // 备注
  });
  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,';
  });
  // 上传文件
  const submitForm = async (done) => {
    if (files.value && files.value.length > 0) {
      files.value.map((item) => {
        const formData = new FormData();
        formData.append('file', item.file);
        formData.append('kb_id', props.kbobj.id);
        kbdocumentupload(formData).then((res) => {
          if (res.code == 0) {
            emit('changeFetchData');
            Message.success('上传成功');
            handleCancel();
          }
        });
      });
      done(false);
    } else {
      done(false);
    }
    onSuccess(xhr.response);
  };

  const formData = new FormData();
  formData.append(name || 'file', fileItem.file);
  xhr.open('post', '/v1/user/login', true);
  xhr.send(formData);
  const handleSubmit = ({ values, errors }) => {};

  return {
    abort() {
      xhr.abort()
    }
  }
};
// 上传文件
// async submitForm = ()=>{
//   if (this.fileList && this.fileList.length > 0) {
//     source = CancelToken.source()
//     this.fileUploadLoad = true
//     const formdata = new FormData()
//     let param = {
//       userName: this.userInfo.userName,
//       userId: this.userInfo.userID,
//       cfeId: this.currow.conferences[0].id,
//     }
//     this.fileList.map((item) => {
//       formdata.append('file', item.raw)
//     })
//     uploadCfeFile(
//       { param, formdata },
//       (progressEvent) => {
//         let total = progressEvent.total
//         let loaded = progressEvent.loaded
//         this.uploadPercent = parseInt(((loaded / total) * 100).toFixed(0))
//       },
//       source
//     )
//       .then((res) => {
//         if (res.data.code === '0') {
//           //上传成功
//           this.$successMessage(
//             this.translateTitle(
//               'json_fileupload.json_file_tip.json_file_tip08'
//             )
//           )
//           this.fileList = []
//           this.$refs.upload.clearFiles()
//           this.queryList()
//         } else {
//           this.$errorMessage(res.data.message)
//         }
//         this.fileUploadLoad = false
//         this.uploadPercent = 0
//       })
//       .catch((error) => {
//         this.fileUploadLoad = false
//         this.uploadPercent = 0
//         if (axios.isCancel(error)) {
//           //已终止上传
//           this.$errorMessage(
//             this.translateTitle(
//               'json_fileupload.json_file_tip.json_file_tip09'
//             )
//           )
//         } else {
//           this.$errorMessage('文件大小超过限制，上传失败')
//         }
//       })
//   } else {
//     //请选择要上传的文件
//     this.$warningMessage(
//       this.translateTitle('json_fileupload.json_file_tip.json_file_tip10')
//     )
//   }
// }
  const onChange = (fileList) => {
    files.value = fileList;
  };

  const handleClick = () => {
    visible.value = true;
  };
  const handleBeforeOk = (done) => {
    submitForm(done);
  };
  const handleCancel = () => {
    visible.value = false;
  };


const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)
}

const handleClick = () => {
  visible.value = true;
};
const handleBeforeOk = (done) => {

};
const handleCancel = () => {
  visible.value = false;
}

const handleOpened =(el) => {
  uploadList.value = [];
  console.log(uploadList, 'uploadList');
  console.log(activeKey.value, 'activeKey');
}
const activeKeyChange = (value)=>{
  activeKey.value = value;
}
onBeforeMount(()=>{

})
onMounted(()=>{


})
  const handleOpened = (el) => {
    // console.log(props.kbobj);
    uploadList.value = [];
    files.value = [];
    loading.value = false;
  };
  const activeKeyChange = (value) => {
    activeKey.value = value;
    directory.value = value == '2' ? true : false;
  };
  onBeforeMount(() => {});
  onMounted(() => {});
</script>

<script lang="ts">
export default {
  name: 'add',
  methods: {

  }
};
  export default {
    name: 'add',
    methods: {},
  };
</script>

<style scoped lang="less">
.aUpload {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
  .aUpload {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
    :deep(.arco-upload-progress) {
      display: none;
    }
  }
</style>