pref:新增应用添加图标预览和删除、新增系统参数设置排序、修改富文本编辑器

base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddApp.vue

@@ -34,6 +34,22 @@
           </a-form-model-item>
           <a-form-model-item label="应用图标" prop="appIconPath">
             <a-upload
+              name="file"
+              list-type="picture-card"
+              :action="api + 'base/file/commonupload'"
+              :file-list="iconFileList"
+              @change="handleChangeIcon"
+              :accept="accept"
+              :before-upload="iconBeforeUpload"
+              @preview="handlePreview"
+            >
+              <div v-if="iconFileList.length < 1">
+                <a-icon type="plus" />
+                <div class="ant-upload-text">选择图标</div>
+              </div>
+            </a-upload>
+
+            <!-- <a-upload
               name="file"
               list-type="picture-card"
               class="avatar-uploader"
@@ -51,7 +67,7 @@
                 <a-icon :type="loading ? 'loading' : 'plus'" />
                 <div class="ant-upload-text">选择图标</div>
               </div>
-            </a-upload>
+            </a-upload> -->
           </a-form-model-item>
           <a-form-model-item label="应用简介" prop="summary">
             <a-textarea
@@ -150,6 +166,11 @@
           <a-button type="primary" @click="onSubmit"> 保存 </a-button>
         </a-space>
       </div>
+      <!-- 预览 -->
+      <PrevieModal
+        :previewData="previewData"
+        :previewVisible.sync="previewVisible"
+      ></PrevieModal>
     </a-drawer>
   </div>
 </template>
@@ -159,9 +180,11 @@ import YSwitch from "../../../../components/yswitch/YSwitch.vue";
 import { saveApp } from "@/services/market";
 import { mapGetters } from "vuex";
 import { changeCodeNumber } from "@/utils/validate";
+import PrevieModal from "@/components/PrevieModal.vue";
 export default {
   components: {
     YSwitch,
+    PrevieModal,
   },
   props: {
     title: {
@@ -184,8 +207,12 @@ export default {
   },
   data() {
     return {
+      accept: "image/jpeg,image/png,image/svg+xml",
       api: process.env.VUE_APP_API_BASE_URL + "/",
       api2: process.env.VUE_APP_API_IMG_URL,
+      previewData: {}, // 预览
+      previewVisible: false,
+      iconFileList: [],
       labelCol: {
         span: 3,
       },
@@ -290,27 +317,51 @@ export default {
     // 图标上传之前
     iconBeforeUpload(file) {
       const isJpgOrPng =
-        file.type === "image/jpeg" || file.type === "image/png";
+        file.type === "image/jpeg" ||
+        file.type === "image/png" ||
+        file.type === "image/svg+xml";
       if (!isJpgOrPng) {
-        this.$message.error("请上传jpeg或者png格式图片!");
+        this.$message.error("请上传jpeg、png或者svg格式图片!");
       }
-      const isLt2M = file.size / 1024 / 1024 < 2;
-      if (!isLt2M) {
-        this.$message.error("图片大小不能超过 2MB!");
+      const isLt5M = file.size / 1024 / 1024 < 5;
+      if (!isLt5M) {
+        this.$message.error("图片大小不能超过 5MB!");
       }
-      return isJpgOrPng && isLt2M;
+      return isJpgOrPng && isLt5M;
     },
     // 上传图标
-    handleChangeIcon(info) {
-      if (info.file.status === "uploading") {
-        this.loading = true;
-        return;
-      }
-      if (info.file.status === "done") {
-        this.form.appIconPath = info.file.response.url;
-        this.loading = false;
+    handleChangeIcon({ fileList }) {
+      // if (info.file.status === "uploading") {
+      //   this.loading = true;
+      //   return;
+      // }
+      // if (info.file.status === "done") {
+      //   this.form.appIconPath = info.file.response.url;
+      //   this.loading = false;
+      // }
+
+      this.iconFileList = [...fileList].slice(-1);
+      this.iconFileList = this.iconFileList.map((v) => {
+        if (v.response) {
+          v.url2 = v.response.url;
+          v.url = this.api2 + v.response.url;
+        }
+        return v;
+      });
+      if (this.iconFileList[0]) {
+        this.form.appIconPath = this.iconFileList[0].url2;
+      } else {
+        this.form.appIconPath = "";
       }
     },
+    // 预览
+    handlePreview(info) {
+      this.previewData = {
+        type: "img",
+        url: info.url,
+      };
+      this.previewVisible = true;
+    },
     // 上传应用
     handleChangeFile(info) {
       let fileList = [...info.fileList];
@@ -338,7 +389,6 @@ export default {
     },
     // 编辑
     onEdit(data) {
-      console.log(data);
       this.form = { ...data };
       this.fileList = [
         {
@@ -348,6 +398,15 @@ export default {
           url: this.form.filePath,
         },
       ];
+      this.iconFileList = [
+        {
+          uid: "-2",
+          name: this.form.appIconPath,
+          status: "done",
+          url: this.api2 + this.form.appIconPath,
+          url2: this.form.appIconPath,
+        },
+      ];
     },
     // 选中站点
     changeSite(value, label) {

base-manager-ui/admin/src/pages/basicset/system/parameter/Parameter.vue

@@ -57,7 +57,8 @@
         </template>
         <!-- 展现类型 -->
         <template slot="displayType" slot-scope="text">
-          <a-tag>{{ filterItems(text.displayType, dict.displayType) }} </a-tag>
+          {{ text.displayType || "--" }}
+          <!-- <a-tag>{{ filterItems(text.displayType, dict.displayType) }} </a-tag> -->
         </template>
         <!-- 操作 -->
         <template slot="action" slot-scope="text">
@@ -143,7 +144,7 @@ export default {
         },
       },
       {
-        title: "展现类型",
+        title: "排序",
         scopedSlots: {
           customRender: "displayType",
         },

base-manager-ui/admin/src/pages/basicset/system/parameter/modal/AddParameter.vue

@@ -40,15 +40,16 @@
             >
           </a-select>
         </a-form-model-item>
-        <a-form-model-item label="展现类型" prop="displayType">
-          <a-select v-model="form.displayType" placeholder="请选择展现类型">
+        <a-form-model-item label="排序" prop="displayType">
+          <a-input v-model="form.displayType" placeholder="请输入排序" />
+          <!-- <a-select v-model="form.displayType" placeholder="请选择展现类型">
             <a-select-option
               v-for="(v, key) in dict.displayType"
               :key="key"
               :value="Number(key)"
               >{{ v }}</a-select-option
             >
-          </a-select>
+          </a-select> -->
         </a-form-model-item>
         <a-form-model-item label="参数有效状态" prop="validStatus">
           <a-radio-group v-model="form.validStatus">
@@ -105,7 +106,7 @@ export default {
         paramKey: "", // 参数键
         paramValue: "", // 参数值
         modStatus: undefined, // 参数修改状态
-        displayType: undefined, // 展现类型
+        displayType: undefined, // 展现类型(临时用作排序)
         validStatus: "", // 参数有效状态
         remark: "", // 备注
       },