UnisKB/ui/src/views/paragraph/component/ParagraphCard.vue

<template>
  <el-card
    shadow="hover"
    class="paragraph-box cursor"
    @mouseenter="cardEnter()"
    @mouseleave="cardLeave()"
  >
    <h2 class="mb-16">{{ data.title || '-' }}</h2>
      <el-card
      class="paragraph-box-operation mt-8 mr-8"
      shadow="always"
      style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px"
    >
      <el-switch
        :loading="changeStateloading"
        v-model="data.is_active"
        :before-change="() => changeState(data)"
        size="small"
      />

      <el-divider direction="vertical" />
      <span class="mr-8">
        <el-button link @click="editParagraph(data)">
          <el-icon :size="16" :title="$t('views.applicationWorkflow.control.zoomOut')">
            <EditPen />
          </el-icon>
        </el-button>
      </span>
      <span class="mr-8">
        <el-button link>
          <el-icon :size="16" :title="$t('views.applicationWorkflow.control.zoomOut')">
            <el-icon><CirclePlus /></el-icon>
          </el-icon>
        </el-button>
      </span>
      <el-dropdown trigger="click" :teleported="false">
        <el-button text>
          <el-icon><MoreFilled /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="openGenerateDialog(data)">
              <el-icon><Connection /></el-icon>
              {{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
            >
            <el-dropdown-item @click="openSelectDocumentDialog(data)">
              <AppIcon iconName="app-migrate"></AppIcon>
              {{ $t('views.document.setting.migration') }}</el-dropdown-item
            >
            <el-dropdown-item icon="Delete" @click.stop="deleteParagraph(data)">{{
              $t('common.delete')
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-card>
    <MdPreview
      ref="editorRef"
      editorId="preview-only"
      :modelValue="data.content"
      class="maxkb-md"
    />

    <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
    <SelectDocumentDialog ref="SelectDocumentDialogRef" @refresh="refreshMigrateParagraph" />
    <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="refresh" />
  </el-card>
</template>
<script setup lang="ts">
import { ref, useSlots } from 'vue'
import { useRoute } from 'vue-router'
import { t } from '@/locales'
import useStore from '@/stores'
import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
import ParagraphDialog from '@/views/paragraph/component/ParagraphDialog.vue'
import SelectDocumentDialog from '@/views/paragraph/component/SelectDocumentDialog.vue'
import { MsgSuccess, MsgConfirm } from '@/utils/message'
const { paragraph } = useStore()

const route = useRoute()
const {
  params: { id, documentId },
} = route as any
const props = defineProps<{
  data: any
}>()

const changeStateloading = ref(false)
const show = ref(false)
// card上面存在dropdown菜单
const subHovered = ref(false)
function cardEnter() {
  show.value = true
  subHovered.value = false
}

function cardLeave() {
  show.value = subHovered.value
}

function changeState(row: any) {
  const obj = {
    is_active: !row.is_active,
  }
  paragraph
    .asyncPutParagraph(id, documentId, row.id, obj, changeStateloading)
    .then((res) => {
      // const index = paragraphDetail.value.findIndex((v) => v.id === row.id)
      // paragraphDetail.value[index].is_active = !paragraphDetail.value[index].is_active
      return true
    })
    .catch(() => {
      return false
    })
}

const GenerateRelatedDialogRef = ref<InstanceType<typeof GenerateRelatedDialog>>()
function openGenerateDialog(row: any) {
  if (GenerateRelatedDialogRef.value) {
    GenerateRelatedDialogRef.value.open([], 'dataset', row.id)
  }
}
function openSelectDocumentDialog(row?: any) {
  //   if (row) {
  //     multipleSelection.value = [row.id]
  //   }
  //   SelectDocumentDialogRef.value.open(multipleSelection.value)
}

function deleteParagraph(row: any) {
  MsgConfirm(
    `${t('views.paragraph.delete.confirmTitle')} ${row.title || '-'} ?`,
    t('views.paragraph.delete.confirmMessage'),
    {
      confirmButtonText: t('common.confirm'),
      confirmButtonClass: 'danger',
    },
  )
    .then(() => {
      paragraph.asyncDelParagraph(id, documentId, row.id, loading).then(() => {
        // const index = paragraphDetail.value.findIndex((v) => v.id === row.id)
        // paragraphDetail.value.splice(index, 1)
        MsgSuccess(t('common.deleteSuccess'))
      })
    })
    .catch(() => {})
}
const SelectDocumentDialogRef = ref()
const ParagraphDialogRef = ref()
const title = ref('')
function editParagraph(row: any) {
  title.value = t('views.paragraph.paragraphDetail')
  ParagraphDialogRef.value.open(row)
}

function refresh() {}

function refreshMigrateParagraph() {}
</script>
<style lang="scss" scoped>
.paragraph-box {
  background: var(--app-layout-bg-color);
  border: 1px solid #ffffff;
  box-shadow: none !important;
  position: relative;
  z-index: 9999;
  &:hover {
    background: rgba(31, 35, 41, 0.1);
    border: 1px solid #dee0e3;
  }
  .paragraph-box-operation {
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid #dee0e3;
  }
}
</style>