小程序管理

src/views/cms/mp/components/mpEdit.vue

@@ -19,18 +19,22 @@
         styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
     >
-      <a-form-item label="小程序ID" name="appId">
+      <a-form-item label="头像" name="avatar">
-        <a-input
+        <SelectFile
-          allow-clear
+          :placeholder="`请选择图片`"
-          placeholder="请输入小程序ID"
+          :limit="1"
-          v-model:value="form.appId"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
         />
       </a-form-item>
-      <a-form-item label="小程序密钥" name="appSecret">
+      <a-form-item label="小程序码" name="mpQrcode">
-        <a-input
+        <SelectFile
-          allow-clear
+          :placeholder="`请选择图片`"
-          placeholder="请输入小程序密钥"
+          :limit="1"
-          v-model:value="form.appSecret"
+          :data="mpQrcode"
+          @done="chooseMpQrcode"
+          @del="onDeleteMpQrcode"
         />
       </a-form-item>
       <a-form-item label="小程序名称" name="mpName">
@@ -40,34 +44,6 @@
           v-model:value="form.mpName"
         />
       </a-form-item>
-      <a-form-item label="小程序简称" name="shortName">
-        <a-input
-          allow-clear
-          placeholder="请输入小程序简称"
-          v-model:value="form.shortName"
-        />
-      </a-form-item>
-      <a-form-item label="头像" name="avatar">
-        <a-input
-          allow-clear
-          placeholder="请输入头像"
-          v-model:value="form.avatar"
-        />
-      </a-form-item>
-      <a-form-item label="小程序码" name="mpQrcode">
-        <a-input
-          allow-clear
-          placeholder="请输入小程序码"
-          v-model:value="form.mpQrcode"
-        />
-      </a-form-item>
-      <a-form-item label="微信认证" name="authentication">
-        <a-input
-          allow-clear
-          placeholder="请输入微信认证"
-          v-model:value="form.authentication"
-        />
-      </a-form-item>
       <a-form-item label="主体信息" name="companyName">
         <a-input
           allow-clear
@@ -89,11 +65,18 @@
           v-model:value="form.email"
         />
       </a-form-item>
-      <a-form-item label="登录密码" name="password">
+      <a-form-item label="小程序ID" name="appId">
         <a-input
           allow-clear
-          placeholder="请输入登录密码"
+          placeholder="请输入小程序ID"
-          v-model:value="form.password"
+          v-model:value="form.appId"
+        />
+      </a-form-item>
+      <a-form-item label="小程序密钥" name="appSecret">
+        <a-input
+          allow-clear
+          placeholder="请输入小程序密钥"
+          v-model:value="form.appSecret"
         />
       </a-form-item>
       <a-form-item label="原始ID" name="ghId">
@@ -103,21 +86,7 @@
           v-model:value="form.ghId"
         />
       </a-form-item>
-      <a-form-item label="入口页面" name="mainPath">
+      <a-form-item label="排序" name="sortNumber">
-        <a-input
-          allow-clear
-          placeholder="请输入入口页面"
-          v-model:value="form.mainPath"
-        />
-      </a-form-item>
-      <a-form-item label="过期时间" name="expirationTime">
-        <a-input
-          allow-clear
-          placeholder="请输入过期时间"
-          v-model:value="form.expirationTime"
-        />
-      </a-form-item>
-      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
         <a-input-number
           :min="0"
           :max="9999"
@@ -134,25 +103,17 @@
           v-model:value="form.comments"
         />
       </a-form-item>
-      <a-form-item label="用户ID" name="userId">
+      <a-form-item label="微信认证" name="authentication">
-        <a-input
+        <a-radio-group v-model:value="form.authentication">
-          allow-clear
+          <a-radio :value="0">已认证</a-radio>
-          placeholder="请输入用户ID"
+          <a-radio :value="1">未认证</a-radio>
-          v-model:value="form.userId"
-        />
-      </a-form-item>
-      <a-form-item label="状态, 0正常, 1冻结" name="status">
-        <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">显示</a-radio>
-          <a-radio :value="1">隐藏</a-radio>
         </a-radio-group>
       </a-form-item>
-      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+      <a-form-item label="状态" name="status">
-        <a-input
+        <a-radio-group v-model:value="form.status">
-          allow-clear
+          <a-radio :value="0">正常</a-radio>
-          placeholder="请输入是否删除, 0否, 1是"
+          <a-radio :value="1">已过期</a-radio>
-          v-model:value="form.deleted"
+        </a-radio-group>
-        />
       </a-form-item>
     </a-form>
   </ele-modal>
@@ -196,6 +157,7 @@
   // 表格选中数据
   const formRef = ref<FormInstance | null>(null);
   const images = ref<ItemType[]>([]);
+  const mpQrcode = ref<ItemType[]>([]);
 
   // 用户信息
   const form = reactive<Mp>({
@@ -217,15 +179,7 @@
     sortNumber: undefined,
     comments: undefined,
     userId: undefined,
-    status: undefined,
+    status: undefined
-    deleted: undefined,
-    tenantId: undefined,
-    createTime: undefined,
-    mpId: undefined,
-    mpName: '',
-    status: 0,
-    comments: '',
-    sortNumber: 100
   });
 
   /* 更新visible */
@@ -251,12 +205,26 @@
       url: data.path,
       status: 'done'
     });
-    form.image = data.path;
+    form.avatar = data.downloadUrl;
   };
 
   const onDeleteItem = (index: number) => {
     images.value.splice(index, 1);
-    form.image = '';
+    form.avatar = '';
+  };
+
+  const chooseMpQrcode = (data: FileRecord) => {
+    mpQrcode.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.mpQrcode = data.downloadUrl;
+  };
+
+  const onDeleteMpQrcode = (index: number) => {
+    mpQrcode.value.splice(index, 1);
+    form.mpQrcode = '';
   };
 
   const { resetFields } = useForm(form, rules);
@@ -294,14 +262,22 @@
     (visible) => {
       if (visible) {
         images.value = [];
+        mpQrcode.value = [];
         if (props.data) {
           assignObject(form, props.data);
-          if(props.data.image){
+          if (props.data.avatar) {
             images.value.push({
               uid: uuid(),
-              url: props.data.image,
+              url: props.data.avatar,
               status: 'done'
-            })
+            });
+          }
+          if (props.data.mpQrcode) {
+            mpQrcode.value.push({
+              uid: uuid(),
+              url: props.data.mpQrcode,
+              status: 'done'
+            });
           }
           isUpdate.value = true;
         } else {