productivity-platform-web/src/views/home/index.vue

<template>
  <div class="base">
    <div class="content">
      <div class="words">
        <h1>渐进、交互式文档生成</h1>
        <p>
          覆盖房地产、土地和各类资产评估报告自动生成。
          <br />支持测算表生成和下载，亦可以应用于文档。
          <br />用户仅需提交必要评估物数据和测算数据，由平台自动生成商业级评估报告。
        </p>
      </div>
      <div style="display:flex;">
        <div class="option" style="display: inline-block">
          <div class="create-btn">
            <button class="cssbuttons-io-button" @click="goto('house/parent')">
              房地产
              <div class="icon">
                <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0 0h24v24H0z" fill="none" />
                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor" />
                </svg>
              </div>
            </button>
            <button class="cssbuttons-io-button" @click="goto('assets/parent')">
              资产
              <div class="icon">
                <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0 0h24v24H0z" fill="none" />
                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor" />
                </svg>
              </div>
            </button>
            <button class="cssbuttons-io-button" @click="goto('planning')">
              土地
              <div class="icon">
                <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0 0h24v24H0z" fill="none" />
                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor" />
                </svg>
              </div>
            </button>
          </div>
          <div class="example-list" style="min-height:500px;">
            <div class="input-container">
              <el-input v-model="listQuery.docName" style="max-width: 300px; margin-bottom: 10px;" placeholder="关键字搜索" class="input-with-select">
                <template #append>
                  <el-button type="primary" @click="getDocuments()">
                    <el-icon color="#ff6154">
                      <Search />
                    </el-icon>
                  </el-button>
                </template>
              </el-input>
            </div>
            <div class="dayChoice_div">
              <el-button link style="border:0;width:10px;margin-right: 10px;" @click="activeBtn--, choiceDay(activeBtn)" :disabled="activeBtn <= 0">
                <el-icon>
                  <Back />
                </el-icon>
              </el-button>
              <el-button v-for="(item, index) in days" :key="index" text :class="{ show: index === activeBtn }" style="border:0;width:10px;margin:0" @click="choiceDay(index)">{{ item.id }}</el-button>
              <el-button link style="border:0;width:10px" @click="activeBtn++, choiceDay(activeBtn)" :disabled="activeBtn >= (days.length - 1)">
                <el-icon>
                  <Right />
                </el-icon>
              </el-button>
            </div>
            <el-card class="report-item no-border" shadow="never" v-for="(doc, id) in page" v-if="page !== null && page.length !== 0">
              <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" @click="downloadFile(doc.docUrl, doc.docName)">
                <el-icon>
                  <Download />
                </el-icon>
              </div>
            </el-card>
            <div class="null-div" v-if="page === null || page.length == 0">
              <img src="../../assets/icons/null.png" style="width: 128px; height: 128px;" />
              <div>
                <span>还没有项目</span>
              </div>
            </div>
          </div>
        </div>
        <el-tree
          ref="treeDataYear"
          style="width: 300px;display: inline-block;margin-top: 10px;margin-left:20px"
          :data="treeDataYear"
          accordion
          node-key="id"
          highlight-current
          :default-expanded-keys="[1]"
          :default-checked-keys="[101]"
          icon="none"
          :check-on-click-node="true"
          @node-click="nodeClick"
        />
      </div>

      <div class="pagination" v-if="page !== null && page.length !== 0">
        <el-pagination background layout="prev, pager, next" style="--el-color-primary: #ff6154" :page-count="listQuery.pages" v-model:current-page="listQuery.current" @current-change="getDocuments" />
      </div>
    </div>
  </div>
</template>

<script>
import { loginByOAInfo } from '@/api/user'
import { setToken, getToken } from '@/utils/auth'
import { mapStores } from 'pinia'
import { useUserStore } from '@/stores/useUserStore'
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'
import fileUtil from '@/utils/file'

