first

src/views/user/composables/edit.js

@@ -0,0 +1,86 @@
+import { ref, onMounted, reactive, watch } from 'vue'
+import { create, detail, update, remove } from '@/api/user'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { list as groups } from '@/api/group'
+
+export function useGetDetail (id) {
+  let item = ref({})  //保留原始值
+  let form = ref({})
+  const groupsList = ref([])
+  const getDetail = async (id) => {
+    const res = await detail(id)
+    item.value = { ...res.data }
+    form.value = { ...res.data }
+  }
+  if (id > 0) {
+    onMounted(getDetail(id))
+  }
+
+  const getGroups = async () => {
+    const res = await groups({ page_size: 9999 }).catch(_ => false)
+    if (res) {
+      groupsList.value = res.data.list
+    }
+  }
+  onMounted(getGroups)
+  return {
+    form,
+    item,
+    getDetail,
+    groupsList
+  }
+}
+
+export function useSubmit (form, id) {
+  const root = ref(null)
+  const router = useRouter()
+  const rules = reactive({
+    username: [{ required: true, message: '用户名是必须的' }],
+    // nickname: [{ required: true, message: '昵称是必须的' }],
+    status: [{ required: true, message: '请选择状态' }],
+  })
+
+  const validate = async () => {
+    const res = await root.value.validate().catch(err => false)
+    return res
+  }
+
+  const submitCreate = async () => {
+    const res = await create(form.value).catch(_ => false)
+    return res.code === 0
+  }
+
+  const submitUpdate = async () => {
+    const res = await update(form.value).catch(_ => false)
+    return res.code === 0
+  }
+  const submitFunc = id > 0 ? submitUpdate : submitCreate
+
+  const submit = async () => {
+    const v = await validate()
+    if (!v) {
+      return
+    }
+
+    const res = await submitFunc()
+    if (res) {
+      ElMessage.success('操作成功')
+      router.back()
+    }
+  }
+
+  const cancel = () => {
+    router.back()
+  }
+
+  return {
+    root,
+    rules,
+    validate,
+    submit,
+    cancel,
+  }
+}
+
+

src/views/user/composables/index.js

