big-model-web/src/views/manage/knowledge/documents/document/index.vue

<template>
  <div class="bm-main-box">
    <div class="flex items-center">
      <div class="bm-main-box-title">文档</div>
    </div>
    <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>
      </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>
      </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>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import { Search } from '@element-plus/icons-vue'
import {debounce} from "lodash";
import {useDialogStore, useDictionaryStore} from "@/stores";
import {ElMessage} from "element-plus";

const DialogStore = useDialogStore();
const DictionaryStore = useDictionaryStore();
const emits = defineEmits([])
const props = defineProps({
  knowledge: <any>{}
})
const {proxy}: any = getCurrentInstance()
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
    },
    form: {},
    formReal: {},
    result: {
      total: 0,
      data: []
    },
    selected: []
  },
  detail: {
    show: false,
    transfer: {}
  },
})
const setText = debounce((v) => {
  state.query.form.name = v
}, 1000)
watch(() => state.text, (n) => {
  setText(n)
})
watch(() => state.query.form, (n) => {
  onSearch()
}, {deep: true})
const onPage = (pageNum, pageSize) => {
  state.query.page = {
    pageNum: pageNum,
    pageSize: pageSize,
  }
  const params = {
    pageNum: state.query.page.pageNum,
    pageSize: state.query.page.pageSize,
  }
  //  添加表单参数
  for (const [k, v] of Object.entries(state.query.formReal)) {
    if (proxy.$czrUtil.isValue(v)) {
      params[k] = v
    }
  }
  state.query.loading = true
  setTimeout(() => {
    state.query.result.total = 100
    const arr: any = []
    for (let i = 1; i <= params.pageSize; i++) {
      const n = (params.pageNum - 1) * params.pageSize + i
      arr.push({
        p1: '部门知识库-部门知识库-部门知识库-' + n,
        p2: '王一鸣',
        p3: '只是一个政务服务事项办事指南',
        p4: n,
        p5: '2980k',
        p6: n % 4,
        p7: n % 2,
        tags: n % 2 ? '1,2,3,41,2,3,41,2,3,41,2,3,41,2,3,4' : ''
      })
    }
    state.query.result.data = arr
    state.query.loading = false
  }, 1000)
  // state.query.loading = true
  // listRuleLogisticsDataSubscribeInfo(params).then(res => {
  //   if (res.code == 200) {
  //     state.query.result.total = res.total
  //     state.query.result.data = res.rows
  //     state.query.loading = false
  //   } else {
  //     ElMessage.error(res.msg)
  //   }
  // }).catch(() => {
  //   state.query.loading = false
  // })
}
const onSearch = () => {
  state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
  onPage(1, state.query.page.pageSize)
}
const onReset = () => {
  state.query.page = {
    pageNum: 1,
    pageSize: 20
  }
  state.query.form = {}
  onSearch()
}
const onAdd = () => {
  state.detail.transfer = {
    mode: 'add'
  }
  state.detail.show = true
}
const onEdit = (row) => {
  state.detail.transfer = {
    mode: 'edit',
    id: row.id
  }
  state.detail.show = true
}
const onDel = (row: any) => {
  DialogStore.confirm({
    title: '删除确认',
    content: `${row.p6}个应用正在使用该大模型，请确认是否删除`,
    onSubmit: () => {
      ElMessage.success('删除成功！')
    }
  })
}
const onChangeTag = (row, tags) => {
  row.tags = tags
  // onSearch()
}
const initDictionary = () => {
  DictionaryStore.initKnowledgeGroups()
}
onMounted(() => {
  console.log(props.knowledge)
  initDictionary()
  onReset()
})
</script>

<style lang="scss" scoped>
.knowledge {
  width: 100%;
  height: 11.81rem;
  background-image: url("@/assets/images/knowledge-item-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 1rem 1.5rem;
}
</style>