312 lines
11 KiB
Vue
312 lines
11 KiB
Vue
<template>
|
|
<div class="JNPF-common-layout equipment_data">
|
|
<div class="JNPF-common-layout-center">
|
|
<el-row class="JNPF-common-search-box" :gutter="14">
|
|
<el-form @submit.native.prevent>
|
|
<el-col :span="6">
|
|
<el-form-item label="设备编码">
|
|
<el-input v-model="query.eqCode" placeholder="请输入设备编码" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="设备名称">
|
|
<el-input v-model="query.eqName" placeholder="请输入设备名称" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="设备类型">
|
|
<JnpfSelect v-model="query.eqType" placeholder="请选择设备类型" :options="eqTypeOptions" :props="eqTypeProps" clearable></JnpfSelect>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="启用状态">
|
|
<JnpfSelect v-model="query.enabledStatus" placeholder="请选择" clearable :options="enabledStatusOptions"
|
|
:props="enabledStatusProps">
|
|
</JnpfSelect>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="设备状态">
|
|
<JnpfSelect v-model="query.eqStatus" placeholder="请选择设备状态" clearable :options="eqStatusOptions"
|
|
:props="eqStatusProps">
|
|
</JnpfSelect>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="所属部门">
|
|
<el-select v-model="query.deptId" placeholder="请选择部门" clearable>
|
|
<el-option
|
|
v-for="item in deptList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="6">-->
|
|
<!-- <el-form-item label="所属产线">-->
|
|
<!-- <el-select v-model="query.lineId" placeholder="请选择产线" clearable>-->
|
|
<!-- <el-option-->
|
|
<!-- v-for="item in lineList"-->
|
|
<!-- :key="item.id"-->
|
|
<!-- :label="item.name"-->
|
|
<!-- :value="item.id">-->
|
|
<!-- </el-option>-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-col>-->
|
|
<el-col :span="6">
|
|
<el-form-item class="btn">
|
|
<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
|
|
<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-form>
|
|
</el-row>
|
|
<div class="JNPF-common-layout-main JNPF-flex-main">
|
|
<div class="JNPF-common-head">
|
|
<div>
|
|
<el-button type="primary" icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">新建</el-button>
|
|
<!-- <el-button type="danger" icon="el-icon-delete" :disabled="!multipleSelection.length" @click="batchDelete()">批量删除</el-button>-->
|
|
</div>
|
|
<div class="JNPF-common-head-right"></div>
|
|
</div>
|
|
<JNPF-table
|
|
v-loading="listLoading"
|
|
:data="list"
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="50" align="center"/>
|
|
<el-table-column prop="deptName" label="所属部门" align="center" min-width="100"/>
|
|
<el-table-column prop="eqCode" label="设备编码" align="center" min-width="120"/>
|
|
<el-table-column prop="eqName" label="设备名称" align="center" min-width="120"/>
|
|
<el-table-column prop="eqType" label="设备类型" align="center" min-width="100">
|
|
<template slot-scope="scope">
|
|
{{ getEqTypeLabel(scope.row.eqType) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="mode" label="型号" align="center" min-width="100"/>
|
|
<el-table-column prop="manufacturer" label="生产厂家" align="center" min-width="120"/>
|
|
<el-table-column prop="supplier" label="供应商" align="center" min-width="120">
|
|
<template slot-scope="scope">
|
|
{{ getSupplierName(scope.row.supplier) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="userName" label="责任人" align="center" min-width="80"/>
|
|
<el-table-column prop="lineName" label="所属产线" align="center" min-width="100"/>
|
|
<el-table-column prop="buyDate" label="购买日期" align="center" min-width="100" :formatter="jnpf.tableDateFormat1"/>
|
|
<el-table-column prop="eqStatus" label="设备状态" align="center" min-width="80">
|
|
<template slot-scope="scope">
|
|
{{ getEqStatusLabel(scope.row.eqStatus) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="enabledStatus" label="启用状态" align="center" min-width="80">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="scope.row.enabledStatus == 1 ? 'success' : 'info'" size="small">
|
|
{{ scope.row.enabledStatus == 1 ? '启用' : '未启用' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注" align="center" min-width="150" show-overflow-tooltip/>
|
|
<el-table-column prop="creatorTime" label="创建时间" align="center" min-width="150" :formatter="jnpf.tableDateFormat1"/>
|
|
<el-table-column label="操作" fixed="right" align="center" width="150">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="addOrUpdateHandle(scope.row)">编辑</el-button>
|
|
<el-button type="text" class="JNPF-table-delBtn" @click="handleDel(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</JNPF-table>
|
|
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
|
|
@pagination="initData"/>
|
|
</div>
|
|
</div>
|
|
<JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" :deptList="deptList" :lineList="lineList" :supplierList="supplierList"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {customerOptions, deleteEquipment, getEquipmentList, getLabel, getLineList, getSupplierList} from "./equipment";
|
|
import {getDataInterfaceRes} from "@/api/systemData/dataInterface";
|
|
import {mapGetters} from "vuex";
|
|
import JNPFForm from "./form";
|
|
import jnpf from "@/utils/jnpf";
|
|
|
|
export default {
|
|
name: "equipment",
|
|
components: {
|
|
JNPFForm,
|
|
},
|
|
data() {
|
|
return {
|
|
query: {
|
|
eqCode: undefined,
|
|
eqName: undefined,
|
|
eqType: undefined,
|
|
enabledStatus: undefined,
|
|
deptId: undefined,
|
|
lineId: undefined,
|
|
eqStatus: undefined,
|
|
},
|
|
list: [],
|
|
listLoading: false,
|
|
multipleSelection: [],
|
|
total: 0,
|
|
listQuery: {
|
|
currentPage: 1,
|
|
pageSize: 20,
|
|
sort: "",
|
|
sidx: "",
|
|
},
|
|
formVisible: false,
|
|
deptList: [],
|
|
lineList: [],
|
|
supplierList: [],
|
|
enabledStatusOptions: [
|
|
{fullName: "启用", id: 1},
|
|
{fullName: "未启用", id: 2},
|
|
],
|
|
enabledStatusProps: {label: "fullName", value: "id"},
|
|
eqTypeOptions: customerOptions.eqType || [],
|
|
eqTypeProps: {label: "fullName", value: "id"},
|
|
eqStatusOptions: customerOptions.eqStatus || [],
|
|
eqStatusProps: {label: "fullName", value: "id"},
|
|
};
|
|
},
|
|
computed: {
|
|
jnpf() {
|
|
return jnpf
|
|
},
|
|
...mapGetters(["userInfo"]),
|
|
menuId() {
|
|
return this.$route.meta.modelId || "";
|
|
},
|
|
},
|
|
created() {
|
|
this.initData();
|
|
this.getDeptList();
|
|
this.getLineList();
|
|
this.getSupplierList();
|
|
},
|
|
methods: {
|
|
initData() {
|
|
this.listLoading = true;
|
|
let _query = {
|
|
...this.listQuery,
|
|
...this.query,
|
|
dataType: 0,
|
|
};
|
|
Object.keys(_query).forEach(key => {
|
|
if (_query[key] === undefined || _query[key] === null || _query[key] === '') {
|
|
delete _query[key];
|
|
}
|
|
});
|
|
|
|
getEquipmentList(_query).then((res) => {
|
|
this.list = res.data.list;
|
|
this.total = res.data.pagination.total;
|
|
this.listLoading = false;
|
|
}).catch(() => {
|
|
this.listLoading = false;
|
|
});
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
getDeptList() {
|
|
getDataInterfaceRes('811583643129479301').then(res => {
|
|
this.deptList = res.data || [];
|
|
console.log(this.deptList);
|
|
}).catch(() => {
|
|
this.deptList = [];
|
|
});
|
|
},
|
|
getLineList() {
|
|
getLineList().then(res => {
|
|
this.lineList = res.data || [];
|
|
});
|
|
},
|
|
getSupplierList() {
|
|
getSupplierList().then(res => {
|
|
this.supplierList = res.data || [];
|
|
}).catch(() => {
|
|
this.supplierList = [];
|
|
});
|
|
},
|
|
addOrUpdateHandle(row) {
|
|
let id = row ? row.id : "";
|
|
this.formVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.JNPFForm.init(id);
|
|
});
|
|
},
|
|
handleDel(row) {
|
|
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
deleteEquipment(row.id).then(res => {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success',
|
|
duration: 1500,
|
|
onClose: () => {
|
|
this.initData();
|
|
}
|
|
});
|
|
});
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
batchDelete() {
|
|
this.$confirm('此操作将永久删除选中的 ' + this.multipleSelection.length + ' 条数据, 是否继续?', '提示', {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const ids = this.multipleSelection.map(item => item.id);
|
|
Promise.all(ids.map(id => deleteEquipment(id))).then(() => {
|
|
this.$message({
|
|
message: '删除成功',
|
|
type: 'success',
|
|
duration: 1500,
|
|
onClose: () => {
|
|
this.initData();
|
|
}
|
|
});
|
|
});
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
search() {
|
|
this.listQuery.currentPage = 1;
|
|
this.listQuery.pageSize = 20;
|
|
this.initData();
|
|
},
|
|
refresh(isRefresh) {
|
|
this.formVisible = false;
|
|
if (isRefresh) this.search();
|
|
},
|
|
reset() {
|
|
this.query = {
|
|
eqCode: undefined,
|
|
eqName: undefined,
|
|
eqType: undefined,
|
|
eqStatus: undefined,
|
|
enabledStatus: undefined,
|
|
deptId: undefined,
|
|
lineId: undefined,
|
|
};
|
|
this.search();
|
|
},
|
|
getEqTypeLabel(value) {
|
|
return getLabel('eqType', value);
|
|
},
|
|
getEqStatusLabel(value) {
|
|
return getLabel('eqStatus', value);
|
|
},
|
|
getSupplierName(supplierId) {
|
|
if (!supplierId) return '-';
|
|
const supplier = this.supplierList.find(item => String(item.id) === String(supplierId));
|
|
return supplier ? supplier.supplierName : supplierId;
|
|
},
|
|
},
|
|
};
|
|
</script>
|