eoss 0.1.0-alpha.21 → 0.1.0-alpha.22

package/packages/{flow/src/flow.vue → flows/src/flows.vue}

@@ -1,77 +1,25 @@
 <template>
-  <es-form
-    :model="formData"
-    class="es-flow"
-    :class="{ 'es-flow-narrow': shrink }"
-    :style="styles"
-    v-if="!shrinkAbled"
-    :rules="formRules"
-  >
-    <StartTaskRead
-      v-if="typeCode == 'read'"
-      :pending-id="pendingId"
-      :opinion="value"
-      type="create"
-      :simpleTips="simpleTips"
-      :key="StartTaskReadKey"
-      typeCode="read"
-      :param="param"
-      :selectorConfig="selectorConfig"
-      :resetAppId="resetAppId"
-      :taskExamine="taskExamineInfo"
-      :subParams="subParams"
-      :news-info="nextNode.notificationMsg"
-      @cancel="closeProcess($event)"
-    />
-
-    <FreeCirculation
-      v-else-if="typeCode == 'freeCirculation'"
-      :appId="resetAppId"
-      :params="param"
-      :showOther="showOther"
-      :selectorParams="selectorParams"
-      :formLabelPosition="formLabelPosition"
-      :simpleTips="simpleTips"
-    />
-    <Supervise
-      v-else-if="typeCode == 'supervise'"
-      :businessId="businessId"
-      :appId="resetAppId"
-      :simpleTips="simpleTips"
-      @cancel="closeProcess($event)"
-    />
-    <reset
-      v-else-if="newTypeCode == 'reset' || newTypeCode == 'continuation'"
-      style="height: 100%"
-      :type="newTypeCode"
-      :simpleTips="simpleTips"
-      :appId="resetAppId"
-      @cancel="closeProcess($event)"
-      :flowParams="param"
-      :subParams="subParams"
-    />
-    <template v-else>
-      <!-- 标题区域 -->
-      <div class="es-flow__title">
-        <span v-show="!shrink"
-          >当前节点：<span class="es-flow__title--node-name">
-            {{ isStartFlow ? nodeName || '拟稿' : NodeName }}
-          </span></span
-        >
-        <es-button
-          v-if="showShrink"
-          type="text"
-          size="medium"
-          class="es-flow__title--shrink"
-          :icon="shrink ? 'es-icon-shouqi' : 'es-icon-zhankai'"
-          @click="setShrink"
-        ></es-button>
-      </div>
+  <div class="es-flows" :class="{ 'is-hide': !show }" :style="styles">
+    <!-- 标题区域 -->
+    <div class="es-flows__title">
+      <template v-show="show">
+        <span>当前节点：</span>
+        <span class="es-flows__title--node-name">
+          {{ isStartFlow ? nodeName || '拟稿' : NodeName }}
+        </span>
+      </template>
+      <i
+        class="es-flows__title--shrink"
+        :class="show ? 'es-icon-zhankai' : 'es-icon-shouqi'"
+        @click="handleShrink"
+      ></i>
+    </div>
+    <!-- 标题区域 end -->
+    <es-form :model="formData" :rules="formRules" v-show="show">
       <!-- 意见区域 -->
       <opinions
         v-if="showOpinion"
         v-model="formData.opinion"
-        v-show="!shrink"
         ref="commonOpinions"
         :show-file="!isStartFlow && newTypeCode != 'fenyue'"
         :ownId="pendingId"
@@ -83,1249 +31,17 @@
         :isBanInputOpinion="isBanInputOpinion"
         :nodeFixedOpinionSelectList="nodeFixedOpinionSelectList"
       />
