|
|
@@ -0,0 +1,321 @@
|
|
|
+<template>
|
|
|
+ <div class="app-list-content">
|
|
|
+ <div class="content-wrap">
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapGetters } from 'vuex';
|
|
|
+ import operateLineModule from '@/components/module/operate-line';
|
|
|
+ export default {
|
|
|
+ name: 'set-password',
|
|
|
+ components: {
|
|
|
+ operateLineModule
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ menuOption: '0',
|
|
|
+ replyUrl: '',
|
|
|
+ targetId: 0
|
|
|
+ },
|
|
|
+ rule: {},
|
|
|
+ isModifyParents: false,
|
|
|
+ // isAdd: false,
|
|
|
+ addDialog: false,
|
|
|
+ activeIndex: null,
|
|
|
+ subActiveIndex: null,
|
|
|
+ menuData: [],
|
|
|
+ // 常用链接
|
|
|
+ urlIndex: null,
|
|
|
+ commonUrlData: [],
|
|
|
+ // 操作菜单
|
|
|
+ operateShow: [],
|
|
|
+ operateData: null,
|
|
|
+ // 按钮列表
|
|
|
+ btnData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['shopInfo', 'userInfo'])
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this._getDet();
|
|
|
+ this._getUrl();
|
|
|
+ },
|
|
|
+ _getDet() {
|
|
|
+ this.$service.setting.getMenu().then(res => {
|
|
|
+ this.menuData = res.map(e => {
|
|
|
+ if (!e.children) {
|
|
|
+ e.children = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ return e;
|
|
|
+ });
|
|
|
+ res.map(() => {
|
|
|
+ this.operateShow.push(false);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _getUrl() {
|
|
|
+ this.$service.single.commonUrl().then(res => {
|
|
|
+ this.commonUrlData = res;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async submitFn() {
|
|
|
+ console.log(this.menuData);
|
|
|
+ // return false;
|
|
|
+ await this.$service.setting.updateMenu(this.menuData).then(res => {
|
|
|
+ this.$message.success(res.msg || '提交');
|
|
|
+ // this.closeOperate();
|
|
|
+ this.resetForm();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // operate
|
|
|
+ menuClickFn(item, index) {
|
|
|
+ this.isModifyParents = true;
|
|
|
+ // this.isAdd = false;
|
|
|
+
|
|
|
+ this.closeOperate();
|
|
|
+ this.activeIndex = index;
|
|
|
+ this.operateShow[index] = true;
|
|
|
+ this.operateData = item.children || [];
|
|
|
+ // 修改
|
|
|
+ // this.dialogData = item;
|
|
|
+ // this.form.name = JSON.parse(JSON.stringify(item.name));
|
|
|
+ console.log('江总', item);
|
|
|
+ console.log('江总11', this.commonUrlData);
|
|
|
+ Object.keys(this.form).forEach(i => {
|
|
|
+ this.form[i] = item[i];
|
|
|
+ });
|
|
|
+
|
|
|
+ this.addDialog = true;
|
|
|
+ },
|
|
|
+ // operate
|
|
|
+ operateClickFn(item) {
|
|
|
+ this.isModifyParents = false;
|
|
|
+ // this.isAdd = false;
|
|
|
+ this.subActiveIndex = item.index;
|
|
|
+ console.log('item', item);
|
|
|
+ // this.dialogData = item;
|
|
|
+ item.targetId = item.targetId ? parseInt(item.targetId) : 0;
|
|
|
+
|
|
|
+ Object.keys(this.form).forEach(i => {
|
|
|
+ this.form[i] = item[i];
|
|
|
+ });
|
|
|
+ this.addDialog = true;
|
|
|
+ },
|
|
|
+ operateAddFn(index) {
|
|
|
+ if (this.operateData.length > 4) {
|
|
|
+ this.$message.warning('亲，最多只能设置五个子菜单！')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // this.isModifyParents = false;
|
|
|
+
|
|
|
+ let form = {
|
|
|
+ name: '子菜单名',
|
|
|
+ menuOption: '0',
|
|
|
+ replyUrl: '',
|
|
|
+ targetId: 0
|
|
|
+ };
|
|
|
+
|
|
|
+ this.$set(this.operateShow, this.activeIndex, false);
|
|
|
+ this.operateData.push(form);
|
|
|
+ this.menuData[this.activeIndex].children = JSON.parse(JSON.stringify(this.operateData));
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$set(this.operateShow, this.activeIndex, true);
|
|
|
+ });
|
|
|
+ // this.isAdd = true;
|
|
|
+ // this.dialogData = this.menuData[3].children[index];
|
|
|
+ // this.addDialog = true;
|
|
|
+ // if (this.$refs['form']) {
|
|
|
+ // console.log('asdf');
|
|
|
+ // this.resetForm()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ operateDelFn(index) {
|
|
|
+ console.log('我点击了删除按钮！', index)
|
|
|
+ // this.closeOperate();
|
|
|
+ this.$set(this.operateShow, this.activeIndex, false);
|
|
|
+ this.operateData.splice(index, 1);
|
|
|
+
|
|
|
+ this.menuData[this.activeIndex].children = JSON.parse(JSON.stringify(this.operateData));
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$set(this.operateShow, this.activeIndex, true);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ closeOperate() {
|
|
|
+ this.activeIndex = null;
|
|
|
+ this.operateShow = this.operateShow.map(e => (e = false));
|
|
|
+ this.addDialog = false;
|
|
|
+ // if (this.addDialog) {
|
|
|
+ // this.resetForm();
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ closeOptionFn() {
|
|
|
+ this.closeOperate();
|
|
|
+ this.resetForm();
|
|
|
+ },
|
|
|
+ // modal
|
|
|
+ confirmForm() {
|
|
|
+ let form = JSON.parse(JSON.stringify(this.form));
|
|
|
+
|
|
|
+ if (this.isModifyParents) {
|
|
|
+ Object.keys(form).forEach(i => {
|
|
|
+ this.menuData[this.activeIndex][i] = form[i];
|
|
|
+ });
|
|
|
+ console.log('江总22', this.menuData);
|
|
|
+ // 如果是父菜单操作时
|
|
|
+ // this.menuData[this.activeIndex].name = form.name;
|
|
|
+ } else {
|
|
|
+ // 如果是子菜单操作时
|
|
|
+ // if (this.isAdd) {
|
|
|
+ // } else {
|
|
|
+ this.operateData[this.subActiveIndex] = form;
|
|
|
+ // }
|
|
|
+
|
|
|
+ console.log('this.operateData', this.operateData)
|
|
|
+
|
|
|
+ this.menuData[this.activeIndex].children = JSON.parse(JSON.stringify(this.operateData));
|
|
|
+ }
|
|
|
+ this.submitFn().then(res => {
|
|
|
+ console.log('this.activeIndex', this.activeIndex);
|
|
|
+
|
|
|
+ this.addDialog = false;
|
|
|
+ // if (this.isAdd) {
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.form = {
|
|
|
+ name: '',
|
|
|
+ menuOption: '0',
|
|
|
+ replyUrl: '',
|
|
|
+ targetId: 0
|
|
|
+ };
|
|
|
+ this.$refs['form'].resetFields();
|
|
|
+ // this.addDialog = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .app-list-content {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .content-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ // wx 容器
|
|
|
+ .wx-wrap {
|
|
|
+ width: 375px;
|
|
|
+ margin: 0 15px;
|
|
|
+ padding-top: 20px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ // 头部
|
|
|
+ .wx-bar {
|
|
|
+ position: relative;
|
|
|
+ .bar-text {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wx-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 555px;
|
|
|
+ background-color: #ededed;
|
|
|
+ }
|
|
|
+ // 按钮
|
|
|
+ .wx-btn {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ padding: 10px;
|
|
|
+ height: 45px;
|
|
|
+ .key-btn {
|
|
|
+ width: 13%;
|
|
|
+ .key-btn-img {
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menu-btn {
|
|
|
+ width: 29%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ @include disFlex(center, center);
|
|
|
+ border-left: 2px solid $borderColor;
|
|
|
+ &.active {
|
|
|
+ /deep/.operate-module-line {
|
|
|
+ .operate-btn {
|
|
|
+ color: $mainColor;
|
|
|
+ .iconfont {
|
|
|
+ color: #09bb07;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconfont-blo {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ color: $fontColor3;
|
|
|
+ font-size: 24px;
|
|
|
+ transform: scale(0.6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 编辑块
|
|
|
+ .ad-modal-content {
|
|
|
+ width: 640px;
|
|
|
+ min-width: 640px;
|
|
|
+ height: 640px;
|
|
|
+ border: 20px solid #f7f7f7;
|
|
|
+ // border-top: 0;
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // padding: 20px;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+
|
|
|
+ .ad-modal-wrap {
|
|
|
+ width: 100%;
|
|
|
+ .content-j-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 460px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // justify-content: center;
|
|
|
+ // padding-left: 100px;
|
|
|
+ margin-top: 10px;
|
|
|
+ .el-button {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .prompt-text {
|
|
|
+ padding: 30px 30px 60px 30px;
|
|
|
+ color: $fontColor3;
|
|
|
+ }
|
|
|
+</style>
|
shish