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

<template>
  <div class="body-wrapper">
    <div class="search-card">
      <h5>客户投诉监管</h5>
    </div>
    <br>
    <el-form class="form-wrapper" :inline="true" :model="formInline">
      <el-form-item label="投诉类型">
        <el-select clearable v-model="formInline.comType" placeholder="投诉类型" popper-class="cur-select">
          <el-option label="全部" value=""></el-option>
          <el-option label="经营服务类停车问题" value="经营服务类停车问题"></el-option>
          <el-option label="非法经营停车问题" value="非法经营停车问题"></el-option>
          <el-option label="不提供税票" value="不提供税票"></el-option>
          <el-option label="设备问题" value="设备问题"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <br>
    <br>
    <br>
    <br>
    <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>
    <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>

    <div class="charts_all">
      <div class="charts">
        <piechart
          class="model-pie-body"
          :roseType="false"
          id="chart1"
          :radiusArr="['30%', '70%']"
          :colorArr="modelPieColor"
          :labelFormat="['{name|{b}}', '{sub|{@value}起 {d}%}', '{hr|}']"
          :dataset="modelData"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
      height="600px"
      custom-class="audit-dialog">
      <el-form  class="form-div"  style="height: 120px"   ref="formLabelAlign" label-position="left" label-width="120px" :model="formLabelAlign" >
        <el-form-item label="投诉类型" required>
          <el-select clearable v-model="formLabelAlign.comType" placeholder="请选择">
            <el-option label="源汇区" value="源汇区"></el-option>
            <el-option label="郾城区" value="郾城区"></el-option>
            <el-option label="召陵区" value="召陵区"></el-option>
            <el-option label="舞阳县" value="舞阳县"></el-option>
            <el-option label="临颍县" value="临颍县"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投诉停车场" required>
          <el-select clearable  v-model="formLabelAlign.parkId" placeholder="请选择" popper-class="cur-select">
            <el-option v-for="item in carOptions"  :key="item.id" :label="item.carParkName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投诉内容" required>
          <el-input v-model="formLabelAlign.comContent" placeholder="投诉内容"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm('formLabelAlign')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import piechart from "@/components/pieChart";
import api from "@/api/article_z";

export default {
  components: {
    piechart
  },
  data() {
    return {
      formInline: {
        comType: ''
      },
      options: [{
        value: '经营服务类停车问题',
        label: '经营服务类停车问题'
      }, {
        value: '非法经营停车问题',
        label: '非法经营停车问题'
      },
        {
          value: '设备问题',
          label: '设备问题'
        }, {
          value: '不提供税票',
          label: '不提供税票'
        }],
      columns: [
        {
          label: '投诉类型',
          key: 'comType'
        },
        {
          label: '投诉内容',
          key: 'comContent'
        },
        {
          label: '所属停车场',
          key: 'carParkName'
        },
        {
          label: '处理状态',
          key: 'disposeState'
        },
        {
          label: '处理时间',
          key: 'disposeTime'
        }
      ],
      carOptions: [],
      modelPieColor: ["#4382f6","#9078f8","#C1FFC1","#1E90FF"],
      modelData: [],
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      formLabelAlign: {
        mid: '',
        searchWords:''
      },
      selRow: undefined,
      searchWords: undefined,
      title: ''
    }
  },
  mounted() {
    this.getParkDic()
    this.getTableData()
    this.getModelDataData()
  },
  watch: {
  },
  methods: {
    onSubmit() {
      this.pageNum = 1
      this.getTableData()
    },
    getParkDic() {
      api.parkDic().then(res=>{
        this.carOptions = res.data || [];
      })
    },
    getModelDataData(){
      api.queryCustomerComplaint_Ksfx().then(res=>{
        this.modelData = res.data;
      })
    },
    handlePageChange() {
      this.getTableData()
    },
    handleAdd () {
      this.title = '客诉登记'
      this.formLabelAlign = {}
      this.dialogVisible = true
    },
    handleConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api.khtsSave(this.formLabelAlign).then(res => {
            if(res.code === 200) {
              this.dialogVisible = false
              this.$message({
                message: '添加成功!',
                type: 'success'
              })
              this.getTableData()
            }
          })
        }
      })
    },
    getTableData() {
      const {pageNum, pageSize} = this
      api.khtsListByPage({current: pageNum, size: pageSize, ...this.formInline}).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total
      })
    },
  }
}
</script>
<style  lang="scss" scoped>
.form-wrapper {
  margin-bottom: 20px;
}
/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}
/deep/ .el-select {
  height: 40px;
  .el-input__inner {
    height: 40px;
  }
  .el-input__prefix, .el-input__suffix {
    height: 40px;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 32px + 2px =34px */
  .el-input__icon {
    line-height: 0px;
  }
}
/deep/ .form-wrapper .el-button {
  background: linear-gradient(90deg,#0158d9,#3c97e4);
  width: 100px;
  height: 40px;
}
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  width: 100%;
  .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%;
    }
  }
}

.charts_all{
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 400px;
}

.charts{
  width: 30%;
  height: 300px;
}
.btn_save{
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  height: 40px;
}

.sel{
  height: 200px;
  margin-right: 10px;
}

.input-search{
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  background-color: #2a2a2a;
  border: 1px solid #333;
  color: #ffffff;
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
  .form-div{
    /deep/ .el-input__inner{
      height: 35px;
      width: 100%;
      border: 1px solid #a6a5a5;
      color: #fff;
      background: #2d3744;
    }
    /deep/ .el-input__icon {
      line-height: 35px;
    }
  }
}
</style>