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

<template>
  <div v-if="visible">
    <div class="flex align-items-s">
      <div style="width: 500px">
        <el-form :model="form" label-width="100px" label-position="">
          <!-- 表单内容 -->
          <el-form-item label="知识拆分规则">
            <el-input
              size="small"
              v-model="form.ruleName"
              placeholder="请输入知识拆分规则"
              clearable
            ></el-input>
          </el-form-item>
          <!-- 其他表单项 -->
        </el-form>
      </div>
      <div class="mt5">
        <el-button
          type="primary"
          size="medium"
          @click="getDataList"
          class="ml20"
          >查询</el-button
        >
        <el-button type="primary" size="medium" @click="addRule" class="ml20"
          >+ 新增规则</el-button
        >
      </div>
    </div>

    <r-table
      :columns="columns"
      :data="tableData"
      :current-page="page"
      :page-size="pageSize"
      :isSelectOnly="true"
      :total="total"
      :deletion="false"
      @size-change="pageChange"
      @current-change="currentChange"
      @select-row="getCheckData"
    ></r-table>
    <!-- 添加 AddRule 组件 -->
    <add-rule
      ref="addRule"
      :ruleList="tableData"
      @getDataList="getDataList"
    ></add-rule>
  </div>
</template>

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

export default {
  name: 'CustomSplitDialog',
  components: {
    addRule: addRule // 注册 AddRule 组件
  },
  props: {},
  data() {
    return {
      visible: false,
      form: {
        ruleName: ''
      },
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      addRuleVisible: false, // 控制 AddRule 组件的显示状态
      ruleId: ''
    }
  },
  methods: {
    currentChange(page) {
      this.page = page
      this.getDataList()
    },
    pageChange(size) {
      this.page = 1
      this.pageSize = size
      this.getDataList()
    },

    init() {
      this.visible = true
      this.getDataList()
    },
    getCheckData(row) {
      this.ruleId = row.row.id
    },
    getDataList() {
      console.log('getRulesPage')
      // 1-文档拆分规则  2-文档题词规则
      let params = {
        ruleType: 1,
        ...this.form,
        page: this.page,
        pageSize: this.pageSize
      }
      getRulesPage(params).then(res => {
        this.tableData = res.content.content.list
        this.total = res.content.content.total
      })
    },
    close() {
      this.visible = false
    },
    handlePreview(row) {
      this.$refs.addRule.init(row.id, { preview: 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: 'radio',
          width: '100',
          align: 'center'
        },
        {
          key: '知识拆分规则名称',
          prop: 'ruleName',
          align: 'center'
        },
        {
          key: '备注',
          prop: 'description',
          align: 'center'
        },
        {
          key: '操作',
          prop: 'knowledgeDesc',
          width: '150px',
          align: 'center',
          isRedraw: true,
          render: (h, params) => {
            return h('span', {}, [
              h('el-button', {
                class: 'normal-button',
                props: {
                  type: 'primary',
                  title: '修改',
                  icon: 'el-icon-edit-outline'
                },
                on: {
                  click: () => this.handleEdit(params.row)
                }
              }),
              h('el-button', {
                class: 'normal-button',
                props: {
                  type: 'primary',
                  title: '预览',
                  icon: 'el-icon-view'
                },
                on: {
                  click: () => this.handlePreview(params.row)
                }
              })
            ])
          }
        }
      ]
    }
  }
}
</script>

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