新增用户管理模块弹窗

src/components/CardModal/index.vue

     v-bind="getModalOptions"
     :style="`width:${getModalOptions.width}px`"
     preset="card"
+    :title="options.title"
     @update:show="handleClose"
   >
     <n-card :bordered="false">
       <slot name="Context" />
+      <n-space style="float: right">
+        <n-button>取消</n-button>
+        <n-button type="primary">确认</n-button>
+      </n-space>
     </n-card>
   </n-modal>
 </template>

src/utils/handleData.js

   }
   return result
 }
+
+/**
+ * 处理select数据
+ * @param data 需要处理的数据
+ * @params {label: XX, value: XX, children: XX} 需要处理的结构
+ * @returns {[]} 处理后的数据
+ */
+export function dataToSelect(data, optionsObj) {
+  const result = []
+  if (data && data.length) {
+    data.forEach((item) => {
+      const i = {}
+      i.label = item[optionsObj.label]
+      i.value = item[optionsObj.value]
+      if (item.children && item.children.length) {
+        dataToSelect(item.children, optionsObj)
+        i.children = item[optionsObj.children]
+      }
+      result.push(i)
+    })
+  }
+  return result
+}

src/views/login/index.vue

     goPage() {
       // const query = this.$route.query
       // const path = query && query.from ? query.from : '/'
-      // this.$router.push(path)
+      // console.log(path)
+      // this.$router.replace(path)
       this.$router.replace('/home')
     }
   }

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

 <template>
-  <Modal :options="getModelOptions">
+  <Modal :options="getModalOptions" @on-close="handleClose">
     <template #Context>
-      添加用户
+      <n-form
+        ref="formRef"
+        :model="form"
+        label-placement="left"
+        :rules="rules"
+      >
+        <n-form-item
+          label="头像:"
+          path="avatar"
+        >
+          <n-upload
+            action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+            :default-file-list="previewFileList"
+            list-type="image-card"
+            @preview="handlePreview"
+          />
+          <n-modal
+            v-model:show="showModal"
+            preset="card"
+            style="width: 600px"
+            title="头像"
+          >
+            <img :src="form.avatar" style="width: 100%">
+          </n-modal>
+        </n-form-item>
+        <n-form-item label="用户编号:" path="code">
+          <n-input
+            v-model:value="form.code"
+            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="username">
+          <n-input
+            v-model:value="form.username"
+            clearable
+            :maxlength="20"
+            placeholder="请输入用户账号"
+          />
+        </n-form-item>
+        <n-form-item label="角色:" path="roleIds">
+          <n-select
+            v-model:value="form.roleIds"
+            clearable
+            :multiple="true"
+            :options="rolesOptions"
+            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"
+          >
+            <n-radio :value="1">正常</n-radio>
+            <n-radio :value="2">禁用</n-radio>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item
+          label="登录密码:"
+          path="password"
+        >
+          <n-input
+            v-model:value="form.password"
+            type="password"
+            :maxlength="20"
+            placeholder="请输入登录密码"
+          />
+        </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"
+            type="textarea"
+            :rows="3"
+            :maxlength="200"
+            placeholder="请输入备注"
+          />
+        </n-form-item>
+      </n-form>
     </template>
   </Modal>
 </template>
 
 <script>
+import { defineComponent, computed, onMounted, reactive } from 'vue'
 import Modal from '@/components/CardModal/index.vue'
