提交

jy-ui/src/components/flow/PropertySetting/end.vue

@@ -1,47 +1,43 @@
 <template>
-  <div>
-    <el-form ref="formRef" :model="form" label-width="120px" size="small" :disabled="disabled">
-      <slot name="form-item-task-name" :model="form" field="nodeCode">
-        <el-form-item label="节点编码">
-          <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
-        </el-form-item>
-      </slot>
-      <slot name="form-item-task-name" :model="form" field="nodeName">
-        <el-form-item label="节点名称">
-          <el-input v-model="form.nodeName" :disabled="disabled"></el-input>
-        </el-form-item>
-      </slot>
-    </el-form>
-  </div>
+  <a-form v-model="computedModelValue" :config="config" :disabled="disabled" :span="24"> </a-form>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default() {
-      return {}
-    }
+import AForm from '@/components/AForm/index.vue'
+import { StrAnyObj } from '@/typings'
+import { FormConfigType } from '@/components/AForm/type'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: StrAnyObj
+    disabled: boolean
+  }>(),
+  {
+    disabled: false
+  }
+)
+
+const emits = defineEmits(['update:modelValue'])
+
+const computedModelValue = computed({
+  get() {
+    return props.modelValue
   },
-  disabled: {
-    // 是否禁止
-    type: Boolean,
-    default: false
+  set(newValue) {
+    emits('update:modelValue', newValue)
   }
 })
 
-const form = ref(props.modelValue)
-const emit = defineEmits(['change'])
-
-watch(
-  () => form,
-  (n) => {
-    if (n) {
-      emit('change', n)
-    }
+const config: FormConfigType[] = [
+  {
+    type: 'input',
+    prop: 'nodeCode',
+    label: '节点编码'
   },
-  { deep: true }
-)
+  {
+    type: 'input',
+    prop: 'nodeName',
+    label: '节点名称'
+  }
+]
 </script>
-
-<style scoped></style>

jy-ui/src/components/flow/PropertySetting/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-dialog :title="title" v-model="drawer" @close="handleClose">
+    <a-dialog :title="title" v-model="drawer" @close="handleClose" :footer="false">
       <component
         :is="componentType"
         v-model="form"
@@ -206,19 +206,19 @@ watch(
     })
   }
 )
+
 watch(
-  () => form.value.listenerType,
+  () => form.value.listenerTypeArr,
   (n) => {
     // 确保 n 是一个数组
     if (!Array.isArray(n)) {
       n = [n] // 将 n 转换为数组
     }
 
-    // 将数组元素连接为字符串
-    let listenerTypeStr = n.join(',')
     // 监听监听器类型变化并更新
     props.lf.setProperties(objId.value, {
-      listenerType: listenerTypeStr
+      listenerTypeArr: n,
+      listenerType: n.join(',')
     })
   }
 )

jy-ui/src/components/flow/PropertySetting/parallel.vue

@@ -1,47 +1,43 @@
 <template>
