Element升级

Former-commit-id: c927279ce250dbdd2200b30e6e7a862a86c45cf1
master
wangbingit@outlook.com 4 years ago
parent 5dadea8173
commit eb5f70683a

@ -16,8 +16,6 @@ public class ResTree extends Res {
private String value;
private boolean disabled;
private List<ResTree> children;
public String getLabel() {
@ -36,14 +34,6 @@ public class ResTree extends Res {
this.value = value;
}
public boolean getDisabled() {
return disabled;
}
public void setDisabled(boolean disabled) {
this.disabled = disabled;
}
public List<ResTree> getChildren() {
return children;
}

@ -238,7 +238,6 @@ public class ResManagerImpl implements ResManager {
tree.setValid(next.getValid());
tree.setRowVersion(next.getRowVersion());
tree.setLabel(next.getResName());
tree.setDisabled(next.getFree());
allMap.put(tree.getResCode(), tree);
iterator.remove();

@ -632,6 +632,15 @@ code {
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.el-drawer{/* 修复抽屉无法滚动 */
overflow: auto;
height: 100%;
}
.el-drawer .el-drawer__body{/* 修复抽屉内容子类继承height失效维内托 */
height: calc(100% - 76px);
}
/* 带有固定title布局,title保持固定*/
.wb-layout-title-fix {
width: 100%;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,217 +1,172 @@
<div id="app" v-cloak>
<el-card class="box-card">
<el-tabs :value="'list'">
<el-tab-pane label="列表展示" name="list">
<span slot="label"><i class="el-icon-s-operation"></i>列表展示</span>
<el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
<el-form-item label="资源代码" prop="resCode">
<el-input v-model="vm.resCode" clearable size="mini" placeholder="请输入资源代码"></el-input>
</el-form-item>
<el-form-item label="资源名称" prop="resName">
<el-input v-model="vm.resName" clearable size="mini" placeholder="请输入资源名称"></el-input>
</el-form-item>
<el-form-item label="资源类型" prop="resType">
<el-select v-model="vm.resType" clearable size="mini" filterable placeholder="请输入资源类型">
<el-option key="WEB" label="网页" value="WEB"></el-option>
<el-option key="API" label="终端" value="API"></el-option>
</el-select>
</el-form-item>
<el-form-item label="资源内容" prop="resValue">
<el-input v-model="vm.resValue" clearable size="mini" placeholder="请输入资源内容"></el-input>
</el-form-item>
<el-form-item label="是否免费" prop="free">
<el-radio-group v-model="vm.free" clearable size="mini">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否有效" prop="valid">
<el-radio-group v-model="vm.valid" clearable size="mini">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="开始日期" prop="startDate">
<el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="endDate">
<el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
<el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置
</el-button>
</el-form-item>
</el-form>
<el-divider><i class="el-icon-search"></i></el-divider>
<el-row>
<el-col :span="12">
<el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
<el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
</el-col>
<el-col :span="12">
<el-button-group style="float: right;">
<el-tooltip effect="dark" content="Excel模板下载" placement="bottom">
<el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="Excel导入" placement="bottom">
<el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="批量删除" placement="bottom">
<el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
</el-tooltip>
<el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
<el-form-item label="资源代码" prop="resCode">
<el-input v-model="vm.resCode" clearable size="mini" placeholder="请输入资源代码"></el-input>
</el-form-item>
<el-form-item label="资源名称" prop="resName">
<el-input v-model="vm.resName" clearable size="mini" placeholder="请输入资源名称"></el-input>
</el-form-item>
<el-form-item label="资源类型" prop="resType">
<el-select v-model="vm.resType" clearable size="mini" filterable placeholder="请输入资源类型">
<el-option key="WEB" label="网页" value="WEB"></el-option>
<el-option key="API" label="终端" value="API"></el-option>
</el-select>
</el-form-item>
<el-form-item label="资源内容" prop="resValue">
<el-input v-model="vm.resValue" clearable size="mini" placeholder="请输入资源内容"></el-input>
</el-form-item>
<el-form-item label="是否免费" prop="free">
<el-radio-group v-model="vm.free" clearable size="mini">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否有效" prop="valid">
<el-radio-group v-model="vm.valid" clearable size="mini">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="开始日期" prop="startDate">
<el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="endDate">
<el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
<el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置
</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="box-card">
<el-row>
<el-col :span="12">
<el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
<el-tooltip effect="dark" content="刷新" placement="bottom">
<el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
</el-tooltip>
</el-button-group>
</el-col>
</el-row>
<el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
<el-table
@selection-change="onSelectionChange"
empty-text="无数据"
:stripe="true"
:data="result"
size="mini">
<el-table-column
align="center"
type="selection"
width="45">
</el-table-column>
<el-table-column
align="center"
width="140"
prop="id"
label="主键">
</el-table-column>
<el-table-column
align="center"
width="100"
prop="valid"
label="是否有效">
<template slot-scope="scope">
<el-tag size="mini" effect="dark" type="success" v-if="scope.row.valid">有效</el-tag>
<el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.valid">无效</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
min-width="120"
prop="resCode"
label="资源代码">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="resName"
label="资源名称">
</el-table-column>
<el-table-column
align="center"
min-width="100"
prop="resType"
label="资源类型">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="resValue"
label="资源内容">
</el-table-column>
<el-table-column
align="center"
min-width="100"
prop="free"
label="是否免费">
<template slot-scope="scope">
<el-tag size="mini" effect="dark" type="success" v-if="scope.row.free">免费</el-tag>
<el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.free">授权</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
min-width="140"
prop="createTime"
label="创建时间">
</el-table-column>
<el-table-column
align="center"
width="120"
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>
</template>
</el-table-column>
</el-table>
<el-button type="warning" size="mini" icon="el-icon-share" @click="treeShow = true">树状</el-button>
</el-col>
<el-pagination
background
v-if="vm.totalCount > vm.pageSize"
style="margin-top: 10px"
@current-change="onPageChange"
@size-change="onPageSizeChange"
:current-page="vm.pageNumber"
:page-size="vm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="vm.totalCount">
</el-pagination>
<el-col :span="12">
<el-button-group style="float: right;">
<el-tooltip effect="dark" content="Excel模板下载" placement="bottom">
<el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
</el-tooltip>
</el-tab-pane>
<el-tab-pane label="树状展示" name="tree">
<span slot="label"><i class="el-icon-share"></i>树状展示</span>
<el-tooltip effect="dark" content="Excel导入" placement="bottom">
<el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
</el-tooltip>
<el-row>
<el-col :span="12">
<el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
<el-tooltip effect="dark" content="批量删除" placement="bottom">
<el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
</el-tooltip>
<el-button type="warning" size="mini" icon="el-icon-edit" @click="onCreate">前缀修改</el-button>
</el-col>
<el-col :span="12">
<el-button-group style="float: right;">
<el-tooltip effect="dark" content="批量删除" placement="bottom">
<el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="刷新" placement="bottom">
<el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
</el-tooltip>
</el-button-group>
</el-col>
</el-row>
<el-tooltip effect="dark" content="刷新" placement="bottom">
<el-button size="mini" icon="el-icon-refresh" @click="onLoadTree"></el-button>
</el-tooltip>
</el-button-group>
</el-col>
</el-row>
<el-table
class="data"
@selection-change="onSelectionChange"
empty-text="无数据"
:stripe="true"
:data="result"
size="mini">
<el-table-column
align="center"
type="selection"
width="45">
</el-table-column>
<el-table-column
align="center"
width="140"
prop="id"
label="主键">
</el-table-column>
<el-table-column
align="center"
width="100"
prop="valid"
label="是否有效">
<template slot-scope="scope">
<el-tag size="mini" effect="dark" type="success" v-if="scope.row.valid">有效</el-tag>
<el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.valid">无效</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
min-width="120"
prop="resCode"
label="资源代码">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="resName"
label="资源名称">
</el-table-column>
<el-table-column
align="center"
min-width="100"
prop="resType"
label="资源类型">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="resValue"
label="资源内容">
</el-table-column>
<el-table-column
align="center"
min-width="100"
prop="free"
label="是否免费">
<template slot-scope="scope">
<el-tag size="mini" effect="dark" type="success" v-if="scope.row.free">免费</el-tag>
<el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.free">授权</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
min-width="140"
prop="createTime"
label="创建时间">
</el-table-column>
<el-table-column
align="center"
width="120"
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>
</template>
</el-table-column>
</el-table>
<el-tree
style="margin-top: 10px"
:data="treeData"
node-key="resCode"
ref="tree"
show-checkbox
default-expand-all
:filter-node-method="filterTree"
:expand-on-click-node="false">
<div class="tree" slot-scope="{ node, data }">
<span>
<el-link type="success" @click="onTreeCreate(data)">新增</el-link>
<el-link type="danger" @click="onDelete(data)">删除</el-link>
{{ data.resName }}
<span style="color: #409EFF" @click="onTreeEdit(data)">[{{data.resCode}}]</span>
<span style="color: #ff0000" v-if="data.free">[免费]</span>
</span>
</div>
</el-tree>
</el-tab-pane>
</el-tabs>
<el-pagination
background
v-if="vm.totalCount > vm.pageSize"
style="margin-top: 10px"
@current-change="onPageChange"
@size-change="onPageSizeChange"
:current-page="vm.pageNumber"
:page-size="vm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="vm.totalCount">
</el-pagination>
</el-card>
<el-dialog
@ -260,6 +215,53 @@
<el-button size="mini" type="primary" @click="onSave">保存</el-button>
</span>
</el-dialog>
<el-drawer
direction="ltr"
:visible.sync="treeShow"
:close-on-click-modal="false"
:close-on-press-escape="true"
:modal-append-to-body="true"
:append-to-body="true"
@opened="onTreeOpened"
size="600px">
<el-page-header slot="title" @back="treeShow = false" content="资源树状展示"></el-page-header>
<el-container style="height:100%">
<el-header>
<el-input
size="mini"
placeholder="输入资源名称、资源代码或资源值"
prefix-icon="el-icon-search"
v-model="treeFilter">
</el-input>
</el-header>
<el-main style="height:100%;padding: 0 20px 20px 20px;">
<el-tree
:data="treeData"
node-key="resCode"
ref="tree"
show-checkbox
default-expand-all
:filter-node-method="onTreeFilter"
:expand-on-click-node="false">
<div class="tree" slot-scope="{ node, data }">
<span>
{{ data.resName }}
<span style="color: #409EFF" @click="onTreeEdit(data)">[{{data.resCode}}]</span>
<span style="color: #ff0000" v-if="data.free">[免费]</span>
</span>
<span>
<el-link type="success" @click="onTreeCreate(data)">新增</el-link>
<el-link type="danger" @click="onDelete(data)">删除</el-link>
</span>
</div>
</el-tree>
</el-main>
</el-container>
</el-drawer>
</div>
<style>
.tree {
@ -327,6 +329,8 @@
{required: true, message: '是否有效不能为空', trigger: 'blur'},
],
},
treeShow: false,
treeFilter: '',
treeData: []
},
methods: {
@ -334,7 +338,7 @@
this.form.formTitle = "资源新增";
this.form.formShow = true;
this.form.id = "";
this.form.resCode = "";
this.form.resCode = "";
this.form.resName = "";
this.form.resType = "";
this.form.resValue = "";
@ -394,15 +398,16 @@
this.form.valid = pItem.valid;
this.form.rowVersion = pItem.rowVersion;
},
onChange: function (value) {
this.$refs.tree.filter(value);
},
filterTree: function (value, data) {
onTreeFilter: function (value, data) {
if (!value) return true;
return data.comment.indexOf(value) !== -1;
return data.resName.indexOf(value) !== -1
|| data.resCode.indexOf(value) !== -1
|| data.resValue.indexOf(value) !== -1;
},
onLoadTree: function () {
new Ajax("wsys", "res").method("tree").post({}, function (response) {
onTreeLoad: function () {
var vm_ = utils.copy(this.vm);
vm_.pageSize = 0;
new Ajax("wsys", "res", "tree").post(vm_, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
@ -410,90 +415,17 @@
}
}.bind(this))
},
onSave: function () {
this.$refs['form'].validate(function (valid) {
if (valid) {
if (this.form.id) {
new Ajax("wsys", "res").update(this.form, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
this.onFind();
this.onLoadTree();
this.$refs['form'].resetFields();
this.form.formShow = false;
}
}.bind(this))
} else {
new Ajax("wsys", "res").create(this.form, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
this.onFind();
this.onLoadTree();
this.$refs['form'].resetFields();
this.form.formShow = false;
}
}.bind(this))
}
} else {
return false;
}
}.bind(this));
},
onDelete: function (item) {
this.$confirm('将删除该项, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
new Ajax(this.module, this.target).delete({id: item.id}, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
nav.s("删除成功");
this.onFind();
this.onLoadTree();
}
}.bind(this))
}.bind(this)).catch(function (action) {
});
},
onBitchDelete: function () {
if (this.select.length == 0) {
nav.w("至少选中一项");
} else {
this.$confirm('将删除已选择的项, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
nav.tipShow("删除中...");
this.select.forAsync(function (item, next) {
new Ajax(this.module, this.target).delete({id: item.id}, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
this.result.remove(item)
}
next();
}.bind(this))
}.bind(this), function () {
nav.tipClose();
nav.s("批量删除成功.")
this.onFind();
this.onLoadTree();
}.bind(this))
}.bind(this)).catch(function (action) {
});
}
onTreeOpened: function () {
this.onTreeLoad();
}
},
watch: {
treeFilter: function (val) {
this.$refs.tree.filter(val);
}
},
mounted: function () {
this.onFind();
this.onLoadTree();
}
})
</script>

