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

liudong

2024-07-25 004d5e646c15a67a2026788ebdb3f1da40653bca

 src/views/dmx/knowledgeLib/index.vue

@@ -6,16 +6,22 @@
        <div class="lf-container-top">
          <a-input-search
            :placeholder="$t('cardList.searchInput.placeholder')"
            style="width: 110px;"
            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">
            <div
              class="tab"
              v-for="(tab, index) in tabs"
              :key="index"
              @click="selectTab(index)"
              :class="{ 'active': selectedTab === index }"
            >
              {{ tab }}
            </div>
          </div>
        </div>
      </div>
      <div class="rt-container">
@@ -38,81 +44,11 @@
                            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')">-->
                        <!--                  <a-input-->
                        <!--                    v-model="formModel.name"-->
                        <!--                    :placeholder="$t('searchTable.form.name.placeholder')"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item-->
                        <!--                  field="contentType"-->
                        <!--                  :label="$t('searchTable.form.contentType')"-->
                        <!--                >-->
                        <!--                  <a-select-->
                        <!--                    v-model="formModel.contentType"-->
                        <!--                    :options="contentTypeOptions"-->
                        <!--                    :placeholder="$t('searchTable.form.selectDefault')"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item-->
                        <!--                  field="filterType"-->
                        <!--                  :label="$t('searchTable.form.filterType')"-->
                        <!--                >-->
                        <!--                  <a-select-->
                        <!--                    v-model="formModel.filterType"-->
                        <!--                    :options="filterTypeOptions"-->
                        <!--                    :placeholder="$t('searchTable.form.selectDefault')"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item-->
                        <!--                  field="createdTime"-->
                        <!--                  :label="$t('searchTable.form.createdTime')"-->
                        <!--                >-->
                        <!--                  <a-range-picker-->
                        <!--                    v-model="formModel.createdTime"-->
                        <!--                    style="width: 100%"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item-->
                        <!--                  field="status"-->
                        <!--                  :label="$t('searchTable.form.status')"-->
                        <!--                >-->
                        <!--                  <a-select-->
                        <!--                    v-model="formModel.status"-->
                        <!--                    :options="statusOptions"-->
                        <!--                    :placeholder="$t('searchTable.form.selectDefault')"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                      </a-row>
                    </a-form>
                  </a-col>
                  <!--                <a-divider style="height: 40px" direction="vertical" />-->
                  <!--                <a-col :flex="'200px'" style="text-align: right">-->
                  <!--                  <a-button @click="reset" style="margin-right: 20px">-->
                  <!--                    <template #icon>-->
                  <!--                      <icon-refresh />-->
                  <!--                    </template>-->
                  <!--                    {{ $t('searchTable.form.reset') }}-->
                  <!--                  </a-button>-->
                  <!--                  <a-button type="primary" @click="search">-->
                  <!--                    <template #icon>-->
                  <!--                      <icon-search />-->
                  <!--                    </template>-->
                  <!--                    {{ $t('searchTable.form.search') }}-->
                  <!--                  </a-button>-->
                  <!--                </a-col>-->
                </a-row>
                <a-divider style="margin-top: 0" />
                <a-row style="margin-bottom: 16px">
@@ -210,52 +146,71 @@
                  @page-change="onPageChange"
                  :scroll="{ y: 580 }"
                >
                  <template #contentType="{ record }">
                    <a-space>
                      <a-avatar
                        v-if="record.contentType === 'img'"
                        :size="16"
                        shape="square"
                      >
                        <img
                          alt="avatar"
                          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image"
                        />
                      </a-avatar>
                      <a-avatar
                        v-else-if="record.contentType === 'horizontalVideo'"
                        :size="16"
                        shape="square"
                      >
                        <img
                          alt="avatar"
                          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77721e365eb2ab786c889682cbc721c1.svg~tplv-49unhts6dw-image.image"
                        />
                      </a-avatar>
                      <a-avatar v-else :size="16" shape="square">
                        <img
                          alt="avatar"
                          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/ea8b09190046da0ea7e070d83c5d1731.svg~tplv-49unhts6dw-image.image"
                        />
                      </a-avatar>
                      {{ $t(`searchTable.form.contentType.${record.contentType}`) }}
                    </a-space>
                  <template #name="{ record }">
                    <icon-file style="color: #0960bd;margin-right: 4px;" />
                    <span style="color: #0960bd;cursor: pointer" @click="fileClick">
                      {{record.name}}
                    </span>
                  </template>
                  <template #filterType="{ record }">
                    {{ $t(`searchTable.form.filterType.${record.filterType}`) }}
                  <template #staue="{ record }">
                    <a-switch :model-value="record.staue"/>
                  </template>
                  <template #status="{ record }">
                    <span v-if="record.status === 'offline'" class="circle"></span>
                    <span v-else class="circle pass"></span>
                    {{ $t(`searchTable.form.status.${record.status}`) }}
                    <div style="display: flex;align-items: center;">
                      <div style="width: 100px">
                        <a-popover title="Title">
                          <a-tag :color="'blue'" border>成功</a-tag>
                          <template #content>
                            <p>Here is the text content</p>
                          </template>
                        </a-popover>
                        <a-popover title="Title">
                          <a-tag :color="'gold'" border>取消</a-tag>
                          <template #content>
                            <p>Here is the text content</p>
                          </template>
                        </a-popover>
                        <a-popover title="Title">
                          <a-tag :color="'green'" border>未启动</a-tag>
                          <template #content>
                            <p>Here is the text content</p>
                          </template>
                        </a-popover>
                      </div>
                      <div>
                        <a-button type="text" size="large">
                          <template #icon>
                            <icon-sync />
                          </template>
                        </a-button>
                        <a-button type="text" size="large">
                          <template #icon>
                            <icon-sync style="color: green" />
                          </template>
                        </a-button>
                        <a-button type="text" size="large">
                          <template #icon>
                            <icon-play-circle style="color: green" />
                          </template>
                        </a-button>
                      </div>
                    </div>
                  </template>
                  <template #operations="{ record }">
                    <add edit="edit" :record = 'record' />
                  <template #operations="{ record }" >
                    <tool/>
                    <edit/>
                    <a-popconfirm content="确定删除吗？" type="warning" @ok="deleteItem(record)">
                      <a-button v-permission="['admin']" type="text" size="small">
                        {{ $t('删除') }}
                        <template #icon>
                          <icon-delete />
                        </template>
                      </a-button>
                    </a-popconfirm>
                    <a-button type="text" size="small">
                      <template #icon>
                        <icon-download />
                      </template>
                    </a-button>
                  </template>
                </a-table>
              </a-card>
