252 lines
9.5 KiB
Vue
252 lines
9.5 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-card>
|
|
<span>设备名称:</span>
|
|
<el-select v-model="equipmentNameValue" placeholder="设备名称" style="width:200px" size="small" clearable filterable>
|
|
<el-option
|
|
v-for="item in equipmentName"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
<span>操作者:</span>
|
|
<el-input v-model="operator" placeholder="操作者" size="small" clearable style="width:200px" @dblclick.native="getOperator();param = 0"/>
|
|
<el-button type="success" size="mini" icon="el-icon-search" style="margin-left:10px" @click="getTableData">查询</el-button>
|
|
<el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="handleAdd">增加</el-button>
|
|
</el-card>
|
|
|
|
<el-card>
|
|
<el-table v-loading="loading" :data="tableData" highlight-current-row border style="height: 500px">
|
|
<el-table-column label="设备名称" align="center" >
|
|
<template slot-scope="scope">
|
|
{{ scope.row.设备名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="班次" align="center" >
|
|
<template slot-scope="scope">
|
|
{{ scope.row.班次 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作者" align="center" >
|
|
<template slot-scope="scope">
|
|
{{ scope.row.操作者 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" >
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" size="mini" icon="el-icon-edit" style="margin-left:10px" @click="handleEdit(scope.row)">编辑</el-button>
|
|
<el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="block" style="margin-top: 10px;">
|
|
<el-pagination
|
|
:current-page="pageCurrent"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="pageSize"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"/>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-dialog :visible.sync="dialogFormVisible" title="选择人员" center style="min-height: 300px">
|
|
<span>部门名称:</span>
|
|
<el-select v-model="departmentValue" placeholder="部门名称" size="small" clearable style="width:180px" @change="getTablePeople">
|
|
<el-option
|
|
v-for="item in department"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
<el-table
|
|
:data="tablePeople"
|
|
style="width:100%;max-height: 300px;margin-top: 20px"
|
|
height="300"
|
|
highlight-current-row
|
|
@row-click="currentPeople">
|
|
<el-table-column align="center" label="考勤编号">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.考勤编号 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="姓名">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.姓名 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="性别">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.性别 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="工作岗位">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.岗位名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="title" :visible.sync="dialogFormVisible_form" center style="min-height: 300px" width="400px">
|
|
<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
|
|
<el-form-item label="设备名称" prop="设备名称">
|
|
<el-select v-model="form.设备流水号" placeholder="设备名称" style="width:200px" size="small" clearable filterable>
|
|
<el-option
|
|
v-for="item in equipmentName"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="班次" prop="班次" >
|
|
<el-select v-model="form.班次代码" placeholder="班次" style="width:200px" size="small" clearable filterable>
|
|
<el-option
|
|
v-for="item in staff"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="操作者" prop="操作者" >
|
|
<el-input v-model="form.操作者" placeholder="操作者" size="small" style="width:200px" clearable @dblclick.native="getOperator();param = 1"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="cancel">取消</el-button>
|
|
<el-button v-show="title === '增加'" type="primary" @click="submitAdd()">确定</el-button>
|
|
<el-button v-show="title === '编辑'" type="primary" @click="submitEdit()">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getEquipment, getDepartment, getTablePeople, getTableData, deleteTable, getStaff, addTable, editTable } from '@/api/BasicData/MaintenanceEquipmentPerson'
|
|
import { SectionToChinese } from '@/utils/tool'
|
|
export default {
|
|
data() {
|
|
return {
|
|
equipmentNameValue: '',
|
|
equipmentNameCheck: null,
|
|
equipmentName: [],
|
|
operator: '',
|
|
operatorNum: '',
|
|
operatorCheck: null,
|
|
dialogFormVisible: false,
|
|
tablePeople: [],
|
|
departmentValue: '',
|
|
department: [],
|
|
tableData: [],
|
|
pageCurrent: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
loading: false,
|
|
title: '',
|
|
dialogFormVisible_form: false,
|
|
param: null,
|
|
form: {
|
|
设备流水号: '',
|
|
班次代码: '',
|
|
操作者: '',
|
|
操作者编号: null
|
|
},
|
|
rules: {
|
|
设备流水号: [{ required: true, message: '请选择设备名称', trigger: 'blur' }],
|
|
操作者: [{ required: true, message: '请选择操作者', change: 'blur' }]
|
|
},
|
|
staff: [],
|
|
No: null
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData()
|
|
this.getTableData()
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
this.getSelect(getEquipment, ['设备名称', '设备流水号'], 'equipmentName', [0, this.equipmentNameValue]) // 获取设备名称
|
|
getStaff().then(res => { // 获取班次
|
|
res.data.map(row => {
|
|
this.staff.push({
|
|
label: `${SectionToChinese(row.班次代码)}班`,
|
|
value: row.班次代码
|
|
})
|
|
})
|
|
})
|
|
},
|
|
getOperator() {
|
|
this.dialogFormVisible = true
|
|
this.getSelect(getDepartment, ['部门', '考核部门编号'], 'department')
|
|
},
|
|
getTablePeople() {
|
|
this.getData(getTablePeople, 'tablePeople', this.departmentValue)
|
|
},
|
|
currentPeople(row) {
|
|
if (this.param === 0) {
|
|
this.operator = row.姓名
|
|
this.operatorNum = row.人员编号
|
|
} else if (this.param === 1) {
|
|
this.form.操作者 = row.姓名
|
|
this.form.操作者编号 = row.人员编号
|
|
} else {
|
|
console.log(`err`)
|
|
}
|
|
},
|
|
getTableData() {
|
|
console.log(typeof (this.equipmentName))
|
|
this.equipmentNameValue ? this.equipmentNameCheck = 1 : this.equipmentNameCheck = 0
|
|
this.operator ? this.operatorCheck = 1 : this.operatorCheck = 0
|
|
this.loading = true
|
|
this.getTable(getTableData, [this.equipmentNameCheck, this.equipmentNameValue, this.operatorCheck, this.operatorNum, this.pageCurrent, this.pageSize], ['tableData', 'total', 'loading'])
|
|
},
|
|
handleAdd() {
|
|
this.addForm('form', [this.dialogFormVisible_form = true, this.title = '增加'])
|
|
},
|
|
handleEdit(row) {
|
|
this.No = row.设备人员关系流水号
|
|
this.editForm(row, 'form', [this.dialogFormVisible_form = true, this.title = '编辑'])
|
|
console.log(this.form, 111)
|
|
},
|
|
submitAdd() {
|
|
for (let i = 0; i < this.equipmentName.length; i++) {
|
|
if (this.form.设备流水号 === this.equipmentName[i].value) {
|
|
this.form.设备名称 = this.equipmentName[i].label
|
|
break
|
|
}
|
|
}
|
|
this.addTable(addTable, [this.form.设备流水号, this.form.班次代码, this.form.操作者, this.form.操作者编号], 'form', function() { this.getTableData(); this.dialogFormVisible_form = false })
|
|
},
|
|
submitEdit() {
|
|
console.log(this.form, 222)
|
|
this.editTable(editTable, [this.form.设备流水号, this.form.班次代码, this.form.操作者, this.form.操作者编号, this.No], 'form', function() { this.getTableData(); this.dialogFormVisible_form = false })
|
|
},
|
|
cancel() {
|
|
this.dialogFormVisible_form = false
|
|
},
|
|
handleDelete(row) {
|
|
this.deleteRow(deleteTable, row.设备人员关系流水号, function() { this.getTableData() })
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
this.pageCurrent = 1
|
|
this.getTableData()
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.pageCurrent = val
|
|
this.getTableData()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
span{
|
|
margin: 20px;
|
|
}
|
|
</style>
|