添加用户接口联调

2022-05-25 14:38:40 +08:00 · 2022-05-25 14:38:40 +08:00 · 0159932ab2
parent 32be584c98
commit 0159932ab2
5 changed files with 142 additions and 135 deletions
--- a/src/App.vue
+++ b/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">
--- a/src/components/CardModal/index.vue
+++ b/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 type="primary">确认</n-button>
+        <n-button @click="handleClose">取消</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)
--- a/src/views/login/index.vue
+++ b/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({
-      username: '',
-      password: '',
-      key: '',
-      captcha: '',
-      remember: false
-    })
-    onMounted(() => {
-      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({
+    const data = reactive({
+      loginForm: {
+        username: '',
+        password: '',
+        key: '',
+        captcha: '',
+        remember: false
+      },
+      rules: {
        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，跳转首页
--- a/src/views/system/user/components/UserModal.vue
+++ b/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' })
-      console.log('部门选项：', optionsList.deptOptions)
+      data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
    }

    // 获取角色列表
    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 }) => {
-      console.log(event)
-      form.avatar = file.url
+    const handleUpload = ({ file }) => {
+      console.log(file)
+      // data.form.avatar = file.url
    }
+
    return {
      getModalOptions,
      handleClose,
-      form,
+      ...toRefs(data),
      rules: reactive({
-        avatar: {
-          required: true,
-          trigger: 'blur',
-          message: '请上传头像'
-        },
-        code: {
-          required: true,
-          trigger: ['blur', 'input'],
-          message: '请输入用户编号'
-        },
-        deptId: {
-          required: true,
-          trigger: 'blur',
-          message: '请选择部门'
-        }
+        avatar: [
+          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入编号', trigger: 'blur' }
+        ],
+        realname: [
+          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
+        ],
+        roleIds: [
+          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
+        ]
      }),
-      handleUpload,
-      ...toRefs(optionsList)
+      handleUpload
    }
  },
  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>
--- a/src/views/system/user/index.vue
+++ b/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) => {