demo/demo-web-ui/src/views/functional/functional.vue

<template>
  <div>
    <el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="功能列表" name="roleList">

        <div class="container">
         <!-- <div class="tab-header">
            <el-form ref="form" :inline="true" :model="search" label-width="80px">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="功能名称">
                    <el-input v-model="search.name" clearable></el-input>
                  </el-form-item>
                  <el-button @click="getList">查询</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>-->
          <!-- table -->
          <el-table :data="roleTable" border style="width: 100%;"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                    row-key="sid"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
          >
            <el-table-column prop="name" label="功能名称" width="200px" align="left"></el-table-column>
            <el-table-column label="操作" width="280px" align="center">
              <template slot-scope="scope">
                <el-button @click="addChildren(scope.row)" type="primary" size="mini"> 添加子功能</el-button>
                <el-button @click="editRow(scope.row)" v-if="scope.row.isSource == '0'" type="primary" size="mini"> 修改
                </el-button>
                <el-button @click="delRow(scope.row)" v-if="scope.row.isSource == '0'" type="danger" size="mini"> 删除
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="actionUrl" label="url地址" width="200" align="center"></el-table-column>
            <el-table-column prop="isEnable" label="是否可用" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isEnable"
                  active-value='1'
                  inactive-value='0'
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="enabledChange($event,scope.row)">
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
          <!--<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />-->

          <!-- 编辑功能信息 -->
          <el-dialog :title="dialogTitle + '功能信息'" :visible.sync="editDialog" width="40%">
            <table class="e-table" cellspacing="0">
              <tr>
                <td>上级功能</td>
                <td>
                  <el-input v-model="roleForm.parentName" :disabled="true" style="width:300px"></el-input>
                </td>
              </tr>
              <tr>
                <td>终端权限</td>
                <td>
                  <el-radio-group v-model="roleForm.phoneFunction">
                    <el-radio label="0">pc端</el-radio>
                    <el-radio label="1">移动端</el-radio>
                  </el-radio-group>
                </td>
              </tr>
              <tr v-show="roleForm.phoneFunction == '0'">
                <td>pc端功能ID</td>
                <td>
                  <el-input clearable style="width:300px" v-model="roleForm.cId"></el-input>
                </td>
              </tr>
              <tr v-show="roleForm.phoneFunction == '1'">
                <td>移动端功能ID</td>
                <td>
                  <el-input clearable style="width:300px" v-model="roleForm.funId"></el-input>
                </td>
              </tr>
              <tr>
                <td>模块名称</td>
                <td>
                  <el-select v-model="roleForm.sourceSid" style="width:300px" @change="changeSource">
                    <el-option v-for="item in sourceNameData" :key="item.sid" :label="item.sourceName" :value="item.sid"></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>url地址</td>
                <td>
                  <el-select v-model="roleForm.actionUrl" filterable style="width:300px">
                    <el-option v-for="item in actionUrl_list" :key="item.sid" :label="item.name" :value="item.url"></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>功能名称</td>
                <td>
                  <el-input v-model="roleForm.name" style="width:300px"></el-input>
                </td>
              </tr>
              <tr>
                <td>说明</td>
                <td>
                  <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
                </td>
              </tr>
            </table>
            <div style="margin-top: 20px; text-align: center;">
              <el-button type="primary" @click="save()">保 存</el-button>
              <el-button @click="editDialog = false">关 闭</el-button>
            </div>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新增功能" name="addrole">
        <el-card class="box-card">
          <table class="e-table" cellspacing="0">
            <tr>
              <td>上级功能</td>
              <td>
                <el-input v-model="roleForm.parentName" :disabled="true" style="width:300px"></el-input>
              </td>
            </tr>
            <tr>
              <td>终端权限</td>
              <td>
                <el-radio-group v-model="roleForm.phoneFunction">
                  <el-radio label="0">pc端</el-radio>
                  <el-radio label="1">移动端</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr v-show="roleForm.phoneFunction == '0'">
              <td>pc端功能ID</td>
              <td>
                <el-input clearable style="width:300px" v-model="roleForm.cId"></el-input>
              </td>
            </tr>
            <tr v-show="roleForm.phoneFunction == '1'">
              <td>移动端功能ID</td>
              <td>
                <el-input clearable style="width:300px" v-model="roleForm.funId"></el-input>
              </td>
            </tr>
            <tr>
              <td>模块名称</td>
              <td>
                <el-select v-model="roleForm.sourceSid" style="width:300px" @change="changeSource">
                  <el-option v-for="item in sourceNameData" :key="item.sid" :label="item.sourceName" :value="item.sid"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>url地址</td>
              <td>
                <el-select v-model="roleForm.actionUrl" filterable style="width:300px">
                  <el-option v-for="item in actionUrl_list" :key="item.sid" :label="item.name" :value="item.url"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>功能名称</td>
              <td>
                <el-input v-model="roleForm.name" style="width:300px"></el-input>
              </td>
            </tr>
            <tr>
              <td>说明</td>
              <td>
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
              </td>
            </tr>
          </table>
          <div style="margin-top: 20px; text-align: center;">
            <el-button type="primary" @click="save()">保 存</el-button>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { pageList, savePost, sourceList, delOrgroles, getSingleData, putOrgroles, IsEnable, getMenusForFunction } from '@/api/system/functional/functional.js'

