dy-admin-manager/src/views/app/clouldSuggestion.vue

<template>
  <div class='m-container'>
  <h2>
      <div class="squrt"></div>团练宝反馈
    </h2>
  <div class="m-core">
    <save-form
      :inline="true"
      class="searchForm"
      save-key="clouldSuggestion"
      @submit="search"
      @reset="onReSet"
      :model.sync="searchForm"
      ref="searchForm"
    >
      <!-- 状态 指导老师 活动方案-->
      <el-form-item prop="search">
        <el-input
          v-model.trim="searchForm.search"
          clearable
          placeholder="姓名、编号、手机号"
        ></el-input>
      </el-form-item>

      <el-form-item prop="clientType">
        <el-select clearable v-model="searchForm.clientType" placeholder="请选择客户端">
          <el-option
            v-for="(item, index) in clientList"
            :key="index"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- statusList -->
      <el-form-item prop="timer">
        <el-date-picker
          v-model.trim="searchForm.timer"
          style="width: 400px"
          type="daterange"
          :picker-options="{
            firstDayOfWeek: 1,
          }"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="danger">搜索</el-button>
        <el-button native-type="reset" type="primary">重置</el-button>
      </el-form-item>
    </save-form>
    <div class="tableWrap">
      <el-table
        :data="dataList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column
          align="center"
          label="用户编号"
          prop="userId"
        ></el-table-column>
        <el-table-column
          align="center"
          label="用户姓名"
          prop="username"
        ></el-table-column>

        <el-table-column align="center" prop="mobileNo" label="邮箱或手机号">
        </el-table-column>

        <!-- <el-table-column align="center" prop="name" label="标题"> -->
        <!-- </el-table-column> -->
        <el-table-column align="center" label="内容" prop="content" width="400">
          <template slot-scope="scope">
            <tooltip :content="scope.row.content" />
            <!-- <el-popover placement="top-start"
                          width="300"
                          trigger="hover"
                          :content="scope.row.content">
                <span slot="reference">{{ scope.row.content }}</span>
              </el-popover> -->
            <!-- <div :title="scope.row.content">{{ scope.row.content }}</div> -->
          </template>
        </el-table-column>

        <el-table-column align="center" label="客户端" prop="clientType">
          <template slot-scope="scope">
            <div>
              {{ scope.row.clientType | clientTypeFilter }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="反馈时间" prop="createTime">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateForMinFormat }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="url" label="反馈图片">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.url"
              style="width: 60px; height: 60px"
              fit="cover"
              :src="scope.row.url.split(',')[0]"
              :previewSrcList="scope.row.url.split(',')"
            >
            </el-image>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="createTime" label="反馈时间">
        </el-table-column> -->
      </el-table>
      <pagination
        sync
        :total.sync="pageInfo.total"
        save-key="clouldSuggestion"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.limit"
        :page-sizes="pageInfo.page_size"
        @pagination="getList"
      />
    </div>
  </div>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { sysSuggestionList } from "@/api/appTenant";
import Tooltip from "@/components/Tooltip/index";
import { clientList } from "@/utils/searchArray";
import { getTimes } from "@/utils";
export default {
  components: { pagination, Tooltip },
  name: "chargesList",
  data() {
    return {
      id: null,
      dataList: [],
      clientList,
      searchForm: {
        search: "",
        timer: [],
        clientType: "",
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    };
  },
  activated() {
    this.getList();
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      let { timer, ...rest } = this.searchForm;
      let params = {
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
        type: "SMART_PRACTICE",
        ...getTimes(timer, ["startTime", "endTime"]),
        ...rest,
      };
      sysSuggestionList(params).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    },
    onReSet() {
      this.$refs["searchForm"].resetFields();
      this.search();
    },
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-table .cell {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
/deep/.el-select {
  width: 98% !important;
}

/deep/.el-table {
  display: inline-block;
}
</style>