|
|
@@ -0,0 +1,219 @@
|
|
|
+<template>
|
|
|
+ <div id="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main animate__animated animate__backInRight">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <c-search></c-search>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <data-form :fields="fields" :form="form" :rules="{}" @save="toSave" :span="24">
|
|
|
+ <template #logo_url="{ item }">
|
|
|
+ <c-upload v-model="form[item.model]" url="/files/projectadmin/imgurl/upload" :limit="1"></c-upload>
|
|
|
+ </template>
|
|
|
+ <template #foot_menus="{ item }">
|
|
|
+ <el-button type="primary" size="small" @click="menusAdd()">添加</el-button>
|
|
|
+ <data-table :fields="mfields" :opera="mopera" :data="form[item.model]" :usePage="false" @edit="menusEdit" @del="menusDel">
|
|
|
+ <template #normal="{ row, item }">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ @click="imgView(row[item.model])"
|
|
|
+ :src="row[item.model] && row[item.model].length > 0 ? row[item.model][0].uri : ''"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ <template #active="{ row, item }">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ @click="imgView(row[item.model])"
|
|
|
+ :src="row[item.model] && row[item.model].length > 0 ? row[item.model][0].uri : ''"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ </data-table>
|
|
|
+ </template>
|
|
|
+ </data-form>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <c-dialog :dialog="dialog" @toClose="toClose">
|
|
|
+ <template v-slot:info>
|
|
|
+ <el-col :span="24" class="dialog_one" v-if="dialog.type == '1'">
|
|
|
+ <data-form :fields="otherFields" :form="otherForm" :rules="{}" @save="dialogSave" :span="24">
|
|
|
+ <template #normal="{ item }">
|
|
|
+ <c-upload v-model="otherForm[item.model]" url="/files/projectadmin/imgurl/upload" :limit="1"></c-upload>
|
|
|
+ </template>
|
|
|
+ <template #active="{ item }">
|
|
|
+ <c-upload v-model="otherForm[item.model]" url="/files/projectadmin/imgurl/upload" :limit="1"></c-upload>
|
|
|
+ </template>
|
|
|
+ <template #type>
|
|
|
+ <el-option v-for="i in jumptypeLsit" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
+ </template>
|
|
|
+ <template #is_use>
|
|
|
+ <el-option v-for="i in isuseList" :key="i._id" :label="i.label" :value="i.value"></el-option>
|
|
|
+ </template>
|
|
|
+ </data-form>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </c-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions } = createNamespacedHelpers('appbasic');
|
|
|
+const { mapActions: dictdata } = createNamespacedHelpers('dictdata');
|
|
|
+const moment = require('moment');
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'index',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ form: { logo_url: [], foot_menus: [] },
|
|
|
+ fields: [
|
|
|
+ { label: '公司名称', model: 'name' },
|
|
|
+ { label: '公司logo', model: 'logo_url', custom: true },
|
|
|
+ { label: '底部菜单', model: 'foot_menus', custom: true },
|
|
|
+ ],
|
|
|
+ // 底部菜单
|
|
|
+ mfields: [
|
|
|
+ { label: '名称', model: 'name' },
|
|
|
+ { label: '跳转路径', model: 'route' },
|
|
|
+ {
|
|
|
+ label: '跳转类型',
|
|
|
+ model: 'type',
|
|
|
+ format: (i) => {
|
|
|
+ let data = this.jumptypeLsit.find((r) => r.value == i);
|
|
|
+ if (data) return data.label;
|
|
|
+ else return '暂无';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ { label: '排序', model: 'sort' },
|
|
|
+ {
|
|
|
+ label: '是否启用',
|
|
|
+ model: 'is_use',
|
|
|
+ format: (i) => {
|
|
|
+ let data = this.isuseList.find((r) => r.value == i);
|
|
|
+ if (data) return data.label;
|
|
|
+ else return '暂无';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ { label: '未选中', model: 'normal', custom: true },
|
|
|
+ { label: '选中', model: 'active', custom: true },
|
|
|
+ ],
|
|
|
+ mopera: [
|
|
|
+ { label: '修改', method: 'edit' },
|
|
|
+ { label: '删除', method: 'del', confirm: true, type: 'danger' },
|
|
|
+ ],
|
|
|
+ // 弹框
|
|
|
+ dialog: { title: '底部菜单', show: false, type: '1' },
|
|
|
+ otherFields: [
|
|
|
+ { label: '名称', model: 'name' },
|
|
|
+ { label: '跳转路径', model: 'route' },
|
|
|
+ { label: '跳转类型', model: 'type', type: 'select' },
|
|
|
+ { label: '排序', model: 'sort', type: 'number' },
|
|
|
+ { label: '是否启用', model: 'is_use', type: 'select' },
|
|
|
+ { label: '未选中', model: 'normal', custom: true },
|
|
|
+ { label: '选中', model: 'active', custom: true },
|
|
|
+ ],
|
|
|
+ otherForm: { normal: [], active: [] },
|
|
|
+ // 字典
|
|
|
+ isuseList: [],
|
|
|
+ // 跳转类型
|
|
|
+ jumptypeLsit: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ await this.searchOther();
|
|
|
+ await this.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['query', 'create', 'update']),
|
|
|
+ ...dictdata({ dQuery: 'query' }),
|
|
|
+ async search() {
|
|
|
+ let res = await this.query();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ let data = res.data;
|
|
|
+ if (!data.logo_url) data.logo_url = [];
|
|
|
+ if (!data.foot_menus) data.foot_menus = [];
|
|
|
+ this.$set(this, `form`, data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 保存信息
|
|
|
+ async toSave({ data }) {
|
|
|
+ let res;
|
|
|
+ if (data.id) res = await this.update(data);
|
|
|
+ else res = await this.create(data);
|
|
|
+ if (this.$checkRes(res, '维护信息成功', res.errmsg)) this.search();
|
|
|
+ },
|
|
|
+ // 菜单添加
|
|
|
+ menusAdd() {
|
|
|
+ this.dialog = { title: '底部菜单', show: true, type: '1' };
|
|
|
+ },
|
|
|
+ // 修改
|
|
|
+ menusEdit({ data }) {
|
|
|
+ this.$set(this, `otherForm`, data);
|
|
|
+ this.dialog = { title: '底部菜单', show: true, type: '1' };
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ menusDel({ data }) {
|
|
|
+ let foot_menus = this.form.foot_menus.filter((i) => i.id != data.id);
|
|
|
+ this.$set(this.form, `foot_menus`, foot_menus);
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ dialogSave({ data }) {
|
|
|
+ if (!data.id) {
|
|
|
+ data.id = moment().valueOf();
|
|
|
+ this.form.foot_menus = [...this.form.foot_menus, data];
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ this.toClose();
|
|
|
+ },
|
|
|
+ // 关闭弹框
|
|
|
+ toClose() {
|
|
|
+ this.otherForm = {};
|
|
|
+ this.dialog = { title: '底部菜单', show: false, type: '1' };
|
|
|
+ },
|
|
|
+ // 字典
|
|
|
+ async searchOther() {
|
|
|
+ let res;
|
|
|
+ // 是否启用
|
|
|
+ res = await this.dQuery({ type: 'is_use' });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `isuseList`, res.data);
|
|
|
+ }
|
|
|
+ // 跳转类型
|
|
|
+ res = await this.dQuery({ type: 'jump_type' });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `jumptypeLsit`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 预览图片
|
|
|
+ imgView(e) {
|
|
|
+ if (e && e.length > 0) {
|
|
|
+ window.open(e[0].uri);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ test: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.image {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+</style>
|
