labsop_h5/src/view/entry/components/confirm.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-02-27 14:50:41
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-03-06 18:28:53
 * @Description: file content
 * @FilePath: \labsop_backup2\frontend\packages\platform\src\views\entry\components\confirm.vue
-->
<template>
  <div class="facilities-dialog-container">
    <el-dialog :title="state.dialog.title" @close="onCancel" :close-on-click-modal="false" v-model="state.dialog.isShowDialog" width="90%">
      <header class="mb8">
        <span>确认</span>
        <el-form inline size="mini" label-width="0">
          <el-form-item>
            <el-radio-group v-model="resClass" v-if="cellType.length > 1" size="small" @change="filterOutList">
              <el-radio label="">全部</el-radio>
              <el-radio v-for="item in cellType" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="ml12">
            <el-button color="#2c78ff" @click="autoConfirm()" size="default" :loading="autoFlag">自动确认</el-button>
          </el-form-item>
        </el-form>
      </header>
      <div class="table-container">
        <div class="out-table">
          <el-alert :title="`下个月出室人员（共${state.outList.length}人）`" type="warning" :closable="false" class="mb8" />

          <van-list finished-text="没有更多了">
            <van-cell v-for="item in state.outList" :key="item">
              <template #default>
                <div class="list">
                  <p class="inst-title">
                    <span>出室人员</span>
                    <span class="title ml8">{{ item.userName }}</span>
                  </p>
                  <p class="inst-title">
                    <span>联系方式</span>
                    <span class="title ml8">{{ item.memberPhone }}</span>
                  </p>
                  <p class="inst-title">
                    <span>预约平台</span>
                    <span class="title ml8">
                      {{ item.platformName }}
                    </span>
                  </p>
                  <p class="inst-title">
                    <span>分配类型</span>
                    <span class="title ml8">
                      {{ item.resClass }}
                    </span>
                  </p>
                  <p class="inst-title">
                    <span>分配房间</span>
                    <span class="title ml8">
                      {{ item.resName }}
                    </span>
                  </p>
                  <p class="inst-title">
                    <span>入室日期</span>
                    <span class="title ml8"> {{ item.startTime }}个月 </span>
                  </p>
                  <p class="inst-title">
                    <span>出室日期</span>
                    <span class="title ml8">{{ item.endTime }}</span>
                  </p>
                  <p class="inst-title">
                    <span>课题组</span>
                    <span class="title ml8">{{ item.pgName }}</span>
                  </p>
                  <p class="inst-title">
                    <span>课题组负责人</span>
                    <span class="title ml8">{{ item.mentorName }}</span>
                  </p>
                  <footer class="flex justify-end mt4 actions-footer"></footer>
                </div>
              </template>
            </van-cell>
          </van-list>

          <!-- <vxe-table :height="500" :data="state.outList" ref="outRef" show-overflow="title" border align="center">
            <vxe-column type="seq" title="序号" width="60" align="center" fixed="left" />
            <vxe-column field="userName" title="出室人员" width="140"></vxe-column>
            <vxe-column field="memberPhone" title="联系方式" width="120"></vxe-column>
            <vxe-column field="platformName" title="预约平台" width="120"></vxe-column>
            <vxe-column field="resClass" title="分配类型" width="100">
              <template #default="{ row }">{{ getDictLabel(cellType, row.resClass) }}</template>
            </vxe-column>
            <vxe-column field="resName" title="分配房间" width="140"></vxe-column>
            <vxe-column field="startTime" title="入室日期" width="120">
              <template #default="{ row }">{{ formatDate(new Date(row.startTime), 'YYYY-mm-dd') }}</template>
            </vxe-column>
            <vxe-column field="endTime" title="出室日期" width="120">
              <template #default="{ row }">{{ formatDate(new Date(row.endTime), 'YYYY-mm-dd') }}</template>
            </vxe-column>
            <vxe-column field="pgName" title="课题组" width="100"></vxe-column>
            <vxe-column field="mentorName" title="课题组负责人" width="120"></vxe-column>
          </vxe-table> -->
        </div>
        <div class="confirm-table">
          <el-alert :title="`待确认队列 （已确认${comfirmTotal}人）`" type="warning" :closable="false" class="mb8" />
          <ul>
            <li v-for="(item, index) in state.confirmList" :key="index">
              <div class="text">
                <p>
                  {{ item.memberName }}【{{ formatDate(new Date(item.appointStartDate), 'mm-dd') }}~{{
                    formatDate(new Date(item.appointEndDate), 'mm-dd')
                  }}】-{{ getDictLabel(cellType, item.cellSourceType) }}
                </p>
                <p>{{ item.pgName }}-{{ item.mentorName }}</p>
              </div>
              <el-icon v-if="item.checked">
                <ele-Select />
              </el-icon>
              <div class="btns">
                <el-button v-if="!item.checked" link type="primary" @click="onConfirm(item)">确认</el-button>
                <el-button v-else link @click="item.checked = false">取消</el-button>
                <el-button link type="primary" @click="onDetail(item)">查看</el-button>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="info" @click="onCancel" size="default">取 消</el-button>
          <el-button color="#2c78ff" @click="onSubmit()" size="default">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <DetailsDialog ref="detailsDialog" />
  </div>
