wwk / Antis_BlindBox_Service

<template>
  <el-dialog :title="!dataForm.id ? '新建菜单' : '编辑菜单'" :close-on-click-modal="false"
    :close-on-press-escape="false" :visible.sync="visible" lock-scroll
    class="NCC-dialog NCC-dialog_center" width="600px">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px"
      v-loading="formLoading" :element-loading-text="$t('common.loadingText')" class="menuForm">
      <el-form-item label="分类" prop="category">
        <el-input v-model="dataForm.category" disabled />
      </el-form-item>
      <el-form-item label="上级" prop="parentId">
        <NCC-TreeSelect v-model="dataForm.parentId" :options="treeData" placeholder="选择上级菜单"
          @change="onChange" />
      </el-form-item>
      <el-form-item label="名称" prop="fullName">
        <el-input v-model="dataForm.fullName" placeholder="输入名称" />
      </el-form-item>
      <el-form-item label="编码" prop="enCode">
        <el-input v-model="dataForm.enCode" placeholder="输入编码" />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-row type="flex">
          <div style="flex:1;margin-right:10px">
            <el-input v-model="dataForm.icon" placeholder="请选择图标" readonly
              :suffix-icon="dataForm.icon">
              <el-button slot="append" @click="openIconBox">选择</el-button>
            </el-input>
          </div>
          <el-color-picker v-model="dataForm.propertyJson.iconBackgroundColor"
            :predefine="['#188ae2', '#35b8e0', '#26bf8c','#f9c851','#ff5b5b', '#5b69bc', '#ff8acc', '#3b3e47','#282828' ]" />
        </el-row>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="dataForm.type" placeholder="请选择类型" @change="changeMenuType">
          <el-option v-for="item in typeData" :key="item.enCode" :label="item.fullName"
            :value="item.enCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.type == 2 || dataForm.type == 7" label="地址" prop="urlAddress">
        <el-input v-model="dataForm.urlAddress" placeholder="填写地址">
          <template slot="prepend"
            v-if="dataForm.category ==='Web' && dataForm.type == 2">@/views/</template>
          <el-select slot="append" v-model="dataForm.linkTarget" style="width: 90px;"
            v-if="dataForm.category ==='Web' && dataForm.type == 7">
            <el-option label="_self" value="_self" />
            <el-option label="_blank" value="_blank" />
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item v-if="[3,4,5,6,8].indexOf(dataForm.type)>-1" label="关联"
        prop="propertyJson.moduleId">
        <NCC-TreeSelect v-model="dataForm.propertyJson.moduleId" :options="tempData"
          placeholder="请选择" lastLevel @change="handleSelectModule" />
      </el-form-item>
      <el-form-item label="排序" prop="sortCode">
        <el-input-number :min="0" :max="9999" v-model="dataForm.sortCode"
          controls-position="right" />
      </el-form-item>
      <el-form-item label="状态" prop="enabledMark">
        <el-switch v-model="dataForm.enabledMark" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="说明" prop="bodyText">
        <el-input v-model="dataForm.description" type="textarea" :rows="4" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
        {{$t('common.confirmButton')}}</el-button>
    </span>
    <icon-box :visible.sync="iconBoxVisible" ref="iconBox" :current="dataForm.icon"
      @choiceIcon="choiceIcon" />
  </el-dialog>
</template>

<script>
import { getMenuSelector, createMenu, updateMenu, getMenuInfo } from '@/api/system/menu'
import { getFeatureSelector } from '@/api/onlineDev/visualDev'
import { getDictionaryType } from '@/api/systemData/dictionary'
import { getDataReportSelector } from '@/api/onlineDev/dataReport'
import { getDataVSelector } from '@/api/onlineDev/dataV'
import { getPortalSelector } from '@/api/onlineDev/portal'
import iconBox from '@/components/NCC-iconBox'
const appTypeData = [{
  enCode: 1,
  fullName: "目录"
}, {
  enCode: 2,
  fullName: "页面"
}, {
  enCode: 3,
  fullName: "功能"
}, {
  enCode: 7,
  fullName: "外链"
}]
const typeData = [
  {
    enCode: 1,
    fullName: "目录"
  }, {
    enCode: 2,
    fullName: "页面"
  }, {
    enCode: 3,
    fullName: "功能"
  }, {
    enCode: 4,
    fullName: "字典"
  }, {
    enCode: 5,
    fullName: "报表"
  }, {
    enCode: 6,
    fullName: "大屏"
  }, {
    enCode: 7,
    fullName: "外链"
  }, {
    enCode: 8,
    fullName: "门户"
  }]

