项目列表组件，个人中心编辑信息接口，我的项目

2021-09-29 15:40:05 +08:00
parent 5191bffca1
commit f52be81751
5 changed files with 333 additions and 35 deletions
@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <!--    表头-->
+    <div class="column">
+      <a-row>
+        <a-col :span="item.col" v-for="(item, index) in columnData" :key="index">{{ item.title }}</a-col>
+      </a-row>
+    </div>
+
+    <!--    表格内容-->
+    <div v-if="tableData.length > 0">
+      <div v-for="(item, index) in tableData" :key="index" class="table-item">
+        <!--        上面的创建时间和按钮-->
+        <div class="table-item-title">
+          <span>{{ item.createTime }}</span>
+          <a-button type="primary" v-if="showMeetingBtn" @click="toMeeting">{{ buttonText }}
+            <a-icon type="right"></a-icon>
+          </a-button>
+        </div>
+
+        <!--        数据内容-->
+        <div class="table-item-content">
+          <a-row>
+            <a-col :span="tt.col" v-for="(tt, i) in columnData" :key="i">
+              <slot :name="tt.scopedSlots" :record="item">{{ item[tt.dataIndex] }}</slot>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+    </div>
+
+    <a-empty v-else style="margin: 30px 0"></a-empty>
+
+    <!--    分页-->
+    <div style="float: right; margin-top: 20px">
+      <a-pagination
+        show-quick-jumper
+        showSizeChanger
+        :pageSizeOptions="['10', '20', '30']"
+        :showTotal="(total, range) => {return range[0] + '-' + range[1] + ' 共' + total + '条'}"
+        :default-current="2"
+        :total="tableData.length"
+        @change="handleTabelChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProjectTable',
+  props: {
+    columnData: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    },
+    // 表格数据
+    tableData: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    },
+    // 是否显示跳转会议的按钮
+    showMeetingBtn: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 按钮上显示的文字
+    buttonText: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    /**
+     * 分页变化抛出值
+     * @param page
+     * @param pageSize
+     */
+    handleTabelChange(page, pageSize) {
+      let pagination = {
+        current: page,
+        pageSize: pageSize
+      }
+      this.$emit('change', pagination)
+    },
+    /**
+     * 跳转至会议页面
+     */
+    toMeeting() {
+      this.$router.push({
+        path: '/meetingActivity/MeetingActivity'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.column {
+  height: 50px;
+  background: #f0f1f2;
+
+  .ant-col {
+    text-align: center;
+    line-height: 50px;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Bold;
+    font-weight: 700;
+    color: #333333;
+    padding: 0 15px;
+    overflow: hidden;
+    word-break: keep-all;
+    text-overflow: ellipsis;
+  }
+}
+
+.table-item {
+  margin-top: 10px;
+  height: 130px;
+  box-sizing: border-box;
+  border: 1px solid #d5d5d5;
+
+  &-title {
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #f0f1f2;
+    box-shadow: -1px 0px 0px 0px #e3e3e5;
+    padding: 0 15px;
+  }
+
+  &-content {
+    height: 70px;
+
+    .ant-col:first-child {
+      font-size: 16px;
+      font-family: PingFang SC, PingFang SC-Bold;
+      font-weight: 700;
+      color: #069f99;
+    }
+
+    .ant-col {
+      text-align: center;
+      padding: 0 15px;
+      height: 100%;
+      line-height: 70px;
+      overflow: hidden;
+      word-break: keep-all;
+      text-overflow: ellipsis;
+    }
+  }
+
+}
+</style>