fu-hsi-web/src/views/promptManagement/PromptConfig/index.vue

<template>
  <div ref="htmlContent" class="content">
    <cs-search title="提示词检索" :data="searchData" :span="6" direction="row" @onSearch="onSearch" @getData="onSearch" />
    <div class="index-content">
      <div class="header">
        <el-radio-group v-model="type" size="large" @change="handleChange">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button v-for="(item,index) in promptType" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
          <!-- <el-radio-button label="2">已分析</el-radio-button> -->
        </el-radio-group>
        <el-button type="primary" icon="el-icon-circle-plus-outline" style="position: absolute;right: 24px;top: 12px;" @click="handleAdd">新增</el-button>
        <vxe-grid v-bind="gridOptions" style="margin-top: 20px">
          <template #operate="{row}">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" style="color: red" @click="handleDel(row)">删除</el-button>
          </template>
          <template #type="{row}">
            <span>{{ getTypeName(row.type) }}</span>
          </template>
        </vxe-grid>
        <div style="text-align: center">
          <cs-page
            :page.sync="queryForm.page"
            :limit.sync="queryForm.size"
            :total="queryForm.total"
            @pagination="fetchData"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '@/views/mixin'
import { queryPromptList, delPrompt } from '@/api/promptManagement'

export default {
  name: 'PromptConfig',
  mixins: [mixin],
  data() {
    return {
      // 筛选数据
      searchData: [
        { label: '提示词名称', model: 'name', type: 'input' }
        // { label: '提示词类型', model: 'type', type: 'select', option: JSON.parse(sessionStorage.getItem('prompt_type')) }
      ],
      promptType: JSON.parse(sessionStorage.getItem('prompt_type')),
      type: '',
      // 表格配置
      gridOptions: {
        ...mixin.data().gridOptions,
        columns: [
          { title: '序号', type: 'seq', width: 80 },
          { title: '提示词名称', field: 'name', width: '300px' },
          { title: '提示词类型', field: 'type', slots: { default: 'type' }, width: '200px' },
          { title: '匹配值', field: 'matchNum', width: '200px' },
          { title: '提示词', field: 'prompt' },
          { title: '操作', slots: { default: 'operate' }, width: '150px' }
        ],
        data: []
      }
    }
  },
  activated() {
    this.fetchData()
  },
  mounted() {
    this.tableHeight(390)
  },
  methods: {
    // 数据查询
    fetchData() {
      queryPromptList({ ...this.searchFormData, type: this.type, page: this.queryForm.page, size: this.queryForm.size }).then(res => {
        this.gridOptions.data = res.data.records
        this.queryForm.total = res.data.total
      })
    },
    // 切换tab
    handleChange(val) {
      this.type = val
      this.queryForm.page = 1
      this.fetchData()
    },
    getTypeName(val) {
      for (const item of this.promptType) {
        if (item.value === val) {
          return item.label
        }
      }
    },
    // 新增
    handleAdd() {
      this.$router.push({ path: `/add-prompt` })
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({ path: `/edit-prompt/${row.id}` })
    },
    // 删除
    handleDel(row) {
      this.$baseConfirm('确定要删除吗?', null, async() => {
        const { code, msg } = await delPrompt({
          id: row.id
        })
        code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除失败!')
        this.fetchData()
      })
    },
    // 筛选
    onSearch(data, callback) {
      this.searchFormData = Object.assign({}, data)
      this.queryForm.page = 1
      this.fetchData()
      if (callback) callback(true)
    }
  }
}
</script>

  <style scoped lang="scss">
    .content {
      height: 100%;
      .index-content {
        border-radius: 8px;
        background: white;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 10px;
        height: calc(100% - 120px);
      }
      .expand-details {
        background: #F6F6F6;
        padding: 8px 20px;
        box-sizing: border-box;
      }
      .header {
        position: relative;
      }
    }
    ::v-deep {
      .text-blue {
        color: #005AA8;
      }
      .header-blue {
        background: #F2F6FA;

      }
    }
  </style>