SafetyAlertSystem-ui/src/views/base/crew/components/table-crew.vue

<template>
    <!-- 工程管理 新增、编辑 表单组件 -->
    <div>
      <TableModel
        :formLabel="formLabelCrewTab"
        :columnsList="columnsListCrewTab"
        :request-api="queryCrewPersonApi"
        ref="tableRef"
        @transIdList="getIdList"
        :show-right-tools="false"
        :send-id="crewId"
        :show-sel="false"
      >
        <template slot="btn" slot-scope="{ queryParams }">
          <el-button type="primary" @click="handleAddMember()" icon="el-icon-plus" size="mini"
          >添加成员</el-button
          >
        </template>
        <template slot="handle" slot-scope="{ data }">
<!--          <el-button
            type="primary"
            size="mini"
            @click="handleEditData(data)"
          >编辑</el-button
          >-->
          <el-button
            type="danger"
            size="mini"
            @click="handleRemove(data.id)"
            v-if="data.relId !== data.id"
          >移出班组</el-button
          >
        </template>
        <template slot="sex" slot-scope="{ data }">
          {{ data.sex === 1 ? '男' : '女' }}
        </template>
        <template slot="idCard" slot-scope="{ data }">
          {{ idCardCrypto(data.idCard) || '-' }}
        </template>
        <template slot="relPhone" slot-scope="{ data }">
          {{ phoneCrypto(data.relPhone) || '-' }}
        </template>
        <template slot="relName" slot-scope="{ data }">
          {{ data.relName }}
          <el-tag
            style="margin-left: 3px"
            v-if="data.relId === data.id"
            size="mini"
            type="success"
          >班组长</el-tag>
        </template>
        <template slot="devName" slot-scope="{ data }">
          <div
            style="width: 100%; display: flex; justify-content: space-around"
          >
            <span>{{ data.devName === null ? '未绑定' : data.devName }}</span>
            <span
              class="binding"
              v-if="data.devName === null"
              style="color: #11AB21"
              @click="bindHat(data)"
            >
              <i class="el-icon-link"></i>
              绑定
            </span>
            <span
              class="unbind"
              v-else
              style="color: #FF0000"
              @click="unbindHat(data.id)"
            >
              <i class="el-icon-link"></i>
              解绑
            </span>
          </div>
        </template>
      </TableModel>

      <DialogModel
        :dialogConfig="dialogConfigHat"
        @closeDialogOuter="closeDialogHatOuter"
      >
        <template slot="outerContent">
          <!-- 新增以及修改数据的表单组件 -->
          <TableHat
            :hat-param="hatParam"
            @closeHat="closeDialogHatOuter"
          />
        </template>
      </DialogModel>

      <DialogModel
        :dialogConfig="dialogConfigMember"
        @closeDialogOuter="closeDialogMemberOuter"
      >
        <template slot="outerContent">
          <!-- 新增以及修改数据的表单组件 -->
          <TableMember
            :member-param="memberParam"
            @closeMember="closeDialogMemberOuter"
          />
        </template>
      </DialogModel>

    </div>
</template>

<script>
import { formLabelCrewTab, columnsListCrewTab } from '../table-crew'
import { dialogConfigHat } from '../table-hat'
import { dialogConfigMember } from '../table-member'
import {
  queryCrewPersonApi,
  removeCrewApi,
  unbindHatApi
} from '@/api/base/crew'
import { commonMixin } from '@/views/base/mixins/common'
import TableHat from './table-hat.vue'
import TableMember from './table-member.vue'
export default {
    name: 'TableCrew',
    props: {
        tableCrewParams: {
          type: Object,
          default: null
        }
    },
    mixins: [commonMixin],
    components: {
      TableHat,
      TableMember
    },
    created() {
      console.log(this.tableCrewParams)
      this.crewId = this.tableCrewParams.id
      this.crewLeaderId = this.tableCrewParams.relId
    },
    mounted() {

    },
    data() {
        return {
          formLabelCrewTab,
          columnsListCrewTab,
          dialogConfigHat,
          dialogConfigMember,
          queryCrewPersonApi,
          crewId: undefined,
          crewLeaderId: undefined,
          hatParam: undefined,
          memberParam: undefined
        }
    },
    methods: {
      getIdList(idList) {
        this.exportList = []
        idList.forEach(item => {
          this.exportList.push(item.id)
        })
      },
      handleRemove(id) {
        this.$modal
          .confirm('确定移出班组吗？')
          .then(() => {
            removeCrewApi({
              id
            }).then(res => {
              this.$refs.tableRef.getTableList()
            }).catch(err => {})
          })
          .catch(() => {})
      },
      bindHat(v) {
        this.hatParam = v
        this.dialogConfigHat.outerVisible = true
      },
      closeDialogHatOuter(type) {
        this.dialogConfigHat.outerVisible = false
        if(type) {
          this.$refs.tableRef.getTableList()
        }
      },
      closeDialogMemberOuter(type) {
        this.dialogConfigMember.outerVisible = false
        if(type) {
          this.$refs.tableRef.getTableList()
        }
      },
      unbindHat(id) {
        this.$modal
          .confirm('确定解绑安全帽吗？')
          .then(() => {
            unbindHatApi({
              id
            }).then(res => {
              this.$modal.msgSuccess('解绑成功')
              this.$refs.tableRef.getTableList()
            }).catch(err => {})
          })
          .catch(() => {})
      },
      handleAddMember() {
        this.memberParam = this.tableCrewParams
        this.dialogConfigMember.outerVisible = true
      }
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
.binding, .unbind{
  cursor: pointer;
}
.binding:hover{
  border-bottom: 2px solid #11AB21;
}
.unbind:hover{
  border-bottom: 2px solid #FF0000;
}
</style>