Vent-App/pages/filecenter/filecenter.vue

<template name="filecenter">
  <view class="container">
    <u-navbar
      title="文件中心"
      :safeAreaInsetTop="false"
      style="margin-top: 30px"
      leftIcon=""
    >
    </u-navbar>
    <view class="main">
      <u-subsection
        :list="list"
        mode="subsection"
        :current="curNow"
        @change="sectionChange"
      ></u-subsection>
      <u-list>
        <u-list-item
          class="itemback"
          v-for="(item, index) in fileData"
          :key="index"
        >
          <view class="">
            <view class="content flcard">
              <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>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  components: {},
  name: "filecenter",
  watch: {},
  data() {
    return {
      list: [{ name: "全部" }, { name: "待审批" }, { name: "已审批" }],
      curNow: 0,
      fileData: [],
    };
  },
  mounted() {
    this.getFileInfo();
  },
  methods: {
    sectionChange(index) {
      this.curNow = index;
    },
    getFileInfo() {
      var params = {
        bpmStatus: "",
        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);
          });
      });
    },
  },
};
</script>

<style scoped>
>>> .u-navbar--fixed {
  margin-top: 20px;
}
.main {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
}

.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>