wt_project_web_bak/src/views/store/component/info2.vue

<template>
  <div>
    <div class="padding top flex flex-center flex-justify-between">
      <span>入库智能预警</span>
      <div class="flex flex-center grey-6">
        <el-icon><InfoFilled /></el-icon>
        <span class="ml-5">可以根据文件名在入库附件清单中，进行查看</span>
      </div>
    </div>
    <div class="padding-left padding-right" style="padding: 20px">
      <avue-crud
        :option="option"
        :data="active === 1 ? data : data2"
        ref="crud"
        v-model="form"
        :before-open="beforeOpen"
      >
        <template #menu-left>
          <div class="flex flex-center flex-justify-start padding-left">
            <el-button type="primary" :plain="active === 2" @click="change(1)"
              >系统问题预警</el-button
            >
            <el-button type="primary" :plain="active === 1" @click="change(2)"
              >项目预审问题</el-button
            >
          </div>
        </template>
        <template #menu-right>
          <el-button
            type="primary"
            plain
            v-if="user.info.viewStage === 1"
            @click="show = true"
            >新 增
          </el-button>
        </template>
        <template #isFixed="{ row }">
          <div>
            <el-tag v-if="row.isFixed === 0">未处理</el-tag>
            <el-tag v-else-if="row.warnStatus === 1">已解决</el-tag>
            <el-tag v-else-if="row.warnStatus === 2">已忽略</el-tag>
          </div>
        </template>
      </avue-crud>
    </div>
    <el-dialog v-model="show" title="新增预审问题" width="800px">
      <div>
        <el-input type="textarea" rows="5" v-model="problem"></el-input>
        <div class="full-width flex flex-justify-end mt-20">
          <el-button plain type="primary" @click="show = false"
            >取 消
          </el-button>
          <el-button type="primary" @click="addIssue">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

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

export default {
  setup() {
    const user = useStore()
    return { user }
  },
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      active: 1,
      problem: '',
      show: false,
      form: {},
      data: [],
      data2: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        menuWidth: 180,
        height: 525,
        size: 'mini',
        delBtn: false,
        viewBtn: true,
        addBtn: false,
        editBtnText: '解决',
        viewBtnText: '忽略',
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 140,
        border: true,
        column: [
          {
            label: '存在问题描述',
            prop: 'content'
          },
          {
            label: '文件名称',
            prop: 'fileName'
          },
          {
            label: '状态',
            prop: 'isFixed',
            width: 100,
            slot: true
          },
          {
            label: '创建实际',
            prop: 'createTime'
          }
        ]
      }
    }
  },
  created() {
    this.pid = this.$route.query.id
    this.onLoad()
  },
  methods: {
    addIssue() {
      if (this.problem.length === 0) {
        this.$message.error('请输入预审问题描述')
        return
      }
      this.$api.store
        .addIssue({
          projectId: this.info.projectId,
          content: this.problem,
          type: 2,
          preId: this.pid,
          fileId: ''
        })
        .then(res => {
          if (res.code === 200) {
            this.show = false
            this.$message.success(res.msg)
            this.onLoad()
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    onLoad() {
      this.$api.store.fileList({ id: this.pid }).then(res => {
        if (res.code === 200 && res.data.files.length > 0) {
          this.data = res.data.warnings.filter(ele => ele.type === 1)
          this.data2 = res.data.warnings.filter(ele => ele.type === 2)
        }
      })
    },
    beforeOpen(done, type) {
      this.$api.store
        .changeWarn({ id: this.form.id, type: type === 'view' ? 2 : 1 })
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.onLoad()
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    change(index) {
      this.active = index
      this.option.column[1].hide = false
      if (index === 2) {
        this.option.column[1].hide = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 35px;
  border-radius: var(--el-card-border-radius);
  background-color: #f5f5f3;
}
</style>