luohe_operation/src/pages/index/components/appointment_rules.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 filterable v-model="formInline1.parkId" placeholder="请选择" clearable>
                  <el-option
                    v-for="(item,index) in parkDic"
                    :key="index"
                    :label="item.parkName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生效时间:">
                <el-date-picker
                  v-model="formInline1.time"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="-"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <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="85px" :model="formLabelAlign">
              <el-form-item label="规则名称">
                <el-input v-model="formLabelAlign.ruleName"></el-input>
              </el-form-item>
              <el-form-item label="停车场">
                <el-select clearable filterable v-model="formLabelAlign.parkId" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in parkDic"
                    :key="index"
                    :label="item.parkName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="起始时间">
                <el-date-picker
                  v-model="formLabelAlign.startStartTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-date-picker
                  v-model="formLabelAlign.endStartTime"
                  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="formLabelAlign.price"></el-input>
              </el-form-item>
              <el-form-item label="最大预约数">
                <el-input v-model="formLabelAlign.largeTimes"></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="6">
              <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 label="停车场名称:">
                <el-select filterable v-model="formInline2.parkId" placeholder="请选择" clearable>
                  <el-option
                    v-for="(item,index) in parkDic"
                    :key="index"
                    :label="item.parkName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit2" icon="el-icon-search">查询</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>
        <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-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="6">
              <el-form-item label="车牌号:">
                <el-input v-model="formInline3.plateNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="停车场名称:">
                <el-select filterable v-model="formInline3.parkId" placeholder="请选择" clearable>
                  <el-option
                    v-for="(item,index) in parkDic"
                    :key="index"
                    :label="item.parkName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit3" icon="el-icon-search">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table border :row-class-name="rowClassName" :data="tableData3" v-loading="loading3">
          <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">
            <div slot-scope="scope">
              <el-button @click="handleDetail(scope.row)" type="primary" size="mini">退款详情</el-button>
            </div>
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="total, prev, pager, next, jumper" :total="total3" @current-change="handlePageChange3"
                         :current-page.sync="pageNum3" :page-size.sync="pageSize3">
          </el-pagination>
        </div>
        <el-dialog
          title="退款详情"
          :visible.sync="dialogVisible3"
          width="50%"
          custom-class="audit-dialog">
          <el-form disabled style="height: 350px" class="form-div" label-position="left" label-width="90px" :model="formLabelAlign3">
            <el-form-item label="id">
              <el-input v-model="formLabelAlign3.id"/>
            </el-form-item>
            <el-form-item label="车牌号">
              <el-input  v-model="formLabelAlign3.plateNo"/>
            </el-form-item>
            <el-form-item label="停车场名称">
              <el-input v-model="formLabelAlign3.parkingName"/>
            </el-form-item>
            <el-form-item label="退款日期">
              <el-input v-model="formLabelAlign3.refundTime"/>
            </el-form-item>
            <el-form-item label="退款金额">
              <el-input v-model="formLabelAlign3.refundMoney"/>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api from "@/api/audit.js";
import dictionary from "@/util/dictionary";

