知识库图片上传功能以及添加知识库功能修改

src/views/dmx/knowledgeLib/add.vue

@@ -1,135 +1,78 @@
 
 <template>
-  <a-button :type="edit=='edit' ? 'text' : 'primary'" @click="handleClick">
-    <template #icon v-if="edit=='add'">
+  <a-button type="primary" @click="handleClick">
+    <template #icon>
       <icon-plus />
     </template>
-    {{edit=='edit' ? '编辑' : '新建账号'}}
+    新建文件
   </a-button>
-  <a-modal v-model:visible="visible" :title="edit=='edit' ? '编辑' : '新建账号'" @before-open="handleOpened" @cancel="handleCancel" @before-ok="handleBeforeOk">
-    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" >
-      <a-form-item field="name" label="用户名">
-        <a-input v-model="form.name" />
-      </a-form-item>
-      <a-form-item field="nameJoin" label="昵称">
-        <a-input v-model="form.nameJoin" />
-      </a-form-item>
-<!--      <a-form-item field="post" label="Post">-->
-<!--        <a-select v-model="form.post">-->
-<!--          <a-option value="post1">Post1</a-option>-->
-<!--          <a-option value="post2">Post2</a-option>-->
-<!--          <a-option value="post3">Post3</a-option>-->
-<!--          <a-option value="post4">Post4</a-option>-->
-<!--        </a-select>-->
-<!--      </a-form-item>-->
-      <a-form-item label="备注">
-        <a-textarea  v-model="form.txt" placeholder="请输入" allow-clear/>
-      </a-form-item>
-<!--      <a-form-item>-->
-<!--        <div style="width: 100%;text-align: right">-->
-<!--          <a-button @click="visible = false">取消</a-button>-->
-<!--          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>-->
-<!--        </div>-->
-<!--      </a-form-item>-->
-    </a-form>
+  <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>
   </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { onMounted ,onBeforeMount, reactive, ref } from "vue";
 
-const props = defineProps({
-  edit: {
-    type: String,
-    default: 'add'
-  },
-  record: {
-    type: Object,
-    default: () => {
-      return {}
-    }
-  }
-})
 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 formRef = ref(null);
 
