luohe_operation/src/pages/index/components/personnel_management.vue

<template>
  <div class="body-wrapper">
    <el-tabs v-model="activeName">
      <el-tab-pane label="交接班报表" name="交接班报表">
        <el-form class="form-wrapper" :inline="true" :model="formInline1" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="车场名称: ">
                <el-select clearable filterable v-model="formInline1.parkId" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in carParkingNameOptions"
                    :key="index"
                    :label="item.parkName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit1" icon="el-icon-search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="handleAdd">添加交接班记录</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table border :row-class-name="rowClassName" :data="tableData1" v-loading="loading1">
          <el-table-column v-for="(item, index) in columns1" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope" style="display: inline-block">
              <el-button type="primary" @click="handleEdit(scope.row)" slot="reference">修改</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="deleteRow(scope.row)">
                <el-button type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="total, prev, pager, next, jumper" :total="total1" @current-change="handlePageChange1"
                         :current-page.sync="pageNum1" :page-size.sync="pageSize1">
          </el-pagination>
        </div>
        <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="45%"
          custom-class="audit-dialog">
          <div class="form-div">
            <el-form label-position="left" label-width="100px" :model="formLabelAlign">
              <el-form-item label="车场名称: ">
                <el-select filterable clearable v-model="formLabelAlign.parkId" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in carParkingNameOptions"
                    :key="index"
                    :label="item.parkName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="收入统计">
                <el-input v-model="formLabelAlign.incomeFee"></el-input>
              </el-form-item>
              <el-form-item label="停车量统计">
                <el-input v-model="formLabelAlign.parkingNum"></el-input>
              </el-form-item>
              <el-form-item label="异常事件统计">
                <el-input v-model="formLabelAlign.excptionEvent"></el-input>
              </el-form-item>
              <el-form-item label="设备情况">
                <el-input v-model="formLabelAlign.deviceStatus"></el-input>
              </el-form-item>
              <el-form-item label="车辆情况">
                <el-input v-model="formLabelAlign.vehicleStatus"></el-input>
              </el-form-item>
              <el-form-item label="交班人员: ">
                <el-select filterable v-model="formLabelAlign.tollmanFinishId" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in peopleOptions"
                    :key="index"
                    :label="item.tollmanName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="接班人员: ">
                <el-select filterable clearable v-model="formLabelAlign.tollmanReceiveId" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in peopleOptions"
                    :key="index"
                    :label="item.tollmanName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="收费员管理" name="收费员管理">
        <el-form class="form-wrapper" :inline="true" :model="formInline2" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="收费员姓名:">
                <el-input v-model="formInline2.tollCollectorName" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit2" icon="el-icon-search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="handleAdd2">添加</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table border :row-class-name="rowClassName" :data="tableData2" v-loading="loading2">
          <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope" style="display: inline-block">
              <el-button type="primary" @click="handleEdit2(scope.row)" slot="reference">修改</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="deleteRow2(scope.row)">
                <el-button type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="total, prev, pager, next, jumper" :total="total1" @current-change="handlePageChange2"
                         :current-page.sync="pageNum2" :page-size.sync="pageSize2">
          </el-pagination>
        </div>
        <el-dialog
          :title="title"
          :visible.sync="dialogVisible2"
          width="45%"
          custom-class="audit-dialog">
          <div class="form-div">
            <el-form label-position="left" label-width="110px" :model="formLabelAlign2">
              <el-form-item label="收费员姓名">
                <el-input v-model="formLabelAlign2.tollmanName"></el-input>
              </el-form-item>
              <el-form-item label="出生日期">
                  <el-date-picker
                    v-model="formLabelAlign2.birthDay"
                    type="date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="岗位权限">
                <el-input v-model="formLabelAlign2.positionPermission"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm2">确 定</el-button>
        </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api from "@/api/audit.js";
import api_l from "@/api/article_liao.js";
import api_z from "@/api/article_z.js";
import dictionary from "@/util/dictionary";

