列表

src/components/czr-ui/CzrContent.vue

@@ -235,34 +235,14 @@ onMounted(() => {
           height: 36px;
           display: flex;
           align-items: center;
-          :deep(.el-dropdown) {
-            .tools {
-              width: 36px;
-              height: 36px;
-              box-sizing: border-box;
-              border-radius: 4px;
-              border: 1px solid #E4E4E4;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-            .el-dropdown-menu {
-              padding: 8px 4px;
-            }
-            .el-dropdown-menu__item {
-              padding: 0;
-              .tools-item {
-                padding: 0 8px;
-                display: flex;
-                align-items: center;
-                width: 170px;
-                height: 40px;
-                box-sizing: border-box;
-                .svg-icon {
-                  margin-right: 8px;
-                }
-              }
-            }
+          .tools {
+            width: 3rem;
+            height: 2.25rem;
+            border-radius: 0.25rem;
+            border: 0.06rem solid #C0C4CC;
+            display: flex;
+            align-items: center;
+            justify-content: center;
           }
         }
       }

src/components/czr-ui/CzrFormColumn.vue

@@ -437,7 +437,7 @@ defineExpose({
         }
       }
       .el-input__wrapper, .el-textarea__inner {
-        border-radius: 2px;
+        border-radius: 0.25rem;
       }
     }
   }

src/components/czr-ui/CzrTable.vue

