EasyFlow/easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.vue

<script setup lang="ts">
import { ref } from 'vue';

import { EasyFlowFormModal } from '@easyflow/common-ui';
import { $t } from '@easyflow/locales';

import { Delete, MoreFilled } from '@element-plus/icons-vue';
import {
  ElButton,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElMessageBox,
  ElTable,
  ElTableColumn,
} from 'element-plus';

import { api } from '#/api/request';
import PageData from '#/components/page/PageData.vue';

const props = defineProps({
  documentId: {
    type: String,
    default: '',
  },
  manageable: {
    type: Boolean,
    default: true,
  },
});
const dialogVisible = ref(false);
const pageDataRef = ref();
const handleEdit = (row: any) => {
  if (!props.manageable) {
    ElMessage.warning($t('documentCollection.managePermissionHint'));
    return;
  }
  form.value = { id: row.id, content: row.content };
  openDialog();
};
const handleDelete = (row: any) => {
  if (!props.manageable) {
    ElMessage.warning($t('documentCollection.managePermissionHint'));
    return;
  }
  ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
    confirmButtonText: $t('message.ok'),
    cancelButtonText: $t('message.cancel'),
    type: 'warning',
  })
    .then(() => {
      btnLoading.value = true;
      api
        .post('/api/v1/documentChunk/removeChunk', { id: row.id })
        .then((res: any) => {
          btnLoading.value = false;
          if (res.errorCode !== 0) {
            ElMessage.error(res.message);
            return;
          }
          ElMessage.success($t('message.deleteOkMessage'));
          pageDataRef.value.setQuery(queryParams);
        });
    })
    .catch(() => {});
};
const openDialog = () => {
  dialogVisible.value = true;
};
const closeDialog = () => {
  dialogVisible.value = false;
};
const queryParams = ref({
  documentId: props.documentId,
  sortKey: 'sorting',
  sortType: 'asc',
});
const save = () => {
  if (!props.manageable) {
    ElMessage.warning($t('documentCollection.managePermissionHint'));
    return;
  }
  btnLoading.value = true;
  api.post('/api/v1/documentChunk/update', form.value).then((res: any) => {
    btnLoading.value = false;
    if (res.errorCode !== 0) {
      ElMessage.error(res.message);
      return;
    }
    ElMessage.success($t('message.updateOkMessage'));
    pageDataRef.value.setQuery(queryParams);
    closeDialog();
  });
};
const btnLoading = ref(false);
const basicFormRef = ref();
const form = ref({
  id: '',
  content: '',
});
</script>

<template>
  <div>
    <PageData
      page-url="/api/v1/documentChunk/page"
      ref="pageDataRef"
      :page-size="10"
      :extra-query-params="queryParams"
    >
      <template #default="{ pageList }">
        <ElTable :data="pageList" style="width: 100%" size="large">
          <ElTableColumn
            prop="content"
            :label="$t('documentCollection.content')"
            min-width="240"
          />
          <ElTableColumn
            v-if="props.manageable"
            :label="$t('common.handle')"
            width="100"
            align="right"
          >
            <template #default="{ row }">
              <div class="flex items-center gap-3">
                <ElButton link type="primary" @click="handleEdit(row)">
                  {{ $t('button.edit') }}
                </ElButton>

                <ElDropdown>
                  <ElButton link :icon="MoreFilled" />

                  <template #dropdown>
                    <ElDropdownMenu>
                      <ElDropdownItem @click="handleDelete(row)">
                        <ElButton link type="danger" :icon="Delete">
                          {{ $t('button.delete') }}
                        </ElButton>
                      </ElDropdownItem>
                    </ElDropdownMenu>
                  </template>
                </ElDropdown>
              </div>
            </template>
          </ElTableColumn>
        </ElTable>
      </template>
    </PageData>
    <EasyFlowFormModal
      v-if="props.manageable"
      v-model:open="dialogVisible"
      :closable="!btnLoading"
      :title="$t('button.edit')"
      width="50%"
      :confirm-loading="btnLoading"
      :confirm-text="$t('button.save')"
      :submitting="btnLoading"
      @confirm="save"
    >
      <ElForm
        ref="basicFormRef"
        :model="form"
        label-position="top"
        class="easyflow-modal-form easyflow-modal-form--compact"
      >
        <ElFormItem>
          <ElInput v-model="form.content" :rows="20" type="textarea" />
        </ElFormItem>
      </ElForm>
    </EasyFlowFormModal>
  </div>
</template>

<style scoped></style>