ebiz-ai-knowledge-manage/src/views/knowledge/detail/components/split/CustomSplitDialog.vue

<template>
  <div v-if="visible">
    <el-form :model="form" label-width="100px">
      <!-- 表单内容 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="知识拆分规则">
            <el-input v-model="form.ruleName" size="medium" placeholder="请输入知识拆分规则"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" size="medium" @click="addRule" class="ml20">+ 新增规则</el-button>
        </el-col>
      </el-row>
      <!-- 其他表单项 -->
    </el-form>
    <r-table :columns="columns" :data="tableData" :deletion="false"></r-table>
    <!-- 添加 AddRule 组件 -->
    <add-rule ref="addRule" @getDataList="getDataList"></add-rule>

    <!-- 添加预览弹窗 -->
    <el-dialog
      title="拆分结果预览"
      :visible.sync="previewDialogVisible"
      width="60%">
      <div class="preview-content">
        <!-- 预览内容区域 -->
        这里是预览的内容
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="previewDialogVisible = false">确定</el-button>
        <el-button size="medium" @click="previewDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddRule from './AddRule.vue' // 导入 AddRule 组件
import { getRulesPage } from '@/api/generatedApi/index'

export default {
  name: 'CustomSplitDialog',
  components: {
    AddRule // 注册 AddRule 组件
  },
  props: {},
  data() {
    return {
      visible: false,
      form: {
        ruleName: ''
      },
      tableData: [],
      addRuleVisible: false, // 控制 AddRule 组件的显示状态
      previewDialogVisible: false // 控制预览弹窗的显示状态
    }
  },
  methods: {
    init() {
      this.visible = true
      this.getDataList()
    },
    getDataList() {
      console.log('getRulesPage');
      // 1-文档拆分规则  2-文档题词规则
      let params = {
        ruleType: 1,
        ...this.form
      }
      getRulesPage(params).then(res => {
        console.log(res.content.content.list);
        this.tableData = res.content.content.list
      })
    },
    close(){
      this.visible = false;
    },
    handlePreview(row) {
      // 预览逻辑
      console.log('Preview', row);
      this.previewDialogVisible = true; // 显示预览弹窗
    },
    handleEdit(row) {
      // 修改逻辑
      this.$refs.addRule.init(row.id)
    },
    closeDialog() {
      this.$emit('update:visible', false)
    },
    addRule() {
      this.$refs.addRule.init()
      // this.addRuleVisible = true; // 显示 AddRule 组件
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  computed: {
    columns() {
      return [
        {
          type: 'selection',
          prop: 'knowledgeName',
          width: '100',
          align: 'center'
        },
        {
          key: '知识拆分规则名称',
          prop: 'ruleName',
          align: 'center'
        },
        {
          key: '备注',
          prop: 'description',
          align: 'center'
        },
        {
          key: '操作',
          prop: 'knowledgeDesc',
          width: '150px',
          align: 'center',
          render: (h, params) => {
            return h('span', {}, [
              h(
                'el-button',
                {
                  class: 'floatSpan',
                  props: {
                    type: 'primary',
                    size: 'medium'
                  },
                  on: {
                    click: () => this.handleEdit(params.row)
                  }
                },
                '修改'
              ),
              h(
                'el-button',
                {
                  class: 'floatSpan',
                  props: {
                    type: 'primary',
                    size: 'medium'
                  },
                  on: {
                    click: () => this.handlePreview(params.row)
                  }
                },
                '预览'
              )
            ])
          }
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
// 样式可以根据需要调整
</style>