cfc/cfc-web/src/views/admin/supply-system/List.vue

<template>
  <div class="supply-system-list">
    <el-card>
      <div slot="header">
        <span>供应商体系管理</span>
        <el-button style="float: right" type="primary" size="small" @click="$router.push('/supply-system/create')">+ 新建体系</el-button>
      </div>

      <el-form :inline="true" style="margin-bottom: 15px;">
        <el-form-item>
          <el-input v-model="searchKeyword" placeholder="搜索体系名称" clearable @clear="loadData" @keyup.enter.native="loadData">
            <i slot="prefix" class="el-icon-search"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchStatus" placeholder="状态" clearable style="width: 120px" @change="loadData">
            <el-option label="启用" value="active"></el-option>
            <el-option label="停用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData" :loading="loading">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="systems" stripe v-loading="loading" :max-height="tableHeight">
        <el-table-column prop="id" label="ID" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('id', $event)">ID<span v-if="sortIndex('id') !== null" class="sort-index" :class="sortClass('id') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('id') }}</span>{{ sortIcon('id') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="体系名称" min-width="150">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('name', $event)">体系名称<span v-if="sortIndex('name') !== null" class="sort-index" :class="sortClass('name') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('name') }}</span>{{ sortIcon('name') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="settlementPeriodDays" label="账期(天)" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('settlementPeriodDays', $event)">账期(天)<span v-if="sortIndex('settlementPeriodDays') !== null" class="sort-index" :class="sortClass('settlementPeriodDays') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('settlementPeriodDays') }}</span>{{ sortIcon('settlementPeriodDays') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="platformProfitRate" label="平台留利" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('platformProfitRate', $event)">平台留利<span v-if="sortIndex('platformProfitRate') !== null" class="sort-index" :class="sortClass('platformProfitRate') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('platformProfitRate') }}</span>{{ sortIcon('platformProfitRate') }}</span>
          </template>
          <template slot-scope="scope">
            {{ scope.row.platformProfitRate ? (scope.row.platformProfitRate * 1).toFixed(2) + '%' : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" min-width="200">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('description', $event)">描述<span v-if="sortIndex('description') !== null" class="sort-index" :class="sortClass('description') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('description') }}</span>{{ sortIcon('description') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('status', $event)">状态<span v-if="sortIndex('status') !== null" class="sort-index" :class="sortClass('status') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('status') }}</span>{{ sortIcon('status') }}</span>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'" size="small">
              {{ scope.row.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="$router.push('/supply-system/' + scope.row.id)">详情</el-button>
            <el-button size="mini" @click="$router.push('/supply-system/' + scope.row.id + '/edit')">编辑</el-button>
            <el-button size="mini" :type="scope.row.status === 'active' ? 'warning' : 'success'" @click="toggleStatus(scope.row)">
              {{ scope.row.status === 'active' ? '停用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="total > 0"
        style="margin-top: 15px; text-align: right"
        background
        layout="total, prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="handlePageChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { getSupplySystemList, toggleSupplySystemStatus } from '@/api/admin'

export default {
  name: 'SupplySystemList',
  mixins: [SortMixin],
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      systems: [],
      loading: false,
      sortableColumns: { id: 'ID', name: '体系名称', settlementPeriodDays: '账期(天)', platformProfitRate: '平台留利', description: '描述', status: '状态' },
      searchKeyword: '',
      searchStatus: '',
      page: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadList() {
      this.loadData()
    },
    async loadData() {
      this.loading = true
      try {
        const params = {
          keyword: this.searchKeyword,
          status: this.searchStatus,
          page: this.page,
          size: this.pageSize
        }
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await getSupplySystemList(params)
        if (res.data) {
          this.systems = res.data.records || res.data.list || []
          this.total = res.data.total || 0
        }
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    handlePageChange(val) {
      this.page = val
      this.loadData()
    },
    async toggleStatus(row) {
      try {
        await toggleSupplySystemStatus(row.id)
        this.$message.success('状态已更新')
        this.loadData()
      } catch (e) {
        this.$message.error('操作失败')
      }
    }
  }
}
</script>

<style scoped>
.supply-system-list {
  padding: 20px;
}
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
.sort-index {
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  padding: 0 4px;
  margin: 0 2px;
}
.sort-asc-badge {
  background: #f56c6c;
}
.sort-desc-badge {
  background: #409eff;
}
</style>