|
@@ -1,27 +1,202 @@
|
|
|
<template>
|
|
|
<div id="index">
|
|
|
<el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <p>index</p>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <el-col :span="6" class="left">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="18" class="title">
|
|
|
+ 字典类别
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="btn">
|
|
|
+ <el-button type="primary" size="mini" @click="dialog = true">添加类别</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="down">
|
|
|
+ <data-table
|
|
|
+ :fields="fields"
|
|
|
+ :opera="opera"
|
|
|
+ :data="categoryList"
|
|
|
+ :usePage="false"
|
|
|
+ @query="search"
|
|
|
+ @views="toViews"
|
|
|
+ @edit="toEdit"
|
|
|
+ @delete="toDelete"
|
|
|
+ ></data-table>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18" class="right">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="18" class="title">
|
|
|
+ 字典项
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="btn">
|
|
|
+ <el-button type="primary" size="mini" @click="$router.push({ path: '/dictionary/detail' })">添加信息</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="down">
|
|
|
+ <data-table
|
|
|
+ :fields="newsfields"
|
|
|
+ :opera="newsopera"
|
|
|
+ :data="list"
|
|
|
+ :total="total"
|
|
|
+ @query="newsSearch"
|
|
|
+ @edit="newsEdit"
|
|
|
+ @delete="newsDelete"
|
|
|
+ ></data-table>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <el-dialog title="字典信息管理" width="40%" :visible.sync="dialog" @closed="handleClose" :destroy-on-close="true">
|
|
|
+ <data-form :data="form" :fields="fields" :rules="{}" @save="toSave"> </data-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import dataTable from '@common/src/components/frame/filter-page-table.vue';
|
|
|
+import dataForm from '@common/src/components/frame/form.vue';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: category } = createNamespacedHelpers('category');
|
|
|
+const { mapActions: code } = createNamespacedHelpers('code');
|
|
|
export default {
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
},
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
- components: {},
|
|
|
+ components: { dataTable, dataForm },
|
|
|
data: function() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ // 栏目列表
|
|
|
+ opera: [
|
|
|
+ {
|
|
|
+ label: '查看信息',
|
|
|
+ method: 'views',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ method: 'edit',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ method: 'delete',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fields: [
|
|
|
+ { label: '名称', prop: 'name', model: 'name', showTip: true },
|
|
|
+ { label: '代码', prop: 'code', model: 'code' },
|
|
|
+ ],
|
|
|
+ categoryList: [],
|
|
|
+ dialog: false,
|
|
|
+ form: {},
|
|
|
+ // 信息列表
|
|
|
+ newsopera: [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ method: 'edit',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ method: 'delete',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ newsfields: [
|
|
|
+ { label: '名称', prop: 'name' },
|
|
|
+ { label: '代码', prop: 'code' },
|
|
|
+ { label: '类别代码', prop: 'category' },
|
|
|
+ ],
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ await this.search();
|
|
|
+ await this.newsSearch();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...category({ categoryQuery: 'query', categoryFetch: 'fetch', categoryCreate: 'create', categoryUpdate: 'update', categoryDelete: 'delete' }),
|
|
|
+ ...code(['query', 'fetch', 'create', 'update', 'delete']),
|
|
|
+ // 查询字典类别数据
|
|
|
+ async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ let res = await this.categoryQuery({ skip, ...info });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `categoryList`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改字典类别数据
|
|
|
+ toEdit({ data }) {
|
|
|
+ this.$set(this, `form`, data);
|
|
|
+ this.dialog = true;
|
|
|
+ },
|
|
|
+ // 删除字典类别数据
|
|
|
+ async toDelete({ data }) {
|
|
|
+ let res = await this.categoryDelete(data.id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '信息删除成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 保存字典类别数据
|
|
|
+ async toSave({ data }) {
|
|
|
+ if (data.id) {
|
|
|
+ let res = await this.categoryUpdate(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '信息修改成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.handleClose();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let res = await this.categoryCreate(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '信息创建成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.handleClose();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消字典类别数据
|
|
|
+ handleClose() {
|
|
|
+ this.form = {};
|
|
|
+ this.dialog = false;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ // 查看信息
|
|
|
+ toViews({ data }) {
|
|
|
+ this.newsSearch({ category: data.code });
|
|
|
+ },
|
|
|
+ // 字典项信息列表
|
|
|
+ async newsSearch({ skip = 0, limit = 10, category, ...info } = {}) {
|
|
|
+ if (category) info.category = category;
|
|
|
+ let res = await this.query({ skip, limit, ...info });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `list`, res.data);
|
|
|
+ this.$set(this, `total`, res.total);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改字典项
|
|
|
+ newsEdit({ data }) {
|
|
|
+ this.$router.push({ path: '/dictionary/detail', query: { id: data.id } });
|
|
|
+ },
|
|
|
+ // 删除字典项
|
|
|
+ async newsDelete({ data }) {
|
|
|
+ let res = await this.delete(data.id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '信息删除成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.newsSearch();
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
- created() {},
|
|
|
- methods: {},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
},
|
|
@@ -29,4 +204,45 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ .left {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ .top {
|
|
|
+ height: 50px;
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ .title {
|
|
|
+ padding: 2px 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ min-height: 670px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ .top {
|
|
|
+ height: 50px;
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ .title {
|
|
|
+ padding: 2px 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ min-height: 670px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|