投诉建议详情添加服务评分

operationSupport/src/views/propertyManagement/index.vue

@@ -1,296 +1,252 @@
 <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"
-        >{{
+    <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.buildingName }}{{ 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 }}
+            </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 class="search-icon">
+                <el-tooltip class="item" effect="light" placement="bottom" content="导出">
+                    <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
+                </el-tooltip>
             </div>
-          </template>
-          <template
-            slot-scope="scope"
-            slot="opt"
-          >
-            <div
-              class="opt"
-              @click="clickEdit(scope.row)"
-            >
-              <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>
+        <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.buildingName }}{{ 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)">
+                            <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>
-          </template>
-        </zz-table>
-      </div>
+        </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'
+    mixins: [list],
+    data() {
+        return {
+            //社区列表
+            communityList: [],
+            // 投诉类型
+            complaintType: [
+                {
+                    status: 1,
+                    label: '扰民投诉'
+                },
+                {
+                    status: 2,
+                    label: '物业服务'
+                },
+                {
+                    status: 3,
+                    label: '公共卫生'
+                },
+                {
+                    status: 4,
+                    label: '安全建议'
+                },
+                {
+                    status: 6,
+                    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',
+                    width: '60'
+                }
+            ],
+            mixins_post: 'post'
+        };
+    },
+    created() {
+        this.getCommunityList();
+        this.mixins_dataUrl = '/sc-community/feedback/page';
+        this.mixins_search();
+    },
+    mounted() {},
+    methods: {
+        exportExcel() {
+            this.__exportExcel('/sc-community/feedback/downloadExcel', this.mixins_query);
         },
-        {
-          label: '投诉类型',
-          prop: 'type',
-          format (val) {
-            if (val == '1') {
-              return '扰民投诉';
-            } else if (val == '2') {
-              return '物业服务';
-            } else if (val == '3') {
-              return '公共卫生';
-            } else if (val == '4') {
-              return '安全建议';
+        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 {
-              return '其他';
+                this.mixins_query.startTime = ``;
+                this.mixins_query.endTime = ``;
             }
-          }
-        },
-        {
-          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',
-          width: "60"
-        }
-      ],
-      mixins_post: 'post'
-    };
-  },
-  created () {
-    this.getCommunityList();
-    this.mixins_dataUrl = '/sc-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('/sc-community/assets/community/list').then(({ data, msg, status }) => {
-        if (status == 0) {
-          this.communityList = data;
-          this.$store.commit('setAreaSelect', data);
+        /** 获取社区列表*/
+        getCommunityList() {
+            this.$http.get('/sc-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();
+            });
         }
-      });
-    },
-    /** 查看处理详情*/
-    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>

operationSupport/src/views/propertyManagement/stepPage/indexEdit.vue

@@ -35,6 +35,18 @@
                     <span class="complaint-content-right">{{ rowData.createDate }}</span>
                 </span>
             </p>
+            <div class="star-cont" v-if="rowData.type == 6">
+                <div class="star-list" v-for="item in toArr(rowData.serviceQuality)" :key="item">
+                    <div>{{ item.name }}:</div>
+                    <i
+                        class="el-icon-star-on"
+                        :style="item.value >= ins ? 'color: #ffca3b;' : 'color:#8e897c33'"
+                        v-for="ins in 5"
+                        :key="ins"
+                    ></i>
+                    <span>{{ item.desc }}</span>
+                </div>
+            </div>
             <div class="complaint-content">
                 <span>
                     <span class="complaint-content-left">投诉内容：</span>
@@ -168,6 +180,12 @@ export default {
     },
     mounted() {},
     methods: {
+        toArr(str) {
+            if (!!str) {
+                return JSON.parse(str);
+            }
+            return [];
+        },
         typeVideo(str) {
             let type = str.slice(str.lastIndexOf('.') + 1, str.length);
             let videoType = ['mp4'];
@@ -269,12 +287,27 @@ export default {
 /deep/ .el-dialog {
     margin-top: 5vh !important;
 }
-.complaint-content-left{
+.complaint-content-left {
     width: 70px;
     text-align: right;
     display: inline-block;
 }
-.width{
+.width {
     width: 210px;
 }
+.star-cont {
+    font-size: 12px;
+    line-height: 26px;
+    .star-list {
+        display: flex;
+        margin: 0 35px;
+        & > div {
+            margin-right: 20px;
+        }
+    }
+}
+.el-icon-star-on {
+    font-size: 26px;
+    margin-right: 10px;
+}
 </style>