-import { defineComponent, computed } from 'vue'
-export default {
+import { getDeptAll } from '@/api/system/dept/index'
+import { getRoleAll } from '@/api/system/role/index'
+import { dataToSelect } from '@/utils/handleData.js'
+export default defineComponent({
   name: 'UserModal',
   components: { Modal },
   props: {
     row: {
       type: Object,
       default: () => {}
+    },
+    title: {
+      type: String,
+      default: '添加'
     }
   },
   emits: {
   setup(props, { emit }) {
     const getModalOptions = computed(() => {
       return {
-        visible: props.visible
+        title: props.title,
+        show: props.visible
       }
     })
 
     /* 关闭弹窗 */
     const handleClose = () => {
-      // vodModal.value.handleUploadCancel()
       emit('update:visible', false)
     }
 
+    const form = reactive({
+      avatar: '',
+      code: '',
+      deptId: null,
+      username: '',
+      realname: '',
+      password: '',
+      roleIds: [],
+      driverType: null,
+      driverCode: '',
+      type: 1,
+      status: 1,
+      note: ''
+
+    })
+
+    // 获取部门列表
+    let deptOptions = reactive([])
+    async function getDeptOptions() {
+      const res = await getDeptAll()
+      deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+      console.log('部门选项：', deptOptions)
+    }
+
+    // 获取角色列表
+    let rolesOptions = reactive([])
+    async function getRoleOptions() {
+      const res = await getRoleAll()
+      rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+    }
+
+    onMounted(() => {
+      getDeptOptions()
+      getRoleOptions()
+    })
+
+    // 上传文件
+    const handleUpload = ({ file, event }) => {
+      console.log(event)
+      form.avatar = file.url
+    }
     return {
-      getModalOptions
+      getModalOptions,
+      handleClose,
+      form,
+      rules: reactive({
+        avatar: {
+          required: true,
+          trigger: 'blur',
+          message: '请上传头像'
+        },
+        code: {
+          required: true,
+          trigger: ['blur', 'input'],
+          message: '请输入用户编号'
+        },
+        deptId: {
+          required: true,
+          trigger: 'blur',
+          message: '请选择部门'
+        }
+      }),
+      handleUpload,
+      deptOptions,
+      rolesOptions
     }
+  },
+  methods: {
+
   }
-}
+})
 </script>
+<style scoped lang='scss'>
+</style>

src/views/system/user/index.vue

         :row-key="(row) => row.id"
         :request="loadDataTable"
         size="large"
-        scroll-x="1200"
       >
         <template #tableTitle>
-          <n-button type="primary"> 新建 </n-button>
-          <n-button type="primary"> 删除 </n-button>
+          <n-button type="primary" @click="handleUser"> 新建 </n-button>
+          <n-button type="primary" @click="deleteUsers"> 删除 </n-button>
         </template>
       </data-table>
     </n-card>
   </div>
+  <!-- 新增、编辑弹窗 -->
+  <user-modal v-model:visible="data.modalShow" :row="rowData" :title="modalTitle" />
 </template>
 
 <script>
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableImage from '@/components/DataTable/tools/Image.vue'
 import { getUserList } from '@/api/system/user/index.js'
-import { h, onMounted, unref } from 'vue'
+import { h, onMounted, unref, ref } from 'vue'
 import { reactive } from 'vue'
+import UserModal from './components/UserModal.vue'
 export default {
   name: 'MenuPage',
-  components: { dataTable },
+  components: { dataTable, UserModal },
   setup() {
     const data = reactive({
       columns: [
               images: {
                 width: 36,
                 height: 36,
-                src: row.avatar
+                src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiKrYt-fEfJ4SZhF9KfLLaX9f15KV6Ve1ptA&usqp=CAU'
               }
             })
           }
             return h(TableAction, {
               actions: [
                 {
-                  label: '添加',
+                  label: '修改',
                   type: 'button',
                   props: {
                     type: 'primary',
                   },
                   auth: 'basic_list'
                 },
-                {
-                  label: '修改',
-                  auth: 'basic_list'
-                },
                 {
                   label: '删除',
                   type: 'popconfirm',
       data: [],
       pagination: {
         pageSize: 10
-      }
+      },
+      modalShow: false
     })
-
+    const modalTitle = ref('添加用户')
+    let rowData = reactive({})
+    // 打开编辑弹窗
     function play(row) {
-      console.log(row)
+      rowData = row
+      modalTitle.value = '编辑用户'
+      console.log('编辑弹窗内容：', row)
+      data.modalShow = true
     }
 
     /**
       }
       return await getUserList(_params)
     }
+    function handleUser() {
+      rowData = {}
+      modalTitle.value = '添加用户'
+      data.modalShow = true
+    }
     onMounted(() => {
       fetchList()
     })
 
-    return { data, loadDataTable }
+    return { data, loadDataTable, handleUser, rowData, modalTitle }
   }
 }
 </script>