添加用户接口联调

src/App.vue

@@ -12,6 +12,7 @@
 <script setup>
 import themeOverrides from '@/utils/ui/theme.js'
 import LoadingBar from '@/components/LoadingBar/index.vue'
+
 </script>
 
 <style lang="scss">

src/components/CardModal/index.vue

@@ -9,8 +9,8 @@
     <n-card :bordered="false">
       <slot name="Context" />
       <n-space style="float: right">
-        <n-button>取消</n-button>
+        <n-button @click="handleClose">取消</n-button>
-        <n-button type="primary">确认</n-button>
+        <n-button type="primary" @click="handleClick">确认</n-button>
       </n-space>
     </n-card>
   </n-modal>
@@ -28,7 +28,7 @@ export default defineComponent({
     }
   },
   emits: {
-    click: null, // click事件没有检验
+    save: null, // click事件没有检验
     onClose: (value) => {
       return value
     }
@@ -41,7 +41,7 @@ export default defineComponent({
       }
     })
     const handleClick = function() {
-      emit('click')
+      emit('save')
     }
     const handleClose = function() {
       emit('onClose', true)

src/views/login/index.vue

@@ -38,38 +38,19 @@
 <script>
 import { userLogin, userCaptcha } from '@/api/login/index.js'
 import { setToken } from '@/utils/token'
-import { ref, reactive, onMounted } from 'vue'
+import { ref, toRefs, reactive, onMounted } from 'vue'
 export default {
   name: 'LoginPage',
   setup() {
-    const loginForm = reactive({
+    const data = reactive({
+      loginForm: {
         username: '',
         password: '',
         key: '',
         captcha: '',
         remember: false
-    })
+      },
-    onMounted(() => {
+      rules: {
-      changeCode(loginForm)
-    })
-    // 获取图形验证码
-    const captcha = ref('')
-    async function changeCode(form) {
-      const params = {
-        username: form.username,
-        password: form.password,
-        captcha: form.captcha
-      }
-      const captForm = await userCaptcha(params)
-      captcha.value = captForm.data.captcha
-      loginForm.key = captForm.data.key
-    }
-
-    return {
-      loginForm,
-      captcha,
-      changeCode,
-      rules: reactive({
         username: {
           required: true,
           trigger: ['blur', 'input'],
@@ -85,12 +66,33 @@ export default {
           trigger: ['blur', 'input'],
           message: '请输入验证码'
         }
+      }
     })
+    onMounted(() => {
+      changeCode(data.loginForm)
+    })
+    // 获取图形验证码
+    const captcha = ref('')
+    async function changeCode(form) {
+      const params = {
+        username: form.username,
+        password: form.password,
+        captcha: form.captcha
+      }
+      const captForm = await userCaptcha(params)
+      captcha.value = captForm.data.captcha
+      data.loginForm.key = captForm.data.key
+    }
+
+    return {
+      ...toRefs(data),
+      captcha,
+      changeCode
+
     }
   },
   methods: {
     handleLogin() {
-      console.log(this.loginForm)
       userLogin(this.loginForm).then((res) => {
         if (res.code === 0) {
           // 登录成功存储token，跳转首页

src/views/system/user/components/UserModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :options="getModalOptions" @on-close="handleClose">
+  <Modal :options="getModalOptions" @on-close="handleClose" @save="submitForm">
     <template #Context>
       <n-form
         ref="formRef"
@@ -31,13 +31,6 @@
             placeholder="请输入用户编号"
           />
         </n-form-item>
-        <n-form-item label="所属部门:" path="deptId">
-          <n-select
-            v-model:value="form.deptId"
-            :options="deptOptions"
-            placeholder="请选择所属部门"
-          />
-        </n-form-item>
         <n-form-item label="用户账号:" path="username">
           <n-input
             v-model:value="form.username"
@@ -57,6 +50,21 @@
             placeholder="请输入登录密码"
           />
         </n-form-item>
+        <n-form-item label="用户姓名:" path="realname">
+          <n-input
+            v-model:value="form.realname"
+            clearable
+            :maxlength="20"
+            placeholder="请输入用户姓名"
+          />
+        </n-form-item>
+        <n-form-item label="所属部门:" path="deptId">
+          <n-select
+            v-model:value="form.deptId"
+            :options="deptOptions"
+            placeholder="请选择所属部门"
+          />
+        </n-form-item>
         <n-form-item label="角色:" path="roleIds">
           <n-select
             v-model:value="form.roleIds"
@@ -66,26 +74,6 @@
             placeholder="请选择角色"
           />
         </n-form-item>
-        <n-form-item
-          v-if="form.type==2"
-          label="驾照类型："
-          path="driverType"
-        >
-          <n-select
-            v-model:value="form.driverType"
-            clearable
-            :options="[1, 2]"
-            placeholder="请选择驾照类型"
-          />
-        </n-form-item>
-        <n-form-item label="用户姓名:" path="realname">
-          <n-input
-            v-model:value="form.realname"
-            clearable
-            :maxlength="20"
-            placeholder="请输入用户姓名"
-          />
-        </n-form-item>
         <n-form-item label="状态" path="status">
           <n-radio-group
             v-model:value="form.status"
@@ -94,31 +82,8 @@
             <n-radio :value="2">禁用</n-radio>
           </n-radio-group>
         </n-form-item>
-
-        <n-form-item label="用户类型" path="type">
-          <n-radio-group
-            v-model:value="form.type"
-          >
-            <n-radio :value="1">普通用户</n-radio>
-            <n-radio :value="2">飞手</n-radio>
-          </n-radio-group>
-        </n-form-item>
-        <n-form-item
-          v-if="form.type==2"
-          label="驾照编号:"
-          path="driverCode"
-        >
-          <n-input
-            v-model:value="form.driverCode"
-            clearable
-            :maxlength="20"
-            placeholder="请输入驾照编号"
-          />
-        </n-form-item>
         <n-form-item
           label="备注:"
-          :label-col="{sm: {span: 3}, xs: {span: 6}}"
-          :wrapper-col="{sm: {span: 21}, xs: {span: 18}}"
         >
           <n-input
             v-model:value="form.note"
@@ -138,6 +103,7 @@ import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
 import Modal from '@/components/CardModal/index.vue'
 import { getDeptAll } from '@/api/system/dept/index'
 import { getRoleAll } from '@/api/system/role/index'
+import { addUser, editUser } from '@/api/system/user/index'
 import { dataToSelect } from '@/utils/handleData.js'
 export default defineComponent({
   name: 'UserModal',
@@ -155,13 +121,30 @@ export default defineComponent({
   emits: {
     'update:visible': null,
     onClose: null,
-    done: null
+    'done': null
   },
   setup(props, { emit }) {
+    const data = reactive({
+      form: {
+        avatar: '/images/user/20211011/20211011151447698.jpg',
+        code: '',
+        deptId: null,
+        username: '',
+        realname: '',
+        password: '',
+        roleIds: [],
+        status: 1,
+        note: ''
+
+      },
+      deptOptions: [],
+      rolesOptions: []
+    })
     const getModalOptions = computed(() => {
       return {
         title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
-        show: props.visible
+        show: props.visible,
+        form: Object.assign(data.form, props.row)
       }
     })
 
@@ -170,37 +153,16 @@ export default defineComponent({
       emit('update:visible', false)
     }
 
-    const form = reactive({
-      avatar: '',
-      code: '',
-      deptId: null,
-      username: '',
-      realname: '',
-      password: '',
-      roleIds: [],
-      driverType: null,
-      driverCode: '',
-      type: 1,
-      status: 1,
-      note: ''
-
-    })
-
-    const optionsList = reactive({
-      deptOptions: [],
-      rolesOptions: []
-    })
     // 获取部门列表
     async function getDeptOptions() {
       const res = await getDeptAll()
-      optionsList.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+      data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-      console.log('部门选项：', optionsList.deptOptions)
     }
 
     // 获取角色列表
     async function getRoleOptions() {
       const res = await getRoleAll()
-      optionsList.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+      data.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
     }
 
     onMounted(() => {
@@ -209,37 +171,79 @@ export default defineComponent({
     })
 
     // 上传文件
-    const handleUpload = ({ file, event }) => {
+    const handleUpload = ({ file }) => {
-      console.log(event)
+      console.log(file)
-      form.avatar = file.url
+      // data.form.avatar = file.url
     }
+
     return {
       getModalOptions,
       handleClose,
-      form,
+      ...toRefs(data),
       rules: reactive({
-        avatar: {
+        avatar: [
-          required: true,
+          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
-          trigger: 'blur',
+        ],
-          message: '请上传头像'
+        code: [
-        },
+          { required: true, message: '请输入编号', trigger: 'blur' }
-        code: {
+        ],
-          required: true,
+        realname: [
-          trigger: ['blur', 'input'],
+          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
-          message: '请输入用户编号'
+        ],
-        },
+        deptId: [
-        deptId: {
+          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
-          required: true,
+        ],
-          trigger: 'blur',
+        status: [
-          message: '请选择部门'
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
-        }
+        ],
+        roleIds: [
+          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
+        ]
       }),
-      handleUpload,
+      handleUpload
-      ...toRefs(optionsList)
     }
   },
   methods: {
+    // 表单提交
+    submitForm() {
+      const type = Object.keys(this.row).length === 0 ? 'add' : 'edit'
+      // this.$refs.formRef.validate((errors) => {
+      //   console.log(errors, '++++++++')
+      // })
 
+      console.log(this.form)
+      if (type === 'add') {
+        addUser(this.form).then(res => {
+          if (res.data.code === 0) {
+            // this.$message.success(res.data.msg)
+            this.updateVisible(false)
+            this.$emit('done')
+          } else {
+            console.log(res.data.msg)
+            // this.$message.error(res.data.msg)
+          }
+        }).catch(e => {
+          console.log(e)
+        })
+      } else if (type === 'edit') {
+        editUser(this.form).then(res => {
+          if (res.data.code === 0) {
+            // this.$message.success(res.data.msg)
+            this.updateVisible(false)
+            this.$emit('done')
+          } else {
+            // this.$message.error(res.data.msg)
+          }
+        })
+      }
+    },
+    /* 更新visible */
+    updateVisible(value) {
+      this.$emit('update:visible', value)
+    }
   }
 })
 </script>

src/views/system/user/index.vue

@@ -15,7 +15,7 @@
     </n-card>
   </div>
   <!-- 新增、编辑弹窗 -->
-  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" />
+  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" @done="loadDataTable"/>
 </template>
 
 <script>
@@ -147,12 +147,12 @@ export default {
     // 打开编辑弹窗
     function play(row) {
       modalData.rowData = row
-      console.log('编辑弹窗内容：', row)
       data.modalShow = true
     }
 
     const params = reactive({
-      name: ''
+      page: 1,
+      limit: 10
     })
 
     const loadDataTable = async(res) => {