wt_project_web_bak/src/views/home/component/inspect/Inspect1.vue

<template>
  <div class='flex flex-justify-start flex-align-center flex-col'>
    <span class='bold full-width text-left mt-20'>{{ info.dictValue }}</span>
    <div style='width: 95%;' class='mt-20'>
      <avue-crud
          :option="option"
          :data="data"
          ref="crud"
          v-model="form"
          v-model:page='page'
          :table-loading="loading"
          :before-open="beforeOpen"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @row-del="rowDel"
          @row-save="rowSave"
          @row-update="rowUpdate">
        <template #menu="{row}">
          <el-button v-if='row.hasReport' text type='primary' icon='el-icon-plus' @click='report(row)'>
            {{ row.isReport === 1 ? "已上报" : "上报" }}
          </el-button>
        </template>
      </avue-crud>
    </div>
  </div>
</template>

<script>
import option1 from '@/views/home/component/inspect/option1.js'
import option2 from '@/views/home/component/inspect/option2.js'
import option3 from '@/views/home/component/inspect/option3.js'
import option4 from '@/views/home/component/inspect/option4.js'
import option5 from '@/views/home/component/inspect/option5.js'

export default {
  name: 'Inspect1',
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  watch: {
    info: {
      handler (val) {
        if (val) {
          this.changeColum(val.dictKey)
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      loading: false,
      form: {},
      data: [],
      projectId: '',
      page: {
        size: 10,
        current: 1
      },
      option: {
        align: 'center',
        menuAlign: 'center',
        addBtn: true,
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 140,
        border: true,
        column: [
          {
            label: '工作推荐情况描述',
            prop: 'description',
            span: 24,
            type: 'textarea'
          },
          {
            label: '填报时间',
            prop: 'createTime',
            display: false
          },
          {
            label: '是否已经上报',
            prop: 'isReport',
            type: 'select',
            display: false,
            dicData: [
              {
                label: '否',
                value: 0
              },
              {
                label: '是',
                value: 1
              }
            ]
          },
          {
            label: '上报时间',
            prop: 'reportTime',
            display: false
          }
        ]
      }
    }
  },
  created () {
    this.projectId = this.$route.query.id
    this.onLoad()
  },
  methods: {
    changeColum (key) {
      if (key === '1') {
        this.option = option1
      } else if (key === '2') {
        this.option = option2
      } else if (key === '3') {
        this.option = option3
      } else if (key === '4') {
        this.option = option4
      } else if (key === '5') {
        this.option = option5
      }
    },
    add () {
      this.$refs.crud.rowAdd()
    },
    report (row) {
      if (row.isReport === 1) {
        this.$message.error('该记录已经上报')
        return
      }
      this.$confirm('是否确定进行上报操作？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$api.inspect.report({ projectInspectorId: row.id }).then(res => {
          this.loading = false
          if (res.code === 200) {
            this.onLoad()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    onLoad () {
      const data = {
        projectId: this.projectId,
        status: this.info.dictKey
      }
      this.loading = true
      this.$api.inspect.list(Object.assign(this.page, data)).then(res => {
        this.data = res.data.records
        this.page.total = res.data.total
        if (this.data.length > 0) {
          const hasReport = this.data[0].hasReport
          if (!hasReport) {
            // hasReport === false 表示未最后一级，不需要上报或者其他操作
            const index = this.option.column.findIndex(e => e.prop === 'reportTime')
            this.option.column[index].hide = true
          }
          const sort = this.data[0].sort
          if (sort !== 0) { // sort ===0 第一级，填报内容的第一级用户
            this.option.delBtn = false
            this.option.editBtn = false
            const index = this.option.column.findIndex(e => e.prop === 'reportDeptName')
            this.option.column[index].hide = false
          } else { // 第一级部门，不显示上报部门
            const index = this.option.column.findIndex(e => e.prop === 'reportDeptName')
            this.option.column[index].hide = true
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    beforeOpen (done, type) {
      if (['view', 'edit'].includes(type)) {

      }
      done()
    },
    getDetail (res) {
      this.$api.inspect.detail({ id: res.id }).then(res => {
        if (res.code === 200) {
          this.form = res.data
        }
      })
    },
    currentChange (currentPage) {
      console.log(currentPage)
      this.page.current = currentPage
      this.refreshChange()
    },
    sizeChange (pageSize) {
      this.page.size = pageSize
      this.refreshChange()
    },
    refreshChange () {
      this.onLoad()
    },
    rowSave (row, done, loading) {
      const data = {
        projectId: this.projectId,
        status: this.info.dictKey
      }
      this.$api.inspect.submint(Object.assign(row, data)).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        done(row)
        this.onLoad()
      }, error => {
        window.console.log(error)
        loading()
      })
    },
    rowUpdate (row, index, done, loading) {
      const data = {
        projectId: this.projectId
      }
      this.$api.inspect.update(Object.assign(row, data)).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        done(row)
        this.onLoad()
      }, error => {
        window.console.log(error)
        loading()
      })
    },
    rowDel (row, index, done) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.$api.inspect.remove({ ids: row.id })
      }).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        // 数据回调进行刷新
        done(row)
        this.onLoad()
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>

</style>