From 70ae62203ab8ed2f4e6f0389c3ff5211f967fd2d Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Wed, 28 Jan 2026 11:32:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BC=98=E6=83=A0=E5=88=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/act/act-coupon.ts          |  40 +++++
 src/hooks/dict.ts                  |  32 ++--
 src/utils/other.ts                 |   2 +-
 src/views/act/act-coupon/form.vue  | 244 +++++++++++++++++++++++++++++
 src/views/act/act-coupon/index.vue | 229 +++++++++++++++++++++++++++
 src/views/hard/hard-sh/index.vue   |   8 +-
 6 files changed, 540 insertions(+), 15 deletions(-)
 create mode 100644 src/api/act/act-coupon.ts
 create mode 100644 src/views/act/act-coupon/form.vue
 create mode 100644 src/views/act/act-coupon/index.vue

diff --git a/src/api/act/act-coupon.ts b/src/api/act/act-coupon.ts
new file mode 100644
index 0000000..6b76ccf
--- /dev/null
+++ b/src/api/act/act-coupon.ts
@@ -0,0 +1,40 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+	return request({
+		url: "/wallet/act-coupon/page",
+		method: "get",
+		params: query,
+	})
+}
+
+export function addObj(obj?: Object) {
+	return request({
+		url: "/wallet/act-coupon",
+		method: "post",
+		data: obj,
+	})
+}
+
+export function getObj(id?: string) {
+	return request({
+		url: "/wallet/act-coupon/" + id,
+		method: "get",
+	})
+}
+
+export function delObjs(ids?: Object) {
+	return request({
+		url: "/wallet/act-coupon",
+		method: "delete",
+		data: ids,
+	})
+}
+
+export function putObj(obj?: Object) {
+	return request({
+		url: "/wallet/act-coupon",
+		method: "put",
+		data: obj,
+	})
+}
diff --git a/src/hooks/dict.ts b/src/hooks/dict.ts
index a7f4c9a..420a538 100644
--- a/src/hooks/dict.ts
+++ b/src/hooks/dict.ts
@@ -1,29 +1,35 @@
-import { dict } from '/@/stores/dict';
-import { getDicts } from '/@/api/admin/dict';
-import { ref, toRefs } from 'vue';
+import { dict } from "/@/stores/dict"
+import { getDicts } from "/@/api/admin/dict"
+import { ref, toRefs } from "vue"
 
 /**
  * 获取字典数据
  */
 export function useDict(...args: any): any {
-	const res = ref({});
+	const res = ref({})
 	return (() => {
 		args.forEach((dictType: String) => {
 			// @ts-ignore
-			res.value[dictType] = [];
-			const dicts = dict().getDict(dictType);
+			res.value[dictType] = []
+			const dicts = dict().getDict(dictType)
 			if (dicts) {
 				// @ts-ignore
-				res.value[dictType] = dicts;
+				res.value[dictType] = dicts
 			} else {
 				getDicts(dictType).then((resp) => {
 					// @ts-ignore
-					res.value[dictType] = resp.data.map((p: any) => ({ label: p.label, value: p.value, elTagType: p.listClass, elTagClass: p.cssClass }));
+					res.value[dictType] = resp.data.map((p: any) => ({
+						label: p.label,
+						value: p.value,
+						elTagType: p.listClass,
+						elTagClass: p.cssClass,
+						remarks: p.remarks,
+					}))
 					// @ts-ignore
-					dict().setDict(dictType, res.value[dictType]);
-				});
+					dict().setDict(dictType, res.value[dictType])
+				})
 			}
-		});
-		return toRefs(res.value);
-	})();
+		})
+		return toRefs(res.value)
+	})()
 }
