lims/src/dashoo.cn/frontend_web/src/pages/system/module.vue

<template>
<div>
    <el-card class="box-card" style="height: calc(100vh - 92px);">
      <div slot="header" style="height: 20px;">
        <span style="float: left;">
          <i class="icon icon-table2"></i>
        </span>
        <el-breadcrumb class="heading" style="float: left; margin-left: 5px">
          <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/system/module' }">菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <span style="float: right;">
          <el-button size="mini" type="primary" style="margin-left:10px; margin-top: -4px;" @click="opendatadialog(1,null,-1);resetForm('moduleform')">新增菜单</el-button>
        </span>
        <el-form ref="form" :inline="true" style="float: right; margin-top: -10px">
          <el-form-item label="菜单名称">
            <el-input size="mini" style="width: 165px;" v-model="keyword" placeholder="请输入菜单名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-dropdown split-button type="primary" size="mini" @click="seachdata" @command="searchCommand">
              查询
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="search">高级查询</el-dropdown-item> -->
                <el-dropdown-item command="clear">查询重置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-tree highlight-current="true" :expand-on-click-node="true" node-key="id" :data="moduletreelist" :props="orgtreeprops" :default-expanded-keys="userdepartment"
            @node-click="orgtreeNodeClick" ref="orgmanagetree">
          </el-tree>
        </el-col>
        <el-col :span="18">
          <el-table :data="tablelist" border>
            <el-table-column label="操作" width="70" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.Parentid !== 0">
                  <el-button size="small" type="text" @click="opendatadialog(2,scope.row,scope.$index);resetForm('moduleform')" icon="el-icon-edit"
                    title="编辑"></el-button>
                  <el-button size="small" type="text" @click="deletedata(scope.row)" icon="el-icon-delete" title="删除" style="margin-left: 3px"></el-button>
                  <!--暂时隐藏-->
                  <el-button v-if="1==2" size="small" type="success" @click="permission(scope.row)">权限</el-button>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="Fullname" align="center" label="菜单名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="Parentname" align="center" label="上级菜单" show-overflow-tooltip></el-table-column>
            <el-table-column prop="NavigateUrl" align="center" label="菜单地址" show-overflow-tooltip></el-table-column>
            <el-table-column prop="ImageIndex" align="center" label="菜单图标" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--分页-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 15, 20, 25]"
        :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="currentItemCount">
      </el-pagination>
    </el-card>
    <!--新增、编辑组织信息-->
    <el-dialog :title="dialogtitle" :visible.sync="datadialogVisible" top="5vh">
      <el-form :model="moduleform" :rules="rulesorganize" ref="moduleform">
        <el-form-item label="上级菜单" label-width="120px" required>
          <el-cascader :options="moduletreelist" :props="orgtreeprops" change-on-select :show-all-levels="false" v-model="selectedorg"
            placeholder="请选择菜单"></el-cascader>
        </el-form-item>
        <el-form-item label="菜单名称" prop="fullname" label-width="120px">
          <el-input v-model="moduleform.fullname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单地址" prop="NavigateUrl" label-width="120px">
          <el-input v-model="moduleform.NavigateUrl" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="ImageIndex" label-width="120px">
          <el-input v-model="moduleform.ImageIndex" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="datadialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savedata('moduleform')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="permissiondialogtitle" :visible.sync="permissiondatadialogVisible" top="5vh">
      <el-form ref="alertform">
        <el-form-item>
          <div style="margin-left:1px;border:1px #CCCCCC solid;overflow:auto;height:300px;">
            <el-checkbox-group v-model="binddevices">
              <el-checkbox v-for="item in devices" :label="item.Id" :key="item.Id" style="margin-left:15px;">{{item.Code}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" style="margin-left:15px;">全选</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top:-35px;">
        <el-button @click="permissiondatadialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savepermission()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'organize',

    data() {
      return {
        downloading: true,
        selectedNode: 0,
        currentItemCount: 0,
        currentPage: 1,
        size: 10,
        tablelist: [], // 处理分页用
        keyword: '',
        parentid: '',
        datadialogVisible: false,
        dialogtitle: '',
        moduleform: {
          parentid: 0,
          fullname: '',
          description: '',
          NavigateUrl:'',
          ImageIndex:'',
          id: 0
        },
        rulesorganize: {
          fullname: [{
            required: true,
            message: '请输入菜单名称',
            trigger: 'blur'
          }]
        },
        operatingitem: 0,
        permissiondialogtitle: '',
        permissiondatadialogVisible: false,
        binddevices: [],
        devices: [],
        devicesallid: [],
        isIndeterminate: true,
        checkAll: false,
        update: true,
        childArr: [],
        parentArr: [],
        // 级联选项
        options: [],
        currentOrgan: '请选择菜单',
        havechild: false,
        // 数据传输
        currId: 0,
        currOrganName: '',
        moduletreelist: [],
        orgtreeprops: {
          value: 'id',
          label: 'Fullname',
          children: 'children'
        },
        selectedorg: [],
        userdepartment: []
      }
    },

    created() {
      // initial data
      this.initData()
      this.getmoduletreelist()
    },
    updated() {},
    watch: {},
    computed: mapGetters({
      authUser: 'authUser'
    }),
    methods: {
      initData() {
        let _this = this
        // paginate
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          keyword: this.keyword,
          parentid: this.parentid,
        }
        // request
        this.$axios.get('/module/listbandparentname', {
            params
          })
          .then(res => {
            console.log("======res.data.items1=====",res.data.items)
            // response
            _this.tablelist = res.data.items
            _this.currentItemCount = res.data.currentItemCount
            _this.downloading = false
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      getmoduletreelist() {
        let _this = this
        // request
        _this.$axios.get('/module/list', {
          })
          .then(res => {
            console.log("======res.data.items2=====",res.data.items)
            _this.moduletreelist = window.toolfun_gettreejson(res.data.items, 'Id', 'Parentid', 'Id,Fullname')
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      orgtreeNodeClick(data) {
        this.parentid = data.id + ''
        this.currentPage = 1
        this.initData()
      },
      seachdata() {
        this.currentPage = 1
        this.initData()
      },
      permission(v) {
        this.binddevices = []
        this.permissiondialogtitle = '权限设置'
        this.permissiondatadialogVisible = true
        this.currId = v.Id
        this.currOrganName = v.Fullname
        this.$axios.get('/equipment/bindequipment/' + this.currId, null)
          .then(res => {
            // response
            for (var i = 0; i < res.data.items.length; i++) {
              this.binddevices.push(res.data.items[i].Id)
            }
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      savepermission() {
        let _this = this
        _this.$axios.put('/equipment/permission/' + this.currId, {
            EquipmentIds: this.binddevices + '',
            OrganizeName: this.currOrganName
          })
          .then(res => {
            // response
            if (res.data.code === 0) {
              _this.$message({
                type: 'success',
                message: res.data.message
              })
              _this.permissiondatadialogVisible = false
            } else {
              _this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
          .catch(() => {})
      },
      handleSizeChange(value) {
        this.size = value
        this.currentPage = 1
        this.initData()
      },
      handleCurrentChange(value) {
        this.currentPage = value
        this.initData()
      },
      jstimehandle(val) {
        val = val.replace('T', ' ')
        return val.substring(0, 19)
      },
      opendatadialog(item, v, index) {
        this.operatingitem = item
        this.datadialogVisible = true
        this.clearorganizeform()
        let _this = this
        if (item === 1) {
          _this.dialogtitle = `新增菜单`
          if (this.parentid !== '') {
            this.$axios.get('/module/parentlist/' + this.parentid, {})
              .then(res => {
                if (res.data.code === 0) {
                  // 选中状态
                  _this.selectedorg = []
                  let pidarr = res.data.message.split(',')
                  for (var i = pidarr.length - 1; i >= 0; i--) {
                    if (pidarr[i] !== '0') {
                      _this.selectedorg.push(parseInt(pidarr[i]))
                    }
                  }
                } else {
                  _this.$message({
                    type: 'warning',
                    message: '出现错误！'
                  })
                  this.datadialogVisible = false
                }
              })
              .catch(err => {
                // handle error
                console.error(err)
              })
          }
        } else if (item === 2) {
          this.$axios.get('/module/parentlist/' + v.Parentid, {})
            .then(res => {
              if (res.data.code === 0) {
                _this.dialogtitle = `编辑菜单信息（${v.Fullname}）`
                _this.moduleform.parentid = v.Parentid
                _this.moduleform.fullname = v.Fullname
                _this.moduleform.description = v.Description
                _this.moduleform.id = v.Id
                _this.moduleform.NavigateUrl = v.NavigateUrl
                _this.moduleform.ImageIndex =v.ImageIndex
                _this.selectedorg.push(parseInt(v.Parentid))
              } else {
                _this.$message({
                  type: 'warning',
                  message: '出现错误！'
                })
                this.datadialogVisible = false
              }
            })
            .catch(err => {
              // handle error
              console.error(err)
            })
        }
      },
      savedata(formName) {
        let _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.moduleform.parentid = parseInt(_this.selectedorg[_this.selectedorg.length - 1])
            if (_this.moduleform.parentid === 0) {
              _this.$message({
                type: 'warning',
                message: '请选择上一级组织！'
              })
              return
            }
            if (_this.moduleform.parentid === _this.moduleform.id) {
              _this.$message({
                type: 'warning',
                message: '上一级组织不能为自身数据！'
              })
              return
            }
            if (_this.operatingitem === 1) {
              _this.$axios.post('module/', _this.moduleform)
                .then(res => {
                  // response
                  if (res.data.code === 0) {
                    _this.$message({
                      type: 'success',
                      message: res.data.message
                    })
                    _this.datadialogVisible = false
                    this.initData()
                    // 重新加载tree数据
                    _this.getmoduletreelist()
                  } else {
                    _this.$message({
                      type: 'warning',
                      message: res.data.message
                    })
                  }
                })
                .catch(err => {
                  // handle error
                  console.error(err)
                })
            } else if (_this.operatingitem === 2) {
              _this.$axios.put('module/' + _this.moduleform.id, _this.moduleform)
                .then(res => {
                  // response
                  if (res.data.code === 0) {
                    _this.$message({
                      type: 'success',
                      message: res.data.message
                    })
                    _this.datadialogVisible = false
                    // 更新界面
                    _this.initData()
                    // 重新加载tree数据
                    _this.getmoduletreelist()
                  } else {
                    _this.$message({
                      type: 'warning',
                      message: res.data.message
                    })
                  }
                })
                .catch(() => {})
            }
          } else {
            return false
          }
        })
      },
      deletedata(val) {
        let _this = this
        _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$axios.delete('module/' + val.Id, null)
            .then(res => {
              // response
              if (res.data.code === 0) {
                _this.$message({
                  type: 'success',
                  message: res.data.message
                })
                // 更新界面
                _this.initData()
                // 重新加载tree数据
                _this.getmoduletreelist()
              } else {
                _this.$message({
                  type: 'warning',
                  message: res.data.message
                })
              }
            })
            .catch(() => {})
        }).catch(() => {})
      },
      resetForm(formName) {
        //this.$refs[formName].resetFields()
      },
      clearorganizeform() {
        this.moduleform = {
          parentid: 0,
          fullname: '',
          description: '',
          NavigateUrl:'',
          ImageIndex:'',
          id: 0
        }
      },
      searchCommand(command) {
        if (command == 'clear') {
          this.clearSearch()
        }
      },
      clearSearch() {
        this.keyword = ''
        this.initData()
      }
    }
  }

</script>

<style lang="scss">
  .el-pagination {
    margin: 1rem 0 2rem;
    text-align: right;
  }

  .triggerone {
    font-size: 13px;
    margin-left: 80px;
  }

  .plab {
    font-size: 13px;
    color: #999;
  }

</style>