luohe_operation/src/pages/index/components/business_record.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="6">
              <el-form-item label="车场名称: ">
                <el-select clearable filterable v-model="formInline1.parkLotId" 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="6">
              <el-form-item label="车牌号: ">
                <el-input v-model="formInline1.plateNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车位号: ">
                <el-input v-model="formInline1.parkingNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit1">查询</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 :data="tableData1">
          <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="prev, pager, next" :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 ref="formLabelAlign"  label-position="left" :rules="rules1" label-width="100px" :model="formLabelAlign">
              <el-form-item label="车场名称" prop="parkLotId">
                <el-select filterable v-model="formLabelAlign.parkLotId" 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="车牌号" prop="plateNo">
                <el-input v-model="formLabelAlign.plateNo"></el-input>
              </el-form-item>
              <el-form-item label="入场时间" prop="inTime">
                <el-date-picker
                  v-model="formLabelAlign.inTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="离场时间" prop="outTime">
                <el-date-picker
                  v-model="formLabelAlign.outTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="车位号"  prop="parkingNo">
                <el-input v-model="formLabelAlign.parkingNo"></el-input>
              </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-select clearable filterable v-model="formInline2.parkLotId" 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 label="车牌号: ">
                <el-input v-model="formInline2.plateNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit2">查询</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 :data="tableData2">
          <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="prev, pager, next" :total="total1" @current-change="handlePageChange2"
                         :current-page.sync="pageNum2" :page-size.sync="pageSize2">
          </el-pagination>
        </div>
        <el-dialog
          :title="title2"
          :visible.sync="dialogVisible2"
          width="45%"
          custom-class="audit-dialog">
          <div class="form-div">
            <el-form label-position="left" label-width="110px" ref="formLabelAlign2" :rules="rules2" :model="formLabelAlign2">
              <el-form-item label="订单号" prop="orderNo">
                <el-input v-model="formLabelAlign2.orderNo"></el-input>
              </el-form-item>
              <el-form-item label="车场名称" prop="parkLotId">
                <el-select filterable v-model="formLabelAlign2.parkLotId" 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="车牌号" prop="plateNo">
                <el-input v-model="formLabelAlign2.plateNo"></el-input>
              </el-form-item>
              <el-form-item label="支付金额" prop="paymentAmount">
                <el-input v-model="formLabelAlign2.paymentAmount"></el-input>
              </el-form-item>
              <el-form-item label="支付方式" prop="paymentMethod">
                <el-select filterable v-model="formLabelAlign2.paymentMethod" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in paymentMethodOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="支付状态" prop="paymentStatus">
                <el-input v-model="formLabelAlign2.paymentStatus"></el-input>
              </el-form-item>
              <el-form-item label="支付时间" prop="paymentTime">
                <el-date-picker
                  v-model="formLabelAlign2.paymentTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
                </el-date-picker>
              </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-tab-pane label="停车欠费订单" name="停车欠费订单">
        <el-form class="form-wrapper" :inline="true" :model="formInline3" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="车场名称:">
                <el-select clearable filterable v-model="formInline3.parkLotId" 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 label="车牌号: ">
                <el-input v-model="formInline3.plateNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit3">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="handleAdd3">添加</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData3">
          <el-table-column v-for="(item, index) in columns3" :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="handleEdit3(scope.row)" slot="reference">修改</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="deleteRow3(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="prev, pager, next" :total="total3" @current-change="handlePageChange3"
                         :current-page.sync="pageNum3" :page-size.sync="pageSize3">
          </el-pagination>
        </div>

        <el-dialog
          :title="title3"
          :visible.sync="dialogVisible3"
          width="45%"
          custom-class="audit-dialog">
          <div class="form-div">
            <el-form label-position="left" ref="formLabelAlign3" label-width="100px" :rules="rules3" :model="formLabelAlign3">
              <el-form-item label="订单号" prop="orderNo">
                <el-input v-model="formLabelAlign3.orderNo"></el-input>
              </el-form-item>
              <el-form-item label="车场名称" prop="parkLotId">
                <el-select filterable v-model="formLabelAlign3.parkLotId" 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="车牌号" prop="plateNo">
                <el-input v-model="formLabelAlign3.plateNo"></el-input>
              </el-form-item>
              <el-form-item label="停车时长(h)" prop="parkingDuration">
                <el-input v-model="formLabelAlign3.parkingDuration"></el-input>
              </el-form-item>
              <el-form-item label="欠费金额">
                <el-input v-model="formLabelAlign3.arrearsAmount"></el-input>
              </el-form-item>
              <el-form-item label="支付方式">
                <el-input v-model="formLabelAlign3.paymentMethod"></el-input>
              </el-form-item>
              <el-form-item label="支付状态">
                <el-input v-model="formLabelAlign3.paymentStatus"></el-input>
              </el-form-item>
              <el-form-item label="支付时间">
                <el-date-picker
                  v-model="formLabelAlign3.paymentTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm3">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api_z from "@/api/article_z.js";
