wxjt-asset-web/src/views/assets/fileList.vue

<template>
  <div>
    <!-- 查询配置 -->
    <div>
      <div ref="lxHeader">
        <LxHeader
          :icon="$route.meta.icon"
          :text="$route.meta.title"
          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
        >
          <div slot="content"></div>
          <slot>
            <header-content :auths="auths_auth_mixin">
              <template #search>
                <div style="display: flex;">
                  <Input v-model="select.keyword" placeholder="请输入关键词" clearable/>
                  <Button
                    style="margin-left: 10px;"
                    type="primary"
                    @click="$refs['xyTable'].getTableData()"
                  >查询</Button>
                </div>
              </template>
              <template #create>
                <Button
                  type="primary"
                  @click="$refs['add'].show()"
                >新增</Button>
              </template>
            </header-content>
          </slot>
        </LxHeader>
      </div>
    </div>

    <xy-table
      :btn-width="300"
      :auths="auths_auth_mixin"
      :delay-req="true"
      res-prop="list.data"
      total-prop="list.total"
      ref="xyTable"
      :border="true"
      :action="getFiles"
      :req-opt="select"
      :table-item="table"
      @detail="
        (row) => {
          $router.push({
            path: $route.path + '/detail/' + row.id
          })
        }
      "
    >
    </xy-table>

    <Modal
      :width="76"
      transfer
      :z-index="6000"
      v-model="showModal"
      :footer-hide="true"
      title="预览"
    >
      <template>
        <iframe
          style="width: 100%; height: 57vh"
          :src="codeUri"
          border="0"
        ></iframe>
      </template>
    </Modal>

    <add ref="add" @refresh="$refs['xyTable'].getTableData()"></add>
  </div>
</template>

<script>
import { authMixin } from "@/mixin/authMixin";
import { getFiles } from "@/api/common"
import add from "@/views/assets/component/addFiles.vue"
import LxHeader from "@/components/LxHeader/index.vue";
import headerContent from "@/components/LxHeader/XyContent.vue";
import { download } from '@/utils/downloadRequest'
export default {
  components: {
    LxHeader,
    headerContent,
    add
  },
  mixins: [authMixin],
  data() {
    return {
      wxAreas: [
        "宜兴市",
        "惠山区",
        "新吴区",
        "梁溪区",
        "江阴市",
        "滨湖区",
        "锡山区",
      ],
      codeUri: "",
      showModal: false,
      table: [
        {
          type: "index",
          width: 44
        },
        {
          prop: "original_name",
          label: "文件名称",
          align: "left",
          minWidth: 200
        },
        {
          prop: "asset",
          label: "所属资产",
          width: 180,
          align: "left",
          customFn: row => {
            return (<span>{ row.land?.name ? `[土地]${row.land?.name||''}` : (row.house?.name ? `[房产]${row.house?.name||''}` : '暂无') }</span>)
          }
        },
        {
          prop: "area",
          label: "资产地区",
          width: 140,
          customFn: row => {
            return (<span>{ row.land?.area? this.wxAreas[row.land?.area-1] : this.wxAreas[row.house?.area-1] }</span>)
          }
        },
        {
          prop: "created_at",
          label: "创建时间",
          width: 160
        },
        {
          prop: "operate",
          label: "操作",
          minWidth: 140,
          align: "left",
          fixed: "right",
          customFn: row => {
            return (
              <div>
                <Button size="small"
                        style={{
                          'display': (row.land?.id || row.house?.id) ? 'inline-block' : 'none'
                        }}
                        type="primary"
                        on={{
                          ['click']: _ => {
                            if (row.land?.id) {
                              this.$router.push({
                                path: '/landDetail/' + row.land?.id
                              })
                            } else if (row.house?.id) {
                              this.$router.push({
                                path: '/houseDetail/' + row.house?.id
                              })
                            } else {}
                          }
                        }}>查看资产</Button>
                <Button size="small"
                        type="primary"
                        icon="md-search"
                        on={{
                          ["click"]: _ => {
                            this.open(row.url)
                          }
                        }}>查看文件</Button>
                <Button size="small"
                        type="primary"
                        icon="md-download"
                        on={{
                          ["click"]: _ => {
                            this.down(row)
                          }
                        }}>下载文件</Button>
              </div>
            )
          }
        }
      ],
      select: {
        keyword: ""
      }
    };
  },
  methods: {
    getFiles,

    open(url) {
      this.codeUri = `${process.env.VUE_APP_PREVIEW}?url=${encodeURIComponent(
        new Buffer(url).toString("base64")
      )}`;

      this.showModal = true;
    },

    down(e) {
      download(e.url, "get", {}, e.original_name);
    },
  },

  computed: {
  },
  created() {
  },
};
</script>

<style scoped lang="scss">
.select {
  &__item {
    & > p {
      display: inline-block;
      width: 80px;
      text-align: center;
    }

    & + div {
      margin-top: 6px;
    }
  }
}
.add-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 10px;
  & > span {
    padding: 0 10px;
  }
}

a {
  color: red;
  text-decoration: none;
  transition: all 0.2s;
}

a:hover {
  color: red;
  text-decoration: underline;
}
</style>