图标管理修改

src/views/base/iconInfo-detail.vue

@@ -12,6 +12,7 @@
     style="text-align: left"
     width="80%"
     @close="closeDialog"
+    :close-on-click-modal="false"
   >
     <div class="user-panel" v-loading="loading">
       <el-form
@@ -120,60 +121,18 @@ export default {
       iconTypeList: [],
       formModel: {},
       ruleValidate: {
-        id: [{ required: true, message: "不能为空", trigger: "blur" }],
         iconName: [
           { required: true, message: "图标名称不能为空", trigger: "blur" },
         ],
         iconRoute: [
           { required: true, message: "图标路由不能为空", trigger: "blur" },
         ],
-        iconSubRoute: [
-          {
-            required: true,
-            message: "图标的子页面路由不能为空",
-            trigger: "blur",
-          },
-        ],
-        iconUrl: [
-          { required: true, message: "图标url不能为空", trigger: "blur" },
-        ],
-        iconParam: [
-          { required: true, message: "参数不能为空", trigger: "blur" },
-        ],
-        useEnable: [
-          { required: true, message: "是否启用不能为空", trigger: "blur" },
-        ],
         iconPic: [
           { required: true, message: "图标图片不能为空", trigger: "blur" },
         ],
-        iconCommonPic: [
-          {
-            required: true,
-            message: "通用功能展示的图片不能为空",
-            trigger: "blur",
-          },
-        ],
         iconTypeId: [
           { required: true, message: "图标类型id不能为空", trigger: "blur" },
         ],
-        delFlag: [
-          { required: true, message: "是否删除不能为空", trigger: "blur" },
-        ],
-        createBy: [
-          { required: true, message: "创建人不能为空", trigger: "blur" },
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" },
-        ],
-        updateBy: [
-          { required: true, message: "更新人不能为空", trigger: "blur" },
-        ],
-        updateTime: [
-          { required: true, message: "更新时间不能为空", trigger: "blur" },
-        ],
-        remark: [
-          { required: true, message: "备注信息不能为空", trigger: "blur" },
-        ],
       },
       showDialog: true,
       loading: false,

src/views/base/iconInfo-list.vue

@@ -83,52 +83,94 @@
       <el-table-column
         prop="iconName"
         label="图标名称"
-        width="180"
+        width="130"
       ></el-table-column>
       <el-table-column
         prop="iconRoute"
         label="图标路由"
-        width="180"
+        show-overflow-tooltip
+        width="220"
       ></el-table-column>
       <el-table-column
         prop="iconSubRoute"
-        label="图标的子页面路由"
-        width="180"
+        label="子页面路由"
+        width="200"
+        show-overflow-tooltip
       ></el-table-column>
       <el-table-column
         prop="iconUrl"
         label="图标url"
-        width="180"
+        show-overflow-tooltip
+        width="150"
       ></el-table-column>
       <el-table-column
         prop="iconParam"
         label="参数"
-        width="180"
+        width="150"
+        show-overflow-tooltip
       ></el-table-column>
+      <el-table-column
+        prop="useEnable"
+        label="是否启用"
+        width="120"
+      >
+      <template slot-scope="{ row }">
+          <el-switch
+            v-model="row.useEnable"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            @change="updateEnabled(row)"
+          ></el-switch>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="iconPic"
         label="图标图片"
-        width="180"
-      ></el-table-column>
+        width="80"
+      >
+      <template slot-scope="{ row }">
+          <a :href="row.iconPic" target="_blank">
+            <el-avatar
+              :size="48"
+              shape="circle"
+              :src="
+                row.iconPic +
+                '?x-oss-process=image/resize,m_fill,w_64,h_64'
+              "
+              :key="row.id"
+            ></el-avatar>
+          </a>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="iconCommonPic"
         label="通用功能展示的图片"
-        width="180"
-      ></el-table-column>
+        width="150"
+      >
+      <template slot-scope="{ row }">
+          <a :href="row.iconCommonPic" target="_blank">
+            <el-avatar
+              :size="48"
+              shape="circle"
+              :src="
+                row.iconCommonPic +
+                '?x-oss-process=image/resize,m_fill,w_64,h_64'
+              "
+              :key="row.id"
+            ></el-avatar>
+          </a>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="iconTypeName"
         label="图标类型"
-        width="180"
+        width="120"
       ></el-table-column>
       <el-table-column
         prop="remark"
         label="备注信息"
         width="180"
-      ></el-table-column>
-      <el-table-column
-        prop="useEnableName"
-        label="是否启用"
-        width="180"
+        show-overflow-tooltip
       ></el-table-column>
       <el-table-column label="操作" fixed="right" width="150">
         <template slot-scope="{ row }">
@@ -345,6 +387,9 @@ export default {
         this.changePage(this.pageIndex);
       }
     },
+    updateEnabled(row) {
+      iconInfoApi.update(row);
+    },
   },
   mounted: function () {
     this.changePage(1);