|
@@ -4,25 +4,134 @@
|
|
|
<el-col :span="24" class="index">
|
|
|
<el-col :span="24" class="top">
|
|
|
<topInfo :topTitle="pageTitle"></topInfo>
|
|
|
+ <el-col :span="24" class="topAdd">
|
|
|
+ <el-button type="primary" size="mini" @click="toAdd()"><i class="el-icon-plus"></i>添加菜单</el-button>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="info">
|
|
|
- 主体
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" :usePage="false"></data-table>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <el-drawer title="菜单" :visible.sync="drawer" direction="rtl" @closed="handleClose" :destroy-on-close="true">
|
|
|
+ <el-form :model="form" size="mini" label-width="120px" style="padding:10px">
|
|
|
+ <el-form-item label="名称" prop="role_name">
|
|
|
+ <el-input v-model="form.role_name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="菜单分级" prop="type">
|
|
|
+ <el-select v-model="form.type" @change="clearCode">
|
|
|
+ <el-option value="1" label="一级菜单"></el-option>
|
|
|
+ <el-option value="2" label="二级菜单"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称" prop="code" v-if="form.type == 2">
|
|
|
+ <el-select v-model="form.code" @change="updateView">
|
|
|
+ <el-option v-for="(i, index) in list" :key="index" :label="i.role_name" :value="i.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="路由" prop="url">
|
|
|
+ <el-input v-model="form.url"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="drawerSave">保存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import topInfo from '@/layout/public/top.vue';
|
|
|
+import dataTable from '@/components/data-table.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions } = createNamespacedHelpers('role');
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
components: {
|
|
|
topInfo,
|
|
|
+ dataTable,
|
|
|
+ },
|
|
|
+ data: () => ({
|
|
|
+ drawer: false,
|
|
|
+ form: {},
|
|
|
+ drawerIsNew: true,
|
|
|
+ opera: [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ method: 'edit',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ icon: 'el-icon-delete',
|
|
|
+ method: 'delete',
|
|
|
+ confirm: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fields: [
|
|
|
+ { label: '名称', prop: 'role_name', model: 'role_name' },
|
|
|
+ { label: '路由', prop: 'url', model: 'url' },
|
|
|
+ ],
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['query', 'create', 'update', 'delete']),
|
|
|
+ // 查询列表
|
|
|
+ async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ const res = await this.query({ ...info, category: this.category });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `list`, res.data);
|
|
|
+ this.$set(this, `total`, res.total);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加
|
|
|
+ toAdd() {
|
|
|
+ this.drawer = true;
|
|
|
+ },
|
|
|
+ // 创建
|
|
|
+ async drawerSave({ data = this.form, isNew = this.drawerIsNew }) {
|
|
|
+ let res;
|
|
|
+ let msg;
|
|
|
+ if (isNew) {
|
|
|
+ res = await this.create(data);
|
|
|
+ msg = '创建成功';
|
|
|
+ } else {
|
|
|
+ res = await this.update(data);
|
|
|
+ msg = '修改成功';
|
|
|
+ }
|
|
|
+ if (this.$checkRes(res, msg, res.errmsg)) {
|
|
|
+ this.handleClose();
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改
|
|
|
+ toEdit({ data }) {
|
|
|
+ if (data.code) data.type = '2';
|
|
|
+ this.$set(this, 'form', data);
|
|
|
+ this.drawer = true;
|
|
|
+ this.drawerIsNew = false;
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ async toDelete({ data }) {
|
|
|
+ const res = await this.delete(data.id);
|
|
|
+ if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.drawer = false;
|
|
|
+ this.form = {};
|
|
|
+ this.drawerIsNew = true;
|
|
|
+ },
|
|
|
+ clearCode(data) {
|
|
|
+ if (data == '1') this.form.code = undefined;
|
|
|
+ },
|
|
|
+ updateView() {
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
},
|
|
|
- data: () => ({}),
|
|
|
- created() {},
|
|
|
- methods: {},
|
|
|
computed: {
|
|
|
pageTitle() {
|
|
|
return `${this.$route.meta.title}`;
|
|
@@ -33,4 +142,12 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.topAdd {
|
|
|
+ padding: 10px 20px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+</style>
|