hrp-ui-base 1.0.0 → 1.0.2

package/packages/approval-process/packages/flow/submit-approve.vue

@@ -0,0 +1,628 @@
+<!-- 审批页面 适配移动端并且要有插槽，同时对插槽的数据可以进行读取 -->
+<template>
+  <div class="submit-big-box">
+    <div class="submit-page-box flex-column-start-center" v-if="isPc && !haveSubmit">
+      <div class="submit-inner-page-box">
+        <!-- 返回，标题以及选择部门盒子 -->
+        <div class="inner-page-item inner-page-top-box">
+          <div class="inner-page-top-dept-top flex-row-start-center">
+            <el-icon style="font-size: 16px;cursor: pointer;" @click="backList">
+              <ArrowLeft />
+            </el-icon>
+            <div class="submit-back" @click="backList">返回</div>
+            <div class="inner-page-divide"></div>
+            <div class="inner-page-top-dept-title">{{ props.jobName ? props.jobName : '新增固定资产采购申请' }}
+            </div>
+          </div>
+          <div class="inner-page-top-dept-bottom flex-column-start"
+            v-show="deptList.length !== 1 && pageType == 'step1' && !props.promoterDeptId">
+            <div class="inner-page-top-dept-bottom-title">发起人所在部门</div>
+            <div class="inner-page-top-form-box flex-row-start">
+              <div class="inner-page-top-form-title">选择部门</div>
+              <el-select size="default" v-model="chooseDept" clearable placeholder="请选择"
+                class="inner-page-top-form-content">
+                <el-option :value="item.deptId" :label="item.deptName" v-for="(item) in deptList"
+                  :key="item.deptId"></el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <!-- 选择部门盒子 -->
+        <!-- <div class="inner-page-item" v-show="deptList.length !== 1 && pageType == 'step1'">
+        <div class="inner-page-item-header">发起人所在部门： </div>
+        <div class="formBox">
+          <el-select size="default" v-model="chooseDept" clearable placeholder="请选择">
+            <el-option :value="item.deptId" :label="item.deptName" v-for="(item) in deptList"
+              :key="item.deptId"></el-option>
+          </el-select>
+        </div>
+      </div> -->
+        <!-- 中部表单盒子 -->
+        <div class="inner-page-item" v-show="pageType == 'step1'">
+          <div class="formBox">
+            <slot></slot>
+          </div>
+        </div>
+        <div v-show="pageType == 'step2'">
+          <slot name="showInfo"></slot>
+        </div>
+        <!-- 审批流盒子 -->
+        <div class="inner-page-item" v-show="pageType == 'step2'">
+          <div class="inner-page-item-header">审批节点</div>
+          <div class="processBox">
+            <el-timeline>
+              <el-timeline-item v-for="(item, index) in  activities " :key="index" :type="item.type" size="large">
+                <div class="timeLineTtem flexRowStart">
+                  <img :src="item.userList[0].avatar" alt="头像"
+                    v-if="item.userList && item.userList.length <= 1 && !item.chooseUser && item.userList[0] && item.userList[0].avatar">
+                  <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt="头像"
+                    v-else-if="item.userList && item.userList.length <= 1 && !item.chooseUser && item.userList[0] && !item.userList[0].avatar">
+                  <div class="flexRowAroundWrap imgbox"
+                    v-else-if="(item.userList && item.userList.length > 1) && !item.chooseUser">
+                    <img src="hrp-ui-base/assets/process/manyPeople2.png" alt="头像"
+                      style="margin-right: 0;width: 35px;height: 25px;">
+                  </div>
+                  <div v-else-if="item.chooseUser" class="iconBox">
+                    <ChooseMember :submitAdd="true" v-model="item.userList"
+                      :dataSources="item.chooseType == 'user' ? 'user' : item.chooseType == 'role' ? 'role' : 'all'"
+                      :dataSourcesCondition="item.chooseList ? item.chooseList : []"></ChooseMember>
+                  </div>
+                  <div class="flexColumnStart porcessTime">
+                    <div class="porcessTimeNodeNameBig">{{ item.nodeName }}</div>
+                    <div class="porcessTimeNameBox flexRowStartCenter">
+                      <div class="porcessTimeName flexRowStart">{{ item.userList &&
+      item.userList.length > 1 && !item.chooseUser ? item.userList.length + '位' +
+    (item.nodeType ==
+      'Approver' ? '审批人' : item.nodeType == 'Ccto' ? '抄送人' : item.nodeType ==
+        'Executor' ? '执行人' : '') : (item.userList &&
+          item.userList.length > 0) && item.chooseUser ?
+      item.userList.length + '位' + (item.nodeType ==
+        'Approver' ? '审批人' : item.nodeType == 'Ccto' ? '抄送人' : item.nodeType ==
+          'Executor' ? '执行人' : '') : item.userList && item.userList[0] &&
+      item.userList[0].userName }}</div>
+                      <!-- <div class="porcessTimeTime"
+                                            v-if="!(item.userList && item.userList.length > 0)">
+                                            {{ item.timestamp }}</div> -->
+                    </div>
+                    <div class="porcessTimeNodeName">{{ item.nodeType == 'Approver' ? '审批节点' : item.nodeType
+      == 'Ccto' ? '抄送节点' : item.nodeType == 'Executor' ? '执行节点' : '' }}</div>
+
+                    <div class="porcessTimeNodeStatus" :style="{ color: '#66bc5c' }"
+                      v-if="item.userList && item.userList.length > 1 && (item.nodeType == 'Approver' || item.nodeType == 'Executor')">
+
+                      <span v-if="item.nodeType == 'Approver'">
+                        {{
+      item.multipleAuditType == '1' ? '会签（需所有审批人同意）' : item.multipleAuditType ==
+        '2' ? '或签（一名审批人同意即可）' : item.multipleAuditType == '3' ? '依次审批（按顺序依次执行）' : '' }}
+                      </span>
+                      <span v-if="item.nodeType == 'Executor'"> {{
+      item.multipleAuditType == '1' ? '会签（需所有执行人人提交）' : item.multipleAuditType ==
+        '2' ? '或签（一名执行人提交即可）' : item.multipleAuditType == '3' ? '依次审批（按顺序依次提交）' : ''
+    }}</span>
+
+                    </div>
+                    <!-- 子节点 -->
+                    <div class="sonItemBox flexColumnStart"
+                      v-if="(item.chooseUser || (item.userList && item.userList.length > 1))">
+                      <div class="sonItem flexRowStart" v-for="( sonItem, sonIndex ) in  item.userList 
+                                        " :key="sonIndex">
+                        <img :src="sonItem.avatar" alt="头像" v-if="sonItem.avatar">
+                        <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt="" v-else>
+                        <div class="flexColumnStart porcessTime">
+                          <div class="porcessTimeNameBox flexRowStartCenter">
+                            <div class="porcessTimeName flexRowStart">{{ sonItem.userName }}</div>
+                          </div>
+                          <div class="porcessTimeNodeName">{{ item.nodeType == 'Approver' ?
+      '审批人' : item.nodeType == 'Ccto' ? '抄送人' : item.nodeType ==
+        'Executor' ? '执行人' : '' }}</div>
+                          <!-- <div class="porcessTimeNodeStatus"
+                                                    :style="sonItem.nodeStatusName == '处理中' ? { color: '#f37327' } : { color: '#66bc5c' }">
+                                                    {{
+                                                        sonItem.nodeStatusName }}</div> -->
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </div>
+      </div>
+      <!-- 审批按钮 -->
+      <div class="submit-button-box">
+        <slot name="temp" v-if="pageType == 'step1'">
+
+        </slot>
+
+        <el-button size="default" v-if="pageType == 'step1'" @click="goStep2" type="primary"
+          :disabled="submitLoading">下一步</el-button>
+        <el-button size="default" v-if="pageType == 'step2'" @click="changePageType('step1')"
+          :disabled="submitLoading">返回上一步</el-button>
+        <el-button size="default" type="primary" v-if="pageType == 'step2'" @click="submitProcess"
+          :disabled="submitLoading">提交</el-button>
+      </div>
+    </div>
+    <div class="phonePageBox" v-if="!isPc && !haveSubmit">
+      <!-- 选择机构盒子 -->
+      <div class="submit-inner-page-box" v-show="deptList.length !== 1 && pageType == 'step1'">
+        <div class="inner-page-item">
+          <div class="inner-page-item-header">发起人所在部门：</div>
+          <div class="formBox">
+            <el-select size="default" v-model="chooseDept">
+              <el-option :value="item.deptId" :label="item.deptName" v-for="(item) in deptList"
+                :key="item.deptId"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <!-- 中部表单盒子 -->
+      <div class="submit-inner-page-box" v-show="pageType == 'step1'">
+        <div class="innerPageItem ">
+          <div class="formBox">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <!-- 审批流盒子 -->
+      <div class="submit-inner-page-box" v-show="pageType == 'step2'">
+        <div class="innerPageItem innerAuditBody hide-scroll-bar" style="overflow: scroll">
+          <div v-show="pageType === 'step2'">
+            <slot name="showInfo"></slot>
+          </div>
+          <div class="inner-page-item-header">审批节点</div>
+          <div class="processBox">
+            <el-timeline>
+              <el-timeline-item v-for="(item, index) in  activities " :key="index" :type="item.type" size="large">
+                <div class="timeLineTtem flexRowStart">
+                  <img :src="item.userList[0].avatar" alt="头像"
+                    v-if="item.userList && item.userList.length <= 1 && !item.chooseUser && item.userList[0] && item.userList[0].avatar">
+                  <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt=""
+                    v-else-if="item.userList && item.userList.length <= 1 && !item.chooseUser && item.userList[0] && !item.userList[0].avatar">
+                  <div class="flexRowAroundWrap imgbox"
+                    v-else-if="(item.userList && item.userList.length > 1) && !item.chooseUser">
+                    <img src="hrp-ui-base/assets/process/manyPeople2.png" alt="头像"
+                      style="margin-right: 0;width: 35px;height: 25px;" />
+                  </div>
+                  <div v-else-if="item.chooseUser" class="iconBox">
+                    <ChooseMemberPhone ref="chooseMemberPhoneRef"
+                      :dataSources="item.chooseType == 'user' ? 'user' : item.chooseType == 'role' ? 'role' : 'all'"
+                      :dataSourcesCondition="item.chooseList ? item.chooseList : []" v-model="item.userList"
+                      :submit-add="true">
+                    </ChooseMemberPhone>
+                  </div>
+                  <div class="flexColumnStart porcessTime">
+                    <div class="porcessTimeNodeNameBig">{{ item.nodeName }}</div>
+                    <div class="porcessTimeNameBox flexRowStartCenter">
+
+                      <div class="porcessTimeName flexRowStart">{{ item.userList && item.userList.length > 1 &&
+      !item.chooseUser ? item.userList.length + '位' + (item.nodeType == 'Approver' ? '审批人' :
+        item.nodeType == 'Ccto' ? '抄送人' : item.nodeType == 'Executor' ? '执行人' : '') : (item.userList &&
+          item.userList.length > 0) && item.chooseUser ? item.userList.length + '位' + (item.nodeType ==
+            'Approver' ? '审批人' : item.nodeType == 'Ccto' ? '抄送人' : item.nodeType == 'Executor' ? '执行人' : '')
+      :
+      item.userList && item.userList[0] && item.userList[0].userName }}</div>
+                    </div>
+                    <div class="porcessTimeNodeName">{{ item.nodeType == 'Approver' ? '审批节点' : item.nodeType == 'Ccto' ?
+      '抄送节点' : item.nodeType == 'Executor' ? '执行节点' : '' }}</div>
+                    <!-- <div class="porcessTimeNodeName">{{ item.nodeName }}</div> -->
+                    <div class="porcessTimeNodeStatus" :style="{ color: '#66bc5c' }"
+                      v-if="item.userList && item.userList.length > 1 && (item.nodeType == 'Approver' || item.nodeType == 'Executor')">
+                      <span v-if="item.nodeType == 'Approver'">
+                        {{ item.multipleAuditType == '1' ? '会签（需所有审批人同意）' : item.multipleAuditType == '2' ?
+      '或签（一名审批人同意即可）'
+      : item.multipleAuditType == '3' ? '依次审批（按顺序依次执行）' : '' }}
+                      </span>
+                      <span v-if="item.nodeType == 'Executor'"> {{
+      item.multipleAuditType == '1' ? '会签（需所有执行人人提交）' : item.multipleAuditType == '2' ?
+        '或签（一名执行人提交即可）'
+        : item.multipleAuditType == '3' ? '依次审批（按顺序依次提交）' : '' }}</span>
+                    </div>
+                    <!-- 子节点 -->
+                    <div class="sonItemBox flexColumnStart"
+                      v-if="(item.chooseUser || (item.userList && item.userList.length > 1))">
+                      <div class="sonItem flexRowStart" v-for="( sonItem, sonIndex ) in  item.userList 
+                                        " :key="sonIndex">
+                        <img :src="sonItem.avatar" alt="头像" v-if="sonItem.avatar">
+                        <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt="" v-else>
+                        <div class="flexColumnStart porcessTime">
+                          <div class="porcessTimeNameBox flexRowStartCenter">
+                            <div class="porcessTimeName flexRowStart">{{ sonItem.userName }}</div>
+                            <!-- <div class="porcessTimeTime">{{
+                                                        sonItem.timestamp }}
+                                                    </div> -->
+                          </div>
+                          <div class="porcessTimeNodeName">{{ item.nodeType == 'Approver' ?
+                            '审批人' : item.nodeType == 'Ccto' ? '抄送人' : item.nodeType ==
+                            'Executor' ? '执行人' : '' }}</div>
+                          <!-- <div class="porcessTimeNodeStatus"
+                                                    :style="sonItem.nodeStatusName == '处理中' ? { color: '#f37327' } : { color: '#66bc5c' }">
+                                                    {{
+                                                        sonItem.nodeStatusName }}</div> -->
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+
+          </div>
+        </div>
+      </div>
+      <div style="height:50px;width:100%"></div>
+      <!-- 审批按钮 -->
+      <div class="submit-button-box" v-show="buttonShow">
+        <!-- <el-button type="primary" size="default" @click="openDialog('1')">同意</el-button>
+            <el-button size="default" @click="openDialog('2')">拒绝</el-button>
+            <el-button size="default">撤销</el-button> -->
+        <el-button size="default" v-if="pageType == 'step1'" @click="goStep2">下一步</el-button>
+        <el-button size="default" v-if="pageType == 'step2'" @click="changePageType('step1')">返回上一步</el-button>
+        <el-button size="default" type="primary" v-if="pageType == 'step2'" @click="submitProcess"
+          :loading="submitLoading">提交</el-button>
+      </div>
+
+    </div>
+    <el-dialog v-model="centerDialogVisible" :width="isPc ? '40%' : '80%'" center>
+      <div class="flexColumnStart">
+        <div>审批意见</div>
+        <el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入..." />
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="centerDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">
+            确认
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+
+</template>
+<script lang="ts" setup>
+import { ref, watch, onActivated, PropType, onMounted } from "vue";
+import { MoreFilled } from '@element-plus/icons-vue'
+import { ElMessage } from "element-plus";
+import { IsPhone } from '../utils/getEnv'
+import ChooseMember from './systemCom/choose-member.vue'
+import ChooseMemberPhone from './systemCom/choose-member-phone.vue'
+import throttle from "../utils/throttle";
+/** controller 以及 bo */
+// import FlowSheetController from "hrp-ui-base/api/bms/flow/FlowSheetController";
+import FlowProcessController from "hrp-ui-base/api/bms/flow/FlowProcessController";
+// import FlowInstanceController from "hrp-ui-base/api/bms/flow/FlowInstanceController";
+import DeptController from 'hrp-ui-base/api/hrms/dept/deptController'
+// bo
+import DeptVo from "hrp-ui-base/api/hrms/dept/bo/DeptVo";
+import FlowInstanceBO from "hrp-ui-base/api/bms/flow/bo/FlowInstanceBO";
+
+
+const emits = defineEmits(['validateForm', 'submitProcess','backList'])
+const props = defineProps({
+  /** 是否可以提交 */
+  'canSubmit': {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  /** 业务表单数据 */
+  'sendForm': {
+    type: Object as PropType<any>,
+    required: false,
+    default: () => { return {} }
+  },
+  /** 当前的流应用id */
+  'appId': {
+    type: String,
+    required: true,
+    default: ''
+  },
+  /** 控制loading的传参 */
+  'submitLoading': {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  /** 发起人的id */
+  'promoterId': {
+    type: String,
+    required: true,
+    default: ''
+  },
+  /** 发起人的部门id - 暂未启用 - 等待反馈后开发使用*/
+  'promoterDeptId': {
+    type: String,
+    required: false,
+    default: ''
+  },
+  /** 服务名称 */
+  'jobName': {
+    type: String,
+    required: true,
+    default: ''
+  },
+  /** 列表的地址，用来返回列表 */
+  listPath: {
+    type: String,
+    required: true,
+    default: ''
+  }
+})
+let isPc = !IsPhone()
+// 分步逻辑 step1 表单提交页面  step2 得到流页面
+const pageType = ref<string>('step1')
+// 切换当前第几步骤
+const changePageType = (value: string) => {
+  pageType.value = value
+}
+// 当前提交页面选择的机构
+const chooseDept = ref<string>('')
+// 下一步 功能点 需要校验表单必填 
+const goStep2 = new throttle().use(async () => {
+  await emits('validateForm')
+  if (props.promoterDeptId || chooseDept.value) {
+    setTimeout(() => {
+      if (props.canSubmit) {
+        let postObj = <any>{}
+        for (let i in props.sendForm) {
+          if (props.sendForm[i].value) {
+            if (props.sendForm[i].value.constructor == Object) {
+              // 暂时未出现对象的情况
+            } else if (Array.isArray(props.sendForm[i].value)) {
+              let oobj = JSON.parse(JSON.stringify(props.sendForm[i]))
+              let arrr = []
+              for (let j = 0; j < props.sendForm[i].value.length; j++) {
+                arrr.push(props.sendForm[i].value[j].id)
+              }
+              oobj.value = arrr.join(',')
+              postObj[i] = oobj
+            } else {
+              postObj[i] = props.sendForm[i]
+            }
+
+          } else {
+
+            postObj[i] = props.sendForm[i]
+
+          }
+
+        }
+        console.error(postObj)
+        FlowProcessController.selectInstanceNodeList(postObj, props.promoterId, props.promoterDeptId ? props.promoterDeptId : chooseDept.value, props.appId).then((data: any) => {
+          console.log(data)
+          if (data.code == 200) {
+            changePageType('step2')
+            if (data.res && data.res.length > 0) {
+              activities.value = data.res
+              let arr = []
+              data.res.forEach((i: any) => {
+                if (i && i.userList) {
+                  arr.push(i)
+                } else {
+                  let obj = i
+                  i.userList = []
+                  arr.push({ ...obj })
+                }
+              })
+            } else {
+
+              activities.value = []
+
+            }
+
+          }
+
+        })
+      } else {
+      }
+    }, 500)
+  } else {
+    ElMessage({
+      message: '请选择发起人机构',
+      type: 'error'
+    })
+  }
+}, 1000, true)
+const haveSubmit = ref<boolean>(false)
+// 提交loading
+const submitLoading = ref<boolean>(false)
+watch(() => { return props.submitLoading }, () => {
+  submitLoading.value = props.submitLoading
+}, { deep: true })
+// 提交表单
+const submitProcess = new throttle().use(() => {
+  console.log('提交流信息以及表单信息', activities.value)
+  let submitObj: FlowInstanceBO = { instanceNodeBOList: [], sheetNumber: props.appId, instanceName: props.jobName ? props.jobName : '未命名表单', businessFormId: '', agentUserId: props.promoterId }
+  let canSubmitPickSelf = true
+  activities.value.forEach((item: any) => {
+    let ids = <string[]>[]
+    if (item.userList && Array.isArray(item.userList)) {
+      item.userList.forEach((j: any) => {
+        ids.push(j.userId)
+      })
+    }
+    if ((!item.userList || !Array.isArray(item.userList) || item.userList.length == 0) && item.chooseUser && !item.nullType) {
+      canSubmitPickSelf = false
+    }
+    submitObj.instanceNodeBOList.push({
+      processNodeId: item.processNodeId,
+      nodeType: item.nodeType,
+      userIdList: ids,
+      multipleAuditType: item.multipleAuditType,
+      nodeName: item.nodeName,
+    })
+
+  })
+  let ruleForm2: any = {}
+  if ((props.sendForm.constructor === Object)) {
+    for (let i in props.sendForm) {
+      ruleForm2[i] = props.sendForm[i].value
+      if (i == 'endTime' || i == 'startTime') {
+        ruleForm2[i] = props.sendForm[i].value + ':00'
+      }
+    }
+  }
+  if (canSubmitPickSelf) {
+    emits('submitProcess', submitObj)
+  } else {
+    ElMessage({
+      message: '请完成自选后提交',
+      type: 'error'
+    })
+  }
+}, 1000, true)
+const chooseMemberPhoneRef = ref()
+const buttonShow = ref(true)
+const changeButtonShow = (value: boolean) => {
+  buttonShow.value = value
+}
+const inputValue = ref()
+const activeName = ref('评论')
+// 1  同意弹窗 2 拒绝弹窗
+const dialogType = ref('1')
+const centerDialogVisible = ref(false)
+const textarea = ref('')
+const openDialog = async (type: string) => {
+  // 1 同意弹窗
+  // 2 拒绝弹窗
+  emits('validateForm')
+  setTimeout(() => {
+    console.debug(props.canSubmit)
+    if (props.canSubmit) {
+      dialogType.value = type
+      centerDialogVisible.value = true
+    } else {
+    }
+  }, 500)
+}
+const handleTabClick = () => {
+  console.log(1)
+}
+const commentValue = ref()
+const sendComment = () => {
+  if (!commentValue.value) {
+    ElMessage({
+      message: '请输入内容后发送',
+      type: 'warning',
+    })
+  } else {
+    commentList.value.push({
+      name: '华佗',
+      avatar: 'https://static.dingtalk.com/media/lADPM4OsmZ9lZNbNAgjNAgg_520_520.jpg_120x120.jpg',
+      timestamp: '2018-04-12 20:46',
+      content: commentValue.value,
+    })
+    commentValue.value = ''
+  }
+}
+const activities = ref<any>([])
+// 填写审批意见后提交表单
+const submitForm = () => {
+  emits('validateForm')
+}
+const commentList = ref([
+  {
+    name: '华佗',
+    avatar: 'https://static.dingtalk.com/media/lADPM4OsmZ9lZNbNAgjNAgg_520_520.jpg_120x120.jpg',
+    timestamp: '2018-04-12 20:46',
+    content: '第一个评论',
+  }, {
+    name: '华佗',
+    avatar: 'https://static.dingtalk.com/media/lADPM4OsmZ9lZNbNAgjNAgg_520_520.jpg_120x120.jpg',
+    timestamp: '2018-04-12 20:46',
+    content: '第二个评论',
+
+  },
+])
+const changeList = ref([
+  {
+    content: 'Custom icon',
+    timestamp: '2018-04-12 20:46',
+    size: 'large',
+    type: 'primary',
+    icon: MoreFilled,
+  },
+  {
+    content: 'Custom color',
+    timestamp: '2018-04-03 20:46',
+    color: '#0bbd87',
+  },
+  {
+    content: 'Custom size',
+    timestamp: '2018-04-03 20:46',
+    size: 'large',
+  },
+  {
+    content: 'Custom hollow',
+    timestamp: '2018-04-03 20:46',
+    type: 'primary',
+    hollow: true,
+  },
+  {
+    content: 'Default node',
+    timestamp: '2018-04-03 20:46',
+  },
+])
+const deptList = ref<DeptVo[]>([])
+const getDeptList = () => {
+  DeptController.getDeptListByLocal().then(data => {
+    if (data.code == 200 && data.res) {
+      deptList.value = data.res
+      if (data.res && Array.isArray(data.res) && data.res.length > 0) {
+        chooseDept.value = data.res[0].deptId
+      }
+    } 
+  })
+}
+
+// 返回列表
+const backList = () => {
+  emits('backList')
+}
+
+//进入页面后关闭弹框
+onActivated(() => {
+  haveSubmit.value = false
+})
+/** 当前用户id */
+onMounted(() => {
+  
+  getDeptList()
+})
+/** 根据逻辑判断 当 外部传入 promoterId 时代表当前状态为代提交的状态，需重新调取接口查询 */
+watch(() => { return props.promoterId }, async () => {
+  console.log(props.promoterId)
+  if (props.promoterId) {
+    await DeptController.getDeptListByUserId(props.promoterId).then(data => {
+      if (data.code == 200 && data.res) {
+        deptList.value = data.res
+        if (data.res && Array.isArray(data.res) && data.res.length > 0) {
+          chooseDept.value = data.res[0].deptId
+        }
+      } 
+    })
+  } else {
+    await getDeptList()
+  }
+}, { deep: true, immediate: true })
+
+defineExpose({
+  chooseDept,
+  deptList,
+})
+</script>
+<style lang="scss" scoped>
+@use './styles/common.scss';
+@use './styles/submit-approve-pc.scss';
+@use './styles/submit-approve-phone.scss';
+</style>
+<style lang="scss">
+.inner-page-top-form-box,
+.page-form-box {
+  .el-select__wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}
+</style>

package/packages/approval-process/packages/flow/systemCom/BO/departBo.ts

@@ -0,0 +1,8 @@
+export interface departBo {
+  deptId: string;
+  deptName: string;
+}
+export interface nameForSearchBo {
+  name: string;
+  id: string;
+}

package/packages/approval-process/packages/flow/systemCom/BO/memberBo.ts

@@ -0,0 +1,14 @@
+export interface userBo {
+  userId: string;
+  userName: string;
+  avatar: string;
+  roleName: string;
+}
+export interface departBo {
+  deptId: string;
+  deptName: string;
+}
+export interface nameForSearchBo {
+  name: string;
+  id: string;
+}

package/packages/approval-process/packages/flow/systemCom/BO/role.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724230585754" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4282" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M486.881882 602.834824v80.353882a240.941176 240.941176 0 0 0-240.941176 240.941176H165.647059a321.234824 321.234824 0 0 1 321.234823-321.295058z m0-40.116706c-133.12 0-240.941176-107.821176-240.941176-240.941177s107.821176-240.941176 240.941176-240.941176 240.941176 107.821176 240.941177 240.941176-107.821176 240.941176-240.941177 240.941177z m0-80.353883a160.587294 160.587294 0 1 0 0-321.234823 160.587294 160.587294 0 1 0 0 321.234823z m104.207059 313.705412a140.950588 140.950588 0 0 1 0-65.174588l-39.815529-23.009883 40.176941-69.511529 39.755294 23.009882c16.022588-15.179294 35.358118-26.322824 56.500706-32.647529v-45.959529h80.293647v45.959529c21.383529 6.384941 40.658824 17.709176 56.440471 32.647529l39.755294-23.009882 40.237176 69.511529-39.875765 23.009883c5.12 21.443765 5.12 43.730824 0 65.174588l39.875765 23.009882-40.176941 69.51153-39.815529-23.009883a140.348235 140.348235 0 0 1-56.440471 32.64753v45.959529h-80.293647v-45.959529a140.348235 140.348235 0 0 1-56.440471-32.64753l-39.815529 23.009883-40.176941-69.51153 39.815529-23.009882z m136.734118 27.648a60.235294 60.235294 0 1 0 0-120.470588 60.235294 60.235294 0 0 0 0 120.470588z" fill="#8C8C8C" p-id="4283"></path></svg>

package/packages/approval-process/packages/flow/systemCom/BO/roleBo.ts

@@ -0,0 +1,16 @@
+export interface roleBo {
+  groupId: string;
+  groupName: string;
+  roleId: string;
+  roleName: string;
+  roleVoList: roleItemBo[];
+}
+export interface roleOldBo {
+  groupId: string;
+  groupName: string;
+  roleVoList: roleItemBo[];
+}
+export interface roleItemBo {
+  roleId: string;
+  roleName: string;
+}