|
@@ -9,32 +9,32 @@
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item label="借用人" prop="emergency_contact">
|
|
|
- <el-input v-model="form.emergency_contact" placeholder="请输入借用人" />
|
|
|
+ <el-input v-model="form.emergency_contact" placeholder="请输入借用人" :disabled="isView" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item label="学号/工号" prop="app_user_borrower">
|
|
|
- <el-input v-model="form.app_user_borrower" placeholder="请输入学号/工号" />
|
|
|
+ <el-input v-model="form.app_user_borrower" placeholder="请输入学号/工号" :disabled="isView"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item label="联系电话" prop="emergency_phone">
|
|
|
- <el-input v-model="form.emergency_phone" placeholder="请输入联系电话" />
|
|
|
+ <el-input v-model="form.emergency_phone" placeholder="请输入联系电话" :disabled="isView" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item label="借用部门" prop="borrower_dept">
|
|
|
- <el-input v-model="form.borrower_dept" placeholder="请输入借用部门" />
|
|
|
+ <el-input v-model="form.borrower_dept" placeholder="请输入借用部门" :disabled="isView" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item label="预计归还时间" prop="expected_end_time">
|
|
|
- <el-date-picker v-model="form.expected_end_time" type="datetime" placeholder="请选择预计归还时间" style="width: 100%" />
|
|
|
+ <el-date-picker v-model="form.expected_end_time" type="datetime" placeholder="请选择预计归还时间" style="width: 100%" :disabled="isView"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="4">
|
|
|
- <el-form-item label="个人/团队" prop="team_type">
|
|
|
- <el-select v-model="form.team_type" placeholder="请选择">
|
|
|
+ <el-form-item label="个人/团队" prop="team_type" >
|
|
|
+ <el-select v-model="form.team_type" placeholder="请选择" :disabled="isView">
|
|
|
<el-option label="个人" :value="0" />
|
|
|
<el-option label="团队" :value="1" />
|
|
|
</el-select>
|
|
@@ -42,29 +42,29 @@
|
|
|
</el-col>
|
|
|
<el-col :span="4" v-show="form.team_type===1">
|
|
|
<el-form-item label="团队人数" prop="team_members_count">
|
|
|
- <el-input v-model="form.team_members_count" placeholder="请输入" />
|
|
|
+ <el-input v-model="form.team_members_count" placeholder="请输入" :disabled="isView"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="16" v-show="form.team_type===1">
|
|
|
<el-form-item label="团队其他人员名单" prop="team_members">
|
|
|
- <el-input v-model="form.team_members" placeholder="请输入团队其他人员名单" />
|
|
|
+ <el-input v-model="form.team_members" placeholder="请输入团队其他人员名单" :disabled="isView"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="借用原因" prop="purpose">
|
|
|
- <el-input v-model="form.purpose" type="textarea" placeholder="请输入借用原因" />
|
|
|
+ <el-input v-model="form.purpose" type="textarea" placeholder="请输入借用原因" :disabled="isView" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="4">
|
|
|
- <el-form-item label="审批人" prop="applicant_remark">
|
|
|
- <el-select v-model="form.applicant_remark_type" placeholder="请选择">
|
|
|
+ <el-form-item label="审批人" prop="applicant_remark_type">
|
|
|
+ <el-select v-model="form.applicant_remark_type" placeholder="请选择" :disabled="isView" >
|
|
|
<el-option label="管理员" value="1"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="20">
|
|
|
<el-form-item label="备注" prop="applicant_remark">
|
|
|
- <el-input v-model="form.applicant_remark" placeholder="请输入备注" />
|
|
|
+ <el-input v-model="form.applicant_remark" placeholder="请输入备注" :disabled="isView"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -72,35 +72,72 @@
|
|
|
<el-table :data="form.items" border style="width: 100%; margin-bottom: 12px">
|
|
|
<el-table-column type="index" label="序号" width="60" />
|
|
|
<el-table-column prop="remark" label="设备分类" />
|
|
|
- <el-table-column prop="quantity" label="借用数量" />
|
|
|
+ <!-- <el-table-column prop="quantity" label="借用数量" /> -->
|
|
|
+ <el-table-column label="借用数量">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-input v-model="row.quantity" type="number" :min="1" prop="quantity" size="small" :disabled="isView" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column prop="location" label="存放仓库" />
|
|
|
<el-table-column label="操作" width="80">
|
|
|
<template #default="{ row, $index }">
|
|
|
- <el-button type="text" style="color: red" @click="removeItem($index)">移除</el-button>
|
|
|
+ <el-button type="text" style="color: red" @click="removeItem($index)" :disabled="isView">移除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <el-button type="primary" @click="addItem">添加设备</el-button>
|
|
|
+ <el-button type="primary" @click="addItem" v-if="!isView">添加设备</el-button>
|
|
|
<div style="margin: 16px 0 8px 0; font-weight: bold">配件信息</div>
|
|
|
- <el-input v-model="form.accessory_info" placeholder="请输入配件信息" />
|
|
|
+ <el-input v-model="form.accessory_info" placeholder="请输入配件信息" :disabled="isView"/>
|
|
|
<div style="margin: 16px 0 8px 0; font-weight: bold">附件</div>
|
|
|
<el-upload action="#" list-type="text">
|
|
|
<el-button type="primary">点击或拖拽上传</el-button>
|
|
|
</el-upload>
|
|
|
</el-form>
|
|
|
+ <!-- 审批信息流程展示 -->
|
|
|
+ <div v-if="isView" style="margin-top: 24px; padding: 0 12px">
|
|
|
+ <div style="font-weight: bold; margin-bottom: 12px">审批流程进度</div>
|
|
|
+ <el-steps :active="activeStep" align-center>
|
|
|
+ <el-step
|
|
|
+ title="创建申请"
|
|
|
+ :description="`创建时间:${ timeline.create }`"
|
|
|
+ icon="CircleCheck"
|
|
|
+ :status="activeStep >= 1 ? 'finish' : 'wait'"
|
|
|
+ />
|
|
|
+ <el-step
|
|
|
+ title="待审批"
|
|
|
+ description="待超级管理员审批"
|
|
|
+ icon="CircleCheck"
|
|
|
+ :status="activeStep >= 2 ? 'finish' : 'wait'"
|
|
|
+ />
|
|
|
+ <el-step
|
|
|
+ title="审批通过"
|
|
|
+ :description="`审批人:${timeline.approver},时间:${timeline.approve}`"
|
|
|
+ icon="CircleCheck"
|
|
|
+ :status="activeStep >= 3 ? 'finish' : 'wait'"
|
|
|
+ />
|
|
|
+ <el-step
|
|
|
+ title="流程完成"
|
|
|
+ description="流程已结束"
|
|
|
+ icon="CircleCheck"
|
|
|
+ :status="activeStep >= 4 ? 'finish' : 'wait'"
|
|
|
+ />
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+
|
|
|
<template #footer>
|
|
|
<el-button @click="onCancel">关闭</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">提交</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit" v-if="!isView">提交</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
<SelectDeviceDialog v-model:visible="showSelectDeviceDialog" @confirm="onDeviceSelected" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, watch, defineProps, defineEmits, onMounted } from 'vue';
|
|
|
+import { ref, watch, defineProps, defineEmits, onMounted,computed } from 'vue';
|
|
|
import SelectDeviceDialog from './SelectDeviceDialog/index.vue';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
+import * as api from '../../api';
|
|
|
|
|
|
const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
|
|
|
@@ -108,10 +145,27 @@ const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
|
|
|
|
|
|
|
const props = defineProps<{ visible: boolean; modelValue?: any }>();
|
|
|
+
|
|
|
+const isEdit = computed(() => props.modelValue?.mode === 'edit');
|
|
|
+const isView = computed(() => props.modelValue?.mode === 'view');
|
|
|
+const isAdd = computed(() => props.modelValue?.mode === 'add');
|
|
|
+
|
|
|
const emit = defineEmits(['update:visible', 'update:modelValue', 'submit']);
|
|
|
const visible = ref(props.visible);
|
|
|
const formRef = ref();
|
|
|
|
|
|
+// import { ElSteps } from 'element-plus';
|
|
|
+
|
|
|
+const timeline = ref({
|
|
|
+ create: '',
|
|
|
+ approve: '',
|
|
|
+ approver: ''
|
|
|
+});
|
|
|
+const activeStep = ref(1);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
const form = ref({
|
|
|
application_no: '',
|
|
|
emergency_contact: '',
|
|
@@ -124,7 +178,7 @@ const form = ref({
|
|
|
expected_end_time: '',
|
|
|
borrower_dept: '',
|
|
|
purpose: '',
|
|
|
- applicant_remark_type:'',
|
|
|
+ applicant_remark_type: "1",
|
|
|
applicant_remark: '',
|
|
|
items: [],
|
|
|
accessory_info: '',
|
|
@@ -157,7 +211,7 @@ const rules = {
|
|
|
{ required: true, message: '请输入借用原因', trigger: 'change' },
|
|
|
],
|
|
|
applicant_remark_type: [
|
|
|
- { required: true, message: '请输入审判人', trigger: 'change' },
|
|
|
+ { required: true, message: '请选择审批人', trigger: 'change' },
|
|
|
],
|
|
|
applicant_remark: [
|
|
|
{ required: true, message: '请输入备注', trigger: 'change' },
|
|
@@ -184,12 +238,50 @@ watch(
|
|
|
() => props.visible,
|
|
|
(v) => (visible.value = v)
|
|
|
);
|
|
|
-watch(
|
|
|
- () => props.modelValue,
|
|
|
- (v) => {
|
|
|
- if (v) Object.assign(form.value, v);
|
|
|
+
|
|
|
+watch(() => props.modelValue, async (val) => {
|
|
|
+ if (val && val.id && isView.value) {
|
|
|
+ try {
|
|
|
+ const res = await api.GetApplicationDetail(val.id);
|
|
|
+ if (res.code === 2000 && res.data) {
|
|
|
+ const data = res.data;
|
|
|
+ Object.assign(form.value, data);
|
|
|
+ timeline.value.create = data.create_datetime || '';
|
|
|
+ timeline.value.approve = data.approve_time || '';
|
|
|
+ timeline.value.approver = data.approver_info?.name || '审批人';
|
|
|
+
|
|
|
+ activeStep.value = 1; // 创建
|
|
|
+ if (data.status >= 1) activeStep.value = 2; // 待审批
|
|
|
+ if (data.status >= 2) activeStep.value = 3; // 审批通过
|
|
|
+ if (data.status >= 3) activeStep.value = 4; // 完成
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error('获取审批信息失败');
|
|
|
+ }
|
|
|
+ }else if(val&& isEdit.value){
|
|
|
+ try {
|
|
|
+ const res = await api.GetApplicationDetail(val.id);
|
|
|
+ if (res.code === 2000 && res.data) {
|
|
|
+ const data = res.data;
|
|
|
+ Object.assign(form.value, data);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error('获取审批信息失败');
|
|
|
+ }
|
|
|
}
|
|
|
-);
|
|
|
+}, { immediate: true });
|
|
|
+
|
|
|
+
|
|
|
+// watch(
|
|
|
+// () => props.modelValue,
|
|
|
+// (v) => {
|
|
|
+// if (v) {
|
|
|
+// // eslint-disable-next-line no-console
|
|
|
+// console.log("val:::::",v);
|
|
|
+// Object.assign(form.value, v);
|
|
|
+// }
|
|
|
+// }, { immediate: true }
|
|
|
+// );
|
|
|
|
|
|
function addItem() {
|
|
|
showSelectDeviceDialog.value = true;
|
|
@@ -213,6 +305,10 @@ function onCancel() {
|
|
|
function onSubmit() {
|
|
|
formRef.value.validate((valid: boolean) => {
|
|
|
if (valid) {
|
|
|
+ form.value.items = form.value.items.map(item => ({
|
|
|
+ ...item,
|
|
|
+ quantity: Number(item.quantity) || 0
|
|
|
+ }));
|
|
|
const firstLocation = form.value.items[0]?.location || '';
|
|
|
form.value.return_location = firstLocation;
|
|
|
form.value.expected_start_time = now;
|