1

admin/src/views/subscription/subscriptions.vue

@@ -6,15 +6,27 @@
       </div>
 
       <Form ref="formInline" :model="param.seachOption" inline :label-width="80">
-        <FormItem label="用户ID">
-          <Input v-model="param.seachOption.value" style="width: 140px" placeholder="筛选 user_id" class="ml10" />
-        </FormItem>
-        <FormItem>
-          <Select v-model="param.seachOption.key" style="width: 120px">
-            <Option value="user_id">用户ID</Option>
+        <FormItem label="筛选">
+          <Select v-model="param.seachOption.key" style="width: 120px" @on-change="onSearchKeyChange">
+            <Option value="user_id">用户</Option>
             <Option value="status">状态</Option>
           </Select>
         </FormItem>
+        <FormItem v-if="param.seachOption.key === 'user_id'">
+          <Select
+            v-model="param.seachOption.value"
+            filterable
+            clearable
+            placeholder="选择用户"
+            style="width: 260px"
+            class="ml10"
+          >
+            <Option v-for="u in bizUserOptions" :key="u.id" :value="String(u.id)">{{ bizUserLabel(u) }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem v-else>
+          <Input v-model="param.seachOption.value" style="width: 160px" placeholder="pending / active …" class="ml10" />
+        </FormItem>
         <FormItem>
           <Button type="primary" @click="load(1)">查询</Button>
           <Button type="default" @click="resetQuery" class="ml10">重置</Button>
@@ -26,21 +38,23 @@
     <div class="table-body">
       <Table :columns="columns" :data="rows" border stripe />
       <div class="table-page-bar">
-        <Page
-          :total="total"
-          :current="param.pageOption.page"
-          :page-size="param.pageOption.pageSize"
-          show-total
-          @on-change="onPage"
-          @on-page-size-change="onSize"
-        />
+        <Page :total="total" :current="param.pageOption.page" :page-size="param.pageOption.pageSize" show-total
+          @on-change="onPage" @on-page-size-change="onSize" />
       </div>
     </div>
 
     <Modal v-model="openModal" title="开通订阅" width="640" :loading="saving" @on-ok="submitOpen">
       <Form :label-width="110">
-        <FormItem label="用户ID"><Input v-model="openForm.user_id" type="number" /></FormItem>
-        <FormItem label="套餐ID"><Input v-model="openForm.plan_id" type="number" /></FormItem>
+        <FormItem label="用户">
+          <Select v-model="openForm.user_id" filterable clearable placeholder="请选择" style="width: 100%">
+            <Option v-for="u in bizUserOptions" :key="u.id" :value="u.id">{{ bizUserLabel(u) }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="套餐">
+          <Select v-model="openForm.plan_id" filterable clearable placeholder="请选择" style="width: 100%">
+            <Option v-for="p in bizPlanOptions" :key="p.id" :value="p.id">{{ bizPlanLabel(p) }}</Option>
+          </Select>
+        </FormItem>
         <FormItem label="开始时间"><Input v-model="openForm.start_time" placeholder="2025-01-01 00:00:00" /></FormItem>
         <FormItem label="结束时间"><Input v-model="openForm.end_time" placeholder="2025-12-31 23:59:59" /></FormItem>
         <FormItem label="状态">
@@ -73,7 +87,11 @@
 
     <Modal v-model="upgradeModal" title="升级套餐" :loading="saving" @on-ok="submitUpgrade">
       <Form :label-width="100">
-        <FormItem label="新套餐ID"><Input v-model="upgradeForm.new_plan_id" type="number" /></FormItem>
+        <FormItem label="新套餐">
+          <Select v-model="upgradeForm.new_plan_id" filterable clearable placeholder="请选择" style="width: 100%">
+            <Option v-for="p in bizPlanOptions" :key="p.id" :value="p.id">{{ bizPlanLabel(p) }}</Option>
+          </Select>
+        </FormItem>
         <FormItem label="开始"><Input v-model="upgradeForm.start_time" /></FormItem>
         <FormItem label="结束"><Input v-model="upgradeForm.end_time" /></FormItem>
       </Form>
@@ -84,9 +102,11 @@
 <script>
 import subscriptionsServer from '@/api/subscription/subscriptions_server.js'
 import { downloadCsvFromRows } from '@/utils/csvExport.js'
+import subscriptionRelations from '@/mixins/subscriptionRelations.js'
 
 export default {
   name: 'SubscriptionRecords',
+  mixins: [subscriptionRelations],
   data() {
     return {
       rows: [],
@@ -102,7 +122,7 @@ export default {
       currentRow: null,
       openForm: {},
       renewForm: { end_time: '' },
-      upgradeForm: { new_plan_id: '', start_time: '', end_time: '' },
+      upgradeForm: { new_plan_id: undefined, start_time: '', end_time: '' },
     }
   },
   computed: {
@@ -128,10 +148,14 @@ export default {
       ]
     },
   },
-  mounted() {
+  async mounted() {
+    await this.loadBizRelationOptions()
     this.load(1)
   },
   methods: {
+    onSearchKeyChange() {
+      this.param.seachOption.value = ''
+    },
     async load(page) {
       if (page) this.param.pageOption.page = page
       const res = await subscriptionsServer.page({ param: this.param })
@@ -159,8 +183,8 @@ export default {
           d.getHours()
         ).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:00`
       this.openForm = {
-        user_id: '',
-        plan_id: '',
+        user_id: undefined,
+        plan_id: undefined,
         start_time: fmt(now),
         end_time: fmt(end),
         status: 'pending',
@@ -170,12 +194,28 @@ export default {
       }
       this.openModal = true
     },
-    async submitOpen() {
+    submitOpen() {
+      const uid = this.openForm.user_id
+      const pid = this.openForm.plan_id
+      if (uid === undefined || uid === null || uid === '') {
+        this.$Message.warning('请选择用户')
+        return false
+      }
+      if (pid === undefined || pid === null || pid === '') {
+        this.$Message.warning('请选择套餐')
+        return false
+      }
       this.saving = true
+      this._submitOpen()
+      return false
+    },
+    async _submitOpen() {
+      const uid = this.openForm.user_id
+      const pid = this.openForm.plan_id
       try {
         const body = {
-          user_id: Number(this.openForm.user_id),
-          plan_id: Number(this.openForm.plan_id),
+          user_id: Number(uid),
+          plan_id: Number(pid),
           start_time: this.openForm.start_time,
           end_time: this.openForm.end_time,
           status: this.openForm.status,
@@ -221,16 +261,30 @@ export default {
     },
     openUpgrade(row) {
       this.currentRow = row
-      this.upgradeForm = { new_plan_id: row.plan_id, start_time: '', end_time: '' }
+      this.upgradeForm = { new_plan_id: row.plan_id != null ? Number(row.plan_id) : undefined, start_time: '', end_time: '' }
       this.upgradeModal = true
     },
-    async submitUpgrade() {
-      if (!this.currentRow) return
+    submitUpgrade() {
+      if (!this.currentRow) return false
+      const np = this.upgradeForm.new_plan_id
+      if (np === undefined || np === null || np === '') {
+        this.$Message.warning('请选择新套餐')
+        return false
+      }
       this.saving = true
+      this._submitUpgrade()
+      return false
+    },
+    async _submitUpgrade() {
+      if (!this.currentRow) {
+        this.saving = false
+        return
+      }
+      const np = this.upgradeForm.new_plan_id
       try {
         const res = await subscriptionsServer.upgrade({
           subscription_id: this.currentRow.id,
-          new_plan_id: Number(this.upgradeForm.new_plan_id),
+          new_plan_id: Number(np),
           start_time: this.upgradeForm.start_time || undefined,
           end_time: this.upgradeForm.end_time || undefined,
         })