adtec-core-package 2.2.7 → 2.2.8

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

@@ -1,553 +1,553 @@
-<script setup lang="ts">
-import type { ApprovalNode, FlowNode, FormProperty } from '../nodes/type'
-import type { Field } from '../../../components/Render/type'
-import AssigneePanel from './AssigneePanel.vue'
-import { computed, h, inject, ref, type Ref, watchEffect } from 'vue'
-import TaskListeners from './TaskListeners.vue'
-import { ElDivider } from 'element-plus'
-import useDictHooks from '../../../../../hooks/useDictHooks'
-
-const { getDictTypeData } = useDictHooks(['SysMsgType', 'SysTaskPriority']) //消息通知类型
-const { fields, getParentNodes } = inject<{
-  fields: Ref<Field[]>
-  admin: string[]
-  getParentNodes: (id: string) => FlowNode[]
-}>('flowDesign', {
-  fields: ref([]),
-  admin: [],
-  getParentNodes: () => [],
-})
-const props = defineProps<{
-  activeData: ApprovalNode
-}>()
-const spacer = h(ElDivider)
-const activeName = ref('properties')
-const allReadonly = computed({
-  get() {
-    return props.activeData.formProperties.every((e) => e.readonly)
-  },
-  set(val) {
-    props.activeData.formProperties.forEach((e) => (e.readonly = val))
-    if (val) {
-      allHidden.value = false
-      allRequired.value = false
-    }
-  },
-})
-const allHidden = computed({
-  get() {
-    return props.activeData.formProperties.every((e) => e.hidden)
-  },
-  set(val) {
-    props.activeData.formProperties.forEach((e) => (e.hidden = val))
-    if (val) {
-      allRequired.value = false
-      allReadonly.value = false
-    }
-  },
-})
-const allRequired = computed({
-  get() {
-    return props.activeData.formProperties.every((e) => e.required)
-  },
-  set(val) {
-    props.activeData.formProperties.forEach((e) => (e.required = val))
-    if (val) {
-      allReadonly.value = false
-      allHidden.value = false
-    }
-  },
-})
-
-const changeReadonly = (row: FormProperty) => {
-  if (row.readonly) {
-    row.required = false
-    row.hidden = false
-  }
-}
-const changeRequired = (row: FormProperty) => {
-  if (row.required) {
-    row.readonly = false
-    row.hidden = false
-  }
-}
-const changeHidden = (row: FormProperty) => {
-  if (row.hidden) {
-    row.readonly = false
-    row.required = false
-  }
-}
-const getBackNodes = () => {
-  if (getParentNodes) {
-    return getParentNodes(props.activeData.id)
-  } else {
-    return []
-  }
-}
-// const deleteParaItem = (row: FormProperty) => {
-//   deleteFormItem(row.id)
-// }
-watchEffect(() => {
-  // console.log('fields', fields)
-  const formProperties = props.activeData.formProperties
-  props.activeData.formProperties = fields.value.map((field) => ({
-    id: field.id,
-    name: field.label,
-    readonly: field.readonly || false,
-    hidden: field.hidden,
-    required: field.required || false,
-  }))
-  props.activeData.formProperties.forEach((item) => {
-    const properties = formProperties.find((f) => f.id === item.id)
-    if (properties) {
-      item.readonly = properties.readonly
-      item.hidden = properties.hidden
-      item.required = properties.required
-    }
-  })
-})
-</script>
-
-<template>
-  <el-tabs v-model="activeName" stretch style="width: 100%">
-    <el-tab-pane label="审批设置" name="properties">
-      <el-form label-position="top" label-width="90px" inline>
-        <AssigneePanel :active-data="activeData" :fields="fields" type="审批">
-          <!--          <el-col :span="8">-->
-          <!--            <el-radio value="autoRefuse">自动拒绝</el-radio>-->
-          <!--          </el-col>-->
-        </AssigneePanel>
-        <el-form-item prop="filterUsers">
-          <template #label>
-            <el-flex align="center">
-              <span style="margin-right: 3px">审批人过滤</span>
-              <el-tooltip content="流程自动对审批对象进行的进一步筛选逻辑" placement="top">
-                <el-icons model-value="adtec-info"></el-icons>
-              </el-tooltip>
-            </el-flex>
-          </template>
-          <el-radio-group v-model="activeData.filterUsers" class="flex-col important-items-start">
-            <el-radio value="no">不过滤</el-radio>
-            <el-radio value="initiatorOrg">发起人部门</el-radio>
-            <el-radio value="assigneeOrg">上环节提交人部门</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item prop="sameUser" label="审批人与提交人为同一人时">
-          <el-radio-group v-model="activeData.sameUser" class="flex-col important-items-start">
-            <el-radio value="normal">正常审批</el-radio>
-            <el-radio value="auto">自动完成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item prop="manualUsers">
-          <template #label>
-            <el-flex align="center">
-              <span style="margin-right: 3px">是否动态指定</span>
-              <el-tooltip
-                content="上一步骤提交后，由上一步骤提交人进行该步骤审批人指定"
-                placement="top"
-              >
-                <el-icons model-value="adtec-info"></el-icons>
-              </el-tooltip>
-            </el-flex>
-          </template>
-          <el-radio-group v-model="activeData.manualUsers" class="flex-col important-items-start">
-            <el-radio :value="false">否</el-radio>
-            <el-radio :value="true">是</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item prop="hideUsers">
-          <template #label>
-            <el-flex align="center">
-              <span style="margin-right: 3px">是否匿名审批</span>
-              <el-tooltip
-                content="流程中不显示具体的审批人"
-                placement="top"
-              >
-                <el-icons model-value="adtec-info"></el-icons>
-              </el-tooltip>
-            </el-flex>
-          </template>
-          <el-radio-group v-model="activeData.hideUsers" class="flex-col important-items-start">
-            <el-radio :value="false">否</el-radio>
-            <el-radio :value="true">是</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item prop="method" label="审批方式">
-          <el-radio-group v-model="activeData.multi" class="flex-col important-items-start">
-            <!--            <el-radio value="sequential">依次审批（按顺序审批）</el-radio>-->
-            <el-radio value="joint">会签（需所有审批人通过）</el-radio>
-            <el-radio value="all">会签（需所有审批人完成审批）</el-radio>
-            <el-radio value="single">或签（一名审批人通过即可）</el-radio>
-          </el-radio-group>
-          <!--          <el-text v-if="activeData.multi === 'joint'">-->
-          <!--            需要-->
-          <!--            <el-input-number v-model="activeData.multiPercent" :min="1" :max="100" />-->
-          <!--            %人员通过-->
-          <!--          </el-text>-->
-        </el-form-item>
-        <el-form-item prop="types">
-          <template #label>
-            <el-flex align="center">
-              <span style="margin-right: 3px">可回退步骤</span>
-              <el-tooltip content="执行“退回”操作时可选的步骤" placement="top">
-                <el-icons model-value="adtec-info"></el-icons>
-              </el-tooltip>
-            </el-flex>
-          </template>
-          <el-select v-model="activeData.backNodes" multiple placeholder="请选择可回退到的步骤" style="width: 240px;">
-            <el-option
-              v-for="item in getBackNodes()"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <!--        <el-form-item prop="nobody" label="审批人为空时：">-->
-        <!--          <el-radio-group v-model="activeData.nobody" class="w-full">-->
-        <!--            <el-row>-->
-        <!--              <el-col :span="12">-->
-        <!--                <el-radio value="pass">自动通过</el-radio>-->
-        <!--              </el-col>-->
-        <!--              <el-col :span="12">-->
-        <!--                <el-radio value="assign">指定人员</el-radio>-->
-        <!--              </el-col>-->
-        <!--              <el-col :span="12">-->
-        <!--                <el-radio value="reject">自动拒绝</el-radio>-->
-        <!--              </el-col>-->
-        <!--              <el-col :span="12">-->
-        <!--                <el-radio value="self">转交流程发起人</el-radio>-->
-        <!--              </el-col>-->
-        <!--            </el-row>-->
-        <!--          </el-radio-group>-->
-        <!--          <user-selector-->
-        <!--            v-if="activeData.nobody === 'assign'"-->
-        <!--            multiple-->
-        <!--            v-model="activeData.nobodyUsers"-->
-        <!--            placeholder="指定人员"-->
-        <!--          />-->
-        <!--        </el-form-item>-->
-        <el-form-item prop="nodeTag" label="组件路径">
-          <template #label>
-            <el-flex align="center">
-              <span style="margin-right: 3px">组件路径</span>
-              <el-tooltip content="前端组件路径，可使用menucode或‘/src/**/*.vue’" placement="top">
-                <el-icons model-value="adtec-info"></el-icons>
-              </el-tooltip>
-            </el-flex>
-          </template>
-          <el-input style="width: 240px;"
-                    v-model="activeData.nodeTag"
-                    :maxlength="100"
-                    clearable
-                    placeholder="请输入组件路径"
-          />
-        </el-form-item>
-        <el-form-item prop="nodeParam" label="组件参数">
-          <template #label>
-            <el-flex align="center">
-              <span style="margin-right: 3px">组件参数</span>
-              <el-tooltip content="前端组件参数" placement="top">
-                <el-icons model-value="adtec-info"></el-icons>
-              </el-tooltip>
-            </el-flex>
-          </template>
-          <el-input style="width: 512px;"
-                    v-model="activeData.nodeParam"
-                    :maxlength="100"
-                    clearable
-                    placeholder="请输入组件参数"
-          />
-        </el-form-item>
-        <el-form-item prop="taskListeners" label="任务监听器：">
-          <TaskListeners :node="activeData" />
-        </el-form-item>
-      </el-form>
-    </el-tab-pane>
-    <el-tab-pane label="通知设置" name="msgProps">
-      <el-form label-position="top">
-        <el-form-item prop="types" label="通知类型">
-          <el-checkbox-group v-model="activeData.msgTypes">
-            <el-checkbox
-              v-for="item in getDictTypeData('SysMsgType')"
-              :key="item.id"
-              :label="item.label"
-              :value="item.value"
-              :disabled="item.value === 'site'"
-            />
-            <!--            <el-checkbox label="站内" disabled value="site" />-->
-            <!--            <el-checkbox label="邮件" value="email" />-->
-            <!--            <el-checkbox label="短信" value="sms" />-->
-            <!--            <el-checkbox label="企业微信" value="wechat" />-->
-          </el-checkbox-group>
-        </el-form-item>
-        <el-form-item prop="msgLevel" label="优先级">
-          <el-radio-group v-model="activeData.msgLevel" class="flex-col important-items-start">
-            <el-radio
-              v-for="item in getDictTypeData('SysTaskPriority')"
-              :key="item.id"
-              :label="item.label"
-              :value="item.value"
-            ></el-radio>
-            <!--            <el-radio value="5">高</el-radio>-->
-            <!--            <el-radio value="3">标准</el-radio>-->
-            <!--            <el-radio value="1">低</el-radio>-->
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item prop="subject" label="消息主题">
-          <template #label>
-            <el-flex align="center">
-              <span style="margin-right: 3px">消息主题</span>
-              <el-tooltip
-                content="可以使用 ${流程变量} 填充内容"
-                placement="top"
-              >
-                <el-icons model-value="adtec-info"></el-icons>
-              </el-tooltip>
-            </el-flex>
-          </template>
-          <el-input
-            v-model="activeData.msgSubject"
-            :maxlength="255"
-            clearable
-            placeholder="请输入消息主题"
-          />
-        </el-form-item>
-        <el-form-item prop="content" label="消息内容">
-          <!--        <template #label>-->
-          <!--          <div class="flex-items-center gap3px">-->
-          <!--            <el-tooltip content="可以使用 ${字段名} 字段名填充内容" placement="top">-->
-          <!--              <el-icon>-->
-          <!--                <QuestionFilled />-->
-          <!--              </el-icon>-->
-          <!--            </el-tooltip>-->
-          <!--            <span>消息内容</span>-->
-          <!--          </div>-->
-          <!--        </template>-->
-          <el-input
-            v-model="activeData.msgContent"
-            :autosize="{ minRows: 6, maxRows: 8 }"
-            type="textarea"
-            :maxlength="1000"
-            show-word-limit
-            placeholder="请输入消息内容"
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="content" label="完成时通知申报人">
-          <template #label>
-            <el-flex align="center">
-              <span style="margin-right: 3px">完成时通知申报人</span>
-              <el-tooltip
-                content="可以使用 ${流程变量} 填充内容"
-                placement="top"
-              >
-                <el-icons model-value="adtec-info"></el-icons>
-              </el-tooltip>
-            </el-flex>
-          </template>
-          <el-input
-            v-model="activeData.msgApplyUser"
-            :maxlength="255"
-            clearable
-            placeholder="请输入消息主题"
-          />
-        </el-form-item>
-      </el-form>
-    </el-tab-pane>
-    <el-tab-pane label="参数设置" name="formPermissions">
-      <el-table width="100%" :data="activeData.formProperties">
-        <el-table-column prop="name" label="字段" />
-        <el-table-column prop="readonly">
-          <template #header>
-            <el-checkbox v-model="allReadonly" label="只读" />
-          </template>
-          <template #default="{ row }">
-            <el-checkbox v-model="row.readonly" @change="changeReadonly(row)" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="required">
-          <template #header>
-            <el-checkbox v-model="allRequired" label="必填" />
-          </template>
-          <template #default="{ row }">
-            <el-checkbox v-model="row.required" @change="changeRequired(row)" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="hidden">
-          <template #header>
-            <el-checkbox v-model="allHidden" label="隐藏" />
-          </template>
-          <template #default="{ row }">
-            <el-checkbox v-model="row.hidden" @change="changeHidden(row)" />
-          </template>
-        </el-table-column>
-        <!--        <el-table-column width="60" prop="hidden">-->
-        <!--          <template #default="{ row }">-->
-        <!--            <span @click.stop>-->
-        <!--              <el-popconfirm-->
-        <!--                title="删除后该参数在流程中将不可用,您确定要删除该参数吗？"-->
-        <!--                width="200"-->
-        <!--                :hide-after="0"-->
-        <!--                placement="left-end"-->
-        <!--                @confirm="deleteParaItem(row)"-->
-        <!--              >-->
-        <!--                <template #reference>-->
-        <!--                  <el-button size="small" type="danger" text :icon="CloseBold"> </el-button>-->
-        <!--                </template>-->
-        <!--              </el-popconfirm>-->
-        <!--            </span>-->
-        <!--          </template>-->
-        <!--        </el-table-column>-->
-      </el-table>
-      <!--      <ParaPanel />-->
-    </el-tab-pane>
-    <el-tab-pane label="操作权限" name="operationPermissions">
-      <el-space fill :size="0" direction="horizontal" :spacer="spacer">
-        <div class="opt-item">
-          <el-icon :size="32" class="opt-item__icon">
-            <CircleCheck />
-          </el-icon>
-          <div class="opt-item__content">
-            <el-text tag="b"> 同意</el-text>
-            <div class="opt-item__second">审批通过，流转到下一个节点</div>
-          </div>
-          <el-switch
-            v-model="activeData.operations.complete"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-          />
-        </div>
-        <div class="opt-item">
-          <el-icon :size="32" class="opt-item__icon">
-            <Back />
-          </el-icon>
-          <div class="opt-item__content">
-            <el-text tag="b"> 退回</el-text>
-            <div class="opt-item__second">
-              若审批内容存在问题，当前任务将中止并回退至特定历史任务节点
-            </div>
-          </div>
-          <el-switch
-            v-model="activeData.operations.back"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-          />
-        </div>
-        <div class="opt-item">
-          <el-icon :size="32" class="opt-item__icon">
-            <CircleClose />
-          </el-icon>
-          <div class="opt-item__content">
-            <el-text tag="b"> 终止</el-text>
-            <div class="opt-item__second">当终止任务时，当前任务被终止，并结束整个流程</div>
-          </div>
-          <el-switch
-            v-model="activeData.operations.refuse"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-          />
-        </div>
-        <div class="opt-item">
-          <el-icon :size="32" class="opt-item__icon">
-            <Switch />
-          </el-icon>
-          <div class="opt-item__content">
-            <el-text tag="b"> 转交</el-text>
-            <div class="opt-item__second">
-              将当前任务移交给其他人处理，以便他们继续执行所需的操作
-            </div>
-          </div>
-          <el-switch
-            v-model="activeData.operations.transfer"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-          />
-        </div>
-        <!--        <div class="opt-item">-->
-        <!--          <el-icon :size="32" class="opt-item__icon">-->
-        <!--            <UserFilled />-->
-        <!--          </el-icon>-->
-        <!--          <div class="opt-item__content">-->
-        <!--            <el-text tag="b"> 委派</el-text>-->
-        <!--            <div class="opt-item__second">将当前任务暂时交由他人处理，待其完成后再交回自己处理</div>-->
-        <!--          </div>-->
-        <!--          <el-switch-->
-        <!--            v-model="activeData.operations.delegate"-->
-        <!--            inline-prompt-->
-        <!--            active-text="开"-->
-        <!--            inactive-text="关"-->
-        <!--          />-->
-        <!--        </div>-->
-        <div class="opt-item">
-          <!--          <flow-icon class-name="opt-item__icon" name="add-user" :size="32" />-->
-          <el-icon :size="32" class="opt-item__icon">
-            <Plus />
-          </el-icon>
-          <div class="opt-item__content">
-            <el-text tag="b"> 加签</el-text>
-            <div class="opt-item__second">
-              在当前任务上额外添加新人员，以处理相关事项或提供必要的审批或意见
-            </div>
-          </div>
-          <el-switch
-            v-model="activeData.operations.addMulti"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-          />
-        </div>
-        <div class="opt-item">
-          <!--          <flow-icon class-name="opt-item__icon" name="reduce-user" :size="32" />-->
-          <el-icon :size="32" class="opt-item__icon">
-            <Minus />
-          </el-icon>
-          <div class="opt-item__content">
-            <el-text tag="b"> 减签</el-text>
-            <div class="opt-item__second">
-              在当前任务中减少处理人员数量，以简化流程或重新分配责任
-            </div>
-          </div>
-          <el-switch
-            v-model="activeData.operations.minusMulti"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-          />
-        </div>
-      </el-space>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-<!--@import '@/components/bpmntree/styles/el-segmented.scss';-->
-
-<style scoped lang="scss">
-.opt-item {
-  display: flex;
-  align-items: center;
-
-  .opt-item__icon {
-    background: var(--el-color-primary);
-    color: var(--el-color-white);
-    border-radius: 7px;
-    padding: 3px;
-  }
-
-  .opt-item__content {
-    box-sizing: border-box;
-    flex: 1;
-    margin-left: 20px;
-    font-size: 14px;
-
-    .opt-item__second {
-      margin-top: 3px;
-      font-size: 12px;
-      color: var(--el-text-color-placeholder);
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import type { ApprovalNode, FlowNode, FormProperty } from '../nodes/type'
+import type { Field } from '../../../components/Render/type'
+import AssigneePanel from './AssigneePanel.vue'
+import { computed, h, inject, ref, type Ref, watchEffect } from 'vue'
+import TaskListeners from './TaskListeners.vue'
+import { ElDivider } from 'element-plus'
+import useDictHooks from '../../../../../hooks/useDictHooks'
+
+const { getDictTypeData } = useDictHooks(['SysMsgType', 'SysTaskPriority']) //消息通知类型
+const { fields, getParentNodes } = inject<{
+  fields: Ref<Field[]>
+  admin: string[]
+  getParentNodes: (id: string) => FlowNode[]
+}>('flowDesign', {
+  fields: ref([]),
+  admin: [],
+  getParentNodes: () => [],
+})
+const props = defineProps<{
+  activeData: ApprovalNode
+}>()
+const spacer = h(ElDivider)
+const activeName = ref('properties')
+const allReadonly = computed({
+  get() {
+    return props.activeData.formProperties.every((e) => e.readonly)
+  },
+  set(val) {
+    props.activeData.formProperties.forEach((e) => (e.readonly = val))
+    if (val) {
+      allHidden.value = false
+      allRequired.value = false
+    }
+  },
+})
+const allHidden = computed({
+  get() {
+    return props.activeData.formProperties.every((e) => e.hidden)
+  },
+  set(val) {
+    props.activeData.formProperties.forEach((e) => (e.hidden = val))
+    if (val) {
+      allRequired.value = false
+      allReadonly.value = false
+    }
+  },
+})
+const allRequired = computed({
+  get() {
+    return props.activeData.formProperties.every((e) => e.required)
+  },
+  set(val) {
+    props.activeData.formProperties.forEach((e) => (e.required = val))
+    if (val) {
+      allReadonly.value = false
+      allHidden.value = false
+    }
+  },
+})
+
+const changeReadonly = (row: FormProperty) => {
+  if (row.readonly) {
+    row.required = false
+    row.hidden = false
+  }
+}
+const changeRequired = (row: FormProperty) => {
+  if (row.required) {
+    row.readonly = false
+    row.hidden = false
+  }
+}
+const changeHidden = (row: FormProperty) => {
+  if (row.hidden) {
+    row.readonly = false
+    row.required = false
+  }
+}
+const getBackNodes = () => {
+  if (getParentNodes) {
+    return getParentNodes(props.activeData.id)
+  } else {
+    return []
+  }
+}
+// const deleteParaItem = (row: FormProperty) => {
+//   deleteFormItem(row.id)
+// }
+watchEffect(() => {
+  // console.log('fields', fields)
+  const formProperties = props.activeData.formProperties
+  props.activeData.formProperties = fields.value.map((field) => ({
+    id: field.id,
+    name: field.label,
+    readonly: field.readonly || false,
+    hidden: field.hidden,
+    required: field.required || false,
+  }))
+  props.activeData.formProperties.forEach((item) => {
+    const properties = formProperties.find((f) => f.id === item.id)
+    if (properties) {
+      item.readonly = properties.readonly
+      item.hidden = properties.hidden
+      item.required = properties.required
+    }
+  })
+})
+</script>
+
+<template>
+  <el-tabs v-model="activeName" stretch style="width: 100%">
+    <el-tab-pane label="审批设置" name="properties">
+      <el-form label-position="top" label-width="90px" inline>
+        <AssigneePanel :active-data="activeData" :fields="fields" type="审批">
+          <!--          <el-col :span="8">-->
+          <!--            <el-radio value="autoRefuse">自动拒绝</el-radio>-->
+          <!--          </el-col>-->
+        </AssigneePanel>
+        <el-form-item prop="filterUsers">
+          <template #label>
+            <el-flex align="center">
+              <span style="margin-right: 3px">审批人过滤</span>
+              <el-tooltip content="流程自动对审批对象进行的进一步筛选逻辑" placement="top">
+                <el-icons model-value="adtec-info"></el-icons>
+              </el-tooltip>
+            </el-flex>
+          </template>
+          <el-radio-group v-model="activeData.filterUsers" class="flex-col important-items-start">
+            <el-radio value="no">不过滤</el-radio>
+            <el-radio value="initiatorOrg">发起人部门</el-radio>
+            <el-radio value="assigneeOrg">上环节提交人部门</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="sameUser" label="审批人与提交人为同一人时">
+          <el-radio-group v-model="activeData.sameUser" class="flex-col important-items-start">
+            <el-radio value="normal">正常审批</el-radio>
+            <el-radio value="auto">自动完成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="manualUsers">
+          <template #label>
+            <el-flex align="center">
+              <span style="margin-right: 3px">是否动态指定</span>
+              <el-tooltip
+                content="上一步骤提交后，由上一步骤提交人进行该步骤审批人指定"
+                placement="top"
+              >
+                <el-icons model-value="adtec-info"></el-icons>
+              </el-tooltip>
+            </el-flex>
+          </template>
+          <el-radio-group v-model="activeData.manualUsers" class="flex-col important-items-start">
+            <el-radio :value="false">否</el-radio>
+            <el-radio :value="true">是</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="hideUsers">
+          <template #label>
+            <el-flex align="center">
+              <span style="margin-right: 3px">是否匿名审批</span>
+              <el-tooltip
+                content="流程中不显示具体的审批人"
+                placement="top"
+              >
+                <el-icons model-value="adtec-info"></el-icons>
+              </el-tooltip>
+            </el-flex>
+          </template>
+          <el-radio-group v-model="activeData.hideUsers" class="flex-col important-items-start">
+            <el-radio :value="false">否</el-radio>
+            <el-radio :value="true">是</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="method" label="审批方式">
+          <el-radio-group v-model="activeData.multi" class="flex-col important-items-start">
+            <!--            <el-radio value="sequential">依次审批（按顺序审批）</el-radio>-->
+            <el-radio value="joint">会签（需所有审批人通过）</el-radio>
+            <el-radio value="all">会签（需所有审批人完成审批）</el-radio>
+            <el-radio value="single">或签（一名审批人通过即可）</el-radio>
+          </el-radio-group>
+          <!--          <el-text v-if="activeData.multi === 'joint'">-->
+          <!--            需要-->
+          <!--            <el-input-number v-model="activeData.multiPercent" :min="1" :max="100" />-->
+          <!--            %人员通过-->
+          <!--          </el-text>-->
+        </el-form-item>
+        <el-form-item prop="types">
+          <template #label>
+            <el-flex align="center">
+              <span style="margin-right: 3px">可回退步骤</span>
+              <el-tooltip content="执行“退回”操作时可选的步骤" placement="top">
+                <el-icons model-value="adtec-info"></el-icons>
+              </el-tooltip>
+            </el-flex>
+          </template>
+          <el-select v-model="activeData.backNodes" multiple placeholder="请选择可回退到的步骤" style="width: 240px;">
+            <el-option
+              v-for="item in getBackNodes()"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <!--        <el-form-item prop="nobody" label="审批人为空时：">-->
+        <!--          <el-radio-group v-model="activeData.nobody" class="w-full">-->
+        <!--            <el-row>-->
+        <!--              <el-col :span="12">-->
+        <!--                <el-radio value="pass">自动通过</el-radio>-->
+        <!--              </el-col>-->
+        <!--              <el-col :span="12">-->
+        <!--                <el-radio value="assign">指定人员</el-radio>-->
+        <!--              </el-col>-->
+        <!--              <el-col :span="12">-->
+        <!--                <el-radio value="reject">自动拒绝</el-radio>-->
+        <!--              </el-col>-->
+        <!--              <el-col :span="12">-->
+        <!--                <el-radio value="self">转交流程发起人</el-radio>-->
+        <!--              </el-col>-->
+        <!--            </el-row>-->
+        <!--          </el-radio-group>-->
+        <!--          <user-selector-->
+        <!--            v-if="activeData.nobody === 'assign'"-->
+        <!--            multiple-->
+        <!--            v-model="activeData.nobodyUsers"-->
+        <!--            placeholder="指定人员"-->
+        <!--          />-->
+        <!--        </el-form-item>-->
+        <el-form-item prop="nodeTag" label="组件路径">
+          <template #label>
+            <el-flex align="center">
+              <span style="margin-right: 3px">组件路径</span>
+              <el-tooltip content="前端组件路径，可使用menucode或‘/src/**/*.vue’" placement="top">
+                <el-icons model-value="adtec-info"></el-icons>
+              </el-tooltip>
+            </el-flex>
+          </template>
+          <el-input style="width: 240px;"
+                    v-model="activeData.nodeTag"
+                    :maxlength="100"
+                    clearable
+                    placeholder="请输入组件路径"
+          />
+        </el-form-item>
+        <el-form-item prop="nodeParam" label="组件参数">
+          <template #label>
+            <el-flex align="center">
+              <span style="margin-right: 3px">组件参数</span>
+              <el-tooltip content="前端组件参数" placement="top">
+                <el-icons model-value="adtec-info"></el-icons>
+              </el-tooltip>
+            </el-flex>
+          </template>
+          <el-input style="width: 512px;"
+                    v-model="activeData.nodeParam"
+                    :maxlength="100"
+                    clearable
+                    placeholder="请输入组件参数"
+          />
+        </el-form-item>
+        <el-form-item prop="taskListeners" label="任务监听器：">
+          <TaskListeners :node="activeData" />
+        </el-form-item>
+      </el-form>
+    </el-tab-pane>
+    <el-tab-pane label="通知设置" name="msgProps">
+      <el-form label-position="top">
+        <el-form-item prop="types" label="通知类型">
+          <el-checkbox-group v-model="activeData.msgTypes">
+            <el-checkbox
+              v-for="item in getDictTypeData('SysMsgType')"
+              :key="item.id"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.value === 'site'"
+            />
+            <!--            <el-checkbox label="站内" disabled value="site" />-->
+            <!--            <el-checkbox label="邮件" value="email" />-->
+            <!--            <el-checkbox label="短信" value="sms" />-->
+            <!--            <el-checkbox label="企业微信" value="wechat" />-->
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item prop="msgLevel" label="优先级">
+          <el-radio-group v-model="activeData.msgLevel" class="flex-col important-items-start">
+            <el-radio
+              v-for="item in getDictTypeData('SysTaskPriority')"
+              :key="item.id"
+              :label="item.label"
+              :value="item.value"
+            ></el-radio>
+            <!--            <el-radio value="5">高</el-radio>-->
+            <!--            <el-radio value="3">标准</el-radio>-->
+            <!--            <el-radio value="1">低</el-radio>-->
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="subject" label="消息主题">
+          <template #label>
+            <el-flex align="center">
+              <span style="margin-right: 3px">消息主题</span>
+              <el-tooltip
+                content="可以使用 ${流程变量} 填充内容"
+                placement="top"
+              >
+                <el-icons model-value="adtec-info"></el-icons>
+              </el-tooltip>
+            </el-flex>
+          </template>
+          <el-input
+            v-model="activeData.msgSubject"
+            :maxlength="255"
+            clearable
+            placeholder="请输入消息主题"
+          />
+        </el-form-item>
+        <el-form-item prop="content" label="消息内容">
+          <!--        <template #label>-->
+          <!--          <div class="flex-items-center gap3px">-->
+          <!--            <el-tooltip content="可以使用 ${字段名} 字段名填充内容" placement="top">-->
+          <!--              <el-icon>-->
+          <!--                <QuestionFilled />-->
+          <!--              </el-icon>-->
+          <!--            </el-tooltip>-->
+          <!--            <span>消息内容</span>-->
+          <!--          </div>-->
+          <!--        </template>-->
+          <el-input
+            v-model="activeData.msgContent"
+            :autosize="{ minRows: 6, maxRows: 8 }"
+            type="textarea"
+            :maxlength="1000"
+            show-word-limit
+            placeholder="请输入消息内容"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="content" label="完成时通知申报人">
+          <template #label>
+            <el-flex align="center">
+              <span style="margin-right: 3px">完成时通知申报人</span>
+              <el-tooltip
+                content="可以使用 ${流程变量} 填充内容"
+                placement="top"
+              >
+                <el-icons model-value="adtec-info"></el-icons>
+              </el-tooltip>
+            </el-flex>
+          </template>
+          <el-input
+            v-model="activeData.msgApplyUser"
+            :maxlength="255"
+            clearable
+            placeholder="请输入消息主题"
+          />
+        </el-form-item>
+      </el-form>
+    </el-tab-pane>
+    <el-tab-pane label="参数设置" name="formPermissions">
+      <el-table width="100%" :data="activeData.formProperties">
+        <el-table-column prop="name" label="字段" />
+        <el-table-column prop="readonly">
+          <template #header>
+            <el-checkbox v-model="allReadonly" label="只读" />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.readonly" @change="changeReadonly(row)" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="required">
+          <template #header>
+            <el-checkbox v-model="allRequired" label="必填" />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.required" @change="changeRequired(row)" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="hidden">
+          <template #header>
+            <el-checkbox v-model="allHidden" label="隐藏" />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.hidden" @change="changeHidden(row)" />
+          </template>
+        </el-table-column>
+        <!--        <el-table-column width="60" prop="hidden">-->
+        <!--          <template #default="{ row }">-->
+        <!--            <span @click.stop>-->
+        <!--              <el-popconfirm-->
+        <!--                title="删除后该参数在流程中将不可用,您确定要删除该参数吗？"-->
+        <!--                width="200"-->
+        <!--                :hide-after="0"-->
+        <!--                placement="left-end"-->
+        <!--                @confirm="deleteParaItem(row)"-->
+        <!--              >-->
+        <!--                <template #reference>-->
+        <!--                  <el-button size="small" type="danger" text :icon="CloseBold"> </el-button>-->
+        <!--                </template>-->
+        <!--              </el-popconfirm>-->
+        <!--            </span>-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+      </el-table>
+      <!--      <ParaPanel />-->
+    </el-tab-pane>
+    <el-tab-pane label="操作权限" name="operationPermissions">
+      <el-space fill :size="0" direction="horizontal" :spacer="spacer">
+        <div class="opt-item">
+          <el-icon :size="32" class="opt-item__icon">
+            <CircleCheck />
+          </el-icon>
+          <div class="opt-item__content">
+            <el-text tag="b"> 同意</el-text>
+            <div class="opt-item__second">审批通过，流转到下一个节点</div>
+          </div>
+          <el-switch
+            v-model="activeData.operations.complete"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+          />
+        </div>
+        <div class="opt-item">
+          <el-icon :size="32" class="opt-item__icon">
+            <Back />
+          </el-icon>
+          <div class="opt-item__content">
+            <el-text tag="b"> 退回</el-text>
+            <div class="opt-item__second">
+              若审批内容存在问题，当前任务将中止并回退至特定历史任务节点
+            </div>
+          </div>
+          <el-switch
+            v-model="activeData.operations.back"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+          />
+        </div>
+        <div class="opt-item">
+          <el-icon :size="32" class="opt-item__icon">
+            <CircleClose />
+          </el-icon>
+          <div class="opt-item__content">
+            <el-text tag="b"> 终止</el-text>
+            <div class="opt-item__second">当终止任务时，当前任务被终止，并结束整个流程</div>
+          </div>
+          <el-switch
+            v-model="activeData.operations.refuse"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+          />
+        </div>
+        <div class="opt-item">
+          <el-icon :size="32" class="opt-item__icon">
+            <Switch />
+          </el-icon>
+          <div class="opt-item__content">
+            <el-text tag="b"> 转交</el-text>
+            <div class="opt-item__second">
+              将当前任务移交给其他人处理，以便他们继续执行所需的操作
+            </div>
+          </div>
+          <el-switch
+            v-model="activeData.operations.transfer"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+          />
+        </div>
+        <!--        <div class="opt-item">-->
+        <!--          <el-icon :size="32" class="opt-item__icon">-->
+        <!--            <UserFilled />-->
+        <!--          </el-icon>-->
+        <!--          <div class="opt-item__content">-->
+        <!--            <el-text tag="b"> 委派</el-text>-->
+        <!--            <div class="opt-item__second">将当前任务暂时交由他人处理，待其完成后再交回自己处理</div>-->
+        <!--          </div>-->
+        <!--          <el-switch-->
+        <!--            v-model="activeData.operations.delegate"-->
+        <!--            inline-prompt-->
+        <!--            active-text="开"-->
+        <!--            inactive-text="关"-->
+        <!--          />-->
+        <!--        </div>-->
+        <div class="opt-item">
+          <!--          <flow-icon class-name="opt-item__icon" name="add-user" :size="32" />-->
+          <el-icon :size="32" class="opt-item__icon">
+            <Plus />
+          </el-icon>
+          <div class="opt-item__content">
+            <el-text tag="b"> 加签</el-text>
+            <div class="opt-item__second">
+              在当前任务上额外添加新人员，以处理相关事项或提供必要的审批或意见
+            </div>
+          </div>
+          <el-switch
+            v-model="activeData.operations.addMulti"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+          />
+        </div>
+        <div class="opt-item">
+          <!--          <flow-icon class-name="opt-item__icon" name="reduce-user" :size="32" />-->
+          <el-icon :size="32" class="opt-item__icon">
+            <Minus />
+          </el-icon>
+          <div class="opt-item__content">
+            <el-text tag="b"> 减签</el-text>
+            <div class="opt-item__second">
+              在当前任务中减少处理人员数量，以简化流程或重新分配责任
+            </div>
+          </div>
+          <el-switch
+            v-model="activeData.operations.minusMulti"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+          />
+        </div>
+      </el-space>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<!--@import '@/components/bpmntree/styles/el-segmented.scss';-->
+
+<style scoped lang="scss">
+.opt-item {
+  display: flex;
+  align-items: center;
+
+  .opt-item__icon {
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
+    border-radius: 7px;
+    padding: 3px;
+  }
+
+  .opt-item__content {
+    box-sizing: border-box;
+    flex: 1;
+    margin-left: 20px;
+    font-size: 14px;
+
+    .opt-item__second {
+      margin-top: 3px;
+      font-size: 12px;
+      color: var(--el-text-color-placeholder);
+    }
+  }
+}
+</style>