@@ -263,15 +218,51 @@
          </a-tab-pane>
          <a-tab-pane key="2" title="测试">
            <div class="rt-container-main">

              <test ></test>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" title="配置">
            <div class="rt-container-main">

              <config ></config>
            </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>
@@ -287,7 +278,13 @@
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import cloneDeep from 'lodash/cloneDeep';
  import Sortable from 'sortablejs';
  import add from '@/views/user/account/add.vue'
  import add from '@/views/dmx/knowledgeLib/add.vue'
  import edit from '@/views/dmx/knowledgeLib/edit.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 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 };
@@ -308,10 +305,16 @@
  const formModel = ref(generateFormModel());
  const cloneColumns = ref<Column[]>([]);
  const showColumns = ref<Column[]>([]);
  const edit = ref('add');

  const size = ref<SizeProps>('medium');
  let visible = ref(false)
  let detailsShow = ref(false)
  let selectedTab = ref(0)
  let tabs = reactive(['法律知识库', '政务知识库', '医学知识库', '其他知识库'])

  const  selectTab = (index) => {
    selectedTab.value= index;
  }

  const basePagination: Pagination = {
    current: 1,
@@ -339,50 +342,43 @@
    },
  ]);
  const columns = computed<TableColumnData[]>(() => [
    // {
    //   title: t('序号'),
    //   dataIndex: 'index',
    //   slotName: 'index',
    // },
    // {
    //   title: t('searchTable.columns.number'),
    //   dataIndex: 'number',
    // },
    {
      title: t('用户名'),
      title: t('名称'),
      dataIndex: 'name',
      slotName: 'name',
    },
    // {
    //   title: t('searchTable.columns.contentType'),
    //   dataIndex: 'contentType',
    //   slotName: 'contentType',
    // },
    // {
    //   title: t('searchTable.columns.filterType'),
    //   dataIndex: 'filterType',
    // },
    // {
    //   title: t('searchTable.columns.count'),
    //   dataIndex: 'count',
    // },
    {
      title: t('创建时间'),
      title: t('分快数'),
      dataIndex: 'contentType',
    },
    {
      title: t('上传时间'),
      dataIndex: 'filterType',
    },
    {
      title: t('创建人'),
      dataIndex: 'count',
    },
    {
      title: t('解析状态'),
      dataIndex: 'createdTime',
    },
    {
      title: t('所属部门'),
      dataIndex: 'filterType',
      slotName: 'filterType',
      title: t('启用'),
      dataIndex: 'staue',
      slotName: 'staue',
    },
    {
      title: t('备注'),
      title: t('解析状态'),
      dataIndex: 'status',
      slotName: 'status',
    },
    {
      title: t('searchTable.columns.operations'),
      title: t('操作'),
      dataIndex: 'operations',
      slotName: 'operations',
      width: 150,
      minWidth: 100,
    },
  ]);
  const contentTypeOptions = computed<SelectOptionData[]>(() => [
@@ -426,7 +422,7 @@
    try {
      const { data } = await queryPolicyList(params);
      renderData.value = data.list;
      console.log(renderData);
      console.log(renderData, 'renderData');
      pagination.current = params.current;
      pagination.total = data.total;
    } catch (err) {
@@ -510,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})
@@ -559,12 +565,42 @@
          display: flex;
        }
        .lf-container-down{
          width: 80%;
          display: flex;
          flex-direction: column;
          width: 90%;
          height: calc(100% - 5rem);
          border: 1px solid #cccccc;
          border: 1px solid #eeeeee;
          overflow: auto;
          padding: 10px;
          .tabs .tab {
            cursor: pointer;
            box-sizing: border-box;
            margin: 10px 0;
            padding:0 10px;
            color: rgba(0, 0, 0, 0.88);
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            list-style: none;
            position: relative;
            background: #ffffff;
            border: 1px solid #f0f0f0;
            border-radius: 8px;
          }
          .tabs .tab:hover {
            border: 1px solid #ffffff;
            background: #e8e8ea;
            box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
          }
          .tabs .tab.active {
            border: 1px solid #e8e8ea;
            background: #e8e8ea;
            cursor: pointer;
          }
        }
      }
      .rt-container{
        position: relative;
        //background: #626aea;
        margin-left: 20px;
        width: calc(100% - 200px);
@@ -572,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;
          }
        }
      }
    }
  }