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

<template>
  <div class="supply-system-detail">
    <el-card>
      <div slot="header">
        <span>体系详情 — {{ system.name }}</span>
        <el-button style="float: right" size="mini" @click="$router.push('/supply-system')">返回列表</el-button>
      </div>

      <el-tabs v-model="activeTab">
        <!-- Tab 1: 商品 -->
        <el-tab-pane label="商品" name="products">
          <el-table :data="products" stripe>
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="name" label="商品名称" min-width="150"></el-table-column>
            <el-table-column prop="price" label="售价(元)" width="100">
              <template slot-scope="scope">{{ scope.row.price != null ? (scope.row.price / 100).toFixed(2) : '-' }}</template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="80"></el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag size="mini">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" @click="$router.push('/product-edit?id=' + scope.row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- Tab 2: 成员 -->
        <el-tab-pane label="成员" name="members">
          <div style="margin-bottom: 15px;">
            <el-button type="primary" size="small" @click="showAddMemberDialog">+ 添加成员</el-button>
          </div>
          <el-table :data="members" stripe>
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
            <el-table-column prop="role" label="角色" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.role === 'admin' ? 'warning' : 'default'" size="small">
                  {{ scope.row.role === 'admin' ? '管理员' : '成员' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag size="mini" :type="scope.row.status === 'active' ? 'success' : 'info'">
                  {{ scope.row.status === 'active' ? '活跃' : '非活跃' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="joinedAt" label="加入时间" width="160">
              <template slot-scope="scope">{{ scope.row.joinedAt | parseTime }}</template>
            </el-table-column>
            <el-table-column label="操作" width="160">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleChangeRole(scope.row)" :disabled="scope.row.role === 'admin'">改角色</el-button>
                <el-button size="mini" type="danger" @click="handleRemoveMember(scope.row)" :disabled="scope.row.role === 'admin'">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- Tab 3: 订单 -->
        <el-tab-pane label="订单" name="orders">
          <el-table :data="orders" stripe>
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
            <el-table-column prop="productName" label="商品" min-width="120"></el-table-column>
            <el-table-column prop="totalAmount" label="金额(元)" width="100">
              <template slot-scope="scope">{{ scope.row.totalAmount != null ? (scope.row.totalAmount / 100).toFixed(2) : '-' }}</template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template slot-scope="scope"><el-tag size="mini">{{ scope.row.status }}</el-tag></template>
            </el-table-column>
            <el-table-column prop="supplierId" label="收款供应商" width="120">
              <template slot-scope="scope">{{ scope.row.supplierId || '-' }}</template>
            </el-table-column>
            <el-table-column label="指定收款方" width="140">
              <template slot-scope="scope">
                <el-select v-model="scope.row.supplierId" size="mini" placeholder="选择供应商" @change="handleSelectPayee(scope.row)">
                  <el-option v-for="m in members" :key="m.userId" :label="m.userId" :value="m.userId"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- Tab 4: 结算 -->
        <el-tab-pane label="结算" name="settlements">
          <div style="margin-bottom: 15px;">
            <el-button type="primary" size="small" @click="showCreateSettlementDialog">生成结算单</el-button>
          </div>
          <el-table :data="settlements" stripe>
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column label="结算周期" width="200">
              <template slot-scope="scope">{{ scope.row.periodStart | parseTime('{y}-{m}-{d}') }} ~ {{ scope.row.periodEnd | parseTime('{y}-{m}-{d}') }}</template>
            </el-table-column>
            <el-table-column prop="totalSales" label="销售总额(分)" width="120">
              <template slot-scope="scope">{{ scope.row.totalSales }}</template>
            </el-table-column>
            <el-table-column prop="platformProfit" label="平台留利(分)" width="120"></el-table-column>
            <el-table-column prop="supplierPayout" label="供应商实付(分)" width="120"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 'settled' ? 'success' : 'warning'" size="small">
                  {{ scope.row.status === 'settled' ? '已结算' : '待确认' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewSettlementDetail(scope.row)">明细</el-button>
                <el-button size="mini" type="success" @click="handleConfirmSettlement(scope.row)" :disabled="scope.row.status === 'settled'">确认结算</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加成员对话框 -->
    <el-dialog title="添加成员" :visible.sync="addMemberVisible" width="400px">
      <el-form>
        <el-form-item label="用户ID">
          <el-input v-model="addMemberUserId" placeholder="输入用户ID"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addMemberVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddMember">确定添加</el-button>
      </div>
    </el-dialog>

    <!-- 结算明细对话框 -->
    <el-dialog title="结算明细" :visible.sync="settlementDetailVisible" width="700px">
      <el-table :data="settlementItems">
        <el-table-column prop="orderNo" label="订单号" width="160"></el-table-column>
        <el-table-column prop="productName" label="商品" min-width="120"></el-table-column>
        <el-table-column prop="amount" label="订单金额(分)" width="120"></el-table-column>
        <el-table-column prop="platformFee" label="平台留利(分)" width="120"></el-table-column>
        <el-table-column prop="supplierName" label="收款供应商" width="100"></el-table-column>
        <el-table-column prop="payout" label="实付(分)" width="100"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 生成结算单对话框 -->
    <el-dialog title="生成结算单" :visible.sync="createSettlementVisible" width="450px">
      <el-form label-width="120px">
        <el-form-item label="结算周期开始">
          <el-date-picker v-model="settlementForm.periodStart" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="结算周期结束">
          <el-date-picker v-model="settlementForm.periodEnd" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="settlementForm.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="createSettlementVisible = false">取消</el-button>
        <el-button type="primary" :loading="creatingSettlement" @click="confirmCreateSettlement">生成</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSupplySystemDetail, getSupplySystemMembers, addSupplySystemMember,
         removeSupplySystemMember, changeSupplySystemMemberRole,
         getSupplySettlementList, getSupplySettlementDetailItems,
         createSupplySettlement, confirmSupplySettlement } from '@/api/admin'

export default {
  name: 'SupplySystemDetail',
  data() {
    return {
      activeTab: 'members',
      system: {},
      products: [],
      members: [],
      orders: [],
      settlements: [],
      settlementItems: [],
      addMemberVisible: false,
      addMemberUserId: null,
      settlementDetailVisible: false,
      createSettlementVisible: false,
      creatingSettlement: false,
      settlementForm: {
        periodStart: '',
        periodEnd: '',
        remark: ''
      }
    }
  },
  created() {
    const id = this.$route.query.id || this.$route.params.id
    if (id) {
      this.loadDetail(id)
    }
  },
  filters: {
    parseTime(time, format) {
      if (!time) return '-'
      const d = new Date(time)
      if (!format) return d.toLocaleString()
      const pad = n => n < 10 ? '0' + n : n
      return format.replace('{y}', d.getFullYear()).replace('{m}', pad(d.getMonth() + 1)).replace('{d}', pad(d.getDate()))
    }
  },
  methods: {
    async loadDetail(id) {
      try {
        const res = await getSupplySystemDetail(id)
        if (res.data) {
          this.system = res.data
        }
        this.loadMembers(id)
        this.loadSettlements(id)
      } catch (e) {
        this.$message.error('加载失败')
      }
    },
    async loadMembers(systemId) {
      try {
        const res = await getSupplySystemMembers(systemId)
        if (res.data) {
          this.members = res.data
        }
      } catch (e) {
        console.error(e)
      }
    },
    async loadSettlements(systemId) {
      try {
        const res = await getSupplySettlementList({ systemId })
        if (res.data) {
          this.settlements = res.data.records || []
        }
      } catch (e) {
        console.error(e)
      }
    },
    showAddMemberDialog() {
      this.addMemberUserId = null
      this.addMemberVisible = true
    },
    async confirmAddMember() {
      if (!this.addMemberUserId) {
        this.$message.warning('请输入用户ID')
        return
      }
      try {
        await addSupplySystemMember(this.system.id, Number(this.addMemberUserId))
        this.$message.success('添加成功')
        this.addMemberVisible = false
        this.loadMembers(this.system.id)
      } catch (e) {
        this.$message.error('添加失败')
      }
    },
    async handleChangeRole(row) {
      try {
        const newRole = row.role === 'admin' ? 'member' : 'admin'
        await changeSupplySystemMemberRole(row.id, newRole)
        this.$message.success('角色已变更')
        this.loadMembers(this.system.id)
      } catch (e) {
        this.$message.error('操作失败')
      }
    },
    async handleRemoveMember(row) {
      try {
        await this.$confirm('确定移除该成员吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        await removeSupplySystemMember(row.id)
        this.$message.success('已移除')
        this.loadMembers(this.system.id)
      } catch (e) {
        if (e !== 'cancel') this.$message.error('移除失败')
      }
    },
    async handleSelectPayee(row) {
      // Update order's supplier_id — would need an updateOrder API
      this.$message.info('收款方已选择')
    },
    showCreateSettlementDialog() {
      this.settlementForm = { periodStart: '', periodEnd: '', remark: '' }
      this.createSettlementVisible = true
    },
    async confirmCreateSettlement() {
      if (!this.settlementForm.periodStart || !this.settlementForm.periodEnd) {
        this.$message.warning('请选择结算周期')
        return
      }
      this.creatingSettlement = true
      try {
        await createSupplySettlement(
          this.system.id,
          this.settlementForm.periodStart,
          this.settlementForm.periodEnd,
          this.settlementForm.remark
        )
        this.$message.success('结算单已生成')
        this.createSettlementVisible = false
        this.loadSettlements(this.system.id)
      } catch (e) {
        this.$message.error('生成失败')
      } finally {
        this.creatingSettlement = false
      }
    },
    async viewSettlementDetail(row) {
      try {
        const res = await getSupplySettlementDetailItems(row.id)
        if (res.data) {
          this.settlementItems = res.data
        }
        this.settlementDetailVisible = true
      } catch (e) {
        this.$message.error('加载明细失败')
      }
    },
    async handleConfirmSettlement(row) {
      try {
        await confirmSupplySettlement(row.id)
        this.$message.success('结算已确认')
        this.loadSettlements(this.system.id)
      } catch (e) {
        this.$message.error('确认失败')
      }
    }
  }
}
</script>

<style scoped>
.supply-system-detail {
  padding: 20px;
}
</style>