From f99c87cbd7b9aabfd4903894b05a2933afbea8b4 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期四, 25 七月 2024 15:25:40 +0800
Subject: [PATCH] 知识库图片上传功能以及添加知识库功能修改
---
src/views/dmx/knowledgeLib/addKnow.vue | 94 +++++++++++
src/views/dmx/knowledgeLib/edit.vue | 159 +++++++++++++++++++
src/views/dmx/knowledgeLib/index.vue | 13 -
src/views/dmx/knowledgeLib/add.vue | 204 ++++++++----------------
4 files changed, 328 insertions(+), 142 deletions(-)
diff --git a/src/views/dmx/knowledgeLib/add.vue b/src/views/dmx/knowledgeLib/add.vue
index 2136f06..4fa459a 100644
--- a/src/views/dmx/knowledgeLib/add.vue
+++ b/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 @@
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 @@
</script>
<script lang="ts">
-import { deleteAccount } from "@/api/account";
export default {
name: 'add',
methods: {
}
};
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="less">
+.aUpload {
+ width: 100%;
+ max-height: 500px;
+ overflow: hidden;
+ overflow-y: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dmx/knowledgeLib/addKnow.vue b/src/views/dmx/knowledgeLib/addKnow.vue
new file mode 100644
index 0000000..07db2d2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/dmx/knowledgeLib/edit.vue b/src/views/dmx/knowledgeLib/edit.vue
new file mode 100644
index 0000000..56fe9f9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/dmx/knowledgeLib/index.vue b/src/views/dmx/knowledgeLib/index.vue
index 34a2728..de20746 100644
--- a/src/views/dmx/knowledgeLib/index.vue
+++ b/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;
--
Gitblit v1.8.0