cfc/cfc-frontend/pages/orchestration/editor.vue

<template>
  <view class="container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>

    <!-- 表单内容 -->
    <view v-else class="form-container">
      <!-- 基本信息 -->
      <view class="section">
        <view class="section-title">基本信息</view>
        <view class="form-item">
          <text class="label">流程名称 <text class="required">*</text></text>
          <input v-model="flowName" class="input" placeholder="请输入流程名称" />
        </view>
        <view class="form-item">
          <text class="label">流程描述</text>
          <textarea v-model="flowDescription" class="textarea" placeholder="可选，描述流程用途" />
        </view>
      </view>

      <!-- 节点列表 -->
      <view class="section">
        <view class="section-title">
          <text>任务节点</text>
          <text class="node-count">{{ nodes.length }} 个节点</text>
        </view>

        <!-- 节点列表 -->
        <view v-for="(node, index) in nodes" :key="'node-' + index" class="node-item">
          <view class="node-header">
            <view class="node-order">
              <text class="order-num">{{ index + 1 }}</text>
            </view>
            <view class="node-info">
              <text class="node-template">{{ getNodeTemplateName(node) }}</text>
              <text class="node-id">{{ node.id }}</text>
            </view>
            <view class="node-actions">
              <button class="btn-icon" @click="handleEditNode(node)">✏️</button>
              <button class="btn-icon btn-delete" @click="handleDeleteNode(index)">🗑️</button>
              <button v-if="index > 0" class="btn-icon" @click="handleMoveNode(index, -1)">↑</button>
              <button v-if="index < nodes.length - 1" class="btn-icon" @click="handleMoveNode(index, 1)">↓</button>
            </view>
          </view>
          <view class="node-preview">
            <text class="node-title">{{ node.title }}</text>
          </view>
        </view>

        <!-- 添加节点按钮 -->
        <view class="add-node-btn" @click="showNodePicker">
          <text class="add-icon">+</text>
          <text>添加任务节点</text>
        </view>
      </view>

      <!-- 触发条件设置 -->
      <view class="section" v-if="nodes.length > 1">
        <view class="section-title">触发条件</view>
        <view class="condition-hint">
          <text>每个节点将在前一个节点完成后自动触发</text>
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="action-bar">
        <button class="btn-save" @click="handleSaveDraft">保存草稿</button>
        <button v-if="!isDraft" class="btn-publish" @click="handlePublish">发布</button>
      </view>
    </view>

    <!-- 节点选择弹窗 -->
    <view v-if="showNodePickerFlag" class="modal-mask" @click="showNodePickerFlag = false">
      <view class="modal modal-large" @click.stop>
        <view class="modal-header">
          <text class="modal-title">选择任务模板</text>
          <button class="btn-close" @click="showNodePickerFlag = false">×</button>
        </view>
        <view class="search-box">
          <input v-model="templateSearch" class="search-input" placeholder="搜索模板..." />
        </view>
        <scroll-view scroll-y class="template-list">
          <view
            v-for="tpl in filteredTemplates"
            :key="tpl.id"
            class="template-item"
            @click="addNodeFromTemplate(tpl)"
          >
            <text class="tpl-name">{{ tpl.title }}</text>
            <text class="tpl-points">+{{ tpl.points || 2 }}分</text>
          </view>
          <view v-if="filteredTemplates.length === 0" class="empty">
            <text>无匹配模板</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 节点编辑弹窗 -->
    <view v-if="showNodeEditFlag" class="modal-mask" @click="closeNodeEdit">
      <view class="modal modal-large" @click.stop>
        <view class="modal-header">
          <text class="modal-title">编辑节点</text>
          <button class="btn-close" @click="closeNodeEdit">×</button>
        </view>
        <view class="form-container">
          <view class="form-item">
            <text class="label">任务标题</text>
            <input v-model="editNode.title" class="input" placeholder="输入任务标题" />
          </view>
          <view class="form-item">
            <text class="label">超时时间（分钟）</text>
            <input v-model="editNode.timeout_minutes" class="input" type="number" placeholder="0表示不限制" />
          </view>
          <view class="form-item">
            <text class="label">最大循环次数</text>
            <input v-model="editNode.max_loops" class="input" type="number" placeholder="0表示不限制" />
          </view>
          <view class="form-item">
            <text class="label">执行人</text>
            <picker :range="executorTypes" @change="onExecutorChange">
              <view class="picker">{{ executorLabels[editNode.executorType] || '请选择' }}</view>
            </picker>
          </view>
        </view>
        <view class="action-bar">
          <button class="btn-save" @click="saveNodeEdit">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrchestrationFlowDetail, saveOrchestrationFlow, publishOrchestrationFlow, getNodeTemplateList } from '../../utils/api.js'

