init: 橘视厅酒店版会员系统前端

src/views/modules/sys/user.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="mod-user">
+    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
+      <el-form-item>
+        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="addHandle()">添加用户</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="table-page-wrap">
+      <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%;">
+      <el-table-column
+        prop="index"
+        header-align="center"
+        align="center"
+        width="80"
+        label="序号">
+      </el-table-column>
+      <el-table-column
+        prop="username"
+        header-align="center"
+        align="center"
+        label="用户名">
+      </el-table-column>
+      <el-table-column
+        prop="orgName"
+        header-align="center"
+        align="center"
+        label="所属组织">
+      </el-table-column>
+      <el-table-column
+        prop="mobile"
+        header-align="center"
+        align="center"
+        label="电话">
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        header-align="center"
+        align="center"
+        label="状态">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
+          <el-tag v-else size="small">启用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="center"
+        width="180"
+        label="创建时间">
+        <template #default="scope">
+          {{ scope.row.createdAt || '' }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template #default="scope">
+          <el-button link type="primary" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+          <el-button link type="danger" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    </div>
+    <!-- 弹窗, 新增 / 修改 -->
+    <AddOrUpdate
+      v-show="addOrUpdateVisible"
+      ref="addOrUpdateRef"
+      @refreshDataList="getDataList"></AddOrUpdate>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, nextTick, useTemplateRef } from 'vue'
+import AddOrUpdate from './components/user-add-or-update.vue'
+import { getUserList, deleteUser } from '@/api/sys'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UserInfo } from '@/api/sys'
+
+interface DataForm {
+  userName: string
+}
+
+const dataForm = reactive<DataForm>({
+  userName: ''
+})
+
+const dataList = ref<UserInfo[]>([])
+const pageIndex = ref<number>(1)
+const pageSize = ref<number>(10)
+const totalPage = ref<number>(0)
+const dataListLoading = ref<boolean>(false)
+
+const addOrUpdateVisible = ref<boolean>(false)
+const addOrUpdateRef = useTemplateRef<InstanceType<typeof AddOrUpdate>>('addOrUpdateRef')
+
+function getDataList (): void {
+  dataListLoading.value = true
+  getUserList({
+    page: pageIndex.value,
+    limit: pageSize.value,
+    username: dataForm.userName
+  }).then((data) => {
+    if (data && data.code === 0 && data.data) {
+      const page = data.data.page || data.data
+      dataList.value = page.list || []
+      totalPage.value = page.totalCount || 0
+    } else {
+      dataList.value = []
+      totalPage.value = 0
+    }
+    dataListLoading.value = false
+  })
+}
+
+function sizeChangeHandle (val: number): void {
+  pageSize.value = val
+  pageIndex.value = 1
+  getDataList()
+}
+
+function currentChangeHandle (val: number): void {
+  pageIndex.value = val
+  getDataList()
+}
+
+async function addOrUpdateHandle (id: number): Promise<void> {
+  addOrUpdateVisible.value = true
+  await nextTick()
+  addOrUpdateRef.value?.init(id)
+}
+
+async function addHandle (): Promise<void> {
+  addOrUpdateVisible.value = true
+  await nextTick()
+  addOrUpdateRef.value?.init(null)
+}
+
+function deleteHandle (id: number): void {
+  ElMessageBox.confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteUser([id]).then((data) => {
+      if (data && data.code === 0) {
+        ElMessage.success({
+          message: '操作成功',
+          duration: 1500,
+          onClose: () => {
+            getDataList()
+          }
+        })
+      } else {
+        ElMessage.error(data.msg)
+      }
+    })
+  }).catch(() => {})
+}
+
+onMounted(() => {
+  getDataList()
+})
+</script>