业务办理-领料申请发布，标签查询
This commit is contained in:
parent
a48d92859a
commit
5056526dc9
|
|
@ -0,0 +1,46 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
|
||||
// 获取领用申请一级列表-列表
|
||||
export function getLeasePublishList(query) {
|
||||
return request({
|
||||
url: '/material/leaseTask/getPublishList',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取领用申请详情
|
||||
export function getApplyInfo(query) {
|
||||
return request({
|
||||
url: '/material/leaseTask/getDetailsById',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 通过三级获取四级下拉规格框
|
||||
export function getTypeOptions(query) {
|
||||
return request({
|
||||
url: '/material/ma_type/selectMaTypeListByTypeId',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 领用发布
|
||||
export function applySubmit(data) {
|
||||
return request({
|
||||
url: '/material/leaseTask/addPublish',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -104,8 +104,24 @@ export function getOutRecordListApi(query) {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取电子标签详情
|
||||
export function getListTag(query) {
|
||||
return request({
|
||||
url: '/material/ma_machine/getElectronicLabel',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取电子标签下拉框
|
||||
export function getSelectionList(query) {
|
||||
return request({
|
||||
url: '/material/ma_machine/getByMaCode',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -252,6 +252,9 @@
|
|||
:span-method="objectSpanMethodApply"
|
||||
border
|
||||
:row-class-name="getRowClassName" >
|
||||
<el-table-column label="机具名称" align="center" prop="maName" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="规格型号" align="center" prop="maModel" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="领料数量" align="center" prop="num" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="减免数量" align="center" prop="reduceNum" width="120px">
|
||||
<template v-slot="scope">
|
||||
<span style="background-color: #f8f8f9;text-align: center;" v-if="scope.$index==applyList.length-1">小计：</span>
|
||||
|
|
@ -265,9 +268,6 @@
|
|||
></el-input></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="机具名称" align="center" prop="maName" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="规格型号" align="center" prop="maModel" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="领料数量" align="center" prop="num" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="领料日期" align="center" prop="startTime" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="退料日期" align="center" prop="endTime" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="减免开始时间" align="center" prop="reduceStartTime" width="160px">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,486 @@
|
|||
<template>
|
||||
<!-- 新增工机具 -->
|
||||
<div>
|
||||
<div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap;margin-left: 10px;" >
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>领用单位：</span>
|
||||
{{ leaseApplyData.leaseUnit }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>领用工程：</span>
|
||||
{{ leaseApplyData.leaseProject }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>联系人：</span>
|
||||
{{ leaseApplyData.leasePerson }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>联系电话：</span>
|
||||
{{ leaseApplyData.phone }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info" style="margin-top: 10px;margin-bottom:10px; display: flex; flex-wrap: wrap;margin-left: 10px" >
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>供货时间：</span>
|
||||
{{ leaseApplyData.supplierTime }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>供货地点：</span>
|
||||
{{ leaseApplyData.supplierPlace }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>业务单号：</span>
|
||||
{{ leaseApplyData.code }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleSend"
|
||||
>发布</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出数据</el-button
|
||||
>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-if="isEdit">导出</el-button>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="leaseList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column align="center" label="序号" type="index" width="55" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="类型名称"
|
||||
prop="maTypeName"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="规格型号"
|
||||
prop="typeName"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column align="center" label="计量单位" prop="unitName" />
|
||||
<el-table-column align="center" label="需求数量" prop="preNum" />
|
||||
<el-table-column align="center" label="当前库存" prop="storageNum" />
|
||||
<el-table-column align="center" label="已发布数量" prop="publishNum" :show-overflow-tooltip="true"/>
|
||||
<el-table-column align="center" label="已供应数量" prop="outNum" :show-overflow-tooltip="true"/>
|
||||
<el-table-column align="center" label="待发布数量" prop="pendingNum" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span :style="{ color: scope.row.pendingNum!== 0? 'red' : 'green' }">
|
||||
{{ scope.row.pendingNum }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="本次领料数量" prop="num" :show-overflow-tooltip="true" width="150px">
|
||||
<template v-slot="scope">
|
||||
<el-input
|
||||
v-model.number="scope.row.num"
|
||||
controls-position="right" type="number"
|
||||
v-if="scope.row.pendingNum!=0"
|
||||
style="width: 100%"
|
||||
:min="0" @change="handleChange(scope.row)"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="本次规格型号" prop="newTypeId" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-select
|
||||
v-model="scope.row.newTypeId"
|
||||
placeholder="请选择规格型号"
|
||||
style="width: 100%"
|
||||
:key="scope.$index"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in scope.row.typeOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 发料弹窗-->
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="openView"
|
||||
width="600px"
|
||||
append-to-body
|
||||
@close="closeView"
|
||||
>
|
||||
<el-form ref="maForm" :model="maForm" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="16">
|
||||
<el-form-item label="领用单位" prop="unitId">
|
||||
<treeselect
|
||||
v-model="maForm.unitId"
|
||||
:options="uniteList"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
style="width: 240px"
|
||||
:disable-branch-nodes="true"
|
||||
noChildrenText="没有数据了"
|
||||
noOptionsText="没有数据"
|
||||
noResultsText="没有搜索结果"
|
||||
placeholder="请选择领用单位"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button
|
||||
type="success"
|
||||
@click="handleSign"
|
||||
>去签协议</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="24">
|
||||
<el-col :span="16">
|
||||
<el-form-item label="领用数量" prop="num">
|
||||
<el-input
|
||||
v-model="maForm.num"
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="请输入领用数量"
|
||||
maxlength="10"
|
||||
style="width: 240px"
|
||||
@change="handleChange"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span style="display: inline-block; vertical-align: middle; line-height: 32px;">剩余需求量: {{numTemp}}</span>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="20">
|
||||
<el-form-item label="领料人" prop="leasePerson">
|
||||
<el-input
|
||||
v-model="maForm.leasePerson"
|
||||
placeholder="请输入领料人"
|
||||
maxlength="10"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="20">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input
|
||||
v-model="maForm.phone"
|
||||
placeholder="请输入联系电话"
|
||||
maxlength="11"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getApplyInfo,getTypeOptions,applySubmit
|
||||
} from "@/api/leasePublish/index";
|
||||
import { getListUnite } from '@/api/lease/apply'
|
||||
import { getToken } from "@/utils/auth";
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
name: "AddTools",
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
editTaskId: {
|
||||
type: [String, Number],
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
editId: {
|
||||
type: [String, Number],
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
taskId: "",
|
||||
// isEdit: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
loadingTwo: false,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
selectTreeProps: {
|
||||
children: "children",
|
||||
label: "name",
|
||||
// multiple: false,
|
||||
value: "id",
|
||||
// multiple: true,
|
||||
},
|
||||
uniteList: [],
|
||||
// 角色表格数据
|
||||
leaseList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
rowData: {},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
equipmentId: undefined,
|
||||
productionTime: "",
|
||||
},
|
||||
maForm: {
|
||||
unitId: undefined,
|
||||
num: "",
|
||||
leasePerson: "",
|
||||
phone: "",
|
||||
},
|
||||
//上层信息
|
||||
leaseApplyData: {},
|
||||
openView: false,
|
||||
// 表单参数
|
||||
form: {},
|
||||
//剩余需求量
|
||||
numTemp: 0,
|
||||
|
||||
items: [],
|
||||
|
||||
// 表单校验
|
||||
rules: {
|
||||
unitId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择领用单位',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
leasePerson: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入领料人',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '联系电话不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted() {
|
||||
if (this.isEdit) {
|
||||
console.log("isEdit", this.isEdit);
|
||||
this.taskId = this.editTaskId;
|
||||
this.id = this.editId;
|
||||
this.getTaskInfo();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 转换菜单数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children
|
||||
}
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children
|
||||
}
|
||||
},
|
||||
|
||||
/** 选择单位 */
|
||||
async getUnit(){
|
||||
getListUnite({ projectId: this.leaseApplyData.leaseProjectId }).then(response => {
|
||||
this.uniteList = response.data
|
||||
})
|
||||
},
|
||||
|
||||
//获取任务详情--- 编辑回显数据
|
||||
async getTaskInfo() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await getApplyInfo({ id: this.id });
|
||||
this.leaseList = response.data.leaseApplyDetailsList;
|
||||
this.leaseApplyData = response.data.leaseApplyInfo;
|
||||
|
||||
for (const item of this.leaseList) {
|
||||
this.$set(item, 'num', item.pendingNum);
|
||||
this.$set(item, 'newTypeId', item.typeId);
|
||||
|
||||
const optionsResponse = await getTypeOptions({ typeId: item.thirdTypeId });
|
||||
const typeOptions = optionsResponse.data.map((type) => ({
|
||||
value: type.typeId,
|
||||
label: type.typeName,
|
||||
}));
|
||||
this.$set(item, 'typeOptions', typeOptions);
|
||||
console.log("xxxxxxxxxxxxxxxxxxxxxx", item.typeOptions);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取任务信息失败:", error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.$forceUpdate(); // 强制刷新组件
|
||||
}
|
||||
},
|
||||
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.items = [];
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.items = selection.map((item) => ({'typeId': item.typeId,'parentId':item.parentId, 'num': item.num, 'newTypeId': item.newTypeId}));
|
||||
console.log("yyyyyyyyyyyyy", this.items)
|
||||
this.single = selection.length != 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
|
||||
/** 发料按钮操作 */
|
||||
async handleSend(row) {
|
||||
// this.numTemp = row.preNum-row.publishNum;
|
||||
if(this.ids.length == 0){
|
||||
this.$message.error('请选择要发布的数据')
|
||||
return
|
||||
}
|
||||
this.title = "新增发布";
|
||||
await this.getUnit();
|
||||
this.openView = true;
|
||||
|
||||
},
|
||||
|
||||
handleChange(row){
|
||||
if(row.num > row.pendingNum){
|
||||
this.$message.error('领料数量不能大于待发布数量')
|
||||
this.$set(row, 'num', row.pendingNum)
|
||||
|
||||
}
|
||||
if (row.num < 1) {
|
||||
this.$set(row, 'num', 1)
|
||||
}
|
||||
},
|
||||
|
||||
handleSign(){
|
||||
this.$router.push({ path: '/lease/protocol' })
|
||||
},
|
||||
|
||||
submitForm() {
|
||||
this.$refs.maForm.validate((valid) => {
|
||||
if (valid) {
|
||||
let leaseApplyInfo = {
|
||||
unitId: this.maForm.unitId,
|
||||
leasePerson: this.maForm.leasePerson,
|
||||
phone: this.maForm.phone,
|
||||
taskId:this.leaseApplyData.taskId,
|
||||
projectId: this.leaseApplyData.leaseProjectId,
|
||||
}
|
||||
applySubmit({
|
||||
leaseApplyDetailsList: this.items,
|
||||
leaseApplyInfo: leaseApplyInfo,
|
||||
}).then((response) => {
|
||||
if (response.code == 200) {
|
||||
this.$modal.msgSuccess("发布成功");
|
||||
// this.$tab.closeOpenPage({
|
||||
// path: '/store/newBuy/newDevicesList',
|
||||
// })
|
||||
|
||||
this.$emit("addToolsSuccess");
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.numTemp = 0;
|
||||
this.$refs.maForm.resetFields();
|
||||
this.openView = false;
|
||||
},
|
||||
|
||||
closeView() {
|
||||
this.numTemp = 0;
|
||||
this.$refs.maForm.resetFields();
|
||||
this.openView = false;
|
||||
},
|
||||
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
"/material/purchase_check_info/exportDetails",
|
||||
{ taskId: this.taskId },
|
||||
`新购到货详情_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down.is-reverse {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,306 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
|
||||
<el-form-item>
|
||||
<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 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 prop="taskStatus">
|
||||
<el-select
|
||||
v-model="queryParams.taskStatus"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option label="未完成" value="0"></el-option>
|
||||
<el-option label="已完成" value="1"></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-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出数据</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" :data="tableList" row-key="id" border>
|
||||
<!-- <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="code" width="140" :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="leaseUnit" width="120px" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="申请工程" align="center" prop="leaseProject" width="150px" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="领料物资类型" align="center" prop="maTypeNames" width="150px" :show-overflow-tooltip="true"/>
|
||||
<!-- <el-table-column label="领料人" align="center" prop="leasePerson" :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="phone" width="120px" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.phone? scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(-4) : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="taskStatusName" :show-overflow-tooltip="true" width="150">
|
||||
</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="success"
|
||||
v-if="scope.row.taskStatusName != '已完成'"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>发布</el-button>
|
||||
<el-button size="mini" type="danger"
|
||||
v-if="scope.row.taskStatusName != '已完成'"
|
||||
@click="handleStop(scope.row)"
|
||||
>终止</el-button>
|
||||
<el-button size="mini" type="warning"
|
||||
@click="handleLld(scope.row)"
|
||||
>业务联单</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"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getListLeaseApply,
|
||||
applySend,
|
||||
applySendAll,
|
||||
} from "@/api/lease/apply";
|
||||
import {
|
||||
getLeasePublishList,
|
||||
} from "@/api/leasePublish/index";
|
||||
import vueEasyPrint from "vue-easy-print";
|
||||
import printJS from 'print-js';
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
components: { vueEasyPrint },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 字典表格数据
|
||||
tableList: [],
|
||||
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
statusDataRange: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
time: null, //申请时间
|
||||
keyWord: "",
|
||||
taskStatus: null, //状态
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 多选框选中数据
|
||||
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,
|
||||
};
|
||||
getLeasePublishList(params).then((response) => {
|
||||
this.tableList = 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);
|
||||
},
|
||||
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
taskId: "",
|
||||
remark: "",
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
"/material/lease_apply_info/export",
|
||||
{ ...this.queryParams },
|
||||
`领料申请_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
|
||||
// 终止按钮
|
||||
handleStop(row) {
|
||||
const param = { id: row.id, taskId: row.taskId };
|
||||
this.$modal
|
||||
.confirm("是否确认终止所选择的数据项？")
|
||||
.then(function () {
|
||||
// return applySend(param);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("终止成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
//发布按钮
|
||||
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();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,376 @@
|
|||
<template>
|
||||
<!-- 新增工机具 -->
|
||||
<div>
|
||||
<div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap;margin-left: 10px;" >
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>领用单位：</span>
|
||||
{{ leaseApplyData.leaseUnit }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>领用工程：</span>
|
||||
{{ leaseApplyData.leaseProject }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>联系人：</span>
|
||||
{{ leaseApplyData.leasePerson }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>联系电话：</span>
|
||||
{{ leaseApplyData.phone }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info" style="margin-top: 10px;margin-bottom:10px; display: flex; flex-wrap: wrap;margin-left: 10px" >
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>供货时间：</span>
|
||||
{{ leaseApplyData.supplierTime }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>供货地点：</span>
|
||||
{{ leaseApplyData.supplierPlace }}
|
||||
</div>
|
||||
<div class="item" style="width: 25%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>业务单号：</span>
|
||||
{{ leaseApplyData.code }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-if="isEdit">导出</el-button>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="leaseList"
|
||||
|
||||
>
|
||||
<el-table-column align="center" label="序号" type="index" width="55" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="类型名称"
|
||||
prop="maTypeName"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="规格型号"
|
||||
prop="typeName"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column align="center" label="计量单位" prop="unitName" />
|
||||
<el-table-column align="center" label="需求数量" prop="preNum" />
|
||||
<el-table-column align="center" label="当前库存" prop="storageNum" />
|
||||
<el-table-column align="center" label="已发布数量" prop="publishNum" :show-overflow-tooltip="true"/>
|
||||
<el-table-column align="center" label="已供应数量" prop="outNum" :show-overflow-tooltip="true"/>
|
||||
<el-table-column align="center" label="待发布数量" prop="pendingNum" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span :style="{ color: scope.row.pendingNum!== 0? 'red' : 'green' }">
|
||||
{{ scope.row.pendingNum }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope" >
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="handleSend(scope.row)"
|
||||
> 查看</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
|
||||
<!-- 发料弹窗-->
|
||||
<!-- <el-dialog
|
||||
:title="title"
|
||||
:visible.sync="openView"
|
||||
width="600px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="maForm" :model="maForm" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="16">
|
||||
<el-form-item label="领用单位" prop="unitId">
|
||||
<treeselect
|
||||
v-model="maForm.unitId"
|
||||
:options="uniteList"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
style="width: 240px"
|
||||
:disable-branch-nodes="true"
|
||||
noChildrenText="没有数据了"
|
||||
noOptionsText="没有数据"
|
||||
noResultsText="没有搜索结果"
|
||||
placeholder="请选择领用单位"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button
|
||||
type="success"
|
||||
@click="handleSign"
|
||||
>去签协议</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="16">
|
||||
<el-form-item label="领用数量" prop="num">
|
||||
<el-input
|
||||
v-model="maForm.num"
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="请输入领用数量"
|
||||
maxlength="10"
|
||||
style="width: 240px"
|
||||
@change="handleChange"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span style="display: inline-block; vertical-align: middle; line-height: 32px;">剩余需求量: {{numTemp}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="20">
|
||||
<el-form-item label="领料人" prop="leasePerson">
|
||||
<el-input
|
||||
v-model="maForm.leasePerson"
|
||||
placeholder="请输入领料人"
|
||||
maxlength="10"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="20">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input
|
||||
v-model="maForm.phone"
|
||||
placeholder="请输入联系电话"
|
||||
maxlength="11"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer" style="text-align: right;">
|
||||
|
||||
<el-button @click="cancel" >取 消</el-button>
|
||||
</div>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getApplyInfo,
|
||||
} from "@/api/leasePublish/index";
|
||||
import { getListUnite } from '@/api/lease/apply'
|
||||
import { getToken } from "@/utils/auth";
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
name: "QueryTools",
|
||||
components: { Treeselect },
|
||||
|
||||
props: {
|
||||
isView: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
queryTaskId: {
|
||||
type: [String, Number],
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
taskId: "",
|
||||
// isEdit: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
uniteList: [],
|
||||
// 角色表格数据
|
||||
leaseList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
rowData: {},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
equipmentId: undefined,
|
||||
productionTime: "",
|
||||
},
|
||||
maForm: {
|
||||
unitId: undefined,
|
||||
projectId: undefined,
|
||||
arrivalTime: "",
|
||||
purchaser: "",
|
||||
remark: "",
|
||||
purchaseNumber: "",
|
||||
bmFileInfos: [],
|
||||
},
|
||||
openView: false,
|
||||
// 表单参数
|
||||
form: {},
|
||||
//剩余需求量
|
||||
numTemp: 0,
|
||||
leaseApplyData: {}, // 申请详情数据
|
||||
// 表单校验
|
||||
rules: {
|
||||
unitId: [
|
||||
{
|
||||
required: false,
|
||||
message: '请选择领用单位',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
num: [
|
||||
{
|
||||
required: false,
|
||||
message: '请输入领料数量',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
leasonPerson: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入领料人',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{ required: false, message: '联系电话不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted() {
|
||||
// this.getUnit();
|
||||
console.log("isView", this.isView);
|
||||
this.taskId = this.queryTaskId;
|
||||
this.id = this.queryId;
|
||||
this.getTaskInfo();
|
||||
|
||||
},
|
||||
methods: {
|
||||
/** 转换菜单数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children
|
||||
}
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children
|
||||
}
|
||||
},
|
||||
|
||||
// /** 选择单位 */
|
||||
// getUnit(){
|
||||
// getListUnite({ projectId: null }).then(response => {
|
||||
// this.uniteList = response.data
|
||||
// })
|
||||
// },
|
||||
|
||||
async getTaskInfo() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await getApplyInfo({ id: this.id });
|
||||
this.leaseList = response.data.leaseApplyDetailsList;
|
||||
this.leaseApplyData = response.data.leaseApplyInfo;
|
||||
|
||||
} catch (error) {
|
||||
console.error("获取任务信息失败:", error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
// this.$forceUpdate(); // 强制刷新组件
|
||||
}
|
||||
},
|
||||
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.roleId);
|
||||
this.single = selection.length != 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
"/material/purchase_check_info/exportDetails",
|
||||
{ taskId: this.taskId },
|
||||
`新购到货详情_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down.is-reverse {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<!-- 新购工机具管理 -->
|
||||
<div class="app-container">
|
||||
<PageHeaderApply
|
||||
v-if="isShowComponent != 'Home'"
|
||||
:pageContent="pageContent"
|
||||
@goBack="goBack"
|
||||
/>
|
||||
<component
|
||||
:is="isShowComponent"
|
||||
:isEdit="isEdit"
|
||||
:editTaskId="editTaskId"
|
||||
:editId="editId"
|
||||
:queryTaskId="queryTaskId"
|
||||
:queryId="queryId"
|
||||
:isView="isView"
|
||||
:codingTaskId="codingTaskId"
|
||||
@addTools="addTools"
|
||||
@editTools="editTools"
|
||||
@addToolsSuccess="addToolsSuccess"
|
||||
@queryTools="queryTools"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeaderApply from "@/components/pageHeaderApply";
|
||||
import Home from "./component/homeApply.vue"; // 主列表
|
||||
import AddTools from "./component/addToolsApply.vue"; // 发布
|
||||
import QueryTools from "./component/queryToolsApply.vue"; // 查询机具
|
||||
export default {
|
||||
components: {
|
||||
Home,
|
||||
PageHeaderApply,
|
||||
AddTools,
|
||||
QueryTools,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowComponent: "Home",
|
||||
pageContent: "领用申请发布",
|
||||
isEdit: false,
|
||||
editTaskId: "",
|
||||
editId: "",
|
||||
queryId: "",
|
||||
queryTaskId: "",
|
||||
isView: false,
|
||||
codingTaskId: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/* 发布 */
|
||||
addTools() {
|
||||
this.isEdit = false;
|
||||
this.editTaskId = "";
|
||||
this.queryTaskId = "";
|
||||
this.pageContent = "领用申请发布";
|
||||
this.isShowComponent = "AddTools";
|
||||
},
|
||||
/* 新增成功 */
|
||||
addToolsSuccess() {
|
||||
this.isShowComponent = "Home";
|
||||
},
|
||||
/* 编辑工机具 */
|
||||
editTools(taskId, id) {
|
||||
this.isEdit = true;
|
||||
this.pageContent = "领料申请发布";
|
||||
this.editTaskId = taskId;
|
||||
this.editId = id;
|
||||
this.isShowComponent = "AddTools";
|
||||
},
|
||||
/* 查询工机具 */
|
||||
queryTools(taskId, id) {
|
||||
this.isView = true;
|
||||
this.pageContent = "详情信息";
|
||||
this.queryTaskId = taskId;
|
||||
this.queryId = id;
|
||||
this.isShowComponent = "QueryTools";
|
||||
},
|
||||
/* 返回按钮 */
|
||||
goBack() {
|
||||
this.isShowComponent = "Home";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,660 @@
|
|||
<template>
|
||||
<div class="app-container" id="">
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
|
||||
<el-form-item prop="maCode">
|
||||
<el-input
|
||||
v-model="queryParams.maCode"
|
||||
placeholder="请输入设备编号"
|
||||
clearable :maxlength="20"
|
||||
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item >
|
||||
<el-select v-model="queryParams.maCodeTwo" placeholder="请选择相关联编号" clearable filterable @change="getList">
|
||||
<el-option v-for="item in optionList" :key="item.label" :label="item.label" :value="item.label"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item tyle="display: flex; align-items: center;">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="small"
|
||||
@click="handleQuery"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-refresh"
|
||||
size="small"
|
||||
@click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<el-card style="width: 600px; height: 300px; border: 6px solid green; position: relative;" v-if="isJj!=null && isJj==0">
|
||||
<div style="height: 280px; padding: 0 0px">
|
||||
<div
|
||||
class="title"
|
||||
style="text-align: center; font-weight: 450; font-size: 18px; color: #4dad7e"
|
||||
>
|
||||
检 验 合 格 证
|
||||
</div>
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 10px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">名称：</span>
|
||||
<span style="margin-left: 80px;">{{this.tagInfo.materialName}}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">检验结论</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">型号：</span>
|
||||
<span style="margin-left: 80px;">{{this.tagInfo.materialModel}}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<span style="color: #ef3e3e;margin-right: 20px;">{{this.tagInfo.inspectStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">编号：</span>
|
||||
<span style="margin-left: 80px;">{{this.tagInfo.maCode}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">本次检验日期：</span>
|
||||
<span style="margin-left: 80px;">{{this.tagInfo.thisCheckTime}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">下次检验日期：</span>
|
||||
<span style="margin-left: 80px;">{{this.tagInfo.nextCheckTime}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">检修员：</span>
|
||||
<span style="margin-left: 80px;">{{this.tagInfo.inspectMan}}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">检验员：</span>
|
||||
<span style="margin-left: 80px;margin-right: 20px;">{{this.tagInfo.checkMan}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">联系电话：</span>
|
||||
<span style="margin-left: 80px;">{{this.tagInfo.phone}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span style="color: #4dad7e">出库检验报告：</span>
|
||||
<span style="margin-left: 80px; text-decoration: underline; cursor: pointer;color: #4dad7e" @click="handleReportClick">
|
||||
{{"检测报告"}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<canvas id="canvas" width="210" height="210" style="position: absolute; top: 50%; left: 8%; transform: translate(0, -50%); z-index: 9999;"></canvas>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<el-card style="width: 600px; height: 300px; border: 6px solid #0055aa; position: relative;" v-if="isJj!=null && isJj==1">
|
||||
<div style="height: 280px; padding: 0 0px">
|
||||
<div
|
||||
class="title"
|
||||
style="text-align: center; font-weight: 450; font-size: 18px; "
|
||||
>
|
||||
安徽顺凯有限公司
|
||||
</div>
|
||||
<div
|
||||
class="title"
|
||||
style="text-align: center; font-weight: 450; font-size: 18px; "
|
||||
>
|
||||
合格证
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span >试样名称：</span>
|
||||
<span style="margin-left: 80px;">{{"攀登自锁器"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span >规格型号：</span>
|
||||
<span style="margin-left: 80px;">{{"1.5T"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span >编号：</span>
|
||||
<span style="margin-left: 80px;">{{"W204-20648"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span >本次检验日期：</span>
|
||||
<span style="margin-left: 80px;">{{"2024-8-02"}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span >下次检验日期：</span>
|
||||
<span style="margin-left: 80px;">{{"2025-7-02"}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span >试验人：</span>
|
||||
<span style="margin-left: 80px;">{{"张三"}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span >检测结果：</span>
|
||||
<span style="margin-left: 80px;">{{"合格"}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 1px; display: flex; flex-wrap: wrap"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1px;
|
||||
font-size: 18px;
|
||||
display: flex; /* 添加 flex 布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
"
|
||||
>
|
||||
<span >检测报告：</span>
|
||||
<span style="margin-left: 80px; text-decoration: underline; cursor: pointer;color: #0055aa" @click="handleReportClick">
|
||||
{{"检测报告"}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<canvas id="canvasTwo" width="210" height="210" style="position: absolute; top: 50%; left: 8%; transform: translate(0, -50%); z-index: 9999;"></canvas>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getListTag,getSelectionList,
|
||||
} from '@/api/stquery/stquery';
|
||||
import {downloadFile, downloadFileData} from '@/utils/download'
|
||||
export default {
|
||||
name: '',
|
||||
dicts: [],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
maCode: null,
|
||||
maCodeTwo: null,
|
||||
},
|
||||
isJj:null, //判断是什么类型
|
||||
tagInfo:{
|
||||
isJj:null,
|
||||
maCode:null,
|
||||
materialName:null,
|
||||
materialModel:null,
|
||||
inspectStatus:null,
|
||||
thisCheckTime:null,
|
||||
nextCheckTime:null,
|
||||
inspectMan:null,
|
||||
checkMan:null,
|
||||
phone:null,
|
||||
},
|
||||
optionList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.getList();
|
||||
},
|
||||
methods: {
|
||||
|
||||
//获取下拉列表
|
||||
async getSelectionList(){
|
||||
await getSelectionList({'maCode':this.queryParams.maCode}).then((response) => {
|
||||
this.optionList = response.data.map((type) => ({
|
||||
value: type.maId,
|
||||
label: type.maCode,
|
||||
}));
|
||||
console.log("xxxxxxxxxxxxxxxxxxxxxx",this.optionList)
|
||||
});
|
||||
},
|
||||
|
||||
// 获取列表
|
||||
async getList() {
|
||||
await getListTag({'maCode':this.queryParams.maCodeTwo}).then((response) => {
|
||||
if(response.data &&response.data.length!=0){
|
||||
this.tagInfo = response.data[0]
|
||||
}
|
||||
});
|
||||
this.isJj = 0;
|
||||
this.$nextTick(() => {
|
||||
let canvas = null
|
||||
if(this.isJj==null){
|
||||
canvas =null
|
||||
}else{
|
||||
canvas = this.isJj === 0 ? 'canvas' : 'canvasTwo';
|
||||
}
|
||||
|
||||
console.log("xxxxxxxxx",canvas)
|
||||
if (canvas!=null && this.isJj==0) {
|
||||
this.chapter('机具检验专用章', '安徽送边电工程有限公司机具(物流)分公司', canvas);
|
||||
}
|
||||
if (canvas!=null && this.isJj==1) {
|
||||
this.chapter('检验专用章', '安徽顺凯检测有限公司', canvas);
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
// this.getList({'maCode':this.queryParams.maCode})
|
||||
this.getSelectionList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.isJj = null;
|
||||
this.queryParams.maCode=null
|
||||
this.queryParams.maCodeTwo=null
|
||||
this.resetForm('queryForm')
|
||||
this.optionList = []
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
handleReportClick(){
|
||||
if(this.tagInfo){
|
||||
downloadFileData({fileName: "xsdada", fileUrl: "http://192.168.0.244:18583/statics/2025/03/05/清新互联智能事件格式_2021(1)_20250305153249A001.pdf"})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
chapter(text, companyName,canvasName) {
|
||||
let canvas = document.getElementById(canvasName);
|
||||
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 = 5;
|
||||
context.strokeStyle = "#f00";
|
||||
context.beginPath();
|
||||
context.arc(width, height, 100, 0, Math.PI * 2); //宽、高、半径
|
||||
context.stroke();
|
||||
|
||||
//画五角星
|
||||
this.create5star(context, width, height, 30, "#f00", 0);
|
||||
|
||||
// 绘制印章名称
|
||||
context.font = "100 18px 宋体";
|
||||
context.textBaseline = "middle"; //设置文本的垂直对齐方式
|
||||
context.textAlign = "center"; //设置文本的水平对对齐方式
|
||||
context.lineWidth = 1;
|
||||
context.strokeStyle = "#ff2f2f";
|
||||
context.strokeText(text, width, height + 70);
|
||||
|
||||
// 绘制印章单位
|
||||
context.translate(width, height); // 平移到此位置,
|
||||
context.font = "100 18px 宋体";
|
||||
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(85, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
|
||||
context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
|
||||
context.strokeStyle = "#ff5050"; // 设置印章单位字体颜色为较浅的红色
|
||||
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();
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.el-table .fixed-width .el-button--mini {
|
||||
width: 60px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.clickText {
|
||||
color: #02a7f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
// ::v-deep.el-input--small .el-input__inner {
|
||||
// height: 40px;
|
||||
// line-height: 32px;
|
||||
// }
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue