hrp-ui-base 1.4.6 → 1.4.7

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

@@ -1,628 +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;
-  }
-}
+<!-- 审批页面 适配移动端并且要有插槽，同时对插槽的数据可以进行读取 -->
+<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>