export default {
  components: {},
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      carParkingNameOptions: [],
      activeName: '预约规则',
      columns1: [
        {
          label: '规则名称',
          key: 'ruleName'
        },
        {
          label: '停车场名称',
          key: 'parkName'
        },
        {
          label: '起始时间',
          key: 'startTime'
        },
        {
          label: '结束时间',
          key: 'endTime'
        },
        {
          label: '预约费用（每小时）',
          key: 'price'
        },
        {
          label: '最大预约数',
          key: 'largeTimes'
        },
      ],
      tableData1: [],
      total1: 0,
      pageSize1: 10,
      pageNum1: 1,
      formInline1: {
        parkId: '',
        time: []
      },
      title:'',
      dialogVisible:false,
      formLabelAlign: {
        ruleName: '',
        parkId: '',
        startStartTime: '',
        endStartTime: '',
        price: '',
        largeTimes: ''
      },
      columns2: [
        {
          label: '车牌号',
          key: 'plateNo'
        },
        {
          label: '停车场名称',
          key: 'parkName'
        },
        {
          label: '预约时间',
          key: 'appointmentTime'
        },
        {
          label: '支付状态',
          key: 'payStatus'
        },
        {
          label: '退款状态',
          key: 'refundStatus'
        },
      ],
      tableData2: [],
      total2: 0,
      pageSize2: 10,
      pageNum2: 1,
      formInline2: {
        plateNo: '',
        parkId:'',
      },
      columns3: [
        {
          label: '车牌号',
          key: 'plateNo'
        },
        {
          label: '停车场名称',
          key: 'parkName'
        },
        {
          label: '订单状态',
          key: 'orderStatus'
        },
        {
          label: '退款状态',
          key: 'refundStatus'
        },
      ],
      tableData3: [],
      total3: 0,
      pageSize3: 10,
      pageNum3: 1,
      formInline3: {
        plateNo: '',
        parkId:'',
      },
      dialogVisible3:false,
      formLabelAlign3: {
        id: '',
        plateNo: '',
        parkingName: '',
        refundTime: '',
        refundMoney: '',
      },
      parkDic: []
    }
  },
  mounted() {
    this.getParkDic()
    this.getTableData1()
    this.getTableData2()
    this.getTableData3()
  },
  watch: {
  },
  methods: {
    rowClassName({ rowIndex }) {
      // 偶数行和奇数行分别返回不同的类名，也可以根据实际需求基于rowData进行条件判断
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
    },
    //车场
    getParkDic() {
      api.parkDic().then(res => {
        this.parkDic = res.data || []
      })
    },
    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.deleteRule({id: record.id}).then(res => {
        if (res.code === 200) {
          this.$message({type: 'success', message: '删除成功!'})
          this.getTableData1()
        }
      })
    },
    handleConfirm() {
      if (this.title === '修改规则') {
        api.editRule({...this.formLabelAlign, endTime: this.formLabelAlign.endTime.substring(0, 10) + " 23:59:59"}).then(res => {
          if (res.code === 200) {
            this.dialogVisible = false
            this.$message({
              message: '修改成功!',
              type: 'success'
            })
            this.getTableData1()
          }
        })
      } else {
        console.log(this.formLabelAlign, '33333')
        api.addRule({...this.formLabelAlign, endTime: this.formLabelAlign.endTime.substring(0, 10) + " 23:59:59"}).then(res => {
          if (res.code === 200) {
            this.dialogVisible = false
            this.$message({
              message: '添加成功!',
              type: 'success'
            })
            this.getTableData1()
          }
        })
      }
    },
    onSubmit2() {
      this.pageNum2 = 1
      this.getTableData2()
    },
    onSubmit3() {
      this.pageNum3 = 1
      this.getTableData3()
    },
    handleDetail(row) {
      this.formLabelAlign3 = {...row}
      this.dialogVisible3 = true
    },
    handlePageChange1() {
      this.getTableData1()
    },
    getTableData1() {
      this.loading1 = true
      const {pageNum1, pageSize1} = this
      let params = {...this.formInline1}
      if (params.time && params.time.length === 2) {
        params.startStartTime = params.time[0].substring(0, 10) + " 00:00:00";
        params.endStartTime = params.time[1].substring(0, 10) + " 23:59:59"
      }
      delete params.time
      api.yytcListByPage({current: pageNum1, size: pageSize1, ...params}).then(res => {
        this.tableData1 = (res.data.records || [])
        this.total1 = res.data.total
        this.loading1 = false
      })
    },
    handlePageChange2() {
      this.getTableData2()
    },
    getTableData2() {
      this.loading2 = true
      const {pageNum2, pageSize2} = this
      api.orderListByPage({current: pageNum2, size: pageSize2, ...this.formInline2}).then(res => {
        this.tableData2 = res.data.records || []
        this.total2 = res.data.total
        this.loading2 = false
      })
    },
    handlePageChange3() {
      this.getTableData3()
    },
    getTableData3() {
      const {pageNum3, pageSize3} = this
      this.loading3 = true
      api.refundListByPage({current: pageNum3, size: pageSize3, ...this.formInline3}).then(res => {
        this.tableData3 = res.data.records || []
        this.total3 = res.data.total
        this.loading3 = false
      })
    },
  }
}
</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>