完成光纤配置进行检验

value

2024-06-03 2e9370979f871bf47f6dc145c49d7bf32ffa4b51

 src/components/view/role-manage.vue

@@ -1,77 +1,93 @@
<style scoped>
   .title {
      height: 60px;
      line-height: 60px;
   }
  .title {
    height: 60px;
    line-height: 60px;
  }

   .search {
      background-color: #fff;
      height: 80px;
      display: flex;
      align-items: center;
   }
  .search {
    background-color: #fff;
    height: 80px;
    display: flex;
    align-items: center;
  }

   .search_thing {
      width: 350px;
      display: flex;
      align-items: center;
   }
  .search_thing {
    width: 350px;
    display: flex;
    align-items: center;
  }

   .search_label {
      width: 110px;
      font-size: 14px;
      text-align: right;
   }
  .search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
  }

   .search_input {
      width: calc(100% - 110px);
   }
  .search_input {
    width: calc(100% - 110px);
  }

   .table {
      margin-top: 10px;
      background-color: #fff;
      width: calc(100% - 40px);
      height: calc(100% - 60px - 80px - 10px - 40px);
      padding: 20px;
   }
  .table {
    margin-top: 10px;
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 60px - 80px - 10px - 40px);
    padding: 20px;
  }
</style>

<template>
   <div class="role_manage">
      <div>
         <el-row class="title">
            <el-col :span="12" style="padding-left: 20px;">角色管理</el-col>
            <el-col :span="12" style="text-align: right;">
               <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增角色</el-button>
            </el-col>
         </el-row>
      </div>
      <div class="search">
         <div class="search_thing">
            <div class="search_label">角色名称：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.name"
                  @keyup.enter.native="refreshTable()"></el-input></div>
         </div>
         <div class="search_thing" style="padding-left: 30px;">
            <el-button size="small" @click="refresh()">重 置</el-button>
            <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button>
         </div>
      </div>
      <div class="table">
         <ValueTable ref="ValueTable" :url="$api.user.selectRoleLists" :delUrl="$api.user.delRole"
            :componentData="componentData" :key="upIndex" @upRole="upRole" @selectRole="selectRole" />
      </div>
      <el-dialog :title="type" :visible.sync="addDia" width="500px" @closed="closed">
         <div style="max-height: 500px;overflow-y: auto;padding: 8px;" v-if="addDia">
            <el-row style="line-height: 40px;margin-bottom: 15px;">
               <el-col :span="8"><span class="required-span">* </span>角色名</el-col>
               <el-col :span="16">
                  <el-input v-model="addData.roleName" size="medium" placeholder="需唯一角色名" clearable :disabled="type=='查看'"></el-input>
               </el-col>
            </el-row>
            <el-divider content-position="left">权限分配</el-divider>
            <el-collapse style="margin-top: 10px;">
               <el-collapse-item title="查询">
  <div class="role_manage">
    <div>
      <el-row class="title">
        <el-col :span="12" style="padding-left: 20px;">角色管理</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增角色</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">角色名称：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.name"
            @keyup.enter.native="refreshTable()"></el-input></div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="refresh()">重 置</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button>
      </div>
    </div>
    <div class="table">
      <ValueTable ref="ValueTable" :url="$api.user.selectRoleLists" :delUrl="$api.user.delRole"
        :componentData="componentData" :key="upIndex" @upRole="upRole" @selectRole="selectRole" />
    </div>
    <el-dialog :title="type" :visible.sync="addDia" width="550px" @closed="closed">
      <div style="max-height: 550px;overflow-y: auto;padding: 10px 20px;" v-if="addDia">
        <el-row style="line-height: 42px;">
          <el-col :span="7" style="font-size: 14px;"><span class="required-span">* </span>角色名</el-col>
          <el-col :span="17">
            <el-input v-model="addData.roleName" size="medium" placeholder="需唯一角色名" clearable
              :disabled="type=='查看'"></el-input>
          </el-col>
        </el-row>
        <el-row style="line-height: 42px;margin-bottom: 20px;">
          <el-col :span="7" style="font-size: 14px;"><span class="required-span">* </span>角色分类</el-col>
          <el-col :span="17">
            <el-select v-model="addData.category" size="medium" :disabled="type=='查看'" style="width: 100%;">
              <el-option v-for="(a, i) in deaprtEnum" :key="i" :label="a.name" :value="a.id"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-divider content-position="left">权限分配</el-divider>
        <el-collapse style="margin-top: 10px;padding: 0 10px;">
          <el-collapse-item v-for="(category, ci) in menuCategroy" :key="ci">
            <template slot="title">
              <i class="el-icon-circle-plus-outline" style="margin-right: 10px;"></i>{{category}}
            </template>
            <div style="padding: 3px 30px;display: flex;align-items: center;justify-content: space-between;" v-for="(a, ai) in menu" :key="ai" v-if="a.type==category" ><el-checkbox
                v-model="a.isClick" :disabled="type=='查看'">{{a.remark}}</el-checkbox> <el-checkbox v-model="a.look" v-if="a.remark.includes('查询')||a.remark.includes('获取')" :disabled="type=='查看'">只看我</el-checkbox></div>
          </el-collapse-item>
          <!-- <el-collapse-item title="查询">
                  <el-row style="padding: 3px 30px;" v-for="(a, ai) in menu" :key="ai" v-if="a.type=='查询'">
                     <el-col :span="18">
                        <el-checkbox :disabled="type=='查看'" v-model="a.isClick">{{a.remark}}</el-checkbox>
