index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  1. <template>
  2. <el-dialog v-model="visible" title="课堂借用申请单" width="80%" :close-on-click-modal="false" @close="onCancel">
  3. <div style="margin-bottom: 16px">
  4. <div style="font-weight: bold; font-size: 18px; margin-bottom: 8px">课程信息</div>
  5. <el-row :gutter="8" style="margin-bottom: 8px; align-items: center">
  6. <el-col :span="6">
  7. <el-select v-model="form.purpose" placeholder="请选择课程" @change="onCourseChange">
  8. <el-option
  9. v-for="course in weeklyCourses"
  10. :key="course.id"
  11. :label="`${course.classdetail} - ${course.teacher_name} - ${course.classroom} - ${course.time_label}`"
  12. :value="course.classdetail"
  13. />
  14. </el-select>
  15. </el-col>
  16. </el-row>
  17. <div style="max-height: 400px; overflow-y: auto; border: 1px solid #eee; padding: 8px; margin-bottom:0px">
  18. <timetablemanage />
  19. </div>
  20. </div>
  21. <el-form :model="form" label-width="110px" label-position="top" :rules="rules" ref="formRef">
  22. <el-row :gutter="16">
  23. <el-col :span="8">
  24. <el-form-item label="借用单编号" prop="application_no">
  25. <el-input v-model="form.application_no" placeholder="自动生成" disabled />
  26. </el-form-item>
  27. </el-col>
  28. <el-col :span="8">
  29. <el-form-item label="借用人类型" prop="borrower_type">
  30. <el-select v-model="form.borrower_type" placeholder="请选择借用人角色" >
  31. <el-option label="管理员用户" :value=0 />
  32. <el-option label="应用用户" :value=1 />
  33. <el-option label="外部用户" :value=2 />
  34. </el-select>
  35. </el-form-item>
  36. </el-col>
  37. <el-col :span="8" >
  38. <el-form-item label="借用人" prop="admin_borrower" v-if="form.borrower_type == 0">
  39. <el-select v-model="form.admin_borrower" placeholder="请选择借用人" >
  40. <el-option :label="adminList.name" :value="adminList.id" />
  41. </el-select>
  42. </el-form-item>
  43. <el-form-item label="借用人" prop="app_user_borrower" v-if="form.borrower_type == 1">
  44. <el-select v-model="form.app_user_borrower" placeholder="请选择借用人" >
  45. <el-option v-for="item in allUserList" :key="item.id" :label="item.name" :value="item.id" />
  46. </el-select>
  47. </el-form-item>
  48. <el-form-item label="借用人" prop="external_borrower_name" v-if="form.borrower_type == 2">
  49. <el-input v-model="form.external_borrower_name" placeholder="请输入借用人" />
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="8" v-if="form.borrower_type !== 2">
  53. <el-form-item label="学号/工号" prop="user_code">
  54. <el-input v-model="form.user_code" placeholder="请输入学号/工号" />
  55. </el-form-item>
  56. </el-col>
  57. <el-col :span="8">
  58. <el-form-item label="联系电话" prop="mobile" v-if="form.borrower_type !== 2">
  59. <el-input v-model="form.mobile" placeholder="请输入联系电话" />
  60. </el-form-item>
  61. <el-form-item label="联系电话" prop="mobile" v-if="form.borrower_type == 2">
  62. <el-input v-model="form.external_borrower_phone" placeholder="请输入联系电话" />
  63. </el-form-item>
  64. </el-col>
  65. <!-- <el-col :span="8">
  66. <el-form-item label="借用部门" prop="borrower_dept">
  67. <el-input v-model="form.borrower_dept" placeholder="请输入借用部门" />
  68. </el-form-item>
  69. </el-col> -->
  70. <el-col :span="4">
  71. <el-form-item label="团队人数" prop="team_members_count">
  72. <el-input v-model="form.team_members_count" placeholder="请输入" />
  73. </el-form-item>
  74. </el-col>
  75. <el-col :span="12">
  76. <el-form-item label="团队其他人员名单" prop="team_members">
  77. <el-input v-model="form.team_members" placeholder="请输入团队其他人员名单" />
  78. </el-form-item>
  79. </el-col>
  80. <el-col :span="12">
  81. <el-form-item label="备注" prop="applicant_remark">
  82. <el-input v-model="form.applicant_remark" placeholder="请输入备注" />
  83. </el-form-item>
  84. </el-col>
  85. <el-col :span="8">
  86. <el-form-item label="预计归还时间" prop="expected_end_time">
  87. <el-date-picker v-model="form.expected_end_time" type="date"
  88. format="YYYY-MM-DD"
  89. value-format="YYYY-MM-DD"
  90. :disabledDate="disabledDate" placeholder="请选择预计归还时间" style="width: 100%" />
  91. </el-form-item>
  92. </el-col>
  93. </el-row>
  94. <div style="margin: 16px 0 8px 0; font-weight: bold">借用列表</div>
  95. <el-table :data="form.items" border style="width: 100%; margin-bottom: 12px">
  96. <el-table-column type="index" label="序号" width="60" />
  97. <el-table-column prop="remark" label="设备分类" />
  98. <el-table-column label="借用数量">
  99. <template #default="{ row }">
  100. <el-input v-model="row.quantity" type="number" :min="1" prop="quantity" size="small" />
  101. </template>
  102. </el-table-column>
  103. <!-- <el-table-column prop="location" label="存放仓库" /> -->
  104. <el-table-column label="操作" width="80">
  105. <template #default="{ row, $index }">
  106. <el-button type="text" style="color: red" @click="removeItem($index)">移除</el-button>
  107. </template>
  108. </el-table-column>
  109. </el-table>
  110. <el-button type="primary" @click="addItem">添加设备分类</el-button>
  111. <div style="margin: 16px 0 8px 0; font-weight: bold">配件信息</div>
  112. <el-input v-model="form.accessories" placeholder="请输入配件信息" :disabled="isView"/>
  113. <!-- <div style="margin: 16px 0 8px 0; font-weight: bold">附件</div>
  114. <el-upload
  115. drag
  116. list-type="picture"
  117. :show-file-list="true"
  118. :http-request="handleCustomUpload"
  119. >
  120. <i class="el-icon-upload"></i>
  121. <div class="el-upload__text">将文件拖到此处,或 <em>点击上传</em></div>
  122. </el-upload> -->
  123. <div style="margin: 16px 0 8px 0; font-weight: bold">附件</div>
  124. <div>
  125. <el-upload
  126. list-type="picture-card"
  127. :show-file-list="true"
  128. :http-request="handleCustomUpload"
  129. :file-list="fileList"
  130. :on-preview="handlePictureCardPreview"
  131. style="margin-top: 10px;"
  132. >
  133. <el-icon><Plus /></el-icon>
  134. </el-upload>
  135. </div>
  136. </el-form>
  137. <template #footer>
  138. <el-button @click="onCancel">关闭</el-button>
  139. <el-button v-if="!isViewMode" type="primary" @click="onSave">提交</el-button>
  140. </template>
  141. <!-- <SelectDeviceDialog v-model:visible="showSelectDeviceDialog" @confirm="onDeviceSelected" /> -->
  142. <SelectCatgory v-model:visible="showSelectDeviceDialog" @confirm="onDeviceSelected" />
  143. </el-dialog>
  144. <el-dialog v-model="dialogVisible">
  145. <img w-full :src="dialogImageUrl" alt="Preview Image" />
  146. </el-dialog>
  147. </template>
  148. <script setup lang="ts">
  149. import { ref, watch, defineProps, defineEmits, onMounted, computed,inject,Ref, } from 'vue';
  150. import SelectDeviceDialog from '../SpecialBorrow/SelectDeviceDialog/index.vue';
  151. import SelectCatgory from '../SelectCatgory/index.vue';
  152. import timetablemanage from '../../../timetablemanage/index.vue';
  153. import * as apis from '../../../timetablemanage/api';
  154. import * as api from '../../api';
  155. import { provide } from 'vue';
  156. import dayjs from 'dayjs';
  157. import { ElMessage,UploadProps, UploadUserFile } from 'element-plus';
  158. import { cloneDeep } from 'lodash-es';
  159. import Cookies from 'js-cookie';
  160. import { request } from '/@/utils/service';
  161. import { Plus } from '@element-plus/icons-vue';
  162. import { getUserInfo } from '../../../login/api';
  163. const dialogImageUrl = ref('')
  164. const dialogVisible = ref(false)
  165. const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  166. dialogImageUrl.value = uploadFile.url!
  167. dialogVisible.value = true
  168. }
  169. // 禁止选择今天之前的日期
  170. const disabledDate = (time: Date) => {
  171. // 获取今天的开始时间(准确到日)
  172. const today = new Date()
  173. today.setHours(0, 0, 0, 0)
  174. // 返回true表示禁用,禁用今天之前的所有日期
  175. return time.getTime() < today.getTime()
  176. }
  177. /* 获取管理员列表 */
  178. const adminList = ref([]);
  179. async function getAdminList() {
  180. const res = await getUserInfo();
  181. adminList.value = res.data;
  182. console.log("adminList.value:::",adminList.value)
  183. }
  184. /* */
  185. /* 获取所有用户 */
  186. const allUserList = ref([]);
  187. async function getAllUserList() {
  188. const res = await api.GetAllUser();
  189. allUserList.value = res.data;
  190. // 设置默认选择第一个用户
  191. if (allUserList.value.length > 0) {
  192. form.value.app_user_borrower = allUserList.value[0].id;
  193. }
  194. console.log("allUserList.value:::",allUserList.value)
  195. }
  196. const fileList = ref([]);
  197. // const fileList = ref([]);
  198. const handleCustomUpload = async ({ file, onProgress, onSuccess, onError }: any) => {
  199. const token = Cookies.get('token');
  200. const formData = new FormData();
  201. formData.append('file', file);
  202. console.log("token::::",token);
  203. try {
  204. const res = await request({
  205. url: `/api/system/upload/`,
  206. method: 'post',
  207. headers: {
  208. 'Content-Type': 'multipart/form-data',
  209. Authorization: 'JWT '+ token,
  210. },
  211. data: formData,
  212. timeout: 60000,
  213. onUploadProgress: (p: any) => {
  214. onProgress({percent: Math.round((p.loaded / p.total) * 100)});
  215. }
  216. });
  217. // 构造 Element Plus 需要的 file 对象
  218. const fileObj = {
  219. name: res.data.name,
  220. url: res.data.url,
  221. status: 'success',
  222. response: res.data
  223. };
  224. // 添加到附件列表
  225. form.value.attachments = fileObj.url;
  226. ElMessage.success('上传成功');
  227. onSuccess(fileObj);
  228. } catch (error) {
  229. ElMessage.error('上传失败');
  230. onError(error);
  231. }
  232. };
  233. provide('isEmbedded', true);
  234. provide('onCourseSelected', handleCourseSelected);
  235. const props = defineProps<{ visible: boolean; modelValue?: any ; lastFormSnapshot: Record<string, any>;}>();
  236. const emit = defineEmits(['update:visible', 'update:modelValue', 'submit','update:lastFormSnapshot']);
  237. const visible = ref(props.visible);
  238. const formRef = ref();
  239. const isEdit = computed(() => props.modelValue?.mode === 'edit');
  240. const isView = computed(() => props.modelValue?.mode === 'view');
  241. const isAdd = computed(() => props.modelValue?.mode === 'add');
  242. function handleCourseSelected({ course_id, course_Name,expected_start_time }) {
  243. // eslint-disable-next-line no-console
  244. console.log("kebiao=form.value.expected_start_time:::",form.value.expected_start_time)
  245. form.value.purpose = course_Name;
  246. form.value.expected_start_time = expected_start_time;
  247. }
  248. const weeklyCourses = ref<any[]>([]);
  249. async function fetchWeeklySchedule() {
  250. const res = await apis.GetCurrentWeekList();
  251. // eslint-disable-next-line no-console
  252. // console.log("res.data:::",res.data)
  253. const schedule = res.data.schedule;
  254. const courseMap = new Map<string, any>();
  255. for (const dayKey in schedule) {
  256. const daySchedule = schedule[dayKey];
  257. for (const timeKey in daySchedule) {
  258. const courses = daySchedule[timeKey];
  259. for (const course of courses) {
  260. if (!courseMap.has(course.classdetail)) {
  261. courseMap.set(course.classdetail, course);
  262. }
  263. }
  264. }
  265. }
  266. weeklyCourses.value = Array.from(courseMap.values());
  267. }
  268. function onCourseChange(selectedName: string) {
  269. const selectedCourse = weeklyCourses.value.find(c => c.classdetail === selectedName);
  270. if (selectedCourse) {
  271. form.value.expected_start_time = `${selectedCourse.class_date} ${getStartTime(selectedCourse.time)}`;
  272. form.value.teacher_name = selectedCourse.teacher_name;
  273. form.value.classroom = selectedCourse.classroom;
  274. }
  275. console.log("form.value.expected_start_time ::",form.value.expected_start_time );
  276. }
  277. function getStartTime(time: number): string {
  278. const timeMap = {
  279. 1: '09:00:00',
  280. 2: '14:00:00',
  281. 3: '19:00:00'
  282. };
  283. return timeMap[time] || '09:00:00';
  284. }
  285. const form = ref({
  286. application_no: '',
  287. borrower_type:1,
  288. external_borrower_name:"",
  289. external_borrower_phone:"",
  290. purpose:'',
  291. emergency_contact: '111',
  292. emergency_phone: '1111',
  293. app_user_borrower: 1,
  294. borrower_dept: '',
  295. team_type: 1,
  296. team_members_count: 2,
  297. team_members: '',
  298. expected_start_time:'',
  299. expected_end_time: "",
  300. applicant_remark: '',
  301. return_location:'',
  302. items: [],
  303. borrow_type:1,
  304. course_input: '',
  305. attachments:'',
  306. accessories:''
  307. });
  308. const showSelectDeviceDialog = ref(false);
  309. const isViewMode = computed(() => props.modelValue?.mode === 'view');
  310. const rules = {
  311. external_borrower_name: [
  312. { required: true, message: '请输入借用人', trigger: 'change' },
  313. ],
  314. app_user_borrower: [
  315. { required: true, message: '请输入学号或工号', trigger: 'change' },
  316. ],
  317. external_borrower_phone: [
  318. { required: true, message: '请输入联系电话', trigger: 'change' },
  319. ],
  320. team_members_count: [
  321. { required: true, message: '请输入团队人数', trigger: 'change' },
  322. {
  323. validator: (_rule, value, callback) => {
  324. if (value <= 1) {
  325. callback(new Error('团队人数必须大于 1'));
  326. } else {
  327. callback();
  328. }
  329. },
  330. trigger: 'change'
  331. }
  332. ],
  333. borrower_dept: [
  334. { required: true, message: '请输入借用部门', trigger: 'change' },
  335. ],
  336. expected_end_time: [
  337. { required: true, message: '请输选择归还时间', trigger: 'change' },
  338. ],
  339. team_members:[
  340. { required: true, message: '请输入团队其他人员名单', trigger: 'change' },
  341. ],
  342. team_type: [
  343. { required: true, message: '请选择个人或者团队', trigger: 'change' },
  344. ],
  345. purpose: [
  346. { required: true, message: '请输入借用原因', trigger: 'change' },
  347. ],
  348. applicant_remark: [
  349. { required: false, message: '请输入备注', trigger: 'change' },
  350. ],
  351. };
  352. onMounted(() => {
  353. try {
  354. const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
  355. if (userInfo) {
  356. form.value.borrower_type = 1;
  357. form.value.external_borrower_name = userInfo.username || '';
  358. form.value.app_user_borrower = Number(userInfo.dept_info?.dept_id )|| 1;
  359. form.value.external_borrower_phone = userInfo.mobile || '';
  360. form.value.borrower_dept = userInfo.dept_info?.dept_name || '';
  361. }
  362. } catch (e) {console.error(e)}
  363. fetchWeeklySchedule();
  364. getAdminList()
  365. getAllUserList()
  366. });
  367. // 监听借用人选择变化
  368. watch(() => form.value.app_user_borrower, (newValue) => {
  369. if (newValue && allUserList.value.length > 0) {
  370. const selectedUser = allUserList.value.find(user => user.id === newValue);
  371. if (selectedUser) {
  372. form.value.user_code = selectedUser.user_code || '';
  373. form.value.mobile = selectedUser.mobile || '';
  374. }
  375. }
  376. });
  377. function resetForm() {
  378. form.value = {
  379. application_no: '',
  380. borrower_type:1,
  381. external_borrower_name:"",
  382. external_borrower_phone:"",
  383. emergency_contact: '111',
  384. purpose: '',
  385. emergency_phone: '1111',
  386. app_user_borrower: 1,
  387. borrower_dept: '',
  388. team_type: 1,
  389. team_members_count: 2,
  390. team_members: '',
  391. expected_start_time: '',
  392. expected_end_time: '',
  393. applicant_remark: '',
  394. return_location: '',
  395. items: [],
  396. borrow_type: 1,
  397. course_input: '',
  398. attachments:'',
  399. accessories:''
  400. };
  401. }
  402. watch(() => props.visible, (v) => {
  403. visible.value = v;
  404. // console.log("快照visible.value::",visible.value)
  405. if (v) {
  406. if (props.lastFormSnapshot) {
  407. console.log("快照lastFormSnapshot.value::",props.lastFormSnapshot )
  408. form.value = { ...props.lastFormSnapshot };
  409. } else {
  410. resetForm(); // 如果没有快照,初始化表单
  411. }
  412. }
  413. }, { immediate: true });
  414. watch(() => props.modelValue, async (val) => {
  415. if (val && val.id && isView.value) {
  416. try {
  417. const res = await api.GetApplicationDetail(val.id);
  418. if (res.code === 2000 && res.data) {
  419. const data = res.data;
  420. Object.assign(form.value, data);
  421. }
  422. } catch (e) {
  423. ElMessage.error('获取详细信息失败');
  424. }
  425. }else if(val&& isEdit.value){
  426. try {
  427. const res = await api.GetApplicationDetail(val.id);
  428. if (res.code === 2000 && res.data) {
  429. const data = res.data;
  430. Object.assign(form.value, data);
  431. }
  432. } catch (e) {
  433. ElMessage.error('获取详细信息失败');
  434. }
  435. }
  436. }, { immediate: true });
  437. function addItem() {
  438. showSelectDeviceDialog.value = true;
  439. }
  440. function onDeviceSelected(devices) {
  441. if (!form.value.items) {
  442. form.value.items = [];
  443. }
  444. form.value.items.push(
  445. ...devices.map((d) => ({
  446. device_category: d.id,
  447. device: d.id,
  448. remark: d.name,
  449. quantity: 1,
  450. location: d.warehouse,
  451. }))
  452. );
  453. }
  454. function removeItem(index) {
  455. form.value.items.splice(index, 1);
  456. }
  457. function onCancel() {
  458. emit('update:visible', false);
  459. }
  460. const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
  461. function onSave() {
  462. formRef.value.validate((valid) => {
  463. if (valid) {
  464. form.value.items = form.value.items.map(item => ({
  465. ...item,
  466. quantity: Number(item.quantity) || 0
  467. }));
  468. const firstLocation = form.value.items[0]?.location || '';
  469. form.value.return_location = firstLocation;
  470. form.value.expected_start_time = form.value.expected_start_time ? form.value.expected_start_time : now;
  471. form.value.expected_end_time = dayjs(form.value.expected_end_time).format('YYYY-MM-DD HH:mm:ss')|| now;
  472. form.value.team_members_count=Number(form.value.team_members_count)||2;
  473. form.value.borrow_type = 1;
  474. // 添加mode和id信息
  475. const submitData = {
  476. ...form.value,
  477. mode: isEdit.value ? 'edit' : 'add',
  478. id: isEdit.value ? props.modelValue?.id : undefined
  479. };
  480. emit('submit', submitData);
  481. emit('update:visible', false);
  482. emit('update:lastFormSnapshot', cloneDeep(form.value));
  483. }
  484. });
  485. }
  486. </script>