新增用户管理模块弹窗

2022-05-24 16:52:14 +08:00 · 2022-05-24 16:52:14 +08:00 · 4d56d69047
parent 59cdbef5f2
commit 4d56d69047
5 changed files with 267 additions and 25 deletions
--- a/src/components/CardModal/index.vue
+++ b/src/components/CardModal/index.vue
@ -3,10 +3,15 @@
    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>
--- a/src/utils/handleData.js
+++ b/src/utils/handleData.js
@ -107,3 +107,26 @@ export function formatTreeData(data, formatter, childKey = 'children') {
  }
  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
+}
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -105,7 +105,8 @@ export default {
    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')
    }
  }
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@ -1,15 +1,147 @@
 <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: {
@ -20,6 +152,10 @@ export default {
    row: {
      type: Object,
      default: () => {}
+    },
+    title: {
+      type: String,
+      default: '添加'
    }
  },
  emits: {
@ -30,19 +166,87 @@ export default {
  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>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -8,15 +8,16 @@
        :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>
@ -24,11 +25,12 @@ import dataTable from '@/components/DataTable/index.vue'
 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: [
@ -46,7 +48,7 @@ export default {
              images: {
                width: 36,
                height: 36,
-                src: row.avatar
+                src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiKrYt-fEfJ4SZhF9KfLLaX9f15KV6Ve1ptA&usqp=CAU'
              }
            })
          }
@ -104,7 +106,7 @@ export default {
            return h(TableAction, {
              actions: [
                {
-                  label: '添加',
+                  label: '修改',
                  type: 'button',
                  props: {
                    type: 'primary',
@ -112,10 +114,6 @@ export default {
                  },
                  auth: 'basic_list'
                },
-                {
-                  label: '修改',
-                  auth: 'basic_list'
-                },
                {
                  label: '删除',
                  type: 'popconfirm',
@ -130,11 +128,17 @@ export default {
      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
    }

    /**
@ -161,11 +165,16 @@ export default {
      }
      return await getUserList(_params)
    }
+    function handleUser() {
+      rowData = {}
+      modalTitle.value = '添加用户'
+      data.modalShow = true
+    }
    onMounted(() => {
      fetchList()
    })

-    return { data, loadDataTable }
+    return { data, loadDataTable, handleUser, rowData, modalTitle }
  }
 }
 </script>