首页图表开发

master
wangbing 4 years ago
parent fc170bd80e
commit a993dc104d

@ -1,206 +1,162 @@
<#-- since 2017-01-01--> <#-- since 2017-01-01-->
<div id="app" v-cloak> <div id="app" v-cloak>
<el-card class="box-card"> <el-card class="box-card">
<el-tabs :value="'list'"> <el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
<el-tab-pane label="列表展示" name="list"> <el-form-item label="部门代码" prop="deptCode">
<span slot="label"><i class="el-icon-s-operation"></i>列表展示</span> <el-input v-model="vm.deptCode" clearable size="mini" placeholder="请输入部门代码"></el-input>
</el-form-item>
<el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px"> <el-form-item label="部门名称" prop="deptName">
<el-form-item label="部门代码" prop="deptCode"> <el-input v-model="vm.deptName" clearable size="mini" placeholder="请输入部门名称"></el-input>
<el-input v-model="vm.deptCode" clearable size="mini" placeholder="请输入部门代码"></el-input> </el-form-item>
</el-form-item> <el-form-item label="部门别名" prop="deptAlias">
<el-form-item label="部门名称" prop="deptName"> <el-input v-model="vm.deptAlias" clearable size="mini" placeholder="请输入部门别名"></el-input>
<el-input v-model="vm.deptName" clearable size="mini" placeholder="请输入部门名称"></el-input> </el-form-item>
</el-form-item> <el-form-item label="上级代码" prop="supCode">
<el-form-item label="部门别名" prop="deptAlias"> <el-input v-model="vm.supCode" clearable size="mini" placeholder="请输入上级代码"></el-input>
<el-input v-model="vm.deptAlias" clearable size="mini" placeholder="请输入部门别名"></el-input> </el-form-item>
</el-form-item> <el-form-item label="上级名称" prop="supName">
<el-form-item label="上级代码" prop="supCode"> <el-input v-model="vm.supName" clearable size="mini" placeholder="请输入上级名称"></el-input>
<el-input v-model="vm.supCode" clearable size="mini" placeholder="请输入上级代码"></el-input> </el-form-item>
</el-form-item> <el-form-item label="是否有效" prop="valid">
<el-form-item label="上级名称" prop="supName"> <el-radio-group v-model="vm.valid" clearable size="mini">
<el-input v-model="vm.supName" clearable size="mini" placeholder="请输入上级名称"></el-input> <el-radio :label="true">是</el-radio>
</el-form-item> <el-radio :label="false">否</el-radio>
<el-form-item label="是否有效" prop="valid"> </el-radio-group>
<el-radio-group v-model="vm.valid" clearable size="mini"> </el-form-item>
<el-radio :label="true">是</el-radio> <el-form-item label="开始日期" prop="startDate">
<el-radio :label="false">否</el-radio> <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-radio-group> </el-form-item>
</el-form-item> <el-form-item label="结束日期" prop="endDate">
<el-form-item label="开始日期" prop="startDate"> <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-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> <el-form-item>
<el-form-item label="结束日期" prop="endDate"> <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
<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-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置
</el-form-item> </el-button>
<el-form-item> </el-form-item>
<el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button> </el-form>
<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-divider><i class="el-icon-search"></i></el-divider>
</el-col>
<el-col :span="12"> <el-row>
<el-button-group style="float: right;"> <el-col :span="12">
<el-tooltip effect="dark" content="Excel模板下载" placement="bottom"> <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
<el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="Excel导入" placement="bottom"> <el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
<el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="批量删除" placement="bottom"> <el-button type="warning" size="mini" icon="el-icon-share" @click="treeShow = true">树状</el-button>
<el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button> </el-col>
</el-tooltip>
<el-tooltip effect="dark" content="刷新" placement="bottom"> <el-col :span="12">
<el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button> <el-button-group style="float: right;">
</el-tooltip> <el-tooltip effect="dark" content="Excel模板下载" placement="bottom">
</el-button-group> <el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
</el-col> </el-tooltip>
</el-row>
<el-table <el-tooltip effect="dark" content="Excel导入" placement="bottom">
class="data" <el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
@selection-change="onSelectionChange" </el-tooltip>
empty-text="无数据"
:stripe="true"
:data="result"
size="mini">
<el-table-column
align="center"
width="45"
type="selection">
</el-table-column>
<el-table-column
align="center"
width="140"
prop="id"
label="主键">
</el-table-column>
<el-table-column
align="center"
min-width="80"
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="100"
prop="deptCode"
label="部门代码">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="deptName"
label="部门名称">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="deptAlias"
label="部门别名">
</el-table-column>
<el-table-column
align="center"
min-width="100"
prop="supCode"
label="上级代码">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="supName"
label="上级名称">
</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-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>
<el-pagination <el-tooltip effect="dark" content="批量删除" placement="bottom">
background <el-button size="mini" icon="el-icon-delete" @click="onBitchDelete"></el-button>
v-if="vm.totalCount > vm.pageSize" </el-tooltip>
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-tab-pane>
<el-tab-pane label="树状展示" name="tree">
<span slot="label"><i class="el-icon-share"></i>树状展示</span>
<el-row> <el-tooltip effect="dark" content="刷新" placement="bottom">
<el-col :span="12"> <el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
<el-input v-model="treeKeyword" clearable size="mini" placeholder="请输入资源内容" @change="onChange" </el-tooltip>
style="width: 200px;"></el-input> </el-button-group>
</el-col> </el-col>
<el-col :span="12"> </el-row>
<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-table
<el-button size="mini" icon="el-icon-refresh" @click="onLoadTree"></el-button> class="data"
</el-tooltip> @selection-change="onSelectionChange"
</el-button-group> empty-text="无数据"
</el-col> :stripe="true"
</el-row> :data="result"
size="mini">
<el-table-column
align="center"
width="45"
type="selection">
</el-table-column>
<el-table-column
align="center"
width="140"
prop="id"
label="主键">
</el-table-column>
<el-table-column
align="center"
min-width="80"
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="100"
prop="deptCode"
label="部门代码">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="deptName"
label="部门名称">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="deptAlias"
label="部门别名">
</el-table-column>
<el-table-column
align="center"
min-width="100"
prop="supCode"
label="上级代码">
</el-table-column>
<el-table-column
align="center"
min-width="150"
prop="supName"
label="上级名称">
</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-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>
<el-tree <el-pagination
style="margin-top: 10px" background
:data="treeData" v-if="vm.totalCount > vm.pageSize"
node-key="id" style="margin-top: 10px"
ref="tree" @current-change="onPageChange"
accordion @size-change="onPageSizeChange"
show-checkbox :current-page="vm.pageNumber"
:filter-node-method="filterTree" :page-size="vm.pageSize"
:expand-on-click-node="false"> layout="total, sizes, prev, pager, next, jumper"
<div class="tree" slot-scope="{ node, data }"> :total="vm.totalCount">
<span> </el-pagination>
<el-button type="text" size="mini" icon="el-icon-plus"
@click="onTreeCreate(data)"></el-button>
{{ data.label }}<span style="color: #409EFF"
@click="onTreeEdit(data)">[{{data.value}}]</span>
</span>
</div>
</el-tree>
</el-tab-pane>
</el-tabs>
</el-card> </el-card>
<el-dialog <el-dialog
@ -237,6 +193,50 @@
<el-button size="mini" type="primary" @click="onSave">保存</el-button> <el-button size="mini" type="primary" @click="onSave">保存</el-button>
</span> </span>
</el-dialog> </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="id"
ref="tree"
accordion
show-checkbox
:filter-node-method="onTreeFilter"
:expand-on-click-node="false">
<div class="tree" slot-scope="{ node, data }">
<span>
<el-button type="text" size="mini" icon="el-icon-plus"
@click="onTreeCreate(data)"></el-button>
{{ data.label }}<span style="color: #409EFF"
@click="onTreeEdit(data)">[{{data.value}}]</span>
</span>
</div>
</el-tree>
</el-main>
</el-container>
</el-drawer>
</div> </div>
<style> <style>
.tree { .tree {
@ -296,9 +296,10 @@
], ],
valid: [ valid: [
{required: true, message: '是否有效不能为空', trigger: 'blur'}, {required: true, message: '是否有效不能为空', trigger: 'blur'},
], ]
}, },
treeKeyword: '', treeShow: false,
treeFilter: '',
treeData: [] treeData: []
}, },
methods: { methods: {
@ -358,14 +359,11 @@
this.form.valid = item.valid; this.form.valid = item.valid;
this.form.rowVersion = item.rowVersion; this.form.rowVersion = item.rowVersion;
}, },
onChange: function (value) { onTreeFilter: function (value, data) {
this.$refs.tree.filter(value);
},
filterTree: function (value, data) {
if (!value) return true; if (!value) return true;
return data.deptName.indexOf(value) !== -1; return data.deptName.indexOf(value) !== -1;
}, },
onLoadTree: function () { onTreeLoad: function () {
new Ajax("wsys", "dept").method("tree").post({}, function (response) { new Ajax("wsys", "dept").method("tree").post({}, function (response) {
if (response.errors.length > 0) { if (response.errors.length > 0) {
nav.e(response.errors[0].message); nav.e(response.errors[0].message);
@ -374,46 +372,17 @@
} }
}.bind(this)) }.bind(this))
}, },
onSave: function () { onTreeOpened: function () {
this.$refs['form'].validate(function (valid) { this.onTreeLoad();
if (valid) { }
if (this.form.id) {
new Ajax("wsys", "dept").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", "dept").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));
},
}, },
watch: { watch: {
treeKeyword: function (val) { treeFilter: function (val) {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
} }
}, },
mounted: function () { mounted: function () {
this.onFind(); this.onFind();
this.onLoadTree();
} }
}) })
</script> </script>

Loading…
Cancel
Save

Powered by TurnKey Linux.