big-model-web/src/views/workflow/instance/start/panel/index.vue

<template>
  <div class="panel-block" v-if="state.nodeData">
    <div class="_p-title">
      <div class="text-sm">输入字段</div>
      <CzrButton type="add" title="添加参数" @click="onAddVars" />
    </div>
    <div class="vars">
      <template v-for="(item, index) in state.nodeData.__outVars">
        <div class="item">
          <varsItem
            :item="item"
            :edit="true"
            :del="true"
            @onEdit="onEditVars(item, index)"
            @onDel="onDelVars(item, index)"
          />
        </div>
      </template>
    </div>
    <div class="my-2 h-[1px] w-full bg-[#1018281f]" />
    <div class="vars">
      <template v-for="item in state.nodeData.__sysVars">
        <div class="item">
          <varsItem :item="item" />
        </div>
      </template>
    </div>
  </div>
  <varsDetail
    v-model:show="state.vars.show"
    :transfer="state.vars.transfer"
    @refresh="(val) => setVars(val)"
  />
</template>

<script setup lang="ts">
import { getCurrentInstance, reactive, ref, watch } from 'vue'
import varsItem from '@/views/workflow/instance/component/vars/vars-item.vue'
import varsDetail from '@/views/workflow/instance/component/vars/vars-detail.vue'

const emit = defineEmits([])
const props = defineProps({
  node: <any>{},
})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({
  nodeData: null,
  vars: {
    show: false,
    transfer: {},
  },
})
watch(
  () => props.node,
  (n) => {
    if (n) {
      state.nodeData = n.data.workflowData
    }
  },
  { immediate: true },
)
const onAddVars = () => {
  state.vars.transfer = {
    mode: 'add',
  }
  state.vars.show = true
}
const onEditVars = (row, index) => {
  state.vars.transfer = {
    mode: 'edit',
    row: JSON.parse(JSON.stringify(row)),
    index: index,
  }
  state.vars.show = true
}
const onDelVars = (row, index) => {
  state.nodeData.__outVars.splice(index, 1)
}
const setVars = (val) => {
  if (state.vars.transfer.mode === 'add') {
    state.nodeData.__outVars.push(val)
  } else {
    state.nodeData.__outVars[state.vars.transfer.index] = val
  }
}
</script>

<style lang="scss" scoped>
@use '@/views/workflow/instance/component/style';

.panel-block {
  .vars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    .item {
      padding: 6px 10px;
      border: style.$borderStyle;
      border-radius: 8px;
    }
  }
}
</style>