export default {
  data() {
    return {
      activeBtn: 0,
      days: [],
      treeDataYear: [],
      page: [],
      listQuery: {
        current: 1,
        size: 10,
        pages: null,
        total: null,
        createDate: null,
        docName: null,
      },
    }
  },
  mounted() {
    // 使用$nextTick 等页面加载完毕之后,再选中tree组件默认节点，防止加载顺序问题
    this.$nextTick(function () {
      // 这行会生效
      let childrenIndex = 0
      // 默认拿当前月份
      switch (new Date().getMonth() + 1) {
        case 12:
          childrenIndex = 0
          break
        case 11:
          childrenIndex = 1
          break
        case 10:
          childrenIndex = 2
          break
        case 9:
          childrenIndex = 3
          break
        case 8:
          childrenIndex = 4
          break
        case 7:
          childrenIndex = 5
          break
        case 6:
          childrenIndex = 6
          break
        case 5:
          childrenIndex = 7
          break
        case 4:
          childrenIndex = 8
          break
        case 3:
          childrenIndex = 9
          break
        case 2:
          childrenIndex = 10
          break
        case 1:
          childrenIndex = 11
          break
      }
      this.$refs.treeDataYear.setCurrentKey(this.treeDataYear[0].children[childrenIndex].id)
      this.setDay(this.$refs.treeDataYear.getCurrentNode())
    })
  },
  computed: {
    // 非setup语法,需要使用mapStores()才能访问
    // 直接放在生命周期函数也可以访问,但是似乎会导致持久化失效,没找到解决办法,建议还是用mapStores
    // 名字会变成id + 'Store' 的形式,比如id本来是user,那么这种方式使用就需要变成this.userStore.xxx
    ...mapStores(useUserStore),
  },
  created() {
    this.login()
    // this.getDocuments();
    this.setYearMonth()
  },
  methods: {
    nodeClick(node) {
      this.setDay(node)
    },
    choiceDay(index) {
      this.activeBtn = index
      this.listQuery.createDate = this.days[index].date
      this.getDocuments()
    },
    // 设置横向的天数
    setDay(node) {
      this.days = []
      if (node.year) {
        // 计算是平年还是闰年
        let dayLength = 31
        if ((node.year % 4 === 0 && node.year % 100 !== 0) || node.year % 400 === 0) {
          // 闰年且二月
          if (node.month === 2) {
            dayLength = 28
          } else if ([1, 3, 5, 7, 8, 10, 12].includes(node.month)) {
            dayLength = 31
          } else {
            dayLength = 30
          }
        } else {
          if (node.month === 2) {
            dayLength = 29
          } else if ([1, 3, 5, 7, 8, 10, 12].includes(node.month)) {
            dayLength = 31
          } else {
            dayLength = 30
          }
        }
        for (let index = 1; index <= dayLength; index++) {
          this.days.push({ id: index, date: node.year + '-' + node.month + '-' + index })
        }
      }
      // 默认选中当前月的第一天
      this.choiceDay(0)
    },
    // 设置tree组件节点
    setYearMonth() {
      const currentYear = new Date().getFullYear() // 获取当前年份
      let idVal = 100
      for (let i = 0; i < 10; i++) {
        const month = [
          {
            id: null,
            label: '十二月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '十一月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '十月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '九月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '八月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '七月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '六月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '五月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '四月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '三月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '二月',
            year: null,
            month: null,
          },
          {
            id: null,
            label: '一月',
            year: null,
            month: null,
          },
        ]
        let m = 12
        for (let n = 1; n <= month.length; n++) {
          // 设置id
          month[n - 1].id = n + idVal
          // 设置节点的年月
          month[n - 1].year = currentYear - i
          month[n - 1].month = m--
        }
        this.treeDataYear.push({ id: i + 1, label: currentYear - i, children: month })
        idVal = idVal + 100
      }
    },
    goto(path) {
      this.$router.push(`/home/${path}`)
    },
    login() {
      // 如果路由上带了token,说明是从oa刚跳转过来,需要进行登录
      // 解析url获取token
      var url = window.location.href //获取当前url
      var dz_url = url.split('#')[0] //获取#之前的字符串
      var cs = url.split('?')[1] //获取?之后的参数字符串
      // 判断参数是否为空
      if (cs) {
        var cs_arr = cs.split('&') //参数字符串分割为数组
        var params = {}
        for (var i = 0; i < cs_arr.length; i++) {
          //遍历数组，拿到json对象
          params[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
        }

        let token = params.token
        if (token) {
          loginByOAInfo(token).then((res) => {
            setToken(res.data.tokenValue)
            this.userStore.setUserInfo(res.data)
            // 登录成功,重新跳转到主页
            this.$router.push(`/home/index`)
          })
        }
      }
    },
    getDocuments() {
      documentProduction.page(this.listQuery).then((res) => {
        if (res.code === 200) {
          this.page = res.data.records
          this.listQuery.pages = res.data.pages
        }
      })
    },
    docLog(docType) {
      switch (docType) {
        case 'CALCULATE_TABLE':
          return excelLog
        case 'FOLDER':
          return folderLog
        default:
          return wordLog
      }
    },
    // 下载文件
    downloadFile(docUrl, docName) {
      if (docUrl && docName) {
        let downloadUrl = '/file/download?fileDiskPath=' + docUrl + '&fileName=' + docName
        fileUtil.download(downloadUrl)
      } else {
        ElMessage({
          showClose: true,
          message: '文档还未生成,请完成生成步骤!',
          type: 'warning',
        })
      }
    },
  },
}
</script>
<style scoped>
:deep(.el-input__wrapper.is-focus) {
  --el-input-focus-border: #ff6154;
  --el-input-focus-border-color: #ff6154;
}
:deep(.el-button--text:hover) {
  color: #ff6154;
}

:deep(.el-button--text) {
  color: #ff6154;
}
.input-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: flex-end; /* 右对齐 */
}
.show {
  color: #ff6154;
  background-color: #fdf0ee;
}

