web-zk-admin/src/views/system/receptionRole/index.vue

<!-- 系统配置 - 权限配置 -->
<template>
  <div class="page">
    <div class="contain">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />

      <div class="thetopbox" v-if="topList[0].changed==true">
        <el-form ref="form" :model="queryParams" label-width="100px">
          <el-row>
            <el-col :span="4">
              <el-form-item :label="'会员等级'" prop="teamCode">
                <el-select v-model="queryParams.gradeId" clearable :placeholder="'请选择'">
                  <el-option
                    v-for="item,index in gradeRangList"
                    :key="index"
                    :label="item.gradeName"
                    :value="item.gradeValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'真实奖衔'" prop="teamCode">
                <el-select v-model="queryParams.awardsId" clearable :placeholder="'请选择'">
                  <el-option
                    v-for="item,index in awardsList"
                    :key="index"
                    :label="item.awardsName"
                    :value="item.awardsValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'菜单名称'" prop="teamCode">
                <el-cascader
                  v-model="queryParams.menuId"
                  :options="menuOptions"
                  :props="defaultParams"
                  @change="handleChangeMunu"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'创建日期'" prop="teamCode">
                <el-date-picker
                  class="time"
                  v-model="queryParams.creationTime"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  :range-separator="'至'"
                  :start-placeholder="'开始日期'"
                  :end-placeholder="'结束日期'"
                  @change="changeTime"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="searchbox" style="margin-left: 30px">
                <el-button class="my_search" @click="research()"> {{ '搜索' }}</el-button>
                <el-button class="my_reset" @click="reChongzhi"> {{ '重置' }}</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="main">
        <div class="maintop">
          <div class="mainbtn">
            <el-button size="small" class="thebtn1" @click="addrecep"  v-has-buttons="['receptionRoleAdd']">{{'添加'}}</el-button>
          </div>
        </div>
        <div class="maintable">
          <el-table
            :data="tableData"
            v-loading="loading"
            style="width: 100%"
            height="710px"
            :header-cell-style="{ background: '#EEEEEE' }"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column align="center" prop="thegrade" width="150" :label="'会员等级'" />
            <el-table-column align="center" prop="theaward"  width="150" :label="'真实奖衔'" />
            <el-table-column align="center" prop="roles" width="150" :label="'会员权限'" />
            <el-table-column align="center" prop="themenus"  width="800" :label="'菜单名称'" :show-overflow-tooltip="true"/>
            <el-table-column align="center" prop="creationTime" :label="'创建日期'" width="200" />
            <el-table-column align="center" prop="" :label="'操作'" fixed="right" width="auto">
              <template slot-scope="scope">
                <el-button
                  class="buttons"
                  type="text"
                  size="small"
                  style="color: #6962F6"
                  @click="$router.push('/system/limits/addreception?state=2&id='+scope.row.pkId)"
                  v-has-buttons="['receptionRoleUpdate']"
                >
                  {{ '修改' }}
                </el-button>
                <el-button style="color: #E70DEC" class="buttons" type="text" size="small" @click="$router.push('/system/limits/addreception?state=1&id='+scope.row.pkId)">
                  {{ '查看' }} </el-button>
                <el-button class="buttons" type="text" size="small" style="color: #c73030" @click="delMenus(scope.row.pkId)" v-has-buttons="['receptionRoleUpdate']">
                  {{ '删除' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="research"
      />
    </div>


  </div>
</template>

<script>
import topBar from '@/components/topBarRole'
import { getbdmenuList, getPubenumsList, delMenu } from '@/api/system'
import { getgradeRanglist, getAwardsListChiose } from '@/api/level'
import * as api from '@/api/notice'
import {getRouters} from "@/api/settle";
export default {
  name: 'ReceptionRole',
  components: {
    topBar
  },
  data() {
    return {
      moren: 'receptionRole',
      topList: [
        {
          name: this.$t('MN_F_T_479'),
          path: 'receptionRole',
          url: 'receptionRole',
          changed: false
        },
        {
          name: this.$t('MN_F_T_480'),
          path: 'limitsList',
          url: 'limitsList',
          changed: false
        }
      ],
      defaultParams: {
        label: 'label',
        value: 'value',
        children: 'enumList'
      },
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        gradeId: '', // 会员等级
        awardsId: '', // 真实奖衔
        menuId: '', // 菜单名称
        creationTime: [] // 创建时间止
      },
      gradeRangList: [],
      awardsList: [],
      menuOptions: [],
      tableData: [],
      loading:false,
      total: 0
    }
  },
  created() {
    this.research()
    this.getgradeRanglist()
    this.getAwardsListChiose()
    this.getPubenumsList()
    this.getUserRoute()
  },
  methods: {
    getUserRoute() {
      getRouters().then((res)=>{
        res.data.forEach((item)=>{
          this.topList.forEach((items)=>{
            if (item.routeName == items.url){
              items.changed = true
            }
          })
        })
      })
    },
    // 菜单下拉选
    delMenus(id) {
      this.$confirm(this.$t('MN_F_T_483'), this.$t('w_0034'), {
        confirmButtonText: this.$t('w_0035'),
        cancelButtonText: this.$t('ENU_P_TYPE0'),
        type: 'warning'
      }).then(() => {
        delMenu(id).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.research()
        })
      })
    },
    changeTime(value) {
      console.log('🌈', value)
    },
    addrecep() {
      this.$router.push({
        name: 'Addreception',
        query: { index: 1 }
      })
    },
    handleChangeMunu(value) {
      console.log('🌈', value[value.length - 1])
      this.queryParams.menuId = value[value.length - 1]
    },
    // 菜单下拉选
    getPubenumsList() {
      getPubenumsList().then((res) => {
        this.menuOptions = res.data
      })
    },
    // 等级范围选择
    getgradeRanglist() {
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },
    // 奖衔下拉列表
    getAwardsListChiose() {
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
    },
    research() {
      // // 日期传入改为起止两个字段
      // if ("" != this.queryParams.creationTime) {
      //   this.queryParams.creationTimeStart = this.queryParams.creationTime[0];
      //   this.queryParams.creationTimeEnd = this.queryParams.creationTime[1];
      // }
      this.loading = true
      getbdmenuList(this.queryParams).then((res) => {
        this.loading = false
        res.rows.forEach((element) => {
          element.alist = []
          element.blist = []
          element.clist = []
          element.dlist = []
          element.themenus = ''
          element.theaward = ''
          element.thegrade = ''
          element.roles = ''
          if(element.authorityList){
            element.authorityList.forEach((item) => {
              element.dlist.push(item.authorityVal)
              element.roles = element.dlist.join('/')
            })
            console.error(element.roles)
          }
          if(element.menuList){
            element.menuList.forEach((item) => {
              element.alist.push(item.menuVal)
              element.themenus = element.alist.join('/')
            })
          }
          if(element.awardList){
            element.awardList.forEach((item) => {
              element.blist.push(item.awardVal)
              element.theaward = element.blist.join('/')
            })
          }
          console.error()
          if (element.gradeList) {
            element.gradeList.forEach((item) => {
              element.clist.push(item.gradeVal)
              element.thegrade = element.clist.join('/')
            })
          }
        })

        this.tableData = res.rows
        this.total = res.total
      })
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        gradeId: '', // 会员等级
        awardsId: '', // 真实奖衔
        menuId: '', // 菜单名称
        creationTime: [] // 创建时间止
      }
      this.research()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 0) {
    //     if (rowIndex % 2 === 0) {
    //       return {
    //         rowspan: 2,
    //         colspan: 1
    //       }
    //     } else {
    //       return {
    //         rowspan: 0,
    //         colspan: 0
    //       }
    //     }
    //   }
    // },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner{
  width: 100%;
}
::v-deep .buttons{
  padding: 0 3px !important;
}
::v-deep .time {
  width: 300px;
}
.button-style{
  width: 209px;
  height: 48px;
  background: #CCCCCC;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  line-height: 48px;
  padding: 0!important;
  color: #fff;
  font-size: 18px;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.button-s{
  padding: 0 2px!important;
}
::v-deep .el-button{
  padding: 10px 20px;
}
::v-deep .el-date-editor .el-range__close-icon{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon{
  margin-top: -10px;
}
::v-deep .el-input__inner{
  //height:28px;
  //line-height: 28px;
}
::v-deep .el-form-item{
  //margin-bottom: 15px;
}
::v-deep .el-form-item__label{
  color: #333;
  font-weight: inherit;
}
::v-deep .el-row {
  //margin-top: 20px;
}
//::v-deep .el-row {
//  margin-top: 20px;
//}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    padding-top: 10px;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
  }
  .main {
    .maintop {
      display: flex;
      padding: 0 0;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: rgba(67, 145, 253, 1);
        }
      }
    }
  }
}
.maintable {
      flex: 1;
      overflow-y: auto;
    }

.contain{
  display: flex;
    flex-direction: column;
    height: 100%;
}
</style>