SafetyScreen-ui/src/components/home/teamDialog.vue

147 lines
4.2 KiB
Vue

<template>
<div>
<!-- 班组弹框 -->
<el-dialog
title=""
style="margin-top: 5vh"
:visible.sync="tableVisible"
width="80%"
append-to-body
:close-on-click-modal="false"
>
<!-- 表单 -->
<el-form inline :model="formData" class="demo-form-inline">
<el-form-item label="班组名称" prop="teamName" size="small">
<el-input
v-model="formData.teamName"
placeholder="请输入班组名称"
clearable
></el-input>
</el-form-item>
<el-form-item label="班组长" prop="masterName">
<el-input
v-model="formData.masterName"
placeholder="请输入班组长"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="handleQuery"
icon="el-icon-search"
>查询</el-button
>
</el-form-item>
</el-form>
<!-- 列表 -->
<el-table
:data="tableData"
style="width: 100%"
height="500"
border
stripe
>
<el-table-column
type="index"
label="序号"
width="80"
align="center"
:index="
indexContinuation(formData.pageNum, formData.pageSize)
"
></el-table-column>
<el-table-column
prop="teamName"
label="班组名称"
></el-table-column>
<el-table-column
prop="masterName"
label="班组长"
></el-table-column>
<el-table-column
prop="masterPhone"
label="班组长电话"
></el-table-column>
<el-table-column
prop="peopleCount"
label="班组人数"
></el-table-column>
</el-table>
<pagination
v-if="total > 0"
:total="total"
:page.sync="formData.pageNum"
:limit.sync="formData.pageSize"
@pagination="getTableList"
/>
</el-dialog>
</div>
</template>
<script>
import { getTeamDetails } from '@/api/home/home'
export default {
props: {
proId: {
type: Number,
default: undefined,
},
},
name: 'pieDialog',
data() {
return {
tableVisible: false,
formData: {
pageNum: 1,
pageSize: 10,
teamName: '',
masterName: '',
},
total: 0,
tableData: [],
// 岗位下拉
postTypeOptions: [],
}
},
created() {},
mounted() {},
watch: {},
methods: {
openDialog(proId) {
// 清空表单
this.formData = {
pageNum: 1,
pageSize: 10,
teamName: '',
postCode: '',
}
console.log('🚀 ~ openDialog ~ proId:', proId)
this.tableVisible = true
this.getTableList()
},
handleQuery() {
console.log('🚀 ~ handleQuery ~ ', this.formData)
this.getTableList()
},
// 获取表格数据
async getTableList() {
const params = {
...this.formData,
proId: this.proId,
}
console.log('🚀 ~ getTableList ~ ', params)
const res = await getTeamDetails(params)
this.tableData = res.rows
this.total = res.total
console.log('🚀 ~ 列表 ~ res:', res)
},
},
}
</script>
<style lang="scss" scoped></style>