wt_project_web_bak/src/views/store/index.vue

<template>
  <el-card shadow="hover" class="wrapper">
    <div class="flex flex-center">
      <el-input
        v-model="keyword"
        placeholder="快速搜索"
        prefix-icon="Search"
      ></el-input>
      <el-button
        type="primary"
        class="ml-20"
        @click="$router.push('/store/detail')"
        >搜 索
      </el-button>
    </div>

    <div class="flex flex-justify-start flex-align-start content">
      <avue-crud
        :option="option"
        :data="data"
        ref="crud"
        v-model="form"
        :before-open="beforeOpen"
        @row-del="rowDel"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @selection-change="selectionChange"
        @on-load="onLoad"
      >
        <template #menu-left="{ row }">
          <div class="mt-20 mb-10">
            <el-button
              type="primary"
              v-if="user.info.viewStage !== 1"
              @click="report(row)"
              >上报预审
            </el-button>
            <el-button type="primary" plain v-if="user.info.viewStage !== 1"
              >删 除
            </el-button>
          </div>
        </template>

        <template #menu-right>
          <div class="mt-20 mb-10">
            <el-button icon="Refresh" circle plain @click="onLoad" />
          </div>
        </template>
        <template #hasfiles="{ row }">
          <el-tag>
            {{ row.hasFiles === 1 ? '已上传' : '未上传' }}
          </el-tag>
        </template>
        <template #isUp="{ row }">
          <el-tag>
            {{ row.isUp === 1 ? '已上报' : '未上报' }}
          </el-tag>
        </template>
      </avue-crud>
    </div>
  </el-card>
</template>

<route>
{
name: '入库项目',
meta: { 'showMsg' : "填写了”项目实际入库时间“的项目将不在预审管理中显示"}
}
</route>

<script>
import { useStore } from '@/store/user.js'

export default {
  setup() {
    const user = useStore()
    return { user }
  },
  data() {
    return {
      keyword: '',
      form: {},
      data: [],
      selectList: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        size: 'mini',
        viewBtn: true,
        editBtn: false,
        tip: false,
        selection: true,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 140,
        border: true,
        column: [
          {
            label: '项目名称',
            prop: 'name'
          },
          {
            label: '责任单位',
            prop: 'unitName'
          },
          {
            label: '入库附件',
            prop: 'hasfiles'
          },
          {
            label: '入库时间',
            prop: 'createTime'
          },
          {
            label: '上报状态',
            prop: 'isUp'
          }
        ]
      },
      page: {
        current: 1,
        size: 10
      }
    }
  },
  methods: {
    onLoad() {
      this.$api.store.list(this.page).then(res => {
        if (res.code === 200) {
          this.data = res.data.records.map(ele => {
            const project = ele.project
            delete project.id
            delete ele.project
            ele.hasfile = ele.hasFile
            return Object.assign(ele, project)
          })
        }
      })
    },
    rowDel(row) {
      this.$confirm('确定删除选择的项目?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        if (res === 'confirm') {
          this.$api.store.remove({ ids: row.id }).then(res => {
            if (res.code === 200) {
              this.onLoad()
            }
          })
        }
      })
    },
    selectionChange(list) {
      this.selectList = list
    },
    beforeOpen(done, type) {
      if (type === 'view') {
        const data = this.$router.resolve({
          path: '/store/detail',
          query: { id: this.form.id, projectId: this.form.projectId }
        })
        window.open(data.href, '_blank')
      } else {
        done()
      }
    },
    report() {
      const tmps = this.selectList.filter(ele => ele.hasFiles === 0)
      if (tmps.length > 0) {
        this.$message.error('操作失败，存在未上传入库附件的项目')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;

  .left {
    width: 400px;
    height: 900px;
  }

  .center {
    width: 900px;
  }
}
</style>