no message

dist/config.js

@@ -2,6 +2,6 @@ window.global = {
   // baseURL: 'https://F1bet.bet/admin/',
   // uploadURL: 'https://F1bet.bet'
 
-    baseURL: 'https://bot28api.sp2509.cc/admin/',
-  uploadURL: 'https://bot28api.sp2509.cc'
+    baseURL: 'https://api.paopao-api.cc/admin/',
+  uploadURL: 'https://api.paopao-api.cc/'
 }

public/config.js

@@ -2,6 +2,6 @@ window.global = {
   // baseURL: 'https://F1bet.bet/admin/',
   // uploadURL: 'https://F1bet.bet'
 
-    baseURL: 'https://bot28api.sp2509.cc/admin/',
-  uploadURL: 'https://bot28api.sp2509.cc'
+    baseURL: 'https://api.paopao-api.cc/admin/',
+  uploadURL: 'https://api.paopao-api.cc/'
 }

src/api/data.js

@@ -1088,3 +1088,51 @@ export function getAgentReportList(params) {
     params,
   });
 }
+
+export function getAgentFlowCommissionProfiles(params) {
+  return request({
+    url: "/agent/flow-commission-profiles",
+    method: "get",
+    params,
+  });
+}
+
+export function saveAgentFlowCommissionProfile(data) {
+  return request({
+    url: "/agent/flow-commission-profiles",
+    method: "post",
+    data,
+  });
+}
+
+export function deleteAgentFlowCommissionProfile(data) {
+  return request({
+    url: "/agent/flow-commission-profiles/delete",
+    method: "post",
+    data,
+  });
+}
+
+export function getAgentProfitCommissionProfiles(params) {
+  return request({
+    url: "/agent/profit-commission-profiles",
+    method: "get",
+    params,
+  });
+}
+
+export function saveAgentProfitCommissionProfile(data) {
+  return request({
+    url: "/agent/profit-commission-profiles",
+    method: "post",
+    data,
+  });
+}
+
+export function deleteAgentProfitCommissionProfile(data) {
+  return request({
+    url: "/agent/profit-commission-profiles/delete",
+    method: "post",
+    data,
+  });
+}

src/views/agent/index.vue

@@ -201,17 +201,37 @@
             <span>%</span>
           </div>
         </el-form-item>
-        <el-form-item v-if="agentDialogType === 'add'" label="流水佣金比例" prop="flow_commission_rate">
-          <div class="rate-field">
-            <el-input v-model="agentForm.flow_commission_rate" />
-            <span>%</span>
-          </div>
+        <el-form-item label="流水佣金方案" prop="flow_commission_profile_id">
+          <el-select
+            v-model="agentForm.flow_commission_profile_id"
+            placeholder="请选择流水佣金方案"
+            clearable
+            filterable
+            :loading="commissionProfilesLoading"
+          >
+            <el-option
+              v-for="profile in flowCommissionProfiles"
+              :key="profile.id"
+              :label="profile.name"
+              :value="profile.id"
+            />
+          </el-select>
         </el-form-item>
-        <el-form-item v-if="agentDialogType === 'add'" label="盈亏佣金比例" prop="profit_commission_rate">
-          <div class="rate-field">
-            <el-input v-model="agentForm.profit_commission_rate" />
-            <span>%</span>
-          </div>
+        <el-form-item label="盈亏佣金方案" prop="profit_commission_profile_id">
+          <el-select
+            v-model="agentForm.profit_commission_profile_id"
+            placeholder="请选择盈亏佣金方案"
+            clearable
+            filterable
+            :loading="commissionProfilesLoading"
+          >
+            <el-option
+              v-for="profile in profitCommissionProfiles"
+              :key="profile.id"
+              :label="profile.name"
+              :value="profile.id"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="账号状态" prop="status">
           <el-radio-group v-model="agentForm.status">
@@ -371,9 +391,11 @@
 import {
   adjustAgentBalance,
   createAgent,
+  getAgentFlowCommissionProfiles,
   getAgentDetail,
   getAgentList,
   getAgentQuota,
+  getAgentProfitCommissionProfiles,
   updateAgent,
   updateAgentDomains
 } from '@/api/data'
