contractWarn.vue

<template>
  <div class="manage-container deviceStatus-wrapper">
    <el-row class="manage-head-wrapper">
      <header class="title-header">
        <span class="title">{{ $t('Management.ContractWarn') }}</span>
      </header>
    </el-row>
    <div class="manage-query-wrapper">
        <div :span="5">
            <span class="demonstration">商场：</span>
            <el-select
              v-model="queryC.mallId"
              placeholder="请选择商场"
              clearable
              filterable
            >
            <el-option
              v-for="item in mallListForTerm"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
            </el-select>
        </div>
        <div :span="5">
            <span class="demonstration">状态：</span>
            <el-select
              v-model="queryC.status"
              placeholder="请选择状态"
              clearable
            >
            <el-option :value="0" label="正常">正常</el-option>
            <el-option :value="1" label="不正常">不正常</el-option>
            </el-select>
        </div>
        <div :span="5">
            <span class="demonstration">日期：</span>
            <el-date-picker
                v-model="queryC.createdate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @change="getData"
            >
            </el-date-picker>
        </div>
        <div>
          <el-button type="primary" size="small" @click="getData">查询</el-button>
        </div>
    </div>
    <el-row class="manage-content">
      <el-col :span="24">
        <el-table
          :data="tableData"
          :max-height="tableHeight"
          :empty-text="dataMsg"
          class="data-compare-table"
          style="width: 100%"
          header-row-class-name="manage-tab-head"
        >
          <el-table-column align="left" :label="$t('table.order')" 
          width="100" type="index"></el-table-column>
          <el-table-column :label="$t('table.mall')" align="left" 
          width="250" prop="mallname"></el-table-column>
          <el-table-column :label="$t('table.factoryName')" align="left" 
          width="150" prop="manager"></el-table-column>
          <el-table-column :label="$t('table.state')" align="left" 
          width="150" prop="status" :formatter="statusFormat"></el-table-column>
          <el-table-column :label="$t('table.date')" align="left" 
          width="180" prop="createdate"></el-table-column>
          <el-table-column :label="$t('table.brandName')" align="left" 
          prop="brandnames">
            <template slot-scope="scope">
              <el-popover
                placement="right"
                width="500"
                trigger="hover">
                <div class="popover-box">
                  <div class="brand-box" v-for="(item, index) in scope.row.brandnamesList" :key="index">
                    <span class="brand-name">{{ item }}</span>
                    <span class="brand-line"></span>
                  </div>
                </div>
                <div class="brand-names-box" slot="reference">{{ scope.row.brandnames }}</div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          class="manage-pagination-box"
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          @size-change="sizeChange"
          @current-change="cerrentChange"
          layout="sizes, prev, pager, next, slot"
          :total="total"
        >
          <span
            class="slot-ele-total"
          >{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
        </el-pagination> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      dataMsg: "",
      queryC: {
        mallId: null,
        status: null,
        createdate: dateUnit.dateFormat(new Date(), 'yyyy-MM-dd'),
      },
      mallListForTerm: []
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return (
        windowInnerHeight -
        (windowInnerHeight <= 720
          ? windowInnerHeight * 0.26
          : windowInnerHeight * 0.24)
      );
    }
  },
  mounted() {
    this.dataMsg = this.$t("echartsTitle.loading");
    this.getMallListForTerm(true);
  },
  methods: {
     getMallListForTerm(isCheck) {
      this.mallListForTerm = [];
      this.mallValue = "";
      this.$api.base
        .mall(
          {
            accountId: this.$cookie.get("accountId"),
            status_arr: "1,3"
          },
          null,
          true
        )
        .then(data => {
          let result = data.data;
          this.mallListForTerm = result.data;
          if (this.getSessionLocal("mallId")) {
            this.queryC.mallId = Number(this.getSessionLocal("mallId"));
          }
          if (isCheck) {
            this.getData();
          }
        })
        .catch(error => {});
    },
    getData() {
      this.dataMsg = this.$t("echartsTitle.loading");
      const { mallId, status, createdate } = this.queryC;
      this.$api.management
        .getSapContractWarn({
          author: this.$cookie.get("atoken"),
          mallId: mallId,
          status: status,
          createdate: createdate,
        })
        .then(res => {
          let result = res.data;
          if(result.model && result.model.length > 0) {
            result.model.forEach(d => {
              if(d.brandnames.includes(',')) {
                d.brandnamesList =  d.brandnames.split(',');
                d.brandnames = d.brandnames.replaceAll(',', '、');
              }else {
                d.brandnamesList = d.brandnames.split('，');
                d.brandnames = d.brandnames.replaceAll(',', '、');
              }
            })
          }
          this.tableData = result.model;
          this.tableData.length === 0 &&
            (this.dataMsg = this.$t("echartsTitle.noData"));
        })
        .catch(error => {});
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    cerrentChange(val) {
      if (this.currentPage != val) {
        this.currentPage = val;
        this.getData();
      }
    },
    statusFormat(row, column, cellValue, index) {
        if(cellValue == 0) {
            return "正常"
        }else {
            return "不正常"
        }
    }
  }
};
</script>

<style scoped>
.manage-head-wrapper {
  padding: 15px 12px 10px;
}
.manage-query-wrapper {
  padding: 0 10px 10px 15px;
  display: flex;
}
.manage-query-wrapper > div {
  margin-right: 15px;
}
.popover-box {
  display: flex;
  flex-wrap: wrap;
}
.brand-box {
  position: relative;
}
.brand-name {
  display: inline-block;
  line-height: 22px;
  padding: 5px 8px;
}
.brand-line {
  display: inline-block;
  position: absolute;
  top: 9px;
  right: 0px;
  height: 15px;
  width: 1px;
  background: #666;
}
.brand-names-box {
  width: 100%;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 6px 0;
}
.title-header {
  text-align: center;
  padding-bottom: 10px;
}
.title {
  line-height: 20px;
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
  text-align: center;
  color: #555;
}
</style>