productivity-platform-web/src/views/house/folder/parent.vue

<template>
  <div class="contrl">
    <div style="width: 95%;">
      <div class="title-div">
        <span>房地产工作台</span>
      </div>
    </div>
    <!-- <div class="createNew-div" @click="createFolder" >
            <img src="../../../assets/icons/folder.png" style="width: 32px; height: 32px; float: left;margin-top: 22px;" />
            <span style="margin-left: 10px;">新的项目</span>
            <img src="../../../assets/icons/plus.png" style="width: 32px; height: 32px;float: right;margin-top: 22px;" />
          </div> -->
    <div class="createNew-div" @click="createWord()">
      <img src="../../../assets/icons/word.png" style="width: 32px; height: 32px; float: left;margin-top: 22px;" />
      <span style="margin-left: 10px;">抵押类报告</span>
      <img src="../../../assets/icons/plus.png" style="width: 32px; height: 32px;float: right;margin-top: 22px;" />
    </div>
    <!-- <div class="createNew-div">
            <img src="../../../assets/icons/excel.png" style="width: 32px; height: 32px; float: left;margin-top: 22px;" />
            <span style="margin-left: 10px;">新的测算表</span>
            <img src="../../../assets/icons/plus.png" style="width: 32px; height: 32px;float: right;margin-top: 22px;" />
          </div> -->
    <el-tabs v-model="activeName" class="condtion-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部项目" name="all">
        <div class="example-list">
          <el-card class="report-item no-border" shadow="never" v-for="(doc, id) in allPage">
            <div class="report-icon">
              <img :src="docLog(doc.docType)" style="width: 52px; height: 52px;" />
            </div>
            <div class="report-text">
              <div>
                <span class="report-text-type">{{ doc.businessType + doc.businessCate + '【' + doc.docNo + '】' }}</span>
                <span> 一 </span>
                <span class="report-text-name" @click="docDetail(doc.id)">{{ doc.docName }}</span>
              </div>
              <div style="padding-top: 5px;">
                <span>
                  <el-icon>
                    <Avatar />
                  </el-icon>
                  {{ doc.consignor }}</span>
                <span>
                  <el-tag style="margin-left: 5px;">
                    {{ doc.businessType }}
                  </el-tag>
                  <el-tag style="margin-left: 5px;" type="success">
                    {{ doc.businessCate }}
                  </el-tag>
                </span>
                <span style="float: right; color:darkgrey">
                  {{ doc.updateTime }}
                </span>
              </div>
            </div>
            <div class="report-button">
              <el-icon>
                <Download />
              </el-icon>
            </div>
          </el-card>
        </div>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" style="--el-color-primary: #ff6154"
            :page-count="listQuery1.pages" v-model:current-page="listQuery1.current" @current-change="getAllDocuments" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="进行中的项目" name="pending">
        <div class="example-list">
          <el-card class="report-item no-border" shadow="never" v-for="(doc, id) in allPage">
            <div class="report-icon">
              <img :src="docLog(doc.docType)" style="width: 52px; height: 52px;" />
            </div>
            <div class="report-text">
              <div>
                <span class="report-text-type">{{ doc.businessType + doc.businessCate + '【' + doc.docNo + '】' }}</span>
                <span> 一 </span>
                <span class="report-text-name">{{ doc.docName }}</span>
              </div>
              <div style="padding-top: 5px;">
                <span>
                  <el-icon>
                    <Avatar />
                  </el-icon>
                  {{ doc.consignor }}</span>
                <span>
                  <el-tag style="margin-left: 5px;">
                    {{ doc.businessType }}
                  </el-tag>
                  <el-tag style="margin-left: 5px;" type="success">
                    {{ doc.businessCate }}
                  </el-tag>
                </span>
                <span style="float: right; color:darkgrey">
                  {{ doc.updateTime }}
                </span>
              </div>
            </div>
            <div class="report-button">
              <el-icon>
                <Download />
              </el-icon>
            </div>
          </el-card>
        </div>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" style="--el-color-primary: #ff6154"
            :page-count="listQuery1.pages" v-model:current-page="listQuery1.current" @current-change="getPendingDocuments" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="已完成的项目" name="finished">
        <div class="example-list">
          <el-card class="report-item no-border" shadow="never" v-for="(doc, id) in allPage">
            <div class="report-icon">
              <img :src="docLog(doc.docType)" style="width: 52px; height: 52px;" />
            </div>
            <div class="report-text">
              <div>
                <span class="report-text-type">{{ doc.businessType + doc.businessCate + '【' + doc.docNo + '】' }}</span>
                <span> 一 </span>
                <span class="report-text-name">{{ doc.docName }}</span>
              </div>
              <div style="padding-top: 5px;">
                <span>
                  <el-icon>
                    <Avatar />
                  </el-icon>
                  {{ doc.consignor }}</span>
                <span>
                  <el-tag style="margin-left: 5px;">
                    {{ doc.businessType }}
                  </el-tag>
                  <el-tag style="margin-left: 5px;" type="success">
                    {{ doc.businessCate }}
                  </el-tag>
                </span>
                <span style="float: right; color:darkgrey">
                  {{ doc.updateTime }}
                </span>
              </div>
            </div>
            <div class="report-button">
              <el-icon>
                <Download />
              </el-icon>
            </div>
          </el-card>
        </div>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" style="--el-color-primary: #ff6154"
            :page-count="listQuery1.pages" v-model:current-page="listQuery1.current" @current-change="getFinishedDocuments" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import documentProduction from '@/api/documentProduction';
