index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538
  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="borrower_type">
  12. <el-select v-model="form.borrower_type" placeholder="请选择借用人角色" :disabled="isView" >
  13. <el-option label="管理员用户" :value=0 />
  14. <el-option label="应用用户" :value=1 />
  15. <el-option label="外部用户" :value=2 />
  16. </el-select>
  17. </el-form-item>
  18. </el-col>
  19. <el-col :span="8" >
  20. <el-form-item label="借用人" prop="admin_borrower" v-if="form.borrower_type == 0">
  21. <el-select v-model="form.admin_borrower" placeholder="请选择借用人" :disabled="isView" >
  22. <el-option :label="adminList.name" :value="adminList.id" />
  23. </el-select>
  24. </el-form-item>
  25. <el-form-item label="借用人" prop="app_user_borrower" v-if="form.borrower_type == 1">
  26. <el-select v-model="form.app_user_borrower" placeholder="请选择借用人" :disabled="isView" >
  27. <el-option v-for="item in allUserList" :key="item.id" :label="item.name" :value="item.id" />
  28. </el-select>
  29. </el-form-item>
  30. <el-form-item label="借用人" prop="external_borrower_name" v-if="form.borrower_type == 2">
  31. <el-input v-model="form.external_borrower_name" placeholder="请输入借用人" :disabled="isView"/>
  32. </el-form-item>
  33. </el-col>
  34. <el-col :span="8" v-if="form.borrower_type !== 2">
  35. <el-form-item label="学号/工号" prop="user_code" >
  36. <el-input v-model="form.user_code" placeholder="请输入学号/工号" :disabled="isView"/>
  37. </el-form-item>
  38. </el-col>
  39. <el-col :span="8">
  40. <el-form-item label="联系电话" prop="mobile" v-if="form.borrower_type !== 2">
  41. <el-input v-model="form.mobile" placeholder="请输入联系电话" :disabled="isView" />
  42. </el-form-item>
  43. <el-form-item label="联系电话" prop="external_borrower_phone" v-if="form.borrower_type == 2">
  44. <el-input v-model="form.external_borrower_phone" placeholder="请输入联系电话" :disabled="isView"/>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="8">
  48. <el-form-item label="借用部门" prop="borrower_dept">
  49. <el-input v-model="form.borrower_dept" placeholder="请输入借用部门" :disabled="isView" />
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="8">
  53. <el-form-item label="预计归还时间" prop="expected_end_time">
  54. <el-date-picker v-model="form.expected_end_time" type="datetime" placeholder="请选择预计归还时间" style="width: 100%" :disabled="isView"/>
  55. </el-form-item>
  56. </el-col>
  57. <el-col :span="4">
  58. <el-form-item label="个人/团队" prop="team_type" >
  59. <el-select v-model="form.team_type" placeholder="请选择" :disabled="isView">
  60. <el-option label="个人" :value="0" />
  61. <el-option label="团队" :value="1" />
  62. </el-select>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="4" v-show="form.team_type===1">
  66. <el-form-item label="团队人数" prop="team_members_count">
  67. <el-input v-model="form.team_members_count" placeholder="请输入" :disabled="isView"/>
  68. </el-form-item>
  69. </el-col>
  70. <el-col :span="16" v-show="form.team_type===1">
  71. <el-form-item label="团队其他人员名单" prop="team_members">
  72. <el-input v-model="form.team_members" placeholder="请输入团队其他人员名单" :disabled="isView"/>
  73. </el-form-item>
  74. </el-col>
  75. <el-col :span="24">
  76. <el-form-item label="借用原因" prop="purpose">
  77. <el-input v-model="form.purpose" type="textarea" placeholder="请输入借用原因" :disabled="isView" />
  78. </el-form-item>
  79. </el-col>
  80. <el-col :span="4">
  81. <el-form-item label="审批人" prop="applicant_remark_type">
  82. <el-select v-model="form.applicant_remark_type" placeholder="请选择" :disabled="isView" >
  83. <el-option label="管理员" value="1"/>
  84. </el-select>
  85. </el-form-item>
  86. </el-col>
  87. <el-col :span="20">
  88. <el-form-item label="备注" prop="applicant_remark">
  89. <el-input v-model="form.applicant_remark" placeholder="请输入备注" :disabled="isView"/>
  90. </el-form-item>
  91. </el-col>
  92. </el-row>
  93. <div style="margin: 16px 0 8px 0; font-weight: bold">借用列表</div>
  94. <!-- {{ isEdit }} -->
  95. <el-table :data="!isEdit ? form.items : form.items.filter(item => item.device === null)" border style="width: 100%; margin-bottom: 12px">
  96. <el-table-column type="index" label="序号" width="60" />
  97. <el-table-column prop="device_category_name" label="设备分类" />
  98. <!-- <el-table-column prop="quantity" label="借用数量" /> -->
  99. <el-table-column label="借用数量">
  100. <template #default="{ row }">
  101. <el-input v-model="row.quantity" type="number" :min="1" prop="quantity" size="small" :disabled="isView" />
  102. </template>
  103. </el-table-column>
  104. <el-table-column prop="location" label="存放仓库" />
  105. <el-table-column label="操作" width="80">
  106. <template #default="{ row, $index }">
  107. <el-button type="text" style="color: red" @click="removeItem($index)" :disabled="isView">移除</el-button>
  108. </template>
  109. </el-table-column>
  110. </el-table>
  111. <el-button type="primary" @click="addItem" v-if="!isView">添加设备</el-button>
  112. <div style="margin: 16px 0 8px 0; font-weight: bold">配件信息</div>
  113. <el-input v-model="form.accessories" placeholder="请输入配件信息" :disabled="isView"/>
  114. <div style="margin: 16px 0 8px 0; font-weight: bold">附件</div>
  115. <div>
  116. <el-upload
  117. list-type="picture-card"
  118. :show-file-list="true"
  119. :http-request="handleCustomUpload"
  120. :file-list="fileList"
  121. style="margin-top: 10px;"
  122. >
  123. <el-icon><Plus /></el-icon>
  124. </el-upload>
  125. </div>
  126. </el-form>
  127. <!-- 审批信息流程展示 -->
  128. <div v-if="isView" style="margin-top: 24px; padding: 0 12px">
  129. <div style="font-weight: bold; margin-bottom: 12px">审批流程进度</div>
  130. <el-steps :active="steps.length" align-center>
  131. <el-step
  132. v-for="(step, index) in steps"
  133. :key="index"
  134. :title="step.title"
  135. :description="step.description"
  136. icon="CircleCheck"
  137. :status="step.status"
  138. />
  139. </el-steps>
  140. </div>
  141. <template #footer>
  142. <el-button @click="onSucess">通过</el-button>
  143. <el-button @click="onDanger(form.id)">拒绝</el-button>
  144. <el-button @click="onCancel">关闭</el-button>
  145. <el-button type="primary" @click="onSubmit" v-if="!isView">提交</el-button>
  146. </template>
  147. </el-dialog>
  148. <SelectDeviceDialogApp v-model:visible="showSelectDeviceDialog" @confirm="onDeviceSelected" />
  149. <!-- <SelectCatgory v-model:visible="showSelectDeviceDialog" @confirm="onDeviceSelected" /> -->
  150. <RefuseNotification/>
  151. </template>
  152. <script setup lang="ts">
  153. import { ref, inject,provide,watch, defineProps, defineEmits, onMounted,computed } from 'vue';
  154. import SelectDeviceDialogApp from './SelectDeviceDialogApp/index.vue';
  155. import RefuseNotification from '../RefuseNotification/index.vue';
  156. import dayjs from 'dayjs';
  157. import { ElMessage } from 'element-plus';
  158. import * as api from '../api';
  159. import * as apis from '../../api';
  160. import Cookies from 'js-cookie';
  161. import { request } from '/@/utils/service';
  162. import { Plus } from '@element-plus/icons-vue';
  163. // import SelectDeviceDialog from './SelectDeviceDialogApp/index.vue';
  164. import { getUserInfo,getAdminUserInfo } from '../../../login/api';
  165. const showRejectDialog = ref(false);
  166. const rejectReason = ref('');
  167. const currentFormId = ref<number | null>(null);
  168. provide('showRejectDialog', showRejectDialog);
  169. provide('rejectReason', rejectReason);
  170. provide('currentFormId', currentFormId);
  171. provide('closeDialog', onCancel);
  172. const crudExpose = inject('crudExpose') as any;
  173. provide('crudExpose', crudExpose);
  174. /* 获取管理员列表 */
  175. const adminList = ref([]);
  176. async function getAdminList() {
  177. const res = await getUserInfo();
  178. adminList.value = res.data;
  179. console.log("adminList.value:::",adminList.value)
  180. }
  181. /* 获取所有用户 */
  182. const allUserList = ref([]);
  183. async function getAllUserList() {
  184. const res = await apis.GetAllUser();
  185. allUserList.value = res.data||[];
  186. const adminRes = await getAdminUserInfo();
  187. const adminUser = adminRes.data;
  188. // // 设置默认选择第一个用户
  189. // if (allUserList.value.length > 0) {
  190. // form.value.app_user_borrower = allUserList.value[0].id;
  191. // }
  192. // 检查是否已存在该用户,避免重复添加
  193. const exists = allUserList.value.some(user => user.id === adminUser.id);
  194. if (!exists) {
  195. allUserList.value.push(adminUser);
  196. }
  197. console.log("allUserList.value:::",allUserList.value)
  198. }
  199. const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
  200. const props = defineProps<{ visible: boolean; modelValue?: any }>();
  201. const isEdit = computed(() => props.modelValue?.mode === 'edit');
  202. const isView = computed(() => props.modelValue?.mode === 'view');
  203. const isAdd = computed(() => props.modelValue?.mode === 'add');
  204. const emit = defineEmits(['update:visible', 'update:modelValue', 'submit']);
  205. const visible = ref(props.visible);
  206. const formRef = ref();
  207. const fileList = ref([]);
  208. // const fileList = ref([]);
  209. const handleCustomUpload = async ({ file, onProgress, onSuccess, onError }: any) => {
  210. const token = Cookies.get('token');
  211. const formData = new FormData();
  212. formData.append('file', file);
  213. // console.log("token::::",token);
  214. try {
  215. const res = await request({
  216. url: `/api/system/upload/`,
  217. method: 'post',
  218. headers: {
  219. 'Content-Type': 'multipart/form-data',
  220. Authorization: 'JWT '+ token,
  221. },
  222. data: formData,
  223. timeout: 60000,
  224. onUploadProgress: (p: any) => {
  225. onProgress({percent: Math.round((p.loaded / p.total) * 100)});
  226. }
  227. });
  228. // 构造 Element Plus 需要的 file 对象
  229. const fileObj = {
  230. name: res.data.name,
  231. url: res.data.url,
  232. status: 'success',
  233. response: res.data
  234. };
  235. // 添加到附件列表
  236. form.value.attachments = fileObj.url;
  237. ElMessage.success('上传成功');
  238. onSuccess(fileObj);
  239. } catch (error) {
  240. ElMessage.error('上传失败');
  241. onError(error);
  242. }
  243. };
  244. // import { ElSteps } from 'element-plus';
  245. const steps = ref<any[]>([]);
  246. const timeline = ref({
  247. setpstatus:0,
  248. create: '',
  249. approve: '',
  250. approver: '',
  251. approvemsg:''
  252. });
  253. function buildSteps(data: any) {
  254. steps.value = [
  255. {
  256. title: '创建申请',
  257. description: `创建时间:${data.create_datetime}`,
  258. status: 'finish'
  259. },
  260. {
  261. title: '待审批',
  262. description: '待超级管理员审批',
  263. status: data.status >= 2 ? 'finish' : 'process'
  264. }
  265. ];
  266. if (data.status >= 2 &&data.status!=3) {
  267. steps.value.push({
  268. title: '审批通过',
  269. description: `审批人:${data.approver_info.name},时间:${data.approve_time}`,
  270. status: 'finish'
  271. });
  272. } else if (data.status === 3) {
  273. steps.value.push({
  274. title: '审批拒绝',
  275. description: `审批人:${data.approver_info.name},拒绝原因: ${data.approve_remark},时间:${data.approve_time}`,
  276. status: 'error'
  277. });
  278. }
  279. if (data.status >= 4) {
  280. steps.value.push({
  281. title: '流程完成',
  282. description: '流程已结束',
  283. status: 'finish'
  284. });
  285. }
  286. }
  287. // const activeStep = ref(1);
  288. const form = ref({
  289. borrower_type: 1,
  290. application_no: '',
  291. external_borrower_name:"",
  292. external_borrower_phone:"",
  293. emergency_contact: '111',
  294. emergency_phone: '11111',
  295. app_user_borrower: 1,
  296. team_type: 0,
  297. team_members_count: 2,
  298. team_members: '',
  299. expected_start_time:'',
  300. expected_end_time: '',
  301. borrower_dept: '',
  302. purpose: '',
  303. applicant_remark_type: "1",
  304. applicant_remark: '',
  305. items: [],
  306. accessories: '',
  307. mobile:'',
  308. user_code:'',
  309. borrow_type: 2,
  310. return_location:'',
  311. attachments:'',
  312. admin_borrower:''
  313. });
  314. const showSelectDeviceDialog = ref(false);
  315. const rules = {
  316. external_borrower_name: [
  317. { required: true, message: '请输入借用人', trigger: 'change' },
  318. ],
  319. app_user_borrower: [
  320. { required: true, message: '请输入学号或工号', trigger: 'change' },
  321. ],
  322. external_borrower_phone: [
  323. { required: true, message: '请输入联系电话', trigger: 'change' },
  324. ],
  325. borrower_dept: [
  326. { required: true, message: '请输入借用部门', trigger: 'change' },
  327. ],
  328. expected_end_time: [
  329. { required: true, message: '请输选择归还时间', trigger: 'change' },
  330. ],
  331. team_type: [
  332. { required: true, message: '请选择个人或者团队', trigger: 'change' },
  333. ],
  334. purpose: [
  335. { required: true, message: '请输入借用原因', trigger: 'change' },
  336. ],
  337. applicant_remark_type: [
  338. { required: true, message: '请选择审批人', trigger: 'change' },
  339. ],
  340. applicant_remark: [
  341. { required: true, message: '请输入备注', trigger: 'change' },
  342. ],
  343. };
  344. // 自动填充用户信息
  345. onMounted(() => {
  346. try {
  347. getAllUserList()
  348. const bortype=props.modelValue.borrower_type;
  349. if(bortype==0){
  350. getAdminList()
  351. }else if(bortype==1){
  352. const userInfo = props.modelValue.borrower_info;
  353. if (userInfo) {
  354. form.value.borrower_type = 1;
  355. form.value.app_user_borrower = userInfo.id || '';
  356. // form.value.app_user_borrower = Number(userInfo.dept_info?.dept_id )|| 1;
  357. form.value.user_code=userInfo.user_code||'';
  358. form.value.mobile=userInfo.mobile||'';
  359. form.value.borrower_dept = userInfo.dept_info?.dept_name || '';
  360. }
  361. console.log("form.value1111:",form.value);
  362. }else if(bortype==2){
  363. const userInfo = props.modelValue.borrower_info;
  364. if (userInfo) {
  365. form.value.borrower_type =2;
  366. form.value.external_borrower_name = userInfo.id || '';
  367. // form.value.app_user_borrower = Number(userInfo.dept_info?.dept_id )|| 1;
  368. form.value.user_code=userInfo.user_code||'';
  369. form.value.external_borrower_phone = userInfo.mobile || '';
  370. form.value.borrower_dept = userInfo.dept_info?.dept_name || '';
  371. }
  372. }
  373. } catch (e) {
  374. /* empty */
  375. }
  376. });
  377. watch(
  378. () => props.visible,
  379. (v) => (visible.value = v)
  380. );
  381. watch(() => props.modelValue, async (val) => {
  382. console.log("val+++",val && val.id && isView.value,val&& isEdit.value);
  383. if (val && val.id && isView.value) {
  384. try {
  385. const res = await apis.GetApplicationDetail(val.id);
  386. if (res.code === 2000 && res.data) {
  387. const data = res.data;
  388. Object.assign(form.value, data);
  389. buildSteps(data);
  390. form.value.app_user_borrower = res.data.app_user_borrower?.id || '';
  391. }
  392. } catch (e) {
  393. ElMessage.error('获取审批信息失败');
  394. }
  395. }else if(val&& isEdit.value){
  396. try {
  397. const res = await apis.GetApplicationDetail(val.id);
  398. if (res.code === 2000 && res.data) {
  399. const data = res.data;
  400. Object.assign(form.value, data);
  401. form.value.app_user_borrower = res.data.app_user_borrower?.id || '';
  402. }
  403. } catch (e) {
  404. ElMessage.error('获取审批信息失败');
  405. }
  406. }
  407. }, { immediate: true });
  408. // 监听借用人选择变化
  409. watch(() => form.value.app_user_borrower, (newValue) => {
  410. if (newValue && allUserList.value.length > 0) {
  411. const selectedUser = allUserList.value.find(user => user.id === newValue);
  412. if (selectedUser) {
  413. form.value.user_code = selectedUser.user_code || '';
  414. form.value.mobile = selectedUser.mobile || '';
  415. }
  416. }
  417. });
  418. // watch(
  419. // () => props.modelValue,
  420. // (v) => {
  421. // if (v) {
  422. // // eslint-disable-next-line no-console
  423. // console.log("val:::::",v);
  424. // Object.assign(form.value, v);
  425. // }
  426. // }, { immediate: true }
  427. // );
  428. function addItem() {
  429. showSelectDeviceDialog.value = true;
  430. }
  431. function onDeviceSelected(devices) {
  432. console.log("devices:::",devices);
  433. form.value.items.push(
  434. ...devices.map((d) => ({
  435. device_category: d.id,
  436. remark: d.name,
  437. quantity: 1,
  438. location: d.warehouse,
  439. }))
  440. );
  441. }
  442. function removeItem(index: number) {
  443. form.value.items.splice(index, 1);
  444. }
  445. async function onDanger(formId: number){
  446. currentFormId.value = formId;
  447. showRejectDialog.value = true;
  448. }
  449. async function onSucess(){
  450. const ids=props.modelValue.id;
  451. await api.BorrowingReview(ids, "approve", "同意借用");
  452. ElMessage.success("审批通过");
  453. emit('update:visible', false);
  454. crudExpose?.doRefresh();
  455. }
  456. function onCancel() {
  457. emit('update:visible', false);
  458. }
  459. function onSubmit() {
  460. formRef.value.validate((valid: boolean) => {
  461. if (valid) {
  462. form.value.items = form.value.items.map(item => ({
  463. ...item,
  464. quantity: Number(item.quantity) || 0
  465. }));
  466. const firstLocation = form.value.items[0]?.location || '';
  467. form.value.return_location = firstLocation;
  468. form.value.expected_start_time = now;
  469. form.value.expected_end_time = dayjs(form.value.expected_end_time).format('YYYY-MM-DD HH:mm:ss')|| now;
  470. form.team_members_count=Number(form.value.team_members_count)||1;
  471. form.value.mode = isEdit.value ? 'edit' : 'add';
  472. console.log(form.value);
  473. // return
  474. emit('submit', { ...form.value });
  475. emit('update:visible', false);
  476. // ElMessage.success("添加成功!");
  477. }
  478. });
  479. }
  480. </script>