优化代码

project/oms/apps/develop/AppDeployCustom/config/wxmpConfig.vue

@@ -0,0 +1,115 @@
+<script>
+import AiLibTable from "../AiLibTable.vue";
+
+export default {
+  name: "wxmpConfig",
+  components: {AiLibTable},
+  model: {
+    prop: "form",
+    event: "input"
+  },
+  props: {
+    form: Object,
+    title: String
+  },
+  watch: {
+    form: {
+      handler() {
+        this.$emit("input", this.form)
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      colConfigs: [
+        {prop: 'text', label: "名称", width: 120},
+        {prop: 'pagePath', label: "应用路径"},
+        {prop: 'iconPath', label: "默认图标"},
+        {prop: 'selectedIconPath', label: "选中图标"},
+      ],
+      tabBar: {
+        color: "#666666",
+        selectedColor: "#197DF0",
+        backgroundColor: "#ffffff",
+        list: [
+          {pagePath: "pages/AppHome/AppHome", text: "首页", iconPath: "static/TabBar/home.png", selectedIconPath: "static/TabBar/home_selected.png"},
+          {pagePath: "pages/AppModules/AppModules", text: "应用", iconPath: "static/TabBar/service.png", selectedIconPath: "static/TabBar/service_selected.png"},
+          {
+            pagePath: "pages/AppEnteringVillage/AppEnteringVillage", text: "进村",
+            iconPath: "static/TabBar/custom.png", selectedIconPath: "static/TabBar/custom_selected.png"
+          },
+          {pagePath: "pages/AppMine/AppMine", text: "我的", iconPath: "static/TabBar/me.png", selectedIconPath: "static/TabBar/me_selected.png"}
+        ]
+      }
+    }
+  },
+  methods: {
+    handleTabbarChange(row, {name, label}) {
+      row.text = label
+      row.pagePath = `pages/${name}/${name}`
+    },
+    handleTabbarDelete(i) {
+      this.tabBar.list?.splice(i, 1)
+    },
+    handleTabbarPosition(i, offset) {
+      const row = this.tabBar.list[i]
+      this.tabBar.list.splice(i, 1, this.tabBar.list[i + offset])
+      this.tabBar.list.splice(i + offset, 1, row)
+    }
+  }
+}
+</script>
+
+<template>
+  <ai-card :title="title" class="wxmpConfig">
+    <template #content>
+      <el-form-item label="小程序AppId">
+        <el-input v-model="form.appId" clearable placeholder="小程序appId"/>
+      </el-form-item>
+      <el-form-item label="半屏小程序">
+        <el-input v-model="form.embeddedAppIdList" clearable placeholder="如果有多个,请用英文','分割"/>
+      </el-form-item>
+      <el-form-item label="接口是否单服务">
+        <el-checkbox v-model="form.isSingleService"/>
+      </el-form-item>
+      <el-form-item label="引导页">
+        <el-input v-model="form.guide" placeholder="带'/'会被认为是输入的页面路径" clearable/>
+      </el-form-item>
+      <ai-title class="row" title="底部导航栏">
+        <el-button type="text" slot="rightBtn" icon="iconfont iconAdd" @click="tabBar.list.push({})">添加</el-button>
+      </ai-title>
+      <ai-table class="row" :tableData="tabBar.list" :colConfigs="colConfigs" tableSize="mini" :isShowPagination="false" border ref="TabBar">
+        <el-table-column slot="options" label="操作" width="260" align="center">
+          <template slot-scope="{row,$index}">
+            <el-row type="flex" class="tabBarOptions">
+              <ai-dialog-btn text="更换" dialogTitle="选择应用">
+                <ai-lib-table :meta="appList" v-model="row.id" @select="v=>handleTabbarChange(row,v)" :isShowPagination="false" v-bind="$props"
+                              :border="false"/>
+              </ai-dialog-btn>
+              <ai-dialog-btn text="编辑" dialogTitle="编辑导航栏" width="600px">
+                <el-form-item label="名称">
+                  <el-input v-model="row.text" placeholder="请输入" clearable/>
+                </el-form-item>
+                <el-form-item label="默认图标">
+                  <el-input v-model="row.iconPath" placeholder="请输入" clearable/>
+                </el-form-item>
+                <el-form-item label="选中图标">
+                  <el-input v-model="row.selectedIconPath" placeholder="请输入" clearable/>
+                </el-form-item>
+              </ai-dialog-btn>
+              <el-button type="text" @click="handleTabbarDelete($index)">删除</el-button>
+              <el-button type="text" @click="handleTabbarPosition($index,-1)" v-if="$index>0">上移</el-button>
+              <el-button type="text" @click="handleTabbarPosition($index,1)" v-if="$index<tabBar.list.length-1">下移</el-button>
+            </el-row>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-card>
+</template>
+
+<style scoped lang="scss">
+.wxmpConfig {
+}
+</style>