export default {
  components: {},
  data() {
    return {
      loading1: false,
      loading2: false,
      activeName: '交接班报表',
      columns1: [
        {
          label: '车场名称',
          key: 'parkName'
        },
        {
          label: '收入统计',
          key: 'incomeFee'
        },
        {
          label: '停车量统计',
          key: 'parkingNum'
        },
        {
          label: '异常事件统计',
          key: 'excptionEvent'
        },
        {
          label: '设备情况',
          key: 'deviceStatus'
        },
        {
          label: '车辆情况',
          key: 'vehicleStatus'
        },
        {
          label: '交班人',
          key: 'tollmanFinishName'
        },
        {
          label: '接班人',
          key: 'tollmanReceiveName'
        },
      ],
      tableData1: [],
      total1: 0,
      pageSize1: 10,
      pageNum1: 1,
      formInline1: {
        carParkingName: '',
        parkName:'',
        parkId:''
      },
      title: '',
      dialogVisible: false,
      carParkingNameOptions: [],
      peopleOptions:[],
      formLabelAlign: {
        id: '',
        parkId: '',
        tollmanFinishId: '',
        tollmanReceiveId: '',
        incomeFee: '',
        parkingNum: '',
        excptionEvent: '',
        deviceStatus: '',
        vehicleStatus: '',
        parkName: '',
        tollmanName: '',
        jiaobanrenyuan:'',
        jiebanrenyuan:''
      },
      columns2: [
        {
          label: '收费员id',
          key: 'id'
        },
        {
          label: '收费员姓名',
          key: 'tollmanName'
        },
        {
          label: '出生日期',
          key: 'birthDay'
        },
        {
          label: '岗位权限',
          key: 'positionPermission'
        },
      ],
      tableData2: [],
      total2: 0,
      pageSize2: 10,
      pageNum2: 1,
      formInline2: {
        tollCollectorName: '',
      },
      title2: '',
      dialogVisible2: false,
      formLabelAlign2: {
        id: '',
        parkId:'',
        tollmanName: '',
        birthDay: '',
        positionPermission: '',
      },
    }
  },
  mounted() {
    this.getTableData1()
    this.getTableData2()
    this.getCarParkingName()
    this.getPeople()
  },
  watch: {},
  methods: {
    rowClassName({ rowIndex }) {
      // 偶数行和奇数行分别返回不同的类名，也可以根据实际需求基于rowData进行条件判断
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
    },
    onSubmit1() {
      this.loading1 = true
      api_l.optPersonnelManagementShiftPage({parkId: this.formInline1.parkId}).then(res => {
        this.tableData1 = res.data.records
        this.total1 = res.data.total
        this.loading1 = false
      })
      },
    handleAdd() {
      this.title = '添加'
      this.formLabelAlign = {}
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.title = '修改'
      this.formLabelAlign = {...row}
      this.dialogVisible = true
    },
    deleteRow(record) {
      api_l.optPersonnelManagementShiftDelete([{id: record.id}]).then(res => {
        this.getTableData1()
      })
    },
    //车场
    getCarParkingName() {
      api_z.querySelectParkListByPage().then(res => {
        this.carParkingNameOptions=res.data
      })
    },
    //人员
    getPeople(){
      api_l.optPersonnelDic({}).then(res => {
        this.peopleOptions = res.data || []
      })
    },
    handleConfirm() {
      if (this.title === '修改') {
        api_l.optPersonnelManagementShiftEdit(this.formLabelAlign).then(res => {
          this.$message({
            message: '修改成功!',
            type: 'success'
          })
          this.dialogVisible = false
          this.getTableData1()
        })
      } else {
        api_l.optPersonnelManagementShiftAdd(this.formLabelAlign).then(res => {
          this.$message({
            message: '修改成功!',
            type: 'success'
          })
          this.dialogVisible = false
          this.getTableData1()
          }
        )
      }
    },
    onSubmit2() {
      this.loading2 = true
      api_l.optPersonnelManagementBasicDetail({tollmanName: this.formInline2.tollCollectorName}).then(res => {
        this.tableData2 = res.data.records
        this.total2 = res.data.total
        this.loading2 = false
      })

    },
    handleAdd2() {
      this.title2 = '添加'
      this.formLabelAlign2.id=''
      this.formLabelAlign2.parkId=''
      this.formLabelAlign2.tollmanName=''
      this.formLabelAlign2.birthDay=''
      this.formLabelAlign2.positionPermission=''
      this.dialogVisible2 = true
    },

    handleEdit2(row) {
      this.title2 = '修改'
      this.formLabelAlign2 = {...row}
      this.dialogVisible2 = true
    },
    deleteRow2(record) {
      api_l.optPersonnelManagementBasicDelete([{id: record.id}]).then(res => {
      this.getTableData2()
      })
    },
    handleConfirm2() {
      if (this.title2 === '修改') {
        api_l.optPersonnelManagementShiftEdit({id: this.formLabelAlign2.id,parkId: this.formLabelAlign2.parkId,tollmanName: this.formLabelAlign2.tollmanName,birthDay: this.formLabelAlign2.birthDay,positionPermission: this.formLabelAlign2.positionPermission}).then(res => {
          this.dialogVisible2 = false
          this.getTableData2()
        })
      }else if (this.title2 === '添加') {
        api_l.optPersonnelManagementBasicAdd({parkId: this.formLabelAlign2.parkId,tollmanName: this.formLabelAlign2.tollmanName,birthDay: this.formLabelAlign2.birthDay,positionPermission: this.formLabelAlign2.positionPermission}).then(res => {
          this.dialogVisible2 = false
          this.getTableData2()
      })
      }
    },
    handlePageChange1() {
      this.getTableData1()
    },
    getTableData1() {
      api_l.optPersonnelManagementShiftPage().then(res => {
        this.tableData1 = res.data.records
      })
    },
    getTableData2() {
      api_l.optPersonnelManagementBasicDetail({}).then(res => {
        this.tableData2 = res.data.records
      })
    },
    handlePageChange2() {
      this.getTableData2()
    },
}}
</script>
<style lang="scss" scoped>
.body-wrapper {
  .form-wrapper {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  .button-block {
    text-align: right;
    margin-bottom: 20px;
  }

  .table-pagination {
    text-align: right;
  }

  .search-card {
    margin-bottom: 20px;
    text-align: center;

    .input-wrapper {
      width: 36%;
    }
  }

  .audit-dialog {
    .mg-bt {
      margin-bottom: 24px;
    }

    .label {
      text-align: right;
    }

    .form-div {
      /deep/ .el-input__inner {
        height: 35px;
        width: 99%;
        border: 1px solid #a6a5a5;
      }
    }
  }
}
</style>