</template>

<script setup lang="ts" name="systemProDialog">
  import to from 'await-to-js'
  import { defineAsyncComponent, reactive, ref, computed, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { usePlatformAppointApi } from '/@/api/platform/appoint'
  import { usePlatformApi } from '/@/api/platform/home'
  import { useSystemApi } from '/@/api/platform/system'
  import { deepClone, getDictLabel } from '/@/utils/other'
  import { useUserInfo } from '/@/stores/userInfo'
  import { storeToRefs } from 'pinia'
  import { useDictApi } from '/@/api/base/system/dict'
  import { useCellAssignApi } from '/@/api/platform/home/assign'
  import { formatDate } from '/@/utils/formatTime'

  const DetailsDialog = defineAsyncComponent(() => import('/@/view/entry/components/details.vue'))

  const stores = useUserInfo()
  const { userInfos } = storeToRefs(stores)

  // 定义子组件向父组件传值/事件
  const emit = defineEmits(['refresh'])

  // 定义变量内容
  const Api = usePlatformAppointApi()
  const systemApi = useSystemApi()
  const platformApi = usePlatformApi()
  const cellAssignApi = useCellAssignApi()
  const dictApi = useDictApi()
  const deptRef = ref()
  const detailsDialog = ref()
  const userTypeList = ref<RowDicDataType[]>([])
  const projectGroupList = ref<any[]>([])
  const cellType = ref<RowDicDataType[]>([])

  const rules = {
    memberName: { required: true, message: '不能为空', trigger: 'blur' },
    memberType: { required: true, message: '不能为空', trigger: 'change' },
    deptId: { required: true, message: '不能为空', trigger: 'change' },
    platformName: { required: true, message: '不能为空', trigger: 'blur' },
    platformTime: { required: true, message: '不能为空', trigger: 'blur' },
    startDate: { required: true, message: '不能为空', trigger: 'change' },
    endDate: { required: true, message: '不能为空', trigger: 'change' },
    mentorName: { required: true, message: '不能为空', trigger: 'blur' }
  }
  const state = reactive({
    form: {
      id: 0,
      deptId: null,
      deptName: '',
      isTemporary: '10',
      memberId: 0,
      memberName: '',
      memberPhone: '',
      memberType: '',
      memberDeptId: null,
      memberDeptName: '',
      mentorObj: null,
      pgId: null,
      pgName: '',
      mentorId: null,
      mentorName: '',
      mentorDeptName: '',
      mentorPhone: '',
      platformId: null,
      platformName: '',
      platformTime: null,
      platformType: '',
      isCellChecked: '20',
      cellType: '',
      cellSourceType: '',
      isMolecularChecked: '20',
      molecularTime: null,
      platOtherNeed: ''
    },
    outList: [] as any[],
    confirmList: [] as any[],
    dialog: {
      isShowDialog: false,
      type: '',
      title: '',
      submitTxt: ''
    }
  })
  const autoFlag = ref(false)
  const comfirmTotal = computed(() => {
    return state.confirmList.reduce((pre: number, cur: any) => {
      if (cur.checked) return pre + 1
      return pre
    }, 0)
  })
  const outList = ref<any[]>([])
  const confirmList = ref<any[]>([])
  const belongOrgOption = ref<DeptTreeType[]>([])
  const userList = ref<RowUserType[]>([])
  const resClass = ref('')
  const platform = ref()
  const getDicts = async () => {
    Promise.all([
      systemApi.getDeptTree(),
      systemApi.getUserList({ noPage: true }),
      platformApi.getDetail({ id: userInfos.value.platformId }),
      dictApi.getDictDataByType('sys_user_type'),
      systemApi.getProjectGroupList({ noPage: true }),
      userInfos.value.platformId != 0 ? platformApi.getResourceTypeDict({ id: userInfos.value.platformId }) : ''
    ]).then(([dept, user, plat, type, pjt, cell]) => {
      belongOrgOption.value = dept?.data || []
      userList.value = user?.data?.list || []
      userTypeList.value = type?.data?.values || []
      projectGroupList.value = pjt?.data?.list || []
      cellType.value = cell?.data || []
      platform.value = plat?.data || ''
      getOutList()
      getConfirmList()
    })
  }
  // 打开弹窗
  const openDialog = async (type: string, row: number) => {
    await getDicts()
    state.dialog.type = type
    state.dialog.title = '入室资源确认'
    state.dialog.isShowDialog = true
  }
  const getOutList = async () => {
    const [err, res]: ToResponse = await to(Api.nextMonthPerson({ id: userInfos.value.platformId, platformType: platform.value.platformType }))
    if (err) return
    outList.value = res?.data || []
    state.outList = JSON.parse(JSON.stringify(outList.value))
  }
  const getConfirmList = async () => {
    const [err, res]: ToResponse = await to(Api.getConfirmedQueue({ id: userInfos.value.platformId, platformType: platform.value.platformType }))
    if (err) return
    confirmList.value = res?.data || []
    state.confirmList = JSON.parse(JSON.stringify(confirmList.value))
  }
  // 前端筛选类型
  const filterOutList = (val?: string) => {
    if (val) {
      state.outList = outList.value.filter((item: any) => item.resClass == val)
      state.confirmList = confirmList.value.filter((item: any) => item.cellSourceType == val)
    } else {
      state.outList = [...outList.value]
      state.confirmList = [...confirmList.value]
    }
  }
  // 确认
  const onConfirm = (row: any) => {
    // 验证同类型 下个月出室人员 = 已确认人数 提示无法确认
    const total = outList.value.filter((item: any) => item.resClass == row.cellSourceType).length

    if (total == confirmList.value.filter((item: any) => item.cellSourceType == row.cellSourceType && item.checked).length) {
      ElMessage.warning('该类型下已确认人数与出室人员人数一致，无法确认')
      return
    }
    row.checked = true
    const obj = confirmList.value.find((item: any) => item.id == row.id)
    obj.checked = true
  }
  // 自动确认
  const autoConfirm = () => {
    autoFlag.value = true
    // 按待确认列表顺序依次确认
    filterOutList()
    state.confirmList.forEach((item: any) => {
      item.checked = false
    })
    for (const item of cellType.value) {
      const total = state.outList.filter((i: any) => i.resClass == item.dictValue).length
      const confirm = state.confirmList.filter((i: any) => i.cellSourceType == item.dictValue)
      for (let i = 0; i < total; i++) {
        confirm[i].checked = true
      }
    }
    autoFlag.value = false
  }
  // 关闭弹窗
  const closeDialog = () => {
    state.outList = []
    state.confirmList = []
    outList.value = []
    confirmList.value = []
    state.dialog.isShowDialog = false
  }
  // 取消
  const onCancel = () => {
    closeDialog()
  }
  // 提交
  const onSubmit = async () => {
    // 验证 所有下个月出室人员 是否全部确认 二次确认
    const total = state.outList.length
    const arr = state.confirmList.filter((item: any) => item.checked)
    // 获取对应下月出室人员后端标记 不再显示在列表中
    const outArr: number[] = []
    for (const item of cellType.value) {
      const confirm = arr.filter((i: any) => i.cellSourceType == item.dictValue)
      const out = state.outList.filter((i: any) => i.resClass == item.dictValue)
      for (let i = 0; i < confirm.length; i++) {
        if (out[i]) outArr.push(out[i].id)
      }
    }
    let confirm: Error | null = null
    if (arr.length < total) {
      ;[confirm] = await to(
        ElMessageBox.confirm('下个月出室人员未全部确认，是否继续提交？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      )
    }
    if (confirm !== null) return
    const [err]: ToResponse = await to(
      Api.markNextMonthEntry({ ids: arr.map((item: any) => item.id), assignIds: outArr, platformType: platform.value.platformType })
    )
    if (err) return
    ElMessage.success('操作成功')
    emit('refresh')
    closeDialog()
  }
  const onDetail = (val: number) => {
    detailsDialog.value.openDialog('get', val)
  }
  // 暴露变量
  defineExpose({
    openDialog
  })
</script>
<style lang="scss" scoped>
  h4 {
    font-size: 18px;
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    line-height: 32px;
    .el-form.el-form--inline .el-form-item {
      margin: 0;
    }
  }
  .table-container {
    /* display: flex; */
    .out-table {
      /* width: 808px; */
    }
    .confirm-table {
      margin-top: 12px;
      /* width: 340px; */
      display: flex;
      flex-direction: column;
      ul {
        height: 500px;
        overflow-y: auto;
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 4px;
          border: 1px solid #eee;
          padding: 8px;
          & + li {
            margin-top: 8px;
          }
          .text {
            flex: 1;
            overflow: hidden;
            p {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .el-icon {
            color: #fff;
            background-color: #0dda83;
            font-size: 20px;
            padding: 4px;
            border-radius: 50%;
            margin: 0 12px;
          }
          .btns {
            display: flex;
            flex-direction: column;
            .el-button {
              margin-left: 0;
            }
          }
        }
      }
    }
  }
  :deep(.disUoloadSty .el-upload--picture-card) {
    display: none; /* 上传按钮隐藏 */
  }
  .avatar-uploader {
    :deep(.el-upload) {
      width: 100%;
      height: 100%;
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
      &:hover {
        border-color: var(--el-color-primary);
      }
    }
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>