优化小程序页面管理

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">
-        <ele-icon-picker
-          :data="iconData"
-          :allow-search="false"
-          v-model:value="form.icon"
-          placeholder="请选择菜单图标"
+      <template v-if="form.subpackage === 'MainPackage'">
+        <a-form-item label="图标" name="icon">
+          <ele-icon-picker
+            :data="iconData"
+            :allow-search="false"
+            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 }">
-            <component :is="icon" />
-          </template>
-        </ele-icon-picker>
-      </a-form-item>
+          <SelectFile
+            :placeholder="`请选择图标`"
+            :limit="1"
+            :data="selectedIconPath"
+            @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;