import {vehicleNumber, validateInput, validateAmount, validateHour} from '@/util/common'
import options from '@/util/options'
export default {
  components: {},
  data() {
    return {
      paymentMethodOptions: options.paymentMethodOptions,
      activeName: '停车记录查询',
      columns1: [
        {
          label: '车场名称',
          key: 'parkName'
        },
        {
          label: '车牌号',
          key: 'plateNo'
        },
        {
          label: '入场时间',
          key: 'inTime'
        },
        {
          label: '离场时间',
          key: 'outTime'
        },
        {
          label: '车位号',
          key: 'parkingNo'
        },
      ],
      tableData1: [{parkLotId: 'sasa'}],
      total1: 0,
      pageSize1: 10,
      pageNum1: 1,
      formInline1: {
        parkLotId: '',
        plateNo: '',
        parkingNo: '',
      },
      carParkingNameValue: '',
      carParkingNameOptions: [],
      title: '',
      dialogVisible: false,
      rules1: {
        parkLotId: [
          { required: true, message: "车场不能为空", trigger: "change" },
        ],
        plateNo: [
          { required: true, message: "车牌号不能为空", trigger: "blur" },
          { validator: vehicleNumber, trigger: "blur" },
        ],
        inTime: [
          { required: true, message: "时间不能为空", trigger: "change" },
        ],
        outTime: [
          { required: true, message: "时间不能为空", trigger: "change" },
        ],
        parkingNo: [
          { required: true, message: "车位号不能为空", trigger: "blur" },
          { min: 26, max: 26, message: '长度必须为26位', trigger: 'blur' },
          { validator: validateInput, trigger: "blur" },
        ]
      },
      formLabelAlign: {
        id: '',
        parkLotId: '',
        plateNo: '',
        inTime: '',
        outTime: '',
        parkingNo: '',
      },
      columns2: [
        {
          label: '订单号',
          key: 'orderNo'
        },
        {
          label: '车场名称',
          key: 'parkName'
        },
        {
          label: '车牌号',
          key: 'plateNo'
        },
        {
          label: '支付金额',
          key: 'paymentAmount'
        },
        {
          label: '支付方式',
          key: 'paymentMethod'
        },
        {
          label: '支付状态',
          key: 'paymentStatus'
        },
        {
          label: '支付时间',
          key: 'paymentTime'
        },
      ],
      tableData2: [{parkName: 'sasa1'}],
      total2: 0,
      pageSize2: 10,
      pageNum2: 1,
      formInline2: {
        parkLotId: '',
        plateNo: '',
      },
      title2: '',
      dialogVisible2: false,
      rules2: {
        orderNo: [
          { required: true, message: "订单号不能为空", trigger: "blur" },
          { validator: validateInput, trigger: "blur" },
        ],
        parkLotId: [
          { required: true, message: "车场不能为空", trigger: "change" },
        ],
        plateNo: [
          { required: true, message: "车牌号不能为空", trigger: "blur" },
          { validator: vehicleNumber, trigger: "blur" },
        ],
        paymentAmount: [
          { required: true, message: "支付金额不能为空", trigger: "blur" },
          { validator: validateAmount, trigger: "blur" },
        ],
        paymentMethod: [
          { required: true, message: "支付方式", trigger: "change" },
        ],
        parkingNo: [
          { required: true, message: "车位号不能为空", trigger: "blur" },
          { min: 26, max: 26, message: '长度必须为26位', trigger: 'blur' },
          { validator: validateInput, trigger: "blur" },
        ]
      },
      formLabelAlign2: {
        id: '',
        orderNo: '',
        parkLotId: '',
        plateNo: '',
        paymentAmount: '',
        paymentMethod: '',
        paymentStatus: '',
        paymentTime: '',
      },
      columns3: [
        {
          label: '订单号',
          key: 'orderNo'
        },
        {
          label: '车场名称',
          key: 'parkName'
        },
        {
          label: '车牌号',
          key: 'plateNo'
        },
        {
          label: '停车时长(h)',
          key: 'parkingDuration'
        },
        {
          label: '欠费金额',
          key: 'arrearsAmount'
        },
        {
          label: '支付方式',
          key: 'paymentMethod'
        },
        {
          label: '支付状态',
          key: 'paymentStatus'
        },
        {
          label: '支付时间',
          key: 'paymentTime'
        },
      ],
      tableData3: [{parkName: 'sasa111'}],
      total3: 0,
      pageSize3: 10,
      pageNum3: 1,
      formInline3: {
        parkLotId: '',
        plateNo: '',
      },
      title3: '',
      dialogVisible3: false,
      rules3: {
        orderNo: [
          { required: true, message: "订单号不能为空", trigger: "blur" },
          { validator: validateInput, trigger: "blur" },
        ],
        parkLotId: [
          { required: true, message: "车场不能为空", trigger: "change" },
        ],
        plateNo: [
          { required: true, message: "车牌号不能为空", trigger: "blur" },
          { validator: vehicleNumber, trigger: "blur" },
        ],
        parkingDuration: [
          { required: true, message: "停车时长不能为空", trigger: "blur" },
          { validator: validateHour, trigger: ["change","blur"] },
        ],
        arrearsAmount: [
          { required: true, message: "欠费金额不能为空", trigger: "blur" },
          { validator: validateAmount, trigger: "blur" },
        ]
      },
      formLabelAlign3: {
        id: '',
        orderNo: '',
        parkLotId: '',
        plateNo: '',
        parkingDuration: '',
        arrearsAmount: '',
        paymentMethod: '',
        paymentStatus: '',
        paymentTime: '',
      },
    }
  },
  mounted() {
    this.getTableData1()
    this.getCarParkingName()
    this.getTableData2()
    this.getTableData3()
  },
  watch: {},
  methods: {
    onSubmit1() {
      this.pageNum1 = 1
      this.getTableData1()
    },
    handleAdd() {
      this.title = '添加'
      this.formLabelAlign = {}
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.title = '修改'
      this.formLabelAlign = {...row}
      this.dialogVisible = true
    },
    deleteRow(record) {
      api_z.deleteBusinessRecordInout([{id: record.id}]).then(res => {
        if (res.code === 200) {
          this.$message({type: 'success', message: '删除成功!'})
          this.getTableData1()
        }
      })
    },
    handleConfirm() {
      this.$refs['formLabelAlign'].validate((valid) => {
        if (valid) {
          if (this.title === '修改') {
            api_z.editBusinessRecordInout({...this.formLabelAlign}).then(res => {
              if (res.code === 200) {
                this.dialogVisible = false
                this.$message({
                  message: '修改成功!',
                  type: 'success'
                })
                this.getTableData1()
              }
            })
          } else {
            api_z.addBusinessRecordInout({...this.formLabelAlign}).then(res => {
              if (res.code === 200) {
                this.dialogVisible = false
                this.$message({
                  message: '添加成功!',
                  type: 'success'
                })
                this.getTableData1()
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    //车场
    getCarParkingName() {
      api_z.querySelectParkListByPage().then(res => {
        this.carParkingNameOptions=res.data
      })
    },
    onSubmit2() {
      this.pageNum2 = 1
      this.getTableData2()
    },
    handleAdd2() {
      this.title2 = '添加'
      this.formLabelAlign2 = {}
      this.dialogVisible2 = true
    },

    handleEdit2(row) {
      this.title2 = '修改'
      this.formLabelAlign2 = {...row}
      this.dialogVisible2 = true
    },
    deleteRow2(record) {
      api_z.deleteBusinessRecordPayment([{id: record.id}]).then(res => {
        if (res.code === 200) {
          this.$message({type: 'success', message: '删除成功!'})
          this.getTableData2()
        }
      })
    },
    handleConfirm2() {
      this.$refs['formLabelAlign2'].validate((valid) => {
        if (valid) {
          if (this.title2 === '修改') {
            api_z.editBusinessRecordPayment({...this.formLabelAlign2}).then(res => {
              if (res.code === 200) {
                this.dialogVisible2 = false
                this.$message({
                  message: '修改成功!',
                  type: 'success'
                })
                this.getTableData2()
              }
            })
          } else {
            api_z.addBusinessRecordPayment({...this.formLabelAlign2}).then(res => {
              if (res.code === 200) {
                this.dialogVisible2 = false
                this.$message({
                  message: '添加成功!',
                  type: 'success'
                })
                this.getTableData2()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    onSubmit3() {
      this.pageNum3 = 1
      this.getTableData3()
    },
    handleAdd3() {
      this.title3 = '添加'
      this.formLabelAlign3 = {}
      this.dialogVisible3 = true
    },

    handleEdit3(row) {
      this.title3 = '修改'
      this.formLabelAlign3 = {...row}
      this.dialogVisible3 = true
    },
    deleteRow3(record) {
      api_z.deleteBusinessRecordArrears([{id: record.id}]).then(res => {
        if (res.code === 200) {
          this.$message({type: 'success', message: '删除成功!'})
          this.getTableData3()
        }
      })
    },
    handleConfirm3() {
      this.$refs['formLabelAlign3'].validate((valid) => {
        if (valid) {
          if (this.title3 === '修改') {
            api_z.editBusinessRecordArrears({...this.formLabelAlign3}).then(res => {
              if (res.code === 200) {
                this.dialogVisible3 = false
                this.$message({
                  message: '修改成功!',
                  type: 'success'
                })
                this.getTableData3()
              }
            })
          } else {
            api_z.addBusinessRecordArrears({...this.formLabelAlign3}).then(res => {
              if (res.code === 200) {
                this.dialogVisible3 = false
                this.$message({
                  message: '添加成功!',
                  type: 'success'
                })
                this.getTableData3()
              }
            })
          }
        } else {
          return false;
        }
      })
    },
    handlePageChange1() {
      this.getTableData1()
    },
    getTableData1() {
      const {pageNum1, pageSize1} = this
      api_z.queryBusinessRecordInoutByPage({current: pageNum1, size: pageSize1, ...this.formInline1}).then(res => {
        this.tableData1 = res.data.records || []
        this.total1 = res.data.total
      })
    },
    handlePageChange2() {
      this.getTableData2()
    },
    getTableData2() {
      const {pageNum2, pageSize2} = this
      api_z.queryBusinessRecordPaymentByPage({current: pageNum2, size: pageSize2, ...this.formInline2}).then(res => {
        this.tableData2 = res.data.records || []
        this.total2 = res.data.total
      })
    },
    handlePageChange3() {
      this.getTableData3()
    },
    getTableData3() {
      const {pageNum3, pageSize3} = this
      api_z.queryBusinessRecordArrearsByPage({current: pageNum3, size: pageSize3, ...this.formInline3}).then(res => {
        this.tableData3 = res.data.records || []
        this.total3 = res.data.total
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.body-wrapper {
  padding: 20px;

  .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>