diff --git a/src/utils/other.ts b/src/utils/other.ts
index 908cccb..7c0068e 100644
--- a/src/utils/other.ts
+++ b/src/utils/other.ts
@@ -390,7 +390,7 @@ export function handleBlobFile(response: any, fileName: string) {
 				}
 			}
 			if (typeof (blob as any).text === "function") {
-				;(blob as any).text().then((t: string) => handleText(t))
+				(blob as any).text().then((t: string) => handleText(t))
 			} else {
 				const reader = new FileReader()
 				reader.onload = () => handleText(String(reader.result || ""))
diff --git a/src/views/act/act-coupon/form.vue b/src/views/act/act-coupon/form.vue
new file mode 100644
index 0000000..77362b2
--- /dev/null
+++ b/src/views/act/act-coupon/form.vue
@@ -0,0 +1,244 @@
+<template>
+  <el-dialog :title="form.id ? '编辑优惠券' : '新增优惠券'" v-model="visible" :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
+      <el-row :gutter="24">
+        <el-col :span="24" class="mb20">
+          <el-form-item label="优惠券名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入优惠券名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="mb20">
+          <el-form-item label="状态" prop="status">
+            <dict-select v-model="form.status" dict-code="act_coupon_status" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="优惠券类型" prop="type">
+            <dict-select v-model="form.type" dict-code="act_coupon_type" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="面额/折扣" prop="faceValue">
+            <el-input v-model="form.faceValue" placeholder="请输入面额/折扣">
+              <template #append>
+                {{ form.type == '2' ? '%' : '元' }}
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="使用门槛" prop="minPoint">
+            <el-input v-model="form.minPoint" placeholder="不填表示无门槛" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="发行总量" prop="totalCount">
+            <el-input v-model="form.totalCount" placeholder="不填表示不限量" />
+          </el-form-item>
+        </el-col>
+        <el-alert class="mb20 ml20 mr20" v-if="typeInfo.title" :title="typeInfo.title" :description="typeInfo.desc"
+          type="info" show-icon />
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="使用说明" prop="description">
+            <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入使用说明" />
+          </el-form-item>
+        </el-col>
+
+        <el-divider>限领</el-divider>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="限领类型" prop="limitType">
+            <dict-select v-model="form.limitType" dict-code="act_coupon_limit_type" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="每人限领数量" prop="limitCount">
+            <el-input v-model="form.limitCount" placeholder="请输入每人限领数量">
+              <template #append>
+                次
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-divider>有效期</el-divider>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="有效期类型" prop="validType">
+            <dict-select v-model="form.validType" dict-code="act_coupon_valid_type" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20" v-if="form.validType === '1'">
+          <el-form-item label="有效期" prop="validRange">
+            <el-date-picker v-model="validRange" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="mb20" v-else>
+          <el-form-item label="领取后有效天数" prop="validDays">
+            <el-input v-model="form.validDays" placeholder="请输入天数">
+              <template #append>
+                天
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-divider>使用范围</el-divider>
+        <el-col :span="24" class="mb20">
+          <el-form-item label="适用范围" prop="useScopeType">
+            <dict-select v-model="form.useScopeType" dict-code="act_coupon_use_scope_type" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="mb20" v-if="form.useScopeType !== '0'">
+          <el-form-item v-if="form.useScopeType === '2'" label="指定商户" prop="scopeId">
+            <select-mch v-model="form.scopeId" />
+          </el-form-item>
+          <el-form-item v-if="form.useScopeType === '3'" label="指定商户分类" prop="scopeId">
+            <dict-select v-model="form.scopeId" dict-code="merchant_type" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="ActCouponDialog">
+import { useMessage } from "/@/hooks/message";
+import * as actCouponApi from '/@/api/act/act-coupon'
+import { rule } from '/@/utils/validate';
+import { useDict } from "/@/hooks/dict"
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+const { act_coupon_type } = useDict("act_coupon_type")
+// 提交表单数据
+const defaultForm = {
+  id: '',
+  name: '',
+  type: '1',
+  faceValue: '',
+  minPoint: '',
+  totalCount: '',
+  surplusCount: '',
+  limitCount: '1',
+  limitType: '1',
+  validType: '1',
+  validStartTime: '',
+  validEndTime: '',
+  validDays: '',
+  useScopeType: '1',
+  scopeId: '',
+  status: '1',
+  description: '',
+};
+const form = reactive({ ...defaultForm });
+
+// 定义校验规则
+const dataRules = ref({
+  name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }, { validator: rule.overLength, trigger: 'blur' }],
+  type: [{ required: true, message: '请选择优惠券类型', trigger: 'change' }],
+  faceValue: [{ required: true, message: '请输入面额/折扣', trigger: 'blur' }],
+  limitType: [{ required: true, message: '请选择限领类型', trigger: 'change' }],
+  validType: [{ required: true, message: '请选择有效期类型', trigger: 'change' }],
+  validDays: [{ required: () => form.validType === '2', message: '请输入有效天数', trigger: 'blur' }],
+  useScopeType: [{ required: true, message: '请选择适用范围', trigger: 'change' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
+  description: [{ validator: rule.overLength, trigger: 'blur' }]
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取actCoupon信息
+  if (id) {
+    form.id = id
+    getactCouponData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const valid = await dataFormRef.value.validate().catch(() => { });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    form.id ? await actCouponApi.putObj(form) : await actCouponApi.addObj(form);
+    useMessage().success(form.id ? '修改成功' : '添加成功');
+    visible.value = false;
+    emit('refresh');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const getactCouponData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  actCouponApi.getObj(id).then((res: any) => {
+    Object.assign(form, res.data)
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+
+
+
+const typeInfo = computed(() => {
+  if (!act_coupon_type.value?.length) return { title: '', desc: '' }
+  const type = act_coupon_type.value.find((v: any) => v.value == form.type) || {}
+  return { title: type?.label ?? "", desc: type?.remarks ?? "" }
+})
+
+const validRange = ref<any>()
+watch(
+  () => form.validType,
+  () => {
+    if (form.validType === '1') {
+      validRange.value = form.validStartTime && form.validEndTime ? [form.validStartTime, form.validEndTime] : null
+    } else {
+      validRange.value = null
+    }
+  },
+  { immediate: true }
+)
+watch(
+  validRange,
+  (range) => {
+    if (Array.isArray(range) && range.length === 2) {
+      form.validStartTime = range[0]
+      form.validEndTime = range[1]
+    } else {
+      form.validStartTime = ''
+      form.validEndTime = ''
+    }
+  }
+)
+</script>
diff --git a/src/views/act/act-coupon/index.vue b/src/views/act/act-coupon/index.vue
new file mode 100644
index 0000000..2296c48
--- /dev/null
+++ b/src/views/act/act-coupon/index.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row class="ml10" v-show="showSearch">
+        <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
+          <el-form-item label="优惠券名称" prop="name">
+            <el-input placeholder="输入优惠券名称" style="max-width: 200px" v-model="state.queryForm.name" />
+          </el-form-item>
+          <el-form-item label="优惠券类型" prop="type">
+            <el-select placeholder="选择优惠券类型" style="max-width: 200px" clearable v-model="state.queryForm.type">
+              <el-option v-for="opt in coupon_type" :key="opt.value" :label="opt.label" :value="opt.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select placeholder="选择状态" style="max-width: 200px" clearable v-model="state.queryForm.status">
+              <el-option v-for="opt in coupon_status" :key="opt.value" :label="opt.label" :value="opt.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+            v-auth="'wallet_actCoupon_add'">
+            新 增
+          </el-button>
+          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_actCoupon_del'"
+            @click="handleDelete(selectObjs)">
+            删除
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" :export="'wallet_actCoupon_export'" @exportExcel="exportExcel"
+            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+        @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column type="index" label="#" width="40" />
+        <el-table-column prop="name" label="优惠券名称" show-overflow-tooltip />
+        <el-table-column prop="type" label="优惠券类型" width="160" show-overflow-tooltip>
+          <template #default="{ row }">
+            <dict-tag :options="coupon_type" :value="row.type" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="faceValue" label="面额/折扣" width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row.type === '2'">{{ Number(row.faceValue) }}%</span>
+            <span v-else>¥{{ formatFenToYuan(row.faceValue) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="minPoint" label="使用门槛" width="140" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.minPoint === '0' || row.minPoint === 0 ? '无门槛' : '满¥' +
+            formatFenToYuan(row.minPoint) }}</template>
+        </el-table-column>
+        <el-table-column prop="totalCount" label="发行总量" width="120" show-overflow-tooltip>
+          <template #default="{ row }">{{ Number(row.totalCount) === -1 ? '不限量' : row.totalCount }}</template>
+        </el-table-column>
+        <el-table-column prop="surplusCount" label="剩余数量" width="120" show-overflow-tooltip />
+        <el-table-column prop="limitCount" label="每人限领" width="120" show-overflow-tooltip />
+        <el-table-column prop="limitType" label="限领类型" width="180" show-overflow-tooltip>
+          <template #default="{ row }">
+            <dict-tag :options="limit_type" :value="row.limitType" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="validType" label="有效期类型" width="160" show-overflow-tooltip>
+          <template #default="{ row }">
+            <dict-tag :options="valid_type" :value="row.validType" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="validStartTime" label="有效期开始时间" width="180" show-overflow-tooltip />
+        <el-table-column prop="validEndTime" label="有效期结束时间" width="180" show-overflow-tooltip />
+        <el-table-column prop="validDays" label="领取后有效天数" width="160" show-overflow-tooltip />
+        <el-table-column prop="useScopeType" label="适用范围" width="180" show-overflow-tooltip>
+          <template #default="{ row }">
+            <dict-tag :options="scope_type" :value="row.useScopeType" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="scopeId" label="适用范围ID集合" width="260" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag v-for="id in parseIds(row.scopeId)" :key="id" size="small">{{ id }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <dict-tag :options="coupon_status" :value="row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="使用说明" show-overflow-tooltip />
+        <el-table-column label="操作" width="150">
+          <template #default="scope">
+            <el-button icon="edit-pen" text type="primary" v-auth="'wallet_actCoupon_edit'"
+              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
+            <el-button icon="delete" text type="primary" v-auth="'wallet_actCoupon_del'"
+              @click="handleDelete([scope.row.id])">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+
+  </div>
+</template>
+
+<script setup lang="ts" name="systemActCoupon">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import * as actCouponApi from '/@/api/act/act-coupon'
+import { useMessage, useMessageBox } from "/@/hooks/message";
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+// 定义查询字典
+
+// 定义变量内容
+const formDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: actCouponApi.fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/wallet/act-coupon/export', Object.assign(state.queryForm, { ids: selectObjs }), '优惠券活动.xlsx')
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await actCouponApi.delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+
+const coupon_type = [
+  { label: '满减券', value: '1', elTagType: 'primary' },
+  { label: '折扣券', value: '2', elTagType: 'success' },
+  { label: '立减券', value: '3', elTagType: 'warning' },
+  { label: '兑换券', value: '4', elTagType: 'info' }
+]
+
+const limit_type = [
+  { label: '活动期间一次', value: 'once', elTagType: 'info' },
+  { label: '每天', value: 'day', elTagType: 'primary' },
+  { label: '每周', value: 'week', elTagType: 'success' },
+  { label: '每月', value: 'month', elTagType: 'warning' },
+  { label: '每年', value: 'year', elTagType: 'danger' }
+]
+
+const valid_type = [
+  { label: '固定日期', value: '1', elTagType: 'primary' },
+  { label: '领取后生效', value: '2', elTagType: 'success' }
+]
+
+const scope_type = [
+  { label: '全场通用', value: '0', elTagType: 'success' },
+  { label: '指定商户', value: '1', elTagType: 'primary' },
+  { label: '指定分类', value: '2', elTagType: 'warning' },
+  { label: '指定商品', value: '3', elTagType: 'info' }
+]
+
+const coupon_status = [
+  { label: '草稿', value: '0', elTagType: 'info' },
+  { label: '进行中', value: '1', elTagType: 'success' },
+  { label: '已结束', value: '2', elTagType: 'warning' },
+  { label: '已作废', value: '3', elTagType: 'danger' }
+]
+
+function formatFenToYuan(val: number | string) {
+  const n = Number(val)
+  if (isNaN(n)) return val as any
+  return (n / 100).toFixed(2)
+}
+
+function parseIds(ids: string | number) {
+  if (!ids && ids !== 0) return []
+  return String(ids)
+    .split(',')
+    .map((v) => v.trim())
+    .filter((v) => v)
+}
+</script>
diff --git a/src/views/hard/hard-sh/index.vue b/src/views/hard/hard-sh/index.vue
index 718ca31..da92a6f 100644
--- a/src/views/hard/hard-sh/index.vue
+++ b/src/views/hard/hard-sh/index.vue
@@ -21,10 +21,16 @@
 							<el-form-item style="width: 250px" label="商户" prop="merchantId">
 								<select-mch v-model="state.queryForm.merchantId" :apiParams="{ parentIsNull: false }" />
 							</el-form-item>
-							<el-form-item style="width: 450px" label="创建时间" prop="payTimeList">
+							<el-form-item v-if="activeTab === 'DAY'" style="width: 450px" label="创建时间(天)"
+								prop="payTimeList">
 								<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss"
 									type="datetimerange" />
 							</el-form-item>
+							<el-form-item v-if="activeTab === 'MONTH'" style="width: 450px" label="创建时间(年)"
+								prop="payTimeYearStr">
+								<el-date-picker value-format="YYYY" v-model="state.queryForm.payTimeYearStr"
+									type="year" />
+							</el-form-item>
 							<el-form-item>
 								<el-button icon="Search" type="primary" @click="search">{{ $t("common.queryBtn")
 								}}</el-button>