瀏覽代碼

no message

linwenxin 1 年之前
父節點
當前提交
5c47951668

+ 46 - 0
src/api/miniMenus.js

@@ -0,0 +1,46 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+// 获取菜单列表
+export function getMenuList(params) {
+  return request({
+    url: '/admin/user/module/mini/list',
+    method: 'get',
+    params
+  })
+}
+
+// 添加菜单
+export function addMenu(params) {
+  return request({
+    url: '/admin/module/mini/add',
+    method: 'post',
+    data: params
+  })
+}
+
+// 编辑菜单
+export function editMenu(params) {
+  return request({
+    url: '/admin/module/mini/update',
+    method: 'post',
+    data: params
+  })
+}
+
+// 删除菜单
+export function deleteMenu(params) {
+  return request({
+    url: '/admin/module/mini/delete',
+    method: 'post',
+    params
+  })
+}
+
+// 获取菜单详情
+export function getMenuDetail(params) {
+  return request({
+    url: '/admin/module/mini/detail',
+    method: 'get',
+    params
+  })
+}

+ 9 - 0
src/api/serviceProductConfig.js

@@ -0,0 +1,9 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+export function serviceProductList(data) {
+  return request({
+    url: `/service/product/list?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}

+ 374 - 0
src/views/setting/miniMenus/index.vue

@@ -0,0 +1,374 @@
+<template>
+  <div class="app-container" style="height: 100%; box-sizing: border-box; overflow-y: auto">
+    <div class="mymain-container">
+      <div class="btn-group clearfix">
+        <div class="fl">
+          <el-button size="small" type="primary" icon="el-icon-plus" @click="openFormWin('add', '0')"
+            >添加菜单</el-button
+          >
+        </div>
+      </div>
+      <div class="table">
+        <el-table
+          v-loading="listLoading"
+          :data="dataList"
+          row-key="moduleId"
+          border
+          default-expand-all
+          :tree-props="{ children: 'pages' }"
+        >
+          <el-table-column prop="moduleName" label="菜单名称" width="340px" />
+          <el-table-column prop="code" label="code" width="260px" />
+          <el-table-column align="center" prop="status" label="状态" width="80px">
+            <template slot-scope="scope">
+              <span>{{ ['显示', '不显示'][[true, false].indexOf(scope.row.status)] || '' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="描述" />
+          <el-table-column align="right" label="操作" width="150" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                icon="el-icon-plus"
+                @click="openFormWin('add', scope.row.moduleId)"
+              />
+              <el-button
+                type="primary"
+                size="mini"
+                icon="el-icon-edit"
+                @click="openFormWin('edit', scope.row.moduleId)"
+              />
+              <el-popconfirm style="margin-left: 10px" title="确定删除吗?" @confirm="handleDelete(scope.row.moduleId)">
+                <el-button slot="reference" size="mini" icon="el-icon-delete" />
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 创建编辑菜单 -->
+    <div class="cartographer_big">
+      <el-dialog
+        :title="this.menuFormData.moduleId ? '编辑菜单' : '创建菜单'"
+        width="100%"
+        :modal="false"
+        :visible.sync="menuFormBool"
+        :before-close="cancelFormWin"
+        :close-on-click-modal="false"
+      >
+        <zj-page-container v-if="menuFormBool">
+          <zj-page-fill class="neibuviewaaaaa">
+            <zj-form-container
+              ref="formRef"
+              :form-data="menuFormData"
+              :form-attributes="{ size: 'medium' }"
+              :styleSwitch="false"
+            >
+              <zj-form-module
+                title="基本信息"
+                :form-data="menuFormData"
+                :form-items="basicInfo"
+                :showHade="false"
+                label-width="120px"
+              />
+            </zj-form-container>
+          </zj-page-fill>
+          <div>
+            <div style="box-sizing: border-box; padding: 10px 60px; text-align: right">
+              <el-button @click="cancelFormWin">取 消</el-button>
+              <el-button type="primary" @click="submitMenuForm">确 定</el-button>
+            </div>
+          </div>
+        </zj-page-container>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getToken } from '@/utils/auth'
+import { getMenuList, addMenu, editMenu, deleteMenu, getMenuDetail } from '@/api/miniMenus'
+import iconList from '@/const/iconList.js'
+export default {
+  data() {
+    return {
+      dataList: [], // 列表数据
+      listLoading: true, // 列表加载loading
+      isChooseIconDialog: false,
+      iconList: iconList,
+      menuTypeList: [
+        {
+          value: 1,
+          label: '服务产品'
+        },
+        {
+          value: 2,
+          label: '页面'
+        },
+        {
+          value: 4,
+          label: '模块'
+        }
+      ],
+      menuFormData: {
+        parentId: '',
+        moduleId: '',
+        moduleName: '',
+        code: '',
+        type: 1,
+        status: true,
+        remark: '',
+        url: '',
+        fullUrl: '',
+        icon: '',
+        sortNum: 0,
+        flag: '',
+        isCache: 1,
+        childList: []
+      },
+      menuFormBool: false
+    }
+  },
+  computed: {
+    ...mapGetters(['userid', 'name']),
+    basicInfo() {
+      return [
+        {
+          name: 'el-radio',
+          md: 24,
+          options: this.menuTypeList,
+          attributes: {
+            placeholder: '请选择'
+          },
+          formItemAttributes: {
+            label: '类型',
+            prop: 'type'
+          }
+        },
+        {
+          name: 'el-cascader',
+          md: 24,
+          attributes: {
+            placeholder: '请选择',
+            options: [{ moduleId: '0', moduleName: '设定一级' }, ...this.dataList],
+            props: { checkStrictly: true, value: 'moduleId', label: 'moduleName', emitPath: false },
+            filterable: true,
+            clearable: true,
+            style: { width: '100%' }
+          },
+          formItemAttributes: {
+            label: '上级',
+            prop: 'parentId'
+          }
+        },
+        {
+          name: 'el-input',
+          md: 24,
+          attributes: {
+            placeholder: '请输入菜单名称'
+          },
+          formItemAttributes: {
+            label: '菜单名称',
+            prop: 'moduleName',
+            rules: [{ required: true, message: '请选择类型', trigger: 'blur' }]
+          }
+        },
+        {
+          name: 'el-input',
+          md: 24,
+          attributes: {
+            placeholder: '请输入CODE'
+          },
+          formItemAttributes: {
+            label: 'CODE',
+            prop: 'code',
+            rules: [{ required: true, message: '请选择类型', trigger: 'blur' }]
+          }
+        },
+        {
+          name: 'el-input',
+          md: 24,
+          attributes: {
+            type: 'textarea',
+            rows: 3,
+            placeholder: '请输入'
+          },
+          formItemAttributes: {
+            label: '备注',
+            prop: 'remark',
+            rules: []
+          }
+        },
+        {
+          name: 'el-switch',
+          md: 24,
+          attributes: {
+            'active-value': true,
+            'inactive-value': false,
+            'active-color': '#13ce66',
+            'inactive-color': '#ff4949'
+          },
+          formItemAttributes: {
+            label: '是否显示',
+            prop: 'status'
+          }
+        }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取菜单列表
+    getList() {
+      this.listLoading = true
+      getMenuList({
+        adminUserId: this.userid,
+        flag: 'menu'
+      })
+        .then(res => {
+          this.dataList = this.recursionFn(res.data)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
+    },
+    // 组合数据
+    recursionFn(arr) {
+      if (!arr.length) return
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].children.length) {
+          arr[i].pages = []
+          arr[i].controls = []
+          for (let j = 0; j < arr[i].children.length; j++) {
+            if ([1, 2, 4].includes(arr[i].children[j].type)) {
+              arr[i].pages.push(arr[i].children[j])
+            }
+            if ([3].includes(arr[i].children[j].type)) {
+              arr[i].controls.push(arr[i].children[j])
+            }
+          }
+          this.recursionFn(arr[i].children)
+        }
+      }
+      return arr || []
+    },
+    // 打开 新增编辑
+    openFormWin(type, cid) {
+      if (type == 'add') {
+        this.menuFormData.parentId = cid
+        this.menuFormBool = true
+      } else if (type == 'edit') {
+        getMenuDetail({ moduleId: cid }).then(res => {
+          this.menuFormData = {
+            ...res.data
+          }
+          this.menuFormBool = true
+        })
+      }
+    },
+    // 关闭窗口
+    cancelFormWin() {
+      this.$data.menuFormData = this.$options.data().menuFormData
+      this.$refs?.formRef?.resetFields()
+      this.menuFormBool = false
+    },
+    // 提交菜单
+    submitMenuForm() {
+      this.$refs.formRef.validate(valid => {
+        if (valid) {
+          if (this.menuFormData.moduleId) {
+            editMenu(this.menuFormData).then(res => {
+              this.getList()
+              this.cancelFormWin()
+              this.$successMsg('编辑成功')
+            })
+          } else {
+            addMenu(this.menuFormData).then(res => {
+              this.getList()
+              this.cancelFormWin()
+              this.$successMsg('添加成功')
+            })
+          }
+        }
+      })
+    },
+    // 操作 - 删除
+    handleDelete(id) {
+      deleteMenu({ id: id }).then(res => {
+        this.getList()
+        this.$successMsg()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.iconList {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 40vh;
+  overflow-y: scroll;
+  .item {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    cursor: pointer;
+    i {
+      font-size: 18px;
+    }
+    &:hover {
+      background: #f5f5f5;
+      i {
+        color: #409eff;
+      }
+    }
+  }
+}
+::v-deep .iconInput {
+  display: flex;
+  .icon {
+    margin-right: 10px;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    box-sizing: border-box;
+    color: #606266;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    flex-shrink: 0;
+    i {
+      font-size: 18px;
+    }
+  }
+  input {
+    flex: 1;
+  }
+  button {
+    margin-left: 10px;
+  }
+}
+</style>
+
+<style lang="scss">
+.el-image-viewer__wrapper .el-icon-circle-close {
+  color: #ffffff !important;
+  font-size: 60px;
+}
+.el-table__row.expanded {
+  background: #f5f5f5;
+}
+.neibuviewaaaaa {
+  .zj-page-fill-scroll {
+    box-sizing: border-box;
+    padding: 20px 50px;
+  }
+}
+</style>

+ 101 - 0
src/views/setting/serviceProductConfig/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <template-page
+    ref="pageRef"
+    :getList="getList"
+    :operation="operation()"
+    :optionsEvensGroup="optionsEvensGroup"
+    :columnParsing="columnParsing"
+    :tableAttributes="tableAttributes"
+    :tableEvents="tableEvents"
+    :moreParameters="moreParameters"
+  >
+    <div class="cartographer_big">
+      <el-dialog title="服务产品配置" width="100%" :modal="false" :visible.sync="formBool" :before-close="handleClose">
+      </el-dialog>
+    </div>
+  </template-page>
+</template>
+
+<script>
+import TemplatePage from '@/components/template/template-page-1.vue'
+import operation_mixin from '@/components/template/operation_mixin.js'
+import { serviceProductList } from '@/api/serviceProductConfig.js'
+export default {
+  components: {
+    TemplatePage
+  },
+  mixins: [operation_mixin],
+  data() {
+    return {
+      // 表单弹窗
+      formBool: false,
+      formData: {},
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      recordSelected: []
+    }
+  },
+  computed: {
+    moreParameters() {
+      return []
+    },
+    // 用户信息
+    userInfo() {
+      return JSON.parse(localStorage.getItem('greemall_user'))
+    },
+    // 事件组合
+    optionsEvensGroup() {
+      return [
+        [
+          [
+            this.optionsEvensAuth('add', {
+              click: () => {
+                this.formBool = true
+              }
+            })
+          ]
+        ]
+      ]
+    }
+  },
+
+  methods: {
+    // 列表请求函数
+    getList: serviceProductList,
+
+    // 列表导出函数
+    // exportList: ,
+
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+
+    operation() {
+      return this.operationBtn({
+        edit: {
+          click: ({ row, index, column }) => {}
+        }
+      })
+    },
+
+    handleClose(cb) {
+      this.formBool = false
+      this.$refs?.pageRef?.refreshList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>