export default {
  data() {
    return {
      dialogTitle: '',
      activeName: 'roleList',
      roleForm: {
        sid: '',
        parentName: '顶级菜单',
        parentSid: '0',
        name: '',
        actionUrl: '',
        sourceSid: '',
        phoneFunction: '',
        remarks: '',
        cId: '',
        funId: ''
      },
//      模块名称
      sourceNameData: [],
      actionUrl_list: [],
      formBackup: {},
      search: {
        name: ''
      },
      roleTable: [],
      editDialog: false,
      // 树形
      loading: false
    }
  },
  mounted() {
    this.formBackup = Object.assign({}, this.roleForm)
    this.getList()
    this.getsourceList()
  },
  methods: {
    // 分页列表
    getList() {
      pageList({ name: this.search.name }).then((res) => {
        if (res.success) {
          this.roleTable = res.data
        }
        console.log(res.data)
      })
    },
    // 模块名称
    getsourceList() {
      sourceList({}).then((res) => {
        if (res.success) {
          this.sourceNameData = res.data
          this.loading = false
        }
      })
    },
    handleClick(tab, event) {
      if (tab.name == 'addrole') {
        this.dialogTitle = '新增'
        this.roleForm = Object.assign({}, this.formBackup)
      } else {
        this.getList()
      }
    },
    editRow(row) {
      this.dialogTitle = '编辑'
      this.editDialog = true
      this.roleForm = Object.assign({}, row)
      console.log(this.roleForm)
      getSingleData({ id: row.sid }).then((res) => {
        if (res.success) {
          this.roleForm = res.data
        }
      })
      getMenusForFunction({ sourceSid: this.roleForm.sourceSid }).then((resp) => {
        if (resp.success) {
          this.actionUrl_list = resp.data
        }
      })
    },
    addChildren(row) {
      this.refersh()
      this.activeName = 'addrole'
      this.roleForm.parentName = row.name
      this.roleForm.parentSid = row.sid
      if (row.isSource == '1') {
        this.roleForm.parentName = '顶级菜单'
        this.roleForm.parentSid = 0
      } else {
        this.roleForm.parentName = row.name
        this.roleForm.parentSid = row.sid
      }
    },
    delRow(row) {
      this.$confirm('确定要删除该功能吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOrgroles({ sid: row.sid }).then((res) => {
          if (res.success) {
            this.getList()
            this.$message({ showClose: true, type: 'success', message: '删除成功!' })
          }
        })
      })
    },
    changeSource(value) {
      const choose = this.sourceNameData.filter((item) => item.sid === value)
      getMenusForFunction({ sourceSid: choose[0].sid }).then((res) => {
        if (res.success) {
          this.actionUrl_list = res.data
        }
      })
    },
    // 保存角色
    save() {
      if (this.roleForm.sid) {
        putOrgroles(this.roleForm).then((res) => {
          if (res.success) {
            this.getList()
            this.editDialog = false
            this.$message({ showClose: true, message: res.msg, type: 'success' })
          }
        })
      } else {
        savePost(this.roleForm).then((res) => {
          if (res.success) {
            this.getList()
            this.activeName = 'roleList'
            this.$message({ showClose: true, message: res.msg, type: 'success' })
          }
        })
      }
    },
    refersh() {
      this.roleForm = {
        parentName: '顶级菜单',
        parentSid: '0',
        name: '',
        actionUrl: '',
        sourceSid: '',
        phoneFunction: '',
        remarks: '',
        cId: '',
        funId: ''
      }
    },
    // 是否可用 按钮
    enabledChange(value, row) {
      IsEnable({ sid: row.sid, isEnable: row.isEnable }).then(res => {
        this.$message({ showClose: true, type: 'success', message: res.msg })
      })
    }
  }
}
</script>

<style scoped>
.el-select > .el-input {
  display: block;
  width: 300px;
}

.my-tabs {
  margin-top: 10px;
}
</style>