bonus-ui/src/views/material/lease/outBound/component/homeApply.vue

752 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="申请时间" prop="time">
<el-date-picker
v-model="queryParams.time"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
>
</el-date-picker>
</el-form-item>
<el-form-item label="关键字" prop="keyWord">
<el-input
v-model="queryParams.keyWord"
placeholder="请输入关键字"
clearable
maxlength="50"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="taskStatus">
<el-select
v-model="queryParams.taskStatus"
placeholder="请选择状态"
clearable
filterable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.lease_task_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索
</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置
</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出
</el-button>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="typeList" row-key="id" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" :selectable="selectable"/>
<el-table-column width="60" align="center" label="序号" type="index" >
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="申请时间" align="center" prop="createTime" width="160" :show-overflow-tooltip="true"/>
<el-table-column label="申请人" align="center" prop="createBy" width="100" :show-overflow-tooltip="true"/>
<el-table-column label="领料班组" align="center" prop="teamName" width="100" :show-overflow-tooltip="true"/>
<!-- <el-table-column label="实施单位" align="center" prop="impUnitName" width="120px" :show-overflow-tooltip="true"/>
<el-table-column label="合同主体" align="center" prop="contractPart" width="120px" :show-overflow-tooltip="true"/>
<el-table-column label="租赁单位" align="center" prop="leaseUnit" width="150px" :show-overflow-tooltip="true"/> -->
<el-table-column label="租赁工程" align="center" prop="projectName" width="150px" :show-overflow-tooltip="true"/>
<!-- <el-table-column label="领料物资类型" align="center" prop="maTypeNames" width="110px" :show-overflow-tooltip="true"/> -->
<!-- <el-table-column label="协议号" align="center" prop="agreementCode" width="140" :show-overflow-tooltip="true"/> -->
<!-- <el-table-column label="租赁申请单号" align="center" prop="code" width="140px" :show-overflow-tooltip="true"></el-table-column> -->
<el-table-column label="领料工器具类型" align="center" prop="maTypeNames" width="140px" :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="班组长" align="center" prop="leasePerson" :show-overflow-tooltip="true"/>
<!-- <el-table-column label="班组长电话" align="center" prop="phone" width="120px" :show-overflow-tooltip="true"/> -->
<el-table-column label="状态" align="center" prop="taskStatus" :show-overflow-tooltip="true" width="150">
<template slot-scope="scope">
<dict-tag :options="dict.type.lease_task_status" :value="scope.row.taskStatus"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" width="100" prop="remark" :show-overflow-tooltip="true"/>
<el-table-column label="操作" align="center" width="300" fixed="right">
<template slot-scope="scope">
<el-button size="mini" style="margin-bottom: 10px" type="normal"
@click="handleView(scope.row)"
>查看</el-button>
<el-button size="mini" style="margin-bottom: 10px" type="primary"
@click="handleUpdate(scope.row)" v-if="scope.row.taskStatus != 4" v-hasPermi="['purchase:info:edit']"
>出库</el-button>
<el-button size="mini" type="warning"
v-if="scope.row.taskStatus != 1" @click="handleLld(scope.row)"
>领料单</el-button>
<el-button size="mini" type="warning"
@click="handlePrint(scope.row)" v-if="scope.row.taskStatus == 4"
>出库检验单</el-button>
<el-button size="mini" type="danger"
@click="handleDeletePurchase(scope.row)" v-if="scope.row.taskStatus == 1" v-hasPermi="['purchase:info:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 出库检验单弹窗 -->
<el-dialog :title="title" :visible.sync="openPrint" width="1090px" append-to-body>
<div style="height: 600px; overflow-y: scroll;padding: 0 20px">
<!-- <vue-easy-print tableShow ref="remarksPrintRefCheck" class="print" :printable="'checkId'"> -->
<div id="checkId">
<div class="title" style="text-align: center; font-weight: 600; font-size: 16px">
施工机具设备出库检验记录表
</div>
<div class="info" style="margin-top: 10px; display: flex; align-items: center;">
<div class="item"
style="width: 60%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
<span>领用工程:</span>
{{ checkDataInfo.leaseProject }}
</div>
<div class="item" style="width: 40%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
<span>使用单位:</span>
{{ checkDataInfo.leaseUnit }}
</div>
</div>
<el-table :data="printTableData" class="table" style="margin-top: 20px;width: 100%;" border>
<el-table-column label="机具名称" align="center" prop="typeName"/>
<el-table-column label="规格型号" align="center" prop="typeModelName" />
<el-table-column label="单位" align="center" prop="unit" width="40px"/>
<el-table-column label="数量" align="center" prop="num" width="40px"/>
<el-table-column label="设备编码" align="center" prop="maCode"/>
<el-table-column label="额定载荷KN" align="center" prop="ratedLoad" width="80px"/>
<el-table-column label="试验载荷KN" align="center" prop="testLoad" width="80px"/>
<el-table-column label="持荷时间min" align="center" prop="holdingTime" width="80px"/>
<el-table-column label="试验日期" align="center" prop="testTime" width="120px"/>
<el-table-column label="下次试验日期" align="center" prop="nextTestTime" width="120px"/>
<el-table-column label="检验结论" align="center" prop="checkResult" />
<el-table-column label="备注" align="center" prop="remark"/>
</el-table>
<div class="fillIn" style="margin-top: 20px;display: flex;align-items: center;justify-content: right;">
<div class="item" style="width: 30%; align-items: center;position: relative;">
<div>
<span>检验单位:</span>
</div>
<div>
<canvas id="canvas" width="165" height="165" style="position: absolute; top: 50%; left: 90%; transform: translate(-100%, -50%); z-index: 9999;"></canvas>
</div>
</div>
</div>
</div>
<!-- </vue-easy-print> -->
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="handleExportCheck">导出</el-button>
<el-button type="primary" @click="printCheck">打 印</el-button>
<el-button @click="closeDialogAndRefresh">关 闭</el-button>
</div>
</el-dialog>
<!-- 领料单弹窗 -->
<el-dialog :visible.sync="open" width="800px" :title="title" append-to-body>
<div style="height: 500px; overflow-y: scroll; padding: 0 20px">
<!-- <vue-easy-print tableShow ref="remarksPrintRef" > -->
<div id="checkIdTwo">
<div class="title" style="text-align: center; font-weight: 600; font-size: 16px">
领料单
</div>
<div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap" >
<div class="item" style="width: 60%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
<span>领料班组:</span>
{{ leaseApplyData.teamName }}
</div>
<div class="item" style="width: 40%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
<span>工程名称:</span>
{{ leaseApplyData.projectName }}
</div>
<div class="item" style="width: 40%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
<span>发料单位:</span>
{{ leaseApplyData.sendUnit }}
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
<span>时间:</span>
<span v-if="leaseApplyData.createTime">{{ leaseApplyData.createTime.split(" ")[0] }}</span>
</div>
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
<span>编号:</span>
{{ leaseApplyData.code }}
</div>
</div>
<el-table :data="leaseApplyDetails" class="table" border style="width: 100%;">
<el-table-column label="序号" align="center" type="index" width="60px"/>
<el-table-column label="类型名称" align="center" prop="maTypeName" />
<el-table-column label="规格型号" align="center" prop="typeName" />
<el-table-column label="计量单位" align="center" prop="unitName" />
<el-table-column label="预领数量" align="center" prop="preNum" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="出库方式" align="center" prop="manageType">
<template slot-scope="scope">
<span v-if="scope.row.manageType == 0" style="color: blue;" @click="codeInfo(scope.row)">编码出库</span>
<span v-if="scope.row.manageType == 1">数量出库</span>
</template>
</el-table-column>
</el-table>
<div class="fillIn" style="margin-top: 30px;display: flex;justify-content: space-between;">
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
<div style="width: 30%;">审核:</div>
<div style="width: 70%;display: flex;align-items: center;flex-wrap: wrap;" v-if="leaseApplyData.directAuditSignUrl">
<div style="width: 80%;margin-left: 20px;">
<img :src="leaseApplyData.directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);max-width: 100%;" alt="">
</div>
</div>
<!-- <img :src="leaseApplyData.directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);max-width: 100%;" alt=""> -->
</div>
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
<span>领料:</span>
</div>
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
<span>制单:</span>
</div>
<div class="item" style="width: 28%;display: flex;align-items: center;">
<div style="width: 25%;">库管:</div>
<div style="width: 75%;display: flex;align-items: center;flex-wrap: wrap;">
<img src="../../../../../assets/signTemp.png" style="width: 45%;height: 30px;" alt="">
<img src="../../../../../assets/signTemp.png" style="width: 45%;height: 30px;" alt="">
<img src="../../../../../assets/signTemp.png" style="width: 45%;height: 30px;" alt="">
<img src="../../../../../assets/signTemp.png" style="width: 45%;height: 30px;" alt="">
</div>
</div>
</div>
</div>
<!-- </vue-easy-print> -->
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="print">打 印</el-button>
<el-button @click="open = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 编码管理查看弹窗 -->
<el-dialog :title="titleView" :visible.sync="showView" width="800px" append-to-body>
<div style="overflow-y: scroll">
<vue-easy-print tableShow ref="remarksPrintRefView" class="print">
<div class="title" style="text-align: center; font-weight: 600; font-size: 16px; margin-bottom:20px">
领料单编号明细
</div>
<el-table :data="getListViewInfo" style="padding: 1px;">
<el-table-column align="center" label="序号" type="index" width="55" />
<el-table-column label="类型名称" align="center" prop="materialName" :show-overflow-tooltip="true"/>
<el-table-column label="规格型号" align="center" prop="typeName" :show-overflow-tooltip="true"/>
<el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true"/>
</el-table>
</vue-easy-print>
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="printView">打 印</el-button>
<el-button @click="showView = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getListLeaseApply,
getPurchaseCheckInfo,
getAcceptanceForm,
purchaseCheckInfoRemove,
queryStatusDataApi,
getApplyInfo,
applyRemove,
applySend,
applySendAll,
getCheckInfo
} from "@/api/lease/apply";
import vueEasyPrint from "vue-easy-print";
import printJS from 'print-js';
export default {
name: "Home",
dicts: ["lease_task_status", "ma_type_manage_type"],
components: { vueEasyPrint },
data() {
return {
// 遮罩层
loading: true,
loadingTwo: true,
updateTime: "",
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
showPeople: false,
peopleOpen: false,
// 总条数
total: 0,
totalTwo: 0,
//搜索下拉数据
typesList: [],
modelList: [],
// 字典表格数据
typeList: [],
getListPeople: [],
configUserList: [],
phoneNumbers: [],
//选择人员
chosenUserList: [],
userList: [],
// 弹出层标题
title: "",
// 日期范围
dateRange: [],
statusDataRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
time: null, //申请时间
keyWord: "",
taskStatus: null, //申请时间
},
form: {
remark: "",
},
// 表单校验
rules: {
remark: [
{ required: true, message: "通知内容不能为空", trigger: "blur" },
],
},
openPrint: false,
open: false,
printData: {},
printTableData: [],
checkDataInfo: {},
// 供应商
supplierStr: "",
//领料单
leaseApplyDetails: [],
// 领料任务详情数据
leaseApplyData: {},
sendTemp: [],
// 编码管理查看弹窗
showView: false,
titleView: "",
getListViewInfo: [],
};
},
created() {
// this.getStatusList();
this.getList();
// this.getTypeList()
},
methods: {
// getTypeList() {
// getTypeList({ level: '3' }).then((response) => {
// this.typesList = response.data
// })
// getTypeList({ level: '4' }).then((response) => {
// this.modelList = response.data
// })
// },
// 多选框选中数据
handleSelectionChange(selection) {
this.sendTemp = [];
this.ids = selection.map((item) => item.id);
selection.forEach((item) => {
this.sendTemp.push({ id: item.id, taskId: item.taskId });
});
this.single = selection.length != 1;
this.multiple = !selection.length;
},
//是否可用勾选框
selectable(row) {
if (row.taskStatus == 1) {
return true;
} else {
return false;
}
},
getList() {
this.loading = true;
const params = {
keyWord: this.queryParams.keyWord,
taskStatus: this.queryParams.taskStatus,
startTime: this.queryParams.time && this.queryParams.time[0],
endTime: this.queryParams.time && this.queryParams.time[1],
pageSize: this.queryParams.pageSize,
pageNum: this.queryParams.pageNum,
// statusList: this.queryParams.taskStatus ? [this.queryParams.taskStatus]:[1,2,3,4]
};
getListLeaseApply(params).then((response) => {
this.typeList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.time = [];
this.resetForm("queryForm");
this.queryParams.keyWord = "";
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.$emit("addTools");
},
/** 查看按钮操作 */
handleView(row) {
this.$emit("queryTools", row.taskId, row.id);
},
/** 修改按钮操作 */
handleUpdate(row) {
this.$emit("editTools", row.taskId, row.id);
},
//----消息通知
getNowTime() {
var today = new Date();
var year = today.getFullYear(); //获取年份
var month = today.getMonth() + 1; //获取月份
var day = today.getDate(); //获取日期
return year + "-" + month + "-" + day;
},
// 表单重置
reset() {
this.form = {
taskId: "",
remark: "",
};
this.resetForm("form");
},
//获取验收单数据
getPrintTable(taskId) {
getAcceptanceForm({ taskId: taskId }).then((response) => {
this.printData = response.data;
this.printTableData = response.data.checkDetailsList;
let supplierList = [];
this.printTableData.forEach((e) => {
if (e.supplier) {
supplierList.push(e.supplier);
}
});
supplierList = [...new Set(supplierList)];
this.supplierStr = supplierList.join(",");
});
},
//查看验收单
async handlePrint(row) {
this.$message.warning('功能开发中...')
return
const res = await getCheckInfo({id:row.id});
this.idTemp = row.id;
this.checkDataInfo = res.data.leaseApplyInfo;
this.printTableData = res.data.leaseOutVoList;
setTimeout(() => {
this.chapter('机具检验专用章', '安徽送变电工程有限公司机具(物流)分公司')
}, 500);
this.openPrint = true;
this.title = "出库检验单";
},
/** 导出按钮操作 */
handleExportCheck() {
this.download(
"/material/lease_apply_info/exportInfo",
{ id:this.idTemp },
`出库检验单_${new Date().getTime()}.xlsx`
);
},
//打开领料单
async handleLld(row) {
// 提示开发中
this.$message.warning('功能开发中...')
return
this.title = "领料单";
this.open = true;
var ids = row.id;
const res = await getApplyInfo(ids);
this.leaseApplyDetails = res.data.leaseApplyDetailsList;
this.leaseApplyData = res.data.leaseApplyInfo;
},
//出库检验单打印
printCheck() {
printJS({
printable: 'checkId',
type: 'html',
targetStyles: ['*'],
maxWidth:'1400'
// 其他配置选项
});
},
// 关闭弹窗并刷新页面
closeDialogAndRefresh() {
this.openPrint = false;
},
codeInfo(row) {
this.showView = true;
this.titleView = "查看";
this.getListViewInfo = row.maCodeVoList;
},
//打印
printView() {
this.$refs.remarksPrintRefView.print();
},
//打印
print() {
// this.$refs.remarksPrintRef.print();
printJS({
printable: 'checkIdTwo',
type: 'html',
targetStyles: ['*'],
maxWidth:'1400'
// 其他配置选项
});
},
/** 删除按钮操作 */
handleDeletePurchase(row) {
// console.log(row)
let ids = [];
ids.push(row.id);
console.log("ids", ids);
this.$modal
.confirm("是否确认删除所选择的数据项?")
.then(function () {
return applyRemove(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
const params = {
keyWord: this.queryParams.keyWord,
taskStatus: this.queryParams.taskStatus,
startTime: this.queryParams.time && this.queryParams.time[0],
endTime: this.queryParams.time && this.queryParams.time[1],
pageSize: this.queryParams.pageSize,
pageNum: this.queryParams.pageNum,
statusList: this.queryParams.taskStatus ? [this.queryParams.taskStatus]:[1,2,3,4]
};
this.download(
"/material/lease_apply_info/export",
{ ...params },
`领料申请_${new Date().getTime()}.xlsx`
);
},
//发布按钮
handleSend(row) {
const param = { id: row.id, taskId: row.taskId };
this.$modal
.confirm("是否确认发布所选择的数据项?")
.then(function () {
return applySend(param);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("发布成功");
})
.catch(() => {});
},
handleSendAll() {
if (this.ids.length == 0) {
this.$alert("请至少勾选一个领料申请", "提示", {
type: "warning",
confirmButtonText: "确定",
});
return;
} else {
applySendAll(this.sendTemp).then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess("发布成功");
}
this.getList();
});
}
},
chapter(text, companyName) {
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
canvas.width = canvas.width;
context.height = canvas.height;
// // 清除画布内容
// context.clearRect(0, 0, canvas.width, canvas.height);
//let text = "XXX专用章";
//let companyName = "XXX科技股份有限公司";
// 绘制印章边框
let width = canvas.width / 2;
let height = canvas.height / 2;
context.lineWidth = 3;
context.strokeStyle = "#f00";
context.beginPath();
context.arc(width, height, 80, 0, Math.PI * 2); //宽、高、半径
context.stroke();
//画五角星
this.create5star(context, width, height, 20, "#f00", 0);
// 绘制印章名称
context.font = "100 13px 宋体";
context.textBaseline = "middle"; //设置文本的垂直对齐方式
context.textAlign = "center"; //设置文本的水平对对齐方式
context.lineWidth = 0.7;
context.strokeStyle = "#ff2323";
context.strokeText(text, width, height + 50);
// 绘制印章单位
context.translate(width, height); // 平移到此位置,
context.font = "100 13px 宋体";
let count = companyName.length; // 字数
let angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
let chars = companyName.split("");
let c;
for (let i = 0; i < count; i++) {
c = chars[i]; // 需要绘制的字符
if (i == 0) {
context.rotate((5 * Math.PI) / 6);
} else {
context.rotate(angle);
}
context.save();
context.translate(65, 0); // 平移到此位置,此时字和x轴垂直公司名称和最外圈的距离
context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
context.strokeStyle = "#ff2323"; // 设置印章单位字体颜色为较浅的红色
context.strokeText(c, 0, 0); // 此点为字的中心点
context.restore();
}
},
//绘制五角星
create5star(context, sx, sy, radius, color, rotato) {
context.save();
context.fillStyle = color;
context.translate(sx, sy); //移动坐标原点
context.rotate(Math.PI + rotato); //旋转
context.beginPath(); //创建路径
// let x = Math.sin(0);
// let y = Math.cos(0);
let dig = (Math.PI / 5) * 4;
for (let i = 0; i < 5; i++) {
//画五角星的五条边
let x = Math.sin(i * dig);
let y = Math.cos(i * dig);
context.lineTo(x * radius, y * radius);
}
context.closePath();
context.stroke();
context.fill();
context.restore();
}
},
watch: {
$route: {
handler(to) {
if (to.query.keyWord) {
this.queryParams.keyWord = to.query.keyWord;
}
},
deep: true,
immediate: true,
},
},
};
</script>
<style lang="scss" scoped>
// ::v-deep.el-table .fixed-width .el-button--mini {
// width: 70px !important;
// margin-bottom: 10px;
// }
.image-type {
/* 旋转图片 */
transform: rotate(-90deg);
/* 确保旋转后的图片不会超出容器 */
max-width: 100%;
/* 保持图片的宽高比 */
width: 40px;
height: 100px;
}
.sign-type{
width: 100px;
height: 40px;
}
</style>