|
@@ -0,0 +1,340 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 列表内容 -->
|
|
|
+ <!-- #ifdef APP -->
|
|
|
+ <list-view class="list" :bounces="false" :scroll-y="true" :custom-nested-scroll="true"
|
|
|
+ @scrolltolower="loadData(null)" associative-container="nested-scroll-view">
|
|
|
+ <list-item class="list-item" type="10">
|
|
|
+ <!-- #endif -->
|
|
|
+ <view class="download-card" v-for="(item, index) in users" :key="index">
|
|
|
+ <view @click="enterItem(item.id)">
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="label">序号:</text>
|
|
|
+ <text class="value">{{ item.id }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="label">用户姓名:</text>
|
|
|
+ <text class="value">{{ item.name }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="label">用户登录账号:</text>
|
|
|
+ <text class="value">{{ item.username }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="label">用户类型:</text>
|
|
|
+ <text class="value">{{ item.role == 'user' ? '普通用户' : '管理员' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="label">创建时间:</text>
|
|
|
+ <text
|
|
|
+ class="value">{{ item.createtime === null ? item.createtime : item.updatetime }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-row">
|
|
|
+ <button class="btn btn-second" type='warn' v-if="item.role == 'user'" @click="del(item.id)">
|
|
|
+ 删除
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- #ifdef APP -->
|
|
|
+ </list-item type="20">
|
|
|
+ <list-item class="loading">
|
|
|
+ <uni-loading :loading="loading" color="#999" :text="loadingText"></uni-loading>
|
|
|
+ </list-item>
|
|
|
+ </list-view>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { ref, reactive } from 'vue'
|
|
|
+ import { selectPageSql, removeTableData } from '@/api/work';
|
|
|
+
|
|
|
+ const backPressOptions = reactive({
|
|
|
+ from: 'backbutton'
|
|
|
+ } as OnBackPressOptions)
|
|
|
+
|
|
|
+ onBackPress((options : OnBackPressOptions) : boolean | null => {
|
|
|
+ console.log('onBackPress', options)
|
|
|
+ // 使用reLaunch代替switchTab,避免多层跳转时的闪回问题
|
|
|
+ // reLaunch会关闭所有页面并打开到目标页面,适合需要完全重置导航栈的场景
|
|
|
+ uni.reLaunch({
|
|
|
+ url: `/pages/mine/index`,
|
|
|
+ })
|
|
|
+ // 返回true表示拦截默认返回行为
|
|
|
+ return true
|
|
|
+ })
|
|
|
+
|
|
|
+ type User = {
|
|
|
+ id : number,
|
|
|
+ name : string,
|
|
|
+ username : string,
|
|
|
+ role : string,
|
|
|
+ updatetime : string,
|
|
|
+ createtime : string
|
|
|
+ }
|
|
|
+
|
|
|
+ var initUser = [] as User[]
|
|
|
+ var users = ref<User[]>([]);
|
|
|
+ const loading = ref(false)
|
|
|
+ const isEnded = ref(false)
|
|
|
+ const loadingError = ref('')
|
|
|
+ const currentPage = ref(1)
|
|
|
+
|
|
|
+ const loadingText = computed(() : string => {
|
|
|
+ if (loading.value) {
|
|
|
+ return "加载中..."
|
|
|
+ } else if (isEnded.value) {
|
|
|
+ return "没有更多了"
|
|
|
+ } else if (loadingError.value.length > 0) {
|
|
|
+ return loadingError.value
|
|
|
+ } else {
|
|
|
+ return ""
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // #ifdef APP-ANDROID
|
|
|
+
|
|
|
+ const loadData = (loadComplete : (() => void) | null) {
|
|
|
+ if (loading.value || isEnded.value) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ loading.value = true
|
|
|
+ let offset = currentPage.value === 1 ? 0 : (currentPage.value - 1) * 10
|
|
|
+ selectPageSql('app_user', 'createtime', offset).then((res : UTSJSONObject) => {
|
|
|
+ console.log(res)
|
|
|
+ let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
|
|
|
+ if (dataList != null && dataList.length > 0) {
|
|
|
+ dataList.forEach(item => {
|
|
|
+ if (item != null) {
|
|
|
+ let log = JSON.parse<User>(item.toJSONString());
|
|
|
+ if (log != null) {
|
|
|
+ initUser.push(log)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ currentPage.value++
|
|
|
+ } else {
|
|
|
+ isEnded.value = true
|
|
|
+ }
|
|
|
+ users.value = initUser
|
|
|
+ loading.value = false
|
|
|
+ if (loadComplete != null) {
|
|
|
+ loadComplete()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ loadData(null)
|
|
|
+ })
|
|
|
+
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ const del = (id : number) => {
|
|
|
+ console.log("删除用户")
|
|
|
+ console.log(id)
|
|
|
+ uni.showModal({
|
|
|
+ title: '系统提示',
|
|
|
+ content: '确定要删除当前用户?',
|
|
|
+ cancelText: '取消',
|
|
|
+ confirmText: '确定',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ removeTableData('app_user', 'id', id.toString()).then(res => {
|
|
|
+ if (res != null) {
|
|
|
+ let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>();
|
|
|
+ if (dataList != null && dataList.length > 0) {
|
|
|
+ let data = dataList[0] as boolean ?? false
|
|
|
+ if (data != null && data == true) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "删除成功!",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ } else {
|
|
|
+ // 用户取消覆盖
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const enterItem = (id : number) => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/work/download/DownloadDetail?id=${id}`
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ defineExpose({
|
|
|
+ loadData,
|
|
|
+ backPressOptions
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scope>
|
|
|
+ .container {
|
|
|
+ padding: 24rpx;
|
|
|
+ background-color: #f0f4f8;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
+ /* #ifndef APP-ANDROID */
|
|
|
+ min-height: 100vh;
|
|
|
+ /* #endif */
|
|
|
+ height: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 搜索输入框:占满容器剩余空间,放在按钮左侧 */
|
|
|
+ .search-input {
|
|
|
+ /* 清除默认输入框样式 */
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ width: 70%;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 扫描按钮:放在输入框右侧,距离最右10rpx */
|
|
|
+ .scan-btn {
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ /* 新增:按钮内部图标垂直居中 */
|
|
|
+ /* 关键:右侧10rpx边距,实现"距离最右10rpx" */
|
|
|
+ margin-left: auto;
|
|
|
+ /* 自动推到flex容器最右侧 */
|
|
|
+ margin-right: 10rpx;
|
|
|
+ /* 与容器右边缘保持10rpx间距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-card {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ box-shadow: 0 8rpx 15rpx rgba(0, 43, 92, 0.1);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-card .view {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 信息行 */
|
|
|
+ .info-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ /* #ifdef H5 */
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #33475b;
|
|
|
+ /* #endif */
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-row>.label {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-row>.value {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-panel {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 5rpx;
|
|
|
+ margin-right: 5rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #102a43;
|
|
|
+ min-width: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ align-self: flex-end;
|
|
|
+ background-color: #00aaff;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ padding: 2rpx 30rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ /* #ifndef APP-ANDROID */
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ /* #endif */
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .process-value {
|
|
|
+ width: 120rpx;
|
|
|
+ min-width: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-green {
|
|
|
+ background-color: seagreen;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-yellow {
|
|
|
+ background-color: yellow;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-black {
|
|
|
+ background-color: #102a43;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-first {
|
|
|
+ margin-left: 5rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-second {
|
|
|
+ margin-right: 5rpx;
|
|
|
+ margin-left: auto;
|
|
|
+ color: #fff;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading {
|
|
|
+ padding: 30px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ flex: 1;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+</style>
|