export default {
  components: { iconBox },
  data() {
    return {
      visible: false,
      formLoading: false,
      btnLoading: false,
      treeData: [],
      typeData: [],
      featureWebData: [],
      featureAppData: [],
      dictionaryData: [],
      reportData: [],
      screenData: [],
      portalData: [],
      tempData: [],
      labelName: '',
      related: false,
      oldUrlAddress: '',
      dataForm: {
        id: '',
        parentId: '',
        fullName: '',
        enCode: '',
        sortCode: 0,
        icon: '',
        type: null,
        urlAddress: '',
        category: 'Web',
        linkTarget: '_self',
        isButtonAuthorize: 0,
        isColumnAuthorize: 0,
        isFormAuthorize: 0,
        isDataAuthorize: 0,
        enabledMark: 1,
        description: '',
        propertyJson: {
          moduleId: '',
          iconBackgroundColor: '',
          isTree: 0
        }
      },
      iconBoxVisible: false,
      dataRule: {
        parentId: [
          { required: true, message: '上级菜单不能为空', trigger: 'input' }
        ],
        fullName: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' },
          { max: 50, message: '菜单名称最多为50个字符！', trigger: 'blur' }
        ],
        enCode: [
          { required: true, message: '菜单编码不能为空', trigger: 'blur' },
          { max: 50, message: '菜单编码最多为50个字符！', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '菜单图标不能为空', trigger: 'click' }
        ],
        type: [
          { required: true, message: '请选择菜单类型', trigger: 'change' }
        ],
        category: [
          { required: true, message: '请选择菜单分类', trigger: 'input' }
        ],
        urlAddress: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ],
        'propertyJson.moduleId': [
          { required: true, message: '关联不能为空', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    init(id, category) {
      Object.assign(this.$data, this.$options.data())
      this.dataForm.id = id || ''
      this.related = false
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.dataForm.category = category
        // 获取上级菜单
        getMenuSelector({ category }, id || 0).then(res => {
          let topItem = {
            fullName: "顶级节点",
            hasChildren: true,
            id: "-1",
            children: res.data.list
          }
          this.treeData = [topItem]
        })

        // 获取菜单类型
        this.typeData = this.dataForm.category === 'App' ? appTypeData : typeData

        // 获取表单数据
        if (this.dataForm.id) {
          this.formLoading = true
          getMenuInfo(this.dataForm.id).then(res => {
            this.dataForm = res.data
            const propertyJson = res.data.propertyJson ? JSON.parse(res.data.propertyJson) : null
            this.dataForm.propertyJson = propertyJson || { moduleId: '', iconBackgroundColor: '' }
            const menuType = this.dataForm.type
            this.oldUrlAddress = res.data.urlAddress
            this.switchType(menuType)
            this.$nextTick(() => { this.formLoading = false })
          }).catch(() => { })
        }

      })
    },
    // 功能列表
    fetchFeatureList() {
      if (!this.featureWebData.length) {
        getFeatureSelector({ type: this.dataForm.category === 'Web' ? 1 : 2 }).then(res => {
          this.featureWebData = res.data.list
          this.tempData = this.featureWebData
        })
        return
      }
      this.tempData = this.featureWebData
    },
    // 字典类型
    fetchDictionaryType() {
      if (!this.dictionaryData.length) {
        getDictionaryType().then(res => {
          this.dictionaryData = res.data.list
          this.tempData = this.dictionaryData
        })
        return
      }
      this.tempData = this.dictionaryData
    },
    // 报表列表
    fetchDataReportList() {
      if (!this.reportData.length) {
        this.$store.dispatch('base/getDictionaryData', { sort: 'ReportSort' }).then(t => {
          const ReportSortTypeList = JSON.parse(JSON.stringify(t))

          getDataReportSelector().then(res => {
            let reportData = res.data.list
            this.reportData = ReportSortTypeList
            this.$nextTick(() => {
              for (let i = 0; i < this.reportData.length; i++) {
                let child = reportData.filter(o => this.reportData[i].id === o.categoryId)
                this.$set(this.reportData[i], 'children', child)
              }
              this.reportData = this.reportData.filter(o => o.children.length)
              this.tempData = this.reportData
            })
          })
        })
        return
      }
      this.tempData = this.reportData
    },
    // 大屏列表
    fetchDataVList() {
      if (!this.screenData.length) {
        getDataVSelector().then(res => {
          this.screenData = res.data.list
          this.tempData = this.screenData
        })
        return
      }
      this.tempData = this.screenData
    },
    // 门户列表
    fetchPortalList() {
      if (!this.portalData.length) {
        getPortalSelector().then(res => {
          this.portalData = res.data.list
          this.tempData = this.portalData
        })
        return
      }
      this.tempData = this.portalData
    },
    switchType(val) {
      switch (val) {
        case 3:
          this.fetchFeatureList()
          break
        case 4:
          this.fetchDictionaryType()
          break
        case 5:
          this.fetchDataReportList()
          break
        case 6:
          this.fetchDataVList()
          break
        case 8:
          this.fetchPortalList()
          break
      }
    },
    onChange(val) {
      if (this.dataForm.category !== 'App') return
      if (val === '-1') {
        this.typeData = appTypeData.filter(o => o.enCode == 1)
        if (this.dataForm.type != 1) this.dataForm.type = ''
      } else {
        this.typeData = appTypeData.filter(o => o.enCode != 1)
        if (this.dataForm.type == 1) this.dataForm.type = ''
      }
    },
    // 切换类型
    changeMenuType(val) {
      // 重置关联下拉框的值及链接处理
      this.dataForm.propertyJson.moduleId = ''
      const menuId = this.dataForm.id
      if (menuId) this.dataForm.urlAddress = ''
      if (this.dataForm.category === 'Web' && [2, 3, 4].includes(val)) {
        this.dataForm.isButtonAuthorize = 1
        this.dataForm.isColumnAuthorize = 1
        this.dataForm.isFormAuthorize = 1
        this.dataForm.isDataAuthorize = 1
      } else {
        this.dataForm.isButtonAuthorize = 0
        this.dataForm.isColumnAuthorize = 0
        this.dataForm.isFormAuthorize = 0
        this.dataForm.isDataAuthorize = 0
      }
      if (val == 6) {
        this.dataForm.linkTarget = '_blank'
      } else {
        this.dataForm.linkTarget = '_self'
      }
      this.switchType(this.dataForm.type)
    },
    // 树转数组
    treeToArray(list, newArr = []) {
      list.forEach((item) => {
        const { children } = item
        if (children) {
          // delete item.children
          if (children.length) {
            newArr.push(item)
            return this.treeToArray(children, newArr)
          }
        }
        newArr.push(item)
      });
      return newArr
    },
    handleSelectModule(val) {
      if (this.dataForm.type == 4) {
        const item = this.treeToArray(this.dictionaryData).filter(o => o.id === val)
        this.dataForm.propertyJson.isTree = item[0].isTree
      }
    },
    dataFormSubmit() {

      this.$refs['dataForm'].validate((valid) => {
        const menuEnCode = (this.dataForm.enCode).replace('.', '')
        const moduleId = this.dataForm.propertyJson.moduleId

        if (this.dataForm.category === 'Web') {
          switch (this.dataForm.type) {
            case 3: // 功能
              this.dataForm.urlAddress = `model/${menuEnCode}`
              break
            case 4: // 字典
              this.dataForm.urlAddress = `dictionary/${menuEnCode}`
              break
            case 5: // 报表
              this.dataForm.urlAddress = `dataReport/${menuEnCode}`
              break
            case 6: // 大屏
              this.dataForm.urlAddress = `dataScreen/${menuEnCode}`
              break
            case 8: // 门户
              this.dataForm.urlAddress = `portal/${menuEnCode}`
              break
          }
        } else {
          if (this.dataForm.type == 3) {
            this.dataForm.urlAddress = `/pages/apply/dynamicModel/index?id=${moduleId}`
          }
        }
        if (valid) {
          this.btnLoading = true
          const formMethod = this.dataForm.id ? updateMenu : createMenu
          const query = {
            ...this.dataForm,
            propertyJson: JSON.stringify(this.dataForm.propertyJson)
          }
          formMethod(query).then(res => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refreshDataList')
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        }
      })
    },
    openIconBox() {
      this.iconBoxVisible = true
    },
    choiceIcon(value) {
      this.dataForm.icon = value
    }
  }
}
</script>