用户列表

src/styles/app.scss

@@ -144,7 +144,7 @@ body,
 }
 .cn-operate-dialog .el-form--inline {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 }
 .ba-operate-form {
     padding-top: 20px;
@@ -254,4 +254,4 @@ body,
     display: flex;
     padding: 13px 15px;
     align-items: center;
-}
+}

src/views/auth/userlist/index.vue

@@ -36,6 +36,8 @@
             </template>
         </TableHeader>
         <Table ref="tableRef" />
+        <PopupEdit ref="popupEditRef"></PopupEdit>
+        <PopupPwd ref="popupPwdRef"></PopupPwd>
     </div>
 </template>
 <script setup lang="ts">
@@ -44,10 +46,14 @@ import { ref, onMounted, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
+import PopupEdit from './popupEdit.vue'
+import PopupPwd from './popupPwd.vue'
 
 defineOptions({
     name: 'auth/userlist'
 })
+const popupEditRef = ref()
+const popupPwdRef = ref()
 const tableStore = new TableStore({
     url: '/user-boot/user/list',
     method: 'POST',
@@ -76,7 +82,9 @@ const tableStore = new TableStore({
                     disabled: row => {
                         return row.state !== 1
                     },
-                    click: row => {}
+                    click: row => {
+                        popupEditRef.value.open('编辑用户', row)
+                    }
                 },
                 {
                     name: 'edit',
@@ -87,7 +95,9 @@ const tableStore = new TableStore({
                     disabled: row => {
                         return row.state !== 1
                     },
-                    click: row => {}
+                    click: row => {
+                        popupPwdRef.value.open('修改密码', row)
+                    }
                 },
                 {
                     name: 'edit',
@@ -178,5 +188,7 @@ onMounted(() => {
     tableStore.index()
 })
 
-const addUser = () => {}
+const addUser = () => {
+    popupEditRef.value.open('新增用户')
+}
 </script>

src/views/auth/userlist/popupEdit.vue

@@ -0,0 +1,188 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="true" :model="form" label-width="120px" :rules="rules">
+                <el-form-item label="用户名" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入昵称" />
+                </el-form-item>
+                <el-form-item label="登录名" prop="loginName">
+                    <el-input v-model="form.loginName" placeholder="请输入登录名" />
+                </el-form-item>
+                <el-form-item label="默认密码" prop="password">
+                    <el-input v-model="form.password" placeholder="请输入密码" />
+                </el-form-item>
+                <el-form-item label="权限类型" prop="type">
+                    <el-select
+                        style="width: 100%"
+                        v-model="form.type"
+                        @change="changeValue"
+                        disabled
+                        placeholder="请选择权限类型"
+                    >
+                        <el-option
+                            v-for="(item, index) in UserTypeOption"
+                            :label="item.label"
+                            :value="item.value"
+                            :key="index"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="用户类型" prop="casualUser">
+                    <el-select style="width: 100%" v-model="form.casualUser" placeholder="请选择权限类型">
+                        <el-option
+                            v-for="(item, index) in TypeOptions"
+                            :label="item.label"
+                            :value="item.value"
+                            :key="index"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="所属部门" prop="deptName">
+                    <Area style="width: 100%" v-model="form.deptName" />
+                </el-form-item>
+                <el-form-item label="角色" prop="role">
+                    <el-select style="width: 100%" v-model="form.role" placeholder="请选择角色">
+                        <el-option
+                            v-for="(item, index) in roleOptions"
+                            :label="item.label"
+                            :value="item.value"
+                            :key="index"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="手机号" prop="phone">
+                    <el-input v-model="form.phone" placeholder="请输入手机号" />
+                </el-form-item>
+                <el-form-item label="邮箱" prop="email">
+                    <el-input v-model="form.email" placeholder="请输入描述" />
+                </el-form-item>
+                <el-form-item label="起始IP" prop="limitIpStart">
+                    <el-input v-model="form.limitIpStart" placeholder="请输入描述" />
+                </el-form-item>
+                <el-form-item label="结束IP" prop="limitIpEnd">
+                    <el-input v-model="form.limitIpEnd" placeholder="请输入描述" />
+                </el-form-item>
+                <el-form-item label="时间段" prop="limitTime">
+                    <el-time-picker
+                        v-model="form.limitTime"
+                        is-range
+                        arrow-control
+                        range-separator="-"
+                        start-placeholder="开始时间"
+                        end-placeholder="结束时间"
+                    />
+                </el-form-item>
+                <el-form-item label="短信通知" prop="smsNotice">
+                    <el-radio-group v-model="form.smsNotice" size="mini">
+                        <el-radio-button :label="0">是</el-radio-button>
+                        <el-radio-button :label="1">否</el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="邮件通知" prop="emailNotice">
+                    <el-radio-group v-model="form.emailNotice" size="mini">
+                        <el-radio-button :label="0">是</el-radio-button>
+                        <el-radio-button :label="1">否</el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="用户ID">
+                    <div style="display: flex; width: 100%">
+                        <el-radio-group v-model="useId" size="mini">
+                            <el-radio-button :label="1">是</el-radio-button>
+                            <el-radio-button :label="0">否</el-radio-button>
+                        </el-radio-group>
+                        <el-input
+                            v-model="form.id"
+                            placeholder="请输入用户id"
+                            v-if="useId"
+                            style="flex: 1"
+                            class="ml10"
+                        ></el-input>
+                    </div>
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { add, update } from '@/api/user-boot/role'
+import { useAdminInfo } from '@/stores/adminInfo'
+import Area from '@/components/form/area/index.vue'
+
+const adminInfo = useAdminInfo()
+const tableStore = inject('tableStore') as TableStore
+// do not use same name with ref
+const form = reactive({
+    id: '',
+    name: '',
+    password: '',
+    email: '',
+    limitIpStart: '',
+    deptId: '',
+    deptName: '',
+    casualUser: 1,
+    loginName: '',
+    phone: '',
+    limitIpEnd: '',
+    limitTime: '',
+    role: [],
+    smsNotice: 0,
+    emailNotice: 0,
+    type: undefined
+})
+const rules = {
+    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
+}
+const UserTypeOption = [
+    { label: '管理员', value: 1 },
+    { label: '普通用户', value: 2 }
+]
+const TypeOptions = [
+    { label: '临时用户', value: 0 },
+    { label: '长期用户', value: 1 }
+]
+const useId = ref(1)
+const roleOptions: treeData = []
+const queryRole = () => {}
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        for (let key in form) {
+            form[key] = ''
+        }
+    }
+}
+const submit = async () => {
+    if (form.id) {
+        await update(form)
+    } else {
+        form.type = adminInfo.$state.userType + 1
+        await add(form)
+    }
+    ElMessage.success('保存成功')
+    tableStore.index()
+    dialogVisible.value = false
+}
+
+const changeValue = () => {}
+defineExpose({ open })
+</script>

src/views/auth/userlist/popupPwd.vue

@@ -0,0 +1,75 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules">
+                <el-form-item label="角色名称">
+                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="角色编码">
+                    <el-input v-model="form.code" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="角色描述">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { add, update } from '@/api/user-boot/role'
+import { useAdminInfo } from '@/stores/adminInfo'
+
+const adminInfo = useAdminInfo()
+const tableStore = inject('tableStore') as TableStore
+// do not use same name with ref
+const form = reactive({
+    code: '',
+    name: '',
+    remark: '',
+    id: '',
+    type: 0
+})
+const rules = {
+    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
+}
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        for (let key in form) {
+            form[key] = ''
+        }
+    }
+}
+const submit = async () => {
+    if (form.id) {
+        await update(form)
+    } else {
+        form.type = adminInfo.$state.userType + 1
+        await add(form)
+    }
+    ElMessage.success('保存成功')
+    tableStore.index()
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>