search_tools_web/src/views/sub-manage/sub-person-manage/index.vue

233 lines
8.3 KiB
Vue

<template>
<!-- 公司业绩管理 -->
<div class="app-container">
<el-form :model="queryParams" ref="queryParamsRef" label-width="0px" class="ms-content">
<el-row :gutter="20">
<el-col :span="5">
<el-form-item prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入姓名" clearable> </el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item prop="title">
<el-input v-model="queryParams.title" placeholder="请输入职称" clearable> </el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item prop="diploma">
<el-input v-model="queryParams.diploma" placeholder="请输入证书" clearable> </el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button type="primary" @click="getSubPersonManageList">查询</el-button>
<el-button @click="resetQueryParams">重置</el-button>
<el-button
type="primary"
@click="onHandleAddOrEdit(null, 1)"
v-hasPermi="['sub:person:manage:add']"
>
新增人员
</el-button>
<el-button @click="handleExport" v-hasPermi="['sub:person:manage:export']">导出数据</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table :data="tableList" stripe style="width: 100%">
<el-table-column label="序号" width="55" type="index" />
<el-table-column
:key="index"
align="center"
:prop="item.prop"
:label="item.label"
show-overflow-tooltip
v-for="(item, index) in tableColumn"
/>
<el-table-column label="操作" width="200" align="center">
<template #default="{ row }">
<el-button
style="color: #67c23a"
icon="el-icon-view"
type="text"
size="mini"
@click="onHandleAddOrEdit(row, 2)"
>
详情
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-edit"
style="color: #409eff"
@click="onHandleAddOrEdit(row, 3)"
v-hasPermi="['sub:person:manage:edit']"
>
编辑
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-delete"
style="color: #f56c6c"
@click="onHandleDelete(row)"
v-hasPermi="['sub:person:manage:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getSubPersonManageList"
/>
<DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
<template slot="outerContent">
<AddAndEditForm
:formType="formType"
ref="addAndEditFormRef"
:editRow="editRow"
@closeDialogOuter="closeDialogOuter"
/>
</template>
</DialogModel>
</div>
</template>
<script>
import DialogModel from '@/components/DialogModel/index'
import AddAndEditForm from './components/addAndEditForm.vue'
import { getSubPersonManageListAPI, deleteSubPersonManageAPI } from '@/api/sub-manage/sub-person-manage'
export default {
components: {
DialogModel,
AddAndEditForm,
},
data() {
return {
total: 0,
formType: 1, // 1新增 2详情 3编辑
editRow: {}, // 编辑行
dialogConfig: {
outerTitle: '新增',
innerTitle: false,
outerWidth: '80%',
outerVisible: false,
innerVisible: false,
},
queryParams: {
userName: '',
title: '',
diploma: '',
pageNum: 1,
pageSize: 10,
},
timeValue: [],
tableList: [],
tableColumn: [
{ label: '所属分包商', prop: 'subName' },
{ label: '姓名', prop: 'userName' },
{ label: '身份证号', prop: 'idCard' },
{ label: '职称', prop: 'title' },
{ label: '资格证书', prop: 'diploma' },
{ label: '证书编号', prop: 'diplomaNum' },
],
}
},
methods: {
// 关闭
closeDialogOuter(isRefresh = false) {
this.dialogConfig.outerVisible = false
if (isRefresh) {
this.getSubPersonManageList()
} else {
this.$refs.addAndEditFormRef.deleteFileListFun()
}
},
// 删除
onHandleDelete(row) {
this.$modal
.confirm('确定删除该人员吗?')
.then(async () => {
const res = await deleteSubPersonManageAPI({ id: row.id })
if (res.code === 200) {
this.$modal.msgSuccess('删除成功')
this.getSubPersonManageList()
}
})
.catch(() => {})
},
// 新增或编辑
onHandleAddOrEdit(row, type) {
this.formType = type
if (type === 1) {
this.dialogConfig.outerTitle = '新增人员'
this.editRow = {}
} else if (type === 3) {
this.dialogConfig.outerTitle = '编辑人员'
} else if (type === 2) {
this.dialogConfig.outerTitle = '人员详情'
}
if (type === 2 || type === 3) {
const {
userName, // 姓名
idCard, // 身份证号码
subId, // 所属分包商
diploma, // 资格证书
diplomaNum, // 证书编号
title, // 职称
id,
tbFileSourceVoList,
} = row
Object.assign(this.editRow, {
userName, // 姓名
idCard, // 身份证号码
subId, // 所属分包商
diploma, // 资格证书
diplomaNum, // 证书编号
title, // 职称
id,
tbFileSourceVoList,
})
}
this.dialogConfig.outerVisible = true
},
// 获取列表
async getSubPersonManageList() {
const res = await getSubPersonManageListAPI(this.queryParams)
this.tableList = res.rows
this.total = res.total
},
// 重置
resetQueryParams() {
this.$refs.queryParamsRef.resetFields()
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.getSubPersonManageList()
},
// 导出
handleExport() {
this.download(
'/tbSubPeople/tbSubPeopleExport',
{
...this.queryParams,
},
`分包人员管理_${new Date().getTime()}.xlsx`,
)
},
},
created() {
this.getSubPersonManageList()
},
}
</script>