index.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <el-dialog v-model="visible" title="特殊借用" width="75%" :close-on-click-modal="false" @close="onCancel">
  3. <el-form :model="form" label-width="110px" label-position="top" :rules="rules" ref="formRef">
  4. <el-row :gutter="16">
  5. <el-col :span="8">
  6. <el-form-item label="借用单编号" prop="application_no">
  7. <el-input v-model="form.application_no" placeholder="自动生成" disabled />
  8. </el-form-item>
  9. </el-col>
  10. <el-col :span="8">
  11. <el-form-item label="借用人" prop="emergency_contact">
  12. <el-input v-model="form.emergency_contact" placeholder="请输入借用人" />
  13. </el-form-item>
  14. </el-col>
  15. <el-col :span="8">
  16. <el-form-item label="学号/工号" prop="app_user_borrower">
  17. <el-input v-model="form.app_user_borrower" placeholder="请输入学号/工号" />
  18. </el-form-item>
  19. </el-col>
  20. <el-col :span="8">
  21. <el-form-item label="联系电话" prop="emergency_phone">
  22. <el-input v-model="form.emergency_phone" placeholder="请输入联系电话" />
  23. </el-form-item>
  24. </el-col>
  25. <el-col :span="8">
  26. <el-form-item label="借用部门" prop="borrower_dept">
  27. <el-input v-model="form.borrower_dept" placeholder="请输入借用部门" />
  28. </el-form-item>
  29. </el-col>
  30. <el-col :span="8">
  31. <el-form-item label="预计归还时间" prop="expected_end_time">
  32. <el-date-picker v-model="form.expected_end_time" type="datetime" placeholder="请选择预计归还时间" style="width: 100%" />
  33. </el-form-item>
  34. </el-col>
  35. <el-col :span="4">
  36. <el-form-item label="个人/团队" prop="team_type">
  37. <el-select v-model="form.team_type" placeholder="请选择">
  38. <el-option label="个人" :value="0" />
  39. <el-option label="团队" :value="1" />
  40. </el-select>
  41. </el-form-item>
  42. </el-col>
  43. <el-col :span="4" v-show="form.team_type===1">
  44. <el-form-item label="团队人数" prop="team_members_count">
  45. <el-input v-model="form.team_members_count" placeholder="请输入" />
  46. </el-form-item>
  47. </el-col>
  48. <el-col :span="16" v-show="form.team_type===1">
  49. <el-form-item label="团队其他人员名单" prop="team_members">
  50. <el-input v-model="form.team_members" placeholder="请输入团队其他人员名单" />
  51. </el-form-item>
  52. </el-col>
  53. <el-col :span="24">
  54. <el-form-item label="借用原因" prop="purpose">
  55. <el-input v-model="form.purpose" type="textarea" placeholder="请输入借用原因" />
  56. </el-form-item>
  57. </el-col>
  58. <el-col :span="4">
  59. <el-form-item label="审批人" prop="applicant_remark">
  60. <el-select v-model="form.applicant_remark_type" placeholder="请选择">
  61. <el-option label="管理员" value="1"/>
  62. </el-select>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="20">
  66. <el-form-item label="备注" prop="applicant_remark">
  67. <el-input v-model="form.applicant_remark" placeholder="请输入备注" />
  68. </el-form-item>
  69. </el-col>
  70. </el-row>
  71. <div style="margin: 16px 0 8px 0; font-weight: bold">借用明细表</div>
  72. <el-table :data="form.items" border style="width: 100%; margin-bottom: 12px">
  73. <el-table-column type="index" label="序号" width="60" />
  74. <el-table-column prop="remark" label="设备分类" />
  75. <el-table-column prop="quantity" label="借用数量" />
  76. <el-table-column prop="location" label="存放仓库" />
  77. <el-table-column label="操作" width="80">
  78. <template #default="{ row, $index }">
  79. <el-button type="text" style="color: red" @click="removeItem($index)">移除</el-button>
  80. </template>
  81. </el-table-column>
  82. </el-table>
  83. <el-button type="primary" @click="addItem">添加设备</el-button>
  84. <div style="margin: 16px 0 8px 0; font-weight: bold">配件信息</div>
  85. <el-input v-model="form.accessory_info" placeholder="请输入配件信息" />
  86. <div style="margin: 16px 0 8px 0; font-weight: bold">附件</div>
  87. <el-upload action="#" list-type="text">
  88. <el-button type="primary">点击或拖拽上传</el-button>
  89. </el-upload>
  90. </el-form>
  91. <template #footer>
  92. <el-button @click="onCancel">关闭</el-button>
  93. <el-button type="primary" @click="onSubmit">提交</el-button>
  94. </template>
  95. </el-dialog>
  96. <SelectDeviceDialog v-model:visible="showSelectDeviceDialog" @confirm="onDeviceSelected" />
  97. </template>
  98. <script setup lang="ts">
  99. import { ref, watch, defineProps, defineEmits, onMounted } from 'vue';
  100. import SelectDeviceDialog from './SelectDeviceDialog/index.vue';
  101. import dayjs from 'dayjs';
  102. const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
  103. const props = defineProps<{ visible: boolean; modelValue?: any }>();
  104. const emit = defineEmits(['update:visible', 'update:modelValue', 'submit']);
  105. const visible = ref(props.visible);
  106. const formRef = ref();
  107. const form = ref({
  108. application_no: '',
  109. emergency_contact: '',
  110. emergency_phone: '',
  111. app_user_borrower: 1,
  112. team_type: 0,
  113. team_members_count: 1,
  114. team_members: '',
  115. expected_start_time:'',
  116. expected_end_time: '',
  117. borrower_dept: '',
  118. purpose: '',
  119. applicant_remark_type:'',
  120. applicant_remark: '',
  121. items: [],
  122. accessory_info: '',
  123. borrow_type: 2,
  124. return_location:''
  125. });
  126. const showSelectDeviceDialog = ref(false);
  127. const rules = {
  128. emergency_contact: [
  129. { required: true, message: '请输入借用人', trigger: 'change' },
  130. ],
  131. app_user_borrower: [
  132. { required: true, message: '请输入学号或工号', trigger: 'change' },
  133. ],
  134. emergency_phone: [
  135. { required: true, message: '请输入联系电话', trigger: 'change' },
  136. ],
  137. borrower_dept: [
  138. { required: true, message: '请输入借用部门', trigger: 'change' },
  139. ],
  140. expected_end_time: [
  141. { required: true, message: '请输选择归还时间', trigger: 'change' },
  142. ],
  143. team_type: [
  144. { required: true, message: '请选择个人或者团队', trigger: 'change' },
  145. ],
  146. purpose: [
  147. { required: true, message: '请输入借用原因', trigger: 'change' },
  148. ],
  149. applicant_remark_type: [
  150. { required: true, message: '请输入审判人', trigger: 'change' },
  151. ],
  152. applicant_remark: [
  153. { required: true, message: '请输入备注', trigger: 'change' },
  154. ],
  155. };
  156. // 自动填充用户信息
  157. onMounted(() => {
  158. try {
  159. const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
  160. if (userInfo) {
  161. form.value.emergency_contact = userInfo.username || '';
  162. form.value.app_user_borrower = Number(userInfo.dept_info?.dept_id )|| 1;
  163. form.value.emergency_phone = userInfo.mobile || '';
  164. form.value.borrower_dept = userInfo.dept_info?.dept_name || '';
  165. }
  166. } catch (e) {
  167. /* empty */
  168. }
  169. });
  170. watch(
  171. () => props.visible,
  172. (v) => (visible.value = v)
  173. );
  174. watch(
  175. () => props.modelValue,
  176. (v) => {
  177. if (v) Object.assign(form.value, v);
  178. }
  179. );
  180. function addItem() {
  181. showSelectDeviceDialog.value = true;
  182. }
  183. function onDeviceSelected(devices) {
  184. // 假设 form.value.items 已存在
  185. form.value.items.push(
  186. ...devices.map((d) => ({
  187. device: d.id,
  188. remark: d.category_name,
  189. quantity: 1,
  190. location: d.warehouse,
  191. }))
  192. );
  193. }
  194. function removeItem(index: number) {
  195. form.value.items.splice(index, 1);
  196. }
  197. function onCancel() {
  198. emit('update:visible', false);
  199. }
  200. function onSubmit() {
  201. formRef.value.validate((valid: boolean) => {
  202. if (valid) {
  203. const firstLocation = form.value.items[0]?.location || '';
  204. form.value.return_location = firstLocation;
  205. form.value.expected_start_time = now;
  206. form.value.expected_end_time = dayjs(form.value.expected_end_time).format('YYYY-MM-DD HH:mm:ss')|| now;
  207. form.team_members_count=Number(form.team_members_count)||1;
  208. emit('submit', { ...form.value });
  209. emit('update:visible', false);
  210. }
  211. });
  212. }
  213. </script>