CZC/operationSupport/src/views/propertyManagement/index.vue

<template>
  <div class="complaint">
    <div class="search">
      <el-input
        placeholder="请输入地址/投诉人"
        maxlength="20"
        class="search-input"
        clearable
        v-model.trim="mixins_query.likeValue"
      ></el-input>
      <el-select
        placeholder="请选择所属社区"
        v-model="mixins_query.communityId"
        clearable
      >
        <el-option
          v-for="(item, index) in communityList"
          :key="index"
          :label="item.communityName"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        placeholder="请选择投诉类型"
        v-model="mixins_query.type"
        clearable
      >
        <el-option
          v-for="(item, index) in complaintType"
          :key="index"
          :label="item.label"
          :value="item.status"
        >{{
                    item.label
                }}</el-option>
      </el-select>
      <el-select
        placeholder="请选择投诉状态"
        v-model="mixins_query.handleStatus"
        clearable
      >
        <el-option
          v-for="(item, index) in complaintStatusSerach"
          :key="index"
          :label="item.label"
          :value="item.status"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="pickerTime"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="timeToggle"
        :editable="false"
      ></el-date-picker>
      <el-button
        type="primary"
        placeholder="状态"
        class="search-btn"
        @click="mixins_search"
        icon="el-icon-search"
        v-preventReClick
      >查询
      </el-button>
    </div>
    <div class="content">
      <div class="roles-wrap">
        <zz-table
          :cols="cols"
          :settings="{ showNumber: true, stripe: true }"
          :data="mixins_list"
          :pageset="mixins_pageset"
          @page-change="pageChange"
          :loading="mixins_onQuery"
        >
          <template
            slot-scope="scope"
            slot="content"
          >
            <div>{{ scope.row.content }}</div>
          </template>
          <template
            slot-scope="scope"
            slot="house"
          >
            <!-- <div>{{ scope.row.unitName }}{{ roomNumber }}</div> -->
            <div>{{ scope.row.communityName }}{{ scope.row.unitName }}{{ scope.row.roomNumber }}</div>
          </template>
          <template
            slot-scope="scope"
            slot="status"
          >
            <div :class="{ statusColor: scope.row.handleStatus === 1 }">
              {{ scope.row.handleStatus | filterComplaintStatus }}
            </div>
          </template>
          <template
            slot-scope="scope"
            slot="opt"
          >
            <div
              class="opt"
              @click="clickEdit(scope.row)"
            >
              <i
                v-if="scope.row.id === 1"
                class="zoniot_font zoniot-icon-chuli"
              ></i>
              <i
                v-else
                class="zoniot_font zoniot-icon-xiangqing"
              ></i>
              <!-- <img
                v-if="scope.row.id === 1"
                src="../../assets/img/icon_chuli@2x.png"
                alt=""
              />
              <img
                v-else
                src="../../assets/img/icon_biaodan@2x.png"
                alt=""
              /> -->
            </div>
          </template>
        </zz-table>
      </div>
    </div>
  </div>
</template>

<script>
import list from '@utils/list.js';
export default {
  mixins: [list],
  data () {
    return {
      //社区列表
      communityList: [],
      // 投诉类型
      complaintType: [
        {
          status: 1,
          label: '扰民投诉'
        },
        {
          status: 2,
          label: '物业服务'
        },
        {
          status: 3,
          label: '公共卫生'
        },
        {
          status: 4,
          label: '安全建议'
        },
        {
          status: 5,
          label: '其他'
        }
      ],
      // 投诉状态
      complaintStatusSerach: [
        {
          status: 1,
          label: '未处理'
        },
        {
          status: 2,
          label: '已处理'
        },
        {
          status: 3,
          label: '处理中'
        },
        {
          status: 4,
          label: '待评价'
        },
        {
          status: 5,
          label: '已评价'
        }
      ],
      // 查询的时间
      pickerTime: [],
      cols: [
        {
          label: '所属社区',
          prop: 'communityName'
        },
        {
          label: '房间地址',
          prop: 'houseId',
          slot: 'house'
        },
        {
          label: '投诉类型',
          prop: 'type',
          format (val) {
            if (val == '1') {
              return '扰民投诉';
            } else if (val == '2') {
              return '物业服务';
            } else if (val == '3') {
              return '公共卫生';
            } else if (val == '4') {
              return '安全建议';
            } else {
              return '其他';
            }
          }
        },
        {
          label: '投诉人',
          prop: 'userName'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '投诉时间',
          prop: 'createDate'
        },
        {
          label: '内容',
          prop: 'content',
          slot: 'content',
          width: 260
        },
        {
          label: '状态',
          prop: 'handleStatus',
          slot: 'status'
        },

        {
          label: '操作',
          prop: 'id',
          slot: 'opt'
        }
      ],
      mixins_post: 'post'
    };
  },
  created () {
    this.getCommunityList();
    this.mixins_dataUrl = '/czc-community/feedback/page';
    this.mixins_search();
  },
  mounted () { },
  methods: {
    timeToggle (e) {
      let start = '00:00:00',
        end = '23:59:59';
      if (!!e) {
        this.mixins_query.startTime = `${e[0]} ${start}`;
        this.mixins_query.endTime = `${e[1]} ${end}`;
      } else {
        this.mixins_query.startTime = ``;
        this.mixins_query.endTime = ``;
      }
    },

    /** 获取社区列表*/
    getCommunityList () {
      this.$http.get('/czc-community/assets/community/list').then(({ data, msg, status }) => {
        if (status == 0) {
          this.communityList = data;
          this.$store.commit('setAreaSelect', data);
        }
      });
    },
    /** 查看处理详情*/
    clickEdit (row) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/propertyManagement/stepPage/indexEdit.vue',
          width: '700px',
          height: '650px',
          props: {
            row,
            callback: resolve
          },
          showResetButton: row.handleStatus == 1 || row.handleStatus == 3 ? true : false,
          showConfirmButton: row.handleStatus == 1 || row.handleStatus == 3 ? false : true,
          showCancelButton: row.handleStatus == 1 || row.handleStatus == 3 ? true : false,
          confirmButtonText: '提交',
          hideStar: row.handleStatus == 1 || row.handleStatus == 3 ? false : true,
          title: '投诉建议'
        });
      }).then(() => {
        this.mixins_search();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
/deep/ .el-dialog {
    margin-top: 5vh !important;
}
</style>