<template>
|
<div>
|
<div class="search-background">
|
<span class="search-group">
|
<span style="width: 160px">日期：</span>
|
<el-date-picker v-model="searchForm.registerDate"
|
clearable
|
format="yyyy-MM-dd"
|
placeholder="选择日期"
|
size="small"
|
style="width: 100%"
|
type="date"
|
value-format="yyyy-MM-dd">
|
</el-date-picker>
|
<el-button size="medium" style="margin-left: 10px" @click="resetSearchForm">重 置</el-button>
|
<el-button size="medium" type="primary" @click="searchList">查 询</el-button>
|
</span>
|
<span class="search-group">
|
<el-button size="medium" @click="handleDown">导 出</el-button>
|
<el-button size="medium" type="primary" @click="openFormDia('add')">新 增</el-button>
|
</span>
|
</div>
|
<div class="table">
|
<ZTTable
|
:column="tableColumn"
|
:height="'calc(100vh - 20em)'"
|
:table-data="tableData"
|
:table-loading="tableLoading"
|
style="padding: 0 10px;margin-bottom: 16px">
|
</ZTTable>
|
<el-pagination :current-page="1" :page-size="page.size" :page-sizes="[10, 20, 30, 50, 100]"
|
:total="total" layout="->,total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange">
|
</el-pagination>
|
</div>
|
<personnel-management-dia v-if="threeWastesDia" ref="threeWastesDia" @closeThreeWastesDia="closeThreeWastesDia"></personnel-management-dia>
|
</div>
|
</template>
|
|
<script>
|
import ZTTable from '../../caorui/ZTTable/index.vue';
|
import PersonnelManagementDia from './Personnel-management-dia.vue';
|
import ThreeWastesDialog from './three-wastes-dialog.vue';
|
|
export default {
|
name: 'Personnel-management',
|
// import 引入的组件需要注入到对象中才能使用
|
components: { ThreeWastesDialog, PersonnelManagementDia, ZTTable },
|
data() {
|
// 这里存放数据
|
return {
|
searchForm: {
|
registerDate: '',
|
},
|
tableColumn: [
|
{
|
label: '日期',
|
prop: 'registerDate',
|
minWidth: '100'
|
},
|
{
|
label: '进入区域',
|
prop: 'area',
|
minWidth: '100'
|
},
|
{
|
label: '进入人员',
|
prop: 'personnel',
|
minWidth: '100'
|
},
|
{
|
label: '进入原因',
|
prop: 'reason',
|
minWidth: '100'
|
},
|
{
|
label: '陪同人员',
|
prop: 'accompanyingName',
|
minWidth: '100'
|
},
|
{
|
label: '批准人签名',
|
prop: 'approveName',
|
minWidth: '100'
|
},
|
{
|
label: '保密及其他情况',
|
prop: 'confidentiality',
|
minWidth: '100'
|
},
|
{
|
label: '备注',
|
prop: 'remark',
|
minWidth: '100'
|
},
|
{
|
dataType: 'action',
|
fixed: 'right',
|
minWidth: '220',
|
label: '操作',
|
operation: [
|
{
|
name: '编辑',
|
type: 'text',
|
clickFun: (row) => {
|
this.openFormDia('edit', row);
|
},
|
},
|
{
|
name: '删除',
|
type: 'text',
|
color: '#f56c6c',
|
clickFun: (row) => {
|
this.delPlan(row)
|
},
|
}
|
]
|
}
|
],
|
tableData: [],
|
tableLoading: false,
|
page: {
|
size: 20,
|
current: 1,
|
},
|
total: 0,
|
threeWastesDia: false
|
};
|
},
|
mounted() {
|
this.searchList()
|
},
|
// 方法集合
|
methods: {
|
// 查询列表
|
searchList () {
|
const entity = this.searchForm
|
const page = this.page
|
this.tableLoading = true
|
this.$axios.post(this.$api.foreignRegister.pageForeignRegister, {entity, page}, {
|
headers: {
|
"Content-Type": "application/json"
|
},
|
noQs: true
|
}).then(res => {
|
this.tableLoading = false
|
if (res.code === 201) return
|
this.tableData = res.data.records
|
this.total = res.data.total
|
}).catch(err => {
|
console.log('err---', err);
|
this.tableLoading = false
|
})
|
},
|
// 删除
|
delPlan (row) {
|
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.tableLoading = true
|
this.$axios.get(this.$api.foreignRegister.delForeignRegister + '?registerId=' + row.registerId).then(res => {
|
this.tableLoading = false
|
if (res.code === 201) return
|
this.$message.success('删除成功')
|
this.searchList()
|
}).catch(err => {
|
this.tableLoading = false
|
console.log('err---', err);
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
// 新增，编辑，批准弹框
|
openFormDia (type, row) {
|
this.threeWastesDia = true
|
this.$nextTick(() => {
|
this.$refs.threeWastesDia.openDia(type, row)
|
})
|
},
|
// 导出
|
handleDown (row) {
|
const entity = this.searchForm
|
this.$axios.post(this.$api.foreignRegister.exportForeignRegister,{entity},{
|
responseType: "blob",
|
headers: {
|
"Content-Type": "application/json"
|
},
|
noQs: true}).then(res => {
|
this.outLoading = false
|
const blob = new Blob([res],{ type: 'application/msword' });
|
//将Blob 对象转换成字符串
|
let reader = new FileReader();
|
reader.readAsText(blob, 'utf-8');
|
reader.onload = () => {
|
try {
|
let result = JSON.parse(reader.result);
|
if (result.message) {
|
this.$message.error(result.message);
|
} else {
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '外来人员登记' + '.docx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
} catch (err) {
|
console.log(err);
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '外来人员登记' + '.docx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
}
|
})
|
},
|
closeThreeWastesDia () {
|
this.threeWastesDia = false
|
this.searchList()
|
},
|
// 重置查询条件
|
resetSearchForm () {
|
this.searchForm.registerDate = '';
|
this.searchList()
|
},
|
// 分页
|
handleSizeChange(val) {
|
this.page.size = val;
|
this.searchList();
|
},
|
handleCurrentChange(val) {
|
this.page.current = val;
|
this.searchList();
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.search-background {
|
width: 100%;
|
height: 60px;
|
line-height: 60px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.search-group {
|
display: flex;
|
align-items: center;
|
margin: 0 20px;
|
}
|
</style>
|