-  <div>
-    <el-form ref="formRef" :model="form" label-width="120px" size="small" :disabled="disabled">
-      <slot name="form-item-task-name" :model="form" field="nodeCode">
-        <el-form-item label="节点编码">
-          <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
-        </el-form-item>
-      </slot>
-      <slot name="form-item-task-name" :model="form" field="nodeName">
-        <el-form-item label="节点名称">
-          <el-input v-model="form.nodeName" :disabled="disabled"></el-input>
-        </el-form-item>
-      </slot>
-    </el-form>
-  </div>
+  <a-form v-model="computedModelValue" :config="config" :disabled="disabled" :span="24"> </a-form>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default() {
-      return {}
-    }
+import AForm from '@/components/AForm/index.vue'
+import { StrAnyObj } from '@/typings'
+import { FormConfigType } from '@/components/AForm/type'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: StrAnyObj
+    disabled: boolean
+  }>(),
+  {
+    disabled: false
+  }
+)
+
+const emits = defineEmits(['update:modelValue'])
+
+const computedModelValue = computed({
+  get() {
+    return props.modelValue
   },
-  disabled: {
-    // 是否禁止
-    type: Boolean,
-    default: false
+  set(newValue) {
+    emits('update:modelValue', newValue)
   }
 })
 
-const form = ref(props.modelValue)
-const emit = defineEmits(['change'])
-
-watch(
-  () => form,
-  (n) => {
-    if (n) {
-      emit('change', n)
-    }
+const config: FormConfigType[] = [
+  {
+    type: 'input',
+    prop: 'nodeCode',
+    label: '节点编码'
   },
-  { deep: true }
-)
+  {
+    type: 'input',
+    prop: 'nodeName',
+    label: '节点名称'
+  }
+]
 </script>
-
-<style scoped></style>

jy-ui/src/components/flow/PropertySetting/serial.vue

@@ -1,47 +1,43 @@
 <template>
-  <div>
-    <el-form ref="formRef" :model="form" label-width="120px" size="small" :disabled="disabled">
-      <slot name="form-item-task-name" :model="form" field="nodeCode">
-        <el-form-item label="节点编码">
-          <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
-        </el-form-item>
-      </slot>
-      <slot name="form-item-task-name" :model="form" field="nodeName">
-        <el-form-item label="节点名称">
-          <el-input v-model="form.nodeName" :disabled="disabled"></el-input>
-        </el-form-item>
-      </slot>
-    </el-form>
-  </div>
+  <a-form v-model="computedModelValue" :config="config" :disabled="disabled" :span="24"> </a-form>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default() {
-      return {}
-    }
+import AForm from '@/components/AForm/index.vue'
+import { StrAnyObj } from '@/typings'
+import { FormConfigType } from '@/components/AForm/type'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: StrAnyObj
+    disabled: boolean
+  }>(),
+  {
+    disabled: false
+  }
+)
+
+const emits = defineEmits(['update:modelValue'])
+
+const computedModelValue = computed({
+  get() {
+    return props.modelValue
   },
-  disabled: {
-    // 是否禁止
-    type: Boolean,
-    default: false
+  set(newValue) {
+    emits('update:modelValue', newValue)
   }
 })
 
-const form = ref(props.modelValue)
-const emit = defineEmits(['change'])
-
-watch(
-  () => form,
-  (n) => {
-    if (n) {
-      emit('change', n)
-    }
+const config: FormConfigType[] = [
+  {
+    type: 'input',
+    prop: 'nodeCode',
+    label: '节点编码'
   },
-  { deep: true }
-)
+  {
+    type: 'input',
+    prop: 'nodeName',
+    label: '节点名称'
+  }
+]
 </script>
-
-<style scoped></style>

jy-ui/src/components/flow/PropertySetting/skip.vue

@@ -1,106 +1,125 @@
 <template>
-  <div>
-    <el-form ref="formRef" :model="form" label-width="120px" size="small" :disabled="disabled">
-      <slot name="form-item-task-skipName" v-if="skipConditionShow" :model="form" field="skipName">
-        <el-form-item label="跳转名称">
-          <el-input v-model="form.skipName" placeholder="跳转名称" />
-        </el-form-item>
-      </slot>
-      <slot name="form-item-task-skipType" :model="form" field="skipType">
-        <el-form-item label="跳转类型">
-          <el-select v-model="form.skipType">
-            <el-option sel label="审批通过" value="PASS" />
-            <el-option label="退回" value="REJECT" />
-          </el-select>
-        </el-form-item>
-      </slot>
-      <slot
-        name="form-item-task-skipCondition"
-        v-if="skipConditionShow"
-        :model="form"
-        field="skipCondition"
-      >
-        <el-form-item label="跳转条件">
-          <el-input
-            v-model="form.condition"
-            v-if="!spelFlag"
-            placeholder="条件名"
-            style="width: 20%"
-          />
-          <el-select
-            v-model="form.conditionType"
-            placeholder="请选择条件方式"
-            style="width: 35%; margin-left: 1%"
-            @change="changeOper"
-          >
-            <el-option label="大于" value="gt" />
-            <el-option label="大于等于" value="ge" />
-            <el-option label="等于" value="eq" />
-            <el-option label="不等于" value="ne" />
-            <el-option label="小于" value="lt" />
-            <el-option label="小于等于" value="le" />
-            <el-option label="包含" value="like" />
-            <el-option label="不包含" value="notNike" />
-            <el-option label="spel表达式" value="spel" />
-          </el-select>
-          <el-input
-            v-model="form.conditionValue"
-            placeholder="条件值"
-            style="width: 42%; margin-left: 1%; margin-right: 1%"
-          />
-        </el-form-item>
-      </slot>
-    </el-form>
-  </div>
+  <a-form v-model="computedModelValue" :config="config" :disabled="disabled" :span="24"> </a-form>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default() {
-      return {}
-    }
-  },
-  disabled: {
-    // 是否禁止
-    type: Boolean,
-    default: false
+import AForm from '@/components/AForm/index.vue'
+import { StrAnyObj } from '@/typings'
+import { FormConfigType } from '@/components/AForm/type'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: StrAnyObj
+    disabled: boolean
+    skipConditionShow: boolean
+  }>(),
+  {
+    disabled: false,
+    skipConditionShow: true
+  }
+)
+
+const emits = defineEmits(['update:modelValue'])
+
+const computedModelValue = computed({
+  get() {
+    return props.modelValue
   },
-  skipConditionShow: {
-    // 是否显示跳转条件
-    type: Boolean,
-    default: true
+  set(newValue) {
+    emits('update:modelValue', newValue)
   }
 })
 
-const spelFlag = ref(false)
-const form = ref(props.modelValue)
-const emit = defineEmits(['change'])
-
 watch(
-  () => form,
+  computedModelValue.value,
   (n) => {
-    n = n.value
-    let skipCondition = n.skipCondition
-    skipCondition = '@@' + n.conditionType + '@@|'
+    let skipCondition = '@@' + n.conditionType + '@@|'
     if (n.conditionType !== 'spel') {
       skipCondition =
         skipCondition + (n.condition ? n.condition : '') + '@@' + n.conditionType + '@@'
     }
     n.skipCondition = skipCondition + (n.conditionValue ? n.conditionValue : '')
-    if (n) {
-      emit('change', n)
-    }
   },
   { deep: true }
 )
 
-function changeOper(obj) {
-  spelFlag.value = obj === 'spel'
-}
-
-if (props.modelValue?.conditionType === 'spel') spelFlag.value = true
+const config: FormConfigType[] = [
+  {
+    type: 'input',
+    prop: 'skipName',
+    label: '跳转名称',
+    if: () => props.skipConditionShow
+  },
+  {
+    type: 'radio',
+    prop: 'skipType',
+    label: '跳转类型',
+    option: [
+      {
+        key: 'PASS',
+        label: '审批通过'
+      },
+      {
+        key: 'REJECT',
+        label: '退回'
+      }
+    ]
+  },
+  {
+    type: 'input',
+    prop: 'condition',
+    label: '跳转条件名',
+    if: () => props.skipConditionShow && computedModelValue.value.conditionType != 'spel'
+  },
+  {
+    type: 'select',
+    prop: 'conditionType',
+    label: '条件方式',
+    option: [
+      {
+        key: 'gt',
+        label: '大于'
+      },
+      {
+        key: 'ge',
+        label: '大于等于'
+      },
+      {
+        key: 'eq',
+        label: '等于'
+      },
+      {
+        key: 'ne',
+        label: '不等于'
+      },
+      {
+        key: 'lt',
+        label: '小于'
+      },
+      {
+        key: 'le',
+        label: '小于等于'
+      },
+      {
+        key: 'like',
+        label: '包含'
+      },
+      {
+        key: 'notNike',
+        label: '不包含'
+      },
+      {
+        key: 'spel',
+        label: 'spel表达式'
+      }
+    ],
+    if: () => props.skipConditionShow
+  },
+  {
+    type: 'input',
+    prop: 'conditionValue',
+    label: '条件值',
+    if: () => props.skipConditionShow
+  }
+]
 </script>
-
-<style scoped></style>

jy-ui/src/components/flow/PropertySetting/start.vue

@@ -1,77 +1,63 @@
 <template>
-  <div>
-    <el-form ref="formRef" :model="form" label-width="120px" size="small" :disabled="disabled">
-      <slot name="form-item-task-name" :model="form" field="nodeCode">
-        <el-form-item label="节点编码">
-          <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
-        </el-form-item>
-      </slot>
-      <slot name="form-item-task-name" :model="form" field="nodeName">
-        <el-form-item label="节点名称">
-          <el-input v-model="form.nodeName" :disabled="disabled"></el-input>
-        </el-form-item>
-      </slot>
-      <slot name="form-item-task-listenerType" :model="form" field="listenerType">
-        <el-form-item label="监听器类型">
-          <el-select v-model="form.listenerType" multiple>
-            <el-option label="任务创建" value="create"></el-option>
-            <el-option label="任务开始办理" value="start"></el-option>
-            <el-option label="分派监听器" value="assignment"></el-option>
-            <el-option label="权限认证" value="permission"></el-option>
-            <el-option label="任务完成" value="finish"></el-option>
-          </el-select>
-        </el-form-item>
-      </slot>
-      <slot name="form-item-task-listenerPath" :model="form" field="listenerPath">
-        <el-form-item
-          label="监听器路径"
-          description="输入监听器的路径，以@@分隔,顺序与监听器类型一致"
-        >
-          <el-input type="textarea" v-model="form.listenerPath" rows="8"></el-input>
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="输入监听器的路径，以@@分隔，顺序与监听器类型一致"
-          >
-            <i class="el-icon-question"></i>
-          </el-tooltip>
-        </el-form-item>
-      </slot>
-    </el-form>
-  </div>
+  <a-form v-model="computedModelValue" :config="config" :disabled="disabled" :span="24"> </a-form>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default() {
-      return {}
-    }
-  },
-  disabled: {
-    // 是否禁止
-    type: Boolean,
-    default: false
+import AForm from '@/components/AForm/index.vue'
+import { StrAnyObj } from '@/typings'
+import { FormConfigType } from '@/components/AForm/type'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: StrAnyObj
+    disabled: boolean
+  }>(),
+  {
+    disabled: false
   }
