zfire-newmall-admin/src/views/setting/miniMenus/index.vue

<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>