ylrz_his_scrm_companyUI/src/views/aiAddwxSop/template.vue

<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="模板名称" prop="templateName">
        <el-input v-model="queryParams.templateName" placeholder="请输入模板名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="模板状态" clearable>
          <el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">新增模板</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="模板ID" align="center" prop="templateId" width="80" />
      <el-table-column label="模板名称" align="center" prop="templateName" show-overflow-tooltip />
      <el-table-column label="模板描述" align="center" prop="templateDesc" show-overflow-tooltip />
      <el-table-column label="版本" align="center" prop="version" width="80" />
      <el-table-column label="状态" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="280">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleNodeDesign(scope.row)">节点设计</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 新增/修改模板对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item label="模板描述" prop="templateDesc">
          <el-input v-model="form.templateDesc" type="textarea" placeholder="请输入模板描述" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in statusOptions" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 节点设计对话框 -->
    <el-dialog :title="'节点设计 - ' + currentTemplate.templateName" :visible.sync="nodeDesignOpen" width="1100px" append-to-body @opened="loadTemplateNodes">
      <div class="node-panel">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddNode">添加节点</el-button>
        <el-table :data="templateNodes" style="margin-top: 10px;" row-key="nodeId">
          <el-table-column label="节点ID" align="center" prop="nodeId" width="80" />
          <el-table-column label="排序" align="center" prop="sortOrder" width="60" />
          <el-table-column label="节点名称" align="center" prop="nodeName" />
          <el-table-column label="节点类型" align="center" prop="nodeType" width="120">
            <template slot-scope="scope">
              <el-tag :type="getNodeTypeTag(scope.row.nodeType)">{{ getNodeTypeName(scope.row.nodeType) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="上一节点" align="center" width="140">
            <template slot-scope="scope">
              <span v-if="scope.row.prevNodeId">{{ getPrevNodeLabel(scope.row.prevNodeId) }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditNode(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" icon="el-icon-s-order" @click="handleNodeRules(scope.row)">管理规则</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteNode(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 新增/编辑节点对话框 -->
    <el-dialog :title="nodeFormTitle" :visible.sync="nodeFormOpen" width="550px" append-to-body>
      <el-form ref="nodeForm" :model="nodeForm" label-width="100px" size="small">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model="nodeForm.nodeName" placeholder="请输入节点名称" />
        </el-form-item>
        <el-form-item label="节点类型" prop="nodeType">
          <el-select v-model="nodeForm.nodeType" placeholder="请选择节点类型">
            <el-option v-for="dict in nodeTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="nodeForm.sortOrder" :min="0" />
        </el-form-item>
        <el-form-item label="上一节点" prop="prevNodeId">
          <el-select v-model="nodeForm.prevNodeId" placeholder="请选择上一节点" clearable>
            <el-option v-for="node in templateNodes" :key="node.nodeId" :label="node.nodeName + ' (ID:' + node.nodeId + ')'" :value="node.nodeId" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="下一节点ID" prop="nextNodeId">
          <el-input-number v-model="nodeForm.nextNodeId" :min="0" placeholder="可选" />
        </el-form-item> -->
        <el-form-item label="节点配置" prop="nodeConfig">
          <el-input v-model="nodeForm.nodeConfig" type="textarea" :rows="4" placeholder="JSON格式配置" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="nodeFormOpen = false">取 消</el-button>
        <el-button type="primary" @click="submitNodeForm">保存节点</el-button>
      </div>
    </el-dialog>

    <!-- 节点规则管理对话框 -->
    <el-dialog :title="'管理规则 - ' + currentRuleNode.nodeName" :visible.sync="ruleDialogOpen" width="800px" append-to-body @opened="loadNodeRules">
      <div class="rule-actions mb8">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddRule">新增规则</el-button>
      </div>
      <el-table :data="nodeRules" border>
        <el-table-column label="排序" align="center" prop="sortOrder" width="60" />
        <el-table-column label="规则名称" align="center" prop="ruleName" />
        <el-table-column label="间隔天数" align="center" prop="sendDay" width="80" />
        <el-table-column label="间隔时间" align="center" prop="sendTime" width="100" />
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditRule(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteRule(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 规则编辑区域 -->
      <div v-if="ruleFormVisible" class="rule-form-panel" style="margin-top: 20px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 15px;">
        <h4>{{ ruleFormTitle }}</h4>
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" size="small">
          <el-form-item label="规则名称" prop="ruleName">
            <el-input v-model="ruleForm.ruleName" placeholder="规则名称，仅内部可见" />
          </el-form-item>
          <el-form-item label="间隔时间" prop="sendTime">
            <el-time-picker
              v-model="ruleForm.sendTime"
              value-format="HH:mm"
              format="HH:mm"
              :picker-options="{ selectableRange: ['00:00:00 - 23:59:59'] }"
              placeholder="选择时间"
              style="width: 160px;">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="间隔天数" prop="sendDay">
            <el-input-number v-model="ruleForm.sendDay" :min="0" placeholder="第几天" />
          </el-form-item>
          <!-- <el-form-item label="内容类别" prop="contentType">
            <el-input v-model="ruleForm.contentType" placeholder="请输入内容类别" />
          </el-form-item> -->
          <el-form-item label="发送提示词" prop="prompt">
            <el-input v-model="ruleForm.prompt" type="textarea" :rows="3" placeholder="发送提示词" />
          </el-form-item>
          <el-form-item label="条件" prop="rule">
            <el-select v-model="ruleForm.rule" placeholder="请选择条件" style="width: 30%;">
              <el-option label="已回复消息" value="replied" />
              <el-option label="未回复消息" value="unreplied" />
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="sortOrder">
            <el-input-number v-model="ruleForm.sortOrder" :min="0" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRuleForm">保存规则</el-button>
            <el-button @click="ruleFormVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listTemplate, getTemplate, addTemplate, updateTemplate, delTemplate } from '../../api/aiAddwxSop/api'
import { listTemplateNode, addTemplateNode, updateTemplateNode, delTemplateNode } from '../../api/aiAddwxSop/api'
import { listTemplateNodeRule, addTemplateNodeRule, updateTemplateNodeRule, delTemplateNodeRule } from '../../api/aiAddwxSop/api'

export default {
  name: 'AiAddwxSopTemplate',
  data() {
    return {
      loading: true,
      showSearch: true,
      total: 0,
      templateList: [],
      templateNodes: [],
      ids: [],
      title: '',
      open: false,
      nodeDesignOpen: false,
      nodeFormOpen: false,
      currentTemplate: {},
      ruleDialogOpen: false,
      currentRuleNode: {},
      nodeTypeOptions: [],
      nodeRules: [],
      ruleForm: {},
      ruleFormVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        templateName: null,
        status: null
      },
      form: {},
      nodeForm: {},
      rules: {
        templateName: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }]
      },
      statusOptions: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    }
  },
  computed: {
    nodeFormTitle() {
      return this.nodeForm.nodeId ? '编辑节点' : '新增节点'
    },
    ruleFormTitle() {
      return this.ruleForm.ruleId ? '编辑规则' : '新增规则'
    }
  },
  created() {
    this.getDicts('ai_add_wechat_sop_node').then(response => {
      this.nodeTypeOptions = response.data
    })
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      listTemplate(this.queryParams).then(response => {
        this.templateList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.templateId)
    },
    cancel() {
      this.open = false
      this.reset()
    },
    reset() {
      this.form = {}
      this.resetForm('form')
    },
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '新增模板'
      this.form.status = 1
    },
    handleUpdate(row) {
      this.reset()
      this.open = true
      this.title = '修改模板'
      this.form = { ...row }
    },
    handleDelete(row) {
      const templateIds = row.templateId
      this.$confirm('确认删除模板"' + row.templateName + '"吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return delTemplate(templateIds)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      })
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.templateId != null) {
            updateTemplate(this.form).then(() => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addTemplate(this.form).then(() => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    // 节点设计
    handleNodeDesign(row) {
      this.currentTemplate = row
      this.nodeDesignOpen = true
      this.nodeForm = {}
      this.nodeForm.templateId = row.templateId
    },
    loadTemplateNodes() {
      listTemplateNode(this.currentTemplate.templateId).then(response => {
        this.templateNodes = response.data || []
      })
    },
    getNodeTypeName(type) {
      const dict = this.nodeTypeOptions.find(d => d.dictValue === type)
      return dict ? dict.dictLabel : type
    },
    getNodeTypeTag(type) {
      const map = {
        'receive': 'success',
        'medication': 'warning',
        'effect_feedback': 'info',
        'transfer_ai': 'danger'
      }
      return map[type] || ''
    },
    getPrevNodeLabel(prevNodeId) {
      const node = this.templateNodes.find(n => n.nodeId === prevNodeId)
      return node ? node.nodeName + ' (ID:' + node.nodeId + ')' : 'ID:' + prevNodeId
    },
    handleAddNode() {
      this.nodeForm = {
        templateId: this.currentTemplate.templateId,
        sortOrder: this.templateNodes.length + 1
      }
      this.nodeFormOpen = true
    },
    handleEditNode(row) {
      this.nodeForm = { ...row, templateId: this.currentTemplate.templateId }
      this.nodeFormOpen = true
    },
    handleDeleteNode(row) {
      this.$confirm('确认删除节点"' + row.nodeName + '"吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return delTemplateNode(row.nodeId)
      }).then(() => {
        this.loadTemplateNodes()
        this.msgSuccess('删除成功')
      })
    },
    submitNodeForm() {
      if (this.nodeForm.nodeId) {
        updateTemplateNode(this.nodeForm).then(() => {
          this.msgSuccess('修改成功')
          this.loadTemplateNodes()
          this.nodeForm = {}
          this.nodeFormOpen = false
        })
      } else {
        const templateName = (this.currentTemplate.templateName || 'node').replace(/\s+/g, '_')
        const nodeType = this.nodeForm.nodeType || 'unknown'
        const timestamp = Date.now()
        this.nodeForm.nodeKey = templateName + '_' + nodeType + '_' + timestamp
        addTemplateNode(this.nodeForm).then(() => {
          this.msgSuccess('新增成功')
          this.loadTemplateNodes()
          this.nodeForm = {}
          this.nodeFormOpen = false
        })
      }
    },
    // 节点规则管理
    handleNodeRules(row) {
      this.currentRuleNode = row
      this.ruleDialogOpen = true
      this.ruleForm = {}
      this.ruleFormVisible = false
    },
    loadNodeRules() {
      listTemplateNodeRule(this.currentRuleNode.nodeId).then(response => {
        this.nodeRules = response.data || []
      })
    },
    getMsgTypeName(type) {
      const map = { 1: '普通', 2: '课程', 4: 'AI触达', 5: '打标签', 20: '直播间' }
      return map[type] || type
    },
    getMsgTypeTag(type) {
      const map = { 1: '', 2: 'success', 4: 'warning', 5: 'danger', 20: 'info' }
      return map[type] || ''
    },
    handleAddRule() {
      this.ruleForm = {
        nodeId: this.currentRuleNode.nodeId,
        msgType: 1,
        sortOrder: this.nodeRules.length + 1
      }
      this.ruleFormVisible = true
    },
    handleEditRule(row) {
      this.ruleForm = { ...row }
      if (row.contentJson) {
        try {
          const parsed = JSON.parse(row.contentJson)
          this.ruleForm.prompt = parsed.prompt || ''
          this.ruleForm.rule = parsed.rule || ''
        } catch (e) {
          this.ruleForm.prompt = ''
          this.ruleForm.rule = ''
        }
      }
      this.ruleFormVisible = true
    },
    handleDeleteRule(row) {
      this.$confirm('确认删除规则"' + row.ruleName + '"吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return delTemplateNodeRule(row.ruleId)
      }).then(() => {
        this.loadNodeRules()
        this.msgSuccess('删除成功')
      })
    },
    submitRuleForm() {
      this.ruleForm.contentJson = JSON.stringify({
        prompt: this.ruleForm.prompt || '',
        rule: this.ruleForm.rule || ''
      })
      if (this.ruleForm.ruleId) {
        updateTemplateNodeRule(this.ruleForm).then(() => {
          this.msgSuccess('修改成功')
          this.loadNodeRules()
          this.ruleForm = {}
          this.ruleFormVisible = false
        })
      } else {
        addTemplateNodeRule(this.ruleForm).then(() => {
          this.msgSuccess('新增成功')
          this.loadNodeRules()
          this.ruleForm = {}
          this.ruleFormVisible = false
        })
      }
    }
  }
}
</script>

<style scoped>
.node-panel {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 15px;
  min-height: 300px;
}
.node-panel h4 {
  margin: 0 0 10px 0;
}
</style>