@@ -397,6 +419,9 @@ export default {
       agentDialogVisible: false,
       agentDialogType: 'add',
       agentSubmitting: false,
+      commissionProfilesLoading: false,
+      flowCommissionProfiles: [],
+      profitCommissionProfiles: [],
       agentForm: this.getDefaultAgentForm(),
       agentRules: {
         agent_account: [
@@ -417,11 +442,8 @@ export default {
         withdraw_fee_rate: [
           { validator: this.validateRate, trigger: 'blur' }
         ],
-        flow_commission_rate: [
-          { validator: this.validateRate, trigger: 'blur' }
-        ],
-        profit_commission_rate: [
-          { validator: this.validateRate, trigger: 'blur' }
+        flow_commission_profile_id: [
+          { validator: this.validateFlowCommissionProfile, trigger: 'change' }
         ]
       },
       domainDialogVisible: false,
@@ -496,8 +518,8 @@ export default {
         initial_balance: '',
         deposit_fee_rate: '',
         withdraw_fee_rate: '',
-        flow_commission_rate: '',
-        profit_commission_rate: '',
+        flow_commission_profile_id: '',
+        profit_commission_profile_id: '',
         status: 1
       }
     },
@@ -569,6 +591,7 @@ export default {
       this.agentDialogType = 'add'
       this.agentForm = this.getDefaultAgentForm()
       this.agentDialogVisible = true
+      this.loadCommissionProfiles()
       this.$nextTick(() => {
         this.$refs.agentForm && this.$refs.agentForm.clearValidate()
       })
@@ -577,6 +600,7 @@ export default {
       this.agentDialogType = 'edit'
       this.agentForm = this.agentToForm(row)
       this.agentDialogVisible = true
+      this.loadCommissionProfiles()
       getAgentDetail({ id: row.id })
         .then(res => {
           this.agentForm = this.agentToForm(this.normalizeAgent(res.data || row))
@@ -595,9 +619,25 @@ export default {
         parent_id: row.parent_id === null || row.parent_id === undefined ? '' : row.parent_id,
         deposit_fee_rate: row.deposit_fee_rate || '',
         withdraw_fee_rate: row.withdraw_fee_rate || '',
+        flow_commission_profile_id: row.flow_commission_profile_id || (row.flow_commission_profile || {}).id || '',
+        profit_commission_profile_id: row.profit_commission_profile_id || (row.profit_commission_profile || {}).id || '',
         status: row.status === 0 ? 0 : 1
       })
     },
+    loadCommissionProfiles() {
+      this.commissionProfilesLoading = true
+      Promise.all([
+        getAgentFlowCommissionProfiles({ page: 1, limit: 100 }),
+        getAgentProfitCommissionProfiles({ page: 1, limit: 100 })
+      ])
+        .then(([flowRes, profitRes]) => {
+          this.flowCommissionProfiles = (flowRes.data || {}).list || []
+          this.profitCommissionProfiles = (profitRes.data || {}).list || []
+        })
+        .finally(() => {
+          this.commissionProfilesLoading = false
+        })
+    },
     validatePassword(rule, value, callback) {
       if (this.agentDialogType === 'add' && !value) {
         callback(new Error('请输入登录密码'))
@@ -643,6 +683,13 @@ export default {
       }
       callback()
     },
+    validateFlowCommissionProfile(rule, value, callback) {
+      if (this.agentDialogType === 'add' && (value === '' || value === null || value === undefined)) {
+        callback(new Error('请选择流水佣金方案'))
+        return
+      }
+      callback()
+    },
     parseParentId(value) {
       if (value === '' || value === null || value === undefined) return null
       return Number(value)
@@ -666,11 +713,19 @@ export default {
 
       if (this.agentDialogType === 'add') {
         this.setIfNotEmpty(payload, 'initial_balance', this.agentForm.initial_balance)
-        this.setIfNotEmpty(payload, 'flow_commission_rate', this.agentForm.flow_commission_rate)
-        this.setIfNotEmpty(payload, 'profit_commission_rate', this.agentForm.profit_commission_rate)
+        payload.flow_commission_profile_id = Number(this.agentForm.flow_commission_profile_id)
+        if (this.agentForm.profit_commission_profile_id !== '') {
+          payload.profit_commission_profile_id = Number(this.agentForm.profit_commission_profile_id)
+        }
         return payload
       }
 
+      if (this.agentForm.flow_commission_profile_id !== '') {
+        payload.flow_commission_profile_id = Number(this.agentForm.flow_commission_profile_id)
+      }
+      if (this.agentForm.profit_commission_profile_id !== '') {
+        payload.profit_commission_profile_id = Number(this.agentForm.profit_commission_profile_id)
+      }
       return Object.assign({ id: this.agentForm.id }, payload)
     },
     submitAgent() {

src/views/agent/profitCommission/index.vue

@@ -1,45 +1,68 @@
 <template>
   <div class="agent-profit-commission-page">
     <div class="commission-panel">
-      <div class="panel-toolbar">
-        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
-      </div>
+      <el-form
+        ref="queryForm"
+        :model="query"
+        inline
+        size="small"
+        class="commission-search"
+        @submit.native.prevent
+      >
+        <el-form-item label="比例名称" prop="name">
+          <el-input
+            v-model="query.name"
+            clearable
+            placeholder="请输入比例名称"
+            @keyup.enter.native="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item class="search-actions">
+          <el-button @click="handleSearch">查询</el-button>
+          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+        </el-form-item>
+      </el-form>
 
-      <el-table v-loading="loading" :data="pagedRows" border class="commission-table" height="calc(100vh - 225px)">
-        <el-table-column type="index" label="序号" width="135" align="center" />
-        <el-table-column prop="name" label="盈亏比例名称" width="180" align="center" />
-        <el-table-column prop="casino" label="真人盈亏比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.casino) }}</template>
-        </el-table-column>
-        <el-table-column prop="electronics" label="电子盈亏比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.electronics) }}</template>
-        </el-table-column>
-        <el-table-column prop="lottery" label="彩票盈亏比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.lottery) }}</template>
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        class="commission-table"
+        height="calc(100vh - 255px)"
+      >
+        <el-table-column type="index" label="序号" width="70" align="center" :index="tableIndex" />
+        <el-table-column prop="name" label="盈亏比例名称" min-width="180" align="center" />
+        <el-table-column
+          v-for="field in rateFields"
+          :key="field.prop"
+          :prop="field.prop"
+          :label="field.label"
+          min-width="140"
+          align="center"
+        >
+          <template slot-scope="{ row }">{{ formatRate(row[field.prop]) }}</template>
         </el-table-column>
-        <el-table-column prop="sports" label="体育盈亏比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.sports) }}</template>
-        </el-table-column>
-        <el-table-column prop="esports" label="电竞盈亏比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.esports) }}</template>
-        </el-table-column>
-        <el-table-column prop="fishing" label="捕鱼盈亏比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.fishing) }}</template>
-        </el-table-column>
-        <el-table-column prop="chess" label="棋牌盈亏比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.chess) }}</template>
-        </el-table-column>
-        <el-table-column label="是否默认" width="130" align="center">
+        <el-table-column label="是否默认" width="100" align="center">
           <template slot-scope="{ row }">
             <el-tag v-if="row.is_default" type="success" size="mini" effect="plain">是</el-tag>
             <el-tag v-else type="info" size="mini" effect="plain">否</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" width="180" align="center" />
-        <el-table-column label="操作" width="150" fixed="right" align="center">
+        <el-table-column prop="created_at" label="创建时间" width="180" align="center">
+          <template slot-scope="{ row }">{{ formatDate(row.created_at) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="140" fixed="right" align="center">
           <template slot-scope="{ row }">
             <el-button type="text" size="mini" @click="handleEdit(row)">修改</el-button>
-            <el-button type="text" size="mini" class="danger-action" @click="handleDelete(row)">删除</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              class="danger-action"
+              :disabled="Boolean(row.is_default)"
+              @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -51,59 +74,71 @@
         :current-page="page"
         :page-size="limit"
         :page-sizes="[10, 20, 50, 100]"
-        :total="rows.length"
+        :total="total"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
     </div>
 
     <el-dialog
-      :title="dialogType === 'add' ? '新增' : '修改'"
+      :title="dialogType === 'add' ? '新增盈亏佣金比例' : '修改盈亏佣金比例'"
       :visible.sync="dialogVisible"
-      width="50%"
-      top="15vh"
+      width="620px"
+      top="10vh"
       @close="resetForm"
     >
-      <el-form ref="commissionForm" :model="form" :rules="rules" label-width="120px" size="small" class="commission-form">
+      <el-form
+        ref="commissionForm"
+        :model="form"
+        :rules="rules"
+        label-width="140px"
+        size="small"
+        class="commission-form"
+      >
         <el-form-item label="盈亏比例名称" prop="name">
-          <el-input v-model="form.name" maxlength="30" placeholder="盈亏比例名称" />
+          <el-input v-model="form.name" maxlength="128" placeholder="请输入盈亏比例名称" />
         </el-form-item>
         <el-form-item v-for="field in rateFields" :key="field.prop" :label="field.label" :prop="field.prop">
           <div class="rate-control">
-            <el-input v-model="form[field.prop]" :placeholder="field.placeholder" />
+            <el-input v-model="form[field.prop]" maxlength="8" :placeholder="`请输入${field.label}`" />
             <span class="unit">%</span>
           </div>
         </el-form-item>
-        <div class="default-tip">
-          <span>注意：</span>
-          <strong>默认比例仅存在一条，如果勾选默认会覆盖掉已配置过此比例的代理</strong>
-        </div>
-        <el-form-item label="是否默认" prop="is_default" class="default-form-item">
+        <el-form-item label="是否默认" prop="is_default">
           <el-radio-group v-model="form.is_default">
             <el-radio :label="false">否</el-radio>
             <el-radio :label="true">是</el-radio>
           </el-radio-group>
+          <div class="default-tip">
+            默认方案只能有一条，设为默认后旧默认方案会自动取消。
+          </div>
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button size="small" @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" size="small" @click="submitForm">确定</el-button>
+        <el-button type="primary" size="small" :loading="submitting" @click="submitForm">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import {
+  deleteAgentProfitCommissionProfile,
+  getAgentProfitCommissionProfiles,
+  saveAgentProfitCommissionProfile
+} from '@/api/data'
+
 const emptyForm = () => ({
   id: null,
   name: '',
-  casino: '',
-  electronics: '',
-  lottery: '',
-  sports: '',
-  esports: '',
-  fishing: '',
-  chess: '',
+  live_rate: '',
+  slot_rate: '',
+  lottery_rate: '',
+  sport_rate: '',
+  esports_rate: '',
+  fishing_rate: '',
+  chess_rate: '',
   is_default: false
 })
 
@@ -112,114 +147,159 @@ export default {
   data() {
     return {
       loading: false,
+      submitting: false,
+      query: {
+        name: ''
+      },
       page: 1,
-      limit: 10,
+      limit: 20,
+      total: 0,
+      tableData: [],
       dialogVisible: false,
       dialogType: 'add',
       form: emptyForm(),
-      rows: [
-        { id: 1, name: '30', casino: 30, electronics: 30, lottery: 30, sports: 30, esports: 30, fishing: 30, chess: 30, is_default: true, created_at: '2026-05-29 19:10:00' },
-        { id: 2, name: '一级代理', casino: 5, electronics: 0, lottery: 0, sports: 0, esports: 0, fishing: 0, chess: 0, is_default: false, created_at: '2025-12-02 23:11:59' },
-        { id: 3, name: '盈亏-官方默认比例', casino: 20, electronics: 10, lottery: 0, sports: 0, esports: 0, fishing: 0, chess: 0, is_default: false, created_at: '2024-11-14 09:02:17' }
-      ],
       rateFields: [
-        { prop: 'casino', label: '真人盈亏比例', placeholder: '真人盈亏比例' },
-        { prop: 'electronics', label: '电子盈亏比例', placeholder: '电子盈亏比例' },
-        { prop: 'lottery', label: '彩票盈亏比例', placeholder: '彩票盈亏比例' },
-        { prop: 'sports', label: '体育盈亏比例', placeholder: '体育盈亏比例' },
-        { prop: 'esports', label: '电竞盈亏比例', placeholder: '电竞盈亏比例' },
-        { prop: 'fishing', label: '捕鱼盈亏比例', placeholder: '捕鱼盈亏比例' },
-        { prop: 'chess', label: '棋牌盈亏比例', placeholder: '棋牌盈亏比例' }
+        { prop: 'live_rate', label: '真人盈亏比例' },
+        { prop: 'slot_rate', label: '电子盈亏比例' },
+        { prop: 'lottery_rate', label: '彩票盈亏比例' },
+        { prop: 'sport_rate', label: '体育盈亏比例' },
+        { prop: 'esports_rate', label: '电竞盈亏比例' },
+        { prop: 'fishing_rate', label: '捕鱼盈亏比例' },
+        { prop: 'chess_rate', label: '棋牌盈亏比例' }
       ],
       rules: {
-        name: [{ required: true, message: '请输入盈亏比例名称', trigger: 'blur' }],
-        casino: [{ required: true, message: '请输入真人盈亏比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        electronics: [{ required: true, message: '请输入电子盈亏比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        lottery: [{ required: true, message: '请输入彩票盈亏比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        sports: [{ required: true, message: '请输入体育盈亏比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        esports: [{ required: true, message: '请输入电竞盈亏比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        fishing: [{ required: true, message: '请输入捕鱼盈亏比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        chess: [{ required: true, message: '请输入棋牌盈亏比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }]
+        name: [
+          { required: true, message: '请输入盈亏比例名称', trigger: 'blur' },
+          { max: 128, message: '名称最长为128个字符', trigger: 'blur' }
+        ]
       }
     }
   },
-  computed: {
-    pagedRows() {
-      const start = (this.page - 1) * this.limit
-      return this.rows.slice(start, start + this.limit)
-    }
+  created() {
+    this.getList()
   },
   methods: {
-    validateRate(rule, value, callback) {
-      const rate = Number(value)
-      if (value === '' || Number.isNaN(rate) || rate < 0 || rate > 100) {
-        callback(new Error('请输入0-100之间的比例'))
-        return
-      }
-      callback()
+    tableIndex(index) {
+      return (this.page - 1) * this.limit + index + 1
+    },
+    getList() {
+      this.loading = true
+      getAgentProfitCommissionProfiles({
+        page: this.page,
+        limit: this.limit,
+        name: this.query.name || undefined
+      })
+        .then(res => {
+          const data = res.data || {}
+          this.total = Number(data.total) || 0
+          this.page = Number(data.page) || this.page
+          this.limit = Number(data.limit) || this.limit
+          this.tableData = data.list || []
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleSearch() {
+      this.page = 1
+      this.getList()
+    },
+    handleSizeChange(value) {
+      this.limit = value
+      this.page = 1
+      this.getList()
+    },
+    handleCurrentChange(value) {
+      this.page = value
+      this.getList()
     },
     formatRate(value) {
-      return Number(value || 0).toFixed(2).replace(/\.00$/, '')
+      const numberValue = Number(value)
+      if (Number.isNaN(numberValue)) return value || '0%'
+      return `${numberValue.toFixed(2).replace(/\.?0+$/, '')}%`
+    },
+    formatDate(value) {
+      if (!value) return '--'
+      return String(value).replace('T', ' ').replace(/\.\d+Z$/, '').slice(0, 19)
     },
     handleAdd() {
       this.dialogType = 'add'
       this.form = emptyForm()
       this.dialogVisible = true
+      this.clearValidate()
     },
     handleEdit(row) {
       this.dialogType = 'edit'
-      this.form = { ...row }
+      this.form = Object.assign(emptyForm(), row, {
+        is_default: Boolean(row.is_default)
+      })
       this.dialogVisible = true
+      this.clearValidate()
     },
-    handleDelete(row) {
-      if (row.is_default) {
-        this.$message.warning('默认比例不能删除')
+    clearValidate() {
+      this.$nextTick(() => {
+        if (this.$refs.commissionForm) this.$refs.commissionForm.clearValidate()
+      })
+    },
+    validateRate(rule, value, callback) {
+      if (value === '' || value === null || value === undefined) {
+        callback(new Error('请输入0-100之间的比例'))
         return
       }
-      this.$confirm('确定删除该盈亏佣金比例吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.rows = this.rows.filter(item => item.id !== row.id)
-        this.$message.success('删除成功')
-        if (this.page > 1 && this.pagedRows.length === 0) this.page -= 1
-      }).catch(() => {})
+      if (!/^(?:100(?:\.0{1,4})?|(?:\d{1,2})(?:\.\d{1,4})?)$/.test(String(value))) {
+        callback(new Error('请输入0-100之间的数字，最多4位小数'))
+        return
+      }
+      callback()
     },
     submitForm() {
+      this.rateFields.forEach(field => {
+        this.$set(this.rules, field.prop, [{ validator: this.validateRate, trigger: 'blur' }])
+      })
       this.$refs.commissionForm.validate(valid => {
         if (!valid) return
-        const data = { ...this.form }
-        Object.keys(data).forEach(key => {
-          if (key !== 'name' && key !== 'id' && key !== 'created_at' && key !== 'is_default') data[key] = data[key] === '' ? 0 : Number(data[key])
-        })
-        if (data.is_default) this.rows.forEach(item => { item.is_default = false })
-        if (this.dialogType === 'add') {
-          data.id = Date.now()
-          data.created_at = this.formatDate(new Date())
-          this.rows.push(data)
-        } else {
-          const index = this.rows.findIndex(item => item.id === data.id)
-          if (index > -1) this.$set(this.rows, index, data)
+        this.submitting = true
+        const payload = {
+          name: this.form.name.trim(),
+          is_default: Boolean(this.form.is_default)
         }
-        this.dialogVisible = false
-        this.$message.success(this.dialogType === 'add' ? '新增成功' : '修改成功')
+        this.rateFields.forEach(field => {
+          payload[field.prop] = String(this.form[field.prop])
+        })
+        if (this.dialogType === 'edit') payload.id = this.form.id
+
+        saveAgentProfitCommissionProfile(payload)
+          .then(() => {
+            this.$message.success(this.dialogType === 'add' ? '新增成功' : '修改成功')
+            this.dialogVisible = false
+            this.getList()
+          })
+          .finally(() => {
+            this.submitting = false
+          })
       })
     },
+    handleDelete(row) {
+      if (row.is_default) {
+        this.$message.warning('默认方案不能删除，请先设置其他方案为默认')
+        return
+      }
+      this.$confirm(`确定删除“${row.name}”吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => deleteAgentProfitCommissionProfile({ id: row.id }))
+        .then(() => {
+          this.$message.success('删除成功')
+          if (this.tableData.length === 1 && this.page > 1) this.page -= 1
+          this.getList()
+        })
+        .catch(() => {})
+    },
     resetForm() {
       if (this.$refs.commissionForm) this.$refs.commissionForm.resetFields()
       this.form = emptyForm()
-    },
-    formatDate(date) {
-      const pad = value => String(value).padStart(2, '0')
-      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
-    },
-    handleSizeChange(value) {
-      this.limit = value
-      this.page = 1
-    },
-    handleCurrentChange(value) {
-      this.page = value
     }
   }
 }
@@ -235,6 +315,8 @@ export default {
 }
 
 .commission-panel {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   padding: 20px 20px 12px;
   overflow: hidden;
@@ -242,12 +324,37 @@ export default {
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
 }
 
-.panel-toolbar {
-  height: 44px;
+.commission-search {
+  flex-shrink: 0;
+  padding-bottom: 8px;
+
+  ::v-deep .el-form-item {
+    margin-right: 22px;
+    margin-bottom: 14px;
+  }
+
+  ::v-deep .el-form-item__label {
+    color: #303133;
+    font-weight: 500;
+  }
+
+  ::v-deep .el-input {
+    width: 240px;
+  }
+}
+
+.search-actions {
+  margin-right: 0 !important;
+
+  ::v-deep .el-form-item__content {
+    display: flex;
+    gap: 10px;
+  }
 }
 
 .commission-table {
-  width: 100%;
+  flex: 1;
+  min-height: 0;
 
   ::v-deep th {
     height: 44px;
@@ -269,6 +376,7 @@ export default {
 }
 
 .commission-pagination {
+  flex-shrink: 0;
   padding-top: 12px;
   text-align: right;
 }
@@ -277,7 +385,7 @@ export default {
   padding: 4px 16px 0;
 
   ::v-deep .el-form-item {
-    margin-bottom: 24px;
+    margin-bottom: 20px;
   }
 
   ::v-deep .el-form-item__label {
@@ -312,22 +420,17 @@ export default {
 }
 
 .default-tip {
-  margin: -2px 0 24px 76px;
-  color: #606266;
-  line-height: 24px;
-
-  strong {
-    margin-left: 10px;
-    color: #f5222d;
-    font-size: 16px;
-  }
-}
-
-.default-form-item {
-  margin-bottom: 0 !important;
+  margin-top: 6px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 20px;
 }
 
 .danger-action {
   color: #f56c6c;
+
+  &.is-disabled {
+    color: #c0c4cc;
+  }
 }
 </style>

src/views/agent/turnoverCommission/index.vue

@@ -5,41 +5,51 @@
         <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
       </div>
 
-      <el-table v-loading="loading" :data="pagedRows" border class="commission-table" height="calc(100vh - 225px)">
-        <el-table-column type="index" label="序号" width="70" align="center" />
+      <el-table v-loading="loading" :data="tableData" border class="commission-table" height="calc(100vh - 225px)">
+        <el-table-column type="index" label="序号" width="70" align="center" :index="tableIndex" />
         <el-table-column prop="name" label="流水佣金比例名称" min-width="170" align="center" />
-        <el-table-column prop="casino" label="真人流水佣金比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.casino) }}</template>
+        <el-table-column prop="live_rate" label="真人流水佣金比例" min-width="145" align="center">
+          <template slot-scope="{ row }">{{ formatRate(row.live_rate) }}</template>
         </el-table-column>
-        <el-table-column prop="tiger" label="老虎机流水佣金比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.tiger) }}</template>
+        <el-table-column prop="slot_rate" label="老虎机流水佣金比例" min-width="145" align="center">
+          <template slot-scope="{ row }">{{ formatRate(row.slot_rate) }}</template>
         </el-table-column>
-        <el-table-column prop="lottery" label="彩票流水佣金比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.lottery) }}</template>
+        <el-table-column prop="lottery_rate" label="彩票流水佣金比例" min-width="145" align="center">
+          <template slot-scope="{ row }">{{ formatRate(row.lottery_rate) }}</template>
         </el-table-column>
-        <el-table-column prop="sports" label="体育流水佣金比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.sports) }}</template>
+        <el-table-column prop="sport_rate" label="体育流水佣金比例" min-width="145" align="center">
+          <template slot-scope="{ row }">{{ formatRate(row.sport_rate) }}</template>
         </el-table-column>
-        <el-table-column prop="esports" label="电竞流水佣金比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.esports) }}</template>
+        <el-table-column prop="esports_rate" label="电竞流水佣金比例" min-width="145" align="center">
+          <template slot-scope="{ row }">{{ formatRate(row.esports_rate) }}</template>
         </el-table-column>
-        <el-table-column prop="fishing" label="捕鱼流水佣金比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.fishing) }}</template>
+        <el-table-column prop="fishing_rate" label="捕鱼流水佣金比例" min-width="145" align="center">
+          <template slot-scope="{ row }">{{ formatRate(row.fishing_rate) }}</template>
         </el-table-column>
-        <el-table-column prop="chess" label="棋牌流水佣金比例" min-width="145" align="center">
-          <template slot-scope="{ row }">{{ formatRate(row.chess) }}</template>
+        <el-table-column prop="chess_rate" label="棋牌流水佣金比例" min-width="145" align="center">
+          <template slot-scope="{ row }">{{ formatRate(row.chess_rate) }}</template>
         </el-table-column>
         <el-table-column label="是否默认" width="100" align="center">
           <template slot-scope="{ row }">
             <el-tag v-if="row.is_default" type="success" size="mini" effect="plain">是</el-tag>
-            <span v-else class="muted">否</span>
+            <el-tag v-else type="info" size="mini" effect="plain">否</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" width="170" align="center" />
-        <el-table-column label="操作" width="120" fixed="right" align="center">
+        <el-table-column prop="created_at" label="创建时间" width="180" align="center">
+          <template slot-scope="{ row }">{{ formatDate(row.created_at) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="140" fixed="right" align="center">
           <template slot-scope="{ row }">
             <el-button type="text" size="mini" @click="handleEdit(row)">修改</el-button>
-            <el-button type="text" size="mini" class="danger-action" @click="handleDelete(row)">删除</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              class="danger-action"
+              :disabled="Boolean(row.is_default)"
+              @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -51,62 +61,73 @@
         :current-page="page"
         :page-size="limit"
         :page-sizes="[10, 20, 50, 100]"
-        :total="rows.length"
+        :total="total"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
     </div>
 
     <el-dialog
-      :title="dialogType === 'add' ? '新增' : '修改'"
+      :title="dialogType === 'add' ? '新增流水佣金方案' : '修改流水佣金方案'"
       :visible.sync="dialogVisible"
-      width="50%"
-      top="15vh"
+      width="620px"
+      top="10vh"
       @close="resetForm"
     >
-      <el-form ref="commissionForm" :model="form" :rules="rules" label-width="120px" size="small" class="commission-form">
-        <el-form-item label="返佣比例名称" prop="name">
-          <el-input v-model="form.name" maxlength="30" placeholder="返佣比例名称" />
+      <el-form
+        ref="commissionForm"
+        :model="form"
+        :rules="rules"
+        label-width="140px"
+        size="small"
+        class="commission-form"
+      >
+        <el-form-item label="流水方案名称" prop="name">
+          <el-input v-model="form.name" maxlength="128" placeholder="请输入流水方案名称" />
         </el-form-item>
 
         <el-form-item v-for="field in rateFields" :key="field.prop" :label="field.label" :prop="field.prop">
           <div class="rate-control">
-            <el-input v-model="form[field.prop]" :placeholder="field.placeholder" />
+            <el-input v-model="form[field.prop]" maxlength="8" :placeholder="`请输入${field.label}`" />
             <span class="unit">%</span>
           </div>
         </el-form-item>
 
-        <div class="default-tip">
-          <span>注意：</span>
-          <strong>默认比例仅存在一条，如果勾选默认会覆盖掉已配置过此比例的代理</strong>
-        </div>
-
-        <el-form-item label="是否默认" prop="is_default" class="default-form-item">
+        <el-form-item label="是否默认" prop="is_default">
           <el-radio-group v-model="form.is_default">
             <el-radio :label="false">否</el-radio>
             <el-radio :label="true">是</el-radio>
           </el-radio-group>
+          <div class="default-tip">
+            默认方案只能有一条，设为默认后旧默认方案会自动取消。
+          </div>
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button size="small" @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" size="small" @click="submitForm">确定</el-button>
+        <el-button type="primary" size="small" :loading="submitting" @click="submitForm">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import {
+  deleteAgentFlowCommissionProfile,
+  getAgentFlowCommissionProfiles,
+  saveAgentFlowCommissionProfile
+} from '@/api/data'
+
 const emptyForm = () => ({
   id: null,
   name: '',
-  casino: '',
-  tiger: '',
-  lottery: '',
-  sports: '',
-  esports: '',
-  fishing: '',
-  chess: '',
+  live_rate: '',
+  slot_rate: '',
+  lottery_rate: '',
+  sport_rate: '',
+  esports_rate: '',
+  fishing_rate: '',
+  chess_rate: '',
   is_default: false
 })
 
@@ -115,126 +136,159 @@ export default {
   data() {
     return {
       loading: false,
+      submitting: false,
+      query: {
+        name: ''
+      },
       page: 1,
-      limit: 10,
+      limit: 20,
+      total: 0,
+      tableData: [],
       dialogVisible: false,
       dialogType: 'add',
       form: emptyForm(),
-      rows: [
-        {
-          id: 1,
-          name: '流水-默认比例',
-          casino: 0.8,
-          tiger: 2,
-          lottery: 0.5,
-          sports: 0.5,
-          esports: 0.5,
-          fishing: 0.5,
-          chess: 0.5,
-          is_default: true,
-          created_at: '2024-11-14 09:02:33'
-        }
-      ],
       rateFields: [
-        { prop: 'casino', label: '真人返佣比例', placeholder: '真人返佣比例' },
-        { prop: 'tiger', label: '老虎机返佣比例', placeholder: '老虎机返佣比例' },
-        { prop: 'lottery', label: '彩票返佣比例', placeholder: '彩票返佣比例' },
-        { prop: 'sports', label: '体育返佣比例', placeholder: '体育返佣比例' },
-        { prop: 'esports', label: '电竞返佣比例', placeholder: '电竞返佣比例' },
-        { prop: 'fishing', label: '捕鱼返佣比例', placeholder: '捕鱼返佣比例' },
-        { prop: 'chess', label: '棋牌返佣比例', placeholder: '棋牌返佣比例' }
+        { prop: 'live_rate', label: '真人流水佣金比例' },
+        { prop: 'slot_rate', label: '老虎机流水佣金比例' },
+        { prop: 'lottery_rate', label: '彩票流水佣金比例' },
+        { prop: 'sport_rate', label: '体育流水佣金比例' },
+        { prop: 'esports_rate', label: '电竞流水佣金比例' },
+        { prop: 'fishing_rate', label: '捕鱼流水佣金比例' },
+        { prop: 'chess_rate', label: '棋牌流水佣金比例' }
       ],
       rules: {
-        name: [{ required: true, message: '请输入比例名称', trigger: 'blur' }],
-        casino: [{ required: true, message: '请输入真人返佣比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        tiger: [{ required: true, message: '请输入老虎机返佣比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        lottery: [{ required: true, message: '请输入彩票返佣比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        sports: [{ required: true, message: '请输入体育返佣比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        esports: [{ required: true, message: '请输入电竞返佣比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        fishing: [{ required: true, message: '请输入捕鱼返佣比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }],
-        chess: [{ required: true, message: '请输入棋牌返佣比例', trigger: 'blur' }, { validator: this.validateRate, trigger: 'blur' }]
+        name: [
+          { required: true, message: '请输入比例名称', trigger: 'blur' },
+          { max: 128, message: '名称最长为128个字符', trigger: 'blur' }
+        ]
       }
     }
   },
-  computed: {
-    pagedRows() {
-      const start = (this.page - 1) * this.limit
-      return this.rows.slice(start, start + this.limit)
-    }
+  created() {
+    this.getList()
   },
   methods: {
+    tableIndex(index) {
+      return (this.page - 1) * this.limit + index + 1
+    },
+    getList() {
+      this.loading = true
+      getAgentFlowCommissionProfiles({
+        page: this.page,
+        limit: this.limit,
+        name: this.query.name || undefined
+      })
+        .then(res => {
+          const data = res.data || {}
+          this.total = Number(data.total) || 0
+          this.page = Number(data.page) || this.page
+          this.limit = Number(data.limit) || this.limit
+          this.tableData = data.list || []
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleSearch() {
+      this.page = 1
+      this.getList()
+    },
+    handleSizeChange(value) {
+      this.limit = value
+      this.page = 1
+      this.getList()
+    },
+    handleCurrentChange(value) {
+      this.page = value
+      this.getList()
+    },
     validateRate(rule, value, callback) {
-      const rate = Number(value)
-      if (value === '' || Number.isNaN(rate) || rate < 0 || rate > 100) {
+      if (value === '' || value === null || value === undefined) {
         callback(new Error('请输入0-100之间的比例'))
         return
       }
+      if (!/^(?:100(?:\.0{1,4})?|(?:\d{1,2})(?:\.\d{1,4})?)$/.test(String(value))) {
+        callback(new Error('请输入0-100之间的数字，最多4位小数'))
+        return
+      }
       callback()
     },
     formatRate(value) {
-      return `${Number(value || 0).toFixed(2).replace(/\.00$/, '')}%`
+      const numberValue = Number(value)
+      if (Number.isNaN(numberValue)) return value || '0%'
+      return `${numberValue.toFixed(2).replace(/\.?0+$/, '')}%`
+    },
+    formatDate(value) {
+      if (!value) return '--'
+      return String(value).replace('T', ' ').replace(/\.\d+Z$/, '').slice(0, 19)
     },
     handleAdd() {
       this.dialogType = 'add'
       this.form = emptyForm()
       this.dialogVisible = true
+      this.clearValidate()
     },
     handleEdit(row) {
       this.dialogType = 'edit'
-      this.form = { ...row }
+      this.form = Object.assign(emptyForm(), row, {
+        is_default: Boolean(row.is_default)
+      })
       this.dialogVisible = true
+      this.clearValidate()
+    },
+    clearValidate() {
+      this.$nextTick(() => {
+        if (this.$refs.commissionForm) this.$refs.commissionForm.clearValidate()
+      })
     },
     handleDelete(row) {
       if (row.is_default) {
-        this.$message.warning('默认比例不能删除')
+        this.$message.warning('默认方案不能删除，请先设置其他方案为默认')
         return
       }
-      this.$confirm('确定删除该流水佣金比例吗？', '提示', {
+      this.$confirm(`确定删除“${row.name}”吗？`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
-        this.rows = this.rows.filter(item => item.id !== row.id)
-        this.$message.success('删除成功')
-        if (this.page > 1 && this.pagedRows.length === 0) this.page -= 1
-      }).catch(() => {})
+      })
+        .then(() => deleteAgentFlowCommissionProfile({ id: row.id }))
+        .then(() => {
+          this.$message.success('删除成功')
+          if (this.tableData.length === 1 && this.page > 1) this.page -= 1
+          this.getList()
+        })
+        .catch(() => {})
     },
     submitForm() {
+      this.rateFields.forEach(field => {
+        this.$set(this.rules, field.prop, [{ validator: this.validateRate, trigger: 'blur' }])
+      })
       this.$refs.commissionForm.validate(valid => {
         if (!valid) return
-        const data = { ...this.form }
-        Object.keys(data).forEach(key => {
-          if (key !== 'name' && key !== 'id' && key !== 'created_at' && key !== 'is_default') {
-            data[key] = data[key] === '' ? 0 : Number(data[key])
-          }
-        })
-        if (data.is_default) this.rows.forEach(item => { item.is_default = false })
-        if (this.dialogType === 'add') {
-          data.id = Date.now()
-          data.created_at = this.formatDate(new Date())
-          this.rows.push(data)
-        } else {
-          const index = this.rows.findIndex(item => item.id === data.id)
-          if (index > -1) this.$set(this.rows, index, data)
+        this.submitting = true
+        const payload = {
+          name: this.form.name.trim(),
+          is_default: Boolean(this.form.is_default)
         }
-        this.dialogVisible = false
-        this.$message.success(this.dialogType === 'add' ? '新增成功' : '修改成功')
+        this.rateFields.forEach(field => {
+          payload[field.prop] = String(this.form[field.prop])
+        })
+        if (this.dialogType === 'edit') payload.id = this.form.id
+
+        saveAgentFlowCommissionProfile(payload)
+          .then(() => {
+            this.$message.success(this.dialogType === 'add' ? '新增成功' : '修改成功')
+            this.dialogVisible = false
+            this.getList()
+          })
+          .finally(() => {
+            this.submitting = false
+          })
       })
     },
     resetForm() {
       if (this.$refs.commissionForm) this.$refs.commissionForm.resetFields()
       this.form = emptyForm()
-    },
-    formatDate(date) {
-      const pad = value => String(value).padStart(2, '0')
-      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
-    },
-    handleSizeChange(value) {
-      this.limit = value
-      this.page = 1
-    },
-    handleCurrentChange(value) {
-      this.page = value
     }
   }
 }
@@ -250,6 +304,8 @@ export default {
 }
 
 .commission-panel {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   padding: 20px 20px 12px;
   overflow: hidden;
@@ -262,7 +318,8 @@ export default {
 }
 
 .commission-table {
-  width: 100%;
+  flex: 1;
+  min-height: 0;
 
   ::v-deep th {
     height: 44px;
@@ -278,6 +335,7 @@ export default {
 }
 
 .commission-pagination {
+  flex-shrink: 0;
   padding-top: 12px;
   text-align: right;
 }
@@ -286,7 +344,7 @@ export default {
   padding: 4px 16px 0;
 
   ::v-deep .el-form-item {
-    margin-bottom: 24px;
+    margin-bottom: 20px;
   }
 
   ::v-deep .el-form-item__label {
@@ -321,19 +379,10 @@ export default {
 }
 
 .default-tip {
-  margin: -2px 0 24px 76px;
-  color: #606266;
-  line-height: 24px;
-
-  strong {
-    margin-left: 10px;
-    color: #f5222d;
-    font-size: 16px;
-  }
-}
-
-.default-form-item {
-  margin-bottom: 0 !important;
+  margin-top: 6px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 20px;
 }
 
 .muted {
@@ -342,5 +391,9 @@ export default {
 
 .danger-action {
   color: #f56c6c;
+
+  &.is-disabled {
+    color: #c0c4cc;
+  }
 }
 </style>