Skip to content

Commit 4c143c1

Browse files
github-xiaobaigithub-xiaobai
committed
短信渠道翻写vue2->vue3 20230315
1 parent 11d4e2e commit 4c143c1

File tree

2 files changed

+199
-183
lines changed

2 files changed

+199
-183
lines changed

‎src/views/system/sms/smsChannel/index.vue

Lines changed: 199 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,226 @@
11
<template>
22
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<!-- 操作：新增 -->
6-
<template #toolbar_buttons>
7-
<XButton
8-
type="primary"
9-
preIcon="ep:zoom-in"
10-
:title="t('action.add')"
11-
v-hasPermi="['system:sms-channel:create']"
12-
@click="handleCreate()"
13-
/>
14-
</template>
15-
<template #actionbtns_default="{ row }">
16-
<!-- 操作：修改 -->
17-
<XTextButton
18-
preIcon="ep:edit"
19-
:title="t('action.edit')"
20-
v-hasPermi="['system:sms-channel:update']"
21-
@click="handleUpdate(row.id)"
22-
/>
23-
<!-- 操作：详情 -->
24-
<XTextButton
25-
preIcon="ep:view"
26-
:title="t('action.detail')"
27-
v-hasPermi="['system:sms-channel:query']"
28-
@click="handleDetail(row.id)"
3+
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
4+
<el-form-item label="短信签名" prop="signature">
5+
<el-input
6+
v-model="queryParams.signature"
7+
placeholder="请输入短信签名"
8+
clearable
9+
@keyup.enter="handleQuery"
2910
/>
30-
<!-- 操作：删除 -->
31-
<XTextButton
32-
preIcon="ep:delete"
33-
:title="t('action.del')"
34-
v-hasPermi="['system:sms-channel:delete']"
35-
@click="deleteData(row.id)"
11+
</el-form-item>
12+
<el-form-item label="启用状态" prop="status">
13+
<el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
14+
<el-option
15+
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
16+
:key="parseInt(dict.value)"
17+
:label="dict.label"
18+
:value="parseInt(dict.value)"
19+
/>
20+
</el-select>
21+
</el-form-item>
22+
<el-form-item label="创建时间" prop="createTime">
23+
<el-date-picker
24+
v-model="queryParams.createTime"
25+
value-format="yyyy-MM-dd HH:mm:ss"
26+
type="daterange"
27+
range-separator="-"
28+
start-placeholder="开始日期"
29+
end-placeholder="结束日期"
30+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
3631
/>
37-
</template>
38-
</XTable>
39-
</ContentWrap>
32+
</el-form-item>
33+
<el-form-item>
34+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
35+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
36+
<el-button
37+
type="primary"
38+
@click="openModal('create')"
39+
v-hasPermi="['system:sms-channel:create']"
40+
>
41+
<Icon icon="ep:plus" class="mr-5px" /> 新增</el-button
42+
>
43+
<el-button
44+
type="success"
45+
plain
46+
@click="handleExport"
47+
:loading="exportLoading"
48+
v-hasPermi="['system:sms-channel:export']"
49+
>
50+
<Icon icon="ep:download" class="mr-5px" /> 导出</el-button
51+
>
52+
</el-form-item>
53+
</el-form>
4054