@@ -80,224 +96,239 @@
                        <el-checkbox :disabled="type=='查看'" v-model="a.look">只看我</el-checkbox>
                     </el-col>
                  </el-row>
               </el-collapse-item>
               <el-collapse-item title="添加">
                  <div style="padding: 3px 30px;" v-for="(a, ai) in menu" :key="ai" v-if="a.type=='添加'"><el-checkbox
                        v-model="a.isClick" :disabled="type=='查看'">{{a.remark}}</el-checkbox></div>
               </el-collapse-item>
               <el-collapse-item title="修改">
                  <div style="padding: 3px 30px;" v-for="(a, ai) in menu" :key="ai" v-if="a.type=='修改'"><el-checkbox
                        v-model="a.isClick" :disabled="type=='查看'">{{a.remark}}</el-checkbox></div>
               </el-collapse-item>
               <el-collapse-item title="删除">
                  <div style="padding: 3px 30px;" v-for="(a, ai) in menu" :key="ai" v-if="a.type=='删除'"><el-checkbox
                        v-model="a.isClick" :disabled="type=='查看'">{{a.remark}}</el-checkbox></div>
               </el-collapse-item>
               <el-collapse-item title="导入">
                  <div style="padding: 3px 30px;" v-for="(a, ai) in menu" :key="ai" v-if="a.type=='导入'"><el-checkbox
                        v-model="a.isClick" :disabled="type=='查看'">{{a.remark}}</el-checkbox></div>
               </el-collapse-item>
               <el-collapse-item title="导出">
                  <div style="padding: 3px 30px;" v-for="(a, ai) in menu" :key="ai" v-if="a.type=='导出'"><el-checkbox
                        v-model="a.isClick" :disabled="type=='查看'">{{a.remark}}</el-checkbox></div>
               </el-collapse-item>
            </el-collapse>
         </div>
         <span slot="footer" class="dialog-footer">
            <el-button @click="addDia = false">取 消</el-button>
            <el-button type="primary" @click="saveAddData" :loading="addLoad" v-if="type!='查看'">确 定</el-button>
         </span>
      </el-dialog>
   </div>
               </el-collapse-item> -->
        </el-collapse>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDia = false">取 消</el-button>
        <el-button type="primary" @click="saveAddData" :loading="addLoad" v-if="type!='查看'">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
   import ValueTable from '../tool/value-table.vue'
   export default {
      components: {
         ValueTable
      },
      data() {
         return {
            componentData: {
               entity: {
                  name: null,
                  orderBy: {
                     field: 'id',
                     order: 'asc'
                  }
               },
               showSelect: false,
               select: true,
               isIndex: true,
               do: [{
                  font: '编辑',
                  type: 'text',
                  method: 'upRole',
                  field: []
               }, {
                  id: 'delete',
                  font: '删除',
                  type: 'text',
                  method: 'doDiy',
               }, {
                  font: '查看',
                  type: 'text',
                  method: 'selectRole',
               }],
               tagField: {},
               selectField: {}
            },
            entityCopy: {},
            upIndex: 0,
            addDia: false,
            addLoad: false,
            addData: {
               roleId2: null,
               roleName: null,
               powers: []
            },
            menu: [],
            menuCopy: [],
            type: '新增',
            addPower: true
         }
      },
      mounted() {
         this.entityCopy = this.HaveJson(this.componentData.entity)
         this.selectMenuList()
         this.getPower()
      },
      methods: {
         refreshTable() {
            this.$refs['ValueTable'].selectList()
         },
         refresh() {
            this.componentData.entity = this.HaveJson(this.entityCopy)
            this.upIndex++
         },
         selectMenuList() {
            this.$axios.get(this.$api.user.selectMenuList).then(res => {
               res.data.forEach(a => {
                  a.isClick = false
                  a.look = false
               })
               this.menu = res.data
               this.menuCopy = this.HaveJson(res.data)
            })
         },
         upRole(row) {
            this.type = '修改'
            this.addData.roleName = row.name
            this.selectPowerByRoleId(row.id)
         },
         selectRole(row) {
            this.type = '查看'
            this.addData.roleName = row.name
            this.selectPowerByRoleId(row.id)
         },
         openAdd() {
            this.type = '新增'
            this.addDia = true
         },
         saveAddData() {
            if (this.addData.roleName == '' || this.addData.roleName == null) {
               this.$message.error('请填写角色名')
               return
            }
            this.addLoad = true
            let url = ''
            if (this.type == '新增') {
               url = this.$api.user.addRole
            } else {
               url = this.$api.user.upRole
            }
            this.addData.powers = []
            this.menu.forEach(a => {
               if (a.isClick) {
                  let str = 0
                  if (a.look) {
                     str = 1
                  }
                  this.addData.powers.push({
                     menuMethod: a.method,
                     look: str
                  })
               }
            })
            this.$axios.post(url, {
               str: JSON.stringify(this.addData)
            }).then(res => {
               if(res.code == 201){
                  if (this.type == '新增') {
                     this.$message.error('添加失败')
                  } else {
                     this.$message.error('修改失败')
                  }
                  this.addLoad = false
                  return
               }
               if (this.type == '新增') {
                  this.$message.success('添加成功')
               } else {
                  this.$message.success('修改成功')
               }
               this.addLoad = false
               this.addDia = false
               this.refreshTable()
            }).catch(e => {
               this.addLoad = false
            })
         },
         selectPowerByRoleId(id) {
            this.$axios.post(this.$api.user.selectPowerByRoleId, {
               id: id
            }).then(res => {
               res.data.forEach(a => {
                  this.menu.forEach(b => {
                     if (a.menuMethod == b.method) {
                        b.isClick = true
                        b.look = (a.look == 1 ? true : false)
                     }
                  })
               })
               this.addData.roleId2 = id
               this.addDia = true
            })
         },
         closed() {
            this.addData = {
               roleId2: null,
               roleName: null,
               powers: []
            }
            this.menu = this.HaveJson(this.menuCopy)
         },
         // 权限分配
         getPower(){
            let power = JSON.parse(sessionStorage.getItem('power'))
            let up = false
            let del = false
            let add = false
            for (var i = 0; i < power.length; i++) {
               if(power[i].menuMethod=='upRole'){
                  up = true
               }
               if(power[i].menuMethod=='delRole'){
                  del = true
               }
               if(power[i].menuMethod=='addRole'){
                  add = true
               }
            }
            if(!del){
               this.componentData.do.splice(1, 1)
            }
            if(!up){
               this.componentData.do.splice(0, 1)
            }
            this.addPower = add
         }
      }
   }