.dayChoice_div {
  height: 45px;
  /* 灰色边框线 */
  border: 1px solid #cccccc;
  /* 圆角 */
  border-radius: 10px;
  line-height: 38px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}

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

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

.words {
  padding: 70px 20px 20px 20px;
  background: linear-gradient(180deg, transparent, hsla(0, 0%, 95%, 0.29) 47.39%, #fff),
    linear-gradient(90deg, #f9ddf1 0.07%, #e5e1ff 16.73%, #daedff 34.48%, #e2f4e3 49.98%, #ebf5d8 66.12%, #faf2da 81.95%, #fbe5d8 99.9%);
}

h1 {
  margin-left: 160px;
  font-size: 50px;
  font-weight: 400;
}

p {
  margin-left: 160px;
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 20px;
}

.option {
  width: 58.5%;
  margin-top: 10px;
  margin-left: 160px;
  border-right: 1.5px #dae1eb solid;
  padding: 0px 20px 20px 20px;
}

.create-btn {
  height: 50px;
}

/* From Uiverse.io by adamgiebl */
.cssbuttons-io-button {
  background: #ff6154;
  color: white;
  padding: 0.35em;
  padding-left: 1.2em;
  font-size: 20px;
  font-weight: 400;
  border-radius: 0.3em;
  border: none;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 1.6em -0.6em #ff6154;
  overflow: hidden;
  position: relative;
  height: 2.7em;
  padding-right: 3.3em;
  cursor: pointer;
  margin-right: 20px;
  float: left;
  width: 8em;
}

.cssbuttons-io-button .icon {
  background: white;
  margin-left: 1em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  width: 2.2em;
  border-radius: 0.3em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em #ff6154;
  right: 0.3em;
  transition: all 0.3s;
}

.cssbuttons-io-button:hover .icon {
  width: calc(100% - 0.6em);
}

.cssbuttons-io-button .icon svg {
  width: 1.1em;
  transition: transform 0.3s;
  color: #ff6154;
}

.cssbuttons-io-button:hover .icon svg {
  transform: translateX(0.1em);
}

.cssbuttons-io-button:active .icon {
  transform: scale(0.95);
}

.no-border {
  border: none;
  border-radius: 0.6em;
}

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

:deep(.el-tree-node__content:hover) {
  border-radius: 5px;
  color: #ff6154;
  background-color: #fdf0ee !important;
}

:deep(v-deep .el-tree-node.is-current > .el-tree-node__content) {
  margin: 5px;
  border-radius: 5px;
  color: #ff6154;
  background-color: #fdf0ee !important;
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  border-radius: 5px;
  color: #ff6154;
  background-color: #fdf0ee !important;
}

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