|
|
|
|
@ -1,6 +1,10 @@
|
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
|
<el-card class="box-card search">
|
|
|
|
|
<el-form :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
|
|
|
|
|
<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="code">
|
|
|
|
|
<el-input v-model="vm.code" clearable size="small" placeholder="请输入资源代码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
@ -11,7 +15,8 @@
|
|
|
|
|
<el-input v-model="vm.comment" clearable size="small" placeholder="请输入资源描述"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="资源类型" prop="resourceType">
|
|
|
|
|
<el-input-dict v-model="vm.resourceType" clearable size="small" placeholder="请输入资源类型" dict-name="RESOURCE_TYPE" ></el-input-dict>
|
|
|
|
|
<el-input-dict v-model="vm.resourceType" clearable size="small" placeholder="请输入资源类型"
|
|
|
|
|
dict-name="RESOURCE_TYPE"></el-input-dict>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="是否有效" prop="valid">
|
|
|
|
|
<el-radio-group v-model="vm.valid" clearable size="small">
|
|
|
|
|
@ -24,41 +29,14 @@
|
|
|
|
|
<el-button type="warning" size="small" icon="el-icon-refresh-left" @click="onReset('vm')">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-card class="box-card data">
|
|
|
|
|
<el-divider><i class="el-icon-search"></i></el-divider>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-button type="success" size="small" icon="el-icon-plus" @click="onCreate">新增</el-button>
|
|
|
|
|
|
|
|
|
|
<el-button type="warning" size="small" icon="el-icon-download" @click="onExport">导出</el-button>
|
|
|
|
|
|
|
|
|
|
<el-dialog class="form" :title="form.title" :visible.sync="form.dialog">
|
|
|
|
|
<el-form :model="form" :inline="true" :rules="formRules" ref="form" label-position="right" label-width="90px">
|
|
|
|
|
<el-form-item label="资源代码" prop="code">
|
|
|
|
|
<el-input v-model="form.code" clearable size="small" placeholder="请输入资源代码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="资源内容" prop="value">
|
|
|
|
|
<el-input v-model="form.value" clearable size="small" placeholder="请输入资源内容"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="资源描述" prop="comment">
|
|
|
|
|
<el-input v-model="form.comment" clearable size="small" placeholder="请输入资源描述"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="资源类型" prop="resourceType">
|
|
|
|
|
<el-input-dict v-model="form.resourceType" clearable size="small" placeholder="请输入资源类型" dict-name="RESOURCE_TYPE" ></el-input-dict>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="是否有效" prop="valid">
|
|
|
|
|
<el-radio-group v-model="form.valid" clearable size="small">
|
|
|
|
|
<el-radio :label="true">是</el-radio>
|
|
|
|
|
<el-radio :label="false">否</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button size="small" @click="form.dialog = false">取 消</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="onSave">保存</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
@ -98,6 +76,16 @@
|
|
|
|
|
label="主键"
|
|
|
|
|
width="140">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="valid"
|
|
|
|
|
label="是否有效"
|
|
|
|
|
width="60">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-tag size="mini" v-if="scope.row.valid">有效</el-tag>
|
|
|
|
|
<el-tag size="mini" type="danger" v-if="!scope.row.valid">无效</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="code"
|
|
|
|
|
@ -106,7 +94,8 @@
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="value"
|
|
|
|
|
label="资源内容">
|
|
|
|
|
label="资源内容"
|
|
|
|
|
width="300">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
@ -118,11 +107,6 @@
|
|
|
|
|
prop="resourceType"
|
|
|
|
|
label="资源类型">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="valid"
|
|
|
|
|
label="是否有效">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="createTime"
|
|
|
|
|
@ -135,7 +119,8 @@
|
|
|
|
|
width="120"
|
|
|
|
|
label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-dropdown size="mini" split-button type="primary" @click="onCommand(['edit',scope.row])"
|
|
|
|
|
<el-dropdown size="mini" split-button type="primary"
|
|
|
|
|
@click="onCommand(['edit',scope.row])"
|
|
|
|
|
@command="onCommand">
|
|
|
|
|
<i class="el-icon-edit"></i>编辑
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
@ -157,8 +142,102 @@
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="vm.totalCount">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="树状展示" name="tree">
|
|
|
|
|
<span slot="label"><i class="el-icon-share"></i>树状展示</span>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-input v-model="treeKeyword" clearable size="mini" placeholder="请输入资源内容" @change="onChange" style="width: 200px;" ></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-button-group style="float: right;">
|
|
|
|
|
<el-tooltip effect="dark" content="批量删除" placement="bottom">
|
|
|
|
|
<el-button size="small" icon="el-icon-delete" @click="onBitchDelete"></el-button>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
|
|
<el-tooltip effect="dark" content="刷新" placement="bottom">
|
|
|
|
|
<el-button size="small" icon="el-icon-refresh" @click="onLoadTree"></el-button>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</el-button-group>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-tree
|
|
|
|
|
style="margin-top: 10px"
|
|
|
|
|
:data="treeData"
|
|
|
|
|
show-checkbox
|
|
|
|
|
node-key="id"
|
|
|
|
|
ref="tree"
|
|
|
|
|
default-expand-all
|
|
|
|
|
:filter-node-method="filterTree"
|
|
|
|
|
:expand-on-click-node="false">
|
|
|
|
|
<div class="tree" slot-scope="{ node, data }">
|
|
|
|
|
<span>{{ data.comment }}<span style="color: #409EFF">[{{data.code}}]</span></span>
|
|
|
|
|
<span>
|
|
|
|
|
<el-button
|
|
|
|
|
icon="el-icon-plus"
|
|
|
|
|
type="text"
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="onTreeCreate(data)">
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
icon="el-icon-edit"
|
|
|
|
|
type="text"
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="onTreeEdit(data)">
|
|
|
|
|
</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tree>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-dialog class="form-dialog" :title="form.title" :visible.sync="form.dialog">
|
|
|
|
|
<el-form class=form" :model="form" :inline="true" :rules="formRules" ref="form"
|
|
|
|
|
label-position="right" label-width="90px">
|
|
|
|
|
<el-form-item label="资源代码" prop="code">
|
|
|
|
|
<el-input v-model="form.code" clearable size="small"
|
|
|
|
|
placeholder="请输入资源代码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="资源内容" prop="value">
|
|
|
|
|
<el-input v-model="form.value" clearable size="small"
|
|
|
|
|
placeholder="请输入资源内容"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="资源描述" prop="comment">
|
|
|
|
|
<el-input v-model="form.comment" clearable size="small"
|
|
|
|
|
placeholder="请输入资源描述"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="资源类型" prop="resourceType">
|
|
|
|
|
<el-input-dict v-model="form.resourceType" clearable size="small"
|
|
|
|
|
placeholder="请输入资源类型"
|
|
|
|
|
dict-name="RESOURCE_TYPE"></el-input-dict>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="是否有效" prop="valid">
|
|
|
|
|
<el-radio-group v-model="form.valid" clearable size="small">
|
|
|
|
|
<el-radio :label="true">是</el-radio>
|
|
|
|
|
<el-radio :label="false">否</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button size="small" @click="form.dialog = false">取 消</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="onSave">保存</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
<style>
|
|
|
|
|
.tree {
|
|
|
|
|
flex: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
var app = new Vue({
|
|
|
|
|
mixins: [mixin],
|
|
|
|
|
@ -207,7 +286,9 @@
|
|
|
|
|
valid: [
|
|
|
|
|
{required: true, message: '是否有效不能为空', trigger: 'blur'},
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
treeKeyword: '',
|
|
|
|
|
treeData: []
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onCreate: function () {
|
|
|
|
|
@ -220,6 +301,34 @@
|
|
|
|
|
this.form.resourceType = "";
|
|
|
|
|
this.form.valid = "";
|
|
|
|
|
},
|
|
|
|
|
onTreeCreate: function (pItem) {
|
|
|
|
|
this.form.title = "资源新增";
|
|
|
|
|
this.form.dialog = true;
|
|
|
|
|
this.form.id = "";
|
|
|
|
|
this.form.code = pItem.code + "_";
|
|
|
|
|
this.form.value = "";
|
|
|
|
|
this.form.comment = "";
|
|
|
|
|
this.form.resourceType = "";
|
|
|
|
|
this.form.valid = "";
|
|
|
|
|
},
|
|
|
|
|
onTreeEdit: function (pItem) {
|
|
|
|
|
this.form.title = "资源编辑";
|
|
|
|
|
this.form.dialog = true;
|
|
|
|
|
this.form.id = pItem.id;
|
|
|
|
|
this.form.code = pItem.code;
|
|
|
|
|
this.form.value = pItem.value;
|
|
|
|
|
this.form.comment = pItem.comment;
|
|
|
|
|
this.form.resourceType = pItem.resourceType;
|
|
|
|
|
this.form.valid = pItem.valid;
|
|
|
|
|
this.form.rowVersion = pItem.rowVersion;
|
|
|
|
|
},
|
|
|
|
|
onChange:function (value) {
|
|
|
|
|
this.$refs.tree.filter(value);
|
|
|
|
|
},
|
|
|
|
|
filterTree:function (value, data) {
|
|
|
|
|
if (!value) return true;
|
|
|
|
|
return data.comment.indexOf(value) !== -1;
|
|
|
|
|
},
|
|
|
|
|
onCommand: function (arg) {
|
|
|
|
|
const cmd = arg[0];
|
|
|
|
|
const item = arg[1];
|
|
|
|
|
@ -243,9 +352,29 @@
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoadTree: function () {
|
|
|
|
|
this.$ajax.post({
|
|
|
|
|
module: "system",
|
|
|
|
|
target: "resource",
|
|
|
|
|
method: "tree",
|
|
|
|
|
data: {}
|
|
|
|
|
}).then(function (response) {
|
|
|
|
|
if (response.errors.length > 0) {
|
|
|
|
|
this.e(response.errors[0].message);
|
|
|
|
|
} else {
|
|
|
|
|
this.treeData = response.result;
|
|
|
|
|
}
|
|
|
|
|
}.bind(this))
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
treeKeyword:function(val) {
|
|
|
|
|
this.$refs.tree.filter(val);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted: function () {
|
|
|
|
|
this.onFind();
|
|
|
|
|
},
|
|
|
|
|
this.onLoadTree();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
wangbing
5 years ago