下拉组件优化

master
王兵 4 years ago
parent 5a68ab0afb
commit 73696b4da7

@ -880,6 +880,73 @@
});
//下拉按钮
Vue.component('wb-dropdown', {
data: function () {
return {
items: []
}
},
props: {
size: {
type: String,
default: 'mini'
},
type: {
type: String,
default: 'primary'
},
splitButton: {
type: Boolean,
default: false
},
arg: {
type: Object | String | Number,
default: {}
}
},
methods: {
input: function (value) {
this.$emit('input', value[value.length - 1]);
},
onCommand: function (index) {
if (this.items[index].click) {
this.items[index].click(this.arg);
}
}
},
created: function () {
if (this.$slots['dropdown'] && this.$slots['dropdown'].length > 0) {
for (var i = 0; i < this.$slots['dropdown'][0].children.length; i++) {
var item = this.$slots['dropdown'][0].children[i];
if (item.tag === 'wb-dropdown-item') {
var t = item.children.filter(function (item) {
return typeof item.tag === 'undefined';
});
this.items.push({
text: t[0].text,
icon: item.data && item.data.attrs ? item.data.attrs['icon'] : null,
click: item.data && item.data.on ? item.data.on['click'] : null
})
}
}
}
},
template: '' +
'<el-dropdown ' +
' :size="size" ' +
' :type="type" ' +
' :split-button="splitButton" ' +
' @click="onCommand(0)" ' +
' @command="onCommand">' +
'<slot></slot>' +
' <el-dropdown-menu slot="dropdown">' +
' <el-dropdown-item v-for="(item,index) in items" :key="index" :command="index" :icon="item.icon">' +
' {{item.text}}' +
' </el-dropdown-item>' +
' </el-dropdown-menu>' +
'</el-dropdown>'
});
//表数据操作,动态操作项
Vue.component('wb-table-ops', {
data: function () {
return {
items: []
@ -916,7 +983,7 @@
created: function () {
for (var i = 0; i < this.$slots.default.length; i++) {
var tag = this.$slots.default[i];
if (tag.tag === 'wb-dropdown-item') {
if (tag.tag === 'wb-table-op') {
this.items.push({
value: tag.data.attrs ? tag.data.attrs['value'] : "",
icon: tag.data.attrs ? tag.data.attrs['icon'] : "",

@ -117,25 +117,35 @@
<div class="menu">
<ul>
<li>
<el-dropdown @command="onCommand">
<el-link :underline="false" @click="onHome" icon="el-icon-user-solid">${r'${token.userAlias}'}</el-link>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item :command="'changePassword'">修改密码</el-dropdown-item>
<el-dropdown-item :command="'logout'">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<wb-dropdown>
<el-link :underline="false" @click="onHome" icon="el-icon-user">${r'${token.userAlias}'}</el-link>
<wb-dropdown-menu slot="dropdown">
<wb-dropdown-item>个人信息</wb-dropdown-item>
<wb-dropdown-item @click="onChangePwd">修改密码</wb-dropdown-item>
<wb-dropdown-item @click="onLogout">退出登录</wb-dropdown-item>
</wb-dropdown-menu>
</wb-dropdown>
</li>
<li>
<el-link :underline="false" @click="onHome" icon="el-icon-message-solid"><span
<el-link :underline="false" @click="onHome" icon="el-icon-message"><span
style="line-height: 20px;"><el-badge is-dot class="item">消息</el-badge></span></el-link>
</li>
<li>
<wb-dropdown>
<el-link :underline="false" @click="onHome" icon="el-icon-warning-outline">关于</el-link>
<wb-dropdown-menu slot="dropdown">
<wb-dropdown-item>开发指导</wb-dropdown-item>
<wb-dropdown-item>使用指导</wb-dropdown-item>
</wb-dropdown-menu>
</wb-dropdown>
</li>
<li>
<el-link :underline="false" icon="el-icon-full-screen" @click="switchFullScreen">全屏</el-link>
</li>
<li>
<el-link :underline="false" icon="el-icon-switch-button" @click="onCommand('logout')"></el-link>
<el-link :underline="false" icon="el-icon-switch-button" @click="onLogout"></el-link>
</li>
</ul>
</div>
@ -491,47 +501,40 @@
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
this.onCommand("logoutForChangePwd")
this.onLogoutForChangePwd();
}
}.bind(this));
}
}.bind(this))
},
onCommand: function (cmd) {
switch (cmd) {
case "logout":
nav.boxYesNo("退出提示", "是否退出当前登录账户?" ,function (result) {
if (result){
new Ajax("wsys", "User").method("logout").post({}, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
nav.clearCookie("token");
nav.toOpen("/login.htm");
}
}.bind(this));
onLogout: function() {
nav.boxYesNo("退出提示", "是否退出当前登录账户?" ,function (result) {
if (result){
new Ajax("wsys", "User").method("logout").post({}, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
nav.clearCookie("token");
nav.toOpen("/login.htm");
}
}.bind(this))
break;
case "logoutForChangePwd":
nav.boxYes("退出提示", "密码修改成功立即重新登录?" ,function (result) {
new Ajax("wsys", "User").method("logout").post({}, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
nav.clearCookie("token");
nav.toOpen("/login.htm");
}
}.bind(this));
}.bind(this))
break;
case "changePassword":
this.form.formShow = true;
break;
default:
nav.w("未找到对应的命令!");
break;
}
}.bind(this));
}
}.bind(this))
},
onChangePwd: function () {
this.form.formShow = true;
},
onLogoutForChangePwd: function () {
nav.boxYes("退出提示", "密码修改成功立即重新登录?" ,function (result) {
new Ajax("wsys", "User").method("logout").post({}, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
nav.clearCookie("token");
nav.toOpen("/login.htm");
}
}.bind(this));
}.bind(this))
},
switchFullScreen:function(){
this.prop.full = !this.prop.full;

@ -30,7 +30,6 @@
padding: 0;
margin: 0;
display: flex;
background: url(data:image/gif;base64,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);
justify-content: center;
align-items: center;
}