</script>
  import {
    set
  } from 'vue'
  import ValueTable from '../tool/value-table.vue'
  export default {
    components: {
      ValueTable
    },
    data() {
      return {
        componentData: {
          entity: {
            name: null,
            orderBy: {
                field: 'id',
              order: 'asc'
            }
          },
          showSelect: false,
          select: true,
          isIndex: true,
          do: [{
            font: '编辑',
            type: 'text',
            method: 'upRole',
            field: []
          }, {
            id: 'delete',
            font: '删除',
            type: 'text',
            method: 'doDiy',
          }, {
            font: '查看',
            type: 'text',
            method: 'selectRole',
          }],
          tagField: {
            category: {
              select: []
            }
          },
          selectField: {}
        },
        entityCopy: {},
        upIndex: 0,
        addDia: false,
        addLoad: false,
        addData: {
          roleId2: null,
          roleName: null,
          category: null,
          powers: []
        },
        menu: [],
        menuCategroy: [],
        menuCopy: [],
        type: '新增',
        addPower: true,
        deaprtEnum: []
      }
    },
    mounted() {
      this.entityCopy = this.HaveJson(this.componentData.entity)
      this.selectMenuList()
      this.selectDepartmentEnum()
      this.getPower()
    },
    methods: {
      refreshTable() {
        this.$refs['ValueTable'].selectList()
      },
      refresh() {
        this.componentData.entity = this.HaveJson(this.entityCopy)
        this.upIndex++
      },
      selectMenuList() {
        this.$axios.get(this.$api.user.selectMenuList).then(res => {
          res.data.forEach(a => {
            a.isClick = false
            a.look = false
          })
          let set = new Set()
          res.data.forEach(a => {
            set.add(a.type)
          })
          this.menuCategroy = set
          this.menu = res.data
          this.menuCopy = this.HaveJson(res.data)
        })
      },
      upRole(row) {
        this.type = '修改'
        this.addData.roleName = row.name
        this.addData.category = row.category
        this.selectPowerByRoleId(row.id)
      },
      selectRole(row) {
        this.type = '查看'
        this.addData.roleName = row.name
        this.addData.category = row.category
        this.selectPowerByRoleId(row.id)
      },
      openAdd() {
        this.type = '新增'
        this.addDia = true
      },
      saveAddData() {
        if (this.addData.roleName == '' || this.addData.roleName == null) {
          this.$message.error('请填写角色名')
          return
        }
        if (this.addData.category == '' || this.addData.category == null) {
          this.$message.error('请选择角色分类')
          return
        }
        this.addLoad = true
        let url = ''
        if (this.type == '新增') {
          url = this.$api.user.addRole
        } else {
          url = this.$api.user.upRole
        }
        this.addData.powers = []
        this.menu.forEach(a => {
          if (a.isClick) {
            let str = 0
            if (a.look) {
              str = 1
            }
            this.addData.powers.push({
              menuMethod: a.method,
              look: str
            })
          }
        })
        this.$axios.post(url, {
          str: JSON.stringify(this.addData)
        }).then(res => {
          if (res.code == 201) {
            if (this.type == '新增') {
              this.$message.error('添加失败')
            } else {
              this.$message.error('修改失败')
            }
            this.addLoad = false
            return
          }
          if (this.type == '新增') {
            this.$message.success('添加成功')
          } else {
            this.$message.success('修改成功')
          }
          this.addLoad = false
          this.addDia = false
          this.refreshTable()
        }).catch(e => {
          this.addLoad = false
        })
      },
      selectPowerByRoleId(id) {
        this.$axios.post(this.$api.user.selectPowerByRoleId, {
          id: id
        }).then(res => {
          res.data.forEach(a => {
            this.menu.forEach(b => {
              if (a.menuMethod == b.method) {
                b.isClick = true
                b.look = (a.look == 1 ? true : false)
              }
            })
          })
          this.addData.roleId2 = id
          this.addDia = true
        })
      },
      closed() {
        this.addData = {
          roleId2: null,
          roleName: null,
          powers: []
        }
        this.menu = this.HaveJson(this.menuCopy)
      },
      // 权限分配
      getPower() {
        let power = JSON.parse(sessionStorage.getItem('power'))
        let up = false
        let del = false
        let add = false
        for (var i = 0; i < power.length; i++) {
          if (power[i].menuMethod == 'upRole') {
            up = true
          }
          if (power[i].menuMethod == 'delRole') {
            del = true
          }
          if (power[i].menuMethod == 'addRole') {
            add = true
          }
        }
        if (!del) {
          this.componentData.do.splice(1, 1)
        }
        if (!up) {
          this.componentData.do.splice(0, 1)
        }
        this.addPower = add
      },
      selectDepartmentEnum(){
        this.$axios.get(this.$api.department.selectDepartmentEnum).then(res=>{
          this.deaprtEnum = res.data
          this.componentData.tagField.category.select = []
          res.data.forEach(a=>{
            this.componentData.tagField.category.select.push({
              label: a.name,
              value: a.id
            })
          })
        })
      }
    }
  }
</script>