新增统一门户新增想修改上传界面

src/api/system/unifiedPortal/index.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request';
+
+// 保存
+export async function saveInfo(data) {
+  const res = await request.post('/sys/system/save', data);
+  if (res.data.code == 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 修改
+export async function updateInfo(data) {
+  const res = await request.put(`/sys/system/update`, data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 详情
+export async function getDetails(id) {
+  const res = await request.get(`/sys/system/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 列表
+export async function getList(params) {
+  const res = await request.get(`/sys/system/page`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 删除
+export async function deleteInfo(data) {
+  const res = await request.delete(`/sys/system/delete`, { data });
+  if (res.data.code == 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/enum/dict.js

@@ -60,7 +60,9 @@ export default {
   包装强度: 'packagingStrength',
   包装密度: 'packagingDensity',
   编码间隔符: 'codeSpaceMark',
-  条码分类: 'strip_type'
+  条码分类: 'strip_type',
+  链接分类: 'link_type',
+  架构分类: 'archit_type'
 };
 
 export const numberList = [

src/store/getters.js

@@ -16,10 +16,10 @@ export default {
     const obj = (state.dict[dictEnum[enumName]] || []).find((item) => {
       return item.dictCode == dictCode;
     });
-    console.log(dictEnum)
-    console.log(enumName)
-    console.log( state.dict)
-   
+    console.log(dictEnum);
+    console.log(enumName);
+    console.log(state.dict);
+
     return obj && obj.dictValue;
   }
 };

src/views/system/unifiedPortal/dialog.vue

@@ -0,0 +1,203 @@
+<template>
+  <el-dialog
+    :title="`${type}统一门户`"
+    :visible.sync="dialogVisible"
+    width="20%"
+  >
+    <el-form label-width="70px" class="zw-criterion">
+      <el-form-item label="图片">
+        <el-upload
+          class="avatar-uploader"
+          :action="''"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="handleAvatarChangeIcon"
+        >
+          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="名称">
+        <el-input v-model="form.name" placeholder="请输入内容"></el-input>
+      </el-form-item>
+      <el-form-item label="排序">
+        <el-input
+          v-model="form.sort"
+          type="number"
+          placeholder="请输入内容"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="链接">
+        <el-input v-model="form.linkUrl" placeholder="请输入内容"></el-input>
+      </el-form-item>
+      <el-form-item label="链接类型">
+        <DictSelection
+          dictName="链接分类"
+          :disabled="false"
+          v-model="form.linkType"
+        ></DictSelection>
+      </el-form-item>
+      <el-form-item label="架构类型">
+        <DictSelection
+          dictName="架构分类"
+          :disabled="false"
+          v-model="form.architType"
+        ></DictSelection>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" placeholder="请输入内容"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
+      <el-button size="small" @click="config" type="primary">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { uploadFile } from '@/api/system/file/index.js';
+  import { getImageUrl } from '@/utils/file';
+  import {
+    saveInfo,
+    updateInfo,
+    getDetails
+  } from '@/api/system/unifiedPortal/index.js';
+  export default {
+    data() {
+      return {
+        dialogVisible: false,
+        file: null,
+        type: '新增',
+        form: {},
+        imageUrl: '',
+        options: [
+          {
+            label: '程序应用',
+            value: '1'
+          },
+          {
+            label: '网页应用',
+            value: '2'
+          }
+        ]
+      };
+    },
+    methods: {
+      handleClose() {
+        this.dialogVisible = false;
+      },
+      async open(type, id) {
+        this.type = type;
+        if (type == '新增') {
+          this.form = {};
+          this.imageUrl = '';
+          this.file = null;
+        } else {
+          this.file = null;
+          this.form = await getDetails(id);
+          this.imageUrl = getImageUrl(this.form.iconPath);
+        }
+        this.dialogVisible = true;
+      },
+      handleAvatarChangeIcon(file, fileList) {
+        //选中文件触发的change事件
+        console.log(file);
+        const isJPG = file.raw.type === 'image/jpeg';
+        const isPNG = file.raw.type === 'image/png';
+        const isLt10M = file.raw.size / 1024 / 1024 < 10; //限制上传文件的大小
+        if (!isLt10M) {
+          this.$message.error('上传文件大小不能超过 10MB!');
+          return false;
+        }
+        if (!isPNG && !isJPG && !isLt2M) {
+          this.$message.error('上传图片只能是 JPG/PNG 格式!');
+          return false;
+        } else {
+          this.imageUrl = URL.createObjectURL(file.raw); //赋值图片的url，用于图片回显功能
+          this.file = file.raw; //赋值文件对象，用于上传操作
+        }
+      },
+      async config() {
+        if (!this.form.name) {
+          return this.$message.error('请输入名称');
+        }
+        if (this.form.sort < 0) {
+          return this.$message.error('请输入排序');
+        }
+        if (!this.form.linkUrl) {
+          return this.$message.error('请输入链接');
+        }
+        if (this.form.linkType < 0) {
+          return this.$message.error('请选择链接类型');
+        }
+        if (this.form.architType < 0) {
+          return this.$message.error('请选择架构类型');
+        }
+        // 文件上传操作
+        if (this.file) {
+          try {
+            let res = await uploadFile({
+              multiPartFile: this.file,
+              module: 'gateway'
+            });
+            this.form.icon = res.data.id;
+          } catch (error) {
+            console.log(error);
+            return this.$message.error('上传文件失败');
+          }
+        } else {
+          if (this.type == '新增') {
+            return this.$message.error('请上传图片');
+          }
+        }
+
+        if (this.type == '新增') {
+          // 保存数据
+          try {
+            await saveInfo(this.form);
+            this.$message.success('新增成功');
+            this.dialogVisible = false;
+            this.$emit('reload');
+          } catch (error) {
+            console.log(error);
+            this.$message.error('新增失败');
+          }
+        } else {
+          // 修改
+          try {
+            await updateInfo(this.form);
+            this.$message.success('修改成功');
+            this.dialogVisible = false;
+            this.$emit('reload');
+          } catch (error) {
+            this.$message.error('修改失败');
+          }
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .typeSelect {
+    width: 100%;
+  }
+  .avatar-uploader {
+    height: 120px;
+    width: 100%;
+  }
+  .avatar {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+  }
+  .avatar-uploader-icon {
+    width: 120px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed #d9d9d9;
+  }
+</style>

src/views/system/unifiedPortal/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div id="unifiedPortalIndex">
+    <div class="content_box">
+      <el-card class="box-card">
+        <div class="control_bar">
+          <el-button type="primary" icon="el-icon-plus" @click="add"
+            >新增</el-button
+          >
+        </div>
+        <div class="list">
+          <div class="list_box">
+            <template v-for="(item, index) in list">
+              <div
+                :class="[
+                  (index + 1) % 6 == 0 ? 'list-item margin_0' : 'list-item'
+                ]"
+              >
+                <el-card>
+                  <div slot="header" class="clearfix">
+                    <span>{{ item.name }}</span>
+                    <i class="el-icon-delete" @click="deleted(item)"></i>
+                    <i class="el-icon-edit" @click="edit(item)"></i>
+                  </div>
+                  <div class="card-content">
+                    <el-image
+                      class="img"
+                      :src="item.img"
+                      fit="cover"
+                      :preview-src-list="[item.img]"
+                    >
+                    </el-image>
+                    <div class="item">
+                      <span>排序</span>
+                      <span>{{ item.sort }}</span>
+                    </div>
+                    <div class="item">
+                      <span>链接</span>
+                      <span>{{ item.linkUrl }}</span>
+                    </div>
+                    <div class="item">
+                      <span>链接类型</span>
+                      <span>{{ item.linkTypeName }}</span>
+                    </div>
+                    <div class="item">
+                      <span>架构类型</span>
+                      <span>{{ item.architTypeName }}</span>
+                    </div>
+                    <div class="item">
+                      <span>备注</span>
+                      <span>{{ item.remark }}</span>
+                    </div>
+                  </div>
+                </el-card>
+              </div>
+            </template>
+          </div>
+        </div>
+      </el-card>
+    </div>
+    <Dialog ref="dialogRef" @reload="getPages"></Dialog>
+  </div>
+</template>
+
+<script>
+  import dictMixins from '@/mixins/dictMixins';
+  import Dialog from './dialog.vue';
+  import { getList, deleteInfo } from '@/api/system/unifiedPortal/index.js';
+  import { getImageUrl } from '@/utils/file';
+  export default {
+    mixins: [dictMixins],
+    components: { Dialog },
+    data() {
+      return {
+        type: '新增',
+        list: []
+      };
+    },
+    created() {
+      this.getPages();
+      this.requestDict('链接分类');
+      this.requestDict('架构分类');
+    },
+    methods: {
+      async getPages() {
+        let data = await getList({ pageNum: 1, size: 9999 });
+        this.list = data.list.map((item) => {
+          return {
+            ...item,
+            architTypeName:
+              this.getDictValue('架构分类', String(item.architType)) || '',
+            linkTypeName:
+              this.getDictValue('链接分类', String(item.linkType)) || '',
+            img: getImageUrl(item.iconPath)
+          };
+        });
+        console.log(this.list);
+      },
+      add() {
+        this.type = '新增';
+        this.$refs.dialogRef.open(this.type);
+      },
+      edit(item) {
+        this.type = '编辑';
+        this.$refs.dialogRef.open(this.type, item.id);
+      },
+      deleted(item) {
+        this.$confirm('是否确认删除?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          try {
+            await deleteInfo([item.id]);
+            this.$message.success('删除成功');
+            await this.getPages();
+          } catch (error) {
+            console.log(error);
+            this.$message.error('删除失败');
+          }
+        });
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  #unifiedPortalIndex {
+    height: 100%;
+    width: 100%;
+    .content_box {
+      width: 100%;
+      height: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+      :deep(.el-card) {
+        height: 100%;
+        width: 100%;
+        .el-card__header {
+          width: 100%;
+          .clearfix {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            > span {
+              flex: 1;
+            }
+            .el-icon-delete {
+              color: red;
+              cursor: pointer;
+              margin-right: 5px;
+            }
+            .el-icon-edit {
+              color: #40a9ff;
+              cursor: pointer;
+            }
+          }
+        }
+        .el-card__body {
+          height: 100%;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          .control_bar {
+            height: 60px;
+            border: 10px;
+            padding: 0 20px;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            border-bottom: 2px solid #ebeef5;
+            margin-bottom: 20px;
+          }
+          .list {
+            flex: 1 0 auto;
+            height: 0;
+            .list_box {
+              height: 100%;
+              width: 100%;
+              padding: 10px;
+              box-sizing: border-box;
+              overflow: auto;
+              .list-item {
+                width: 15%;
+                margin-right: 2%;
+                margin-bottom: 10px;
+                display: inline-block;
+                .el-card__body {
+                  display: flex;
+                  flex-direction: column;
+                  font-size: 12px;
+                  .img {
+                    width: 100%;
+                    height: 150px;
+                  }
+                  .item {
+                    padding: 5px 0;
+                    display: flex;
+                    > span:first-child {
+                      margin-right: 10px;
+                    }
+                  }
+                }
+              }
+              .margin_0 {
+                margin-right: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

vue.config.js

@@ -34,7 +34,7 @@ module.exports = {
         // target: 'http://192.168.1.124:50001',
         // target: 'http://192.168.1.147:18086',
         // target: 'http://192.168.1.176:18086',
-        target: 'http://192.168.1.125:18086',
+        target: 'http://192.168.1.176:18086',
 
         changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域
         pathRewrite: {