adtec-core-package 2.1.9 → 2.2.0

package/src/components/bpmntree/views/flowDesign/panels/ParaPanel.vue

@@ -1,248 +1,248 @@
-<script setup lang="ts">
-import type { Field } from '../../../components/Render/type'
-import { inject, ref, type Ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import FlowIcon from '../../../components/FlowIcon'
-import { CloseBold, Plus } from '@element-plus/icons-vue'
-
-const { fields, addFormItem } = inject<{
-  fields: Ref<Field[]>
-  addFormItem: (item: Field) => void
-}>('flowDesign', {
-  fields: ref([]),
-  addFormItem: (item: Field) => {},
-})
-const paraFields = ref<Field[]>([])
-const drawer = ref(false)
-const paraDrawer = ref()
-const addListener = () => {
-  paraFields.value.push({
-    id: '',
-    type: 'formItem',
-    label: '',
-    name: 'ElInput',
-    value: null,
-    readonly: false,
-    required: false,
-    hidden: true,
-    props: {
-      disabled: false,
-      placeholder: '',
-      style: {
-        width: '100%',
-      },
-      multiple: false,
-      options: [{ label: '', value: '' }],
-    },
-  })
-}
-const delListener = (index: number) => {
-  paraFields.value?.splice(index, 1)
-}
-const saveListener = () => {
-  if (paraFields.value.length > 0) {
-    for (let item of paraFields.value) {
-      if (!item.id) {
-        ElMessage.warning('参数编码不能为空！')
-        return
-      } else if (
-        fields.value.findIndex((x) => x.id === item.id) > -1 ||
-        paraFields.value.filter((x) => x.id === item.id).length > 1
-      ) {
-        ElMessage.warning('参数编码不可重复！')
-        return
-      }
-      if (!item.label) {
-        ElMessage.warning('参数名不能为空！')
-        return
-      } else if (
-        fields.value.findIndex((x) => x.label === item.label) > -1 ||
-        paraFields.value.filter((x) => x.label === item.label).length > 1
-      ) {
-        ElMessage.warning('参数名不可重复！')
-        return
-      }
-      //下拉选项处理
-      if (item.name === 'ElSelect') {
-        if (item.props.options?.filter((x: any) => x.label).length > 1) {
-          for (let option of item.props.options) {
-            option.value = option.label
-          }
-          item.props.options = item.props.options.filter((x: any) => x.label)
-        } else {
-          ElMessage.warning('至少需要两个选项！')
-          return
-        }
-      } else {
-        if ('options' in item.props) {
-          delete item.props.options
-        }
-        if ('multiple' in item.props) {
-          delete item.props.multiple
-        }
-      }
-    }
-    paraFields.value.forEach((item) => {
-      item.id = 'field_' + item.id
-      addFormItem(item)
-    })
-    paraDrawer.value.handleClose()
-  }
-}
-
-function generateRandomString(length = 6) {
-  let result = ''
-  while (result.length < length) {
-    result += Math.random().toString(36).substring(2)
-  }
-  return result.substring(0, length)
-}
-
-// function addOption(index: number) {
-//   options.value.splice(index, 0, '')
-// }
-//
-// function delOption(index: number) {
-//   options.value.splice(index, 1)
-// }
-
-const onOpen = () => {
-  console.log('onOpen')
-  paraFields.value = []
-  addListener()
-}
-</script>
-
-<template>
-  <div>
-    <slot>
-      <el-button type="primary" icon="Plus" style="width: 100%" @click="drawer = true"
-        >添加参数
-      </el-button>
-    </slot>
-    <el-drawer
-      ref="paraDrawer"
-      v-model="drawer"
-      title="新增流程参数"
-      size="500"
-      @open="onOpen"
-      :close-on-click-modal="true"
-    >
-      <div style="padding-top: 5px">
-        <el-button
-          v-if="paraFields.length > 0"
-          @click="saveListener"
-          style="width: 100%"
-          type="success"
-        >
-          <template #icon>
-            <flow-icon name="save"></flow-icon>
-          </template>
-          保存
-        </el-button>
-        <div v-for="(item, index) in paraFields" :key="index" class="listener-box">
-          <el-button
-            class="listener-close"
-            @click="delListener(index)"
-            plain
-            circle
-            icon="CloseBold"
-            size="small"
-            type="danger"
-          />
-          <el-form-item label="类型" label-position="top">
-            <el-radio-group v-model="item.name">
-              <el-radio-button label="字符串" value="ElInput" />
-              <el-radio-button label="数字" value="ElInputNumber" />
-              <el-radio-button label="下拉选择" value="ElSelect" />
-              <el-radio-button label="人员" value="UserSelector" />
-              <el-radio-button label="角色" value="RoleSelector" />
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="参数编码" required label-position="top">
-            <el-input v-model="item.id" placeholder="请输入参数编码" clearable>
-              <template #prepend>field_</template>
-            </el-input>
-          </el-form-item>
-          <el-form-item label="参数名" required label-position="top">
-            <el-input v-model="item.label" placeholder="请输入参数名" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="是否多选" label-position="top" v-if="item.name === 'ElSelect'">
-            <el-radio-group v-model="item.props.multiple">
-              <el-radio-button label="否" :value="false" />
-              <el-radio-button label="是" :value="true" />
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="选择项" label-position="top" v-if="item.name === 'ElSelect'">
-            <el-row
-              style="width: 100%; margin-bottom: 5px"
-              justify="space-between"
-              align="middle"
-              v-for="(obj, objIndex) in item.props.options"
-              :key="objIndex"
-            >
-              <el-col :span="18">
-                <el-input
-                  v-model="item.props.options[objIndex].label"
-                  placeholder="请输入选项文本"
-                ></el-input>
-              </el-col>
-              <el-col :span="6">
-                <el-button
-                  size="small"
-                  type="primary"
-                  text
-                  :icon="Plus"
-                  @click="item.props.options.splice(objIndex + 1, 0, { label: '', value: '' })"
-                ></el-button>
-                <el-button
-                  size="small"
-                  type="danger"
-                  text
-                  :icon="CloseBold"
-                  style="margin-left: 0"
-                  @click="
-                    item.props.options.length > 1 ? item.props.options.splice(objIndex, 1) : {}
-                  "
-                ></el-button>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </div>
-        <el-button
-          @click="addListener"
-          style="width: 100%; margin-top: 10px; margin-left: 0"
-          type="primary"
-          icon="Plus"
-          >添加参数
-        </el-button>
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.listener-box {
-  border: 1px dashed var(--el-border-color);
-  border-radius: var(--el-border-radius-base);
-  margin-top: 10px;
-  padding: 7px;
-  position: relative;
-
-  &:hover {
-    border-color: var(--el-color-primary);
-
-    .listener-close {
-      display: block;
-    }
-  }
-
-  .listener-close {
-    position: absolute;
-    top: -7px;
-    right: -7px;
-    z-index: 1;
-    display: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import type { Field } from '../../../components/Render/type'
+import { inject, ref, type Ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import FlowIcon from '../../../components/FlowIcon'
+import { CloseBold, Plus } from '@element-plus/icons-vue'
+
+const { fields, addFormItem } = inject<{
+  fields: Ref<Field[]>
+  addFormItem: (item: Field) => void
+}>('flowDesign', {
+  fields: ref([]),
+  addFormItem: (item: Field) => {},
+})
+const paraFields = ref<Field[]>([])
+const drawer = ref(false)
+const paraDrawer = ref()
+const addListener = () => {
+  paraFields.value.push({
+    id: '',
+    type: 'formItem',
+    label: '',
+    name: 'ElInput',
+    value: null,
+    readonly: false,
+    required: false,
+    hidden: true,
+    props: {
+      disabled: false,
+      placeholder: '',
+      style: {
+        width: '100%',
+      },
+      multiple: false,
+      options: [{ label: '', value: '' }],
+    },
+  })
+}
+const delListener = (index: number) => {
+  paraFields.value?.splice(index, 1)
+}
+const saveListener = () => {
+  if (paraFields.value.length > 0) {
+    for (let item of paraFields.value) {
+      if (!item.id) {
+        ElMessage.warning('参数编码不能为空！')
+        return
+      } else if (
+        fields.value.findIndex((x) => x.id === item.id) > -1 ||
+        paraFields.value.filter((x) => x.id === item.id).length > 1
+      ) {
+        ElMessage.warning('参数编码不可重复！')
+        return
+      }
+      if (!item.label) {
+        ElMessage.warning('参数名不能为空！')
+        return
+      } else if (
+        fields.value.findIndex((x) => x.label === item.label) > -1 ||
+        paraFields.value.filter((x) => x.label === item.label).length > 1
+      ) {
+        ElMessage.warning('参数名不可重复！')
+        return
+      }
+      //下拉选项处理
+      if (item.name === 'ElSelect') {
+        if (item.props.options?.filter((x: any) => x.label).length > 1) {
+          for (let option of item.props.options) {
+            option.value = option.label
+          }
+          item.props.options = item.props.options.filter((x: any) => x.label)
+        } else {
+          ElMessage.warning('至少需要两个选项！')
+          return
+        }
+      } else {
+        if ('options' in item.props) {
+          delete item.props.options
+        }
+        if ('multiple' in item.props) {
+          delete item.props.multiple
+        }
+      }
+    }
+    paraFields.value.forEach((item) => {
+      item.id = 'field_' + item.id
+      addFormItem(item)
+    })
+    paraDrawer.value.handleClose()
+  }
+}
+
+function generateRandomString(length = 6) {
+  let result = ''
+  while (result.length < length) {
+    result += Math.random().toString(36).substring(2)
+  }
+  return result.substring(0, length)
+}
+
+// function addOption(index: number) {
+//   options.value.splice(index, 0, '')
+// }
+//
+// function delOption(index: number) {
+//   options.value.splice(index, 1)
+// }
+
+const onOpen = () => {
+  console.log('onOpen')
+  paraFields.value = []
+  addListener()
+}
+</script>
+
+<template>
+  <div>
+    <slot>
+      <el-button type="primary" icon="Plus" style="width: 100%" @click="drawer = true"
+        >添加参数
+      </el-button>
+    </slot>
+    <el-drawer
+      ref="paraDrawer"
+      v-model="drawer"
+      title="新增流程参数"
+      size="500"
+      @open="onOpen"
+      :close-on-click-modal="true"
+    >
+      <div style="padding-top: 5px">
+        <el-button
+          v-if="paraFields.length > 0"
+          @click="saveListener"
+          style="width: 100%"
+          type="success"
+        >
+          <template #icon>
+            <flow-icon name="save"></flow-icon>
+          </template>
+          保存
+        </el-button>
+        <div v-for="(item, index) in paraFields" :key="index" class="listener-box">
+          <el-button
+            class="listener-close"
+            @click="delListener(index)"
+            plain
+            circle
+            icon="CloseBold"
+            size="small"
+            type="danger"
+          />
+          <el-form-item label="类型" label-position="top">
+            <el-radio-group v-model="item.name">
+              <el-radio-button label="字符串" value="ElInput" />
+              <el-radio-button label="数字" value="ElInputNumber" />
+              <el-radio-button label="下拉选择" value="ElSelect" />
+              <el-radio-button label="人员" value="UserSelector" />
+              <el-radio-button label="角色" value="RoleSelector" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="参数编码" required label-position="top">
+            <el-input v-model="item.id" placeholder="请输入参数编码" clearable>
+              <template #prepend>field_</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="参数名" required label-position="top">
+            <el-input v-model="item.label" placeholder="请输入参数名" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="是否多选" label-position="top" v-if="item.name === 'ElSelect'">
+            <el-radio-group v-model="item.props.multiple">
+              <el-radio-button label="否" :value="false" />
+              <el-radio-button label="是" :value="true" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="选择项" label-position="top" v-if="item.name === 'ElSelect'">
+            <el-row
+              style="width: 100%; margin-bottom: 5px"
+              justify="space-between"
+              align="middle"
+              v-for="(obj, objIndex) in item.props.options"
+              :key="objIndex"
+            >
+              <el-col :span="18">
+                <el-input
+                  v-model="item.props.options[objIndex].label"
+                  placeholder="请输入选项文本"
+                ></el-input>
+              </el-col>
+              <el-col :span="6">
+                <el-button
+                  size="small"
+                  type="primary"
+                  text
+                  :icon="Plus"
+                  @click="item.props.options.splice(objIndex + 1, 0, { label: '', value: '' })"
+                ></el-button>
+                <el-button
+                  size="small"
+                  type="danger"
+                  text
+                  :icon="CloseBold"
+                  style="margin-left: 0"
+                  @click="
+                    item.props.options.length > 1 ? item.props.options.splice(objIndex, 1) : {}
+                  "
+                ></el-button>
+              </el-col>
+            </el-row>
+          </el-form-item>
+        </div>
+        <el-button
+          @click="addListener"
+          style="width: 100%; margin-top: 10px; margin-left: 0"
+          type="primary"
+          icon="Plus"
+          >添加参数
+        </el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.listener-box {
+  border: 1px dashed var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  margin-top: 10px;
+  padding: 7px;
+  position: relative;
+
+  &:hover {
+    border-color: var(--el-color-primary);
+
+    .listener-close {
+      display: block;
+    }
+  }
+
+  .listener-close {
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    z-index: 1;
+    display: none;
+  }
+}
+</style>