You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
udiwms-vue-frame/src/views/inventory/DeptDeviceDetail.vue

550 lines
16 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<el-card class="el-card">
<el-form :model="filterQuery" class="query-form" size="mini" label-width="100px" v-show="showSearch">
<el-row>
<el-col :span="8">
<el-form-item class="query-form-item" label="部门:">
<el-select v-model="filterQuery.deptCode" placeholder="请选择部门" clearable="true"
@change="deptChange"
style="width: 90%"
>
<el-option
v-for="item in deptList"
:key="item.name"
:label="item.name"
:value="item.code">
<span style="float: left">{{ item.name }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="query-form-item" label="仓库:">
<el-select v-model="filterQuery.invCode" placeholder="请选择仓库" clearable="true"
style="width: 90%"
>
<el-option
v-for="item in invList"
:key="item.name"
:label="item.name"
:value="item.code">
<span style="float: left">{{ item.name }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="query-form-item" label="设备名称:">
<el-input v-model="filterQuery.deviceName" placeholder="请输入设备名称" style="width: 90%"
clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item class="query-form-item" label="资产编码:">
<el-input v-model="filterQuery.code" placeholder="请输入资产编码" style="width: 90%"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="query-form-item" label="批次号:">
<el-input v-model="filterQuery.batchNo" placeholder="请输入批次号" style="width: 90%"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="query-form-item" label="规格型号:">
<el-input v-model="filterQuery.ggxh" placeholder="请输入规格型号" style="width: 90%"
clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item class="query-form-item" label="设备状态:">
<el-select v-model="filterQuery.status"
style="width: 90%"
placeholder="请选择设备状态"
clearable
>
<el-option
v-for="item in statusMap"
:key="item.value"
:value="item.value"
:label="item.label"
>
{{ item.label }}
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="query-form-item" label="添加方式:">
<el-select v-model="filterQuery.addType"
style="width: 90%"
placeholder="请选择添加方式"
clearable
>
<el-option
v-for="item in addTypeMap"
:key="item.value"
:value="item.value"
:label="item.label"
>
{{ item.label }}
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="top-right-btn">
<el-button-group>
<el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
<el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
<el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-button type="primary" icon="el-icon-plus" @click="addDevice">添加设备</el-button>
</el-button-group>
</div>
<el-divider style="margin: 15px"></el-divider>
<el-table v-loading="loading" :data="list" style="width: 100%" highlight-current-row
@row-click="listClick" @current-change="handInvChange"
border>
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column label="部门" prop="deptName" width="180"></el-table-column>
<el-table-column label="仓库" prop="invName" width="180"></el-table-column>
<el-table-column label="设备名称" prop="deviceName" width="200"></el-table-column>
<el-table-column label="物资编码" prop="code" width="180"></el-table-column>
<el-table-column label="规格型号" prop="ggxh" width="200" show-overflow-tooltip></el-table-column>
<el-table-column label="批次号" prop="batchNo" width="150"></el-table-column>
<el-table-column label="生产日期" prop="productionDate" width="150"></el-table-column>
<el-table-column label="失效日期" prop="expireDate" width="120"></el-table-column>
<el-table-column label="状态" prop="status" width="150">
<template slot-scope="scope">
<el-tag>{{ status[scope.row.status] }}</el-tag>
</template>
</el-table-column>
<el-table-column label="批准文号" prop="zczbhhzbapzbh" show-overflow-tooltip width="200"></el-table-column>
<el-table-column label="生产厂家" prop="manufactory" show-overflow-tooltip width="200"></el-table-column>
<el-table-column label="计量单位" prop="measname" width="100"></el-table-column>
<el-table-column label="供应商" prop="supName"></el-table-column>
<el-table-column label="负责人" prop="managerName" show-overflow-tooltip width="200"></el-table-column>
<el-table-column label="操作" width="180" fixed="right">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native.stop="editDialog(scope.row)"
>编辑
</el-button
>
<el-button
type="text"
size="small"
@click.native.stop="deleteDevice(scope.row.id)"
>删除
</el-button
>
<el-button
type="text"
size="small"
@click.native.stop="inspectSet(scope.row.code)"
>巡检设置
</el-button
>
<el-button type="text" size="small" @click.native.stop="printOrder(scope.row)">打印</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:limit.sync="filterQuery.limit"
:page.sync="filterQuery.page"
@pagination="getList"
></pagination>
</el-card>
<el-tabs type="border-card" style="margin: 15px">
<el-tab-pane label="基本信息" >
</el-tab-pane>
<el-tab-pane label="设备资质" >
<checkResultPanel
:idQuery="filterQuery"
:rowData="selectedRowData"
></checkResultPanel>
</el-tab-pane>
<el-tab-pane label="技术资料" >
</el-tab-pane>
<el-tab-pane label="相关人员">
</el-tab-pane>
</el-tabs>
<el-dialog
:title="formMap[formName]"
:visible.sync="deviceDialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="60%"
v-if="deviceDialogVisible"
>
<deptDeviceModifyDialog
:formData="formData"
:closeDialog="closeDialog"
></deptDeviceModifyDialog>
</el-dialog>
<el-dialog
title="设备巡检设置"
:visible.sync="inspectSetVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="60%"
v-if="inspectSetVisible"
>
<inspectSetModifyDialog
:code="deviceCode"
:closeDialog="closeInspectSetDialog"
></inspectSetModifyDialog>
</el-dialog>
</div>
</template>
<script>
import {getInvListByUser} from "@/api/system/invWarehouse";
import {getDeptListByUser} from "@/api/auth/authDept";
import {getDeptDeviceList, deleteDeptDevice ,printOrder, verifyTemplateFile} from "@/api/inventory/deptDevice";
import deptDeviceModifyDialog from "@/views/inventory/deptDeviceModifyDialog.vue";
import inspectSetModifyDialog from "@/views/inventory/InspectSetModifyDialog.vue";
import checkResultPanel from "@/views/inventory/invDeviceEditDialog.vue";
export default {
name: "DeptDeviceDetail",
data() {
return {
selectedRowData: {},
filterQuery: {
deptCode: this.$store.getters.locDeptCode,
invCode: this.$store.getters.locInvCode,
deviceName: null,
code: null,
ggxh: null,
batchNo: null,
status: 1,
addType: 1,
page: 1,
limit: 20,
},
list: [],
total: 0,
deptList: [],
invList: [],
loading: false,
fromOptions: [],
formData: {
id: null,
deptCode: null,
invCode: null,
originCode: null,
code: null,
deviceName: null,
ggxh: null,
batchNo: null,
serialNo: null,
productionDate: null,
expireDate: null,
manufactory: null,
measname: null,
zczbhhzbapzbh: null,
addType: null,
supName: null,
manager: null,
remark: null
},
deviceDialogVisible: false,
showSearch: true,
statusMap: [
{
label: '正常',
value: 1
},
{
label: '报修',
value: 2
},
{
label: '养护中',
value: 3
},
{
label: '已养护',
value: 4
},
{
label: '已报废',
value: 5
}
],
status: {
1: "正常",
2: "报修",
3: "养护中",
4: "已养护",
5: "已报废"
},
addTypeMap: [
{
label: "领用添加",
value: 1
},
{
label: "手动添加",
value: 2
}
],
formMap: {
add: "添加设备",
edit: "编辑设备信息"
},
formName: "add",
inspectSetVisible: false,
deviceCode: null
};
},
methods: {
handInvChange(row) { //列表选中
this.invManage(row);
},
invManage(row) {
this.selectedRowData = {
deptCode: this.$store.getters.locDeptCode,
invCode: this.$store.getters.locInvCode,
deviceName: null,
code: null,
ggxh: null,
batchNo: null,
status: 1,
addType: 1,
page: 1
};
},
listClick(row) {
// this.selectedRowData = null
// // 处理行点击事件 异步操作nexgtTick是先让selectedRow更新完在做的执行操作
// this.$nextTick(res=>{
this.selectedRowData = row // 将选中的行数据保存到 selectedRow 变量中
//
// })
},
hideSearch() {
this.showSearch = !this.showSearch;
},
onReset() {
this.$router.push({
path: "",
});
this.filterQuery = {
deptCode: this.$store.getters.locDeptCode,
invCode: this.$store.getters.locInvCode,
deviceName: null,
code: null,
ggxh: null,
batchNo: null,
status: 1,
addType: 1,
page: 1,
limit: 20,
};
this.getDeptList();
},
onSubmit() {
this.filterQuery.page = 1;
this.getList();
},
getList() {
this.loading = true;
getDeptDeviceList(this.filterQuery).then((res) => {
this.loading = false;
if (res.code === 20000) {
this.list = res.data.list || [];
this.total = res.data.total || 0;
} else {
this.$message.error(res.message);
this.list = [];
this.total = 0;
}
}).catch((error) => {
this.loading = false;
this.$message.error(error.message);
this.list = [];
this.total = 0;
})
},
deptChange() {
this.filterQuery.invCode = null;
this.invList = [];
this.getInvList();
},
getDeptList() {
getDeptListByUser().then((res) => {
this.deptList = res.data || [];
this.getInvList();
this.getList();
});
},
invChange() {
this.getList();
},
getInvList() {
let params = {deptCode: this.filterQuery.deptCode};
getInvListByUser(params)
.then((response) => {
this.invList = response.data || [];
this.getList();
})
.catch(() => {
});
},
addDevice() {
this.formName = 'add';
this.deviceDialogVisible = true;
this.formData = {
id: null,
deptCode: this.$store.getters.locDeptCode,
invCode: null,
originCode: null,
code: null,
deviceName: null,
ggxh: null,
batchNo: null,
serialNo: null,
productionDate: null,
expireDate: null,
manufactory: null,
measname: null,
zczbhhzbapzbh: null,
addType: 2,
supName: null,
manager: null,
remark: null
};
},
deleteDevice(id) {
this.$confirm('此操作将从部门设备列表中删除此设备, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = {
id: id
};
deleteDeptDevice(params).then((res) => {
if (res.code === 20000) {
this.$message.success("删除成功");
this.getList();
} else {
this.$message.error(res.message);
}
})
}).catch((error) => {
this.$message.error(error.message);
});
},
editDialog(row) {
this.formName = 'edit';
this.deviceDialogVisible = true;
this.formData = {
id: row.id,
deptCode: row.deptCode,
invCode: row.invCode,
originCode: row.originCode,
code: row.code,
deviceName: row.deviceName,
ggxh: row.ggxh,
batchNo: row.batchNo,
serialNo: row.serialNo,
productionDate: row.productionDate,
expireDate: row.expireDate,
manufactory: row.manufactory,
measname: row.measname,
zczbhhzbapzbh: row.zczbhhzbapzbh,
addType: row.addType,
supName: row.supName,
manager: row.manager,
remark: row.remark
}
},
closeDialog() {
this.deviceDialogVisible = false;
this.getList();
},
inspectSet(code) {
this.inspectSetVisible = true;
this.deviceCode = code;
},
closeInspectSetDialog() {
this.inspectSetVisible = false;
},
printOrder(row) {
let query = {id: 5};
this.loading = true;
verifyTemplateFile(query).then((res) => {
if (res.code === 20000) {
let printParams = {
templateId: res.data,
id: row.id
};
printOrder(printParams).then((response) => {
//将pdf文件转换为url。
const binaryData = [];
binaryData.push(response);
//获取blob链接。
let url = window.URL.createObjectURL(
new Blob(binaryData, {type: "application/pdf"})
);
this.loading = false;
window.open(url);//打开新标签页预览pdf。
})
} else {
this.loading = false;
this.$message.error(res.message);
}
}).catch((error) => {
this.loading = false;
this.$message.error(error.message);
})
},
},
mounted() {
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
};
},
components: {
checkResultPanel,
deptDeviceModifyDialog,
inspectSetModifyDialog
},
created() {
this.getDeptList();
},
};
</script>
<style type="text/scss" lang="scss">
</style>