middleground_code_v2/src/views/systemMaintenance/buttonManagement/index.vue

<template>
  <div>
    <div flex style="height: 100%;">
      <base-layout title="菜单树" style="width:260px;" :bottonShow="false" :isPage="false" :mainColor="mainColor"
                   ref="treeLayout" :operateButtonSwitch="false"
      >
        <div slot="main">
          <base-tree ref="baseTree" @handleNodeClick="handleNodeClick" :menuData="menuData"></base-tree>
        </div>
      </base-layout>
      <div style="flex:1;">
        <!-- <div style="">
          <p>标准按钮</p>
          <div flex-wrap="cross:centet;height: 100px;overflow: auto;">
            <el-button v-for="(item,index) in standardList" :type="item.type?item.type:'primary'"
              size="small" style="margin-left: 5px;margin-bottom: 10px;" @click="funNewClick(item)"
              :key="index">
              {{item.menuName}}
            </el-button>
          </div>
        </div> -->
        <base-layout title="按钮权限" ref="buttonLayout" :isPage="true" @onFuncBtn="getFuncBtn"
                     @pageChange="pageChange"
        >
          <div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
            <base-table ref="customtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
                        :tableHeight="tableHeight" :tableData="tableData" @radioChange="radioChange" :slotrow="true"
                        :tableColumn="tableColumn"
            >
            </base-table>
          </div>
        </base-layout>
      </div>
    </div>

    <!-- 按钮权限弹窗 -->
    <base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingsDialog"
                 class="userDialog" title="按钮权限" width="700px" top="10vh"
    >
      <base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" :formdata="formdata" @onSubmit="getSubmit">
      </base-form>
    </base-dialog>
  </div>
</template>

<script>
import baseTable from '@/components/base/baseTable'
import baseLayout from '@/components/base/baseNewLayout'
import baseDialog from '@/components/base/BaseNewDialog/index.vue'
import baseTree from '@/components/base/BaseMenuTree/index.vue'
import baseForm from '@/components/base/baseNewForm/index.vue'
import configData from './configData'
import {
  GetMenuTree
} from '@/api/apis/menuManage'
import {
  buttonGetMenBillList,
  buttonGetBillList,
  buttonSaveData,
  buttonDelData, buttonGetBillData
} from '@/api/apis/buttonList'
import { authApi } from '@/api/apis/auth'

export default {
  name: 'review',
  components: {
    baseLayout,
    baseTable,
    baseDialog,
    baseTree,
    baseForm
  },
  data() {
    return {
      radioIndex: false,
      radioID: false,
      mainColor: '#f8f8f8',
      tabLoading: false,
      standardList: [{
        icon: 'el-icon-search',
        menuName: '新增'
      }],
      tableData: [],
      settingsDialog: false,
      settingCenter: 'left',
      isFunBtn: true,
      formRow: configData.formRow,
      // buttonList: [{
      // 		'menuName': '新增',
      // 		icon: 'el-icon-plus'
      // 	},
      // 	{
      // 		'menuName': '编辑',
      // 		icon: 'el-icon-edit'
      // 	},
      // 	{
      // 		'menuName': '删除',
      // 		icon: 'el-icon-delete',
      // 		type: 'danger'
      // 	},
      // ],
      btnEvenName: '',
      menuData: [],
      formdata: {},
      pageModel: {
        pageSize: 100,
        menuId: '',
        pageNum: 1
      },
      radioRow: {},//当前选中行
      clickTreeRow: {}//当前选中树
    }
  },
  computed: {
    // 表头配置
    tableColumn() {
      return configData.tableColumnJson
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      this.getMenuData()
      this.getTableData()
    },
    async getMenuData() {
      let res = await authApi('sysMenuConfigService', '', 'queryEntityTree', '', { state: 0 })
      if (res.status == 200) {
        let arr = res.attribute[0]
        this.menuData = res.attribute
      }
    },
    // 树状图点击事件
    handleNodeClick(data) {
      this.clickTreeRow = data
      this.pageModel.menuId = data.id
      this.pageModel.pageNum = 1
      this.RefreshTable()
    },
    // 刷新table
    RefreshTable() {
      this.radioID = false
      this.radioIndex = false
      this.$nextTick(() => {
        this.$refs.buttonLayout.pageClear()
        this.$refs.customtable.clearRadioIndex()
      })
      this.getTableData()
    },
    pageChange(model) {
      this.pageModel.pageNum = model.page
      this.pageModel.pageSize = model.limit
      this.getTableData()
    },
    // 单选
    radioChange(val) {
      this.radioIndex = val.index
      this.radioID = val.id
      this.radioRow = val
    },
    async getTableData() {
      this.tabLoading = true
      let params = {
        ...this.pageModel
      }
      this.tabLoading = true
      this.tableData = []
      const res = await authApi('sysButtonConfigService', '', 'queryEntityPage', '', params)
      if (res.status == 200) {
        this.tableData = res.attribute.list
        this.$nextTick(() => {
          this.$refs.buttonLayout.setPageTotal(res.attribute.total)
        })
        this.tabLoading = false
      }
    },
    //详情
    async buttonGetBillData(id) {
      const res = await authApi('sysButtonConfigService', '', 'getEntity', '', { id })
      if (res.status == 200) {
        this.$nextTick(() => {
          this.$refs.customForm.choiceAssignment(res.attribute)
        })
      }
      this.tabLoading = false
    }
    ,
    btnadd() {
      console.log('添加')
    }
    ,
    test() {
      console.log('测试')
    }
    ,

    // 按钮点击事件
    getFuncBtn(btnEven) {
      this.btnEvenName = btnEven.menuName
      // let ftnFunction = 'test'
      // this[ftnFunction]()
      if (btnEven.menuName == '新增') {
        if (!this.pageModel.menuId) {
          this.$vmNews('请选择菜单')
          return
        }
        // this.$refs.customForm.resetForm()
        this.settingsDialog = true
        this.$nextTick(() => {
          this.$refs.customForm.choiceAssignment({})
        })

      }
      if (btnEven.menuName == '编辑') {
        if (this.radioID === false) {
          this.$vmNews('请选择一条数据')
          return
        }
        this.settingsDialog = true
        this.buttonGetBillData(this.radioID)
      }
      if (btnEven.menuName == '删除') {
        if (this.radioID === false) {
          this.$vmNews('请选择一条数据')
          return
        }
        if(this.clickTreeRow.formId){
          this.$vmNews("系统自动生成的按钮无法删除")
          return
        }
        this.$confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let params = {
            id: this.radioID
          }
          const res = await authApi('sysButtonConfigService', '', 'deleteEntity', '', params)

          if (res.status == 200) {
            this.$vmNews('删除成功', 'success')
            this.pageModel.pageNum = 1
            this.RefreshTable()
          }
        }).catch(() => {
        })

      }

    }
    ,

    //表单提交
    async getSubmit(data) {
      let params = {
        ...data
      }
      let res
      if (this.btnEvenName == '编辑') {
        delete params.createTime
        delete params.index
        res = await authApi('sysButtonConfigService', '', 'updateEntity', '', params)
      } else {
        params.menuId = this.pageModel.menuId
        res = await authApi('sysButtonConfigService', '', 'saveEntity', '', params)
      }

      if (res.status == 200) {
        this.$vmNews('保存成功', 'success')
        this.pageModel.pageNum = 1
        this.RefreshTable()
        this.settingsDialog = false
      }
    }
    ,
    funNewClick(item) {
      // this.$emit('onFuncBtn', item);
    }
  }

}
</script>

<style></style>