@@ -0,0 +1,124 @@
+import { onMounted, reactive, watch } from 'vue'
+import { list, remove, changePwd } from '@/api/user'
+import { list as groups } from '@/api/group'
+import { useRouter } from 'vue-router'
+import { ElMessageBox, ElMessage } from 'element-plus'
+
+export function useRepositories () {
+
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+    groups: [],
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    username: '',
+  })
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list
+      listRes.total = res.data.total
+    }
+  }
+
+  const handlerQuery = () => {
+    if (listQuery.page === 1) {
+      getList()
+    } else {
+      listQuery.page = 1
+      //由watch 触发
+    }
+  }
+
+  const getGroups = async () => {
+    const res = await groups({ page_size: 9999 }).catch(_ => false)
+    if (res) {
+      listRes.groups = res.data.list
+    }
+  }
+  onMounted(getGroups)
+
+  onMounted(getList)
+
+  watch(() => listQuery.page, getList)
+  watch(() => listQuery.page_size, handlerQuery)
+  return {
+    listRes,
+    listQuery,
+    handlerQuery,
+    getList,
+    getGroups,
+  }
+}
+
+export function useToEditOrAdd () {
+  const router = useRouter()
+  const toEdit = (row) => {
+    router.push('/user/edit/' + row.id)
+  }
+  const toAdd = () => {
+    router.push('/user/add')
+  }
+  const toTag = (row) => {
+    router.push('/user/tag/?user_id=' + row.id)
+  }
+  const toAddressBook = (row) => {
+    router.push('/user/addressBook/?user_id=' + row.id)
+  }
+  return {
+    toAdd,
+    toEdit,
+    toTag,
+    toAddressBook
+  }
+}
+
+export function useDel () {
+  const del = async (id) => {
+    const cf = await ElMessageBox.confirm('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = remove({ id }).catch(_ => false)
+    return res
+  }
+  return {
+    del,
+  }
+}
+
+export function useChangePwd () {
+  const changePass = async (admin) => {
+    const input = await ElMessageBox.prompt('请输入新密码', '重置密码', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).catch(_ => false)
+    if (!input) {
+      return
+    }
+    const confirm = await ElMessageBox.confirm('确定重置密码么？', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).catch(_ => false)
+    if (!confirm) {
+      return
+    }
+    const res = await changePwd({ id: admin.id, password: input.value }).catch(_ => false)
+    if (!res) {
+      return
+    }
+    ElMessage.success('修改成功')
+  }
+
+  return { changePass }
+}

src/views/user/edit.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="form-card">
+    <el-form ref="root" label-width="120px" :model="form" :rules="rules">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="form.username"></el-input>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input v-model="form.nickname"></el-input>
+      </el-form-item>
+      <el-form-item label="小组" prop="group_id">
+        <el-select v-model="form.group_id" placeholder="请选择小组">
+          <el-option
+              v-for="item in groupsList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否是管理员" prop="is_admin">
+        <el-switch v-model="form.is_admin"
+                   :active-value="true"
+                   :inactive-value="false"
+        ></el-switch>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="form.status"
+                   :active-value="ENABLE_STATUS"
+                   :inactive-value="DISABLE_STATUS"
+        ></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="cancel">取消</el-button>
+        <el-button @click="submit" type="primary">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, toRef } from 'vue'
+  import { useRoute } from 'vue-router'
+  import { useGetDetail, useSubmit } from '@/views/user/composables/edit'
+  import { ENABLE_STATUS, DISABLE_STATUS } from '@/utils/common_options'
+
+  export default defineComponent({
+    name: 'UserEdit',
+    props: {},
+    setup (props, context) {
+
+      const route = useRoute()
+      const { form, item, getDetail, groupsList } = useGetDetail(route.params.id)
+
+      const { root, rules, validate, submit, cancel } = useSubmit(form, route.params.id)
+
+      return {
+        form,
+        item,
+        getDetail,
+
+        rules,
+        validate,
+        root,
+        submit,
+        cancel,
+        groupsList,
+        ENABLE_STATUS, DISABLE_STATUS,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+.form-card {
+}
+</style>

src/views/user/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item label="用户名">
+          <el-input v-model="listQuery.username"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+        <el-table-column prop="id" label="id" align="center"></el-table-column>
+        <el-table-column prop="username" label="用户名" align="center"/>
+        <el-table-column prop="nickname" label="昵称" align="center"/>
+        <el-table-column label="所在小组" align="center">
+          <template #default="{row}">
+            <span v-if="row.group_id"> <el-tag>{{ listRes.groups?.find(g => g.id === row.group_id)?.name }} </el-tag> </span>
+            <span v-else> 未分组 </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" align="center"/>
+        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column label="操作" align="center" width="550">
+          <template #default="{row}">
+            <el-button @click="toTag(row)">他的标签</el-button>
+            <el-button @click="toAddressBook(row)">他的地址簿</el-button>
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="warning" @click="changePass(row)">重置密码</el-button>
+            <el-button type="danger" @click="remove(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="list-page" shadow="hover">
+      <el-pagination background
+                     layout="prev, pager, next, sizes, jumper"
+                     :page-sizes="[10,20,50,100]"
+                     v-model:page-size="listQuery.page_size"
+                     v-model:current-page="listQuery.page"
+                     :total="listRes.total">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+  import { useRepositories, useDel, useToEditOrAdd, useChangePwd } from '@/views/user/composables'
+
+  //列表
+  const {
+    listRes,
+    listQuery,
+    handlerQuery,
+    getList,
+  } = useRepositories()
+
+  const { toEdit, toAdd, toAddressBook, toTag } = useToEditOrAdd()
+
+  const { changePass } = useChangePwd()
+
+  //删除
+  const { del } = useDel()
+  const remove = async (row) => {
+    const res = await del(row.id)
+    if (res) {
+      getList(listQuery)
+    }
+  }
+
+
+</script>
+
+<style scoped>
+</style>