luohe_fronted/src/pages/index/components/personalized_configuration.vue

<template xmlns:piechart="http://www.w3.org/1999/html">
  <div class="body-wrapper">
    <div class="search-card">
      <h5>车主停车欠费情况</h5>
    </div>
    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
      <el-table-column v-for="(item, index) in columns" :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 @click="handleEdit(scope.row)" type="primary" size="mini">配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination :background="false" layout="total, prev, pager, next" :total="total"
                     @current-change="handlePageChange"
                     :current-page.sync="pageNum" :page-size.sync="pageSize">
      </el-pagination>
    </div>
    <br>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
      custom-class="audit-dialog">
      <div style="height: 600px">
        <el-form label-position="left" label-width="80px" :model="formLabelAlign">
          <el-form-item label="车场名称">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="所在区域">
            <el-input v-model="formLabelAlign.place"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="停车编号">
            <el-input v-model="formLabelAlign.breath_number"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="停车状态">
            <el-input v-model="formLabelAlign.parking_state"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="开放时间">
            <el-input v-model="formLabelAlign.open_time"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="结束时间">
            <el-input v-model="formLabelAlign.end_time"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="是否可预约车位">
            <el-input v-model="formLabelAlign.sfkyycw"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="是否安装智能车锁">
            <el-input v-model="formLabelAlign.sfazzncs"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="邮箱地址">
            <el-input v-model="formLabelAlign.email"></el-input>
          </el-form-item>
          <br>
        </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>


  </div>
</template>
<script>
import api from "@/api/audit.js";

export default {
  components: {},
  data() {
    return {
      columns: [
        {
          label: '车场名称',
          key: 'name'
        },
        {
          label: '所在区域',
          key: 'place'
        },
        {
          label: '停车编号',
          key: 'breath_number'
        }, {
          label: '停车状态',
          key: 'parking_state'
        }, {
          label: '开放时间',
          key: 'open_time'
        }, {
          label: '结束时间',
          key: 'end_time'
        }, {
          label: '是否可预约车位',
          key: 'sfkyycw'
        }, {
          label: '是否安装智能车锁',
          key: 'sfazzncs'
        }, {
          label: '邮箱地址',
          key: 'email'
        }
      ],
      title: '',
      formLabelAlign: {
        name: '',
        place: '',
        breath_number: '',
        parking_state: '',
        open_time: '',
        end_time: '',
        sfkyycw: '',
        sfazzncs: '',
        email: ''

      },
      tableData: [],
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      pageNum: 1
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    handlePageChange() {
      this.getTableData()
    },
    handleEdit(row) {
      this.title = '配置'
      this.formLabelAlign = {...row}
      this.dialogVisible = true
    },
    handleConfirm() {
      if (this.title === '配置') {
        api.addWhiteIp({
          ipAddr: this.formLabelAlign.name,
          place: this.formLabelAlign.place,
          breath_number: this.formLabelAlign.breath_number,
          parking_state: this.formLabelAlign.parking_state,
          open_time: this.formLabelAlign.open_time,
          end_time: this.formLabelAlign.end_time,
          sfkyycw: this.formLabelAlign.sfkyycw,
          sfazzncs: this.formLabelAlign.sfazzncs,
          email: this.formLabelAlign.email
        }).then(res => {
          if (res.code === 200) {
            this.dialogVisible = false
            this.$message({
              message: '修改成功!',
              type: 'success'
            })
            this.getTableData()
          }
        })
      }
    },
    getTableData() {
      const {pageNum, pageSize} = this
      api.czxyjgListByPage({current: pageNum, size: pageSize}).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;

  .button-block {
    text-align: right;
    margin-bottom: 20px;
  }

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

  .search-card {
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 20px;

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

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

  .label {
    text-align: right;
  }

  .form-div {
    /deep/ .el-input__inner {
      height: 35px;
      width: 90%;
      border: 1px solid #a6a5a5;
      color: #fff;
      background: #2d3744;
    }
  }
}

/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}

</style>