工作流
parent
33cbd6c8b6
commit
94cb133273
@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div class="app-container form-box" style="padding: 20px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-card class="top15">
|
||||
<div class="table-card">
|
||||
<el-row type="flex" justify="space-around">
|
||||
<el-col :span="8"></el-col>
|
||||
<el-col :span="8" class="formTitle"> {{ title }}</el-col>
|
||||
<el-col :span="8" style="text-align: right; padding-right: 20px">
|
||||
<BottomBtn
|
||||
:accessId="accessId"
|
||||
:isAuthorised="isAuthorised"
|
||||
@onConfirm="handleBtTottom"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="table-card table-card-content">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="借阅申请编码" prop="borrowCode">
|
||||
<el-input
|
||||
v-model="form.borrowCode"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入借阅申请编码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="申请人">
|
||||
<CommonName str="an" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="申请部门">
|
||||
<CommonName str="apt" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="预计归还日期" prop="returnTime">
|
||||
<el-date-picker
|
||||
class="formItemFullWidth"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
v-model="form.returnTime"
|
||||
type="date"
|
||||
value-format="timestamp"
|
||||
placeholder="选择预计归还日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="借阅方式" prop="way">
|
||||
<el-select
|
||||
v-model="form.way"
|
||||
:disabled="disabled"
|
||||
placeholder="请选择借阅方式"
|
||||
class="formItemFullWidth"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in wayOptions"
|
||||
:key="item.id"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="档案介质" prop="media">
|
||||
<el-select
|
||||
v-model="form.media"
|
||||
:disabled="disabled"
|
||||
placeholder="请选择档案介质"
|
||||
class="formItemFullWidth"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in mediaOptions"
|
||||
:key="item.id"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="借阅档案" prop="recordId">
|
||||
<el-select
|
||||
v-model="form.recordId"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择借阅档案"
|
||||
class="formItemFullWidth"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in filesNumOptions"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.filesNum"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="申请事由" prop="reason">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:disabled="disabled"
|
||||
size="small"
|
||||
:rows="5"
|
||||
v-model="form.reason"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-form>
|
||||
|
||||
<!-- 打印信息 -->
|
||||
<el-dialog
|
||||
:visible.sync="showPrintPage"
|
||||
width="1200px"
|
||||
custom-class="print-dialog"
|
||||
style="height: 98vh; overflow-y: auto"
|
||||
>
|
||||
<div style="text-align: right; margin-bottom: 10px">
|
||||
<el-button @click="PrintRow" type="primary" size="mini" plain
|
||||
>确认打印</el-button
|
||||
>
|
||||
</div>
|
||||
<div id="printMe" ref="print" class="print-main">
|
||||
<print-html :infoForm="form" dialogTitle="借阅申请单" :tasks="tasks" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 审批流程信息 -->
|
||||
<FlowDialog
|
||||
ref="FlowDialog"
|
||||
:isOpen="showFlow"
|
||||
@onCancel="showFlow = false"
|
||||
@onSetId="handleSetApprovalId"
|
||||
@onTasks="handleTasks"
|
||||
:processInstanceId="form.processInstanceId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createBorrowApply, getBorrowApply } from "@/api/borrow/apply";
|
||||
import { debounce } from "lodash";
|
||||
import { listData } from "@/api/system/dict/data";
|
||||
import { getRecordList } from "@/api/archives/record";
|
||||
|
||||
export default {
|
||||
name: "supplierTb",
|
||||
components: {
|
||||
printHtml: () => import("./printHtml"),
|
||||
CommonName: () => import("@/components/CommonName"),
|
||||
FlowDialog: () => import("@/components/FlowDialog"),
|
||||
BottomBtn: () => import("@/components/BottomBtn"),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
isAuthorised: false,
|
||||
accessId: null,
|
||||
tasks: {},
|
||||
showFlow: false,
|
||||
showPrintPage: false,
|
||||
form: {
|
||||
borrowCode: undefined,
|
||||
reason: null,
|
||||
returnTime: null,
|
||||
way: null,
|
||||
media: null,
|
||||
recordId: null,
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
reason: [{ required: true, message: "请输入", trigger: "blur" }],
|
||||
recordId: [
|
||||
{ required: true, message: "借阅档案不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
userList: [],
|
||||
index: 0,
|
||||
wayOptions: [], //借阅方式
|
||||
mediaOptions: [], //档案介质
|
||||
filesNumOptions: [], //借阅档案
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return !["add", "edit"].includes(this.$route.query.flag);
|
||||
},
|
||||
title() {
|
||||
return this.$route.query.title;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.id) {
|
||||
this.handleInitForm(this.$route.query.id);
|
||||
}
|
||||
this.getFiles();
|
||||
this.handleInitList();
|
||||
},
|
||||
methods: {
|
||||
// 获取借阅档案
|
||||
getFiles() {
|
||||
getRecordList({ ids: "", fileNum: "" }).then((res) => {
|
||||
this.filesNumOptions = res.data;
|
||||
});
|
||||
},
|
||||
handleSetApprovalId(id) {
|
||||
this.accessId = id;
|
||||
},
|
||||
handleBtTottom(val) {
|
||||
if (val === 0 || val === 1) {
|
||||
this.submitForm(val);
|
||||
} else if (val == 2) {
|
||||
this.showPrintPage = true;
|
||||
} else {
|
||||
this.showFlow = true;
|
||||
}
|
||||
},
|
||||
handleTasks(tasks) {
|
||||
this.tasks = tasks;
|
||||
},
|
||||
PrintRow: debounce(function () {
|
||||
//确认打印档案
|
||||
this.$print(this.$refs.print);
|
||||
}, 200),
|
||||
handlePrint() {
|
||||
this.showPrintPage = true;
|
||||
},
|
||||
//获取字典数据
|
||||
handleInitList() {
|
||||
// 获取借阅申请方式
|
||||
listData({
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
dictType: "way_type",
|
||||
}).then((res) => {
|
||||
this.wayOptions = res.data.list || [];
|
||||
});
|
||||
// 获取档案介质
|
||||
listData({
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
dictType: "media_type",
|
||||
}).then((res) => {
|
||||
this.mediaOptions = res.data.list || [];
|
||||
});
|
||||
},
|
||||
// 获取详情
|
||||
handleInitForm(id) {
|
||||
this.processInstanceLoading = true;
|
||||
getBorrowApply(id).then((response) => {
|
||||
this.form = response.data || {};
|
||||
this.$nextTick(() => {
|
||||
this.form.processInstanceId &&
|
||||
this.$refs.FlowDialog.getDetail(this.form.processInstanceId);
|
||||
});
|
||||
this.isAuthorised = this.form.isAuthorised;
|
||||
});
|
||||
},
|
||||
submitForm(type) {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 添加/修改的提交
|
||||
let newForm = {
|
||||
...this.form,
|
||||
status: type,
|
||||
};
|
||||
createBorrowApply(newForm).then((response) => {
|
||||
this.$modal.msgSuccess(`${this.form.id ? "修改成功!" : "新增成功!"}`);
|
||||
history.back();
|
||||
});
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.$emit("onCancel");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/styles/form/index.scss";
|
||||
.my-process-designer {
|
||||
background: #fff !important;
|
||||
}
|
||||
.formItemFullWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue