manager 升级到vue3

manager/src/views/member/benefit/index.vue

@@ -1,42 +1,90 @@
 <template>
   <div class="search member-benefit">
-    <Card>
-      <Row class="operation padding-row">
-        <Button type="primary" @click="openAdd">添加权益设置</Button>
-      </Row>
-      <Table
-        :loading="loading"
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="openAdd">添加权益设置</el-button>
+      </div>
+      <el-table
+        v-loading="loading"
         stripe
-        :columns="columns"
         :data="data"
-        no-data-text="暂无数据"
+        empty-text="暂无数据"
         class="mt_10 benefit-list-table benefit-list-table--no-vertical-borders"
-      ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        style="width: 100%"
+      >
+        <el-table-column label="权益类型" width="132">
+          <template #default="{ row }">
+            <span
+              v-if="row"
+              :title="benefitTypeLabel(row.benefitType)"
+              class="benefit-list-cell-ellipsis benefit-list-cell-ellipsis--type"
+            >
+              {{ benefitTypeLabel(row.benefitType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="权益名称" width="188">
+          <template #default="{ row }">
+            <span
+              v-if="row"
+              :title="row.benefitName || '-'"
+              class="benefit-list-cell-ellipsis benefit-list-cell-ellipsis--name"
+            >
+              {{ row.benefitName || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="权益LOGO" width="116" align="center">
+          <template #default="{ row }">
+            <span v-if="row && !row.benefitLogo">-</span>
+            <div v-else-if="row" class="benefit-logo-thumb benefit-logo-thumb--table">
+              <img :src="row.benefitLogo" alt="" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="118" align="center">
+          <template #default="{ row }">
+            <el-switch
+              v-if="row"
+              :model-value="row.benefitState === 'OPEN'"
+              inline-prompt
+              active-text="开启"
+              inactive-text="关闭"
+              :loading="!!row._benefitStateLoading"
+              @change="(checked) => onBenefitStateSwitch(row, checked)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="140">
+          <template #default="{ row }">
+            <div v-if="row" class="ops" style="display: flex; justify-content: center">
+              <a class="link-text" @click="openEdit(row)">编辑</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 30, 50]"
+          :page-sizes="[20, 30, 50]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
 
-    <!-- 平台优惠券选择（与「添加优惠券活动」coupon-publish 相同组件） -->
-    <Modal
+    <el-dialog
       v-model="couponPickerVisible"
       title="选择优惠券"
       width="80%"
       :z-index="3000"
-      :mask-closable="false"
-      @on-ok="handleCouponPickerClose"
-      @on-cancel="handleCouponPickerClose"
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="handleCouponPickerClose"
     >
       <couponTemplate
         v-if="couponPickerVisible"
@@ -45,38 +93,41 @@
         promotionStatus="START"
         @selected="onCouponTemplateSelected"
       />
-    </Modal>
+    </el-dialog>
 
-    <Drawer
+    <el-drawer
       v-model="addFlag"
       title="添加权益设置"
-      width="1120"
-      placement="right"
+      size="1120px"
+      direction="rtl"
       :z-index="950"
-      :mask-closable="false"
-      :closable="true"
-      scrollable
-      class-name="benefit-form-drawer"
+      :close-on-click-modal="false"
+      class="benefit-form-drawer"
     >
-      <Form ref="addForm" :model="formAdd" :rules="rulesAdd" :label-width="110">
-        <FormItem label="权益类型" prop="benefitType">
-          <Select
+      <el-form ref="addForm" :model="formAdd" :rules="rulesAdd" label-width="110px">
+        <el-form-item label="权益类型" prop="benefitType">
+          <el-select
             v-model="formAdd.benefitType"
             clearable
             placeholder="请选择权益类型"
             style="width: 100%"
-            @on-change="onAddBenefitTypeChange"
+            @change="onAddBenefitTypeChange"
           >
-            <Option v-for="item in benefitTypeOptions" :key="item.value" :value="item.value">{{ item.description }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem
+            <el-option
+              v-for="item in benefitTypeOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.description"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
           v-show="formAdd.benefitType === 'GIFT_POINT'"
           label="赠送积分"
           prop="giftPoint"
           :required="formAdd.benefitType === 'GIFT_POINT'"
         >
-          <InputNumber
+          <el-input-number
             v-model="formAdd.giftPoint"
             :min="0"
             :max="99999"
@@ -84,28 +135,54 @@
             style="width: 220px"
             placeholder="必填，范围 0-99999"
           />
-        </FormItem>
-        <FormItem
+        </el-form-item>
+        <el-form-item
           v-show="formAdd.benefitType === 'COUPON_PACKAGE'"
           label="赠送优惠券"
           prop="couponPackageRows"
           :required="formAdd.benefitType === 'COUPON_PACKAGE'"
         >
           <div>
-            <Button type="dashed" icon="ios-add" class="mb_10" @click="openCouponPicker('add')">添加优惠券</Button>
-            <Table
+            <el-button plain class="mb_10" @click="openCouponPicker('add')">添加优惠券</el-button>
+            <el-table
               border
               size="small"
-              :columns="couponPackageTableColumns"
               :data="formAdd.couponPackageRows"
-              no-data-text="请添加优惠券"
-            ></Table>
+              empty-text="请添加优惠券"
+              style="width: 100%"
+            >
+              <el-table-column prop="couponName" label="优惠券名称" min-width="100" show-overflow-tooltip />
+              <el-table-column label="有效期" min-width="100">
+                <template #default="{ row }">
+                  <span v-if="row" v-html="row.validRange || '-'" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="faceValueLabel" label="面额" min-width="100" />
+              <el-table-column label="赠送张数" width="150">
+                <template #default="{ row, $index }">
+                  <el-input-number
+                    v-if="row"
+                    :model-value="row.quantity"
+                    :min="1"
+                    :max="10"
+                    :precision="0"
+                    style="width: 100px"
+                    @change="(val) => onCouponQuantityChange('add', $index, val)"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="90" align="center">
+                <template #default="{ row, $index }">
+                  <a v-if="row" class="link-text" @click="removeCouponRow('add', $index)">删除</a>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-        </FormItem>
-        <FormItem label="权益名称" prop="benefitName">
-          <Input v-model="formAdd.benefitName" maxlength="50" placeholder="请输入权益名称" />
-        </FormItem>
-        <FormItem label="权益LOGO" prop="benefitLogo">
+        </el-form-item>
+        <el-form-item label="权益名称" prop="benefitName">
+          <el-input v-model="formAdd.benefitName" maxlength="50" placeholder="请输入权益名称" />
+        </el-form-item>
+        <el-form-item label="权益LOGO" prop="benefitLogo">
           <div class="benefit-logo-field">
             <div v-if="formAdd.benefitLogo" class="benefit-logo-thumb">
               <img :src="formAdd.benefitLogo" alt="" />
@@ -114,57 +191,60 @@
               <upload-pic-input v-model="formAdd.benefitLogo" placeholder="请上传权益 LOGO 图片地址" style="width: 100%" />
             </div>
           </div>
-        </FormItem>
-        <FormItem label="权益介绍" prop="benefitDesc">
-          <Input v-model="formAdd.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
-        </FormItem>
-        <FormItem label="启用状态" prop="benefitState">
-          <RadioGroup v-model="formAdd.benefitState">
-            <Radio label="OPEN">开启</Radio>
-            <Radio label="CLOSE">关闭</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="排序" prop="benefitSort">
-          <InputNumber v-model="formAdd.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
-        </FormItem>
-      </Form>
+        </el-form-item>
+        <el-form-item label="权益介绍" prop="benefitDesc">
+          <el-input v-model="formAdd.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
+        </el-form-item>
+        <el-form-item label="启用状态" prop="benefitState">
+          <el-radio-group v-model="formAdd.benefitState">
+            <el-radio value="OPEN">开启</el-radio>
+            <el-radio value="CLOSE">关闭</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序" prop="benefitSort">
+          <el-input-number v-model="formAdd.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
+        </el-form-item>
+      </el-form>
       <div class="benefit-drawer-footer-btns">
-        <Button @click="addFlag = false">取消</Button>
-        <Button type="primary" :loading="submitAddLoading" @click="submitAdd">提交</Button>
+        <el-button @click="addFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitAddLoading" @click="submitAdd">提交</el-button>
       </div>
-    </Drawer>
+    </el-drawer>
 
-    <Drawer
+    <el-drawer
       v-model="editFlag"
       title="编辑权益设置"
-      width="1120"
-      placement="right"
+      size="1120px"
+      direction="rtl"
       :z-index="950"
-      :mask-closable="false"
-      :closable="true"
-      scrollable
-      class-name="benefit-form-drawer"
+      :close-on-click-modal="false"
+      class="benefit-form-drawer"
     >
-      <Form ref="editForm" :model="formEdit" :rules="rulesEdit" :label-width="110">
-        <Input v-model="formEdit.id" v-show="false" />
-        <FormItem label="权益类型" prop="benefitType">
-          <Select
+      <el-form ref="editForm" :model="formEdit" :rules="rulesEdit" label-width="110px">
+        <el-input v-model="formEdit.id" v-show="false" />
+        <el-form-item label="权益类型" prop="benefitType">
+          <el-select
             v-model="formEdit.benefitType"
             clearable
             placeholder="请选择权益类型"
             style="width: 100%"
-            @on-change="onEditBenefitTypeChange"
+            @change="onEditBenefitTypeChange"
           >
-            <Option v-for="item in benefitTypeOptions" :key="item.value" :value="item.value">{{ item.description }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem
+            <el-option
+              v-for="item in benefitTypeOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.description"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
           v-show="formEdit.benefitType === 'GIFT_POINT'"
           label="赠送积分"
           prop="giftPoint"
           :required="formEdit.benefitType === 'GIFT_POINT'"
         >
-          <InputNumber
+          <el-input-number
             v-model="formEdit.giftPoint"
             :min="0"
             :max="99999"
@@ -172,28 +252,54 @@
             style="width: 220px"
             placeholder="必填，范围 0-99999"
           />
-        </FormItem>
-        <FormItem
+        </el-form-item>
+        <el-form-item
           v-show="formEdit.benefitType === 'COUPON_PACKAGE'"
           label="赠送优惠券"
           prop="couponPackageRows"
           :required="formEdit.benefitType === 'COUPON_PACKAGE'"
         >
           <div>
-            <Button type="dashed" icon="ios-add" class="mb_10" @click="openCouponPicker('edit')">添加优惠券</Button>
-            <Table
+            <el-button plain class="mb_10" @click="openCouponPicker('edit')">添加优惠券</el-button>
+            <el-table
               border
               size="small"
-              :columns="couponPackageTableColumnsEdit"
               :data="formEdit.couponPackageRows"
-              no-data-text="请添加优惠券"
-            ></Table>
+              empty-text="请添加优惠券"
+              style="width: 100%"
+            >
+              <el-table-column prop="couponName" label="优惠券名称" min-width="100" show-overflow-tooltip />
+              <el-table-column label="有效期" min-width="100">
+                <template #default="{ row }">
+                  <span v-if="row" v-html="row.validRange || '-'" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="faceValueLabel" label="面额" min-width="100" />
+              <el-table-column label="赠送张数" width="150">
+                <template #default="{ row, $index }">
+                  <el-input-number
+                    v-if="row"
+                    :model-value="row.quantity"
+                    :min="1"
+                    :max="10"
+                    :precision="0"
+                    style="width: 100px"
+                    @change="(val) => onCouponQuantityChange('edit', $index, val)"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="90" align="center">
+                <template #default="{ row, $index }">
+                  <a v-if="row" class="link-text" @click="removeCouponRow('edit', $index)">删除</a>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-        </FormItem>
-        <FormItem label="权益名称" prop="benefitName">
-          <Input v-model="formEdit.benefitName" maxlength="50" placeholder="请输入权益名称" />
-        </FormItem>
-        <FormItem label="权益LOGO" prop="benefitLogo">
+        </el-form-item>
+        <el-form-item label="权益名称" prop="benefitName">
+          <el-input v-model="formEdit.benefitName" maxlength="50" placeholder="请输入权益名称" />
+        </el-form-item>
+        <el-form-item label="权益LOGO" prop="benefitLogo">
           <div class="benefit-logo-field">
             <div v-if="formEdit.benefitLogo" class="benefit-logo-thumb">
               <img :src="formEdit.benefitLogo" alt="" />
@@ -202,25 +308,25 @@
               <upload-pic-input v-model="formEdit.benefitLogo" placeholder="请上传权益 LOGO 图片地址" style="width: 100%" />
             </div>
           </div>
-        </FormItem>
-        <FormItem label="权益介绍" prop="benefitDesc">
-          <Input v-model="formEdit.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
-        </FormItem>
-        <FormItem label="启用状态" prop="benefitState">
-          <RadioGroup v-model="formEdit.benefitState">
-            <Radio label="OPEN">开启</Radio>
-            <Radio label="CLOSE">关闭</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="排序" prop="benefitSort">
-          <InputNumber v-model="formEdit.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
-        </FormItem>
-      </Form>
+        </el-form-item>
+        <el-form-item label="权益介绍" prop="benefitDesc">
+          <el-input v-model="formEdit.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
+        </el-form-item>
+        <el-form-item label="启用状态" prop="benefitState">
+          <el-radio-group v-model="formEdit.benefitState">
+            <el-radio value="OPEN">开启</el-radio>
+            <el-radio value="CLOSE">关闭</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序" prop="benefitSort">
+          <el-input-number v-model="formEdit.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
+        </el-form-item>
+      </el-form>
       <div class="benefit-drawer-footer-btns">
-        <Button @click="editFlag = false">取消</Button>
-        <Button type="primary" :loading="submitEditLoading" @click="submitEdit">提交</Button>
+        <el-button @click="editFlag = false">取消</el-button>
+        <el-button type="primary" :loading="submitEditLoading" @click="submitEdit">提交</el-button>
       </div>
-    </Drawer>
+    </el-drawer>
   </div>
 </template>
 
@@ -244,9 +350,7 @@ const buildDefaultForm = () => ({
   benefitSort: 1,
   benefitState: "OPEN",
   benefitConfig: "",
-  /** 仅 UI：赠送积分数量；提交时写入 benefitConfig */
   giftPoint: null,
-  /** 仅 UI：券礼包已选优惠券（含展示字段）；提交时写入 benefitConfig.coupons */
   couponPackageRows: [],
 });
 
@@ -265,109 +369,6 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        {
-          title: "权益类型",
-          key: "benefitType",
-          width: 132,
-          render: (h, params) => {
-            const v = params.row.benefitType;
-            let text = "-";
-            if (v) {
-              const opt = this.benefitTypeOptions.find((o) => o.value === v);
-              text = opt ? opt.description : v;
-            }
-            return h(
-              "span",
-              {
-                attrs: { title: text },
-                class: "benefit-list-cell-ellipsis benefit-list-cell-ellipsis--type",
-              },
-              text
-            );
-          },
-        },
-        {
-          title: "权益名称",
-          key: "benefitName",
-          width: 188,
-          render: (h, params) => {
-            const text = params.row.benefitName || "-";
-            return h(
-              "span",
-              {
-                attrs: { title: text },
-                class: "benefit-list-cell-ellipsis benefit-list-cell-ellipsis--name",
-              },
-              text
-            );
-          },
-        },
-        {
-          title: "权益LOGO",
-          key: "benefitLogo",
-          width: 116,
-          align: "center",
-          render: (h, params) => {
-            const src = params.row.benefitLogo;
-            if (!src) return h("span", "-");
-            return h(
-              "div",
-              {
-                class: "benefit-logo-thumb benefit-logo-thumb--table",
-              },
-              [
-                h("img", {
-                  attrs: { src, alt: "" },
-                }),
-              ]
-            );
-          },
-        },
-        {
-          title: "状态",
-          key: "benefitState",
-          width: 118,
-          align: "center",
-          render: (h, params) => {
-            const row = params.row;
-            return h("i-switch", {
-              props: {
-                value: row.benefitState === "OPEN",
-                size: "large",
-                loading: !!row._benefitStateLoading,
-              },
-              on: {
-                "on-change": (checked) => {
-                  this.onBenefitStateSwitch(row, checked);
-                },
-              },
-            }, [
-              h("span", { slot: "open" }, "开启"),
-              h("span", { slot: "close" }, "关闭"),
-            ]);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 140,
-          render: (h, params) => {
-            const linkStyle = {
-              color: "#2d8cf0",
-              cursor: "pointer",
-              textDecoration: "none",
-            };
-            const sep = h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|");
-            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
-              h("a", { style: linkStyle, on: { click: () => this.openEdit(params.row) } }, "编辑"),
-              sep,
-              h("a", { style: linkStyle, on: { click: () => this.remove(params.row) } }, "删除"),
-            ]);
-          },
-        },
-      ],
       data: [],
       addFlag: false,
       editFlag: false,
@@ -386,13 +387,6 @@ export default {
     rulesEdit() {
       return this.buildFormRules("edit");
     },
-    couponPackageTableColumns() {
-      return this.buildCouponPackageTableColumns("add");
-    },
-    couponPackageTableColumnsEdit() {
-      return this.buildCouponPackageTableColumns("edit");
-    },
-    /** 传给优惠券列表组件，用于勾选回显（与 coupon-publish 一致用 id） */
     couponPickerSelectedList() {
       const form = this.couponPickerWhich === "add" ? this.formAdd : this.formEdit;
       return (form.couponPackageRows || []).map((r) => ({
@@ -402,6 +396,20 @@ export default {
     },
   },
   methods: {
+    benefitTypeLabel(v) {
+      if (!v) return "-";
+      const opt = this.benefitTypeOptions.find((o) => o.value === v);
+      return opt ? opt.description : v;
+    },
+    onCouponQuantityChange(which, index, val) {
+      const formKey = which === "add" ? "formAdd" : "formEdit";
+      const refName = which === "add" ? "addForm" : "editForm";
+      this[formKey].couponPackageRows[index].quantity = val;
+      this.$nextTick(() => {
+        const ref = this.$refs[refName];
+        if (ref) ref.validateField("couponPackageRows");
+      });
+    },
     buildFormRules(which) {
       const formKey = which === "add" ? "formAdd" : "formEdit";
       return {
@@ -478,66 +486,6 @@ export default {
         validRange: this.formatCouponValidity(detail),
       };
     },
-    buildCouponPackageTableColumns(which) {
-      const formKey = which === "add" ? "formAdd" : "formEdit";
-      const linkStyle = { color: "#2d8cf0", cursor: "pointer" };
-      return [
-        { title: "优惠券名称", key: "couponName", minWidth: 100, tooltip: true },
-        {
-          title: "有效期",
-          minWidth: 100,
-          render: (h, p) =>
-            h("span", {
-              domProps: { innerHTML: p.row.validRange || "-" },
-            }),
-        },
-        { title: "面额", key: "faceValueLabel", minWidth: 100 },
-        {
-          title: "赠送张数",
-          key: "quantity",
-          width: 150,
-          render: (h, params) =>
-            h("InputNumber", {
-              props: {
-                min: 1,
-                max: 10,
-                precision: 0,
-                value: params.row.quantity,
-              },
-              style: { width: "100px" },
-              on: {
-                "on-change": (val) => {
-                  this.$set(this[formKey].couponPackageRows[params.index], "quantity", val);
-                  this.$nextTick(() => {
-                    const ref = which === "add" ? this.$refs.addForm : this.$refs.editForm;
-                    if (ref) ref.validateField("couponPackageRows");
-                  });
-                },
-              },
-            }),
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 90,
-          align: "center",
-          render: (h, params) =>
-            h(
-              "a",
-              {
-                style: linkStyle,
-                on: {
-                  click: () => {
-                    this.removeCouponRow(which, params.index);
-                  },
-                },
-              },
-              "删除"
-            ),
-        },
-      ];
-    },
-    /** 构造 benefitConfig JSON 字符串 */
     buildBenefitConfigString(slice) {
       const { benefitType, giftPoint, couponPackageRows } = slice;
       if (benefitType === GIFT_POINT) {
@@ -552,7 +500,6 @@ export default {
       }
       return "";
     },
-    /** 从详情 benefitConfig 解析赠送积分，解析失败时返回 null */
     parseGiftPointFromConfig(benefitType, benefitConfigStr) {
       if (benefitType !== GIFT_POINT || !benefitConfigStr) return null;
       try {
@@ -613,7 +560,6 @@ export default {
       }
       return [];
     },
-    /** 与添加时 formatCouponFace 一致；仅有 faceValueText 时去掉「减免」前缀 */
     normalizeCouponFaceFromDetail(item) {
       let face = this.formatCouponFace(item);
       if (face !== "-") return face;
@@ -624,7 +570,6 @@ export default {
         .replace(/^减免\s*/, "")
         .trim() || "-";
     },
-    /** 管理端详情 couponItems → 表格行（面额展示与添加一致） */
     mapCouponItemsToPackageRows(items) {
       if (!Array.isArray(items)) return [];
       return items.map((item) => {
@@ -669,7 +614,7 @@ export default {
           });
         }
       }
-      this.$set(this.formEdit, "couponPackageRows", rows);
+      this.formEdit.couponPackageRows = rows;
     },
     handleCouponPickerClose() {
       this.couponPickerVisible = false;
@@ -678,7 +623,6 @@ export default {
       this.couponPickerWhich = which;
       this.couponPickerVisible = true;
     },
-    /** 与 coupon-publish `selectedCoupon`：表格多选变更时同步到券礼包配置 */
     onCouponTemplateSelected(selectedRows) {
       const which = this.couponPickerWhich;
       const form = which === "add" ? this.formAdd : this.formEdit;
@@ -689,7 +633,7 @@ export default {
         const qty = existing ? existing.quantity : 1;
         return this.buildCouponDisplayRow(row, qty);
       });
-      this.$set(form, "couponPackageRows", rows);
+      form.couponPackageRows = rows;
       this.$nextTick(() => {
         const ref = this.$refs[refName];
         if (ref) ref.validateField("couponPackageRows");
@@ -791,7 +735,6 @@ export default {
       API_Member.getMemberBenefit(row.id).then((res) => {
         if (res && res.success && res.result) {
           const raw = res.result;
-          /** 新接口：{ benefit, couponItems }；旧接口：扁平 MemberBenefit */
           const detail = raw.benefit != null ? raw.benefit : raw;
           const couponItems = raw.couponItems;
           const bt = detail.benefitType || "";
@@ -866,19 +809,19 @@ export default {
         title: "提示",
         content: `<p>确定${text}该客户权益？</p>`,
         onOk: () => {
-          this.$set(row, "_benefitStateLoading", true);
+          row._benefitStateLoading = true;
           return API_Member.updateMemberBenefitState(row.id, nextState)
             .then((res) => {
-              this.$set(row, "_benefitStateLoading", false);
+              row._benefitStateLoading = false;
               if (res && res.success) {
                 this.$Message.success(`${text}成功`);
-                this.$set(row, "benefitState", nextState);
+                row.benefitState = nextState;
               } else {
                 this.getData();
               }
             })
             .catch(() => {
-              this.$set(row, "_benefitStateLoading", false);
+              row._benefitStateLoading = false;
             });
         },
       });
@@ -913,17 +856,20 @@ export default {
   border-top: 1px solid #e8eaec;
   text-align: right;
 }
-.benefit-drawer-footer-btns .ivu-btn + .ivu-btn {
+.benefit-drawer-footer-btns .el-button + .el-button {
   margin-left: 8px;
 }
-
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdfe6;
+}
 </style>
 
-<!--
-  权益 LOGO 缩略图：固定 100×100。
-  不使用 .member-benefit 前缀：Modal 默认 transfer 到 body，弹窗内节点不在 .member-benefit 下。
-  Table 列 render 生成的节点在子组件内，同样用非 scoped。
--->
 <style lang="scss">
 .benefit-logo-thumb {
   width: 100px;
@@ -952,7 +898,6 @@ export default {
   margin: 0 auto;
 }
 
-/* 权益列表：固定类型/名称列宽并省略过长文案（悬浮 title 可看全文） */
 .member-benefit .benefit-list-table table {
   table-layout: fixed;
 }
@@ -971,9 +916,8 @@ export default {
   max-width: 172px;
 }
 
-/* 列表不出现列与列之间的竖线（保留行间分隔） */
-.member-benefit .benefit-list-table--no-vertical-borders .ivu-table th,
-.member-benefit .benefit-list-table--no-vertical-borders .ivu-table td {
+.member-benefit .benefit-list-table--no-vertical-borders .el-table th,
+.member-benefit .benefit-list-table--no-vertical-borders .el-table td {
   border-right: none !important;
 }
 </style>