|
|
@@ -1,133 +1,239 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<el-dialog
|
|
|
- :title="title"
|
|
|
- :visible.sync="state.isShowDialog"
|
|
|
- :close-on-click-modal="false"
|
|
|
- width="1200px"
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="state.isShowDialog"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="1200px"
|
|
|
>
|
|
|
<el-form
|
|
|
- ref="editFormRef"
|
|
|
- :model="form"
|
|
|
- label-width="100px"
|
|
|
- size="mini"
|
|
|
- label-position="top"
|
|
|
- :rules="rules"
|
|
|
- closeable
|
|
|
+ ref="editFormRef"
|
|
|
+ :model="form"
|
|
|
+ label-width="100px"
|
|
|
+ size="mini"
|
|
|
+ label-position="top"
|
|
|
+ :rules="rules"
|
|
|
+ closeable
|
|
|
>
|
|
|
<div class="form-group">
|
|
|
+ <h3>申请人</h3>
|
|
|
<el-row :gutter="20" class="form-row-wrap">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="预约项目" prop="userContact">
|
|
|
+ <el-form-item label="姓名" prop="memberName">
|
|
|
<div class="flex">
|
|
|
- <!-- <el-input
|
|
|
- placeholder="请输入"
|
|
|
- class="w100"
|
|
|
- maxlength="11"
|
|
|
- v-model="form.field1"
|
|
|
- />
|
|
|
- <el-button type="primary">选择</el-button> -->
|
|
|
<el-select
|
|
|
- style="width: 100%"
|
|
|
- placeholder="请选择"
|
|
|
- v-model="form.field1"
|
|
|
- value-key=""
|
|
|
- clearable
|
|
|
- filterable
|
|
|
+ v-model="form.memberName"
|
|
|
+ @change="memberChange"
|
|
|
+ value-key="id"
|
|
|
+ class="w100"
|
|
|
+ placeholder="请选择"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
>
|
|
|
- <el-option
|
|
|
- label="肿瘤研究课题"
|
|
|
- value="肿瘤研究课题"
|
|
|
- ></el-option>
|
|
|
+ <el-option :label="v.nickName" :value="v" :key="v.id" v-for="v in userList" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="预约费用" prop="userContact">
|
|
|
+ <el-form-item label="手机号" prop="memberPhone">
|
|
|
<div class="flex">
|
|
|
<el-input
|
|
|
- placeholder="请输入"
|
|
|
- class="w100"
|
|
|
- maxlength="11"
|
|
|
- v-model="form.field2"
|
|
|
+ placeholder="请输入"
|
|
|
+ class="w100"
|
|
|
+ maxlength="11"
|
|
|
+ v-model="form.memberPhone"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="人员姓名" prop="userContact">
|
|
|
+ <el-form-item label="性别" prop="memberSex">
|
|
|
<div class="flex">
|
|
|
- <el-select
|
|
|
- style="width: 100%"
|
|
|
- placeholder="请选择"
|
|
|
- v-model="form.field3"
|
|
|
- value-key=""
|
|
|
- clearable
|
|
|
- filterable
|
|
|
- @change=""
|
|
|
- >
|
|
|
- <el-option label="省自然" value="省自然"></el-option>
|
|
|
- <el-option label="国自然" value="国自然"></el-option>
|
|
|
- </el-select>
|
|
|
+ <el-radio-group v-model="form.memberSex">
|
|
|
+ <el-radio label="10" value="10">男</el-radio>
|
|
|
+ <el-radio label="20" value="20">女</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="实验开始时间" prop="startDate">
|
|
|
+ <div class="flex">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.startDate"
|
|
|
+ type="date"
|
|
|
+ class="w100"
|
|
|
+ placeholder="选择实验开始时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="实验结束时间" prop="endDate">
|
|
|
+ <div class="flex">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.endDate"
|
|
|
+ type="date"
|
|
|
+ class="w100"
|
|
|
+ placeholder="选择实验结束时间">
|
|
|
+ </el-date-picker>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="联系方式" prop="userContact">
|
|
|
+ <el-form-item label="工号/学号" prop="memberNo">
|
|
|
<div class="flex">
|
|
|
<el-input
|
|
|
- placeholder="请输入"
|
|
|
- class="w100"
|
|
|
- maxlength="11"
|
|
|
- v-model="form.field4"
|
|
|
+ placeholder="请输入"
|
|
|
+ class="w100"
|
|
|
+ maxlength="11"
|
|
|
+ v-model="form.memberNo"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="预约时间" prop="userContact">
|
|
|
+ <el-form-item label="人员类型" prop="memberType">
|
|
|
+ <el-radio-group v-model="form.memberType">
|
|
|
+ <el-radio label="10" value="10">本院</el-radio>
|
|
|
+ <el-radio label="20" value="20">外院</el-radio>
|
|
|
+ <el-radio label="30" value="30">学生</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="科室" prop="deptId">
|
|
|
+ <div class="flex">
|
|
|
+ <el-cascader ref="memberDept"
|
|
|
+ :options="deptData"
|
|
|
+ @change="memberDeptChange"
|
|
|
+ :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'deptName' }"
|
|
|
+ placeholder="请选择科室"
|
|
|
+ clearable
|
|
|
+ class="w100"
|
|
|
+ v-model="form.deptId">
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span>{{ data.deptName }}</span>
|
|
|
+ <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
|
+ </template>
|
|
|
+ </el-cascader>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="工作单位" prop="workPlace">
|
|
|
+ <div class="flex">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ class="w100"
|
|
|
+ maxlength="100"
|
|
|
+ v-model="form.workPlace"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="form.memberType === '20'">
|
|
|
+ <el-form-item label="身份证号码" prop="memberIden">
|
|
|
+ <div class="flex">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ class="w100"
|
|
|
+ maxlength="11"
|
|
|
+ v-model="form.memberIden"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="form.memberType === '30'">
|
|
|
+ <el-form-item label="导师姓名" prop="mentorName">
|
|
|
+ <div class="flex">
|
|
|
+ <el-select
|
|
|
+ v-model="form.mentorName"
|
|
|
+ @change="mentorChange"
|
|
|
+ value-key="id"
|
|
|
+ class="w100"
|
|
|
+ placeholder="请选择"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option :label="v.nickName" :value="v" :key="v.id" v-for="v in userList" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="form.memberType === '30'">
|
|
|
+ <el-form-item label="导师电话" prop="mentorPhone">
|
|
|
<div class="flex">
|
|
|
<el-input
|
|
|
- placeholder="请输入"
|
|
|
- class="w100"
|
|
|
- maxlength="11"
|
|
|
- v-model="form.field5"
|
|
|
+ placeholder="请输入"
|
|
|
+ class="w100"
|
|
|
+ maxlength="11"
|
|
|
+ v-model="form.mentorPhone"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ <el-col :span="12" v-if="form.memberType === '30'">
|
|
|
+ <el-form-item label="导师科室" prop="mentorDeptId">
|
|
|
+ <div class="flex">
|
|
|
+ <el-cascader ref="mentorDept"
|
|
|
+ :options="deptData"
|
|
|
+ @change="mentorDeptChange"
|
|
|
+ :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'deptName' }"
|
|
|
+ placeholder="请选择科室"
|
|
|
+ clearable
|
|
|
+ class="w100"
|
|
|
+ v-model="form.mentorDeptId">
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span>{{ data.deptName }}</span>
|
|
|
+ <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
|
+ </template>
|
|
|
+ </el-cascader>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <!-- END -->
|
|
|
+ </el-row>
|
|
|
+ <h3>申请入室平台</h3>
|
|
|
+ <el-row :gutter="20" class="form-row-wrap">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="所属课题组" prop="userContact">
|
|
|
+ <el-form-item label="平台" prop="platformName">
|
|
|
<div class="flex">
|
|
|
<el-input
|
|
|
- placeholder="请输入"
|
|
|
- class="w100"
|
|
|
- maxlength="11"
|
|
|
- v-model="form.field6"
|
|
|
+ disabled
|
|
|
+ placeholder="请输入"
|
|
|
+ class="w100"
|
|
|
+ maxlength="11"
|
|
|
+ v-model="form.platformName"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="时间(月)" prop="platformTime">
|
|
|
+ <div class="flex">
|
|
|
+ <el-input-number class="w100" v-model.number="form.platformTime" controls-position="right" :min="0" :step="0.1" step-strictly></el-input-number>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="预约说明" prop="userContact">
|
|
|
+ <el-form-item label="其它" prop="other">
|
|
|
<div class="flex">
|
|
|
<el-input
|
|
|
- type="textarea"
|
|
|
- :rows="3"
|
|
|
- placeholder="请输入"
|
|
|
- class="w100"
|
|
|
- maxlength="11"
|
|
|
- v-model="form.field14"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入"
|
|
|
+ class="w100"
|
|
|
+ maxlength="255"
|
|
|
+ v-model="form.other"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <!-- END -->
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-checkbox v-model="checked3">
|
|
|
+ <el-checkbox v-model="checked">
|
|
|
<el-button type="text">
|
|
|
我已完整阅读并同意 《预约须知》的内容
|
|
|
</el-button>
|
|
|
@@ -145,86 +251,183 @@
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
<disclaimer
|
|
|
- ref="disclaimerRef"
|
|
|
- @agreeDisclaimer="handleAgreeDisclaimer"
|
|
|
+ ref="disclaimerRef"
|
|
|
+ @agreeDisclaimer="handleAgreeDisclaimer"
|
|
|
></disclaimer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import disclaimer from "./disclaimer.vue";
|
|
|
- export default {
|
|
|
- name: "FrontendWebTest",
|
|
|
- components: {
|
|
|
- disclaimer,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- title: "技术平台-预约申请",
|
|
|
- form: {
|
|
|
- field1: "",
|
|
|
- field2: "",
|
|
|
- field3: "",
|
|
|
- field4: "",
|
|
|
- field5: "",
|
|
|
- field6: "",
|
|
|
- field7: "",
|
|
|
- field8: "",
|
|
|
- field9: "",
|
|
|
- field10: "",
|
|
|
- field11: "",
|
|
|
- field12: "",
|
|
|
- field13: "",
|
|
|
- field14: "",
|
|
|
- },
|
|
|
- checked3: false,
|
|
|
- state: {
|
|
|
- isShowDialog: false,
|
|
|
- loading: false,
|
|
|
- },
|
|
|
- rules: {
|
|
|
- startTime: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async openDialog() {
|
|
|
- this.state.isShowDialog = true;
|
|
|
- },
|
|
|
- onCancel() {
|
|
|
- this.$refs.editFormRef.clearValidate();
|
|
|
- this.$refs.editFormRef.resetFields();
|
|
|
- this.state.isShowDialog = false;
|
|
|
+import disclaimer from "./disclaimer.vue";
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+import { getDeptTree } from "@/api/dict";
|
|
|
+import { getUserList } from "@/api/instr";
|
|
|
+import { create } from "@/api/platform"
|
|
|
+import to from "await-to-js";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+export default {
|
|
|
+ name: "FrontendWebTest",
|
|
|
+ components: {
|
|
|
+ disclaimer,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["userInfo"]),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "技术平台-入室申请",
|
|
|
+ type: '',
|
|
|
+ form: {
|
|
|
+ id: 0,
|
|
|
+ memberId: 0,
|
|
|
+ memberName: "",
|
|
|
+ memberPhone: "",
|
|
|
+ memberSex: "",
|
|
|
+ memberNo: "",
|
|
|
+ memberIden: "",
|
|
|
+ startDate: "",
|
|
|
+ endDate: "",
|
|
|
+ memberType: "",
|
|
|
+ deptId: 0,
|
|
|
+ deptName: "",
|
|
|
+ workPlace: "",
|
|
|
+ mentorId: 0,
|
|
|
+ mentorName: "",
|
|
|
+ mentorPhone: "",
|
|
|
+ mentorDeptId: 0,
|
|
|
+ mentorDeptName: "",
|
|
|
+ platformId: 0,
|
|
|
+ platformName: "",
|
|
|
+ platformType: "",
|
|
|
+ platformTime: 0,
|
|
|
+ other: "",
|
|
|
},
|
|
|
- subAdd() {
|
|
|
- this.$refs.disclaimerRef.openDialog();
|
|
|
+ checked: false,
|
|
|
+ state: {
|
|
|
+ isShowDialog: false,
|
|
|
+ loading: false,
|
|
|
},
|
|
|
- handleAgreeDisclaimer() {
|
|
|
- this.$message.success("提交成功");
|
|
|
- this.state.isShowDialog = false;
|
|
|
+ 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" }],
|
|
|
},
|
|
|
+ deptData: [], // 部门树
|
|
|
+ userList: [], // 用户列表
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDicts() {
|
|
|
+ Promise.all([
|
|
|
+ getDeptTree(),
|
|
|
+ getUserList({ noPage: true }),
|
|
|
+ ]).then(([dept, user]) => {
|
|
|
+ this.deptData = dept.data || [];
|
|
|
+ this.userList = user.data.list || [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async openDialog(type, row) {
|
|
|
+ // 校验token
|
|
|
+ const token = getToken();
|
|
|
+ if (!token) {
|
|
|
+ return this.$router.push("/login?redirect=/technical-plat/index");
|
|
|
+ }
|
|
|
+
|
|
|
+ this.form = {}
|
|
|
+ this.checked = false
|
|
|
+
|
|
|
+ this.type = type;
|
|
|
+ this.getDicts()
|
|
|
+ if (type === 'add') {
|
|
|
+ this.form.platformId = row.id
|
|
|
+ this.form.platformName = row.platformName
|
|
|
+ this.form.platformType = row.platformType
|
|
|
+ }
|
|
|
+ this.state.isShowDialog = true;
|
|
|
+ },
|
|
|
+ memberDeptChange() {
|
|
|
+ const nodes = this.$refs.memberDept.getCheckedNodes();
|
|
|
+ this.form.deptName = nodes[0].label;
|
|
|
+ },
|
|
|
+ mentorDeptChange() {
|
|
|
+ const nodes = this.$refs.mentorDept.getCheckedNodes();
|
|
|
+ this.form.mentorDeptName = nodes[0].label;
|
|
|
+ },
|
|
|
+ memberChange(user) {
|
|
|
+ this.form.memberId = user.id || null;
|
|
|
+ this.form.memberName = user.nickName || null;
|
|
|
+ this.form.memberPhone = user.phone || '';
|
|
|
+ this.form.memberSex = user.sex || '';
|
|
|
+ this.form.memberNo = user.userName || '';
|
|
|
+ this.form.memberIden = user.idCode || '';
|
|
|
+ this.form.deptId = user.deptId || null;
|
|
|
+ this.form.deptName = user.deptName || '';
|
|
|
},
|
|
|
- };
|
|
|
+ mentorChange(user) {
|
|
|
+ this.form.mentorId = user.id || null;
|
|
|
+ this.form.mentorName = user.nickName || null;
|
|
|
+ this.form.mentorPhone = user.phone || '';
|
|
|
+ this.form.mentorDeptId = user.deptId || null;
|
|
|
+ this.form.mentorDeptName = user.deptName || '';
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ this.$refs.editFormRef.clearValidate();
|
|
|
+ this.$refs.editFormRef.resetFields();
|
|
|
+ this.state.isShowDialog = false;
|
|
|
+ },
|
|
|
+ subAdd() {
|
|
|
+ this.$refs.editFormRef.validate(async valid => {
|
|
|
+ if(valid) {
|
|
|
+ if (!this.checked) {
|
|
|
+ this.$refs.disclaimerRef.openDialog();
|
|
|
+ } else {
|
|
|
+ // 提交申请
|
|
|
+ if (this.type === 'add') {
|
|
|
+ this.form.isTemporary = '20'
|
|
|
+ const [err] = await to(create(this.form));
|
|
|
+ if(err) {
|
|
|
+ this.$message.warning('操作失败')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$message.success("操作成功");
|
|
|
+ }
|
|
|
+ this.state.isShowDialog = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAgreeDisclaimer() {
|
|
|
+ this.checked = true
|
|
|
+ // this.$message.success("提交成功");
|
|
|
+ // this.state.isShowDialog = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- :deep(.el-dialog__body) {
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- .appoint-section {
|
|
|
- min-height: 450px;
|
|
|
- }
|
|
|
- .exper-info-list {
|
|
|
- h3 {
|
|
|
- color: #2c405e;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .label {
|
|
|
- width: 100px;
|
|
|
- }
|
|
|
- }
|
|
|
- .step-tit {
|
|
|
+:deep(.el-dialog__body) {
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+.appoint-section {
|
|
|
+ min-height: 450px;
|
|
|
+}
|
|
|
+.exper-info-list {
|
|
|
+ h3 {
|
|
|
color: #2c405e;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+ .label {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.step-tit {
|
|
|
+ color: #2c405e;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
</style>
|
yanglingling