-      <template v-if="showCirculate && newTypeCode != 'fenyue'">
-        <div
-          :class="`es-info ${formLabelPosition == 'left' ? 'form-left' : ''}`"
-        >
-          <es-form
-            ref="form"
-            :model="circulateForm"
-            label-width="150px"
-            :label-position="formLabelPosition"
-          >
-            <es-form-item
-              style="margin-top: 20px"
-              prop="nextNodeId"
-              label="下步节点"
-            >
-              <es-select
-                v-if="nextNodeCheckType == 'select'"
-                v-model="circulateForm.nextNodeId"
-                style="width: 100% !important"
-                :placeholder="`请选择下步节点`"
-              >
-                <es-option label="传阅" value="111"></es-option>
-              </es-select>
-              <es-radio-group
-                v-else-if="nextNodeCheckType == 'radio'"
-                v-model="circulateForm.nextNodeId"
-                :data="[{ nodeId: '111', nodeName: '传阅' }]"
-                value-key="nodeId"
-                label-key="nodeName"
-              >
-                <es-radio
-                  v-for="item of [{ nodeId: '111', nodeName: '传阅' }]"
-                  :key="item.nodeId"
-                  :label="item.nodeId"
-                >
-                  {{ item.nodeName }}
-                </es-radio>
-              </es-radio-group>
-            </es-form-item>
-          </es-form>
-          <circulate
-            style="margin-top: 10px"
-            :businessId="businessIds"
-            :label-position="formLabelPosition"
-            ref="circulate"
-            :selectorParams="selectorParams"
-            :pending-id="pendingId"
-            :showBtn="false"
-            :formTitle="formTitle"
-            :startFlowPageEmbeddedIntoStartFlowIndex="
-              startFlowPageEmbeddedIntoStartFlowIndex
-            "
-            :processDefinitionId="nodeInfo.nextNode"
-            :simpleTips="simpleTips"
-            :oldOption="value"
-            @cancel="closeProcess($event, 'circulateVisible')"
-          />
-        </div>
-
-        <es-button
-          type="primary"
-          style="width: calc(100% - 18px); margin: 8px auto"
-          @click="handleClickCirculate()"
-        >
-          提交
-        </es-button>
-      </template>
-      <template v-else>
-        <quick-actions
-          ref="quickActions"
-          v-model="formData"
-          :typeList="typeList"
-          :pending-id="pendingId"
-          :option="value"
-          :simpleTips="simpleTips"
-          :show-reject="showReject"
-          :nextNode="nextNode"
-          :pendingId="pendingId"
-          :defaultOpinion="nodeDefaultSubmitOpinion"
-          :oldOption="value"
-          :selectorParams="selectorParams"
-          :flowType="flowType"
-          :multiple="flowMultiple"
-          :disabled="flowDisabled"
-          :opinion="value"
-          :taskReadType="taskReadType"
-          :selectorConfig="selectorConfig"
-          :subParams="subParams"
-          :taskExamine="taskExamineInfo"
-          :newsList="newsList"
-          :freeStartFlowParams="freeStartFlowParams"
-          :taskParams="taskParams"
-          :businessId="businessIds"
-          :nodeInfo="nodeInfo"
-          :freeStartFlowNextNode="freeStartFlowNextNode"
-          :formType="processFormType"
-          :currentNodeIsCircularReadNode="currentNodeIsCircularReadNode"
-          :isStartFlow="isStartFlow"
-          :currentOrgName="currentOrgName"
-          :nextCurrentOrgObjSelect="nextCurrentOrgObjSelect"
-          :currentOrgDisabledObjId="currentOrgDisabledObjId"
-          :currentOrgSelectorTabs="currentOrgSelectorTabs"
-          :otherOrgName="otherOrgName"
-          :nextOtherOrgObjSelect="nextOtherOrgObjSelect"
-          :otherOrgDisabledObjId="otherOrgDisabledObjId"
-          :foreignOrgSelectorTabs="foreignOrgSelectorTabs"
-          :foreignOrgSelectorParams="foreignOrgSelectorParams"
-          :endFlow="endFlow"
-          :newTypeCode="newTypeCode"
-          :shrink="shrink"
-          :btnType="btnType"
-          :startFlowPageEmbeddedIntoStartFlowIndex="
-            startFlowPageEmbeddedIntoStartFlowIndex
-          "
-          :isCanAddSign="isCanAddSign"
-          :isCanPreAddSign="isCanPreAddSign"
-          :isCanRemoveSign="isCanRemoveSign"
-          :removeUsers="removeUsers"
-          :isSpecial="isSpecial"
-          :isCustomPreset="isCustomPreset"
-          :currentOrgSelectorParams="currentOrgSelectorParams"
-          :isPreset="isPreset"
-          :isEndMessage="isEndMessage"
-          :isChooseNextNode="isChooseNextNode"
-          :isReject="isReject"
-          :nodeInfos="nodeInfos"
-          :nextOperateCheckType="nextOperateCheckType"
-          :isShowNode="isShowNode"
-          :countersignaturetypeCode="countersignaturetypeCode"
-          :handleMode="handleMode"
-          :isNextUser="isNextUser"
-          :isHideCurrentOrg="isHideCurrentOrg"
-          :isHideOtherOrg="isHideOtherOrg"
-          :isMainSubProcess="isMainSubProcess"
-          :operationList="operationList"
-          :nextNodeCheckType="nextNodeCheckType"
-          :isShowNextUser="isShowNextUser"
-          :radioList="radioList"
-          :isCustomUser="isCustomUser"
-          :isCurrentNodeForbiddenChangeCandidate="
-            isCurrentNodeForbiddenChangeCandidate
-          "
-          :options="options"
-          :presetEdit="presetEdit"
-          :selectUserList="selectUserList"
-          :nextUserTypes="nextUserTypes"
-          :params="params"
-          :nextUserTabs="nextUserTabs"
-          :nodeType="nodeType"
-          :isLimitedTimeHandling="isLimitedTimeHandling"
-          :isTaskread="isTaskread"
-          :canPresetRead="canPresetRead"
-          :enableCustomLimitTimeSetting="enableCustomLimitTimeSetting"
-          :isHandleExplain="isHandleExplain"
-          :currentNodeEnableItemHandleDescription="
-            currentNodeEnableItemHandleDescription
-          "
-          :notificationMessageReadOnly="notificationMessageReadOnly"
-          :readOnlyNotificationType="readOnlyNotificationType"
-        />
-        <div
-          v-show="!isStartFlow && !shrink"
-          class="es-flow-middle-more-btn"
-          :style="{
-            flex: getFlexStyle()
-          }"
-        >
-          <p>快捷操作</p>
-          <!-- <div
-          :class="`es-flow-middle-more-btn-item ${
-            btnType === 'default' ? 'active-btn' : ''
-          }`"
-        >
-          默认
-        </div> -->
-          <div
-            v-for="item of typeList"
-            :key="item.key"
-            @click="goView(item)"
-            :class="`es-flow-middle-more-btn-item ${
-              btnType === btnFunValue(item.fun) ? 'active-btn' : ''
-            }`"
-          >
-            {{ item.value }}
-          </div>
-          <!-- <div
-          v-if="rejectObj.fun"
-          :class="`es-flow-middle-more-btn-item ${
-            btnType === rejectObj.key ? 'active-btn' : ''
-          }`"
-          @click="rejectBtn"
-        >
-          {{ rejectObj.value }}
-        </div> -->
-        </div>
-        <ProcessReject
-          v-if="btnType === 'reject'"
-          ref="reject"
-          class="es-info"
-          :pending-id="pendingId"
-          :option="value"
-          :simpleTips="simpleTips"
-          :show-reject="showReject"
-          :news-info="nextNode.notificationMsg"
-          @cancel="closeProcess($event, 'showReject')"
-        />
-        <TaskUnionExamine
-          v-else-if="
-            btnType === 'toTakeAdvice' ||
-            btnType === 'toUnionExamine' ||
-            btnType === 'toStartDraf'
-          "
-          ref="toTakeAdvice"
-          class="es-info"
-          @cancel="closeProcess($event, 'showTaskUnionExamine')"
-          :simpleTips="simpleTips"
-          :pendingId="pendingId"
-          :defaultOpinion="nodeDefaultSubmitOpinion"
-          :oldOption="value"
-          :selectorParams="selectorParams"
-          :type="flowType"
-          :multiple="flowMultiple"
-          :disabled="flowDisabled"
-        />
-        <StartTaskRead
-          v-else-if="btnType === 'toStartTaskRead'"
-          ref="toStartTaskRead"
-          class="es-info"
-          :pending-id="pendingId"
-          :opinion="value"
-          :type="taskReadType"
-          :selectorConfig="selectorConfig"
-          :simpleTips="simpleTips"
-          :subParams="subParams"
-          :taskExamine="taskExamineInfo"
-          :news-info="nextNode.notificationMsg"
-          @cancel="closeProcess($event, 'showTaskRead')"
-        />
-        <SendMsg
-          v-else-if="btnType === 'toSendMsg'"
-          ref="toSendMsg"
-          class="es-info"
-          @cancel="closeProcess($event, 'showSendMsg')"
-          :simpleTips="simpleTips"
-          :pendingId="pendingId"
-          :newsList="newsList"
-        />
-        <free-start-flow
-          v-else-if="btnType === 'toFreeStartFlow'"
-          ref="toFreeStartFlow"
-          class="es-info"
-          isStartFlow
-          v-bind="freeStartFlowParams"
-          :simpleTips="simpleTips"
-          @close="showFreeStartFlow = false"
-          @success="freeStartFlowSuccess"
-          :btnList="[{ text: '提交', event: 'sub', type: 'primary' }]"
-          :taskParams="taskParams"
-        ></free-start-flow>
-        <ProcessForm
-          v-else-if="btnType === 'startFlowForm'"
-          ref="startFlowForm"
-          class="es-info"
-          :id="freeStartFlowParams.startFlowBusinessId || businessIds"
-          :pending-id="pendingId"
-          :simpleTips="simpleTips"
-          :is-free-start-flow="
-            freeStartFlowParams.useScene === 'multiInsMidwayWithSubmitScene'
-          "
-          :pendingId="pendingId"
-          :copy-history="freeStartFlowParams.pendedHistoryHandle"
-          :process-definition-id="freeStartFlowNextNode || nodeInfo.nextNode"
-          :opinion="value"
-          :taskExamineParam="freeStartFlowParams.newFlowStartNodeItemName"
-          :taskParams="taskParams"
-          :formType="processFormType"
-          @cancel="closeProcess($event, 'handleVisible', closeParent)"
-        />
-        <es-form
-          v-show="currentNodeIsCircularReadNode"
-          ref="nextNode"
-          style="margin-top: 24px"
-          :full="false"
-          :model="isStartFlow ? nodeInfo : nextNode"
-          label-width="150px"
-          :label-position="formLabelPosition"
-        >
-          <es-form-item
-            prop="nextCurrentOrgObj"
-            :label="currentOrgName ? currentOrgName : '本单位'"
-          >
-            <SelectUser
-              :nextUser="nextCurrentOrgObjSelect"
-              multiple
-              mix
-              :disableds="currentOrgDisabledObjId"
-              @change="disposeAppUnit($event, 'nextCurrentOrgObjSelect')"
-              :types="currentOrgSelectorTabs"
-              :params="currentOrgSelectorParams"
-            />
-          </es-form-item>
-          <es-form-item
-            prop="nextOtherOrgObj"
-            :label="otherOrgName ? otherOrgName : '外单位'"
-          >
-            <SelectUser
-              :nextUser="nextOtherOrgObjSelect"
-              multiple
-              mix
-              :disableds="otherOrgDisabledObjId"
-              :where="{ filid: 'other' }"
-              @change="disposeAppUnit($event, 'nextOtherOrgObjSelect')"
-              :types="foreignOrgSelectorTabs"
-              :params="foreignOrgSelectorParams"
-            />
-          </es-form-item>
-        </es-form>
-        <div
-          v-show="
-            (!endFlow ||
-              nodeInfos.length > 1 ||
-              taskOperationShiftedNodeList) &&
-            newTypeCode != 'fenyue' &&
-            !shrink &&
-            btnType === 'default'
-          "
-          ref="esContent"
-          :class="`es-info ${formLabelPosition == 'left' ? 'form-left' : ''}`"
-        >
-          <div
-            v-if="
-              isStartFlow && nodeInfo.option.length > 0 && !flowListDisabled
-            "
-            style="border-bottom: 1px solid #dfebf6; padding-bottom: 6px"
-          >
-            <div class="news" style="margin-bottom: 6px">
-              <span class="news-item">选择流程</span
-              ><i
-                style="color: #b9bdc9; cursor: pointer"
-                class="es-icon-shu-jituan"
-                @click="
-                  () => {
-                    showFlowChart = true;
-                  }
-                "
-              ></i>
-            </div>
-            <es-radio-group
-              v-model="nodeInfo.nextNode"
-              :data="nodeInfo.option"
-              @change="handleChange"
-              value-key="processDefId"
-              label-key="name"
-            >
-              <es-radio
-                v-for="item of nodeInfo.option"
-                :key="item.processDefId"
-                :label="item.processDefId"
-              >
-                {{ item.name }}
-              </es-radio>
-            </es-radio-group>
-          </div>
-          <es-form
-            v-if="!isStartFlow"
-            ref="nextNode"
-            style="margin-top: 24px"
-            :full="false"
-            :model="isStartFlow ? nodeInfo : nextNode"
-            :rules="rules"
-            :label-width="
-              startFlowPageEmbeddedIntoStartFlowIndex ? '130px' : '150px'
-            "
-            :label-position="formLabelPosition"
-          >
-            <!-- <es-form-item
-            v-if="isStartFlow && nodeInfo.option.length > 0 && !flowListDisabled"
-            prop="nextNode"
-            label="选择流程"
-            :rules="[
-              { required: true, message: `请选择流程`, trigger: 'blur' },
-            ]"
-          >
-            <es-input
-              placeholder="请输入内容"
-              class="input-with-select select-process"
-              :class="{ 'hide-flow-char': isStartFlowChartView != 'true' }"
-            >
-              <es-select
-                slot="prepend"
-                v-model="nodeInfo.nextNode"
-                style="width: calc(100% + 40px)"
-                :placeholder="`请选择流程`"
-                :key="optionsKey"
-                @change="handleChange"
-              >
-                <es-option
-                  v-for="items in nodeInfo.option"
-                  :key="items.id"
-                  :label="items.name"
-                  :disabled="items.disabled"
-                  :value="items.processDefId"
-                ></es-option>
-              </es-select>
-              <es-button
-                slot="append"
-                v-show="isStartFlowChartView == 'true'"
-                icon="es-icon-picture"
-                @click="
-                  () => {
-                    showFlowChart = true;
-                  }
-                "
-              ></es-button>
-            </es-input>
-          </es-form-item> -->
-            <div v-if="!isStartFlow && nodeInfo.option.length == 0">
-              <!-- 加签开始 -->
-              <es-form-item
-                prop="isAddSign"
-                v-if="isCanAddSign"
-                label="是否加签"
-                :rules="[
-                  { required: true, message: `请选择是否加签`, trigger: 'blur' }
-                ]"
-              >
-                <es-radio-group v-model="nextNode.isAddSign">
-                  <es-radio label="1">是</es-radio>
-                  <es-radio label="2">否</es-radio>
-                </es-radio-group>
-              </es-form-item>
-              <div v-show="nextNode.isAddSign === '1'">
-                <es-form-item
-                  prop="addSignUserId"
-                  label="增加本环节办理人"
-                  :rules="[
-                    {
-                      required: false,
-                      message: `请选择办理人`,
-                      trigger: 'blur'
-                    }
-                  ]"
-                >
-                  <SelectUser
-                    :nextUser="nextNode.addSignUserId"
-                    :multiple="true"
-                    title="增加办理人"
-                    @change="changeSelectUser($event, 'addSignUserId', true)"
-                  />
-                </es-form-item>
-                <es-form-item
-                  prop="addSignMode"
-                  v-if="isCanPreAddSign"
-                  label="加签模式"
-                  :rules="[{ required: true, trigger: 'blur' }]"
-                >
-                  <es-radio-group v-model="nextNode.addSignMode">
-                    <es-radio label="preAddSign">前置加签</es-radio>
-                    <es-radio label="postAddSign">后置加签</es-radio>
-                  </es-radio-group>
-                </es-form-item>
-              </div>
-              <!-- 加签结束 -->
-              <!-- 减签开始 -->
-              <es-form-item
-                v-if="isCanRemoveSign"
-                prop="isRemoveSign"
-                label="是否减签"
-                :rules="[
-                  { required: true, message: `请选择是否加签`, trigger: 'blur' }
-                ]"
-              >
-                <es-radio-group v-model="nextNode.isRemoveSign">
-                  <es-radio label="1">是</es-radio>
-                  <es-radio label="2">否</es-radio>
-                </es-radio-group>
-              </es-form-item>
-              <div v-show="nextNode.isRemoveSign === '1'">
-                <es-form-item
-                  prop="removeSignUserId"
-                  label="删除本环节办理人"
-                  :rules="[
-                    {
-                      required: false,
-                      message: `请选择办理人`,
-                      trigger: 'blur'
-                    }
-                  ]"
-                >
-                  <es-checkbox-group v-model="nextNode.removeSignUserId">
-                    <es-checkbox
-                      v-for="item of removeUsers"
-                      :key="item.userId"
-                      :label="item.userId"
-                      >{{ item.username }}</es-checkbox
-                    >
-                  </es-checkbox-group>
-                </es-form-item>
-              </div>
-              <!-- 减签结束 -->
-              <div
-                v-if="
-                  nextNode.isAddSign != '1' &&
-                  nextNode.isRemoveSign != '1' &&
-                  isSpecial
-                "
-              >
-                <es-form-item
-                  prop="nextOperate"
-                  label="下步操作"
-                  v-if="isChooseNextNode == 1"
-                  :rules="[
-                    {
-                      required: true,
-                      message: `请选择下步操作`,
-                      trigger: 'blur'
-                    }
-                  ]"
-                >
-                  <es-select
-                    v-if="nextOperateCheckType == 'select'"
-                    v-model="nextNode.nextOperate"
-                    :placeholder="`请选择下步操作`"
-                    :disabled="operationList && operationList.length == 1"
-                    @change="selecNext($event, true)"
-                  >
-                    <es-option
-                      v-for="items in operationList"
-                      :key="items.key"
-                      :label="items.value"
-                      :value="items.key"
-                    ></es-option>
-                  </es-select>
-                  <es-radio-group
-                    v-else-if="nextOperateCheckType == 'radio'"
-                    v-model="nextNode.nextOperate"
-                    :data="operationList"
-                    @change="selecNext($event, true)"
-                    value-key="key"
-                    label-key="value"
-                  >
-                    <es-radio
-                      v-for="item of operationList"
-                      :key="item.key"
-                      :label="item.key"
-                    >
-                      {{ item.value }}
-                    </es-radio>
-                  </es-radio-group>
-                </es-form-item>
-                <div>
-                  <es-form-item
-                    v-if="!isReject && nodeInfos.length != 0 && isShowNode"
-                    prop="nextNodeId"
-                    label="下步节点"
-                    :rules="[
-                      {
-                        required: true,
-                        message: `请选择下步节点`,
-                        trigger: 'blur'
-                      }
-                    ]"
-                  >
-                    <es-select
-                      v-if="nextNodeCheckType == 'select'"
-                      v-model="nextNode.nextNodeId"
-                      :placeholder="`请选择下步节点`"
-                      :disabled="nodeInfos && nodeInfos.length == 1"
-                      @change="selecNext($event, false)"
-                    >
-                      <es-option
-                        v-for="items in nodeInfos"
-                        :key="items.id"
-                        :label="items.nodeName"
-                        :value="items.nodeId"
-                      ></es-option>
-                    </es-select>
-                    <es-radio-group
-                      v-else-if="nextNodeCheckType == 'radio'"
-                      v-model="nextNode.nextNodeId"
-                      :data="nodeInfos"
-                      @change="selecNext(nextNode.nextNodeId, false)"
-                      value-key="nodeId"
-                      label-key="nodeName"
-                    >
-                      <es-radio
-                        v-for="item of nodeInfos"
-                        :key="item.nodeId"
-                        :label="item.nodeId"
-                      >
-                        {{ item.nodeName }}
-                      </es-radio>
-                    </es-radio-group>
-                  </es-form-item>
-                  <es-form-item
-                    v-if="countersignaturetypeCode != 0"
-                    prop="handleMode"
-                    label="处理方式"
-                  >
-                    <es-input
-                      v-model="handleMode"
-                      placeholder="请输入内容"
-                      disabled
-                    />
-                  </es-form-item>
-                  <es-form-item
-                    v-if="isNextUser"
-                    :prop="isShowNextUser ? 'nextUserId' : 'nextOrgId'"
-                    :label="isShowNextUser ? '下步办理人' : '办理对象'"
-                  >
-                    <SelectUser
-                      :nextUser="
-                        isShowNextUser
-                          ? nextNode.nextUserId
-                          : nextNode.nextOrgId
-                      "
-                      :radioList="radioList"
-                      :multiple="multiple"
-                      :isCustomUser="!isShowNextUser ? 1 : isCustomUser"
-                      :isCurrentNodeForbiddenChangeCandidate="
-                        isCurrentNodeForbiddenChangeCandidate
-                      "
-                      :options="options"
-                      :mix="multiple"
-                      :presetEdit="presetEdit"
-                      :selectUserList="selectUserList"
-                      @change="
-                        changeSelectUser(
-                          $event,
-                          isShowNextUser ? 'nextUserId' : 'nextOrgId',
-                          true
-                        )
-                      "
-                      :types="nextUserTypes"
-                      :params="isShowNextUser ? params : {}"
-                      :tabs="nextUserTabs"
-                    />
-                  </es-form-item>
-
-                  <es-form-item
-                    v-if="isHideCurrentOrg && nextNode.isReturnSubmitter != 1"
-                    prop="nextCurrentOrgObj"
-                    :label="currentOrgName ? currentOrgName : '本单位'"
-                  >
-                    <SelectUser
-                      :nextUser="nextCurrentOrgObjSelect"
-                      multiple
-                      mix
-                      :disableds="currentOrgDisabledObjId"
-                      @change="
-                        disposeAppUnit($event, 'nextCurrentOrgObjSelect')
-                      "
-                      :types="currentOrgSelectorTabs"
-                      :params="currentOrgSelectorParams"
-                    />
-                  </es-form-item>
-                  <es-form-item
-                    v-if="isHideOtherOrg && nextNode.isReturnSubmitter != 1"
-                    prop="nextOtherOrgObj"
-                    :label="otherOrgName ? otherOrgName : '外单位'"
-                  >
-                    <SelectUser
-                      :nextUser="nextOtherOrgObjSelect"
-                      multiple
-                      mix
-                      :where="{ filid: 'other' }"
-                      :disableds="otherOrgDisabledObjId"
-                      @change="disposeAppUnit($event, 'nextOtherOrgObjSelect')"
-                      :types="foreignOrgSelectorTabs"
-                      :params="foreignOrgSelectorParams"
-                    />
-                  </es-form-item>
-                  <es-form-item
-                    v-if="isMainSubProcess && isNodeShowProcess"
-                    prop="mainSubId"
-                    label="主办"
-                  >
-                    <es-select
-                      v-model="nextNode.mainSubId"
-                      :placeholder="`请选择主办`"
-                    >
-                      <es-option
-                        v-for="items in subProcessColumns"
-                        :key="items.id"
-                        :label="items.name"
-                        :value="items.value"
-                      ></es-option>
-                    </es-select>
-                  </es-form-item>
-                  <TimeLimit
-                    v-if="nodeType !== 0 && isLimitedTimeHandling === 1"
-                    :newsList="newsList"
-                    @change="(val) => (nextNode = { ...nextNode, ...val })"
-                  />
-                  <es-form-item
-                    prop="nextReadUserId"
-                    v-if="isTaskread == 1"
-                    label="
-           分阅用户
-          "
-                  >
-                    <SelectUser
-                      :nextUser="nextNode.nextReadUserId"
-                      :multiple="true"
-                      :selectUserList="selectReadUserList"
-                      :options="userOptions"
-                      title="分阅用户"
-                      :mix="true"
-                      :types="types"
-                      @change="changeSelectReadUser($event, 'nextReadUserId')"
-                      :tabs="tabs"
-                    />
-                  </es-form-item>
-                  <es-form-item
-                    prop="presetReadUserId"
-                    v-if="canPresetRead"
-                    label="
-           自动分阅
-          "
-                  >
-                    <SelectUser
-                      :nextUser="nextNode.presetReadUserId"
-                      :multiple="true"
-                      :selectUserList="selectPresetUserList"
-                      :options="presetOptions"
-                      :radioList="presetReadUserId"
-                      :presetEdit="1"
-                      title="分阅用户"
-                      :mix="true"
-                      :types="types"
-                      @change="changeSelectReadUser($event, 'presetReadUserId')"
-                      :tabs="tabs"
-                    />
-                  </es-form-item>
-                  <es-form-item
-                    v-if="enableCustomLimitTimeSetting"
-                    prop="customLimitTime"
-                    label="限时办理"
-                    style="margin-bottom: 10px"
-                  >
-                    <!-- v-if="!showCustomLimitTimeText" -->
-                    <div style="display: flex; width: 100%">
-                      <es-select
-                        style="flex: 1 !important; display: inline-block"
-                        v-model="nextNode.customLimitTimeText"
-                        placeholder="请选择"
-                        @change="handleChangeTime"
-                        sysCode="bpm_custom_limit_time"
-                      ></es-select>
-                      <es-input
-                        style="flex: 1; display: inline-block"
-                        v-model="nextNode.customLimitTime"
-                        placeholder="请输入限时办理的天数"
-                        @change="changeCustomLimitTime"
-                        class="input-with-select custom-limit-time"
-                      >
-                        <!-- <es-button
-                      type="primary"
-                      slot="append"
-                      @click="
-                        () => {
-                          nextNode.customLimitTime = '';
-                          showCustomLimitTimeText = !showCustomLimitTimeText;
-                        }
-                      "
-                      >切换{{
-                        showCustomLimitTimeText ? '选择框' : '文本框'
-                      }}</es-button
-                    > -->
-                      </es-input>
-                      <span style="margin-left: 5px">天</span>
-                    </div>
-                    <!-- slot="prepend" -->
-                  </es-form-item>
-
-                  <es-form-item
-                    v-if="isHandleExplain == 1"
-                    prop="handleExplain"
-                    label="办理说明"
-                  >
-                    <es-input
-                      placeholder="请输入办理说明"
-                      v-model="nextNode.handleExplain"
-                    />
-                  </es-form-item>
-                  <es-form-item
-                    v-if="
-                      currentNodeEnableItemHandleDescription &&
-                      !isReject &&
-                      nodeInfos.length != 0 &&
-                      isShowNode &&
-                      isNextUser
-                    "
-                    prop="nextItemHandleDescription"
-                    label="办理说明"
-                  >
-                    <es-input
-                      placeholder="请输入办理说明"
-                      type="textarea"
-                      :autosize="{ minRows: 2 }"
-                      v-model="nextNode.nextItemHandleDescription"
-                    />
-                  </es-form-item>
-                </div>
-              </div>
-            </div>
-            <CustomPreset
-              v-if="isCustomPreset"
-              ref="customPreset"
-              @changeCustom="
-                (data) => {
-                  presetList = data;
-                }
-              "
-              @changeActiveNames="(val) => (activeNames = val)"
-              @loadingEnd="customLoading('end')"
-              @loadingStart="customLoading('start')"
-              :nextNode="nextNode.nextNodeId"
-              :customPresetHintMessage="customPresetHintMessage"
-              :id="businessIds"
-              :processDefinitionId="nodeInfo.nextNode"
-            />
-            <Preset
-              v-if="isPreset"
-              @changePreset="
-                (data) => {
-                  presetUserJson = data;
-                }
-              "
-              @loadingEnd="customLoading('end')"
-              @loadingStart="customLoading('start')"
-              :nodeId="nextNode.nextNodeId"
-              :businessId="businessIds"
-              :customPresetHintMessage="customPresetHintMessage"
-              :processDefinitionId="nodeInfo.nextNode"
-              :presetTaskNodeMap="presetTaskNodeMap"
-              :presetTaskNodeKeyStr="presetTaskNodeKeyStr"
-            />
-          </es-form>
-          <ProcessForm
-            v-if="
-              isStartFlow &&
-              nodeInfo.nextNode &&
-              startFlowPageEmbeddedIntoStartFlowIndex &&
-              !directCreateCircularReadWhenFlowStarted
-            "
-            ref="processFormIndex"
-            :id="freeStartFlowParams.startFlowBusinessId || businessIds"
-            :simpleTips="simpleTips"
-            :is-free-start-flow="
-              freeStartFlowParams.useScene === 'multiInsMidwayWithSubmitScene'
-            "
-            :label-position="formLabelPosition"
-            :showBtn="false"
-            :formTitle="formTitle"
-            :urgencyLevel="urgencyLevel"
-            :messageType="newsList"
-            :copy-history="freeStartFlowParams.pendedHistoryHandle"
-            :process-definition-id="freeStartFlowNextNode || nodeInfo.nextNode"
-            :opinion="value"
-            :keyCount="msgTypeCount"
-            :pendingId="pendingId"
-            :taskExamineParam="freeStartFlowParams.newFlowStartNodeItemName"
-            :taskParams="taskParams"
-            :formType="processFormType"
-            @cancel="closeProcess($event, 'handleVisible', closeParent)"
-          />
-          <circulate
-            v-else-if="
-              isStartFlow &&
-              nodeInfo.nextNode &&
-              startFlowPageEmbeddedIntoStartFlowIndex &&
-              directCreateCircularReadWhenFlowStarted
-            "
-            ref="flowCirculate"
-            :label-position="formLabelPosition"
-            :businessId="businessId"
-            :startFlowPageEmbeddedIntoStartFlowIndex="
-              startFlowPageEmbeddedIntoStartFlowIndex
-            "
-            :formTitle="formTitle"
-            :processDefinitionId="nodeInfo.nextNode"
-            :simpleTips="simpleTips"
-            :showBtn="false"
-            :selectorParams="selectorParams"
-            :oldOption="value"
-            @cancel="closeProcess($event, 'circulateVisible')"
-          />
-          <message
-            v-if="!isStartFlow && isSpecial && newsList.length > 0"
-            v-model="formData"
-            :readonly="notificationMessageReadOnly"
-            :disableds="readOnlyNotificationType"
-            :types="newsList"
-          />
-        </div>
-        <es-form
-          ref="nextNode"
-          :full="false"
-          :model="isStartFlow ? nodeInfo : nextNode"
-          v-if="isEndMessage"
-          :label-width="
-            startFlowPageEmbeddedIntoStartFlowIndex ? '130px' : '150px'
-          "
-          style="padding: 0px 8px; margin-top: 24px"
-          :label-position="formLabelPosition"
-        >
-          <es-form-item prop="nextItemHandleDescription" label="办结意见">
-            <es-input
-              placeholder="请输入办结意见"
-              type="textarea"
-              :autosize="{ minRows: 2 }"
-              v-model="endMessage"
-              @change="handleEndMessageChange"
-            />
-          </es-form-item>
-        </es-form>
-
-        <div class="es-flow-buttons" v-if="newTypeCode != 'fenyue' && !shrink">
-          <!-- style="margin-top: 10px" -->
-          <div v-if="isSubmitButtonShowAgreeAndDisagree == 1">
-            <es-button
-              class="es-button-agree"
-              type="primary"
-              @click="subProcess('同意。')"
-              >同意</es-button
-            >
-            <es-button class="es-button-agree" @click="subProcess('不同意。')"
-              >不同意</es-button
-            >
-            <es-button
-              class="es-button-agree-save"
-              v-if="!isHideTemporarySave"
-              @click="saveInfo()"
-              >{{ saveButtonName }}</es-button
-            >
-          </div>
-          <div
-            class="es-user-defined"
-            v-if="
-              (nodeInfos.length > 0 ||
-                nodeInfo.option.length > 0 ||
-                operationList.length > 0) &&
-              btnList.length <= 2
-            "
-          >
-            <es-button
-              v-show="isSubmitButtonShowAgreeAndDisagree != 1"
-              v-for="item of hideBtn || isHideTemporarySave
-                ? btnList.slice(0, 1)
-                : btnList"
-              :key="item.name"
-              :type="item.type"
-              :style="btnStyle"
-              @click="
-                item.event === 'sub' ? subProcess() : saveInfo(false, item)
-              "
-            >
-              {{ item.event == 'save' ? saveButtonName : item.text }}
-            </es-button>
-
-            <div
-              v-if="
-                btnList.length > 1 ||
-                (!isStartFlow &&
-                  (rejectObj.fun || pointsReadingObj.fun || typeList))
-              "
-              placement="top"
-              :class="{ 'em-flow-more-btn': !hideBtn }"
-              trigger="click"
-            >
-              <div v-if="!isStartFlow && !hideBtn" class="es-footer-btn">
-                <es-button
-                  v-if="rejectObj.fun"
-                  @click="rejectBtn"
-                  style="margin-right: 10px"
-                  type="danger"
-                >
-                  {{ rejectObj.value }}
-                </es-button>
-                <!-- <es-button
-                v-if="pointsReadingObj.fun"
-                class="es-flow-btn"
-                @click="taskReadBtn"
-                >分阅</es-button
-              > -->
-                <!-- <es-button
-                class="es-flow-btn"
-                v-for="item of typeList"
-                :key="item.key"
-                @click="goView(item)"
-              >
-                {{ item.value }}
-              </es-button> -->
-              </div>
-              <es-button-group
-                slot="reference"
-                style="margin: 0px 10px"
-                v-if="hideBtn"
-              >
-                <es-button
-                  v-show="isSubmitButtonShowAgreeAndDisagree != 1"
-                  v-for="item of btnList.slice(1)"
-                  :key="item.name"
-                  :type="item.type"
-                  :style="btnStyle"
-                  @click.stop="
-                    item.event === 'sub' ? subProcess() : saveInfo(false, item)
-                  "
-                >
-                  {{ item.event == 'save' ? saveButtonName : item.text }}
-                </es-button>
-                <es-dropdown
-                  v-if="
-                    !isStartFlow &&
-                    (rejectObj.fun ||
-                      pointsReadingObj.fun ||
-                      typeList.length > 0)
-                  "
-                  trigger="click"
-                  placement="top"
-                  style="border-left: 1px solid #d9d9d9"
-                >
-                  <es-button>...</es-button>
-                  <es-dropdown-menu slot="dropdown">
-                    <es-dropdown-item v-for="item of typeList" :key="item.key">
-                      <div class="es-flow-btn" @click="goView(item)">
-                        {{ item.value }}
-                      </div>
-                    </es-dropdown-item>
-                    <es-dropdown-item v-if="pointsReadingObj.fun">
-                      <div class="es-flow-btn" @click="taskReadBtn">分阅</div>
-                    </es-dropdown-item>
-                    <es-dropdown-item v-if="rejectObj.fun">
-                      <div style="color: red" @click="rejectBtn">
-                        {{ rejectObj.value }}
-                      </div>
-                    </es-dropdown-item>
-                  </es-dropdown-menu>
-                </es-dropdown>
-              </es-button-group>
-            </div>
-          </div>
-        </div>
-        <div v-else-if="!shrink" class="es-fenyue-buttons">
-          <es-button
-            type="primary"
-            size="medium"
-            class="es-fenyue-buttons-yj"
-            :style="`margin: 10px 0px`"
-            @click="taskRead()"
-          >
-            阅结
-          </es-button>
-          <es-button
-            v-show="isCanReadTransferHandle"
-            size="medium"
-            style="margin: 10px 0px; margin-left: 10px"
-            :disabled="readTransferHandleDisabled"
-            @click="taskReadTransferHandle()"
-          >
-            阅转办
-          </es-button>
-          <es-button
-            class="es-flow-btn"
-            v-if="isCanFenyue == '1'"
-            size="medium"
-            style="margin: 10px 0px; margin-left: 10px"
-            @click="taskReadBtn"
-            >分阅</es-button
-          >
-        </div>
-      </template>
-      <!-- 弹窗内容 -->
-      <es-dialog
-        v-if="circulateVisible"
-        append-to-body
-        height="400"
-        ref="circulateVisible"
-        title="发起传阅"
-        :close-on-click-modal="false"
-        :visible.sync="circulateVisible"
-        :closeParent="closeParent"
-      >
-        <circulate
-          :businessId="businessId"
-          :processDefinitionId="nodeInfo.nextNode"
-          :simpleTips="simpleTips"
-          :selectorParams="selectorParams"
-          :oldOption="value"
-          @cancel="closeProcess($event, 'circulateVisible')"
-        />
-      </es-dialog>
-      <es-dialog
-        v-if="handleVisible"
-        append-to-body
-        height="auto"
-        class="flow-dialog"
-        ref="handleVisible"
-        :title="title"
-        :close-on-click-modal="false"
-        :visible.sync="handleVisible"
-        :closeParent="closeParent"
-      >
-        <ProcessForm
-          :id="freeStartFlowParams.startFlowBusinessId || businessIds"
-          :pending-id="pendingId"
-          :simpleTips="simpleTips"
-          :is-free-start-flow="
-            freeStartFlowParams.useScene === 'multiInsMidwayWithSubmitScene'
-          "
-          :pendingId="pendingId"
-          :copy-history="freeStartFlowParams.pendedHistoryHandle"
-          :process-definition-id="freeStartFlowNextNode || nodeInfo.nextNode"
-          :opinion="value"
-          :taskExamineParam="freeStartFlowParams.newFlowStartNodeItemName"
-          :taskParams="taskParams"
-          :formType="processFormType"
-          @cancel="closeProcess($event, 'handleVisible', closeParent)"
-        />
-      </es-dialog>
-      <es-dialog
-        append-to-body
-        :close-on-click-modal="false"
-        title="流程图查看"
-        :visible.sync="showFlowChart"
-        v-if="showFlowChart"
-      >
-        <!-- <FlowChart :nodeId="nodeInfo.nextNode" v-if="showFlowChart" /> -->
-        <img
-          style="width: 100%"
-          :src="`${charUrl}/bpm/service/diagram/getpng.png?processDefinitionId=${nodeInfo.nextNode}`"
-          alt="加载失败"
-        />
-      </es-dialog>
-      <es-dialog
-        v-if="showReject"
-        append-to-body
-        class="flow-dialog"
-        height="400px"
-        title="驳回"
-        ref="showReject"
-        :close-on-click-modal="false"
-        :visible.sync="showReject"
-      >
-        <ProcessReject
-          :pending-id="pendingId"
-          :option="value"
-          :simpleTips="simpleTips"
-          :show-reject="showReject"
-          :news-info="nextNode.notificationMsg"
-          @cancel="closeProcess($event, 'showReject')"
-        />
-      </es-dialog>
-      <es-dialog
-        v-if="showTaskRead"
-        append-to-body
-        class="flow-dialog"
-        height="400px"
-        ref="showTaskRead"
-        :close-on-click-modal="false"
-        :title="taskReadType === 'transfer' ? '转办' : '分阅'"
-        :visible.sync="showTaskRead"
-      >
-        <StartTaskRead
-          :pending-id="pendingId"
-          :opinion="value"
-          :type="taskReadType"
-          :selectorConfig="selectorConfig"
-          :simpleTips="simpleTips"
-          :subParams="subParams"
-          :taskExamine="taskExamineInfo"
-          :news-info="nextNode.notificationMsg"
-          @cancel="closeProcess($event, 'showTaskRead')"
-        />
-      </es-dialog>
-      <es-dialog
-        v-if="showSendMsg"
-        append-to-body
-        height="400"
-        title="发送消息"
-        class="flow-dialog"
-        ref="showSendMsg"
-        :close-on-click-modal="false"
-        :visible.sync="showSendMsg"
-      >
-        <SendMsg
-          @cancel="closeProcess($event, 'showSendMsg')"
-          :simpleTips="simpleTips"
-          :pendingId="pendingId"
-          :newsList="newsList"
-        />
-      </es-dialog>
-      <es-dialog
-        v-if="showTaskUnionExamine"
-        append-to-body
-        height="400"
-        class="flow-dialog"
-        ref="showTaskUnionExamine"
-        :close-on-click-modal="false"
-        :title="flowTitle"
-        :visible.sync="showTaskUnionExamine"
-      >
-        <TaskUnionExamine
-          @cancel="closeProcess($event, 'showTaskUnionExamine')"
-          :simpleTips="simpleTips"
-          :pendingId="pendingId"
-          :defaultOpinion="nodeDefaultSubmitOpinion"
-          :oldOption="value"
-          :selectorParams="selectorParams"
-          :type="flowType"
-          :multiple="flowMultiple"
-          :disabled="flowDisabled"
-        />
-      </es-dialog>
-      <es-dialog
-        v-if="showFreeStartFlow"
-        height="400"
-        class="flow-dialog"
-        ref="handleVisible"
-        :title="title"
-        :close-on-click-modal="false"
-        :visible.sync="showFreeStartFlow"
-      >
-        <free-start-flow
-          v-if="showFreeStartFlow"
-          isStartFlow
-          v-bind="freeStartFlowParams"
-          :simpleTips="simpleTips"
-          @close="showFreeStartFlow = false"
-          @success="freeStartFlowSuccess"
-          :btnList="[{ text: '提交', event: 'sub', type: 'primary' }]"
-          :taskParams="taskParams"
-        ></free-start-flow>
-        <!-- @success="handleSuccess"
-    @save="handleSave" -->
-      </es-dialog>
-    </template>
-  </es-form>
+      <!-- 意见区域 end -->
+      <!-- 开始流程 -->
+      <start-flow />
+      <!-- 开始流程 end -->
+    </es-form>
+  </div>
 </template>
 
 <script>
 import Opinions from './component/opinions.vue';
+import StartFlow from './components/start-flow.vue';
 import QuickActions from './component/quick-actions.vue';
 import Message from './component/message.vue';
 import ProcessForm from './processForm.vue';
@@ -1368,10 +84,11 @@ import { success, warning, error, loading } from 'eoss/src/utils/util';
 import { ajax } from 'eoss/src/utils/ajax';
 import { getStorage } from 'eoss/src/utils/storage';
 export default {
-  name: 'EsFlow',
-  componentName: 'EsFlow',
+  name: 'EsFlows',
+  componentName: 'EsFlows',
   components: {
     Opinions,
+    StartFlow,
     QuickActions,
     Message,
     ProcessForm,
@@ -1390,10 +107,6 @@ export default {
     FreeCirculation
   },
   props: {
-    /**
-     * 是否隐藏流程
-     */
-    showShrink: { type: Boolean, default: true },
     /**
      * 是否发起流程
      */
@@ -1639,9 +352,11 @@ export default {
     width: {
       immediate: true,
       handler(val) {
-        if (val) {
-          this.styles = { width: parseInt(val, 10) + 'px' };
-        }
+        this.styles = !this.show
+          ? { width: 0 }
+          : val
+          ? { width: parseInt(val, 10) + 'px' }
+          : {};
       }
     },
     businessId(val) {
@@ -1691,6 +406,8 @@ export default {
   },
   data() {
     return {
+      // 是否展示流程组件
+      show: true,
       // 表单校验规则
       formRules: {
         // 意见校验规则
@@ -1783,7 +500,6 @@ export default {
       selectNextCurrentOrgObjList: [],
       flowMultiple: true,
       isCustomUser: 0,
-      shrink: false,
       shrinkAbled: false,
       freeValid: true,
       taskExamineInfo: {},
@@ -1905,9 +621,6 @@ export default {
   created() {
     this.getUserInfo();
   },
-  destroyed() {
-    this.shrink = false;
-  },
   mounted() {
     this.businessIds = this.businessId;
     this.currentOrgSelectorParams.filid = JSON.parse(
@@ -2021,7 +734,7 @@ export default {
           this.nodeInfos.length > 1 ||
           this.taskOperationShiftedNodeList) &&
           this.newTypeCode != 'fenyue' &&
-          !this.shrink &&
+          !this.show &&
           this.btnType === 'default') ||
         this.btnType != 'default';
       return isDefaultFlex ? 'unset' : '1';
@@ -2236,12 +949,12 @@ export default {
         }
       }
     },
-    setShrink() {
-      this.shrink = !this.shrink;
-      this.styles = this.shrink
+    handleShrink() {
+      this.show = !this.show;
+      this.styles = !this.show
         ? { width: 0 }
         : { width: this.width ? parseInt(this.width, 10) + 'px' : '' };
-      this.$emit('shrink', this.shrink);
+      this.$emit('shrink', this.show);
     },
     customLoading(type) {
       if (type != 'end') {
@@ -3884,7 +2597,7 @@ export default {
       if (
         !this.endFlow &&
         this.newTypeCode != 'fenyue' &&
-        !this.shrink &&
+        !this.show &&
         this.nextNode.isAddSign != '1' &&
         this.nextNode.isRemoveSign != '1' &&
         this.isSpecial &&