-const rules = {
-  name: [
-    {
-      required: true,
-      message:'用户名不允许为空',
-    },
-  ],
-  nameJoin: [
-    {
-      required: true,
-      message:'昵称不允许为空',
-    },
-  ],
-  password: [
-    {
-      required: true,
-      message:'password is required',
-    },
-  ],
-  password2: [
-    {
-      required: true,
-      message:'password is required',
-    },
-    {
-      validator: (value, cb) => {
-        if (value !== form.password) {
-          cb('two passwords do not match')
-        } else {
-          cb()
-        }
-      }
-    }
-  ],
-  email: [
-    {
-      type: 'email',
-      required: true,
-    }
-  ],
-  ip: [
-    {
-      type: 'ip',
-      required: true,
-    }
-  ],
-  url: [
-    {
-      type: 'url',
-      required: true,
-    }
-  ],
-  match: [
-    {
-      required: true,
-      validator: (value, cb) => {
-        return new Promise((resolve) => {
-          if (!value) {
-            cb('Please enter match')
-          }
-          if (value !== 'match') {
-            cb('match must be match!')
-          }
-          resolve()
-        })
+
+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);
     }
-  ],
-}
+    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 handleSubmit = ({values, errors}) => {
   console.log('values:', values, '\nerrors:', errors)
@@ -139,35 +82,20 @@ const handleClick = () => {
   visible.value = true;
 };
 const handleBeforeOk = (done) => {
-    formRef.value.validate().then(res => {
-      console.log('form:', form)
-      if (!form.name) {
-        done(false)
-      }else {
-        console.log('请求数据');
 
-      }
-    })
 };
 const handleCancel = () => {
   visible.value = false;
 }
 
 const handleOpened =(el) => {
-  Object.assign(form,{
-    name: '',// 用户名
-    nameJoin: '',// 昵称
-    post: '',// 岗位
-    txt: '',// 备注
-  });
-  formRef.value.resetFields();
-  console.log(props.edit, 'edit');
-  console.log(props.record, 'record');
-  if(props.edit == 'edit'){
-    Object.assign(form,props.record);
-  }
+  uploadList.value = [];
+  console.log(uploadList, 'uploadList');
+  console.log(activeKey.value, 'activeKey');
+}
+const activeKeyChange = (value)=>{
+  activeKey.value = value;
 }
-
 onBeforeMount(()=>{
 
 })
@@ -178,11 +106,19 @@ onMounted(()=>{
 </script>
 
 <script lang="ts">
-import { deleteAccount } from "@/api/account";
 export default {
   name: 'add',
   methods: {
 
   }
 };
-</script>
+</script>
+
+<style scoped lang="less">
+.aUpload {
+  width: 100%;
+  max-height: 500px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+</style>

src/views/dmx/knowledgeLib/addKnow.vue

@@ -0,0 +1,94 @@
+
+<template>
+  <a-button type="primary" @click="handleClick" style="margin-left: 10px">
+    <template #icon>
+      <icon-plus />
+    </template>
+  </a-button>
+  <a-modal v-model:visible="visible" title="创建知识库" @before-open="handleOpened" @cancel="handleCancel" :footer="false" title-align="start">
+    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" >
+      <a-form-item field="name" label="名称">
+        <a-input v-model="form.name" placeholder="请输入名称"/>
+      </a-form-item>
+      <a-form-item>
+        <div style="width: 100%;text-align: right">
+          <a-button @click="visible = false">取消</a-button>
+          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { onMounted ,onBeforeMount, reactive, ref } from "vue";
+
+const visible = ref(false);
+const loading = ref(false);
+const form = reactive({
+  name: '',// 用户名
+  nameJoin: '',// 昵称
+  post: '',// 岗位
+  txt: '',// 备注
+});
+const formRef = ref(null);
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message:'名称不允许为空',
+    },
+  ],
+}
+
+
+const handleSubmit = ({values, errors}) => {
+  console.log('values:', values, '\nerrors:', errors)
+}
+
+const handleClick = () => {
+  visible.value = true;
+};
+const handleBeforeOk = (done) => {
+    formRef.value.validate().then(res => {
+      console.log('form:', form)
+      if (!form.name) {
+        done(false)
+      }else {
+        console.log('请求数据');
+
+      }
+    })
+};
+const handleCancel = () => {
+  visible.value = false;
+}
+
+const handleOpened =(el) => {
+  Object.assign(form,{
+    name: '',// 用户名
+    nameJoin: '',// 昵称
+    post: '',// 岗位
+    txt: '',// 备注
+  });
+  formRef.value.resetFields();
+}
+
+onBeforeMount(()=>{
+
+})
+onMounted(()=>{
+
+
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'add',
+  methods: {
+
+  }
+};
+</script>

src/views/dmx/knowledgeLib/edit.vue

@@ -0,0 +1,159 @@
+
+<template>
+  <a-button type="primary" @click="handleClick">
+    <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-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" >
+      <a-form-item field="name" label="用户名">
+
+      </a-form-item>
+      <a-form-item label="备注">
+        <a-textarea  v-model="form.txt" placeholder="请输入" allow-clear/>
+      </a-form-item>
+<!--      <a-form-item>-->
+<!--        <div style="width: 100%;text-align: right">-->
+<!--          <a-button @click="visible = false">取消</a-button>-->
+<!--          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>-->
+<!--        </div>-->
+<!--      </a-form-item>-->
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { onMounted ,onBeforeMount, reactive, ref } from "vue";
+
+const visible = ref(false);
+const loading = ref(false);
+const form = reactive({
+  name: '',// 用户名
+  nameJoin: '',// 昵称
+  post: '',// 岗位
+  txt: '',// 备注
+});
+const formRef = ref(null);
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message:'用户名不允许为空',
+    },
+  ],
+  nameJoin: [
+    {
+      required: true,
+      message:'昵称不允许为空',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message:'password is required',
+    },
+  ],
+  password2: [
+    {
+      required: true,
+      message:'password is required',
+    },
+    {
+      validator: (value, cb) => {
+        if (value !== form.password) {
+          cb('two passwords do not match')
+        } else {
+          cb()
+        }
+      }
+    }
+  ],
+  email: [
+    {
+      type: 'email',
+      required: true,
+    }
+  ],
+  ip: [
+    {
+      type: 'ip',
+      required: true,
+    }
+  ],
+  url: [
+    {
+      type: 'url',
+      required: true,
+    }
+  ],
+  match: [
+    {
+      required: true,
+      validator: (value, cb) => {
+        return new Promise((resolve) => {
+          if (!value) {
+            cb('Please enter match')
+          }
+          if (value !== 'match') {
+            cb('match must be match!')
+          }
+          resolve()
+        })
+      }
+    }
+  ],
+}
+
+
+const handleSubmit = ({values, errors}) => {
+  console.log('values:', values, '\nerrors:', errors)
+}
+
+const handleClick = () => {
+  visible.value = true;
+};
+const handleBeforeOk = (done) => {
+    formRef.value.validate().then(res => {
+      console.log('form:', form)
+      if (!form.name) {
+        done(false)
+      }else {
+        console.log('请求数据');
+
+      }
+    })
+};
+const handleCancel = () => {
+  visible.value = false;
+}
+
+const handleOpened =(el) => {
+  Object.assign(form,{
+    name: '',// 用户名
+    nameJoin: '',// 昵称
+    post: '',// 岗位
+    txt: '',// 备注
+  });
+  formRef.value.resetFields();
+}
+
+onBeforeMount(()=>{
+
+})
+onMounted(()=>{
+
+
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'add',
+  methods: {
+
+  }
+};
+</script>

src/views/dmx/knowledgeLib/index.vue

@@ -8,11 +8,7 @@
             :placeholder="$t('cardList.searchInput.placeholder')"
             style="width: 130px;"
           />
-          <a-button type="primary" @click="add" style="margin-left: 10px">
-            <template #icon>
-              <icon-plus />
-            </template>
-          </a-button>
+          <addKnow></addKnow>
         </div>
         <div class="lf-container-down">
           <div class="tabs">
@@ -48,7 +44,7 @@
                             style="width: 200px;margin-right: 10px"
                           />
                           <!--            新建-->
-                          <add edit="add" />
+                          <add />
                         </a-col>
                         <!--              <a-col :span="8">-->
                         <!--                <a-form-item field="name" :label="$t('searchTable.form.name')">-->
@@ -260,7 +256,7 @@
                     {{ $t(`searchTable.form.status.${record.status}`) }}
                   </template>
                   <template #operations="{ record }">
-                    <add edit="edit" :record = 'record' />
+
                     <a-popconfirm content="确定删除吗？" type="warning" @ok="deleteItem(record)">
                       <a-button v-permission="['admin']" type="text" size="small">
                         {{ $t('删除') }}
@@ -298,6 +294,7 @@
   import cloneDeep from 'lodash/cloneDeep';
   import Sortable from 'sortablejs';
   import add from '@/views/dmx/knowledgeLib/add.vue'
+  import addKnow from '@/views/dmx/knowledgeLib/addKnow.vue'
   import config from '@/views/dmx/knowledgeLib/config.vue'
   import test from '@/views/dmx/knowledgeLib/test.vue'
   import { deleteAccount } from "@/api/account";
@@ -325,7 +322,7 @@
   const size = ref<SizeProps>('medium');
   let visible = ref(false)
   let selectedTab = ref(0)
-  let tabs = reactive(['Tab 1', 'Tab 2', 'Tab 3'])
+  let tabs = reactive(['法律知识库', '政务知识库', '医学知识库', '其他知识库'])
 
   const  selectTab = (index) => {
     selectedTab.value= index;