no message
This commit is contained in:
parent
710d335190
commit
1c59353583
@ -10,6 +10,9 @@ export default {
|
|||||||
return await http.get('/system/table/get', {
|
return await http.get('/system/table/get', {
|
||||||
name
|
name
|
||||||
}, {cache:true});
|
}, {cache:true});
|
||||||
|
},
|
||||||
|
getUpdate: async function(name = '', data=[]) {
|
||||||
|
return await http.post('/system/table/getUpdate', {name:name}, data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@ -40,6 +40,7 @@
|
|||||||
</el-container>
|
</el-container>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
</div>
|
</div>
|
||||||
|
<use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false"></use-select>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -9,13 +9,10 @@
|
|||||||
<input class="el-input__inner" type="text" readonly :value="data[options.subfield]">
|
<input class="el-input__inner" type="text" readonly :value="data[options.subfield]">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
<el-drawer type="primary" :with-header="false" append-to-body="true" v-if="visible" v-model="visible" :size="options.size || 1000" :show-close="false" style="overflow: initial;" destroy-on-close @closed="visible=false;$emit('closed')">
|
||||||
|
|
||||||
<el-drawer type="primary" :with-header="false" append-to-body="true" v-model="visible" :size="options.size || 1000" :show-close="false" style="overflow: initial;" destroy-on-close @closed="$emit('closed')">
|
|
||||||
<el-button type="danger" @click="closeUser" class="userdrawerclose" icon="el-icon-close"> </el-button>
|
<el-button type="danger" @click="closeUser" class="userdrawerclose" icon="el-icon-close"> </el-button>
|
||||||
<x-user v-model="data"></x-user>
|
<x-user v-model="data"></x-user>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -3,13 +3,13 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="sc-select-filter">
|
<div class="x-select-filter">
|
||||||
<div v-if="data.length<=0" class="sc-select-filter__no-data">
|
<div v-if="data.length<=0" class="x-select-filter__no-data">
|
||||||
暂无数据
|
暂无数据
|
||||||
</div>
|
</div>
|
||||||
<div v-for="item in data" :key="item.key" class="sc-select-filter__item">
|
<div v-for="item in data" :key="item.key" class="x-select-filter__item">
|
||||||
<div class="sc-select-filter__item-title" :style="{'width':labelWidth+'px'}"><label>{{item.title}}：</label></div>
|
<div class="x-select-filter__item-title" :style="{'width':labelWidth+'px'}"><label>{{item.title}}：</label></div>
|
||||||
<div class="sc-select-filter__item-options">
|
<div class="x-select-filter__item-options">
|
||||||
<ul>
|
<ul>
|
||||||
<li :class="{'active':selected[item.key]&&selected[item.key].includes(option.value)}" v-for="option in item.options" :key="option.value" @click="select(option, item)">
|
<li :class="{'active':selected[item.key]&&selected[item.key].includes(option.value)}" v-for="option in item.options" :key="option.value" @click="select(option, item)">
|
||||||
<el-icon v-if="option.icon"><component :is="option.icon" /></el-icon>
|
<el-icon v-if="option.icon"><component :is="option.icon" /></el-icon>
|
||||||
@ -106,17 +106,16 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.sc-select-filter {width: 100%;}
|
.x-select-filter {width: 100%;}
|
||||||
.sc-select-filter__item {display: flex;}
|
.x-select-filter__item {display: flex;}
|
||||||
.sc-select-filter__item-title {width: 80px;}
|
.x-select-filter__item-title {width: 80px;}
|
||||||
.sc-select-filter__item-title label {font-size: 14px;padding-top:13px;display: inline-block;color: #999;}
|
.x-select-filter__item-title label {font-size: 14px;padding-top:13px;display: inline-block;color: #999;}
|
||||||
.sc-select-filter__item-options {flex: 1;border-bottom: 1px dashed var(--el-border-color-light);}
|
.x-select-filter__item-options {flex: 1;border-bottom: 1px dashed var(--el-border-color-light);}
|
||||||
.sc-select-filter__item-options ul {display: flex;flex-wrap: wrap;padding-top: 10px;}
|
.x-select-filter__item-options ul {display: flex;flex-wrap: wrap;padding-top: 10px;}
|
||||||
.sc-select-filter__item-options li {list-style: none;cursor: pointer;height:28px;padding:0 15px;border-radius:32px;margin: 0 10px 10px 0;display: flex;align-items: center;background: var(--el-color-primary-light-9);}
|
.x-select-filter__item-options li {list-style: none;cursor: pointer;height:28px;padding:0 15px;border-radius:32px;margin: 0 10px 10px 0;display: flex;align-items: center;background: var(--el-color-primary-light-9);}
|
||||||
.sc-select-filter__item-options li .el-icon {margin-right: 3px;font-size: 16px;}
|
.x-select-filter__item-options li .el-icon {margin-right: 3px;font-size: 16px;}
|
||||||
.sc-select-filter__item-options li:hover {color: var(--el-color-primary);}
|
.x-select-filter__item-options li:hover {color: var(--el-color-primary);}
|
||||||
.sc-select-filter__item-options li.active {background: var(--el-color-primary);color: #fff;font-weight: bold;}
|
.x-select-filter__item-options li.active {background: var(--el-color-primary);color: #fff;font-weight: bold;}
|
||||||
.sc-select-filter__item:last-of-type .sc-select-filter__item-options {border: 0;}
|
.x-select-filter__item:last-of-type .x-select-filter__item-options {border: 0;}
|
||||||
|
.x-select-filter__no-data {color: #999;}
|
||||||
.sc-select-filter__no-data {color: #999;}
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,32 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<x-avatar v-if="item.columntype=='avatar' || item.component=='avatar'" :name="item.name" :options="item.options" v-model="row"></x-avatar>
|
<div @click="handleClick(row, item.options)" style="cursor: pointer; ">
|
||||||
<el-badge v-else-if="item.columntype=='badge'" :value="row[item.name]" :type="item.options.type || 'warning'"></el-badge>
|
<x-avatar v-if="item.columntype=='avatar' || item.component=='avatar'" :name="item.name" :options="item.options" v-model="row"></x-avatar>
|
||||||
<el-tag style="border: none; background: none;" v-else-if="item.columntype=='tag'" v-time.tip="row[item.name]"></el-tag>
|
<el-badge v-else-if="item.columntype=='badge'" :value="row[item.name]" :type="item.options.type || 'warning'"></el-badge>
|
||||||
<el-badge v-else-if="item.columntype=='imagegroup'" :value="row[item.name].length" :type="item.options.type || 'warning'"></el-badge>
|
<el-tag style="border: none; background: none;" v-else-if="item.columntype=='tag'" v-time.tip="row[item.name]"></el-tag>
|
||||||
<el-image v-else-if="item.columntype=='image'" :preview-src-list="[getImg(row[item.name])]" :preview-teleported="true" hide-on-click-modal="true" lazy="true" style="width: 30px; height: 30px" fit="cover" :src="getImg(row[item.name])">
|
<el-badge v-else-if="item.columntype=='imagegroup'" :value="row[item.name].length" :type="item.options.type || 'warning'"></el-badge>
|
||||||
<template #error>
|
<el-image v-else-if="item.columntype=='image'" :preview-src-list="[getImg(row[item.name])]" :preview-teleported="true" hide-on-click-modal="true" lazy="true" style="width: 30px; height: 30px" fit="cover" :src="getImg(row[item.name])">
|
||||||
<div class="image-slot">
|
<template #error>
|
||||||
无图
|
<div class="image-slot">
|
||||||
</div>
|
无图
|
||||||
</template>
|
</div>
|
||||||
</el-image>
|
</template>
|
||||||
<p v-else-if="item.columntype=='status'">
|
</el-image>
|
||||||
<x-status-indicator v-for="op in item.options.items" :key="op.value" pulse :type="op.type || 'success'" :label="op.label" v-show="op.value==row[item.name]">
|
<p v-else-if="item.columntype=='status'">
|
||||||
</x-status-indicator>
|
<x-status-indicator v-for="op in item.options.items" :key="op.value" pulse :type="op.type || 'success'" :label="op.label" v-show="op.value==row[item.name]">
|
||||||
</p>
|
</x-status-indicator>
|
||||||
<p v-else-if="item.columntype=='input'">
|
|
||||||
<input class="el-input__inner" type="text" readonly :value="row[item.name]">
|
|
||||||
</p>
|
|
||||||
<slot v-else-if="item.columntype=='select'" :name="item.name" v-bind="scope">
|
|
||||||
<p style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis;" :title="row[item.name]">
|
|
||||||
{{ getNameByValue( row[item.name], item.options.items) }}
|
|
||||||
</p>
|
</p>
|
||||||
</slot>
|
<p v-else-if="item.columntype=='input'">
|
||||||
<slot v-else :name="item.name" v-bind="scope">
|
<input class="el-input__inner" type="text" readonly :value="row[item.name]">
|
||||||
{{row[item.name]}}
|
</p>
|
||||||
</slot>
|
<slot v-else-if="item.columntype=='select'" :name="item.name" v-bind="scope">
|
||||||
|
<p style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis;" :title="row[item.name]">
|
||||||
|
{{ getNameByValue( row[item.name], item.options.items) }}
|
||||||
|
</p>
|
||||||
|
</slot>
|
||||||
|
<slot v-else :name="item.name" v-bind="scope">
|
||||||
|
{{row[item.name]}}
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -42,14 +43,18 @@
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
row : this.modelValue
|
row : this.modelValue,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
handleClick(row, options){
|
||||||
|
if (options && options.updataname) {
|
||||||
|
this.$emit('xtableupdate', row, {name:options.updataname, remoteurl:'system/table/getUpdate?name='+options.updataname});
|
||||||
|
}
|
||||||
|
},
|
||||||
getNameByValue (value, degrees) {
|
getNameByValue (value, degrees) {
|
||||||
const degree = degrees.find(degree => degree.value === value);
|
const degree = degrees.find(degree => degree.value === value);
|
||||||
return degree ? (degree.name?degree.name:degree.label) : value;
|
return degree ? (degree.name?degree.name:degree.label) : value;
|
||||||
|
|||||||
@ -8,14 +8,14 @@
|
|||||||
<el-table-column :align="item.align || 'left'" :label="item.label" v-if="item.column && item.column.length>0">
|
<el-table-column :align="item.align || 'left'" :label="item.label" v-if="item.column && item.column.length>0">
|
||||||
<el-table-column v-for="(items, indexs) in item.column" :key="indexs" :align="items.align || 'left'" :column-key="items.prop||items.name" :label="items.label" :prop="items.prop||items.name" :width="items.width || 'auto'" :min-width="items.minWidth || 'auto'" :sortable="items.sortable" :fixed="items.fixed" :filters="items.filters" :filter-method="remoteFilter||!items.filters?null:filterHandler" :show-overflow-tooltip="items.showOverflowTooltip">
|
<el-table-column v-for="(items, indexs) in item.column" :key="indexs" :align="items.align || 'left'" :column-key="items.prop||items.name" :label="items.label" :prop="items.prop||items.name" :width="items.width || 'auto'" :min-width="items.minWidth || 'auto'" :sortable="items.sortable" :fixed="items.fixed" :filters="items.filters" :filter-method="remoteFilter||!items.filters?null:filterHandler" :show-overflow-tooltip="items.showOverflowTooltip">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<columnItem v-model="scope.row" :item="items"> </columnItem>
|
<columnItem v-model="scope.row" :item="items" @xtableupdate="xtableupdate"> </columnItem>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column v-else-if="!item.hide && (item.name || item.prop)" :align="item.align || 'left'" :column-key="item.prop||item.name" :label="item.label" :prop="item.prop||item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
|
<el-table-column v-else-if="!item.hide && (item.name || item.prop)" :align="item.align || 'left'" :column-key="item.prop||item.name" :label="item.label" :prop="item.prop||item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<columnItem v-model="scope.row" :item="item"> </columnItem>
|
<columnItem v-model="scope.row" :item="item" @xtableupdate="xtableupdate"> </columnItem>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</template>
|
</template>
|
||||||
@ -61,6 +61,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<x-update v-if="tableUpdateKey" :name="tableUpdateKey" ref="xtableupdate" @success="handleSuccess" @closed="tableUpdateKey=''"></x-update>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
@ -154,6 +155,7 @@
|
|||||||
tableParams: this.params,
|
tableParams: this.params,
|
||||||
column: [],
|
column: [],
|
||||||
customColumnShow: false,
|
customColumnShow: false,
|
||||||
|
tableUpdateKey: '',
|
||||||
summary: {},
|
summary: {},
|
||||||
visibleInfo: {},
|
visibleInfo: {},
|
||||||
config: {
|
config: {
|
||||||
@ -182,6 +184,12 @@
|
|||||||
this.isActivat = false;
|
this.isActivat = false;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
xtableupdate(row, options=[]){
|
||||||
|
this.tableUpdateKey = options.name;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.xtableupdate.open().setData(row).setConfig(options);
|
||||||
|
})
|
||||||
|
},
|
||||||
//获取数据
|
//获取数据
|
||||||
async getData(){
|
async getData(){
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|||||||
@ -13,10 +13,10 @@
|
|||||||
<p>
|
<p>
|
||||||
<el-button-group>
|
<el-button-group>
|
||||||
<el-button @click="xupdate('message', '发送消息')" type="info" size="small" style="padding:5px">
|
<el-button @click="xupdate('message', '发送消息')" type="info" size="small" style="padding:5px">
|
||||||
发送消息
|
系统消息
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="xupdate('user', '编辑信息')" type="info" color="#607d8b" size="small" style="padding:5px">
|
<el-button @click="xupdate('user', '编辑信息')" type="info" color="#607d8b" size="small" style="padding:5px">
|
||||||
编辑信息
|
编辑资料
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-button-group>
|
</el-button-group>
|
||||||
</p>
|
</p>
|
||||||
@ -156,9 +156,8 @@
|
|||||||
xupdate(key, name){
|
xupdate(key, name){
|
||||||
this.updateKey = key;
|
this.updateKey = key;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.xupdate.open().setConfig({name:name, remoteurl:'system/user/getUpdate?name='+key+'&token='+this.token});
|
this.$refs.xupdate.open().setConfig({name:name, remoteurl:'system/table/getUpdate?name='+key+'&token='+this.token});
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
loaddata(){
|
loaddata(){
|
||||||
this.$http.post('system/user/get',{uid: this.userData.uid, type:this.type}).then((res) => {
|
this.$http.post('system/user/get',{uid: this.userData.uid, type:this.type}).then((res) => {
|
||||||
|
|||||||
270
src/components/xUser/select.vue
Normal file
270
src/components/xUser/select.vue
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
<!--
|
||||||
|
* @Descripttion: 用户选择器
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-dialog v-model="dialogVisible" :title="titleMap[type-1]" :width="type==1?680:460" destroy-on-close append-to-body @closed="$emit('closed')">
|
||||||
|
<template v-if="type==1">
|
||||||
|
<div class="x-user-select">
|
||||||
|
<div class="x-user-select__left">
|
||||||
|
<div class="x-user-select__search">
|
||||||
|
<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索成员">
|
||||||
|
<template #append>
|
||||||
|
<el-button icon="el-icon-search" @click="search"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="x-user-select__select">
|
||||||
|
<div class="x-user-select__tree" v-loading="showGrouploading">
|
||||||
|
<el-scrollbar>
|
||||||
|
<el-tree class="menu" ref="groupTree" :data="group" :node-key="groupProps.key" :props="groupProps" highlight-current :expand-on-click-node="false" :current-node-key="groupid" @node-click="groupClick"/>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
<div class="x-user-select__user" v-loading="showUserloading">
|
||||||
|
<div class="x-user-select__user__list">
|
||||||
|
<el-scrollbar ref="userScrollbar">
|
||||||
|
<el-tree class="menu" ref="userTree" :data="user" :node-key="userProps.key" :props="userProps" :default-checked-keys="selectedIds" show-checkbox check-on-click-node @check-change="userClick"></el-tree>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<el-pagination background layout="prev,next" small :total="total" :page-size="limit" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="x-user-select__toicon"><el-icon><el-icon-arrow-right /></el-icon></div>
|
||||||
|
<div class="x-user-select__selected">
|
||||||
|
<header>已选 ({{selected.length}})</header>
|
||||||
|
<ul>
|
||||||
|
<el-scrollbar>
|
||||||
|
<li v-for="(item, index) in selected" :key="item.id">
|
||||||
|
<span class="name">
|
||||||
|
<el-avatar size="small">{{item.name.substring(0,1)}}</el-avatar>
|
||||||
|
<label>{{item.name}}</label>
|
||||||
|
</span>
|
||||||
|
<span class="delete">
|
||||||
|
<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</el-scrollbar>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="type==2">
|
||||||
|
<div class="x-user-select x-user-select-role">
|
||||||
|
<div class="x-user-select__left">
|
||||||
|
<div class="x-user-select__select">
|
||||||
|
<div class="x-user-select__tree" v-loading="showGrouploading">
|
||||||
|
<el-scrollbar>
|
||||||
|
<el-tree class="menu" ref="groupTree" :data="role" :node-key="roleProps.key" :props="roleProps" show-checkbox check-strictly check-on-click-node :expand-on-click-node="false" :default-checked-keys="selectedIds" @check-change="roleClick"/>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="x-user-select__toicon"><el-icon><el-icon-arrow-right /></el-icon></div>
|
||||||
|
<div class="x-user-select__selected">
|
||||||
|
<header>已选 ({{selected.length}})</header>
|
||||||
|
<ul>
|
||||||
|
<el-scrollbar>
|
||||||
|
<li v-for="(item, index) in selected" :key="item.id">
|
||||||
|
<span class="name">
|
||||||
|
<label>{{item.name}}</label>
|
||||||
|
</span>
|
||||||
|
<span class="delete">
|
||||||
|
<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</el-scrollbar>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="save">确 认</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import config from "@/config/workflow";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
modelValue: { type: Boolean, default: false }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
groupProps: config.group.props,
|
||||||
|
userProps: config.user.props,
|
||||||
|
roleProps: config.role.props,
|
||||||
|
titleMap: ['人员选择', '角色选择'],
|
||||||
|
dialogVisible: false,
|
||||||
|
showGrouploading: false,
|
||||||
|
showUserloading: false,
|
||||||
|
keyword: '',
|
||||||
|
groupid: '',
|
||||||
|
limit: config.user.limit,
|
||||||
|
total: 0,
|
||||||
|
currentPage: 1,
|
||||||
|
group: [],
|
||||||
|
user: [],
|
||||||
|
role: [],
|
||||||
|
type: 1,
|
||||||
|
selected: [],
|
||||||
|
value: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
selectedIds(){
|
||||||
|
return this.selected.map(t => t.id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//打开赋值
|
||||||
|
open(type, data){
|
||||||
|
this.type = type
|
||||||
|
this.value = data||[]
|
||||||
|
this.selected = JSON.parse(JSON.stringify(data||[]))
|
||||||
|
this.dialogVisible = true
|
||||||
|
|
||||||
|
if(this.type==1){
|
||||||
|
this.getGroup()
|
||||||
|
this.getUser()
|
||||||
|
}else if(this.type==2){
|
||||||
|
this.getRole()
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
//获取组织
|
||||||
|
async getGroup(){
|
||||||
|
this.showGrouploading = true;
|
||||||
|
var res = await this.$http.get('system/user/groupList');
|
||||||
|
this.showGrouploading = false;
|
||||||
|
var allNode = {[config.group.props.key]: '', [config.group.props.label]: '所有'}
|
||||||
|
res.data.unshift(allNode);
|
||||||
|
this.group = config.group.parseData(res).rows
|
||||||
|
},
|
||||||
|
//获取用户
|
||||||
|
async getUser(){
|
||||||
|
this.showUserloading = true;
|
||||||
|
var params = {
|
||||||
|
[config.user.request.keyword]: this.keyword || null,
|
||||||
|
[config.user.request.groupid]: this.groupid || null,
|
||||||
|
[config.user.request.page]: this.currentPage,
|
||||||
|
[config.user.request.limit]: this.limit
|
||||||
|
}
|
||||||
|
var res = await this.$http.get('system/user/userList', params);
|
||||||
|
this.showUserloading = false;
|
||||||
|
this.user = config.user.parseData(res).rows;
|
||||||
|
this.total = config.user.parseData(res).total || 0;
|
||||||
|
this.$refs.userScrollbar.setScrollTop(0)
|
||||||
|
},
|
||||||
|
//获取角色
|
||||||
|
async getRole(){
|
||||||
|
this.showGrouploading = true;
|
||||||
|
var res = await this.$http.get('system/user/roleList');
|
||||||
|
this.showGrouploading = false;
|
||||||
|
this.role = config.role.parseData(res).rows
|
||||||
|
},
|
||||||
|
//组织点击
|
||||||
|
groupClick(data){
|
||||||
|
this.keyword = ''
|
||||||
|
this.currentPage = 1
|
||||||
|
this.groupid = data[config.group.props.key]
|
||||||
|
this.getUser()
|
||||||
|
},
|
||||||
|
//用户点击
|
||||||
|
userClick(data, checked){
|
||||||
|
if(checked){
|
||||||
|
this.selected.push({
|
||||||
|
id: data[config.user.props.key],
|
||||||
|
name: data[config.user.props.label]
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
this.selected = this.selected.filter(item => item.id != data[config.user.props.key])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//用户分页点击
|
||||||
|
paginationChange(){
|
||||||
|
this.getUser()
|
||||||
|
},
|
||||||
|
//用户搜索
|
||||||
|
search(){
|
||||||
|
this.groupid = ''
|
||||||
|
this.$refs.groupTree.setCurrentKey(this.groupid)
|
||||||
|
this.currentPage = 1
|
||||||
|
this.getUser()
|
||||||
|
},
|
||||||
|
//删除已选
|
||||||
|
deleteSelected(index){
|
||||||
|
this.selected.splice(index,1);
|
||||||
|
if(this.type==1){
|
||||||
|
this.$refs.userTree.setCheckedKeys(this.selectedIds)
|
||||||
|
}else if(this.type==2){
|
||||||
|
this.$refs.groupTree.setCheckedKeys(this.selectedIds)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//角色点击
|
||||||
|
roleClick(data, checked){
|
||||||
|
if(checked){
|
||||||
|
this.selected.push({
|
||||||
|
id: data[config.role.props.key],
|
||||||
|
name: data[config.role.props.label]
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
this.selected = this.selected.filter(item => item.id != data[config.role.props.key])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//提交保存
|
||||||
|
save(){
|
||||||
|
this.value.splice(0,this.value.length);
|
||||||
|
this.selected.map(item => {
|
||||||
|
this.value.push(item)
|
||||||
|
})
|
||||||
|
this.dialogVisible = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.x-user-select {display: flex;}
|
||||||
|
.x-user-select__left {width: 400px;}
|
||||||
|
.x-user-select__right {flex: 1;}
|
||||||
|
|
||||||
|
.x-user-select__search {padding-bottom:10px;}
|
||||||
|
|
||||||
|
.x-user-select__select {display: flex;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
|
||||||
|
.x-user-select__tree {width: 200px;height:300px;border-right: 1px solid var(--el-border-color-light);}
|
||||||
|
.x-user-select__user {width: 200px;height:300px;display: flex;flex-direction: column;}
|
||||||
|
.x-user-select__user__list {flex: 1;overflow: auto;}
|
||||||
|
.x-user-select__user footer {height:36px;padding-top:5px;border-top: 1px solid var(--el-border-color-light);}
|
||||||
|
|
||||||
|
.x-user-select__toicon {display: flex;justify-content: center;align-items: center;margin:0 10px;}
|
||||||
|
.x-user-select__toicon i {display: flex;justify-content: center;align-items: center;background: #ccc;width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius:50%;color: #fff;}
|
||||||
|
|
||||||
|
.x-user-select__selected {height:345px;width: 200px;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
|
||||||
|
.x-user-select__selected header {height:43px;line-height: 43px;border-bottom: 1px solid var(--el-border-color-light);padding:0 15px;font-size: 12px;}
|
||||||
|
.x-user-select__selected ul {height:300px;overflow: auto;}
|
||||||
|
.x-user-select__selected li {display: flex;align-items: center;justify-content: space-between;padding:5px 5px 5px 15px;height:38px;}
|
||||||
|
.x-user-select__selected li .name {display: flex;align-items: center;}
|
||||||
|
.x-user-select__selected li .name .el-avatar {background: #409eff;margin-right: 10px;}
|
||||||
|
.x-user-select__selected li .name label {}
|
||||||
|
.x-user-select__selected li .delete {display: none;}
|
||||||
|
.x-user-select__selected li:hover {background: var(--el-color-primary-light-9);}
|
||||||
|
.x-user-select__selected li:hover .delete {display: inline-block;}
|
||||||
|
|
||||||
|
.x-user-select-role .x-user-select__left {width: 200px;}
|
||||||
|
.x-user-select-role .x-user-select__tree {border: none;height: 343px;}
|
||||||
|
.x-user-select-role .x-user-select__selected {}
|
||||||
|
|
||||||
|
[data-theme='dark'] .x-user-select__selected li:hover {background: rgba(0, 0, 0, 0.2);}
|
||||||
|
[data-theme='dark'] .x-user-select__toicon i {background: #383838;}
|
||||||
|
</style>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import API from "@/api";
|
// import API from "@/api";
|
||||||
|
|
||||||
//审批工作流人员/组织选择器配置
|
//审批工作流人员/组织选择器配置
|
||||||
|
|
||||||
@ -8,7 +8,7 @@ export default {
|
|||||||
//配置组织
|
//配置组织
|
||||||
group: {
|
group: {
|
||||||
//请求接口对象
|
//请求接口对象
|
||||||
apiObj: API.system.dept.list,
|
// apiObj: API.system.dept.list,
|
||||||
//接受数据字段映射
|
//接受数据字段映射
|
||||||
parseData: function (res) {
|
parseData: function (res) {
|
||||||
return {
|
return {
|
||||||
@ -20,37 +20,37 @@ export default {
|
|||||||
//显示数据字段映射
|
//显示数据字段映射
|
||||||
props: {
|
props: {
|
||||||
key: 'id',
|
key: 'id',
|
||||||
label: 'label',
|
label: 'name',
|
||||||
children: 'children'
|
children: 'children'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//配置用户
|
//配置用户
|
||||||
user: {
|
user: {
|
||||||
apiObj: API.demo.page,
|
// apiObj: API.demo.page,
|
||||||
pageSize: 20,
|
limit: 20,
|
||||||
parseData: function (res) {
|
parseData: function (res) {
|
||||||
return {
|
return {
|
||||||
rows: res.data.rows,
|
rows: res.data.data,
|
||||||
total: res.data.total,
|
total: res.data.count,
|
||||||
msg: res.message,
|
msg: res.message,
|
||||||
code: res.code
|
code: res.code
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
key: 'id',
|
key: 'uid',
|
||||||
label: 'user',
|
label: 'username',
|
||||||
},
|
},
|
||||||
request: {
|
request: {
|
||||||
page: 'page',
|
page: 'page',
|
||||||
pageSize: 'pageSize',
|
limit: 'limit',
|
||||||
groupId: 'groupId',
|
groupid: 'groupid',
|
||||||
keyword: 'keyword'
|
keyword: 'keyword'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//配置角色
|
//配置角色
|
||||||
role: {
|
role: {
|
||||||
//请求接口对象
|
//请求接口对象
|
||||||
apiObj: API.system.dept.list,
|
// apiObj: API.system.dept.list,
|
||||||
//接受数据字段映射
|
//接受数据字段映射
|
||||||
parseData: function (res) {
|
parseData: function (res) {
|
||||||
return {
|
return {
|
||||||
@ -62,7 +62,7 @@ export default {
|
|||||||
//显示数据字段映射
|
//显示数据字段映射
|
||||||
props: {
|
props: {
|
||||||
key: 'id',
|
key: 'id',
|
||||||
label: 'label',
|
label: 'title',
|
||||||
children: 'children'
|
children: 'children'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
|
<el-drawer title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
|
||||||
<el-tabs tab-position="top">
|
<el-tabs tab-position="top">
|
||||||
<el-tab-pane label="菜单权限">
|
<el-tab-pane label="菜单权限">
|
||||||
<div class="treeMain">
|
<div class="treeMain">
|
||||||
@ -51,7 +51,7 @@
|
|||||||
<el-button @click="visible=false" >取 消</el-button>
|
<el-button @click="visible=false" >取 消</el-button>
|
||||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-header style="height: auto;">
|
<el-header style="height: auto;">
|
||||||
<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
|
<x-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></x-select-filter>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-header>
|
<el-header>
|
||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
@ -47,12 +47,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import scSelectFilter from '@/components/scSelectFilter'
|
import xSelectFilter from '@/components/xSelectFilter'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'listTab',
|
name: 'listTab',
|
||||||
components: {
|
components: {
|
||||||
scSelectFilter
|
xSelectFilter
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
182
src/views/user/role.vue
Normal file
182
src/views/user/role.vue
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<el-main>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<x-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></x-select-filter>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="userlose" shadow="never" style="margin-top: 10px;">
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<div class="left-panel">
|
||||||
|
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="nopadding">
|
||||||
|
<x-table :api="api" ref="table" :params="filterData" :hidePagination="true">
|
||||||
|
<el-table-column prop="id" fixed sortable label="GroupID" width="100" />
|
||||||
|
|
||||||
|
<el-table-column prop="title" label="title" width="180" />
|
||||||
|
|
||||||
|
<el-table-column prop="status" label="status" width="180" />
|
||||||
|
|
||||||
|
<el-table-column prop="anicount" sortable label="anicount" width="180" v-if="filterData.type=='member'" />
|
||||||
|
|
||||||
|
<el-table-column prop="aid" label="aid" width="180" v-if="filterData.type=='member'" />
|
||||||
|
|
||||||
|
<el-table-column label="排序" prop="sort" width="80"></el-table-column>
|
||||||
|
|
||||||
|
<!-- <el-table-column label="状态" prop="status" width="80">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="1" inactive-value="0"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
|
||||||
|
<el-table-column prop="message" label="备注" width="180" />
|
||||||
|
|
||||||
|
<el-table-column />
|
||||||
|
|
||||||
|
<el-table-column label="操作" fixed="right" align="right" width="160">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
||||||
|
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
||||||
|
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button text type="primary" size="small">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</el-button-group>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</x-table>
|
||||||
|
</el-main>
|
||||||
|
<!-- <pre>{{ filterData }}</pre> -->
|
||||||
|
</el-container>
|
||||||
|
</el-card>
|
||||||
|
</el-main>
|
||||||
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.userlose .el-card__body{
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import xSelectFilter from '@/components/xSelectFilter'
|
||||||
|
import saveDialog from './role/save'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'selectFilter',
|
||||||
|
components: {
|
||||||
|
xSelectFilter,
|
||||||
|
saveDialog,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
title: "用户组",
|
||||||
|
key: "type",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: "系统组",
|
||||||
|
value: "system",
|
||||||
|
icon: "el-icon-flag"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "用户组",
|
||||||
|
value: "member",
|
||||||
|
icon: "el-icon-bottom-left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "自定义会员组",
|
||||||
|
value: "default",
|
||||||
|
icon: "el-icon-circle-close"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
selectedValues: {
|
||||||
|
type: ["system"]
|
||||||
|
},
|
||||||
|
filterData: {
|
||||||
|
type:'system'
|
||||||
|
},
|
||||||
|
search: {},
|
||||||
|
dialog: {
|
||||||
|
save: false,
|
||||||
|
permission: false
|
||||||
|
},
|
||||||
|
api:'system/user/roleList'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filteredItems() {
|
||||||
|
return this.items.filter(item => item.category === 'Category A');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//添加
|
||||||
|
add(){
|
||||||
|
this.dialog.save = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveDialog.open()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//编辑
|
||||||
|
table_edit(row){
|
||||||
|
this.dialog.save = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveDialog.open('edit').setData(row)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看
|
||||||
|
table_show(row){
|
||||||
|
this.dialog.save = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveDialog.open('show').setData(row)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//权限设置
|
||||||
|
permission(){
|
||||||
|
this.dialog.permission = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.permissionDialog.open()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//删除
|
||||||
|
async table_del(row){
|
||||||
|
var reqData = {id: row.id}
|
||||||
|
var res = await this.$api.demo.post.post(reqData);
|
||||||
|
if(res.code == 200){
|
||||||
|
this.$refs.table.refresh()
|
||||||
|
this.$message.success("删除成功")
|
||||||
|
}else{
|
||||||
|
this.$alert(res.message, "提示", {type: 'error'})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
change(selected){
|
||||||
|
this.filterData = selected
|
||||||
|
this.$refs.table.reload(this.filterData)
|
||||||
|
},
|
||||||
|
//表格内开关
|
||||||
|
changeSwitch(val, row){
|
||||||
|
row.status = row.status == '1'?'0':'1'
|
||||||
|
row.$switch_status = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
delete row.$switch_status;
|
||||||
|
row.status = val;
|
||||||
|
this.$message.success("操作成功")
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
197
src/views/user/role/save.vue
Normal file
197
src/views/user/role/save.vue
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
<template>
|
||||||
|
<x-dialog :title="titleMap[mode]" v-model="visible" :width="900" destroy-on-close @closed="$emit('closed')">
|
||||||
|
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
|
||||||
|
<el-form-item label="角色名称" prop="title">
|
||||||
|
<el-input v-model="form.title" clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色别名" prop="alias">
|
||||||
|
<el-input v-model="form.alias" clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序" prop="sort">
|
||||||
|
<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否有效" prop="status">
|
||||||
|
<el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="message">
|
||||||
|
<el-input v-model="form.message" clearable type="textarea"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div class="rolepermission" v-if="form.type=='system'">
|
||||||
|
<el-tabs tab-position="top">
|
||||||
|
<el-tab-pane label="菜单权限">
|
||||||
|
<div class="treeMain">
|
||||||
|
<el-tree ref="menu" node-key="name" :data="menu" :props="form.menu" show-checkbox></el-tree>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="数据权限">
|
||||||
|
<el-form label-width="100px" label-position="left">
|
||||||
|
<el-form-item label="规则类型">
|
||||||
|
<el-select v-model="form.dataType" placeholder="请选择">
|
||||||
|
<el-option label="全部可见" value="1"></el-option>
|
||||||
|
<el-option label="本人可见" value="2"></el-option>
|
||||||
|
<el-option label="所在部门可见" value="3"></el-option>
|
||||||
|
<el-option label="所在部门及子级可见" value="4"></el-option>
|
||||||
|
<el-option label="选择的部门可见" value="5"></el-option>
|
||||||
|
<el-option label="自定义" value="6"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="选择部门" v-show="form.dataType=='5'">
|
||||||
|
<div class="treeMain" style="width: 100%;">
|
||||||
|
<el-tree ref="dept" node-key="id" :data="form.list" :props="form.props" show-checkbox></el-tree>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="规则值" v-show="form.dataType=='6'">
|
||||||
|
<el-input v-model="form.rule" clearable type="textarea" :rows="6" placeholder="请输入自定义规则代码"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="控制台模块">
|
||||||
|
<div class="treeMain">
|
||||||
|
<el-tree ref="grid" node-key="key" :data="grid" :props="grid.props" :default-checked-keys="form.grid" show-checkbox></el-tree>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="visible=false" >取 消</el-button>
|
||||||
|
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||||
|
</template>
|
||||||
|
</x-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.treeMain {
|
||||||
|
height: 280px;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid #dcdfe6cc;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
.rolepermission{
|
||||||
|
padding-left: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
emits: ['success', 'closed'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
mode: "add",
|
||||||
|
titleMap: {
|
||||||
|
add: '新增',
|
||||||
|
edit: '编辑',
|
||||||
|
show: '查看'
|
||||||
|
},
|
||||||
|
visible: false,
|
||||||
|
isSaveing: false,
|
||||||
|
//表单数据
|
||||||
|
form: {
|
||||||
|
id:"",
|
||||||
|
title: "",
|
||||||
|
alias: "",
|
||||||
|
status: 1,
|
||||||
|
message: "",
|
||||||
|
grid:[],
|
||||||
|
menu:[],
|
||||||
|
},
|
||||||
|
//验证规则
|
||||||
|
rules: {
|
||||||
|
title: [
|
||||||
|
{required: true, message: '请填写名称'}
|
||||||
|
],
|
||||||
|
sort: [
|
||||||
|
{required: true, message: '请输入排序', trigger: 'change'}
|
||||||
|
],
|
||||||
|
alias: [
|
||||||
|
{required: true, message: '请输入角色别名'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
menu:[],
|
||||||
|
grid:[
|
||||||
|
{
|
||||||
|
key: "welcome",
|
||||||
|
label: "欢迎",
|
||||||
|
isFixed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "ver",
|
||||||
|
label: "版本信息",
|
||||||
|
isFixed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "time",
|
||||||
|
label: "时钟"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "progress",
|
||||||
|
label: "进度环"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "echarts",
|
||||||
|
label: "实时收入"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "about",
|
||||||
|
label: "关于项目"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//显示
|
||||||
|
open(mode='add'){
|
||||||
|
this.mode = mode;
|
||||||
|
this.visible = true;
|
||||||
|
return this
|
||||||
|
},
|
||||||
|
// submit(){
|
||||||
|
// this.isSaveing = true;
|
||||||
|
|
||||||
|
// //选中的和半选的合并后传值接口
|
||||||
|
// var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
|
||||||
|
// console.log(checkedKeys)
|
||||||
|
|
||||||
|
// var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
|
||||||
|
// console.log(checkedKeys_dept)
|
||||||
|
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// this.isSaveing = false;
|
||||||
|
// this.visible = false;
|
||||||
|
// this.$message.success("操作成功")
|
||||||
|
// this.$emit('success')
|
||||||
|
// },1000)
|
||||||
|
// },
|
||||||
|
//表单提交方法
|
||||||
|
submit(){
|
||||||
|
this.$refs.dialogForm.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.isSaveing = true;
|
||||||
|
var res = await this.$api.demo.post.post(this.form);
|
||||||
|
this.isSaveing = false;
|
||||||
|
if(res.code == 200){
|
||||||
|
this.$emit('success', this.form, this.mode)
|
||||||
|
this.visible = false;
|
||||||
|
this.$message.success("操作成功")
|
||||||
|
}else{
|
||||||
|
this.$alert(res.message, "提示", {type: 'error'})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//表单注入数据
|
||||||
|
setData(data){
|
||||||
|
// this.form = data
|
||||||
|
Object.assign(this.form, data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-card shadow="never" header="分类筛选器">
|
<el-card shadow="never" header="分类筛选器">
|
||||||
<sc-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></sc-select-filter>
|
<x-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></x-select-filter>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card shadow="never" header="返回值" style="margin-top: 15px;">
|
<el-card shadow="never" header="返回值" style="margin-top: 15px;">
|
||||||
<pre>{{ filterData }}</pre>
|
<pre>{{ filterData }}</pre>
|
||||||
@ -10,12 +10,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import scSelectFilter from '@/components/scSelectFilter'
|
import xSelectFilter from '@/components/xSelectFilter'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'selectFilter',
|
name: 'selectFilter',
|
||||||
components: {
|
components: {
|
||||||
scSelectFilter
|
xSelectFilter
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user