big-model-web/src/views/workflow/instance/component/vars/vars-detail.vue

<template>
  <CzrDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    width="500px"
    height="auto"
    maxHeight="80%"
    :loading="state.loading"
    @onSubmit="onSubmit"
  >
    <div class="vars-detail">
      <div class="vars-detail-types">
        <template v-for="item in optionsType">
          <div
            class="__hover"
            :class="{ active: state.form.type === item.type }"
            @click="() => (state.form.type = item.type)"
          >
            {{ item.label }}
          </div>
        </template>
      </div>
      <CzrForm ref="ref_form" class="vars-detail-form" layout="y">
        <CzrFormColumn
          :span="24"
          required
          label="显示名称"
          v-model:param="state.form.label"
        />
        <CzrFormColumn
          :span="24"
          required
          label="变量名称"
          v-model:param="state.form.key"
        />
        <template
          v-if="state.form.type === 'String' || state.form.type === 'Textarea'"
        >
          <CzrFormColumn
            :span="24"
            required
            label="最大长度"
            v-model:param="state.form.length"
          />
        </template>
      </CzrForm>
    </div>
  </CzrDialog>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  nextTick,
  reactive,
  ref,
  watch,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { VarsSource } from '@/views/workflow/types'

const emit = defineEmits(['update:show', 'refresh'])
const { proxy } = getCurrentInstance()

const props = defineProps({
  show: { default: false },
  transfer: <any>{},
})
const state: any = reactive({
  loading: false,
  form: {
    type: 'String',
  },
})
const optionsType = [
  { type: 'String', label: '文本' },
  // {type: 'Textarea', label: '段落'},
  { type: 'Number', label: '数字' },
  // {type: 'Select', label: '下拉选项'},
]
const titleCpt = computed(() => {
  let t = '变量'
  switch (props.transfer.mode) {
    case 'add':
      t = '新增' + t
      break
    case 'edit':
      t = '编辑' + t
      break
  }
  return t
})
const ref_form = ref()
watch(
  () => props.show,
  (n) => {
    if (n) {
      state.form = props.transfer.row || {
        type: 'String',
        source: VarsSource.Param,
      }
      nextTick(() => {
        ref_form.value.reset()
      })
    }
  },
)
const onSubmit = () => {
  ref_form.value
    .submit()
    .then(() => {
      emit('update:show', false)
      const res: any = {
        label: state.form.label,
        key: state.form.key,
        type: state.form.type,
      }
      if (state.form.type === 'String' || state.form.type === 'Textarea') {
        res.length = state.form.length
      }
      emit('refresh', res)
    })
    .catch((e) => {
      ElMessage({
        message: e[0].message,
        grouping: true,
        type: 'warning',
      })
    })
}
</script>

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

.vars-detail {
  padding: 10px 20px 0;
  .vars-detail-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      border: style.$borderStyle;
      border-radius: 8px;
      padding: 20px;
      &.active,
      &:hover {
        border-color: var(--czr-main-color);
        color: var(--czr-main-color);
      }
    }
  }
  .vars-detail-form {
    margin-top: 20px;
  }
}
</style>