|
|
@@ -0,0 +1,218 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
|
|
|
+ <el-form-item label="所屬用戶" prop="username">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.username"
|
|
|
+ placeholder="請輸入所屬用戶"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜尋</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetQuery">重設</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table v-loading="loading" :data="smsList">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="id" align="center" prop="id" />
|
|
|
+ <el-table-column label="用戶id" align="center" prop="userId" />
|
|
|
+ <el-table-column label="所屬用戶" align="center" prop="userName" />
|
|
|
+ <el-table-column label="簡訊類型" align="center" prop="smsType">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ smsTypeText(row.smsType) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="對方號碼" align="center" prop="phoneNumber" />
|
|
|
+ <el-table-column label="簡訊內容" align="center" prop="content" width="200">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="content-cell-text">{{ row.content }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="簡訊時間" align="center" prop="smsTime" />
|
|
|
+ <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tooltip content="查看" placement="top">
|
|
|
+ <el-button link type="primary" icon="View" @click.stop="handleView(row)"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
+ <el-dialog :title="title" v-model="open" width="600px" append-to-body>
|
|
|
+ <el-form ref="formRef" :model="form" label-width="80px">
|
|
|
+ <el-form-item label="用戶id" prop="userId">
|
|
|
+ <el-input v-model="form.userId" placeholder="請輸入用戶id" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所屬用戶" prop="userName">
|
|
|
+ <el-input v-model="form.userName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="對方號碼" prop="phoneNumber">
|
|
|
+ <el-input v-model="form.phoneNumber" placeholder="請輸入對方號碼" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="簡訊內容">
|
|
|
+ <el-input type="textarea" autosize="{minRows:4}" pla v-model="form.content"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="簡訊時間" prop="smsTime">
|
|
|
+ <el-input v-model="form.smsTime" placeholder="請輸入簡訊時間" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {ref, reactive, getCurrentInstance, onMounted, nextTick} from 'vue'
|
|
|
+import {getSmsPageList} from '@/api/system/sms.js'
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
+const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable")
|
|
|
+
|
|
|
+const smsList = ref([])
|
|
|
+const total = ref(0)
|
|
|
+const title = ref("")
|
|
|
+const open = ref(false)
|
|
|
+const form = ref({})
|
|
|
+const formRef = ref()
|
|
|
+const loading = ref(true)
|
|
|
+const queryFormRef = ref()
|
|
|
+const queryParams = reactive({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ username: null,
|
|
|
+})
|
|
|
+onMounted(()=>{
|
|
|
+ getList()
|
|
|
+})
|
|
|
+
|
|
|
+const smsTypeText = (type)=> {
|
|
|
+ switch (type) {
|
|
|
+ case 1:
|
|
|
+ case '1':
|
|
|
+ return '接收';
|
|
|
+ case 2:
|
|
|
+ case '2':
|
|
|
+ return '發送';
|
|
|
+ default:
|
|
|
+ return type;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 表单重设
|
|
|
+const reset = () => {
|
|
|
+ form.value = {
|
|
|
+ id: null,
|
|
|
+ userId: null,
|
|
|
+ smsType: null,
|
|
|
+ phoneNumber: null,
|
|
|
+ userName:null,
|
|
|
+ content: null,
|
|
|
+ smsTime: null,
|
|
|
+ createTime: null
|
|
|
+ }
|
|
|
+ if (formRef.value) {
|
|
|
+ formRef.value.resetFields()
|
|
|
+ }
|
|
|
+}
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.pageNum = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = () => {
|
|
|
+ queryFormRef.value.resetFields()
|
|
|
+ handleQuery()
|
|
|
+}
|
|
|
+const getList = () => {
|
|
|
+ loading.value = true
|
|
|
+ const params = {
|
|
|
+ pageNum: queryParams.pageNum,
|
|
|
+ pageSize: queryParams.pageSize,
|
|
|
+ userName: queryParams.username,
|
|
|
+ }
|
|
|
+ getSmsPageList(params).then(response => {
|
|
|
+ smsList.value = response.data.records
|
|
|
+ total.value = response.data.total
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 查看按钮操作 */
|
|
|
+const handleView = (row) => {
|
|
|
+ reset()
|
|
|
+ form.value = {...row}
|
|
|
+ open.value = true
|
|
|
+ title.value = "查看簡訊資訊"
|
|
|
+ nextTick(() => {
|
|
|
+ if (formRef.value) formRef.value.clearValidate && formRef.value.clearValidate()
|
|
|
+ })
|
|
|
+}
|
|
|
+// 取消按钮
|
|
|
+const cancel = () => {
|
|
|
+ open.value = false
|
|
|
+ reset()
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.content-cell {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.content-cell-text {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-break: break-all;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.sms-content-tooltip {
|
|
|
+ background: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ max-width: 300px !important;
|
|
|
+
|
|
|
+ &.el-tooltip__popper {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tooltip__popper__inner {
|
|
|
+ background: transparent !important;
|
|
|
+ color: #333 !important;
|
|
|
+ padding: 12px !important;
|
|
|
+ border-radius: 4px !important;
|
|
|
+ max-width: 300px !important;
|
|
|
+ max-height: 300px !important;
|
|
|
+ min-width: 300px !important;
|
|
|
+ min-height: 300px !important;
|
|
|
+ overflow-y: auto !important;
|
|
|
+ word-wrap: break-word !important;
|
|
|
+ word-break: break-all !important;
|
|
|
+ line-height: 1.5 !important;
|
|
|
+ text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), -1px -1px 2px rgba(255, 255, 255, 0.8) !important;
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: center !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-popper__arrow {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|