修改请假样式

src/components/CpdmLeave.vue

@@ -82,12 +82,15 @@ const rules = reactive<FormRules<RuleForm>>({
     ],
     dormitory: [
         { required: true, message: '请填写宿舍信息', trigger: 'blur' },
+        { min: 1, max: 200, message: '宿舍信息不能超过200字', trigger: 'blur' },
     ],
     destination: [
         { required: true, message: '请填写出行目的', trigger: 'blur' },
+        { min: 1, max: 200, message: '出行目的不能超过200字', trigger: 'blur' },
     ],
     reason: [
         { required: true, message: '请填写请假原因', trigger: 'blur' },
+        { min: 1, max: 20, message: '请假原因不能超过200字', trigger: 'blur' },
     ],
     isKnow: [
         { required: true, message: '请填写父母是否知情', trigger: 'blur' },
@@ -356,9 +359,8 @@ const handleCurrentChange = (val: number) => {
 }
 
 //需要重新编辑操作
-const editFun = (val: any) => {
-
-    editFlag.value.open(val)
+const editFun = (val: any, flag: boolean) => {
+    editFlag.value.open(val, flag)
 }
 const listFun = () => {
     //刷新列表
@@ -410,10 +412,10 @@ defineExpose({ open })
                             <el-input v-model="ruleForm.dormitory" placeholder="例如松15-XXX" />
                         </el-form-item>
                         <el-form-item label="请假原因" prop="reason">
-                            <el-input v-model="ruleForm.reason" :rows="1" type="textarea" placeholder="一定要写清楚，例如拔牙" />
+                            <el-input v-model="ruleForm.reason" :rows="2" type="textarea" placeholder="一定要写清楚，例如拔牙" />
                         </el-form-item>
                         <el-form-item label="出行目的地" prop="destination">
-                            <el-input v-model="ruleForm.destination" :rows="1" type="textarea"
+                            <el-input v-model="ruleForm.destination" :rows="2" type="textarea"
                                 placeholder="一定要写清楚，例如郑州市中原区高新区郑州中心医院" />
                         </el-form-item>
 
@@ -459,34 +461,44 @@ defineExpose({ open })
                 <div v-show="type == '2'" style="padding:10px 20px">
                     <el-table :data="tableData" style="width: 100%;height: 60vh;"
                         :header-cell-style="{ background: '#F8F8F8', color: '#606266' }">
-                        <el-table-column fixed prop="leaveType" label="是否离郑" width="" :formatter="leaveTypeFormatter" />
-                        <el-table-column prop="userPhone" label="本人手机号码" width="" />
-                        <el-table-column prop="monitorName" label="班长姓名" width="" />
-                        <el-table-column prop="dormitory" label="宿舍" width="" />
-                        <el-table-column prop="reason" label="请假原因" width="" />
-                        <el-table-column prop="destination" label="出行目的地" width="" />
-                        <el-table-column prop="isKnow" label="父母是否知情" width="" :formatter="isKnowFormatter" />
-                        <el-table-column prop="companionsPhone" label="同行人电话" width="" />
-                        <el-table-column prop="motherPhone" label="母亲电话" width="" />
-                        <el-table-column prop="fatherPhone" label="父亲电话" width="" />
-                        <el-table-column prop="travelMode" label="出行方式" width="" />
-                        <el-table-column prop="startTime" label="请假时间" width="" />
-                        <el-table-column prop="endTime" label="返校时间" width="" />
-                        <el-table-column fixed="right" prop="auditSuggest" label="审核建议" width="" />
-                        <el-table-column fixed="right" prop="auditStatus" label="审核状态" width=""
+                        <el-table-column fixed prop="leaveType" label="是否离郑" width="" :formatter="leaveTypeFormatter"
+                            align="center" />
+                        <el-table-column prop="userPhone" label="本人手机号码" width="" show-overflow-tooltip
+                            align="center" />
+                        <!-- <el-table-column prop="monitorName" label="班长姓名" width="" /> -->
+                        <!-- <el-table-column prop="dormitory" label="宿舍" width="" /> -->
+                        <el-table-column prop="reason" label="请假原因" width="" align="center" />
+                        <el-table-column prop="destination" label="出行目的地" width="" show-overflow-tooltip
+                            align="center" />
+                        <!-- <el-table-column prop="isKnow" label="父母是否知情" width="" :formatter="isKnowFormatter" /> -->
+                        <!-- <el-table-column prop="companionsPhone" label="同行人电话" width="" /> -->
+                        <!-- <el-table-column prop="motherPhone" label="母亲电话" width="" />
+                        <el-table-column prop="fatherPhone" label="父亲电话" width="" /> -->
+                        <el-table-column prop="travelMode" label="出行方式" width="" show-overflow-tooltip align="center" />
+                        <el-table-column prop="startTime" label="请假时间" width="" show-overflow-tooltip align="center" />
+                        <el-table-column prop="endTime" label="返校时间" width="" show-overflow-tooltip align="center" />
+                        <el-table-column fixed="right" prop="auditSuggest" label="审核建议" width="" align="center"
+                            show-overflow-tooltip />
+                        <el-table-column fixed="right" prop="auditStatus" label="审核状态" width="" align="center"
                             :formatter="auditStatusFormatter" />
-                        <el-table-column fixed="right" prop="auditResult" label="审核结果" width=""
+                        <el-table-column fixed="right" prop="auditResult" label="审核结果" width="" align="center"
                             :formatter="auditResultFormatter" />
-                        <el-table-column fixed="right" label="操作" min-width="">
+                        <el-table-column fixed="right" label="操作" min-width="" align="center">
                             <template #default="scoped">
 
                                 <el-button v-show="scoped.row.auditResult == null" link type="primary" size="small"
-                                    @click="editFun(scoped.row)">重新编辑</el-button>
+                                    @click="editFun(scoped.row, false)">重新编辑</el-button>
+                                <el-button link type="primary" size="small" style="margin-left: 0px;"
+                                    @click="editFun(scoped.row, true)">查看</el-button>
                             </template>
                         </el-table-column>
                     </el-table>
-                    <el-pagination background v-model:current-page="pageNum" :page-size="pageSize"
-                        layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
+                    <div style="display: flex;justify-content: center;margin-top:10px">
+                        <el-pagination background v-model:current-page="pageNum" :page-size="pageSize"
+                            layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
+
+                    </div>
+
                 </div>
             </template>
             <CpdmLeaveEdit ref="editFlag" @search='listFun' />
@@ -548,8 +560,8 @@ defineExpose({ open })
     }
 
     :deep(.el-form-item__content) {
-        // align-items: flex-start !important;
-        align-items: center !important;
+        align-items: flex-start !important;
+        // align-items: center !important;
     }
 }
 

src/components/CpdmLeaveEdit.vue

@@ -7,10 +7,11 @@ import { format } from 'date-fns/format';
 const leave_visible = ref<boolean>(false)
 
 const emit = defineEmits(['search'])
-
+const flagView = ref<boolean>(false)
 //返回的数据
 const detailData = ref<any>({})
-const open = (val: any) => {
+const open = (val: any, flag: boolean) => {
+    flagView.value = flag
     detailData.value = val
     leave_visible.value = true;
     //回显数据
@@ -330,62 +331,63 @@ defineExpose({ open })
                     :validate-on-rule-change=false label-width="auto" class="demo-ruleForm" :size="formSize"
                     status-icon>
                     <el-form-item label="是否离郑" prop="leaveType">
-                        <el-radio-group v-model="ruleForm.leaveType" @change="leaveStatus">
+                        <el-radio-group v-model="ruleForm.leaveType" @change="leaveStatus" :disabled="flagView">
                             <el-radio value="0">不离郑</el-radio>
                             <el-radio value="1">离郑</el-radio>
                         </el-radio-group>
                     </el-form-item>
 
                     <el-form-item label="本人手机号码" prop="userPhone">
-                        <el-input v-model="ruleForm.userPhone" placeholder="请输入本人手机号码" />
+                        <el-input v-model="ruleForm.userPhone" placeholder="请输入本人手机号码" :disabled="flagView" />
                     </el-form-item>
 
                     <el-form-item label="班长姓名" prop="monitorName" v-if="ruleForm.leaveType == '1'">
-                        <el-input v-model="ruleForm.monitorName" placeholder="请输入班长姓名" />
+                        <el-input v-model="ruleForm.monitorName" placeholder="请输入班长姓名" :disabled="flagView" />
                     </el-form-item>
 
                     <el-form-item label="宿舍" prop="dormitory">
-                        <el-input v-model="ruleForm.dormitory" placeholder="例如松15-XXX" />
+                        <el-input v-model="ruleForm.dormitory" placeholder="例如松15-XXX" :disabled="flagView" />
                     </el-form-item>
                     <el-form-item label="请假原因" prop="reason">
-                        <el-input v-model="ruleForm.reason" type="textarea" placeholder="一定要写清楚，例如拔牙" />
+                        <el-input v-model="ruleForm.reason" type="textarea" placeholder="一定要写清楚，例如拔牙"
+                            :disabled="flagView" />
                     </el-form-item>
                     <el-form-item label="出行目的地" prop="destination">
-                        <el-input v-model="ruleForm.destination" type="textarea"
+                        <el-input v-model="ruleForm.destination" type="textarea" :disabled="flagView"
                             placeholder="一定要写清楚，例如郑州市中原区高新区郑州中心医院" />
                     </el-form-item>
 
                     <el-form-item label="父母是否知情" prop="isKnow">
 
-                        <el-radio-group v-model="ruleForm.isKnow">
+                        <el-radio-group v-model="ruleForm.isKnow" :disabled="flagView">
                             <el-radio value="1">知情</el-radio>
                             <el-radio value="0">不知情</el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="同行人电话" prop="companionsPhone" v-if="ruleForm.leaveType == '1'">
-                        <el-input v-model="ruleForm.companionsPhone" placeholder="请输入同行人电话" />
+                        <el-input v-model="ruleForm.companionsPhone" placeholder="请输入同行人电话" :disabled="flagView" />
                     </el-form-item>
 
                     <el-form-item label="母亲电话" prop="motherPhone">
-                        <el-input v-model="ruleForm.motherPhone" placeholder="请输入母亲电话" />
+                        <el-input v-model="ruleForm.motherPhone" placeholder="请输入母亲电话" :disabled="flagView" />
                     </el-form-item>
                     <el-form-item label="父亲电话" prop="fatherPhone">
-                        <el-input v-model="ruleForm.fatherPhone" placeholder="请输入父亲电话" />
+                        <el-input v-model="ruleForm.fatherPhone" placeholder="请输入父亲电话" :disabled="flagView" />
                     </el-form-item>
                     <el-form-item label="出行方式" prop="travelMode">
-                        <el-input v-model="ruleForm.travelMode" placeholder="请输入出行方式" />
+                        <el-input v-model="ruleForm.travelMode" placeholder="请输入出行方式" :disabled="flagView" />
                     </el-form-item>
                     <el-form-item label="请假时间" prop="startTime">
                         <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="请输入请假时间"
-                            style="width: 100%;" />
+                            style="width: 100%;" :disabled="flagView" />
                     </el-form-item>
                     <el-form-item label="返校时间" prop="endTime">
                         <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="请输入返校时间"
-                            style="width: 100%;" />
+                            style="width: 100%;" :disabled="flagView" />
                     </el-form-item>
 
                 </el-form>
-                <div class="reset_sub">
+                <div class="reset_sub" v-show="!flagView">
                     <el-button @click="resetData(ruleFormRef)"
                         style="border-radius: 40px;padding:10px 40px">重置</el-button>
                     <el-button type="success" @click="submitForm(ruleFormRef)" :disabled="buttonStatus"
@@ -408,6 +410,10 @@ defineExpose({ open })
         margin-top: 10px;
     }
 
+    :deep(.el-form) {
+        justify-content: space-between;
+    }
+
     :deep(.el-input__wrapper) {
         align-items: center;
         background-color: #F7F7F7 !important;

src/components/CpmdHeader.vue

@@ -134,7 +134,7 @@ const leaveFun = () => {
                             退出登录
                         </div>
                         <div class="exit_login" @click="leaveFun">
-                            请假
+                            我的请假
                         </div>
                     </div>
                 </transition>