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

liudong

2024-07-25 f99c87cbd7b9aabfd4903894b05a2933afbea8b4

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

 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>
</script>

<style scoped lang="less">
.aUpload {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
</style>

 src/views/dmx/knowledgeLib/addKnow.vue

New file
@@ -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

New file
@@ -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;