index.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  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}`"
  12. :value="course.classdetail"
  13. />
  14. </el-select>
  15. </el-col>
  16. <!-- <el-col :span="3">
  17. <el-button>手动输入</el-button>
  18. </el-col> -->
  19. <el-col :span="6">
  20. <el-input v-model="form.course_input" placeholder="请输入课程名称" />
  21. </el-col>
  22. <el-col :span="3">
  23. <el-button type="primary">搜索</el-button>
  24. </el-col>
  25. </el-row>
  26. <div style="max-height: 400px; overflow-y: auto; border: 1px solid #eee; padding: 8px; margin-bottom:0px">
  27. <timetablemanage />
  28. </div>
  29. </div>
  30. <el-form :model="form" label-width="110px" label-position="top" :rules="rules" ref="formRef">
  31. <el-row :gutter="16">
  32. <el-col :span="8">
  33. <el-form-item label="借用单编号" prop="application_no">
  34. <el-input v-model="form.application_no" placeholder="自动生成" disabled />
  35. </el-form-item>
  36. </el-col>
  37. <el-col :span="8">
  38. <el-form-item label="借用人" prop="emergency_contact">
  39. <el-input v-model="form.emergency_contact" placeholder="请输入借用人" />
  40. </el-form-item>
  41. </el-col>
  42. <el-col :span="8">
  43. <el-form-item label="学号/工号" prop="app_user_borrower">
  44. <el-input v-model="form.app_user_borrower" placeholder="请输入学号/工号" />
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="8">
  48. <el-form-item label="联系电话" prop="emergency_phone">
  49. <el-input v-model="form.emergency_phone" placeholder="请输入联系电话" />
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="8">
  53. <el-form-item label="信用部门" prop="borrower_dept">
  54. <el-input v-model="form.borrower_dept" placeholder="请输入信用部门" />
  55. </el-form-item>
  56. </el-col>
  57. <el-col :span="4">
  58. <el-form-item label="团队人数" prop="team_members_count">
  59. <el-input v-model="form.team_members_count" placeholder="请输入" />
  60. </el-form-item>
  61. </el-col>
  62. <el-col :span="12">
  63. <el-form-item label="团队其他人员名单" prop="team_members">
  64. <el-input v-model="form.team_members" placeholder="请输入团队其他人员名单" />
  65. </el-form-item>
  66. </el-col>
  67. <el-col :span="12">
  68. <el-form-item label="备注" prop="applicant_remark">
  69. <el-input v-model="form.applicant_remark" placeholder="请输入备注" />
  70. </el-form-item>
  71. </el-col>
  72. <el-col :span="8">
  73. <el-form-item label="预计归还时间" prop="expected_end_time">
  74. <el-date-picker v-model="form.expected_end_time" type="datetime" placeholder="请选择预计归还时间" style="width: 100%" />
  75. </el-form-item>
  76. </el-col>
  77. </el-row>
  78. <div style="margin: 16px 0 8px 0; font-weight: bold">借用明细表</div>
  79. <el-table :data="form.items" border style="width: 100%; margin-bottom: 12px">
  80. <el-table-column type="index" label="序号" width="60" />
  81. <el-table-column prop="remark" label="设备分类" />
  82. <el-table-column label="借用数量">
  83. <template #default="{ row }">
  84. <el-input v-model="row.quantity" type="number" :min="1" prop="quantity" size="small" />
  85. </template>
  86. </el-table-column>
  87. <el-table-column prop="location" label="存放仓库" />
  88. <el-table-column label="操作" width="80">
  89. <template #default="{ row, $index }">
  90. <el-button type="text" style="color: red" @click="removeItem($index)">移除</el-button>
  91. </template>
  92. </el-table-column>
  93. </el-table>
  94. <el-button type="primary" @click="addItem">添加设备</el-button>
  95. <div style="margin: 16px 0 8px 0; font-weight: bold">附件</div>
  96. <el-upload action="#" list-type="text">
  97. <el-button type="primary">点击或拖拽上传</el-button>
  98. </el-upload>
  99. </el-form>
  100. <template #footer>
  101. <el-button @click="onCancel">取消</el-button>
  102. <el-button v-if="!isViewMode" type="primary" @click="onSave">保存</el-button>
  103. </template>
  104. <SelectDeviceDialog v-model:visible="showSelectDeviceDialog" @confirm="onDeviceSelected" />
  105. </el-dialog>
  106. </template>
  107. <script setup lang="ts">
  108. import { ref, watch, defineProps, defineEmits, onMounted, computed } from 'vue';
  109. import SelectDeviceDialog from '../SpecialBorrow/SelectDeviceDialog/index.vue';
  110. import timetablemanage from '../../../timetablemanage/index.vue';
  111. import * as apis from '../../../timetablemanage/api';
  112. import { provide } from 'vue';
  113. import dayjs from 'dayjs';
  114. import { ElMessage } from 'element-plus';
  115. provide('isEmbedded', true);
  116. provide('onCourseSelected', handleCourseSelected);
  117. const props = defineProps<{ visible: boolean; modelValue?: any }>();
  118. const emit = defineEmits(['update:visible', 'update:modelValue', 'submit']);
  119. const visible = ref(props.visible);
  120. const formRef = ref();
  121. function handleCourseSelected({ course_name, expected_start_time }) {
  122. form.value.purpose = course_name;
  123. form.value.expected_start_time = expected_start_time;
  124. }
  125. const weeklyCourses = ref<any[]>([]);
  126. async function fetchWeeklySchedule() {
  127. const res = await apis.GetCurrentWeekList();
  128. // eslint-disable-next-line no-console
  129. // console.log("res.data:::",res.data)
  130. const schedule = res.data.schedule;
  131. const courseMap = new Map<string, any>();
  132. for (const dayKey in schedule) {
  133. const daySchedule = schedule[dayKey];
  134. for (const timeKey in daySchedule) {
  135. const courses = daySchedule[timeKey];
  136. for (const course of courses) {
  137. if (!courseMap.has(course.classdetail)) {
  138. courseMap.set(course.classdetail, course);
  139. }
  140. }
  141. }
  142. }
  143. weeklyCourses.value = Array.from(courseMap.values());
  144. }
  145. function onCourseChange(selectedName: string) {
  146. const selectedCourse = weeklyCourses.value.find(c => c.classdetail === selectedName);
  147. if (selectedCourse) {
  148. form.value.expected_start_time = `${selectedCourse.class_date} ${getStartTime(selectedCourse.time)}`;
  149. form.value.teacher_name = selectedCourse.teacher_name;
  150. form.value.classroom = selectedCourse.classroom;
  151. }
  152. }
  153. function getStartTime(time: number): string {
  154. const timeMap = {
  155. 1: '09:00',
  156. 2: '14:00',
  157. 3: '19:00'
  158. };
  159. return timeMap[time] || '09:00';
  160. }
  161. const form = ref({
  162. application_no: '',
  163. emergency_contact: '',
  164. purpose:'',
  165. emergency_phone: '',
  166. app_user_borrower: 1,
  167. borrower_dept: '',
  168. team_type: 1,
  169. team_members_count: 1,
  170. team_members: '',
  171. expected_start_time:'',
  172. expected_end_time: "",
  173. applicant_remark: '',
  174. return_location:'',
  175. items: [],
  176. borrow_type:1,
  177. course_input: '',
  178. });
  179. const showSelectDeviceDialog = ref(false);
  180. const isViewMode = computed(() => props.modelValue?.mode === 'view');
  181. onMounted(() => {
  182. try {
  183. const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
  184. if (userInfo) {
  185. form.value.emergency_contact = userInfo.username || '';
  186. form.value.app_user_borrower = Number(userInfo.dept_info?.dept_id )|| 1;
  187. form.value.emergency_phone = userInfo.mobile || '';
  188. form.value.borrower_dept = userInfo.dept_info?.dept_name || '';
  189. }
  190. } catch (e) {console.error(e)}
  191. fetchWeeklySchedule();
  192. });
  193. watch(
  194. () => props.visible,
  195. (v) => (visible.value = v)
  196. );
  197. watch(
  198. () => props.modelValue,
  199. (v) => {
  200. if (v) Object.assign(form.value, v);
  201. }
  202. );
  203. function addItem() {
  204. showSelectDeviceDialog.value = true;
  205. }
  206. function onDeviceSelected(devices) {
  207. form.value.items.push(
  208. ...devices.map((d) => ({
  209. device: d.id,
  210. remark: d.category_name,
  211. quantity: 1,
  212. location: d.warehouse,
  213. }))
  214. );
  215. }
  216. function removeItem(index) {
  217. form.value.items.splice(index, 1);
  218. }
  219. function onCancel() {
  220. emit('update:visible', false);
  221. }
  222. const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
  223. function onSave() {
  224. formRef.value.validate((valid) => {
  225. if (valid) {
  226. form.value.items = form.value.items.map(item => ({
  227. ...item,
  228. quantity: Number(item.quantity) || 0
  229. }));
  230. const firstLocation = form.value.items[0]?.location || '';
  231. form.value.return_location = firstLocation;
  232. // form.value.expected_start_time = now;
  233. form.value.expected_end_time = dayjs(form.value.expected_end_time).format('YYYY-MM-DD HH:mm:ss')|| now;
  234. form.value.team_members_count=Number(form.team_members_count)||1;
  235. emit('submit', { ...form.value });
  236. emit('update:visible', false);
  237. ElMessage.success("添加成功!");
  238. }
  239. });
  240. }
  241. const rules = {};
  242. </script>