style: optimize ui for login and index pages with modern ios tech style

2026-05-20 16:06:46 +08:00
parent c9ad4ae2ed
commit 485ba7a380
10 changed files with 752 additions and 0 deletions
@@ -0,0 +1,151 @@
+<template>
+    <div class="asset-user-container">
+        <el-card shadow="never" class="!border-none">
+            <div class="mb-4">
+                <el-button type="primary" @click="handleAdd">新增分发账号</el-button>
+            </div>
+            
+            <el-table :data="tableData" v-loading="loading">
+                <el-table-column prop="id" label="ID" width="80" />
+                <el-table-column prop="phone" label="手机号" />
+                <el-table-column prop="status" label="状态">
+                    <template #default="{ row }">
+                        <el-tag :type="row.status === 1 ? 'success' : 'danger'">
+                            {{ row.status === 1 ? '正常' : '禁用' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="create_time" label="创建时间" width="180" />
+                <el-table-column label="操作" width="200" fixed="right">
+                    <template #default="{ row }">
+                        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
+                        <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            
+            <div class="mt-4 flex justify-end">
+                <el-pagination
+                    v-model:current-page="queryParams.page_no"
+                    v-model:page-size="queryParams.page_size"
+                    :total="total"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    @size-change="getList"
+                    @current-change="getList"
+                />
+            </div>
+        </el-card>
+
+        <!-- 编辑/新增弹窗 -->
+        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" destroy-on-close>
+            <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
+                <el-form-item label="手机号" prop="phone">
+                    <el-input v-model="formData.phone" placeholder="请输入手机号（作为登录账号）" />
+                </el-form-item>
+                <el-form-item label="密码" prop="password">
+                    <el-input v-model="formData.password" placeholder="为空则默认为 123456" show-password />
+                </el-form-item>
+                <el-form-item label="状态" prop="status">
+                    <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submitForm" :loading="submitLoading">确定</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { apiAssetUserList, apiAssetUserAdd, apiAssetUserEdit, apiAssetUserDelete } from '@/api/asset'
+
+const loading = ref(false)
+const tableData = ref([])
+const total = ref(0)
+const queryParams = reactive({
+    page_no: 1,
+    page_size: 15
+})
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const submitLoading = ref(false)
+const formRef = ref()
+
+const formData = reactive({
+    id: '',
+    phone: '',
+    password: '',
+    status: 1
+})
+
+const rules = {
+    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
+}
+
+const getList = async () => {
+    loading.value = true
+    try {
+        const res = await apiAssetUserList(queryParams)
+        tableData.value = res.lists
+        total.value = res.count
+    } catch (e) {
+        console.error(e)
+    } finally {
+        loading.value = false
+    }
+}
+
+const handleAdd = () => {
+    dialogTitle.value = '新增账号'
+    Object.assign(formData, { id: '', phone: '', password: '', status: 1 })
+    dialogVisible.value = true
+}
+
+const handleEdit = (row: any) => {
+    dialogTitle.value = '编辑账号'
+    Object.assign(formData, { id: row.id, phone: row.phone, password: '', status: row.status })
+    dialogVisible.value = true
+}
+
+const handleDelete = async (row: any) => {
+    try {
+        await ElMessageBox.confirm('确定要删除该账号及其关联资源吗？', '提示', { type: 'warning' })
+        await apiAssetUserDelete({ id: row.id })
+        ElMessage.success('删除成功')
+        getList()
+    } catch (e) {
+        // canceled
+    }
+}
+
+const submitForm = async () => {
+    if (!formRef.value) return
+    await formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            submitLoading.value = true
+            try {
+                if (formData.id) {
+                    await apiAssetUserEdit(formData)
+                } else {
+                    await apiAssetUserAdd(formData)
+                }
+                ElMessage.success('操作成功')
+                dialogVisible.value = false
+                getList()
+            } catch (e) {
+                console.error(e)
+            } finally {
+                submitLoading.value = false
+            }
+        }
+    })
+}
+
+onMounted(() => {
+    getList()
+})
+</script>