import wordLog from '../../../assets/icons/word.png'
import excelLog from '../../../assets/icons/excel.png'
import folderLog from '../../../assets/icons/folder.png'
export default {
  name: 'houseParent',
  data() {
    return {
      msg: 0,
      activeName: 'all',
      allPage: [],
      listQuery1: {
        current: 1,
        size: 10,
        pages: null,
        total: null,
        state:null,
      },
      pendingPage: [],
      listQuery2: {
        current: 1,
        size: 10,
        pages: null,
        total: null,
        state:0
      },
      finshedPage: [],
      listQuery3: {
        current: 1,
        size: 10,
        pages: null,
        total: null,
        state:1
      }
    }
  },

  created() {
    this.getAllDocuments();
  },

  methods: {
    createWord() {
      this.$router.push('/home/houseWorkbench/consignor')
    },
    nextFolder(folderName) {
      this.$router.push({ path: '/home/house/folder', query: { 'folderName': folderName } })
    },
    createFolder() {
      ElMessageBox.prompt('请输入项目文件夹名称', '', {
        confirmButtonText: '创建',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          ElMessage({
            type: 'success',
            message: `Your email is:${value}`,
          })
        })
    },

    handleClick(tab){
      if(tab.props.name==='pending'){
        this.getPendingDocuments();
      }
      if (tab.props.name==='finished'){
        this.getFinishedDocuments();
      }
      if (tab.props.name === 'all'){
        this.getAllDocuments();
      }
    },
    getAllDocuments() {
      documentProduction.page(this.listQuery1).then(res => {
        if (res.code === 200) {
          this.allPage = res.data.records;
          this.listQuery1.pages = res.data.pages;
        }
      })
    },
    getPendingDocuments() {
      documentProduction.page(this.listQuery2).then(res => {
        if (res.code === 200) {
          this.pendingPage = res.data.records;
          this.listQuery2.pages = res.data.pages;
        }
      })
    },
    getFinishedDocuments() {
      documentProduction.page(this.listQuery3).then(res => {
        if (res.code === 200) {
          this.finshedPage = res.data.records;
          this.listQuery3.pages = res.data.pages;
        }
      })
    },
    docLog(docType) {
      switch (docType) {
        case 'CALCULATE_TABLE':
          return excelLog;
        case 'FOLDER':
          return folderLog;
        default:
          return wordLog;
      }
    },
    docDetail(id){
      this.$router.push({path:"/home/houseWorkbench/consignor",query:{'id':id}});
    }
  }
}

</script>

<style scoped>
.base {
  min-height: calc(100vh - 80px);
  width: 100%;
}

.content {
  margin-left: 160px;
  margin-right: 160px;
  padding: 50px 20px 20px 20px;

}

.contrl {
  width: 70.9%;
  border-right: 1.5px #dae1eb solid;
  padding: 0px 20px 20px 0px;
  float: left;

}

.condtion-tabs {
  margin-top: 80px;
  min-height: 600px;
}

:deep(.el-tabs__active-bar) {
  background-color: #ff6154;
}

:deep(.el-tabs__item.is-active) {
  color: #ff6154;
}

:deep(.el-tabs__item:hover) {
  color: #ff6154;
}

.title-div {
  height: 80px;
  line-height: 80px;
  width: 200px;
  float: left;
  font-size: 20px;
  font-weight: 900;
}

.createNew-div {
  height: 80px;
  line-height: 80px;
  border: #dae1eb 1.5px solid;
  border-radius: 0.6em;
  width: 200px;
  float: right;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 20px;
}

.createNew-div:hover {
  cursor: pointer;
  background-color: #dae1eb;
  border: #dae1eb 1.5px solid;
  transition: 0.5s;
}

:deep(.el-tabs__nav-wrap:after) {
  background-color: white;
}

.null-div {
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top: 20%;
  color: var(--vt-c-text-light-2);
}

.no-border {
  border: none;
}

.no-border:hover {
  cursor: pointer;
}

.pagination {
  margin-top: 10px;
  margin-left: 160px;
  width: 58.5%;
  justify-content: center;
  display: flex;
}
</style>