|
|
@@ -45,53 +45,38 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group row">
|
|
|
- <label for="role" class="col-2 col-form-label text-md-right">角色</label>
|
|
|
-
|
|
|
- <div class="col-8">
|
|
|
- <input name="role" type="hidden" v-model="rolesStr" required>
|
|
|
- <div class="input-group">
|
|
|
- <select id="roleAddingItem" class="form-control">
|
|
|
- <option :value="role.id" v-for="role in rolesAll">@{{ role.name }}</option>
|
|
|
- </select>
|
|
|
- <span class="input-group-append">
|
|
|
- <span class="input-group-text btn-outline-info" style="cursor: pointer;" @click="addRole">
|
|
|
- 添加左边的角色
|
|
|
- </span>
|
|
|
- </span>
|
|
|
+ <label for="role" class="col-md-3 col-form-label text-md-right">角色</label>
|
|
|
+ <div class="col-md-7">
|
|
|
+ <input type="text" class="form-control tooltipTarget" placeholder="定位角色"
|
|
|
+ @input="seekRole($event)" title="输入关键词快速定位"></div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group row">
|
|
|
+ <label class="col-md-3"></label>
|
|
|
+ <div class="col-md-7">
|
|
|
+ <input name="role" hidden v-model="roles" >
|
|
|
+ <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;opacity:0.8;text-align: center;">
|
|
|
+ <ul class="list-group tooltipTarget" style="width: 100%" onselectstart="return false;">
|
|
|
+ <li title="单击添加权限" v-for="role in rolesAll" :id="role.name" class="list-group-item list-group-item-action pt-0 pb-0"
|
|
|
+ @click="selectedRole(role)" :class="role.style ? 'active' :''"><span style="cursor: default;" :id="role.name"> @{{ role.name }} </span></li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <select size="8" class="form-control @error('role') is-invalid @enderror "
|
|
|
- :class="rolesStr?'tooltipTarget':''" title="两次点击移除目标">
|
|
|
- <option :value="role.id" v-for="role in roles" @click="clickingRoleOption">@{{ role.name }}</option>
|
|
|
- </select>
|
|
|
- @error('role')
|
|
|
- <span class="invalid-feedback" role="alert">
|
|
|
- <strong>{{ $message }}</strong>
|
|
|
- </span>
|
|
|
- @enderror
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group row">
|
|
|
- <label for="role" class="col-2 col-form-label text-md-right">可见承运商</label>
|
|
|
-
|
|
|
- <div class="col-md-8">
|
|
|
- <div class="input-group">
|
|
|
- <select id="carrierAddingItem" class="form-control">
|
|
|
- <option :value="carrier.id" v-for="carrier in carrierAll">@{{ carrier.name }}</option>
|
|
|
- </select>
|
|
|
- <span class="input-group-append">
|
|
|
- <span class="input-group-text btn-outline-info" style="cursor: pointer;" @click="addCarrier">
|
|
|
- 添加左边的承运商
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <select size="8" class="form-control "
|
|
|
- title="两次点击移除目标">
|
|
|
- <option :value="carrier.id" v-for="carrier in carriers" @dblclick="clickingCarrierOption">
|
|
|
- @{{ carrier.name }}
|
|
|
- </option>
|
|
|
- </select>
|
|
|
- <div hidden v-for="carrier in carriers">
|
|
|
- <input hidden name="carrier_id[]" :value="carrier.id">
|
|
|
+ <label for="carrier" class="col-md-3 col-form-label text-md-right">可见承运商</label>
|
|
|
+ <div class="col-md-7">
|
|
|
+ <input type="text" class="form-control tooltipTarget" placeholder="定位承运商"
|
|
|
+ @input="seekCarrier($event)" title="输入关键词快速定位"></div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group row">
|
|
|
+ <label class="col-md-3"></label>
|
|
|
+ <div class="col-md-7">
|
|
|
+ <input name="carrier" hidden v-model="carriers" >
|
|
|
+ <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;opacity:0.8;text-align: center;">
|
|
|
+ <ul class="list-group tooltipTarget" style="width: 100%" onselectstart="return false;">
|
|
|
+ <li title="单击添加权限" v-for="carrier in carriersAll" :id="carrier.name" class="list-group-item list-group-item-action pt-0 pb-0"
|
|
|
+ @click="selectedCarrier(carrier)" :class="carrier.style ? 'active' :''"><span style="cursor: default;" :id="carrier.name"> @{{ carrier.name }} </span></li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -114,100 +99,153 @@
|
|
|
data:{
|
|
|
rolesAll:[
|
|
|
@foreach( $rolesAll as $role )
|
|
|
- {id:'{{$role->id}}',name:'{{$role->name}}',},
|
|
|
+ {id:'{{$role->id}}',name:'{{$role->name}}',style:false},
|
|
|
@endforeach
|
|
|
],
|
|
|
roles:[
|
|
|
+ @if(old('role'))
|
|
|
+ {{ old('role') }}
|
|
|
+ @else
|
|
|
@foreach( $roles as $role )
|
|
|
- {id:'{{$role->id}}',name:'{{$role->name}}',},
|
|
|
- @endforeach
|
|
|
+ {{$role->id}},
|
|
|
+ @endforeach
|
|
|
+ @endif
|
|
|
],
|
|
|
rolesStr:'{{ old('role') }}',
|
|
|
- carrierAll:[
|
|
|
- @foreach($carriers as $carrier)
|
|
|
- {id:'{{$carrier->id}}',name:'{{$carrier->name}}'},
|
|
|
+ carriersAll:[
|
|
|
+ @foreach($carriers as $carrier)
|
|
|
+ {id:'{{$carrier->id}}',name:'{{$carrier->name}}',style:false},
|
|
|
@endforeach
|
|
|
],
|
|
|
carriers:[
|
|
|
- @foreach($carrierUser as $carrier)
|
|
|
- {id:'{{$carrier->id}}',name:'{{$carrier->name}}'},
|
|
|
- @endforeach
|
|
|
+ @if(old('carrier'))
|
|
|
+ {{ old('carrier') }}
|
|
|
+ @else
|
|
|
+ @foreach( $carrierUser as $carrier )
|
|
|
+ {{$carrier->id}},
|
|
|
+ @endforeach
|
|
|
+ @endif
|
|
|
],
|
|
|
},
|
|
|
mounted:function(){
|
|
|
$(".tooltipTarget").tooltip({'trigger':'hover'});
|
|
|
- this.rolesCompileToStr()
|
|
|
- },
|
|
|
- methods:{
|
|
|
- addRole:function () {
|
|
|
- let $roleAddingItem = $('#roleAddingItem');
|
|
|
- let val=$roleAddingItem.val();
|
|
|
- let roleName = $roleAddingItem.find("option:selected").text();
|
|
|
- let isLackOf=this.roles.every(function(role){
|
|
|
- return role.id !== val;
|
|
|
- });
|
|
|
- if(isLackOf){
|
|
|
- this.roles.push({id:val,name: roleName});
|
|
|
- this.rolesCompileToStr()
|
|
|
- }else{
|
|
|
- tempTip.setDuration(1500);
|
|
|
- tempTip.show('已添加'+roleName)
|
|
|
- }
|
|
|
- },
|
|
|
- clickingRoleOption:function(e){
|
|
|
- let target = $(e.target);
|
|
|
- if(typeof target.attr('data-clicked')=='undefined'||target.attr('data-clicked')==='0'){
|
|
|
- target.attr('data-clicked',1);
|
|
|
- setTimeout(function(){target.attr('data-clicked','0');},1500)
|
|
|
+ if (this.roles.length>0){
|
|
|
+ let rolesAll=this.rolesAll;
|
|
|
+ let roles=this.roles;
|
|
|
+ for (let i = 0; i < roles.length; i++) {
|
|
|
+ rolesAll.every(function (roleAll) {
|
|
|
+ if (roleAll.id == roles[i]) {
|
|
|
+ roleAll.style = true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
}
|
|
|
- else{
|
|
|
- target.attr('data-clicked',parseInt(target.attr('data-clicked'))+1);
|
|
|
- this.removeRole(target.val(),target.find("option:selected").text())
|
|
|
+ }
|
|
|
+ if (this.carriers.length>0){
|
|
|
+ let carriersAll=this.carriersAll;
|
|
|
+ let carriers=this.carriers;
|
|
|
+ for (let i = 0; i < carriers.length; i++) {
|
|
|
+ carriersAll.every(function (carrierAll) {
|
|
|
+ if (carrierAll.id == carriers[i]) {
|
|
|
+ carrierAll.style = true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
}
|
|
|
- },
|
|
|
- removeRole:function(id,name){
|
|
|
- let _this=this;
|
|
|
- tempTip.confirm('确定要删除角色' + name + '吗？',function () {
|
|
|
- for(let i=0;i<_this.roles.length;i++){
|
|
|
- if(_this.roles[i].id===id){
|
|
|
- _this.roles.splice(i, 1);
|
|
|
- _this.rolesCompileToStr();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ selectedCarrier:function (e) {
|
|
|
+ let carriers=this.carriers;
|
|
|
+ let carriersAll=this.carriersAll;
|
|
|
+ let isCarrier=true;
|
|
|
+ if (carriers&&carriersAll) {
|
|
|
+ for (let i = 0; i < carriers.length; i++) {
|
|
|
+ if (carriers[i] == e.id) {
|
|
|
+ carriers.splice(i,1);
|
|
|
+ carriersAll.every(function (carrierAll) {
|
|
|
+ if (carrierAll.id == e.id) {
|
|
|
+ carrierAll.style = false;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ isCarrier= false;
|
|
|
break;
|
|
|
}
|
|
|
+ isCarrier= true;
|
|
|
}
|
|
|
- });
|
|
|
+ }
|
|
|
+ if (isCarrier || !carriers){
|
|
|
+ carriers.push(e.id);
|
|
|
+ carriersAll.every(function (carrierAll) {
|
|
|
+ if (carrierAll.id==e.id){
|
|
|
+ carrierAll.style=true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
- rolesCompileToStr:function(){
|
|
|
- let ids=this.roles.map(function(role){
|
|
|
- return role.id;
|
|
|
+ seekCarrier:function (e) {
|
|
|
+ let $val=e.target.value;
|
|
|
+ let carriersAll=this.carriersAll;
|
|
|
+ carriersAll.every(function (carrierAll) {
|
|
|
+ let name=carrierAll.name;
|
|
|
+ if (name.includes($val)){
|
|
|
+ location.href="#"+carrierAll.name;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
});
|
|
|
- this.rolesStr=ids.join(',');
|
|
|
- setTimeout(function(){
|
|
|
- $(".tooltipTarget").tooltip({'trigger':'hover'});
|
|
|
- },20);
|
|
|
+ $(e.target).focus();
|
|
|
},
|
|
|
- addCarrier:function () {
|
|
|
- let $carrierAddingItem = $('#carrierAddingItem');
|
|
|
- let val=$carrierAddingItem.val();
|
|
|
- let carrierName = $carrierAddingItem.find("option:selected").text();
|
|
|
- let isLackOf=this.carriers.every(function(carrier){
|
|
|
- return carrier.id !== val;
|
|
|
- });
|
|
|
- if(isLackOf){
|
|
|
- this.carriers.push({id:val,name: carrierName})
|
|
|
- }else{
|
|
|
- tempTip.setDuration(1500);
|
|
|
- tempTip.show('已添加'+carrierName)
|
|
|
+ selectedRole:function (e) {
|
|
|
+ let roles=this.roles;
|
|
|
+ let rolesAll=this.rolesAll;
|
|
|
+ let isRole=true;
|
|
|
+ if (roles&&rolesAll) {
|
|
|
+ for (let i = 0; i < roles.length; i++) {
|
|
|
+ if (roles[i] == e.id) {
|
|
|
+ roles.splice(i,1);
|
|
|
+ rolesAll.every(function (roleAll) {
|
|
|
+ if (roleAll.id == e.id) {
|
|
|
+ roleAll.style = false;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ isRole= false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ isRole= true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (isRole || !roles){
|
|
|
+ roles.push(e.id);
|
|
|
+ rolesAll.every(function (roleAll) {
|
|
|
+ if (roleAll.id==e.id){
|
|
|
+ roleAll.style=true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
- clickingCarrierOption:function(e){
|
|
|
- let target = $(e.target);
|
|
|
- for (let i=0;i<this.carriers.length;i++){
|
|
|
- if(this.carriers[i].id===target.val()){
|
|
|
- this.carriers.splice(i,1);
|
|
|
- break;
|
|
|
+ seekRole:function (e) {
|
|
|
+ let $val=e.target.value;
|
|
|
+ let rolesAll=this.rolesAll;
|
|
|
+ rolesAll.every(function (roleAll) {
|
|
|
+ let name=roleAll.name;
|
|
|
+ if (name.includes($val)){
|
|
|
+ location.href="#"+roleAll.name;
|
|
|
+ return false;
|
|
|
}
|
|
|
- }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ $(e.target).focus();
|
|
|
},
|
|
|
},
|
|
|
});
|
Zhouzhendong