wt_project_web_bak/src/views/database/component/list.vue

<template>
  <div class="full-height full-width flex flex-col">
    <div class="white-bg flex flex-align-center padding">
      <!--      <el-select-->
      <!--          v-model="keyWords"-->
      <!--          class="mt-10 ml-10"-->
      <!--          clearable-->
      <!--          placeholder="排列方式"-->
      <!--      />-->
      <div class="flex flex-align-center tip mt-10">
        <el-icon class="ml-20" color="#ECAB56">
          <WarningFilled />
        </el-icon>
        <span class="ml-5">共找到相关资料{{ page.total }}份</span>
      </div>
    </div>
    <div class="crud">
      <avue-crud
        ref="crud"
        v-model="form"
        v-model:page="page"
        :before-open="beforeOpen"
        :data="data"
        :option="option"
        :table-loading="loading"
        @row-del="rowDel"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
      >
      </avue-crud>
    </div>
    <el-dialog v-model="showInfo" append-to-body width="45%">
      <dialog-info :id="id" />
    </el-dialog>
  </div>
</template>

<script>
import dialogInfo from './dialog_info.vue'

export default {
  name: 'list',
  components: { dialogInfo },
  data() {
    return {
      showInfo: false,
      keyWords: '',
      loading: false,
      data: [],
      form: {},
      option: {
        calcHeight: 30,
        refreshBtn: false,
        tip: false,
        columnBtn: false,
        searchShow: true,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        border: true,
        index: true,
        align: 'center',
        viewBtn: true,
        dialogClickModal: false,
        column: [
          {
            label: '文件名称',
            prop: 'title',
            width: 340
          },
          {
            label: '所属项目',
            prop: 'projectName',
            width: 240
          },
          {
            label: '文件格式',
            prop: 'suffix'
          },
          {
            label: '上传人',
            prop: 'createUserName'
          },
          {
            label: '上传时间',
            prop: 'createTime',
            width: 200
          }
        ]
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      id: ''
    }
  },
  created() {
    this.$bus.on('serachFile', res => {
      this.onLoad(res)
    })
  },
  methods: {
    onLoad(query = {}) {
      this.page.current = this.page.currentPage
      this.page.size = this.page.pageSize
      const data = { ...query, ...this.page }
      this.loading = true
      this.$api.database.fileList(data).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.data = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    currentChange(currentPage) {
      this.page.current = currentPage
    },
    sizeChange(pageSize) {
      this.page.size = pageSize
    },
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    beforeOpen(done, type) {
      if (['view'].includes(type)) {
        this.showInfo = true
        console.log(this.showInfo)
        this.id = this.form.id
      } else if (type === 'edit') {
        this.$router.push({
          path: '/home/details',
          query: { id: this.form.id, type: '1' }
        })
      }
    },
    rowDel(row) {
      this.$confirm('确定删除选择的项目?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.database.fileRemove({ ids: row.id }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.onLoad()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    choise(index) {
      this.active = index
    }
  }
}
</script>

<style lang="scss" scoped>
.crud {
  :deep(.avue-crud__menu) {
    min-height: 5px;
  }
}

.tip {
  width: 260px;
  height: 32px;
  background-color: #fbf6ed;
  color: #ecab56;
  font-weight: 500;
  flex-wrap: nowrap;
  margin-left: 20px;
}
</style>