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

<template>
  <div class="body-wrapper">
    <el-tabs  v-model="activeName">
      <el-tab-pane label="稽查配置" name="稽查配置">
        <el-form class="form-wrapper" :inline="true" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <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 label-position="left" label-width="85px" :model="formLabelAlign">
              <el-form-item label="稽查对象">
                <el-input v-model="formLabelAlign.parkingCardName"></el-input>
              </el-form-item>
              <el-form-item label="取证类型">
                <el-input v-model="formLabelAlign.type"></el-input>
              </el-form-item>
              <el-form-item label="问题描述">
                <el-input v-model="formLabelAlign.questionDescription"></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="稽查审核">
        <div style="font-size: large;margin-bottom: 30px">稽查审核</div>
        <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.orderCode" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit2">查询</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="100">
            <template slot-scope="scope" style="display: inline-block">
              <el-button  @click="handleAudit(scope.row)" type="text">审核</el-button>
            </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">
          <el-row class="mg-bt">
            <el-col class="label" :span="4">审核：</el-col>
            <el-col :span="18">
              <el-radio v-model="radio" label="2">通过</el-radio>
              <el-radio v-model="radio" label="3">驳回</el-radio>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm2">确 定</el-button>
        </span>
        </el-dialog>

        <div style="font-size: large;margin-bottom: 30px">处理记录</div>
        <el-form class="form-wrapper" :inline="true" :model="formInline3" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="停车卡名称:">
                <el-input v-model="formInline3.parkingCardName" 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-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>
        <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-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api from "@/api/audit.js";
import dictionary from "@/util/dictionary";

export default {
  components: {},
  data() {
    return {
      activeName: '稽查配置',
      columns1: [
        {
          label: '稽查对象',
          key: 'parkingCardName'
        },
        {
          label: '取证类型',
          key: 'type'
        },
        {
          label: '问题描述',
          key: 'questionDescription'
        },
        {
          label: '创建日期',
          key: 'creatTime'
        },
      ],
      tableData1: [{parkingCardName:'昌建东外滩西南停车场',type:'实地考察',questionDescription:'部分车位存在一车多位的占用现象',creatTime:'2023-12-30'}],
      total1: 0,
      pageSize1: 10,
      pageNum1: 1,
      title:'',
      dialogVisible:false,
      formLabelAlign: {
        id: '',
        parkingCardName: '',
        type: '',
        questionDescription: '',
      },
      columns2: [
        {
          label: '稽查对象',
          key: 'parkingCardName'
        },
        {
          label: '取证类型',
          key: 'type'
        },
        {
          label: '问题描述',
          key: 'questionDescription'
        },
        {
          label: '创建日期',
          key: 'creatTime'
        },
      ],
      tableData2: [{parkingCardName:'昌建东外滩西南停车场',type:'实地考察',questionDescription:'部分车位存在一车多位的占用现象',creatTime:'2023-12-30'}],
      total2: 0,
      radio: '2',
      pageSize2: 10,
      pageNum2: 1,
      formInline2: {
        orderCode: '',
        orderStatus:'',
        orderWay:''
      },
      title2:'',
      dialogVisible2:false,
      formLabelAlign2: {
        id: '',
        parkingCardName: '',
        type: '',
        questionDescription: '',
      },
      columns3: [
        {
          label: '稽查对象',
          key: 'parkingCardName'
        },
        {
          label: '取证类型',
          key: 'type'
        },
        {
          label: '问题描述',
          key: 'questionDescription'
        },
        {
          label: '审核日期',
          key: ''
        },
        {
          label: '审核日期',
          key: ''
        },
        {
          label: '处理人',
          key: ''
        },
      ],
      tableData3: [],
      total3: 0,
      pageSize3: 10,
      pageNum3: 1,
      formInline3: {
        parkingCardName: ''
      },
    }
  },
  mounted() {
    // this.getTableData1()
    // this.getTableData2()
    // this.getTableData3()
  },
  watch: {
  },
  methods: {
    handleAdd () {
      this.title = '添加配置'
      this.formLabelAlign.parkingCardName= ''
      this.formLabelAlign.type= ''
      this.formLabelAlign.questionDescription= ''
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.title = '修改配置'
      this.formLabelAlign = row
      this.dialogVisible = true
    },
    deleteRow (record) {
      api.deleteWhiteIp({id: record.id}).then(res => {
        if (res.code === 200) {
          this.$message({type: 'success', message: '删除成功!'})
          this.getTableData1()
        }
      })
    },
    handleConfirm() {
      if (this.title === '修改配置') {
        api.addWhiteIp({ipAddr: this.formLabelAlign.ipAddr, id: this.formLabelAlign.id}).then(res => {
          if (res.code === 200) {
            this.dialogVisible = false
            this.$message({
              message: '修改成功!',
              type: 'success'
            })
            this.getTableData1()
          }
        })
      } else {
        api.addWhiteIp({ipAddr: this.formLabelAlign.ipAddr}).then(res => {
          if (res.code === 200) {
            this.dialogVisible = false
            this.$message({
              message: '添加成功!',
              type: 'success'
            })
            this.getTableData1()
          }
        })
      }
    },
    onSubmit2() {
      this.pageNum2 = 1
      this.getTableData2()
    },
    handleAudit(row) {
      this.formLabelAlign2 = row
      this.dialogVisible2 = true
    },

    handleConfirm2() {
      const {id} = this.formLabelAlign2.id
      console.log('radio', this.radio)
      api.applyResource({id, applyType: this.radio}).then(res => {
        if(res.code === 200) {
          this.dialogVisible2 = false
          this.$message({
            message: '审核成功!',
            type: 'success'
          })
          this.getTableData2()
        }
      })
    },
    onSubmit3() {
      this.pageNum3 = 1
      this.getTableData3()
    },
    handlePageChange1() {
      this.getTableData1()
    },
    getTableData1() {
      const {pageNum1, pageSize1} = this
      api.carListByPage({current: pageNum1, size: pageSize1, ...this.formInline1}).then(res => {
        this.tableData1 = (res.data.records || []).map(item => ({...item, carType: dictionary.typeMap[item.carType]}))
        this.total1 = res.data.total
      })
    },
    handlePageChange2() {
      this.getTableData2()
    },
    getTableData2() {
      const {pageNum2, pageSize2} = this
      api.gjListByPage({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.tcjlListByPage({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: 90%;
        border: 1px solid #a6a5a5;
      }
    }
  }
}
</style>