dvcp_v2_webapp/packages/work/AppConference/list.vue

<template>
  <ai-list isTabs>
    <template #content>
      <ai-search-bar>
        <template #left>
          <el-button type="primary" @click="addMetting()">发起会议</el-button>
          <ai-select
              v-model="search.meetingStatus"
              @change="getTableData()"
              placeholder="会议状态"
              :selectList="dict.getDict($parent.name==0 ? 'meetingStatusSelect' : 'meetingStatus')"
          ></ai-select>
          <ai-select
              v-if="$parent.name==0"
              v-model="search.confirmStatus"
              @change="getTableData()"
              placeholder="确认状态"
              :selectList="dict.getDict('confirmStatus')"
          ></ai-select>
        </template>
        <template #right>
          <el-input
            v-model="search.param"
            v-throttle="() => {search.current=1,getTableData()}"
            @keyup.enter.native="search.current=1,getTableData()"
            placeholder="会议标题/地点"
            size="small" suffix-icon="iconfont iconSearch" clearable @clear="getTableData()"></el-input>
        </template>
      </ai-search-bar>
      <div class="list_main">
        <div class="no-data" style="height:160px;" v-if="tableData.length==0"></div>
        <ul v-if="tableData.length>0">
          <li v-for="(item,index) in tableData" :key="index" @click="goDetail(item)">
            <p>
              <span class="conference_title">{{ item.title }}</span>
              <span class="time" v-if="item.status==1">{{ item.expirationTime }}</span>
            </p>
            <p style="width:80%;">
              <el-row type="flex" align="middle" class="unit">发起人：{{ item.userName }}
              </el-row>
              <el-row type="flex" align="middle" class="unit">发起单位：{{ item.unitName }}
              </el-row>
            </p>
            <p style="width:80%;">
              <span class="unit">会议时间：{{ item.startTime.substring(0, 16) + '至' + item.endTime.substring(0, 16) }}</span>
              <el-tooltip :content="item.address" placement="top-start" effect="light">
                <span class="unit" v-if="item.address.length>12">会议地点：{{
                    item.address.substring(0, 12) + '....'
                  }}</span>
                <span class="unit" v-else>会议地点：{{ item.address }}</span>
              </el-tooltip>
            </p>
            <!-- <p style="width:80%;">
                  <span
                    class="unit">会议时间：{{
                      item.startTime.substring(0, 16) + '至' + item.endTime.substring(0, 16)
                    }}</span>
              <el-tooltip :content="item.address" placement="top-start" effect="light">
                    <span class="unit address"
                          v-if="item.address.length>12">会议地点：{{ item.address.substring(0, 12) + '....' }}</span>
                <span class="unit address" v-else>会议地点：{{ item.address }}</span>
              </el-tooltip>
            </p> -->
            <h5 :class="{color0:item.status==0,color1:item.status==1,color2:item.status==2,color3:item.status==3,color4:item.status==4}">
              <span v-if="item.status==0">草稿箱</span>
              <span v-if="item.status==1">未开始</span>
              <span v-if="item.status==2">进行中</span>
              <span v-if="item.status==3">已取消</span>
              <span v-if="item.status==4">已结束</span>
            </h5>
            <ai-icon class="svg" v-if="item.joinStatus==0" type="svg" icon="iconunidentified"/>
            <ai-icon class="svg" v-else-if="item.joinStatus==1" type="svg" icon="iconidentified"/>
            <ai-icon class="svg" v-else-if="item.joinStatus==2" type="svg" icon="iconyiqingjia"/>
            <ai-icon class="svg" v-else-if="item.joinStatus==3" type="svg" icon="icondaiding"/>
          </li>
        </ul>
      </div>
      <div class="pagination" v-if="tableData.length>0">
        <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            background
            :current-page.sync="search.current"
            :page-sizes="[5, 10, 50, 100,200]"
            :page-size="search.size"
            layout="total,prev, pager, next,sizes,jumper"
            :total="total">
        </el-pagination>
      </div>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: "list",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    listType: String
  },
  data() {
    return {
      search: {
        meetingStatus: '',
        confirmStatus: '',
        param: '',
        current: 1,
        size: 10,
        listType: ''
      },
      tableData: [],
      total: 0,
    }
  },
  methods: {
    goDetail(item) {
      this.$emit('goPage', {
        row: item,
        comp: 'detail'
      });
    },
    addMetting() {
      this.$emit('goPage', {
        row: {},
        comp: 'addMeeting'
      });
    },

    getTableData() {
      this.instance.post(`/app/appmeetinginfo/list`, null, {
        params: {
          ...this.search,
          listType: this.listType
        }
      }).then(res => {
        if (res && res.data) {
          this.tableData = res.data.records;
          this.total = res.data.total;

        }
      });
    },
    handleCurrentChange(val) {
      this.search.current = val;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.search.size = val;
      this.getTableData();
    },
  },
  created() {
    this.dict.load("confirmStatus", "meetingStatus", "meetingStatusSelect").then(_ => this.getTableData())
  }
}
</script>

<style lang="scss" scoped>
.list_main {
  width: 100%;

  ul {
    overflow: hidden;
    padding: 0;
    margin: 0;

    li {
      width: 100%;
      height: 107px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(216, 224, 232, 1);
      box-sizing: border-box;
      padding: 16px 16px 16px 50px;
      margin-top: 8px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      p {
        width: 100%;
        height: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .conference_title {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: bold;
        }

        .time {
          font-size: 14px;
          color: #2266FF;
        }

        .unit {
          font-size: 14px;
          width: 50%;
        }
      }

      h5 {
        width: 100px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        position: absolute;
        left: -22px;
        top: 10px;
        box-sizing: border-box;
        padding-right: 8px;
        font-size: 12px;
        transform: rotate(-45deg);
        background: #FFF3E8;
        color: rgba(255, 136, 34, 1);
        box-shadow: -1px 1px 0px 0px rgba(216, 224, 232, 1), 1px -1px 0px 0px rgba(216, 224, 232, 1);
        margin: 0;
      }

      .color0 {
        color: #2244FF;
        background: #EFF6FF;
      }

      .color1 {
        background: #FFF3E8;
        color: rgba(255, 136, 34, 1);
      }

      .color2 {
        background: #EFF6FF;
        color: #2266FF;
      }

      .color3 {
        background-color: #D8E0E8;
        color: #999999;
      }

      .color4 {
        color: #2EA222;
        background-color: #D8E0E8;
      }

      .svg {
        width: 88px;
        height: 88px;
        position: absolute;
        right: -20px;
        bottom: -20px;
      }
    }
  }
}
</style>