配置引导页完成

core/apps/AppMenuManager/introPage.vue

@@ -1,57 +1,82 @@
 <template>
   <section class="introPage">
-    <ai-detail list>
-      <ai-title slot="title" title="引导页配置" isShowBottomBorder>
+    <ai-detail :list="!edit">
+      <ai-title slot="title" title="引导页配置" isShowBottomBorder isShowBack @onBackClick="$router.push({})">
         <template #rightBtn>
-          <el-row type="flex">
-            <component-lib @select="handleAddComp"/>
-            <el-button type="text" @click="submit">保存</el-button>
-            <el-button type="text" @click="">取消</el-button>
-          </el-row>
+          <ai-edit-btn @edit="edit=true,getConfigs()" @cancel="edit=false" @submit="submit"/>
         </template>
       </ai-title>
       <template #content>
-        <ai-drag v-for="comp in configs" :key="comp.value" :w="comp.width" :h="comp.height" parent>
-          <comp-render :ops="comp"/>
-        </ai-drag>
-        <div v-if="!hasConfigs" class="empty">编辑区域</div>
+        <el-form v-if="edit" :model="form" ref="IntroForm" size="small" :rules="rules" label-width="120px">
+          <ai-card title="基本信息">
+            <template #content>
+              <el-form-item label="副标题" prop="subtitle">
+                <el-input v-model="form.subtitle" clearable placeholder="请输入"/>
+              </el-form-item>
+              <el-form-item label="操作示例链接" prop="operationExamples">
+                <el-input v-model="form.operationExamples" clearable placeholder="请输入"/>
+              </el-form-item>
+            </template>
+          </ai-card>
+          <ai-card title="引导内容">
+            <template #content>
+              <el-form-item label-width="0" prop="guideContent">
+                <ai-editor :instance="instance" v-model="form.guideContent" placeholder="请输入"/>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </el-form>
+        <ai-intro v-else :id="$route.query.id" v-bind="$props"/>
       </template>
     </ai-detail>
   </section>
 </template>
 
 <script>
-import AiDrag from "../../components/AiDrag";
-import ComponentLib from "./tools/componentLib";
 import AiEditBtn from "../../components/AiEditBtn";
-import CompRender from "./tools/compRender";
 
 export default {
   name: "introPage",
-  components: {CompRender, AiEditBtn, ComponentLib, AiDrag},
+  components: {AiEditBtn},
   props: {
     instance: Function,
     dict: {default: () => ({})}
   },
-  computed: {
-    hasConfigs: v => v.configs?.length > 0
-  },
   data() {
     return {
       form: {},
-      configs: []
+      rules: {
+        subtitle: {required: true, message: "请输入副标题"},
+        guideContent: {required: true, message: "请输入引导内容"},
+      },
+      edit: false
     }
   },
   methods: {
-    handleAddComp(comp) {
-      console.log(comp)
-      this.configs.push({...comp})
+    getConfigs() {
+      const {id} = this.$route.query
+      this.instance.post("/admin/sysappguideconfig/queryDetailById", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.form = res.data
+        }
+      })
     },
-    submit() {
-
+    submit(cb) {
+      this.$refs.IntroForm.validate(v => {
+        if (v) {
+          const {form, $route: {query: {id}}} = this
+          this.instance.post("/admin/sysappguideconfig/addOrUpdate", {...form, id}).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("提交成功!")
+              cb()
+              this.edit = false
+            }
+          })
+        }
+      })
     }
-  },
-  created() {
   }
 }
 </script>
@@ -60,19 +85,12 @@ export default {
 .introPage {
   height: 100%;
 
-  .empty {
-    width: 100%;
-    min-height: calc(100vh - 180px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 48px;
-    color: #999;
-    border: 1px dashed #ddd;
-  }
-
   ::v-deep.ai-detail__content--wrapper {
     min-height: 100%;
+
+    &.list {
+      padding-top: 0;
+    }
   }
 }
 </style>

core/apps/AppMenuManager/tools/compRender.vue

@@ -1,22 +0,0 @@
-<template>
-  <section class="compRender">
-
-  </section>
-</template>
-
-<script>
-export default {
-  name: "compRender",
-  data() {
-    return {}
-  },
-  methods: {},
-  created() {
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.compRender {
-}
-</style>

core/apps/AppMenuManager/tools/componentLib.vue

@@ -1,67 +0,0 @@
-<template>
-  <section class="componentLib">
-    <el-button type="text" @click="drawer=true">组件库</el-button>
-    <el-drawer title="组件库" :visible.sync="drawer" direction="ltr" :modal="false" size="100%">
-      <el-row class="item" type="flex" align="middle" v-for="item in list" :key="item.value" @click.native="handleClick">
-        <i class="icon" :class="item.icon"/>
-        <div class="fill mar-l8" v-text="item.label"/>
-      </el-row>
-    </el-drawer>
-  </section>
-</template>
-
-<script>
-
-export default {
-  name: "componentLib",
-  data() {
-    return {
-      drawer: true,
-      list: [
-        {value: 'text', icon: 'iconfont iconrich_text', label: "文字组件", width: 300, height: 32},
-        {value: 'image', icon: 'el-icon-picture', label: "图片组件", width: 300, height: 300},
-        {value: 'startBtn', icon: 'el-icon-video-play', label: "开始使用", width: 80, height: 32},
-      ]
-    }
-  },
-  methods: {
-    handleClick(item) {
-      this.$emit('select', item)
-    }
-  },
-  created() {
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.componentLib {
-  .mar-l8 {
-    margin-left: 8px;
-  }
-
-  .item {
-    font-size: 16px;
-    margin: 8px;
-    padding: 4px;
-    border: 1px dashed #ddd;
-    cursor: pointer;
-
-    &:hover {
-      opacity: .8;
-    }
-
-    .icon {
-      font-size: 20px;
-    }
-  }
-
-  ::v-deep.el-drawer__wrapper {
-    position: fixed !important;
-    top: 96px;
-    bottom: 0;
-    left: 0;
-    width: 200px;
-  }
-}
-</style>

core/apps/AppMenuManager/tools/fieldPane.vue

@@ -1,22 +0,0 @@
-<template>
-  <section class="fieldPane">
-    <el-drawer></el-drawer>
-  </section>
-</template>
-
-<script>
-export default {
-  name: "fieldPane",
-  data() {
-    return {}
-  },
-  methods: {},
-  created() {
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.fieldPane {
-}
-</style>

core/components/AiEditBtn.vue

@@ -18,8 +18,10 @@ export default {
   },
   methods: {
     handleOper(event) {
-      this.edit = !this.edit
-      this.$emit(event)
+      if (event != "submit") {
+        this.edit = !this.edit
+        this.$emit(event)
+      } else this.$emit(event, () => this.edit = !this.edit)
     }
   }
 }