@ -308,10 +308,10 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -140,10 +140,10 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -114,11 +114,11 @@
width="120"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="查看" icon="el-icon-tickets" @click="onView"></wb-dropdown-item>
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="查看" icon="el-icon-tickets" @click="onView"></wb-table-op>
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -117,10 +117,10 @@
width="120"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -107,10 +107,10 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -120,11 +120,11 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="开始处理" icon="el-icon-edit" @click="onStart"></wb-dropdown-item>
<wb-dropdown-item value="处理结束" icon="el-icon-edit" @click="onFinish"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="开始处理" icon="el-icon-edit" @click="onStart"></wb-table-op>
<wb-table-op value="处理结束" icon="el-icon-edit" @click="onFinish"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -148,10 +148,10 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -100,10 +100,10 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -148,10 +148,10 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -100,11 +100,11 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="授权" icon="el-icon-edit" @click="onResEdit"></wb-dropdown-item>
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="授权" icon="el-icon-edit" @click="onResEdit"></wb-table-op>
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -137,10 +137,10 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -174,9 +174,9 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="注销" icon="el-icon-edit" @click="onLogout"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="注销" icon="el-icon-edit" @click="onLogout"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -134,10 +134,10 @@
width="120"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

@ -124,10 +124,10 @@
fixed="right"
label="操作">
<template slot-scope="scope">
<wb-dropdown :arg="scope.row">
<wb-dropdown-item value="编辑" icon="el-icon-edit" @click="onEdit"></wb-dropdown-item>
<wb-dropdown-item value="删除" icon="el-icon-delete" @click="onDelete"></wb-dropdown-item>
</wb-dropdown>
<wb-table-ops :arg="scope.row">
<wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
<wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
</wb-table-ops>
</template>
</el-table-column>
</el-table>

Loading…
Cancel
Save

Powered by TurnKey Linux.