ebiz-ai-knowledge-manage/src/views/rules/Index.vue

<script>
import { deleteRule, getRuleList } from "@/api/rules/index";
import EditPromptRule from "./components/edit-prompt-rule/Index.vue";
import EditSplitRule from "./components/edit-split-rule/Index.vue";
import Info from "./components/info/index.vue";
import { h } from "vue";
import { watch } from "vue";

export default {
  name: "rules",
  data() {
    return {
      columns: [],
      // 弹窗配置
      diglogOptions: {
        title: "",
        visible: false,
        width: "50%",
        currentComponent: void 0,
        currentRow: void 0
      },
      // 分页配置
      currentPage: 1,
      tableData: [],
      // 查询表单
      form: {
        query: true,
        pickerOptions: void 0,
        ruleType: "",
        ruleName: "",
        createdDate: []
      }
    };
  },
  provide() {
    return {
      diglogOptions: this.diglogOptions
    };
  },
  components: {
    EditPromptRule,
    EditSplitRule,
    Info
  },
  computed: {
    // 当前的分页数据
    currentTableDate() {
      let filteredData;
      // 过滤 table 列表,如果 form 相关项是空的，就不过滤
      if (this.form.query) {
        // 过滤 ruleType
        const map = {
          1: "提示词规则",
          2: "知识拆分规则"
        };
        filteredData = this.tableData.filter(item => {
          if (!this.form.ruleType) return true;
          return map[item.ruleType] === this.form.ruleType;
        });

        // 过滤 ruleName
        filteredData = filteredData.filter(item => {
          if (!this.form.ruleName) return true;
          return item.ruleName === this.form.ruleName;
        });

        // 过滤 createdDate
        filteredData = filteredData.filter(item => {
          if (!this.form.createdDate.length) return true;
          return item.createdDate >= this.form.createdDate[0] && item.createdDate <= this.form.createdDate[1];
        });

      } else {
        filteredData = this.tableData;
      }


      // TODO: 分页数据
      const start = (this.currentPage - 1) * 10;
      const end = this.currentPage * 10;
      return filteredData.slice(start, end);
    },
    // 查询表单的 ruleTypeOptions
    ruleTypeOptions() {
      const map = {
        1: "提示词规则",
        2: "知识拆分规则"
      };
      // 去重所有 ruleType， 然后映射成 option
      const res = [...new Set(this.tableData.map(item => item.ruleType))].map(type => (map[type]));
      console.log(res);

      return res;
    },
    // 查询表单的 ruleNameOptions
    ruleNameOptions() {
      const res = [...new Set(this.tableData.map(item => item.ruleName))];
      console.log(res);
      return res;
    }
  },
  watch: {
    form: {
      handler() {
        },
      deep: true
    }
  },
  beforeMount() {
    getRuleList().then(res => {
      console.log(res);

      const { content } = res.content;
      console.log(content);

      this.tableData = content.list;
    });
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`current page: ${val}`);
      this.currentPage = val;
    },
    // 处理查看规则详情
    handleInfoVisiable(row) {
      this.diglogOptions.title = "查看规则详情";
      this.diglogOptions.currentComponent = "Info";
      this.diglogOptions.visible = true;
      this.diglogOptions.currentRow = row;
    },
    // 处理修改规则
    handleEdit(row, index) {
      this.diglogOptions.title = "修改规则";
      this.diglogOptions.currentComponent = row.ruleType === 1 ? "EditSplitRule" : "EditPromptRule";
      this.diglogOptions.visible = true;
      this.diglogOptions.currentRow = row;
    },
    // 处理删除规则
    handleDelete(row, index) {
      console.log(row, index);
      deleteRule([row.id]).then(() => {
        this.tableData.splice(index, 1);
      }).catch(err => {
        this.$notify.error({
          title: "删除失败",
          message: h("i", { style: "color: teal" }, "删除时出现错误，稍后再试" + err)
        });
      });
    },
    // 处理查询
    handleQuery() {
      this.form.query = true;
    },
    // 处理重置
    handleReset() {
      this.form = {
        query: true,
        pickerOptions: void 0,
        ruleType: "",
        ruleName: "",
        createdDate: []
      };
    },
    // 处理新增
    handleAdd() {
      console.log("handleAdd");
    }
  }

};
</script>

<template>
  <div class="rules-container container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>规则管理</span>
        </div>
      </template>
      <div class="card-body">
        <el-form :model="form" label-width="100px">
          <!-- 查询条件 -->
          <el-row>
            <!-- 规则类型 -->
            <el-col :span="8">
              <el-form-item label="规则类型">
                <el-select v-model="form.ruleType" placeholder="请选择规则类型">
                  <el-option v-for="item in ruleTypeOptions" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 规则名称 -->
            <el-col :span="8">
              <el-form-item label="规则名称">
                <el-select v-model="form.ruleName" placeholder="请选择规则名称">
                  <el-option v-for="item in ruleNameOptions" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 创建时间 -->
            <el-col :span="8">
              <el-form-item label="创建时间">
                <el-date-picker v-model="form.createdDate" type="daterange" unlink-panels range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="form.pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 功能按钮组： 查询、重置、新增规则 -->
          <el-row class="p25">
            <el-col :span="16">
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button type="info" @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleAdd">新增规则</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 下方规则列表 -->
      <!-- <r-table :data="tableData"></r-table> -->
      <div class="p20">
        <el-table :data="currentTableDate">
          <el-table-column prop="ruleName" label="规则名称"></el-table-column>
          <el-table-column prop="ruleType" label="规则类型">
            <template #default="scope">
              {{ scope.row.ruleType && scope.row.ruleType === 1 ? "提示词规则" : "知识拆分规则" }}
            </template>
          </el-table-column>
          <el-table-column prop="createdDate" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" size="mini" plain @click="handleInfoVisiable(scope.row)">查看规则详情
              </el-button>
              <el-button type="primary" size="mini" plain @click="handleEdit(scope.row, scope.$index)">修改</el-button>
              <el-button type="danger" size="mini" plain @click="handleDelete(scope.row, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row>
        <el-col :span="24" class="flex" style="justify-content: right;">
          <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
            :current-page="currentPage" :hide-on-single-page="true" :total="tableData.length">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 规则详情弹窗 -->
    <el-drawer :visible.sync="diglogOptions.visible" size="50%" :title="diglogOptions.title">
      <!-- diglog 弹窗内容组件 -->
      <component v-if="diglogOptions.visible" :is="diglogOptions.currentComponent" :data="tableData" :columns="columns"
        :currentRow="diglogOptions.currentRow" />
    </el-drawer>
  </div>
</template>