labsop_h5/src/view/entry/components/edit.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%"
    >
      <h4 class="mb8 mt8">申请信息</h4>
      <el-descriptions
        border
        :column="1"
        class="mb20"
        direction="vertical"
      >
        <el-descriptions-item
          label-class-name="cell-item"
          label="入室申请名称"
        >
          {{ state.oldForm.userName }}的{{ state.oldForm.platformName }}的入室申请
        </el-descriptions-item>
        <el-descriptions-item
          label-class-name="cell-item"
          label="申请平台"
          width="50%"
        >
          {{ state.oldForm.platformName }}
        </el-descriptions-item>
        <!--        <el-descriptions-item label-class-name="cell-item" label="申请时长">{{ state.oldForm.platformTime }}个月</el-descriptions-item>-->
        <el-descriptions-item
          label-class-name="cell-item"
          label="入室周期"
          width="50%"
        >
          {{ state.oldForm?.startTime ? formatDate(new Date(state.oldForm?.startTime), 'YYYY-mm-dd') : '' }} ~
          {{ state.oldForm?.endTime ? formatDate(new Date(state.oldForm?.endTime), 'YYYY-mm-dd') : '' }}
        </el-descriptions-item>
        <el-descriptions-item
          label-class-name="cell-item"
          label="预约房间"
          width="50%"
        >
          {{ state.oldForm.resName }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form
        ref="expertDialogFormRef"
        :model="state.form"
        :rules="rules"
        size="default"
        label-width="140px"
        label-position="top"
      >
        <el-row :gutter="35">
          <el-col
            :span="24"
            class="mb20"
          >
            <el-form-item
              label="开始时间"
              prop="startTime"
            >
              <el-date-picker
                type="datetime"
                placeholder="请输入"
                disabled
                class="w100"
                v-model="state.form.startTime"
                value-format="YYYY-MM-DD HH:mm"
                format="YYYY/MM/DD HH:mm"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
            class="mb20"
          >
            <el-form-item
              label="结束时间"
              prop="endTime"
            >
              <el-date-picker
                type="datetime"
                placeholder="请输入"
                disabled
                class="w100"
                v-model="state.form.endTime"
                value-format="YYYY-MM-DD HH:mm"
                format="YYYY/MM/DD HH:mm"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
            class="mb24"
          >
            <el-form-item
              label="预约时长(分钟)"
              prop="duration"
            >
              <el-input
                disabled
                placeholder="请输入"
                class="w100"
                maxlength="11"
                v-model="state.form.duration"
              />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12" class="mb24">-->
          <!--            <el-form-item label="预约人" prop="userId">-->
          <!--              <el-select v-model="state.form.userId" class="w100" filterable placeholder="请选择" disabled @change="changeUser">-->
          <!--                <el-option :value="v.id" :label="v.nickName" :key="v.id" v-for="v in userList" />-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12" class="mb24">-->
          <!--            <el-form-item label="联系电话" prop="userContact">-->
          <!--              <el-input placeholder="请输入" class="w100" maxlength="11" v-model="state.form.userContact" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col
            :span="24"
            class="mb20"
          >
            <el-form-item
              label="备注"
              prop="remark"
            >
              <el-input
                type="textarea"
                v-model="state.form.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="info"
            @click="onCancel"
            size="default"
          >
            取 消
          </el-button>
          <el-button
            color="#2c78ff"
            @click="onSubmit('20')"
            size="default"
          >
            {{ state.dialog.submitTxt }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemProDialog">
  import { nextTick, reactive, ref } from 'vue'
  import to from 'await-to-js'
  import { ElMessage } from 'element-plus'
  import moment from 'moment/moment'
  import { storeToRefs } from 'pinia'

  import { useSystemApi } from '/@/api/platform/system'
  import { deepClone } from '/@/utils/other'
  import { useAppointmentApi } from '/@/api/platform/home/appointment'
  import { useUserInfo } from '/@/stores/userInfo'
  import { formatDate } from '/@/utils/formatTime'
  import { useCellAssignApi } from '/@/api/platform/home/assign'

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

  // 定义变量内容
  const Api = useAppointmentApi()
  const assignApi = useCellAssignApi()
  const systemApi = useSystemApi()
  const expertDialogFormRef = ref()
  const stores = useUserInfo()
  const { userInfos } = storeToRefs(stores)
  const rules = {
    startTime: { required: true, message: '不能为空', trigger: 'change' },
    endTime: { required: true, message: '不能为空', trigger: 'change' },
    userId: { required: true, message: '不能为空', trigger: 'change' },
    userContact: { required: true, message: '不能为空', trigger: 'blur' },
  }
  const state = reactive({
    form: {
      id: 0,
      assignId: 0,
      userId: 0,
      userName: '',
      userDeptId: null,
      userDeptName: '',
      userContact: '',
      startTime: null,
      endTime: null,
      remark: '',
      duration: 0,
    },
    oldForm: {
      id: 0,
      appointId: 0,
      mainId: 0,
      platformId: 0,
      platformName: '',
      resId: 0,
      resLocation: '',
      resName: '',
      userId: 0,
      userName: '',
      assignStatus: '',
      startTime: '',
      endTime: '',
      oldStartTime: '',
      oldEndTime: '',
      isConfirm: '',
      location: 0,
      outApplyTime: '',
      outStatus: 0,
      outTime: null,
    },
    dialog: {
      isShowDialog: false,
      type: '',
      title: '',
      submitTxt: '',
    },
  })

  const belongOrgOption = ref<DeptTreeType[]>([])
  const userList = ref<any[]>([]) //用户列表
  const getDicts = async () => {
    await Promise.all([systemApi.getDeptTree(), systemApi.getUserList({ noPage: true })]).then(([dept, user]) => {
      belongOrgOption.value = dept?.data || []
      userList.value = user?.data.list || []
    })
  }
  // 打开弹窗
  const openDialog = async (type: string, row: any) => {
    await getDicts()
    state.dialog.type = type
    state.dialog.title = '入室预约'
    if (type == 'add') {
      state.form = {
        id: 0,
        assignId: row?.id,
        userId: userInfos.value.id,
        userName: userInfos.value.nickName,
        userDeptId: userInfos.value.deptId,
        userDeptName: userInfos.value.deptName,
        userContact: userInfos.value.phone,
        startTime: row?.startTime,
        endTime: row?.endTime,
        remark: '',
      }
      const [err, res]: ToResponse = await to(assignApi.getDetail({ id: row?.id }))
      if (err) return
      state.oldForm = res?.data || {}

      // 计算startTime和endTime的分钟差
      const diff = moment(state.form.endTime).diff(moment(state.form.startTime), 'minutes')
      state.form.duration = diff
    } else {
      const [err, res]: ToResponse = await to(Api.getDetail({ id: row?.id }))
      if (err) return
      state.form = res?.data || {}
    }

    state.dialog.submitTxt = '提 交'
    state.dialog.isShowDialog = true
    // 清空表单，此项需加表单验证才能使用
    await nextTick()
  }

  // 关闭弹窗
  const closeDialog = () => {
    expertDialogFormRef.value.resetFields()
    state.dialog.isShowDialog = false
  }

  const onCancel = () => {
    closeDialog()
  }

  // 提交
  const onSubmit = async (type: string) => {
    expertDialogFormRef.value.validate(async (valid: boolean) => {
      if (!valid) return
      state.form.isTemporary = type
      const params = deepClone(state.form)
      const post = state.dialog.type == 'add' ? Api.create : Api.updateById
      const [err]: ToResponse = await to(post(params))
      if (err) return
      ElMessage.success('操作成功')
      closeDialog()
      emit('refresh')
    })
  }
  // 暴露变量
  defineExpose({
    openDialog,
  })
</script>
<style lang="scss" scoped>
  h4 {
    font-size: 18px;
  }
  :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>