xps-web-aqpt/src/views/aqpt/projectWork/index.vue

<template>
  <div class="content-container">

    <div class="header">
      <span class="title">创建工作项目</span>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <el-row class="content-body">
      <el-table v-loading="listLoading" border :data="dataList" height="calc(100vh - 250px)">
        <el-table-column type="index" label="序号" header-align="center" align="center" width="50" />
        <el-table-column prop="jobactivityTitle" label="标题" header-align="center" align="center" />
        <el-table-column prop="logoUrl" label="图标" header-align="left" align="left" width="100">
          <template v-slot="{row}">
            <el-avatar :src="row.logoUrl" />
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template v-slot="{row}">
            <el-button size="mini" type="info" icon="el-icon-edit" plain @click="handleEdit(row)">修改</el-button>
            <el-button v-if="row.isFixed !== 1" size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <project-work-form ref="project-work-form" @formSuccess="formSuccess" />
  </div>
</template>

<script>

import projectWorkForm from './components/projectWorkForm.vue'
import { getJobsApi, jobDelApi } from '@/api/aqpt/visualEditor'
export default {
  components: {
    projectWorkForm
  },
  data() {
    return {
      title: '风险点',
      dataList: [],
      total: 0,
      listLoading: false,
      conditions: {
        page: 1,
        limit: 10,
        keywords: ''
      },
      handleModal: false,
      miniUrl: '',
      exportItems: []
    }
  },
  created() {
    this.getData()
  },
  methods: {

    getData() {
      this.listLoading = true
      getJobsApi(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, data, total, msg } = resp
        if (code === 0) {
          this.total = total
          this.dataList = data
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 添加
    handleAdd() {
      this.$refs['project-work-form'].showAddView()
    },

    // 修改
    handleEdit(data) {
      const { typeId } = data
      this.$refs['project-work-form'].showEditView(typeId)
    },
    // 删除
    handleDelete(data) {
      const { typeId } = data
      this.$confirm(`此操作将删除该数据 ${data.riskPointTitle}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        jobDelApi(typeId).then((resp) => {
          const { code, msg } = resp
          if (code === 0) {
            this.getData()
            this.$message.success(msg)
          } else {
            this.$message.error(msg)
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    formSuccess() {
      this.getData()
    }

  }
}
</script>
<style lang="scss" scoped>
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title{
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
    }
}
</style>