playlet/project/src/components/manage/platformManage/platformMana...

<template>
  <div v-loading="loading" class="platformManage-wrap">
    <div class="screenBox flex">
      <div></div><!-- 占位 -->
      <div class="right">
        <el-button type="primary" size="mini" @click="onClickAddPlatform">添加平台</el-button>
      </div>
    </div>
    <el-table :height="height" :data="platformList" tooltip-effect="dark" style="width: 100%;margin-top:10px">
      <el-table-column label="平台" prop="name" min-width="160" align="center" />
      <el-table-column label="描述" prop="name" min-width="160" align="center" />
      <el-table-column label="账号" min-width="300" align="center">
        <template slot-scope="{ row }">
          <div class="account-wrap">
            <span>123123123</span>
            <i class="el-icon-delete" />
          </div>
          <div class="account-add-btn">
            <i class="el-icon-plus" />
            <span>添加账号</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="160" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.enable == 1" class="c-448AFF">启用</span>
          <span v-else class="c-F03F5C">禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="160" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="onClickEditPlatform(row)">编辑</el-button>
          <el-button v-if="row.enable == 1" type="danger" size="mini" @click="onClickEnable(row, 0)">禁用</el-button>
          <el-button v-else type="primary" size="mini" @click="onClickEnable(row, 1)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-show="pagination.total > 0">
      <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count="Number(pagination.pages)">
      </el-pagination>
    </div>

    <!-- S 添加平台 & 编辑平台 -->
    <addPlatformDialog
      :dialogVisible="addPlatformDialogVisible"
      :platformInfo="currentPlatformInfo"
      @confirm="handleAddPlatformConfirm"
      @cancel="handleAddPlatformCancel"
    />
    <!-- E 添加平台 & 编辑平台 -->
  </div>
</template>
<script>
import addPlatformDialog from './dialog/addPlatformDialog.vue'
export default {
  name: 'platformManage',
  components: {
    addPlatformDialog,
  },
  data () {
    return {
      height: '',
      loading: false,
      pagination: {
        page: 1,
        page_size: 20,
        pages: 0,
        total: 0,
      },
      platformList: [],

      addPlatformDialogVisible: false, // 控制"添加平台"弹框显示
      currentPlatformInfo: {}, // 当前编辑的平台信息
    }
  },
  created () {
    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
    this.handleGetPlatform()
  },
  methods: {
    // 获取列表数据
    async handleGetPlatform() {
      try {
        this.loading = true
        const url = `${this.URL.BASEURL}${this.URL.pitcher_dramaList}`
        const params = {
          is_select: 0,
          page: this.pagination.page,
          page_size: this.pagination.page_size,
        }
        const { data: res = {} } = await this.$axios.get(url, { params })
        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
          this.platformList = res.rst.data;
          this.pagination.total = res.rst.pageInfo.total;
          this.pagination.pages = res.rst.pageInfo.pages;
        } else if (res.errno != 4002) {
          this.$message.warning(res.err)
          this.platformList = [];
          this.pagination.total = 0;
          this.pagination.pages = 0;
        }
      } catch (error) {
        console.log(error)
        this.platformList = [];
        this.pagination.total = 0;
        this.pagination.pages = 0;
      } finally {
        this.loading = false
      }
    },
    // 监听当前页数变化
    handleCurrentChange(currentPage) {
      this.pagination.page = currentPage
      this.handleGetPlatform()
    },

    // S 添加 & 编辑平台
    // 监听点击"添加平台"
    onClickAddPlatform() {
      this.currentPlatformInfo = {}
      this.addPlatformDialogVisible = true
    },
    // 监听点击"编辑平台"
    onClickEditPlatform(platformInfo) {
      this.currentPlatformInfo = platformInfo
      this.addPlatformDialogVisible = true
    },
    // 添加平台 & 编辑平台 => 确定
    handleAddPlatformConfirm() {
      this.addPlatformDialogVisible = false
      this.pagination.page = 1
      this.handleGetPlatform()
    },
    // 添加平台 & 编辑平台 => 取消
    handleAddPlatformCancel() {
      this.addPlatformDialogVisible = false
    },
    // E 添加 & 编辑平台

    // S 禁用、启用平台
    // 监听点击"禁用"、"启用"按钮
    async onClickEnable(currentPlatform, eventCode) {
      try {
        const h = this.$createElement
        await this.$confirm('', {
          message:h('div', null, [
            h('span', null, `确定${eventCode === 0 ? '禁用' : '启用'}`),
            h('span', { style:'color: #32B38A;' }, `${currentPlatform.name}`),
            h('span', null, '吗？'),
          ]),
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        this.handleEnable(currentPlatform, eventCode)
      } catch (error) {
        console.log(error)
      }
    },
    // 执行"禁用"、"启用"
    async handleEnable(currentPlatform, eventCode) {
      try {
        let url = `${this.URL.BASEURL}${this.URL.xxx}`
        const params = {
          id: currentPlatform.id,
          enable: eventCode,
        }
        console.log('url => ', url)
        console.log('params => ', params)
        return // mock
        this.loading = true
        const { data: res = {} } = await this.$axios.post(url, params)
        if (res && res.errno == 0) {
          this.$message.success('操作成功')
          this.handleGetPlatform()
        } else if (res.errno != 4002) {
          this.$message.warning(res.err || '操作失败')
        }
      } catch (error) {
        console.log('error => ', error)
      } finally {
        this.loading = false
      }
    },
    // E 禁用、启用平台
  }
}
</script>
<style lang="scss" scoped>
.screenBox {
  background: #fff;
  padding: 5px 20px;
}
.platformManage-wrap {
  .account-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      color: #F46C6C;
      cursor: pointer;
      margin-left: 4px;
    }
  }
  .account-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #32B38A;
    cursor: pointer;
    i {
      margin-right: 4px;
    }
  }
}
</style>