@ -23,7 +23,7 @@
</el-form>
</el-card>
<el-card class="box-card data">
<el-card class="box-card">
<el-row>
<el-col :span="12">
<el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
@ -294,7 +294,7 @@
},
doCheck: function (roleId, roleCode, resId, resCode, checked) {
// 优先处理当前节点
new Ajax("wsys", "roleRes").method("check").post({
new Ajax("wsys", "roleRes", "check").post({
roleId: roleId,
roleCode: roleCode,
resId: resId,
@ -309,14 +309,14 @@
}.bind(this));
},
onLoadTree: function () {
new Ajax("wsys", "res").method("tree").post({}, function (response) {
new Ajax("wsys", "res", "tree").post({}, function (response) {
if (response.errors.length > 0) {
nav.e(response.errors[0].message);
} else {
this.treeData = response.result;
for (var i = 0; i < response.result.length; i++) {
this.treeData[i].disabled = this.treeData[i].free;
}
this.treeData.forTree(function (item) {
item.disabled = item.free;
});
}
}.bind(this))
},

@ -87,6 +87,33 @@ Array.prototype.forAsync = function (callBack, finish) {
}
})(0)
};
/**
* 数组递归循环
* callBack(item,depth) 处理函数接受两个参数
* item 循环对象
* depth 循环深度数组[0,0,0]长度即为深度
*/
Array.prototype.forTreeDepth = function (callBack) {
(function loop(data, depth) {
if (Array.isArray(data) && data.length > 0) {
data.forEach(function (item, i) {
var depth_ = depth.slice(0);
depth_.push(i);
callBack(item, depth_);
loop(item.children, depth_);
});
}
})(this, []);
};
/**
* 数组递归循环
* callBack(item) 处理函数
*/
Array.prototype.forTree = function (callBack) {
this.forTreeDepth(function (item, depth) {
callBack(item);
})
};
/**
* 自定义Map对象
*/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save

Powered by TurnKey Linux.