优化小程序页面管理

src/api/cms/mpPages/model/index.ts

@@ -18,6 +18,10 @@ export interface MpPages {
   subpackage?: string;
   // 图标
   icon?: string;
+  // (优先级高于图标)
+  iconPath?: string;
+  // (优先级高于图标)
+  selectedIconPath?: string;
   // 排序(数字越小越靠前)
   sortNumber?: number;
   // 备注

src/views/cms/mpField/components/mp-field-edit.vue

@@ -27,11 +27,24 @@
       <a-form-item label="值" name="value">
         <a-input allow-clear placeholder="淘宝网" v-model:value="form.value" />
       </a-form-item>
-      <a-form-item label="描述" name="comments">
+      <a-form-item
-        <a-input
+        label="位置"
-          allow-clear
+        name="pageId"
-          placeholder="网站名称"
+        extra="页面参数，留空视为全局参数"
-          v-model:value="form.comments"
+      >
+        <SelectMpAd
+          :placeholder="`请选择页面`"
+          v-model:value="form.pageName"
+          @done="choosePageId"
+        />
+      </a-form-item>
+      <a-form-item label="(选填)" extra="上传图片作为参数的值">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
         />
       </a-form-item>
       <a-form-item label="排序" name="sortNumber">
@@ -42,13 +55,11 @@
           v-model:value="form.sortNumber"
         />
       </a-form-item>
-      <a-form-item label="(选填)">
+      <a-form-item label="描述" name="comments">
-        <SelectFile
+        <a-input
-          :placeholder="`请选择图片`"
+          allow-clear
-          :limit="1"
+          placeholder="网站名称"
-          :data="images"
+          v-model:value="form.comments"
-          @done="chooseImage"
-          @del="onDeleteItem"
         />
       </a-form-item>
     </a-form>

src/views/cms/mpField/index.vue

@@ -52,6 +52,18 @@
               </template>
             </template>
           </template>
+          <template #footer>
+            <div class="ele-text-secondary"
+              >温馨提示：跟随程序自动加载，通过<span v-pre
+                >{{ config.mpLogo }}可以方便调用，文本内容不加密。</span
+              ><a
+                href="https://websoft.top"
+                class="ele-text-secondary"
+                target="_blank"
+                >查看帮助文档</a
+              ></div
+            >
+          </template>
         </ele-pro-table>
         <!-- 编辑弹窗 -->
         <MpFieldEdit

src/views/cms/mpPages/components/mpPagesEdit.vue

@@ -31,6 +31,7 @@
           allow-clear
           placeholder="/package/goods/detail"
           v-model:value="form.path"
+          :disabled="form.subpackage === 'MainPackage'"
         />
       </a-form-item>
       <a-form-item label="分包" name="subpackage">
@@ -38,21 +39,46 @@
           dict-code="mpPackage"
           :placeholder="`选择分包`"
           style="width: 200px"
+          :disabled="form.subpackage === 'MainPackage'"
           v-model:value="form.subpackage"
         />
       </a-form-item>
-      <a-form-item label="图标" name="icon">
+      <template v-if="form.subpackage === 'MainPackage'">
-        <ele-icon-picker
+        <a-form-item label="图标" name="icon">
-          :data="iconData"
+          <ele-icon-picker
-          :allow-search="false"
+            :data="iconData"
-          v-model:value="form.icon"
+            :allow-search="false"
-          placeholder="请选择菜单图标"
+            v-model:value="form.icon"
+            placeholder="请选择菜单图标"
+          >
+            <template #icon="{ icon }">
+              <component :is="icon" />
+            </template>
+          </ele-icon-picker>
+        </a-form-item>
+        <a-form-item label="未选中" name="iconPath" extra="优先级高于图标">
+          <SelectFile
+            :placeholder="`请选择图标`"
+            :limit="1"
+            :data="iconPath"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+        </a-form-item>
+        <a-form-item
+          label="已选中"
+          name="selectedIconPath"
+          extra="优先级高于图标"
         >
-          <template #icon="{ icon }">
+          <SelectFile
-            <component :is="icon" />
+            :placeholder="`请选择图标`"
-          </template>
+            :limit="1"
-        </ele-icon-picker>
+            :data="selectedIconPath"
-      </a-form-item>
+            @done="chooseFile2"
+            @del="onDeleteItem2"
+          />
+        </a-form-item>
+      </template>
       <a-form-item label="排序" name="sortNumber">
         <a-input-number
           :min="0"
@@ -77,13 +103,14 @@
 <script lang="ts" setup>
   import { ref, reactive, watch } from 'vue';
   import { Form, message } from 'ant-design-vue';
-  import { assignObject } from 'ele-admin-pro';
+  import { assignObject, uuid } from 'ele-admin-pro';
   import { addMpPages, updateMpPages } from '@/api/cms/mpPages';
   import { MpPages } from '@/api/cms/mpPages/model';
   import { useThemeStore } from '@/store/modules/theme';
   import { storeToRefs } from 'pinia';
   import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
 
   // 是否是修改
   const isUpdate = ref(false);
@@ -110,7 +137,8 @@
   const maxable = ref(true);
   // 表格选中数据
   const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
+  const iconPath = ref<ItemType[]>([]);
+  const selectedIconPath = ref<ItemType[]>([]);
 
   // 用户信息
   const form = reactive<MpPages>({
@@ -120,6 +148,9 @@
     path: undefined,
     home: undefined,
     subpackage: undefined,
+    icon: undefined,
+    iconPath: '',
+    selectedIconPath: '',
     sortNumber: 100,
     comments: undefined,
     status: undefined
@@ -150,6 +181,34 @@
     ]
   });
 
+  const chooseFile = (data: FileRecord) => {
+    iconPath.value.push({
+      uid: data.id,
+      url: data.downloadUrl,
+      status: 'done'
+    });
+    form.iconPath = data.url;
+  };
+
+  const onDeleteItem = (index: number) => {
+    iconPath.value.splice(index, 1);
+    form.iconPath = '';
+  };
+
+  const chooseFile2 = (data: FileRecord) => {
+    selectedIconPath.value.push({
+      uid: data.id,
+      url: data.downloadUrl,
+      status: 'done'
+    });
+    form.selectedIconPath = data.url;
+  };
+
+  const onDeleteItem2 = (index: number) => {
+    selectedIconPath.value.splice(index, 1);
+    form.selectedIconPath = '';
+  };
+
   const { resetFields } = useForm(form, rules);
 
   /* 保存编辑 */
@@ -184,9 +243,24 @@
     () => props.visible,
     (visible) => {
       if (visible) {
-        images.value = [];
+        iconPath.value = [];
+        selectedIconPath.value = [];
         if (props.data) {
           assignObject(form, props.data);
+          if (props.data.iconPath) {
+            iconPath.value.push({
+              uid: uuid(),
+              url: props.data.iconPath,
+              status: 'done'
+            });
+          }
+          if (props.data.selectedIconPath) {
+            selectedIconPath.value.push({
+              uid: uuid(),
+              url: props.data.selectedIconPath,
+              status: 'done'
+            });
+          }
           isUpdate.value = true;
         } else {
           isUpdate.value = false;

src/views/cms/mpPages/index.vue

@@ -22,7 +22,8 @@
           </template>
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'title'">
-              <component v-if="record.icon" :is="record.icon" />
+              <a-avatar v-if="record.iconPath" :src="record.iconPath" />
+              <component v-else :is="record.icon" />
               {{ record.title }}
             </template>
             <template v-if="column.key === 'image'">