webapp / GreenwayWeb

<!--
    * @FileDescription: 渠道管理
    * @Author: kahu
    * @Date: 2022/8/25
    * @LastEditors: kahu
    * @LastEditTime: 2022/8/25
-->
<template>
  <div style="padding: 10px;background-color:#F2F3F5">
    <div class="content">
      <el-button
        type="primary"
        @click="handleEditForm"
        size="mini" style="background-color: #3F9B6A;color: #fff;"
      >新增
      </el-button>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        class="table"
        stripe
        border
 :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
        :data="list"
      >
        <el-table-column
          type="selection"
          align="center"
          width="55"
        />
        <el-table-column
          prop="id"
          align="center"
          label="渠道ID"
          show-overflow-tooltip
        />
        <el-table-column
          prop="channelName"
          align="center"
          label="渠道名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="registerUrl"
          align="center"
          label="渠道注册链接"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            <span
              v-if="scope.row.registerUrl"
            >{{ scope.row.registerUrl }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="channelCode"
          align="center"
          label="渠道码"
          width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="registerCount"
          label="渠道注册人数"
          align="center"
          width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="orderUserCount"
          label="渠道下单人数"
          width="130"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="orderCount"
          label="渠道下单笔数"
          width="130"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="orderAmount"
          align="center"
          label="渠道下单总金额"
          width="130"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="操作"
          width="260"
          fixed="right"
        >
          <template v-slot="scope">
            <el-button

              @click="handleCopeLink(scope.row)"
              size="mini" style="background-color: transparent;color: #3F9B6A;;border: none;"
            >复制链接
            </el-button>
            <el-button
              size="mini"
              @click="handleEditForm(scope.row)"
               style="background-color: transparent;color: #3F9B6A;;border: none;"
            >编辑
            </el-button>
            <el-button
              size="mini"
              style="background-color: transparent;color: #3F9B6A;;border: none;"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="queryOptions.page"
        :page-size="queryOptions.pageSize"
        :page-sizes="tableOptions.pageSizes"
        :total="tableOptions.total"
        small
        @size-change="(val)=>handlePageChange(val,1)"
        @current-change="(val)=>handlePageChange(val,2)"
      />
      <!--  表单  -->
      <ChannelForm
        v-model="showForm"
        :item="formItem"
        @confirm="handleResetTable"
        @cancel="handleResetTable"
      />
    </div>
  </div>
</template>

<script>
import ChannelForm from './form'
import { getList, del } from '@/api/channel';

export default {
  name: 'Index',
  components: { ChannelForm },
  data () {
    return {
      showForm: false,
      formItem: {},
      loading: false,
      list: [],
      queryOptions: {
        page: 1,
        pageSize: 10
      },
      tableOptions: {
        headStyle: { background: '#EEF3FF', color: '#333333' },
        pageSizes: [5, 10, 30, 50, 100],
        total: 0
      }
    }
  },
  created () {
    this.handleGetTable()
  },
  methods: {
    handleResetTable () {
      this.queryOptions.page = 1
      this.handleGetTable()
    },
    async handleGetTable () {
      this.loading = true
      const { data } = await getList(this.queryOptions);
      this.list = data.list
      this.tableOptions.total = data.total
      this.loading = false
    },
    /**
     * 分页
     * @param val
     * @param type 1page 2pageSize
     */
    handlePageChange (val, type) {
      type === 1 ? this.queryOptions.page = val : this.queryOptions.pageSize = val
      this.handleGetTable()
    },
    handleEditForm (item) {
      if (!item) {
        this.formItem = {}
      } else {
        this.formItem = item
      }
      this.showForm = true
    },

    handleCopeLink (item) {
      const htmlInputElement = document.createElement('input');
      htmlInputElement.value = item.registerUrl
      document.body.appendChild(htmlInputElement);
      htmlInputElement.select()
      document.execCommand('copy')
      document.body.removeChild(htmlInputElement)
      this.$message.success('复制成功')
    },

    handleDelete (item) {
      const message = `是否删除渠道${item.channelName}`
      this.$confirm(message, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.loading = true
        // TODO 删除逻辑
        await del({ id: item.id, channelName: item.channelName })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
      }).finally(() => {
        this.loading = false
        this.handleGetTable()
      });
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
::v-deep .el-form-item__label{
        font-weight: normal;
         font-size: 12px;

       }
       ::v-deep .btn .el-button:focus,
        .el-button:hover {
          border: 1px solid #3F9B6A;
        }
        ::v-deep .el-button {
           border: 1px solid #3F9B6A;
         }
          ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
           background-color: #3F9B6A;
         }
         ::v-deep .el-input__inner:focus {
              border: #3F9B6A 1px solid;
           }
.content {
  padding: 20px;
  box-sizing: border-box;
  min-height: calc(100vh - 50px - 20px);
  background-color:#fff;

  .table {
    margin: 20px 0;
  }
}
</style>