用户添加以及编辑接口对接完成

2022-05-25 15:34:52 +08:00 · 2022-05-25 15:34:52 +08:00 · b4c8bfd5f8
parent 0159932ab2 b89d19c65a
commit b4c8bfd5f8
9 changed files with 361 additions and 76 deletions
--- a/src/components/CardModal/index.vue
+++ b/src/components/CardModal/index.vue
@ -20,7 +20,7 @@

 import { defineComponent, computed, unref } from 'vue'
 export default defineComponent({
-  name: 'CardModal',
+  name: 'Modal',
  props: {
    options: {
      type: Object,
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@ -44,6 +44,15 @@ export default {
  props: {
    ...tableProps
  },
+  emits: [
+    'fetch-success',
+    'fetch-error',
+    'update:checked-row-keys',
+    'edit-end',
+    'edit-cancel',
+    'edit-row-end',
+    'edit-change'
+  ],
  setup(props, { emit }) {
    const getProps = computed(() => {
      return { ...props }
@ -88,6 +97,8 @@ export default {
      }
    })

+    emit('fetch-success', isRequest ? unref(getDataSourceRef) : unref(getProps).data)
+
    const key = Symbol('s-table')
    provide(key, { getBindProps })
    /* tableData-end */
--- a/src/components/DataTable/tools/Tags.vue
+++ b/src/components/DataTable/tools/Tags.vue
@ -19,13 +19,13 @@

 <script>
 import { defineComponent, computed, unref } from 'vue'
+import { isArray } from '@/utils/is.js'
 export default defineComponent({
  name: 'TableTags',
  props: {
    /* 展示的数据 */
    data: {
-      type: Object,
-      defalut: [],
+      type: [Array, String, Number],
      required: true
    },
    /* 展示数据取的字段 */
@ -67,7 +67,7 @@ export default defineComponent({
    const getData = computed(() => {
      return {
        rowKey: unref(props.rowKey),
-        data: { ...unref(props.data) },
+        data: isArray(props.data) ? { ...unref(props.data) } : [{ [props.rowKey]: props.data }],
        filters: { ...unref(props.filters) }
      }
    })
--- a/src/components/ImgUpload/index.vue
+++ b/src/components/ImgUpload/index.vue
@ -0,0 +1,37 @@
+<template>
+  <div>
+    <n-upload
+      action="#"
+      :default-file-list="fileList"
+      list-type="image-card"
+    >
+      点击上传
+    </n-upload>
+    <n-modal
+      v-model:show="showModal"
+      preset="card"
+      style="width: 600px"
+      title="一张很酷的图片"
+    >
+      <img :src="previewImageUrl" style="width: 100%">
+    </n-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImgUpload',
+  props: {
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  setup() {
+
+  }
+}
+
+</script>
+<style scoped lang='scss'>
+</style>
--- a/src/components/Modal/index.vue
+++ b/src/components/Modal/index.vue
@ -0,0 +1,55 @@
+<template>
+  <n-modal
+    v-bind="getModalOptions"
+    :style="`width:${getModalOptions.width}px`"
+    :title="options.title"
+  >
+    <n-card :bordered="false">
+      <slot name="Context" />
+    </n-card>
+  </n-modal>
+</template>
+
+<script>
+
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+  props: {
+    options: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    onConfirm: null,
+    onClose: (value) => {
+      return value
+    }
+  },
+  setup(props, { emit }) {
+    const getModalOptions = computed(() => {
+      return {
+        ...props.options,
+        width: props.options.width || 600,
+        preset: props.options.preset || 'dialog',
+        showIcon: !!props.options.showIcon
+      }
+    })
+    const handleConfirm = function() {
+      emit('onConfirm')
+      return false
+    }
+    const handleClose = function() {
+      emit('onClose', true)
+    }
+    return {
+      getModalOptions,
+      handleConfirm,
+      handleClose
+    }
+  }
+})
+</script>
+
+<style scoped lang='scss'>
+</style>
--- a/src/views/system/menu/components/MenuModal.vue
+++ b/src/views/system/menu/components/MenuModal.vue
@ -1,36 +1,185 @@
 <template>
-  <Modal :options="getModalOptions" @on-close="handleClose">
+  <Modal
+    :options="getModalOptions"
+    :on-close="handleClose"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+  >
    <template #Context>
-      111
+      <n-form ref="formRef" :model="menuForm" :rules="menuRules" require-mark-placement="left" :label-width="80" label-placement="left">
+        <n-grid x-gap="12" :cols="2">
+          <n-gi>
+            <n-form-item label="上级菜单" path="pid">
+              <n-select
+                v-model:value="menuForm.pid"
+                placeholder="请选择上级菜单"
+                :options="getMenuList"
+              />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="菜单类型" path="type">
+              <n-radio-group v-model:value="menuForm.type" name="type">
+                <n-radio v-for="item in typeOptions" :key="`type_${item.key}`" :value="item.key">
+                  {{ item.label }}
+                </n-radio>
+              </n-radio-group>
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="菜单名称" path="title">
+              <n-input v-model:value="menuForm.title" placeholder="请输入菜单名称" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="打开方式" path="target">
+              <n-radio-group v-model:value="menuForm.target" name="target">
+                <n-radio v-for="item in openOptions" :key="`target_${item.key}`" :value="item.key">
+                  {{ item.label }}
+                </n-radio>
+              </n-radio-group>
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="菜单图标" path="icon">
+              <n-input v-model:value="menuForm.icon" placeholder="请选择菜单图标" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="权限标识" path="permission">
+              <n-input v-model:value="menuForm.permission" placeholder="请输入权限标识" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="路由地址" path="path">
+              <n-input v-model:value="menuForm.path" placeholder="请输入路由地址" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="排序号" path="sort">
+              <n-input v-model:value="menuForm.sort" placeholder="请输入排序号" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="组件路径" path="component">
+              <n-input v-model:value="menuForm.component" placeholder="请输入组件路径" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="是否可见" path="hide">
+              <n-radio-group v-model:value="menuForm.hide" name="hide">
+                <n-radio v-for="item in visibleOptions" :key="`hide_${item.key}`" :value="item.key">
+                  {{ item.label }}
+                </n-radio>
+              </n-radio-group>
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="菜单状态" path="status">
+              <n-radio-group v-model:value="menuForm.status" name="status">
+                <n-radio v-for="item in statusOptions" :key="`status_${item.key}`" :value="item.key">
+                  {{ item.label }}
+                </n-radio>
+              </n-radio-group>
+            </n-form-item>
+          </n-gi>
+
+        </n-grid>
+      </n-form>
    </template>
  </Modal>
 </template>

 <script>
-import { defineComponent, computed } from 'vue'
-import Modal from '@/components/CardModal/index.vue'
+import { defineComponent, computed, reactive, toRefs, ref } from 'vue'
+import Modal from '@/components/Modal/index.vue'
+import { addMenu } from '@/api/system/menu/index.js'
 export default defineComponent({
  name: 'MenuModal',
  components: { Modal },
  props: {
+    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
-    row: {
+    /* 选中的数据 */
+    data: {
      type: Object,
      default: () => {}
+    },
+    menuList: {
+      type: Array,
+      default: () => []
    }
  },
  emits: {
-    'update:visible': null,
-    onClose: null,
-    done: null
+    'update:visible': null
  },
  setup(props, { emit }) {
+    const data = reactive({
+      menuForm: {
+        pid: null,
+        type: '0',
+        title: '',
+        target: '0',
+        icon: '',
+        permission: '',
+        path: '',
+        sort: '',
+        component: '',
+        hide: '0',
+        status: '1'
+      },
+      menuRules: {
+        title: {
+          required: true,
+          message: '请输入菜单名称',
+          trigger: ['blur']
+        },
+        sort: {
+          required: true,
+          message: '请输入排序号',
+          trigger: ['blur']
+        }
+      },
+      typeOptions: [
+        { key: '0', label: '菜单' },
+        { key: '1', label: '按钮' }
+      ],
+      openOptions: [
+        { key: '0', label: '组件' },
+        { key: '1', label: '内链' },
+        { key: '2', label: '外链' }
+      ],
+      visibleOptions: [
+        { key: '0', label: '可见' },
+        { key: '1', label: '不可见' }
+      ],
+      statusOptions: [
+        { key: '1', label: '在用' },
+        { key: '2', label: '停用' }
+      ]
+    })
+
+    const getMenuList = computed(() => {
+      const list = props.menuList.map((item) => {
+        const menu = {
+          label: item.title,
+          value: item.pid
+        }
+        return menu
+      })
+      return list
+    })
+
    const getModalOptions = computed(() => {
      return {
-        show: props.visible
+        show: props.visible,
+        title: props.data ? '修改菜单' : '新建菜单',
+        width: 700,
+        negativeText: '取消',
+        positiveText: '确认'
      }
    })

@ -38,10 +187,32 @@ export default defineComponent({
    const handleClose = () => {
      emit('update:visible', false)
    }
+    const formRef = ref()
+    const handleConfirm = () => {
+      formRef.value?.validate((errors) => {
+        if (!errors) {
+          const params = {
+            ...data.menuForm
+          }
+          addMenu(params)
+            .then(res => {
+              console.log(res)
+              handleClose()
+            })
+        } else {
+          // console.log('error')
+        }
+      })
+      return false
+    }

    return {
+      ...toRefs(data),
+      formRef,
+      getMenuList,
      getModalOptions,
-      handleClose
+      handleClose,
+      handleConfirm
    }
  }
 })
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <n-card>
-      <data-table :columns="data.columns" :pagination="false" :data="data.data" size="large">
+      <data-table :columns="data.columns" :pagination="false" :data="data.data" size="large" @fetch-success="getFechData">
        <template #tableTitle>
          <n-button type="primary" @click="handlleRoleAdd">
            添加菜单
@ -11,7 +11,7 @@
    </n-card>
  </div>

-  <RoleModal v-model:visible="data.modalShow" />
+  <RoleModal v-model:visible="data.modalShow" :data="data.selectRow" :menu-list="data.data" />
 </template>

 <script>
@ -119,10 +119,9 @@ export default {
          }
        }
      ],
-      data: [
-
-      ],
-      modalShow: false
+      data: [],
+      modalShow: false,
+      selectRow: null
    })

    function play(row) {
@ -141,11 +140,24 @@ export default {
      data.modalShow = true
    }

+    /**
+     * @description: 获取表单数据
+     * @param {*} data
+     * @return {*}
+     */
+    function getFechData(data) {
+
+    }
+
    onMounted(() => {
      fetchList()
    })

-    return { data, handlleRoleAdd }
+    return {
+      data,
+      handlleRoleAdd,
+      getFechData
+    }
  }
 }

--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@ -1,11 +1,18 @@
 <template>
-  <Modal :options="getModalOptions" @on-close="handleClose" @save="submitForm">
+  <Modal
+    :options="getModalOptions"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+    :on-close="handleClose"
+  >
    <template #Context>
      <n-form
        ref="formRef"
        :model="form"
        label-placement="left"
        :rules="rules"
+        :on-positive-click="handleConfirm"
+        :on-negative-click="handleClose"
      >
        <n-form-item
          label="头像:"
@ -100,7 +107,7 @@

 <script>
 import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
-import Modal from '@/components/CardModal/index.vue'
+import Modal from '@/components/Modal/index.vue'
 import { getDeptAll } from '@/api/system/dept/index'
 import { getRoleAll } from '@/api/system/role/index'
 import { addUser, editUser } from '@/api/system/user/index'
@ -120,7 +127,6 @@ export default defineComponent({
  },
  emits: {
    'update:visible': null,
-    onClose: null,
    'done': null
  },
  setup(props, { emit }) {
@ -144,7 +150,9 @@ export default defineComponent({
      return {
        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
        show: props.visible,
-        form: Object.assign(data.form, props.row)
+        form: Object.assign(data.form, props.row),
+        negativeText: '取消',
+        positiveText: '确认'
      }
    })

@ -208,41 +216,33 @@ export default defineComponent({
  },
  methods: {
    // 表单提交
-    submitForm() {
+    handleConfirm() {
      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)
+      this.$refs.formRef.validate((errors) => {
+        if (!errors) {
+          if (type === 'add') {
+            addUser(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+              } else {
+                console.log(res.data.msg)
+              }
+            }).catch(e => {
+              console.log(e)
+            })
+          } else if (type === 'edit') {
+            editUser(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+              } else {
+                console.log(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)
+        }
+      })
    }
  }
 })
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -9,13 +9,18 @@
      >
        <template #tableTitle>
          <n-button type="primary" @click="handleUser"> 新建 </n-button>
-          <!-- <n-button type="primary" @click="deleteUsers"> 删除 </n-button> -->
+          <n-popconfirm
+            @positive-click="handlePositiveClick"
+            @negative-click="handleNegativeClick"
+          >
+            <n-button type="primary" @click="deleteUsers"> 删除 </n-button>
+          </n-popconfirm>
        </template>
      </data-table>
    </n-card>
  </div>
  <!-- 新增、编辑弹窗 -->
-  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" @done="loadDataTable"/>
+  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" @done="loadDataTable" />
 </template>

 <script>
@ -62,12 +67,6 @@ export default {
          key: 'realname',
          align: 'center'
        },
-        {
-          title: '用户类型',
-          key: 'type',
-          align: 'center',
-          width: 100
-        },
        {
          title: '角色',
          key: 'roles',
@ -75,16 +74,16 @@ export default {
          render(row) {
            return h(TableTags, {
              data: row.roles,
-              rowKey: 'name',
-              filters: [
-                {
-                  key: '超级管理员',
-                  label: '123',
-                  color: {
-                    textColor: 'red'
-                  }
-                }
-              ]
+              rowKey: 'name'
+              // filters: [
+              //   {
+              //     key: '管理员',
+              //     label: '123',
+              //     color: {
+              //       textColor: 'red'
+              //     }
+              //   }
+              // ]
            })
          }
        },