From 7be36e08628f52fe405fabcb4eb737464d1da243 Mon Sep 17 00:00:00 2001
From: zhangtao <1176193409@qq.com>
Date: Wed, 25 May 2022 14:36:06 +0800
Subject: [PATCH] menumodal

---
 src/components/DataTable/index.vue            |  11 +
 src/components/DataTable/tools/Tags.vue       |   6 +-
 src/components/ImgUpload/index.vue            |  37 ++++
 src/components/{CardModal => Modal}/index.vue |  22 +-
 .../system/menu/components/MenuModal.vue      | 191 +++++++++++++++++-
 src/views/system/menu/index.vue               |  26 ++-
 .../system/user/components/UserModal.vue      |   2 +-
 7 files changed, 261 insertions(+), 34 deletions(-)
 create mode 100644 src/components/ImgUpload/index.vue
 rename src/components/{CardModal => Modal}/index.vue (63%)

diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index b9c31d1..4a1b79c 100644
--- 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 */
diff --git a/src/components/DataTable/tools/Tags.vue b/src/components/DataTable/tools/Tags.vue
index 8226bcc..81c01f5 100644
--- 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) }
       }
     })
diff --git a/src/components/ImgUpload/index.vue b/src/components/ImgUpload/index.vue
new file mode 100644
index 0000000..7ca9edb
--- /dev/null
+++ 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>
diff --git a/src/components/CardModal/index.vue b/src/components/Modal/index.vue
similarity index 63%
rename from src/components/CardModal/index.vue
rename to src/components/Modal/index.vue
index 722712b..8676afa 100644
--- a/src/components/CardModal/index.vue
+++ b/src/components/Modal/index.vue
@@ -2,25 +2,18 @@
   <n-modal
     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>
 
 <script>
 
-import { defineComponent, computed, unref } from 'vue'
+import { defineComponent, computed } from 'vue'
 export default defineComponent({
-  name: 'CardModal',
   props: {
     options: {
       type: Object,
@@ -28,7 +21,7 @@ export default defineComponent({
     }
   },
   emits: {
-    click: null, // click事件没有检验
+    onConfirm: null,
     onClose: (value) => {
       return value
     }
@@ -37,18 +30,21 @@ export default defineComponent({
     const getModalOptions = computed(() => {
       return {
         ...props.options,
-        width: props.options.width || 600
+        width: props.options.width || 600,
+        preset: props.options.preset || 'dialog',
+        showIcon: !!props.options.showIcon
       }
     })
-    const handleClick = function() {
-      emit('click')
+    const handleConfirm = function() {
+      emit('onConfirm')
+      return false
     }
     const handleClose = function() {
       emit('onClose', true)
     }
     return {
       getModalOptions,
-      handleClick,
+      handleConfirm,
       handleClose
     }
   }
diff --git a/src/views/system/menu/components/MenuModal.vue b/src/views/system/menu/components/MenuModal.vue
index f008d84..d5c5eb6 100644
--- 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
     }
   }
 })
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 147e20c..fdab71f 100644
--- 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
+    }
   }
 }
 
diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index 59b9837..5ed0c83 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@@ -137,7 +137,7 @@
 
 <script>
 import { defineComponent, computed, onMounted, reactive } 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 { dataToSelect } from '@/utils/handleData.js'