知识库操作功能开发详情提示词

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

src/views/dmx/knowledgeLib/addDetails.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/index.vue

@@ -146,8 +146,11 @@
                   @page-change="onPageChange"
                   :scroll="{ y: 580 }"
                 >
-                  <template #contentType="{ record }">
-
+                  <template #name="{ record }">
+                    <icon-file style="color: #0960bd;margin-right: 4px;" />
+                    <span style="color: #0960bd;cursor: pointer" @click="fileClick">
+                      {{record.name}}
+                    </span>
                   </template>
                   <template #staue="{ record }">
                     <a-switch :model-value="record.staue"/>
@@ -224,6 +227,42 @@
             </div>
           </a-tab-pane>
         </a-tabs>
+        <div v-if="detailsShow" class="details">
+          <div class="details-header">
+            <div style="display: flex;align-items: center">
+              <span><icon-arrow-left size="20px" style="cursor: pointer;color: #0960bd;margin: 10px" @click="goBackClick" /></span>
+              <icon-file style="color: #0960bd;margin-right: 4px;" />
+              <span style="">123.docx</span>
+            </div>
+            <div style="display: flex; align-items: center;">
+              <a-radio-group v-model="position" type="button" style="margin-right: 10px">
+                <a-radio value="top">全文</a-radio>
+                <a-radio value="right">省略</a-radio>
+              </a-radio-group>
+              <a-popover position="bottom">
+                <a-button type="outline" class="button" style="margin-right: 10px">批量 <icon-down style="margin-left: 4px" /></a-button>
+                <template #content>
+                  <p>Here is the text content</p>
+                  <p>Here is the text content</p>
+                </template>
+              </a-popover>
+              <a-button type="outline" class="button" style="margin-right: 10px">
+                <template #icon>
+                  <icon-search />
+                </template>
+              </a-button>
+              <a-popover position="bottom">
+                <a-button type="outline" class="button" style="margin-right: 10px"><icon-sort /></a-button>
+                <template #content>
+                  <p>Here is the text content</p>
+                  <p>Here is the text content</p>
+                </template>
+              </a-popover>
+              <addDetails></addDetails>
+            </div>
+          </div>
+          <a-divider style="margin-top: 10px" />
+        </div>
       </div>
     </div>
   </div>
@@ -245,6 +284,7 @@
   import config from '@/views/dmx/knowledgeLib/config.vue'
   import test from '@/views/dmx/knowledgeLib/test.vue'
   import tool from '@/views/dmx/knowledgeLib/tool.vue'
+  import addDetails from '@/views/dmx/knowledgeLib/addDetails.vue'
   import { deleteAccount } from "@/api/account";
   type SizeProps = 'mini' | 'small' | 'medium' | 'large';
   type Column = TableColumnData & { checked?: true };
@@ -268,6 +308,7 @@
 
   const size = ref<SizeProps>('medium');
   let visible = ref(false)
+  let detailsShow = ref(false)
   let selectedTab = ref(0)
   let tabs = reactive(['法律知识库', '政务知识库', '医学知识库', '其他知识库'])
 
@@ -304,11 +345,11 @@
     {
       title: t('名称'),
       dataIndex: 'name',
+      slotName: 'name',
     },
     {
       title: t('分快数'),
       dataIndex: 'contentType',
-      slotName: 'contentType',
     },
     {
       title: t('上传时间'),
@@ -465,6 +506,16 @@
     }
   };
 
+  const fileClick = ()=>{
+    detailsShow.value = true
+
+  }
+
+  const goBackClick = ()=>{
+    detailsShow.value = false
+
+  }
+
   const   deleteItem =  async (row)=>{
     console.log(row);
     // let data = await deleteAccount({id: row.number})
@@ -549,6 +600,7 @@
         }
       }
       .rt-container{
+        position: relative;
         //background: #626aea;
         margin-left: 20px;
         width: calc(100% - 200px);
@@ -556,6 +608,20 @@
         .rt-container-main{
           height: 76vh;
         }
+        .details{
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: #ffffff;
+          .details-header{
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+            padding-right: 20px;
+          }
+        }
       }
     }
   }