tingbang/htmldev/manage/src/views/project/index.vue

<template>
  <div class="padding-20">
    <div class="flex flex-wrap">
      <div v-for="(item, index) in projectList" :key="index" class="box">
        <el-card class="box-card">
          <div>项目ID：{{item.id}}</div>
          <div>项目名称：{{item.project_name}}</div>
          <div class="flex">
            <div>LOGO：</div>
            <div><img style="max-height: 60px; max-width: 196px;" :src="item.project_logo"/></div>
          </div>
          <div>项目描述：{{item.project_desc}}</div>
          <div>项目域名：{{item.project_host}}</div>
          <div>项目状态：{{item.project_status}}</div>
        </el-card>
        <div class="bottom-btn marginT-10">
          <el-button v-permission="'project_list_edit'" size="mini" type="primary" @click="edit(item)">编辑</el-button>
          <el-button v-permission="'project_list_status'" size="mini"
                     :type="item.project_status == '启用' ? 'danger' : 'success'" @click="status(item)">
            {{item.project_status == '启用' ? '停用' : '启用'}}
          </el-button>
          <el-button v-permission="'method_list_show'" size="mini" type="warning" @click="setFilterPath(item)">公共方法
          </el-button>
          <el-button v-permission="'project_list_roleConfig'" size="mini" type="warning" @click="setPermissions(item)">
            权限编辑
          </el-button>
        </div>
      </div>
      <div class="box">
        <div @click="add" class="box-add" v-permission="'project_list_add'">
          <el-card class="box-card point">
            <div>
              <div class="text-center">
                新建项目
              </div>
              <div class="text-center">
                <i class="el-icon-plus"></i>
              </div>
            </div>
          </el-card>
        </div>
      </div>


    </div>

    <detail v-if="detailsDialog.show" v-model="detailsDialog.show" :exData="detailsDialog.exData"
            @success="getList"></detail>
    <permissions v-if="permissionsDialog.show" v-model="permissionsDialog.show" :exData="permissionsDialog.exData"
                 @success="getList"></permissions>
    <filterPath v-if="filterDialog.show" v-model="filterDialog.show" :exData="filterDialog.exData"></filterPath>
  </div>
</template>

<script>
import detail from './details'
import permissions from './permissions'
import filterPath from './filterPath'

export default {
  components: {
    detail,
    permissions,
    filterPath
  },
  data () {
    return {
      detailsDialog: {
        show: false,
        exData: {}
      },
      permissionsDialog: {
        show: false,
        exData: {}
      },
      filterDialog: {
        show: false,
        exData: {}
      },
      projectList: [],
      tableUrl: '/project/list'
    }
  },
  methods: {
    add () {
      this.detailsDialog.exData = {}
      this.detailsDialog.show = true
    },
    edit (row) {
      this.detailsDialog.exData = row
      this.detailsDialog.show = true
    },
    async status (row) {
      this.$confirm(`确定${row.project_status == '启用' ? '停用' : '启用'}当前项目吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await this.$fetch('/project/set_status', { id: row.id })
        if (data.code == 200) {
          this.getList()
        }
      }).catch(() => {})

    },
    del (row) {
      this.$confirm('确定要删除吗', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await this.$fetch('/project/del', { id: row.id })
        if (data.code == 200) {
          this.$message.success('删除成功')
          this.init()
          this.$store.dispatch('common/setProjectArr')
        }
      }).catch(() => {})
    },
    async getList () {
      const data = await this.$fetch('/project/list', {}, 'get')
      if (data.code == 200) {
        this.projectList = data.data
      }
    },
    setPermissions (row) {
      this.permissionsDialog.exData = row
      this.permissionsDialog.show = true
    },
    setFilterPath (row) {
      this.filterDialog.exData = row
      this.filterDialog.show = true
    }
  },
  mounted () {
    // this.init()
    this.getList()

  },
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px;
  margin-bottom: 40px;
  flex-basis: 300px;
  height: 230px;
  max-height: 230px;
}

.box-add {
  height: 100%;
}

.box-card {
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgb(72 112 189);
}

.el-icon-plus {
  font-size: 60px;
  margin-top: 30px;
}

.bottom-btn {
  button {
    padding: 7px 10px;
  }
}
</style>