<!-- 设备借用 -->
|
<template>
|
<div>
|
<div class="search">
|
<div class="search_thing">
|
<div class="search_label">流程编号：</div>
|
<div>
|
<el-input
|
size="small"
|
placeholder="请输入"
|
clearable
|
v-model="componentData.entity.processNumber"
|
@keyup.enter.native="refreshTable()"
|
></el-input>
|
</div>
|
</div>
|
<div class="search_thing" style="padding-left: 30px;">
|
<el-button size="small" @click="refresh()">重 置</el-button>
|
<el-button size="small" type="primary" @click="refreshTable()"
|
>查 询</el-button
|
>
|
</div>
|
<div class="btns">
|
<el-button size="small" type="primary" @click="add">新增</el-button>
|
<!-- <el-button size="small" type="primary" @click="handleDown" :loading="outLoading">导出</el-button>-->
|
</div>
|
</div>
|
<div class="tables" style="margin-top: 10px;">
|
<ValueTable
|
ref="ValueTable"
|
:url="$api.deviceBorrow.deviceBorrowPage"
|
:delUrl="$api.deviceBorrow.deleteDeviceBorrow"
|
:componentData="componentData"
|
:key="upIndex"
|
/>
|
</div>
|
<el-dialog
|
title="仪器设备领(借)用登记"
|
top="5vh"
|
:visible.sync="dialogVisible"
|
width="60%"
|
>
|
<el-steps :active="currentStep" finish-status="success" align-center>
|
<el-step
|
style="cursor:pointer"
|
v-for="(v, i) in steps"
|
:title="v"
|
:key="i"
|
@click.native="choiceStep(i)"
|
></el-step>
|
</el-steps>
|
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
|
<div v-show="currentStepClick === 0">
|
<el-card style="margin-top: 1em; height: 51vh; overflow-y: scroll;">
|
<!-- 新增设备事记录卡片 -->
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="编号：" prop="processNumber">
|
<el-input
|
v-model="form.processNumber"
|
size="small"
|
:disabled="currentStep > 0"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备名称：">
|
<el-input
|
v-model="form.deviceName"
|
size="small"
|
disabled
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="管理编号：" prop="unifyNumber">
|
<el-input
|
v-model="form.unifyNumber"
|
size="small"
|
:disabled="currentStep > 0"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="借用人：" prop="recipientUser">
|
<el-select
|
v-model="form.recipientUser"
|
filterable
|
placeholder="请选择"
|
clearable
|
size="small"
|
style="width: 100%;"
|
:disabled="currentStep > 0"
|
>
|
<el-option
|
v-for="item in responsibleOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item
|
label="借用人联系方式："
|
prop="borrowerContactInformation"
|
label-width="150px"
|
>
|
<el-input
|
v-model="form.borrowerContactInformation"
|
size="small"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="借用日期：" prop="recipientTime">
|
<el-date-picker
|
v-model="form.recipientTime"
|
type="date"
|
placeholder="选择日期"
|
size="small"
|
format="yyyy-MM-dd"
|
style="width: 100%"
|
value-format="yyyy-MM-dd"
|
:disabled="currentStep > 0"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="借用时状态：">
|
<el-radio-group
|
v-model="form.recipientState"
|
:disabled="currentStep !== 0"
|
>
|
<el-radio :label="0">合格</el-radio>
|
<el-radio :label="1">维修</el-radio>
|
<el-radio :label="2">停用</el-radio>
|
<el-radio :label="3">报废</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="相关附件：" prop="fileName">
|
<el-input
|
v-model="form.fileName"
|
disabled
|
size="small"
|
:style="`width: ${currentStep == 0 ? '88%' : '100%'};`"
|
>
|
<el-button
|
slot="append"
|
v-if="currentStep === 0"
|
icon="el-icon-delete-solid"
|
@click="deleteFile"
|
></el-button>
|
</el-input>
|
<el-upload
|
ref="upload"
|
style="float: right;"
|
:action="action"
|
:show-file-list="false"
|
:on-success="onSuccess"
|
:disabled="currentStep !== 0"
|
>
|
<el-button
|
style="position: relative;top: -4px"
|
class="uploadFile"
|
slot="trigger"
|
size="small"
|
type="primary"
|
v-if="currentStep === 0"
|
>附件上传</el-button
|
>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下环节责任人：" prop="nextUser">
|
<el-select
|
v-model="form.nextUser"
|
filterable
|
placeholder="请选择"
|
clearable
|
size="small"
|
style="width: 100%;"
|
:disabled="currentStep !== 0"
|
>
|
<el-option
|
v-for="item in responsibleOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-card>
|
<el-row style="margin-top: 1em;">
|
<el-col :span="4"> 操作人：{{ form.submitOperationUser }} </el-col>
|
<el-col :span="6"> 日期：{{ form.submitOperationTime }} </el-col>
|
</el-row>
|
</div>
|
<div v-show="currentStepClick === 1">
|
<el-card style="margin-top: 1em; height: 51vh; overflow-y: scroll;">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item
|
label="归还人："
|
prop="rebackUser"
|
:rules="[
|
{
|
required: currentStep === 1,
|
message: '请输入归还人',
|
trigger: 'change'
|
}
|
]"
|
>
|
<!-- <el-input v-model="form.rebackUser" size="small" :disabled="currentStep !== 1"></el-input> -->
|
<el-select
|
v-model="form.rebackUser"
|
filterable
|
placeholder="请选择"
|
clearable
|
size="small"
|
style="width: 50%;"
|
:disabled="currentStep !== 1"
|
>
|
<el-option
|
v-for="item in responsibleOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item
|
label="归还日期："
|
prop="rebackTime"
|
:rules="[
|
{
|
required: currentStep === 1,
|
message: '请选择归还日期',
|
trigger: 'change'
|
}
|
]"
|
>
|
<el-date-picker
|
v-model="form.rebackTime"
|
:disabled="currentStep !== 1"
|
type="date"
|
placeholder="选择日期"
|
size="small"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="接收状况：">
|
<el-radio-group
|
v-model="form.receiveState"
|
:disabled="currentStep !== 1"
|
>
|
<el-radio :label="0">合格</el-radio>
|
<el-radio :label="1">维修</el-radio>
|
<el-radio :label="2">停用</el-radio>
|
<el-radio :label="3">报废</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item
|
label="设备负责人："
|
prop="deviceUser"
|
:rules="[
|
{
|
required: currentStep === 1,
|
message: '请选择设备负责人',
|
trigger: 'change'
|
}
|
]"
|
>
|
<!-- <el-input v-model="form.deviceUser" size="small" :disabled="currentStep !== 1"></el-input> -->
|
<el-select
|
v-model="form.deviceUser"
|
filterable
|
placeholder="请选择"
|
clearable
|
size="small"
|
style="width: 50%;"
|
:disabled="currentStep !== 1"
|
>
|
<el-option
|
v-for="item in responsibleOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备注：">
|
<el-input
|
type="textarea"
|
v-model="form.note"
|
:disabled="currentStep !== 1"
|
size="small"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-card>
|
<el-row style="margin-top: 1em;">
|
<el-col :span="4"> 操作人：{{ form.receiveOperationUser }} </el-col>
|
<el-col :span="6"> 日期：{{ form.receiveOperationTime }} </el-col>
|
</el-row>
|
</div>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button
|
@click="submitForm('3reject')"
|
v-if="currentStep !== 0 && currentStep !== 2"
|
>驳回</el-button
|
>
|
<el-button @click="submitForm('2save')" v-if="currentStep === 0"
|
>保存</el-button
|
>
|
<el-button
|
type="primary"
|
v-if="currentStep !== 2"
|
@click="submitForm('1submit')"
|
>{{ currentStep === 0 ? "提交" : "通过" }}</el-button
|
>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="流程跟踪"
|
top="5vh"
|
:visible.sync="dialogVisible0"
|
width="60%"
|
>
|
<el-table :data="deviceLogs" style="width: 100%">
|
<el-table-column type="index" width="50"> </el-table-column>
|
<el-table-column prop="operator" label="操作人" width="180">
|
</el-table-column>
|
<el-table-column prop="operationTime" label="操作日期" width="180">
|
</el-table-column>
|
<el-table-column prop="operationType" label="提交类型">
|
</el-table-column>
|
<el-table-column prop="operationContent" label="操作内容">
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import ValueTable from "../../tool/value-table.vue";
|
import { dateFormat } from "../../../util/date";
|
export default {
|
props: {
|
clickNodeVal: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
},
|
components: {
|
ValueTable
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
dialogVisible0: false,
|
//表头显示
|
componentData: {
|
entity: {
|
processNumber: null,
|
deviceId: null,
|
orderBy: {
|
field: "id",
|
order: "asc"
|
}
|
},
|
isIndex: true,
|
showSelect: false,
|
select: false,
|
do: [
|
{
|
id: "show",
|
font: "查看",
|
type: "text",
|
method: "lookDetail"
|
},
|
{
|
id: "delete",
|
font: "删除",
|
type: "text",
|
method: "doDiy"
|
},
|
{
|
id: "111",
|
font: "流程跟踪",
|
type: "text",
|
method: "handleLookList"
|
}
|
],
|
init: false,
|
tagField: {
|
recipientState: {
|
select: [
|
{
|
value: 0,
|
type: "success",
|
label: "合格"
|
},
|
{
|
value: 1,
|
type: "warning",
|
label: "维修"
|
},
|
{
|
value: 2,
|
type: "info",
|
label: "停用"
|
},
|
{
|
value: 3,
|
type: "danger",
|
label: "报废"
|
}
|
]
|
}
|
},
|
selectField: {},
|
requiredAdd: [],
|
requiredUp: []
|
},
|
upIndex: 0,
|
entityCopy: null,
|
currentStep: 0, // 步骤条显示第几步
|
currentStepClick: 0, // 点击步骤条变化
|
steps: ["借出", "借用"],
|
responsibleOptions: [], // 下环节负责人list
|
form: {
|
processNumber: null,
|
deviceName: null,
|
unifyNumber: null,
|
recipientUser: null,
|
recipientTime: null,
|
nextUser: null,
|
rebackUser: null,
|
rebackTime: null,
|
receiveState: null,
|
deviceUser: null,
|
fileName: null
|
},
|
rules: {
|
processNumber: [
|
{ required: true, message: "请输入编号", trigger: "blur" }
|
],
|
deviceName: [
|
{ required: true, message: "请输入设备名称", trigger: "blur" }
|
],
|
unifyNumber: [
|
{ required: true, message: "请输入管理编号", trigger: "blur" }
|
],
|
recipientUser: [
|
{ required: true, message: "请输入借用人", trigger: "blur" }
|
],
|
borrowerContactInformation: [
|
{ required: true, message: "请输入借用人联系方式", trigger: "blur" }
|
],
|
recipientTime: [
|
{ required: true, message: "请选择借用日期", trigger: "change" }
|
],
|
nextUser: [
|
{ required: true, message: "请选择下环节负责人", trigger: "change" }
|
]
|
},
|
deviceLogs: [],
|
outLoading: false
|
};
|
},
|
watch: {
|
// 监听点击el-tree的数据，进行数据刷新
|
clickNodeVal(newVal) {
|
if (newVal.value) {
|
this.componentData.entity.deviceId = this.clickNodeVal.value;
|
this.entityCopy = this.HaveJson(this.componentData.entity);
|
this.refreshTable();
|
}
|
},
|
dialogVisible(newVal) {
|
if (!newVal) {
|
this.form = {};
|
this.currentStep = 0; // 步骤条显示第几步
|
this.currentStepClick = 0; // 点击步骤条变化
|
this.$refs["form"].clearValidate();
|
}
|
}
|
},
|
computed: {
|
action() {
|
return this.javaApi + this.$api.personnel.saveCNASFile;
|
}
|
},
|
mounted() {
|
this.componentData.entity.deviceId = this.clickNodeVal.value;
|
this.entityCopy = this.HaveJson(this.componentData.entity);
|
// console.log(333,this.clickNodeVal)
|
this.getUserList();
|
this.refreshTable();
|
},
|
methods: {
|
refreshTable(e) {
|
this.$refs["ValueTable"].selectList(e);
|
},
|
refresh() {
|
this.componentData.entity = this.HaveJson(this.entityCopy);
|
this.refreshTable();
|
// this.upIndex++
|
},
|
choiceStep(index) {
|
this.currentStepClick = index;
|
},
|
//提交表单
|
async submitForm(saveState) {
|
this.$refs.form.validate(valid => {
|
if (valid === true || saveState !== "1submit") {
|
// 给当前环节设置创建人与时间
|
let user = JSON.parse(localStorage.getItem("user"));
|
const dateTime = dateFormat(new Date());
|
// 获取当前环节操作人与日期
|
switch (this.currentStep) {
|
case 0:
|
this.form.submitOperationUser = user.name;
|
this.form.submitOperationTime = dateTime;
|
break;
|
case 1:
|
this.form.receiveOperationUser = user.name;
|
this.form.receiveOperationTime = dateTime;
|
break;
|
default:
|
break;
|
}
|
// 获取当前环节负责人
|
switch (
|
saveState === "3reject" ? this.currentStep - 1 : this.currentStep
|
) {
|
case 0:
|
this.form.nowUser = this.form.nextUser;
|
break;
|
default:
|
break;
|
}
|
let currentStepAction;
|
// 设置该操作判断是否为提交，保存，驳回，通过
|
switch (saveState) {
|
// 提交，通过
|
case "1submit":
|
currentStepAction = this.currentStep + 1;
|
break;
|
// 保存
|
case "2save":
|
currentStepAction = this.currentStep;
|
break;
|
// 驳回
|
case "3reject":
|
currentStepAction = this.currentStep - 1;
|
break;
|
default:
|
break;
|
}
|
// 获取当前状态
|
this.form.nowState =
|
currentStepAction === 2 ? "关闭" : this.steps[currentStepAction];
|
this.form.deviceId = this.clickNodeVal.value;
|
delete this.form.deviceLogs;
|
this.$axios
|
.post(this.$api.deviceBorrow.saveDeviceBorrow, this.form, {
|
headers: {
|
"Content-Type": "application/json"
|
},
|
noQs: true
|
})
|
.then(res => {
|
if (res.code == 200) {
|
this.$message.success("提交成功");
|
this.dialogVisible = false;
|
this.refreshTable();
|
}
|
});
|
} else {
|
let step = this.steps[this.currentStep];
|
this.$message.warning(step + " 流程中有必填项未填！");
|
}
|
});
|
},
|
deleteFile() {
|
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$axios
|
.delete(
|
this.$api.personnel.deleteCNASFile +
|
"?fileName=" +
|
this.form.fileName
|
)
|
.then(res => {
|
if (res.code == 200) {
|
this.$message.success("删除成功！");
|
}
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除"
|
});
|
});
|
},
|
onSuccess(response, file, fileList) {
|
if (response.code == 200) {
|
// 在保存赋值新文件
|
this.form.fileName = file.name;
|
this.form.url = response.data;
|
} else {
|
this.$message.error(response.message);
|
}
|
},
|
// 获取负责人信息接口
|
getUserList() {
|
this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
|
if (res.code == 200) {
|
this.responsibleOptions = res.data;
|
}
|
});
|
},
|
// 查看详情
|
lookDetail(row) {
|
this.$axios
|
.get(this.$api.deviceBorrow.getDeviceBorrow + "?id=" + row.id)
|
.then(res => {
|
if (res.code == 200) {
|
this.form = res.data;
|
this.form.deviceName = this.clickNodeVal.label;
|
this.form.deviceId = this.clickNodeVal.value;
|
this.deviceLogs = res.data.deviceLogs;
|
let i = this.steps.findIndex(item => item == row.nowState);
|
if (i == -1) {
|
this.currentStep = 2;
|
this.currentStepClick = 0;
|
} else {
|
this.currentStep = i;
|
this.currentStepClick = i;
|
}
|
console.log(this.currentStepClick);
|
this.dialogVisible = true;
|
}
|
});
|
},
|
// 新增
|
add() {
|
this.dialogVisible = true;
|
this.form = {
|
processNumber: null,
|
deviceName: null,
|
unifyNumber: null,
|
recipientUser: null,
|
recipientTime: null,
|
nextUser: null,
|
rebackUser: null,
|
rebackTime: null,
|
receiveState: null,
|
deviceUser: null,
|
fileName: null
|
};
|
this.form.deviceName = this.clickNodeVal.label;
|
this.form.deviceId = this.clickNodeVal.value;
|
},
|
//导出
|
handleDown() {
|
this.outLoading = true;
|
this.$axios
|
.post(
|
this.$api.deviceBorrow.deviceBorrowExport,
|
{ deviceId: this.clickNodeVal.value },
|
{ responseType: "blob" }
|
)
|
.then(res => {
|
this.outLoading = false;
|
const blob = new Blob([res], {
|
type: "application/force-download"
|
});
|
const filename = decodeURI(
|
this.clickNodeVal.label + "设备借出统计" + ".xlsx"
|
);
|
//将Blob 对象转换成字符串
|
let reader = new FileReader();
|
reader.readAsText(blob, "utf-8");
|
reader.onload = () => {
|
try {
|
let result = JSON.parse(reader.result);
|
if (result.message) {
|
this.$message.error(result.message);
|
} else {
|
// 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
|
const elink = document.createElement("a");
|
elink.download = filename;
|
elink.style.display = "none";
|
elink.href = URL.createObjectURL(blob);
|
document.body.appendChild(elink);
|
elink.click();
|
URL.revokeObjectURL(elink.href); // 释放URL 对象
|
document.body.removeChild(elink);
|
this.$message.success("导出成功");
|
}
|
} catch (err) {
|
console.log(err);
|
// 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
|
const elink = document.createElement("a");
|
elink.download = filename;
|
elink.style.display = "none";
|
elink.href = URL.createObjectURL(blob);
|
document.body.appendChild(elink);
|
elink.click();
|
URL.revokeObjectURL(elink.href); // 释放URL 对象
|
document.body.removeChild(elink);
|
this.$message.success("导出成功");
|
}
|
};
|
});
|
},
|
handleLookList(row) {
|
this.$axios
|
.get(this.$api.deviceBorrow.getDeviceBorrow + "?id=" + row.id)
|
.then(res => {
|
if (res.code == 200) {
|
this.deviceLogs = res.data.deviceLogs;
|
this.dialogVisible0 = true;
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
h4 {
|
font-weight: 400;
|
font-size: 16px;
|
display: flex;
|
justify-content: space-between;
|
margin: 10px 0;
|
}
|
|
h4 .line {
|
display: inline-block;
|
width: 3px;
|
height: 16px;
|
background: #3a7bfa;
|
margin-right: 4px;
|
}
|
|
.tables {
|
width: 100%;
|
height: calc(100vh - 15em);
|
}
|
|
.search {
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
position: relative;
|
margin-top: 10px;
|
}
|
|
.search_thing {
|
display: flex;
|
align-items: center;
|
height: 40px;
|
}
|
|
.search_label {
|
width: 70px;
|
font-size: 14px;
|
text-align: right;
|
}
|
|
.search_input {
|
width: calc(100% - 120px);
|
}
|
|
.btns {
|
position: absolute;
|
right: 0px;
|
top: 50%;
|
transform: translate(0, -50%);
|
}
|
|
.btns_thing {
|
position: absolute;
|
right: 230px;
|
top: 50%;
|
transform: translate(0, -50%);
|
}
|
|
.form .search_label {
|
width: 120px;
|
}
|
.el-radio {
|
margin-right: 10px;
|
}
|
.el-radio-group {
|
width: 100%;
|
display: flex;
|
margin-top: 12px;
|
}
|
</style>
|