let _nodeSeq = 0

export default {
  data() {
    return {
      flowId: null,
      flowName: '',
      flowDescription: '',
      nodes: [],
      templates: [],
      templateSearch: '',
      showNodePickerFlag: false,
      showNodeEditFlag: false,
      editNode: null,
      loading: false,
      executorTypes: ['child', 'member'],
      executorLabels: { child: '孩子', member: '家庭成员' }
    }
  },
  computed: {
    isDraft() {
      return this.flowId === null
    },
    filteredTemplates() {
      if (!this.templateSearch) return this.templates
      var kw = this.templateSearch.toLowerCase()
      return this.templates.filter(function(t) {
        return t.title.indexOf(kw) >= 0
      })
    }
  },
  onLoad(options) {
    var id = options.id ? Number(options.id) : null
    if (id) {
      this.flowId = id
      this.loadFlowDetail(id)
    } else {
      this.flowId = null
      this.initEmptyForm()
    }
    this.loadTemplates()
  },
  methods: {
    initEmptyForm() {
      this.flowName = ''
      this.flowDescription = ''
      this.nodes = []
      _nodeSeq = 0
    },
    async loadFlowDetail(id) {
      this.loading = true
      try {
        var res = await getOrchestrationFlowDetail(id)
        var flow = res.data.flow
        if (flow) {
          this.flowName = flow.name || ''
          this.flowDescription = flow.description || ''
          // 解析 configJson
          if (flow.configJson) {
            var cfg = JSON.parse(flow.configJson)
            this.nodes = (cfg.nodes || []).map(function(n) {
              return {
                id: n.id,
                task_template_ref: n.task_template_ref,
                title: n.title || '',
                executorType: n.executorType || 'child',
                timeout_minutes: n.timeout_minutes || 0,
                max_loops: n.max_loops || 0
              }
            })
            _nodeSeq = this.nodes.length
          }
        }
      } catch (e) {
        console.error('加载流程详情失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    async loadTemplates() {
      try {
        var res = await getNodeTemplateList({ page: 1, pageSize: 100 })
        this.templates = res.data.list || []
      } catch (e) {
        console.error('加载模板失败', e)
        this.templates = []
      }
    },
    getNodeTemplateName(node) {
      if (!node.task_template_ref) return '未选择模板'
      var tpl = this.templates.find(function(t) { return t.id === Number(node.task_template_ref) })
      return tpl ? tpl.title : ('模板#' + node.task_template_ref)
    },
    showNodePicker() {
      this.showNodePickerFlag = true
      this.templateSearch = ''
    },
    addNodeFromTemplate(tpl) {
      _nodeSeq += 1
      var node = {
        id: 'n' + _nodeSeq,
        task_template_ref: tpl.id,
        title: tpl.title,
        executorType: 'child',
        timeout_minutes: 0,
        max_loops: 0
      }
      this.nodes.push(node)
      this.showNodePickerFlag = false
      uni.showToast({ title: '已添加节点', icon: 'success' })
    },
    handleEditNode(node) {
      this.editNode = JSON.parse(JSON.stringify(node))
      this.showNodeEditFlag = true
    },
    closeNodeEdit() {
      this.showNodeEditFlag = false
      this.editNode = null
    },
    saveNodeEdit() {
      if (!this.editNode) return
      var idx = this.nodes.findIndex(function(n) { return n.id === this.editNode.id })
      if (idx >= 0) {
        this.$set(this.nodes, idx, JSON.parse(JSON.stringify(this.editNode)))
      }
      this.closeNodeEdit()
    },
    onExecutorChange(e) {
      var idx = e.detail.value
      if (this.editNode) {
        this.editNode.executorType = this.executorTypes[idx]
      }
    },
    handleDeleteNode(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个节点吗？',
        success: (res) => {
          if (res.confirm) {
            this.nodes.splice(index, 1)
          }
        }
      })
    },
    handleMoveNode(index, direction) {
      var newIndex = index + direction
      if (newIndex < 0 || newIndex >= this.nodes.length) return
      var temp = this.nodes[index]
      this.$set(this.nodes, index, this.nodes[newIndex])
      this.$set(this.nodes, newIndex, temp)
    },
    validateBeforeSave() {
      var errs = []
      if (!this.flowName.trim()) errs.push('请填写流程名称')
      if (this.nodes.length === 0) errs.push('请至少添加一个任务节点')
      if (this.nodes.some(function(n) { return !n.task_template_ref })) {
        errs.push('存在未绑定任务模板的节点')
      }
      return errs
    },
    async handleSaveDraft() {
      var errs = this.validateBeforeSave()
      if (errs.length > 0) {
        uni.showToast({ title: errs[0], icon: 'none' })
        return
      }
      uni.showLoading({ title: '保存中...' })
      try {
        var cfg = {
          nodes: this.nodes.map(function(n) {
            return {
              id: n.id,
              task_template_ref: String(n.task_template_ref),
              title: n.title,
              executorType: n.executorType,
              timeout_minutes: n.timeout_minutes,
              max_loops: n.max_loops
            }
          })
        }
        var res = await saveOrchestrationFlow({
          id: this.flowId,
          name: this.flowName,
          description: this.flowDescription,
          configJson: JSON.stringify(cfg)
        })
        this.flowId = res.data.id || this.flowId
        uni.hideLoading()
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(function() {
          uni.navigateBack()
        }, 1000)
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '保存失败', icon: 'none' })
      }
    },
    async handlePublish() {
      var errs = this.validateBeforeSave()
      if (errs.length > 0) {
        uni.showToast({ title: errs[0], icon: 'none' })
        return
      }
      // 先保存
      uni.showLoading({ title: '发布中...' })
      try {
        var cfg = {
          nodes: this.nodes.map(function(n) {
            return {
              id: n.id,
              task_template_ref: String(n.task_template_ref),
              title: n.title,
              executorType: n.executorType,
              timeout_minutes: n.timeout_minutes,
              max_loops: n.max_loops
            }
          })
        }
        var saveRes = await saveOrchestrationFlow({
          id: this.flowId,
          name: this.flowName,
          description: this.flowDescription,
          configJson: JSON.stringify(cfg)
        })
        this.flowId = saveRes.data.id || this.flowId
        // 再发布
        await publishOrchestrationFlow(this.flowId)
        uni.hideLoading()
        uni.showToast({ title: '发布成功', icon: 'success' })
        setTimeout(function() {
          uni.navigateBack()
        }, 1000)
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '发布失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #F8F8F8;
}
.loading {
  text-align: center;
  padding: 100rpx;
  color: #94A3B8;
}
.form-container {
  padding: 30rpx;
}
.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1E293B;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.node-count {
  font-size: 24rpx;
  color: #94A3B8;
  font-weight: normal;
}
.form-item {
  margin-bottom: 24rpx;
}
.label {
  display: block;
  font-size: 26rpx;
  color: #64748B;
  margin-bottom: 12rpx;
}
.required {
  color: #EF4444;
}
.input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.textarea {
  width: 100%;
  height: 160rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.picker {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  line-height: 80rpx;
}
.node-item {
  background: #F8FAFC;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
}
.node-header {
  display: flex;
  align-items: center;
}
.node-order {
  width: 48rpx;
  height: 48rpx;
  background: #F97316;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}
.order-num {
  font-size: 24rpx;
  font-weight: bold;
}
.node-info {
  flex: 1;
  min-width: 0;
}
.node-template {
  display: block;
  font-size: 26rpx;
  color: #1E293B;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-id {
  display: block;
  font-size: 20rpx;
  color: #94A3B8;
}
.node-actions {
  display: flex;
  gap: 8rpx;
}
.btn-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 8rpx;
  background: #fff;
  border: 1rpx solid #E2E8F0;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn-icon::after { border: none; }
.btn-delete { color: #EF4444; }
.node-preview {
  margin-top: 12rpx;
  padding-left: 64rpx;
}
.node-title {
  font-size: 24rpx;
  color: #64748B;
}
.add-node-btn {
  border: 2rpx dashed #F97316;
  border-radius: 12rpx;
  padding: 28rpx 0;
  text-align: center;
  color: #F97316;
}
.add-icon {
  font-size: 36rpx;
  margin-right: 8rpx;
}
.condition-hint {
  font-size: 24rpx;
  color: #94A3B8;
  padding: 16rpx;
  background: #F8FAFC;
  border-radius: 8rpx;
}
.action-bar {
  padding: 30rpx;
  display: flex;
  gap: 20rpx;
}
.btn-save, .btn-publish {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
}
.btn-save::after, .btn-publish::after { border: none; }
.btn-save { background: #F1F5F9; color: #64748B; }
.btn-publish { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); color: #fff; }
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}
.modal {
  width: 100%;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-large {
  max-height: 80vh;
}
.modal-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1E293B;
}
.btn-close {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #F1F5F9;
  font-size: 32rpx;
  line-height: 56rpx;
  text-align: center;
  padding: 0;
  border: none;
}
.btn-close::after { border: none; }
.search-box {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #E2E8F0;
}
.search-input {
  width: 100%;
  height: 72rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 36rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}
.template-list {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 30rpx;
}
.template-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #F1F5F9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tpl-name {
  font-size: 28rpx;
  color: #1E293B;
}
.tpl-points {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
}
.empty {
  text-align: center;
  padding: 60rpx;
  color: #94A3B8;
}
</style>