@@ -432,8 +432,8 @@ onMounted(() => {
           &:after {
           }
         }
-        $borderColor: #FFFFFF;
-        $borderWidth: 2px;
+        $borderColor: #EAEBEF;
+        $borderWidth: 0.03rem;
         //  表格左边框
         &::before, .el-table__border-left-patch {
           display: none;
@@ -459,13 +459,11 @@ onMounted(() => {
                 border-right: none;
                 border-bottom: none;
                 background-color: #F5F5F5;
-                height: 52px;
+                height: 3.25rem;
                 .cell {
-                  font-size: 14px;
-                  font-family: 微软雅黑;
-                  font-weight: 400;
-                  color: #666666;
-                  padding: 0 4px;
+                  font-weight: bold;
+                  font-size: 0.88rem;
+                  color: #303133;
                   &.highlight {
                     color: #409eff;
                   }
@@ -494,18 +492,22 @@ onMounted(() => {
               .el-table__row {
                 -webkit-user-drag: element;
                 >td {
+                  border-left: $borderWidth solid $borderColor;
+                  border-top: $borderWidth solid $borderColor;
                   border-right: none;
-                  border-bottom-color: #F4F4F4;
+                  border-bottom:none;
+                  min-height: 2.75rem;
                   .cell {
-                    font-size: 14px;
-                    font-family: 微软雅黑;
                     font-weight: 400;
-                    color: #666666;
-                    padding: 0 6px;
+                    font-size: 0.88rem;
+                    color: #606266;
                     .el-link +.el-link {
                       margin-left: 10px;
                     }
                   }
+                  &:last-child {
+                    border-right: $borderWidth solid $borderColor;
+                  }
                   &:not(.no-popover) {
                     white-space: nowrap;
                     overflow: hidden;
@@ -513,6 +515,11 @@ onMounted(() => {
                     word-break: break-all;
                   }
                 }
+                &:last-child {
+                  >td {
+                    border-bottom: $borderWidth solid $borderColor;
+                  }
+                }
               }
             }
           }

src/style/czr.scss

@@ -309,14 +309,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 1rem;
   >*:not(:last-child) {
     &:after {
       content: '';
       width: 1px;
-      height: 12px;
-      background-color: #E6E8EA;
-      margin-left: 16px;
+      height: 0.75rem;
+      background-color: #EAEBEF;
+      margin-left: 1rem;
     }
   }
 }

src/views/manage/knowledge/documents/document/index.vue

@@ -3,56 +3,87 @@
     <div class="flex items-center">
       <div class="bm-main-box-title">文档</div>
     </div>
-    <div class="flex items-center mt-[1rem]">
-      <div class="flex gap-[var(--czr-gap)]">
-        <CzrButton type="add" title="添加文件"/>
-        <CzrButton title="迁移" icon="move"/>
-        <CzrButton title="归档" icon="cloud"/>
-        <CzrButton title="删除" icon="czr_del"/>
-      </div>
-      <div class="ml-auto flex items-center gap-[var(--czr-gap)]">
-        <div class="__hover text-[0.88rem] text-[#576275] flex items-center gap-[0.3rem]" @click="state.query.form.isCreate = !state.query.form.isCreate">
-          <SvgIcon name="czr_add1" size="14" :active="state.query.form.isCreate"/>我的创建
+    <CzrContent
+      v-model:tableHead="state.query.tableHead"
+      @handleReset="onReset"
+      @handleSearch="onSearch"
+      v-model:full="state.query.isFull"
+    >
+      <template #tableTitle>
+        <div class="flex gap-[var(--czr-gap)]">
+          <CzrButton type="add" title="添加文件"/>
+          <CzrButton title="迁移" icon="move"/>
+          <CzrButton title="归档" icon="cloud"/>
+          <CzrButton title="删除" icon="czr_del"/>
         </div>
-        <div class="__hover text-[0.88rem] text-[#576275] flex items-center gap-[0.3rem]" @click="state.query.form.isStar = !state.query.form.isStar">
-          <SvgIcon name="star" size="15" class="mb-[2px]" :active="state.query.form.isStar"/>我的收藏
+      </template>
+      <template #buttons>
+        <div class="flex items-center gap-[var(--czr-gap)]">
+          <div class="__hover text-[0.88rem] text-[#576275] flex items-center gap-[0.3rem]" @click="state.query.form.isCreate = !state.query.form.isCreate">
+            <SvgIcon name="czr_add1" size="14" :active="state.query.form.isCreate"/>我的创建
+          </div>
+          <div class="__hover text-[0.88rem] text-[#576275] flex items-center gap-[0.3rem]" @click="state.query.form.isStar = !state.query.form.isStar">
+            <SvgIcon name="star" size="15" class="mb-[2px]" :active="state.query.form.isStar"/>我的收藏
+          </div>
+          <CzrForm class="bm-filter" label-width="0px" @handleEnter="onSearch">
+            <CzrFormColumn
+              width="6.68rem"
+              class="__czr-table-form-column"
+              :span="24"
+              label-width="0px"
+              v-model:param="state.query.form.group"
+              link="select"
+              :options="DictionaryStore.knowledgeGroups.list"
+              placeholder="全部分组"
+            />
+            <CzrFormColumn
+              width="6.68rem"
+              class="__czr-table-form-column"
+              :span="24"
+              label-width="0px"
+              v-model:param="state.query.form.tag"
+              link="select"
+              :options="DictionaryStore.knowledgeTags.list"
+              placeholder="全部标签"
+            />
+            <CzrFormColumn
+              width="15.63rem"
+              class="__czr-table-form-column"
+              :span="24"
+              label-width="0px"
+              v-model:param="state.text"
+              placeholder="按名称搜索"
+              :prefix-icon="Search"
+            />
+          </CzrForm>
         </div>
-        <CzrForm class="bm-filter" label-width="0px" @handleEnter="onSearch">
-          <CzrFormColumn
-            width="6.68rem"
-            class="__czr-table-form-column"
-            :span="24"
-            label-width="0px"
-            v-model:param="state.query.form.group"
-            link="select"
-            :options="DictionaryStore.knowledgeGroups.list"
-            placeholder="全部分组"
-          />
-          <CzrFormColumn
-            width="6.68rem"
-            class="__czr-table-form-column"
-            :span="24"
-            label-width="0px"
-            v-model:param="state.query.form.tag"
-            link="select"
-            :options="DictionaryStore.knowledgeTags.list"
-            placeholder="全部标签"
-          />
-          <CzrFormColumn
-            width="15.63rem"
-            class="__czr-table-form-column"
-            :span="24"
-            label-width="0px"
-            v-model:param="state.text"
-            placeholder="按名称搜索"
-            :prefix-icon="Search"
-          />
-        </CzrForm>
-      </div>
-    </div>
-    <div class="overflow-hidden flex-1 mt-[1rem]" v-loading="state.query.loading">
-
-    </div>
+      </template>
+      <template #table>
+        <CzrTable
+          v-loading="state.query.loading"
+          ref="ref_cusTable"
+          :data="state.query.result.data"
+          :head="state.query.head"
+          :total="state.query.result.total"
+          :page="state.query.page.pageNum"
+          :pageSize="state.query.page.pageSize"
+          @handlePage="onPage"
+          v-model:selected="state.query.selected"
+        >
+          <template #importAndExportType-column-value="{ scope }">
+<!--            <dict-tag :options="import_and_export_type" :value="scope.row.importAndExportType"/>-->
+          </template>
+          <template #caozuo-column-value="{ scope }">
+            <div class="__czr-table-operations">
+              <CzrButton type="table" title="重命名"/>
+              <CzrButton type="table" title="迁移"/>
+              <CzrButton type="table" title="归档"/>
+              <CzrButton type="table-del"/>
+            </div>
+          </template>
+        </CzrTable>
+      </template>
+    </CzrContent>
   </div>
 </template>
 
@@ -74,6 +105,18 @@ const state: any = reactive({
   text: '',
   query: {
     loading: false,
+    head: [
+      {value: 'p1', label: '文件名称', show: true},
+      {value: 'p1', label: '字符数', show: true},
+      {value: 'p1', label: '状态', show: true},
+      {value: 'p1', label: '召回次数', show: true},
+      {value: 'p1', label: '启用/停用', show: true},
+      {value: 'p1', label: '审核状态', show: true},
+      {value: 'p1', label: '关联应用', show: true},
+      {value: 'p1', label: '创建时间', show: true},
+      {value: 'p1', label: '更新时间', show: true},
+      {value: 'caozuo', label: '操作', show: true, width: 300, fixed: 'right', popover: false},
+    ],
     page: {
       pageNum: 1,
       pageSize: 20
@@ -118,7 +161,7 @@ const onPage = (pageNum, pageSize) => {
   state.query.loading = true
   setTimeout(() => {
     state.query.result.total = 100
-    const arr: any = [{empty: true}]
+    const arr: any = []
     for (let i = 1; i <= params.pageSize; i++) {
       const n = (params.pageNum - 1) * params.pageSize + i
       arr.push({