41-
<XModal id="smsChannel" v-model="dialogVisible" :title="dialogTitle">
42-
<!-- 对话框(添加 / 修改) -->
43-
<Form
44-
v-if="['create', 'update'].includes(actionType)"
45-
:schema="allSchemas.formSchema"
46-
:rules="rules"
47-
ref="formRef"
48-
/>
49-
<!-- 对话框(详情) -->
50-
<Descriptions
51-
v-if="actionType === 'detail'"
52-
:schema="allSchemas.detailSchema"
53-
:data="detailData"
54-
/>
55-
<!-- 操作按钮 -->
56-
<template #footer>
57-
<!-- 按钮：保存 -->
58-
<XButton
59-
v-if="['create', 'update'].includes(actionType)"
60-
type="primary"
61-
:title="t('action.save')"
62-
:loading="actionLoading"
63-
@click="submitForm()"
55+
<!-- 列表 -->
56+
<el-table v-loading="loading" :data="list" align="center">
57+
<el-table-column label="编号" align="center" prop="id" />
58+
<el-table-column label="短信签名" align="center" prop="signature" />
59+
<el-table-column label="渠道编码" align="center" prop="code">
60+
<template #default="scope">
61+
<dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.code" />
62+
</template>
63+
</el-table-column>
64+
<el-table-column label="启用状态" align="center" prop="status">
65+
<template #default="scope">
66+
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
67+
</template>
68+
</el-table-column>
69+
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
70+
<el-table-column
71+
label="短信 API 的账号"
72+
align="center"
73+
prop="apiKey"
74+
:show-overflow-tooltip="true"
75+
/>
76+
<el-table-column
77+
label="短信 API 的密钥"
78+
align="center"
79+
prop="apiSecret"
80+
:show-overflow-tooltip="true"
81+
/>
82+
<el-table-column
83+
label="短信发送回调 URL"
84+
align="center"
85+
prop="callbackUrl"
86+
:show-overflow-tooltip="true"
6487
/>
65-
<!-- 按钮：关闭 -->
66-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
67-
</template>
68-
</XModal>
88+
<el-table-column
89+
label="创建时间"
90+
align="center"
91+
prop="createTime"
92+
width="180"
93+
:formatter="dateFormatter"
94+
/>
95+
<el-table-column label="操作" align="center">
96+
<template #default="scope">
97+
<el-button
98+
link
99+
type="primary"
100+
@click="openModal('update', scope.row.id)"
101+
v-hasPermi="['system:sms-channel:update']"
102+
>
103+
编辑
104+
</el-button>
105+
<el-button
106+
link
107+
type="danger"
108+
@click="handleDelete(scope.row.id)"
109+
v-hasPermi="['system:sms-channel:delete']"
110+
>
111+
删除
112+
</el-button>
113+
</template>
114+
</el-table-column>
115+
</el-table>
116+
<!-- 分页 -->
117+
<Pagination
118+
:total="total"
119+
v-model:page="queryParams.pageNo"
120+
v-model:limit="queryParams.pageSize"
121+
@pagination="getList"
122+
/>
123+
</ContentWrap>
124+
<!-- 表单弹窗：添加/修改 -->
125+
<SmsChannelForm ref="modalRef" @success="getList" />
69126
</template>
70127
<script setup lang="ts" name="SmsChannel">
71-
import type { FormExpose } from '@/components/Form'
72128
// 业务相关的 import
73129
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
74-
import { rules, allSchemas } from './sms.channel.data'
130+
//格式化时间
131+
import { dateFormatter } from '@/utils/formatTime'
132+
//字典
133+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
134+
//表单弹窗：添加/修改
135+
import SmsChannelForm from './form.vue'
136+
//下载
137+
// import download from '@/utils/download'
75138
76139
const { t } = useI18n() // 国际化
77140
const message = useMessage() // 消息弹窗
78141
79-
// 列表相关的变量
80-
const [registerTable, { reload, deleteData }] = useXTable({
81-
allSchemas: allSchemas,
82-
getListApi: SmsChannelApi.getSmsChannelPageApi,
83-
deleteApi: SmsChannelApi.deleteSmsChannelApi
142+
// 列表的加载中
143+
const loading = ref(true)
144+
//搜索的表单
145+
const queryFormRef = ref()
146+
// 列表的总页数
147+
const total = ref(0)
148+
// 列表的数据
149+
const list = ref([])
150+
//导出的加载中
151+
const exportLoading = ref(false)
152+
//查询参数
153+
const queryParams = reactive({
154+
pageNo: 1,
155+
pageSize: 10,
156+
signature: undefined,
157+
status: undefined,
158+
createTime: []
84159
})
85160
86-
// 弹窗相关的变量
87-
const dialogVisible = ref(false) // 是否显示弹出层
88-
const dialogTitle = ref('edit') // 弹出层标题
89-
const actionType = ref('') // 操作按钮的类型
90-
const actionLoading = ref(false) // 按钮 Loading
91-
const formRef = ref<FormExpose>() // 表单 Ref
92-
const detailData = ref() // 详情 Ref
161+
/** 查询参数列表 */
162+
const getList = async () => {
163+
loading.value = true
164+
// 执行查询
165+
try {
166+
const data = await SmsChannelApi.getSmsChannelPageApi(queryParams)
167+
list.value = data.list
168+
total.value = data.total
169+
} finally {
170+
loading.value = false
171+
}
172+
}
93173
94-
// 设置标题
95-
const setDialogTile = (type: string) => {
96-
dialogTitle.value = t('action.' + type)
97-
actionType.value = type
98-
dialogVisible.value = true
174+
/** 搜索按钮操作 */
175+
const handleQuery = () => {
176+
queryParams.pageNo = 1
177+
getList()
99178
}
100179
101-
// 新增操作
102-
const handleCreate = () => {
103-
setDialogTile('create')
180+
/** 重置按钮操作 */
181+
const resetQuery = () => {
182+
queryFormRef.value.resetFields()
183+
handleQuery()
104184
}
105185
106-
// 修改操作
107-
const handleUpdate = async (rowId: number) => {
108-
setDialogTile('update')
109-
// 设置数据
110-
const res = await SmsChannelApi.getSmsChannelApi(rowId)
111-
unref(formRef)?.setValues(res)
186+
/** 添加/修改操作 */
187+
const modalRef = ref()
188+
const openModal = (type: string, id?: number) => {
189+
modalRef.value.openModal(type, id)
112190
}
113191
114-
// 详情操作
115-
const handleDetail = async (rowId: number) => {
116-
setDialogTile('detail')
117-
const res = await SmsChannelApi.getSmsChannelApi(rowId)
118-
detailData.value = res
192+
/** 导出按钮操作 */
193+
const handleExport = async () => {
194+
try {
195+
// 导出的二次确认
196+
await message.exportConfirm()
197+
// 发起导出
198+
exportLoading.value = true
199+
await message.info('该功能目前不支持')
200+
//导出功能先不考虑
201+
// const data = await SmsChannelApi.exportSmsChanelApi(queryParams)
202+
// download.excel(data, '短信渠道.xls')
203+
} catch {
204+
} finally {
205+
exportLoading.value = false
206+
}
119207
}
120208
121-
// 提交按钮
122-
const submitForm = async () => {
123-
const elForm = unref(formRef)?.getElFormRef()
124-
if (!elForm) return
125-
elForm.validate(async (valid) => {
126-
if (valid) {
127-
actionLoading.value = true
128-
// 提交请求
129-
try {
130-
const data = unref(formRef)?.formModel as SmsChannelApi.SmsChannelVO
131-
if (actionType.value === 'create') {
132-
await SmsChannelApi.createSmsChannelApi(data)
133-
message.success(t('common.createSuccess'))
134-
} else {
135-
await SmsChannelApi.updateSmsChannelApi(data)
136-
message.success(t('common.updateSuccess'))
137-
}
138-
dialogVisible.value = false
139-
} finally {
140-
actionLoading.value = false
141-
// 刷新列表
142-
await reload()
143-
}
144-
}
145-
})
209+
/** 删除按钮操作 */
210+
const handleDelete = async (id: number) => {
211+
try {
212+
// 删除的二次确认
213+
await message.delConfirm()
214+
// 发起删除
215+
await SmsChannelApi.deleteSmsChannelApi(id)
216+
message.success(t('common.delSuccess'))
217+
// 刷新列表
218+
await getList()
219+
} catch {}
146220
}
221+
222+
/** 初始化 **/
223+
onMounted(() => {
224+
getList()
225+
})
147226
</script>

0 commit comments

Comments
 (0)