SafetyAlertSystem-ui/src/views/base/crew/index.vue

175 lines
4.3 KiB
Vue

<template>
<!-- 工程管理页面 -->
<div class="app-container">
<!-- 表格 -->
<TableModel
:formLabel="formLabel"
:columnsList="columnsList"
:request-api="queryCrewListApi"
ref="tableRef"
@transIdList="getIdList"
>
<template slot="btn" slot-scope="{ queryParams }">
<el-button type="primary" @click="handleAddData()" icon="el-icon-plus" size="mini"
>新增班组</el-button
>
<el-button
@click="handleExportData(
exportList,
'base/tbTeam/export',
'班组清单',
queryParams
)"
icon="el-icon-upload2"
size="mini"
>导出数据</el-button
>
</template>
<template slot="handle" slot-scope="{ data }">
<el-button
type="primary"
size="mini"
@click="handleEditData(data)"
v-if="data.teamStatus === '正常'"
>编辑</el-button
>
<el-button
type="danger"
size="mini"
@click="handleDeleteData(data.id, deleteCrewApi)"
v-if="data.teamStatus === '正常' && data.peopleCount === 1"
>解散</el-button
>
<!-- <span v-else>-</span>-->
</template>
<template slot="relName" slot-scope="{ data }">
{{ data.relName.split('/')[0] }}/{{ phoneCrypto(data.relName.split('/')[1]) }}
</template>
<template slot="peopleCount" slot-scope="{ data }">
<span
:class="[{ peopleCount: data.teamStatus === '正常' }]"
@click="handleCrew(data)"
>
{{ data.peopleCount }}
</span>
</template>
<template slot="teamStatus" slot-scope="{ data }">
<span
v-if="data.teamStatus === '正常'"
style="color: #11AB21;"
>{{ data.teamStatus }}</span>
<span
v-else
style="color: #FF0000"
>{{ data.teamStatus }}</span>
</template>
</TableModel>
<!-- 新增以及修改时的弹框 -->
<DialogModel
:dialogConfig="dialogConfig"
@closeDialogOuter="closeDialogOuter"
>
<template slot="outerContent">
<!-- 新增以及修改数据的表单组件 -->
<FormCrew
:crew-params="editParams"
@closeDialog="closeDialog"
/>
</template>
</DialogModel>
<DialogModel
:dialogConfig="dialogConfigCrewTab"
@closeDialogOuter="closeDialogCrewTabOuter"
>
<template slot="outerContent">
<!-- 新增以及修改数据的表单组件 -->
<TableCrew
:table-crew-params="tableCrewData"
/>
</template>
</DialogModel>
</div>
</template>
<script>
import { formLabel, columnsList, dialogConfig } from './config'
import { dialogConfigCrewTab } from './table-crew'
import { commonMixin } from '../mixins/common'
import {
queryCrewListApi,
deleteCrewApi
} from '@/api/base/crew'
import FormCrew from './components/form-crew.vue'
import TableCrew from './components/table-crew.vue'
export default {
name: 'crew',
methods: {
queryCrewListApi,
deleteCrewApi,
getIdList(idList) {
this.exportList = []
idList.forEach(item => {
this.exportList.push(item.id)
})
},
closeDialogCrewTabOuter() {
this.dialogConfigCrewTab.outerVisible = false
this.$refs.tableRef.getTableList()
},
handleCrew(v) {
if(v.teamStatus === '正常') {
this.tableCrewData = v
this.dialogConfigCrewTab.outerVisible = true
}
}
},
mixins: [commonMixin],
components: {
FormCrew,
TableCrew
},
created() {
},
data() {
return {
// 搜索区表单配置项
formLabel,
// 表格导出id列表
exportList: [],
// 列表区配置项
columnsList,
// 弹框区配置项
dialogConfig,
dialogConfigCrewTab,
// 新建时弹框标题
addDialogTitle: '新增班组',
// 修改时弹框标题
editDialogTitle: '修改班组',
tableCrewData: undefined,
}
},
}
</script>
<style lang="scss" scoped>
.peopleCount{
cursor: pointer;
color: #11AB21;
font-weight: bold;
}
.peopleCount:hover{
border-bottom: 2px solid #11AB21;
}
</style>