Vent-App/pages/filecenter/filecenter.vue

<template name="filecenter">
  <view class="container">
    <u-navbar title="文件中心" :safeAreaInsetTop="true" leftIcon=""> </u-navbar>
    <view class="main">
      <u-subsection
        :list="sectionList"
        mode="subsection"
        :current="curNow"
        @change="sectionChange"
      ></u-subsection>
      <u-list>
        <u-list-item
          class="itemback"
          v-for="(item, index) in fileData"
          :key="index"
        >
          <div class="content flcard" @tap="openFile(item)">
            <view
              class="demo-layout bg-purple-light"
              style="margin-bottom: 20rpx"
            >
              <view style="margin-top: 10rpx">
                <text class="text-style1">{{ item.fileName }}</text>
              </view>
            </view>
            <view class="datacard laiyuan">
              <view style="margin: 20rpx 20rpx">
                <text class="text-style">{{ item.fileSource }}</text>
              </view>
              <view style="margin: 20rpx 20rpx; font-size: small"
                >文件来源</view
              >
            </view>
            <view class="datacard zhuangtai">
              <view style="margin: 20rpx 20rpx">
                <text class="text-style">{{ item.bpmStatus_dictText }}</text>
              </view>
              <view style="margin: 20rpx 20rpx; font-size: small"
                >审批状态</view
              >
            </view>
            <view class="datacard user">
              <view style="margin: 20rpx 20rpx">
                <text class="text-style">{{ item.createBy }}</text>
              </view>
              <view style="margin: 20rpx 20rpx; font-size: small">创建人</view>
            </view>
            <view class="datacard time">
              <view style="margin: 20rpx 20rpx">
                <text class="text-style">{{ item.createTime }}</text>
              </view>
              <view style="margin: 20rpx 20rpx; font-size: small"
                >上传时间</view
              >
            </view>
          </div>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import { computed } from "uview-ui/libs/mixin/mixin";
export default {
  components: {},
  name: "filecenter",
  watch: {},
  data() {
    return {
      sectionList: [
        { name: "全部", code: 0 },
        { name: "待审批", code: 1 },
        { name: "已审批", code: 2 },
      ],
      curNow: 0,
      fileData: [],
      bpmStatus: 1, //1处理中  2 已完成  3 已驳回
    };
  },
  mounted() {
    this.getFileInfo();
  },
  computed: {},
  methods: {
    sectionChange(newVal) {
      this.curNow = newVal;
      if (this.curNow === 0) {
        // 如果选择了“全部”，返回所有文件
        this.bpmStatus = "";
        this.getFileInfo(this.bpmStatus);
      } else if (this.curNow === 1) {
        // 否则，根据curNow的值过滤文件
        this.bpmStatus = 1;
        this.getFileInfo(this.bpmStatus);
      } else if (this.curNow === 2) {
        this.bpmStatus = 2;
        this.getFileInfo(this.bpmStatus);
      }
    },
    getFileInfo(code) {
      var params = {
        bpmStatus: code,
        column: "createTime",
        fileSuffix: "",
        likeFileName: "",
        pageNo: 1,
        pageSize: 10000,
        parentId: "",
        selectFlag: true,
        sysOrgCode: "",
      };
      new Promise((resolve, reject) => {
        api
          .getFileInfo(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.fileData = response.data.result.records;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    openFile(params) {
      uni.navigateTo({
        url: `/pages/filecenter/fileModel?id=${params.id}&type=${params.fileSuffix}`,
      });
    },
  },
};
</script>

<style scoped>
.main {
  /* margin-top: 100rpx; */
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  margin-top: 80px; /* 内容区域顶部留出导航栏的高度 */
}

.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.text-style {
  color: #3787fe;
  font-weight: bold;
}
.text-style1 {
  color: #000000;
  font-size: large;
  font-weight: bold;
}
.datacard {
  width: 48%;
  margin: 1%;
  float: left;
  height: 120rpx;
  border-radius: 10px;
}
.time {
  background: url(/static/filecenter/time.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.laiyuan {
  background: url(/static/filecenter/laiyuan.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.user {
  background: url(/static/filecenter/user.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.zhuangtai {
  background: url(/static/filecenter/zhuangtai.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.datacard1 {
  width: 100%;
  margin: 1%;
  float: left;
  height: 100rpx;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
}
</style>