定制方案小程序完成

project/oms/apps/develop/AppDeployCustom/AiLibTable.vue

@@ -48,7 +48,8 @@ export default {
     searchKey: {default: "name"},
     multiple: Boolean,
     disabled: Boolean,
-    meta: {default: () => []}
+    meta: {default: () => []},
+    choose: {default: null}
   },
   data() {
     return {
@@ -65,7 +66,9 @@ export default {
       ]
     },
     selected() {
-      return [this.value].flat().filter(e => !!e) || []
+      const {choose, value, nodeKey} = this,
+          list = [choose].flat().map(e => e?.[nodeKey])
+      return [...new Set([value, list].flat())].filter(Boolean) || []
     }
   },
   watch: {
@@ -103,15 +106,21 @@ export default {
     handleCheck(row) {
       const {nodeKey} = this
       if (this.multiple) {
-        let selected = this.$copy(this.selected)
+        let selected = this.$copy(this.selected),
+            choose = this.$copy(this.choose)
         if (row.checked) {
           selected.push(row[nodeKey])
+          choose.push(row)
         } else {
           selected = selected.filter(e => e != row[nodeKey])
+          choose = choose.filter(e => e[nodeKey] != row[nodeKey])
         }
         this.$emit("change", selected)
+        this.$emit("update:choose", choose)
       } else {
+        this.tableData.map(e => e.checked = e[nodeKey] == row.id && row.checked)
         this.$emit("change", row.checked ? row[nodeKey] : '')
+        this.$emit("update:choose", row.checked ? row : null)
       }
     },
     handleCheckAll(v) {
@@ -119,8 +128,9 @@ export default {
       let selected = this.tableData.map(e => {
         e.checked = v
         return e
-      }).filter(e => e.checked)?.map(e => e[nodeKey]) || []
+      }).filter(e => e.checked) || []
-      this.$emit("change", selected)
+      this.$emit("change", selected?.map(e => e[nodeKey]))
+      this.$emit("update:choose", selected)
     }
   },
   created() {

project/oms/apps/develop/AppDeployCustom/add.vue

@@ -14,7 +14,7 @@
                   <el-row type="flex">
                     <div class="fill">
                       <el-form-item label="系统类型" prop="type">
-                        <ai-select v-model="form.type" :selectList="dict.getDict('systemType')"/>
+                        <ai-select v-model="form.type" :selectList="dict.getDict('systemType')" @change="form.apps = [],handleSysTypeChange(form.type)"/>
                       </el-form-item>
                       <el-form-item label="更新项目路径" prop="dist">
                         <el-input v-model="form.dist" placeholder="常填写nginx路径,下载包从这里取" clearable/>
@@ -40,9 +40,16 @@
               </ai-card>
               <ai-card title="扩展设置">
                 <template #content>
-                  <el-form-item label="主包应用设置" prop="extra">
+                  <template v-if="form.type=='mp'">
-
+                    <ai-title title="底部导航栏">
-                  </el-form-item>
+                      <template #rightBtn>
+                        <ai-dialog-btn text="更换定制页" dialogTitle="选择应用">
+                          <ai-lib-table :meta="appList" :choose.sync="customTabbar" :isShowPagination="false" v-bind="$props"/>
+                        </ai-dialog-btn>
+                      </template>
+                    </ai-title>
+                    <ai-table :tableData="tabBar.list" :colConfigs="colConfigs" tableSize="mini" :isShowPagination="false" border/>
+                  </template>
                 </template>
               </ai-card>
             </el-form>
@@ -84,17 +91,48 @@ export default {
         } else e.project = "standard"
         return e
       })
+    },
+    tabBar: v => ({
+      color: "#666666",
+      selectedColor: "#197DF0",
+      backgroundColor: "#ffffff",
+      list: [
+        {pagePath: "pages/home/home", text: "首页", iconPath: "TabBar/home.png", selectedIconPath: "TabBar/home_selected.png"},
+        {pagePath: "pages/service/service", text: "应用", iconPath: "TabBar/service.png", selectedIconPath: "TabBar/service_selected.png"},
+        v.form.customTabbar,
+        {pagePath: "pages/mine/my", text: "我的", iconPath: "TabBar/me.png", selectedIconPath: "TabBar/me_selected.png"}
+      ]
+    }),
+    customTabbar: {
+      set({name, id, label}) {
+        this.form.customTabbar = {
+          id,
+          pagePath: `pages/${name}/${name}`,
+          text: label,
+          iconPath: `TabBar/custom.png`,
+          selectedIconPath: `TabBar/custom_selected.png`
+        }
+      },
+      get() {
+        const {id} = this.form.customTabbar
+        return {id}
+      }
     }
   },
   data() {
     return {
-      form: {apps: []},
+      form: {apps: [], type: null},
       rules: {
         name: {required: true, message: "请输入"},
         type: {required: true, message: "请选择"},
         customPath: {required: true, message: "请输入"},
-        extra: {required: true, message: "请设置主页配置"},
       },
+      colConfigs: [
+        {prop: 'text', label: "名称"},
+        {prop: 'pagePath', label: "应用路径"},
+        {prop: 'iconPath', label: "默认图标"},
+        {prop: 'selectedIconPath', label: "选中图标"},
+      ]
     }
   },
   methods: {
@@ -105,6 +143,7 @@ export default {
       }).then(res => {
         if (res?.data) {
           this.form = res.data
+          this.handleSysTypeChange(this.form.type, this.form.extra)
         }
       })
     },
@@ -114,6 +153,10 @@ export default {
     submit() {
       this.$refs.AddForm.validate(v => {
         if (v) {
+          const {tabBar, form: {type}} = this
+          if (type == 'mp') {
+            this.form.extra = {tabBar}
+          }
           this.instance.post("/node/custom/addOrUpdate", this.form).then(res => {
             if (res?.code == 0) {
               this.$message.success("提交成功!")
@@ -123,6 +166,17 @@ export default {
         }
       })
     },
+    handleSysTypeChange(v, data) {
+      if (v == 'mp') {
+        const {tabBar: {list}} = data
+        this.$set(this.form, 'customTabbar', list?.[2] || {
+          pagePath: "pages/enteringVillage/enteringVillage",
+          text: "进村",
+          iconPath: "TabBar/village.png",
+          selectedIconPath: "TabBar/village_selected.png"
+        })
+      }
+    }
   },
   created() {
     this.getDetail()