|
|
@@ -1,180 +1,165 @@
|
|
|
<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%"
|
|
|
+ <!-- 主续期弹窗 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="state.dialog.isShowDialog"
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ :style="{ height: '90%' }"
|
|
|
+ close-on-popstate
|
|
|
>
|
|
|
- <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>
|
|
|
- <el-form
|
|
|
- ref="expertDialogFormRef"
|
|
|
- :model="state.form"
|
|
|
- :rules="rules"
|
|
|
- size="default"
|
|
|
- label-width="140px"
|
|
|
- label-position="top"
|
|
|
- >
|
|
|
- <h4 class="mb8 mt8">续期信息</h4>
|
|
|
- <el-row :gutter="35">
|
|
|
- <el-col
|
|
|
- :span="24"
|
|
|
- class="mb20"
|
|
|
- >
|
|
|
- <el-form-item
|
|
|
- label="续期时长(个月)"
|
|
|
- prop="platformTime"
|
|
|
- >
|
|
|
- <el-input-number
|
|
|
- v-model="state.form.platformTime"
|
|
|
- :min="1"
|
|
|
- :precision="0"
|
|
|
- class="w100"
|
|
|
- @change="dateChange"
|
|
|
- ></el-input-number>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- :span="24"
|
|
|
- class="mb20"
|
|
|
- >
|
|
|
- <el-form-item label="续期后周期">
|
|
|
- <el-date-picker
|
|
|
- disabled
|
|
|
- v-model="state.oldForm.startTime"
|
|
|
- type="date"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- placeholder="请选择时间"
|
|
|
- clearable
|
|
|
- style="width: 45%"
|
|
|
+ <div class="vant-dialog">
|
|
|
+ <header class="vant-dialog__header">
|
|
|
+ <h4>{{ state.dialog.title }}</h4>
|
|
|
+ </header>
|
|
|
+ <main class="vant-dialog__body">
|
|
|
+ <section class="section">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <h5 class="section__title">原申请信息</h5>
|
|
|
+ <van-cell
|
|
|
+ title="入室申请名称"
|
|
|
+ :value="`${state.oldForm.userName}的${state.oldForm.platformName}的入室申请`"
|
|
|
/>
|
|
|
- ~
|
|
|
- <el-date-picker
|
|
|
- disabled
|
|
|
- v-model="state.form.endTime"
|
|
|
- type="date"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- placeholder="请选择时间"
|
|
|
- clearable
|
|
|
- style="width: 45%"
|
|
|
+ <van-cell
|
|
|
+ title="申请平台"
|
|
|
+ :value="state.oldForm.platformName"
|
|
|
/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- :span="24"
|
|
|
- class="mb20"
|
|
|
- >
|
|
|
- <el-form-item
|
|
|
- label="其他说明"
|
|
|
- prop="remark"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
+ <van-cell
|
|
|
+ title="入室周期"
|
|
|
+ :title-style="{ flex: '0 0 80px', maxWidth: '80px' }"
|
|
|
+ :value="`${
|
|
|
+ state.oldForm?.startTime ? formatDate(new Date(state.oldForm?.startTime), 'YYYY-mm-dd') : ''
|
|
|
+ } ~ ${state.oldForm?.endTime ? formatDate(new Date(state.oldForm?.endTime), 'YYYY-mm-dd') : ''}`"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <h5 class="section__title">续期信息</h5>
|
|
|
+ <van-field
|
|
|
+ :label-class="{ 'w-110': true }"
|
|
|
+ label="续期时长(个月)"
|
|
|
+ type="number"
|
|
|
+ v-model.number="state.form.platformTime"
|
|
|
+ placeholder="请输入续期时长"
|
|
|
+ @update:model-value="dateChange"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ label="续期后周期"
|
|
|
+ readonly
|
|
|
+ :label-class="{ 'w-110': true }"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <span class="range-text">
|
|
|
+ {{ state.oldForm?.startTime ? formatDate(new Date(state.oldForm?.startTime), 'YYYY-mm-dd') : '' }}
|
|
|
+ ~
|
|
|
+ {{ state.form?.endTime ? formatDate(new Date(state.form?.endTime), 'YYYY-mm-dd') : '' }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ :label-class="{ 'w-110': true }"
|
|
|
v-model="state.form.remark"
|
|
|
+ label="其他说明"
|
|
|
+ type="textarea"
|
|
|
+ rows="3"
|
|
|
+ maxlength="200"
|
|
|
+ show-word-limit
|
|
|
placeholder="请输入其他说明"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <h4 class="mb8 mt8">安全承诺</h4>
|
|
|
- <el-checkbox v-model="state.safePromise">
|
|
|
- 本人承诺:如时候遵守实验室及个平台的各项规章制度,遵守在室的积分管理制度。
|
|
|
- </el-checkbox>
|
|
|
- <el-checkbox
|
|
|
- v-model="state.safeRead"
|
|
|
- :disabled="!state.isRead"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <h5 class="section__title">安全承诺</h5>
|
|
|
+ <div class="pd-16">
|
|
|
+ <van-checkbox
|
|
|
+ class="mb10"
|
|
|
+ v-model="state.safePromise"
|
|
|
+ shape="square"
|
|
|
+ >
|
|
|
+ 本人承诺:如时候遵守实验室及平台官网的各项规章制度,遵守在室的积分管理制度。
|
|
|
+ </van-checkbox>
|
|
|
+ <van-checkbox
|
|
|
+ v-model="state.safeRead"
|
|
|
+ shape="square"
|
|
|
+ :disabled="!state.isRead"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ 我已完整阅读并同意
|
|
|
+ <span
|
|
|
+ class="link-text"
|
|
|
+ @click.stop="onRead"
|
|
|
+ >
|
|
|
+ 《预约须知》
|
|
|
+ </span>
|
|
|
+ 的内容,承诺如时候遵守实验室及平台官网的各项规章制度,遵守在室的积分管理制度。
|
|
|
+ </span>
|
|
|
+ </van-checkbox>
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+ <van-action-bar
|
|
|
+ placeholder
|
|
|
+ safe-area-inset-bottom
|
|
|
>
|
|
|
- 我已完整阅读并同意
|
|
|
- <el-button
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- @click.stop="onRead"
|
|
|
- >
|
|
|
- 《预约须知》
|
|
|
- </el-button>
|
|
|
- 的内容,承诺如时候遵守实验室及个平台的各项规章制度,遵守在室的积分管理制度。
|
|
|
- </el-checkbox>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button
|
|
|
- type="info"
|
|
|
+ <van-action-bar-button
|
|
|
+ text="取消"
|
|
|
+ type="warning"
|
|
|
@click="onCancel"
|
|
|
- size="default"
|
|
|
- >
|
|
|
- 取 消
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
+ />
|
|
|
+ <van-action-bar-button
|
|
|
+ type="primary"
|
|
|
color="#2c78ff"
|
|
|
+ :text="state.dialog.submitTxt || '提交'"
|
|
|
+ :loading="state.dialog.submitting"
|
|
|
+ :disabled="state.dialog.submitting"
|
|
|
@click="onSubmit('20')"
|
|
|
- size="default"
|
|
|
- >
|
|
|
- {{ state.dialog.submitTxt }}
|
|
|
- </el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <el-dialog
|
|
|
- v-model="noticeShow"
|
|
|
- :title="noticeInfo.noticeTitle"
|
|
|
- width="800px"
|
|
|
- :close-on-click-modal="false"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <div
|
|
|
- class="ck-editor"
|
|
|
- v-html="noticeInfo.noticeContent"
|
|
|
- ></div>
|
|
|
+ />
|
|
|
+ </van-action-bar>
|
|
|
</div>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button
|
|
|
- type="info"
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <!-- 预约须知弹窗 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="noticeShow"
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ :style="{ height: '85%' }"
|
|
|
+ close-on-popstate
|
|
|
+ >
|
|
|
+ <div class="notice-popup">
|
|
|
+ <header class="notice-popup__header">
|
|
|
+ <h4>{{ noticeInfo.noticeTitle || '预约须知' }}</h4>
|
|
|
+ </header>
|
|
|
+ <div class="notice-popup__body">
|
|
|
+ <div
|
|
|
+ class="ck-editor"
|
|
|
+ v-html="noticeInfo.noticeContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <van-action-bar
|
|
|
+ placeholder
|
|
|
+ safe-area-inset-bottom
|
|
|
+ >
|
|
|
+ <van-action-bar-button
|
|
|
+ type="primary"
|
|
|
+ text="我已阅读"
|
|
|
@click="noticeShow = false"
|
|
|
- size="default"
|
|
|
- >
|
|
|
- 取 消
|
|
|
- </el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ />
|
|
|
+ </van-action-bar>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="systemProDialog">
|
|
|
import to from 'await-to-js'
|
|
|
import { nextTick, reactive, ref } from 'vue'
|
|
|
- import { ElMessage } from 'element-plus'
|
|
|
+ import { showToast } from 'vant'
|
|
|
import { usePlatformApi } from '/@/api/platform/home'
|
|
|
import { useSystemApi } from '/@/api/platform/system'
|
|
|
import { deepClone } from '/@/utils/other'
|
|
|
@@ -188,12 +173,6 @@
|
|
|
const Api = usePlatformRenewalApi()
|
|
|
const systemApi = useSystemApi()
|
|
|
const platformApi = usePlatformApi()
|
|
|
- const expertDialogFormRef = ref()
|
|
|
- const rules = {
|
|
|
- memberName: { required: true, message: '不能为空', trigger: 'blur' },
|
|
|
- memberType: { required: true, message: '不能为空', trigger: 'change' },
|
|
|
- pgName: { required: true, message: '不能为空', trigger: 'blur' },
|
|
|
- }
|
|
|
const state = reactive({
|
|
|
oldForm: {
|
|
|
id: 0,
|
|
|
@@ -219,8 +198,9 @@
|
|
|
userId: null,
|
|
|
userName: '',
|
|
|
platformTime: 1,
|
|
|
+ endTime: null,
|
|
|
remark: '',
|
|
|
- },
|
|
|
+ } as any,
|
|
|
safePromise: false,
|
|
|
safeRead: false,
|
|
|
isRead: false,
|
|
|
@@ -229,6 +209,7 @@
|
|
|
type: '',
|
|
|
title: '',
|
|
|
submitTxt: '',
|
|
|
+ submitting: false,
|
|
|
},
|
|
|
})
|
|
|
const noticeShow = ref(false)
|
|
|
@@ -259,6 +240,7 @@
|
|
|
userId: row?.userId,
|
|
|
userName: row?.userName,
|
|
|
platformTime: 1,
|
|
|
+ endTime: null,
|
|
|
remark: '',
|
|
|
}
|
|
|
}
|
|
|
@@ -295,7 +277,6 @@
|
|
|
|
|
|
// 关闭弹窗
|
|
|
const closeDialog = () => {
|
|
|
- expertDialogFormRef.value.resetFields()
|
|
|
state.isRead = false
|
|
|
state.safePromise = false
|
|
|
state.safeRead = false
|
|
|
@@ -315,25 +296,30 @@
|
|
|
}
|
|
|
// 提交
|
|
|
const onSubmit = async (type: string) => {
|
|
|
+ if (state.dialog.submitting) return
|
|
|
+ state.dialog.submitting = true
|
|
|
if (!state.safePromise) {
|
|
|
- ElMessage.error('请阅读并勾选安全承诺!')
|
|
|
+ showToast('请阅读并勾选安全承诺!')
|
|
|
+ state.dialog.submitting = false
|
|
|
return
|
|
|
}
|
|
|
if (!state.safeRead) {
|
|
|
- ElMessage.error('请阅读并勾选预约须知!')
|
|
|
+ showToast('请阅读并勾选预约须知!')
|
|
|
+ state.dialog.submitting = false
|
|
|
return
|
|
|
}
|
|
|
- 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.update
|
|
|
- const [err]: ToResponse = await to(post(params))
|
|
|
- if (err) return
|
|
|
- ElMessage.success('操作成功')
|
|
|
- closeDialog()
|
|
|
- emit('refresh')
|
|
|
- })
|
|
|
+ const params: any = deepClone(state.form)
|
|
|
+ params.isTemporary = type
|
|
|
+ const post = state.dialog.type == 'add' ? Api.create : Api.update
|
|
|
+ const [err]: ToResponse = await to(post(params))
|
|
|
+ if (err) {
|
|
|
+ state.dialog.submitting = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ showToast('操作成功')
|
|
|
+ closeDialog()
|
|
|
+ emit('refresh')
|
|
|
+ state.dialog.submitting = false
|
|
|
}
|
|
|
// 暴露变量
|
|
|
defineExpose({
|
|
|
@@ -341,39 +327,70 @@
|
|
|
})
|
|
|
</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);
|
|
|
+ .vant-dialog {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+ &__header {
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ h4 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
+ &__body {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 12px 0 60px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .el-icon.avatar-uploader-icon {
|
|
|
- font-size: 28px;
|
|
|
- color: #8c939d;
|
|
|
- width: 178px;
|
|
|
- height: 178px;
|
|
|
- text-align: center;
|
|
|
+ .section {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ &__title {
|
|
|
+ margin: 4px 10px 6px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #969799;
|
|
|
+ }
|
|
|
}
|
|
|
- :deep(.el-checkbox) {
|
|
|
- padding-bottom: 30px;
|
|
|
- .el-checkbox__label {
|
|
|
- white-space: pre-wrap;
|
|
|
+
|
|
|
+ :deep(.pd-16) {
|
|
|
+ padding: 0 16px 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #323233;
|
|
|
+ }
|
|
|
+
|
|
|
+ .link-text {
|
|
|
+ color: #1989fa;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-popup {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ &__header {
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ h4 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
}
|
|
|
+ &__body {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 12px 12px 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.w-110) {
|
|
|
+ width: 110px;
|
|
|
}
|
|
|
</style>
|