[exam] finish assign and remove

admin/src/views/user/detail.vue

@@ -112,6 +112,7 @@
             </el-row>
         </el-card>
     </div>
+    <DialogAssignExam ref="assignExam" :reload="fetchPageData"/>
 </template>
 
 <script>
@@ -119,23 +120,22 @@ import { onMounted, reactive, ref, toRefs } from 'vue'
 import { ElMessage } from 'element-plus'
 import {useRoute, useRouter} from 'vue-router'
 import api from '../../utils/api'
+import DialogAssignExam from './dialog-assign-exam.vue'
 
 export default {
     name: "UserDetail",
+    components: {
+        DialogAssignExam
+    },
     setup() {
         const route = useRoute()
         const router = useRouter()
         const { id } = route.query
+        const assignExam = ref(null)
         const state = reactive({
             loading: false,
             baseInfo: {},
             examInfo: {},
-            matchExams: [],
-            dialogAssignExamFormVisible: false,
-            assignExamFormData: {
-                exam_id: '',
-                timeRange: []
-            }
         })
         onMounted(() => {
             fetchPageData()
@@ -153,12 +153,14 @@ export default {
             await fetchPageData()
         }
         const handleAssignExam = async () => {
-            state.dialogAssignExamFormVisible = true;
+            assignExam.value.open(id)
         }
         return {
             ...toRefs(state),
             handleRemoveExam,
-            handleAssignExam
+            handleAssignExam,
+            assignExam,
+            fetchPageData
         }
     }
 }

admin/src/views/user/dialog-assign-exam.vue

@@ -1,13 +1,18 @@
 <template>
     <el-dialog
         title="Assign exam to user"
-        v-model="dialogAssignExamFormVisible"
+        v-model="visible"
         center
-        class="dialog-assign-exam"
+        :close-on-click-modal="false"
     >
-        <el-form :model="assignExamFormData" label-width="150px">
-            <el-form-item label="Exam">
-                <el-select v-model="assignExamFormData.exam_id" placeholder="Select an exam...">
+        <el-form
+            :model="formData"
+            label-width="100px"
+            v-loading="loading"
+            ref="formRef"
+            :rules="rules">
+            <el-form-item label="Exam" prop="exam_id">
+                <el-select v-model="formData.exam_id" placeholder="Select an exam...">
                     <el-option
                         v-for="item in matchExams"
                         :key="item.id"
@@ -16,9 +21,9 @@
                     </el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="Exam time range">
+            <el-form-item label="Time range" prop="time_range">
                 <el-date-picker
-                    v-model="assignExamFormData.timeRange"
+                    v-model="formData.time_range"
                     type="datetimerange"
                     format="YYYY-MM-DD HH:mm:ss"
                     range-separator="to"
@@ -30,9 +35,72 @@
         </el-form>
         <template #footer>
                 <span class="dialog-footer">
-                  <el-button @click="dialogAssignExamFormVisible = false">取 消</el-button>
-                  <el-button type="primary" @click="dialogAssignExamFormVisible = false">确 定</el-button>
+                  <el-button @click="visible = false">取 消</el-button>
+                  <el-button type="primary" @click="handleSubmit">确 定</el-button>
                 </span>
         </template>
     </el-dialog>
 </template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import {useRoute, useRouter} from 'vue-router'
+import api from '../../utils/api'
+
+export default {
+    name: "DialogAssignExam",
+    props: {
+        reload: Function
+    },
+    setup(props, context) {
+        const formRef = ref(null)
+        const state = reactive({
+            loading: false,
+            matchExams: [],
+            visible: false,
+            formData: {
+                uid: 0,
+                exam_id: '',
+                time_range: []
+            },
+            rules: {
+                exam_id: [{ required: 'true'}]
+            }
+        })
+        const listMatchExams = async () => {
+            let res = await api.listUserMatchExams({uid: state.formData.uid})
+            state.matchExams = res.data
+        }
+        const open = (uid) => {
+            state.formData.uid = uid
+            if (state.matchExams.length == 0) {
+                state.loading = true
+                listMatchExams()
+                state.loading = false
+            }
+            state.visible = true
+
+        }
+        const handleSubmit = () => {
+            formRef.value.validate(async (valid) => {
+                if (valid) {
+                    let res = await api.storeExamUser(state.formData)
+                    state.visible = false
+                    ElMessage.success(res.msg)
+                    if (props.reload) {
+                        props.reload()
+                    }
+                }
+            })
+        }
+        return {
+            ...toRefs(state),
+            handleSubmit,
+            formRef,
+            open,
+
+        }
+    }
+}
+</script>