-})
+)
 
-const form = ref(props.modelValue)
-const emit = defineEmits(['change'])
+const emits = defineEmits(['update:modelValue'])
 
-watch(
-  () => form,
-  (n) => {
-    if (n) {
-      emit('change', n)
-    }
+const computedModelValue = computed({
+  get() {
+    return props.modelValue
   },
-  { deep: true }
-)
+  set(newValue) {
+    emits('update:modelValue', newValue)
+  }
+})
 
-if (form.value.listenerType) {
-  form.value.listenerType = form.value.listenerType.split(',')
-}
+const config: FormConfigType[] = [
+  {
+    type: 'input',
+    prop: 'nodeCode',
+    label: '节点编码'
+  },
+  {
+    type: 'input',
+    prop: 'nodeName',
+    label: '节点名称'
+  },
+  {
+    type: 'select',
+    prop: 'listenerTypeArr',
+    label: '监听器类型',
+    multiple: true,
+    option: [
+      { key: 'create', label: '任务创建' },
+      { key: 'start', label: '任务开始办理' },
+      { key: 'assignment', label: '分派监听器' },
+      { key: 'permission', label: '权限认证' },
+      { key: 'finish', label: '任务完成' }
+    ]
+  },
+  {
+    type: 'input',
+    itemType: 'textarea',
+    prop: 'listenerPath',
+    label: '监听器路径',
+    rows: 8
+  }
+]
 </script>
-
-<style scoped></style>

jy-ui/src/views/flow/definition/design.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-dialog v-model="visible" title="流程设计" width="1200px">
+  <a-dialog v-model="visible" title="流程设计" width="1200px" :footer="false">
     <div class="container" ref="containerRef">
       <PropertySetting
         ref="propertySettingRef"

jy-ui/src/views/flow/definition/index.vue

@@ -105,7 +105,7 @@ const columnConfig: ColumnConfigType[] = [
     label: '创建时间'
   },
   {
-    width: 200,
+    width: 500,
     handleConfig: [
       {
         text: '流程设计',