kd-aiot-frontend/src/views/system/unifiedPortal/dialog.vue

<template>
  <el-dialog
    :title="`${type}统一门户`"
    :visible.sync="dialogVisible"
    width="25%"
  >
    <el-form label-width="150px" class="unifiedPortal-form" :model="form">
      <div class="icon-box">
        <div class="title">
          <div class="font">图标</div>
          <div>1.JPG/PNG格式</div>
          <div>2.大小不能超过10MB</div>
          <div>3.高宽比1:1</div>
          <div>4.推荐分辨率800*800</div>
        </div>
        <div class="img">
          <div class="avatar" v-if="imageUrl">
            <img :src="imageUrl" />
            <i @click="delImg" class="el-icon-close"></i>
          </div>
          <el-upload
            v-else
            class="avatar-uploader"
            :action="''"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleAvatarChangeIcon"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <!-- <el-form-item
        style="white-space: pre-wrap"
        label="图标(分辨率800*800)"
        required
      >
        <div class="avatar" v-if="imageUrl">
          <img :src="imageUrl" />
          <i @click="delImg" class="el-icon-close"></i>
        </div>
        <el-upload
          v-else
          class="avatar-uploader"
          :action="''"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleAvatarChangeIcon"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="名称" required>
        <el-input v-model="form.name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="排序" required>
        <el-input
          v-model="form.sort"
          type="number"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="链接" required>
        <el-input placeholder="请输入内容" v-model="form.linkUrl">
          <template slot="prepend">https://</template>
        </el-input>
      </el-form-item>
      <el-form-item label="链接类型" required>
        <DictSelection
          dictName="链接分类"
          :disabled="false"
          v-model="form.linkType"
        ></DictSelection>
      </el-form-item>
      <el-form-item label="架构类型" required>
        <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 {
    saveInfo,
    updateInfo,
    getDetails
  } from '@/api/system/unifiedPortal/index.js';
  export default {
    data() {
      return {
        dialogVisible: false,
        file: null,
        type: '新增',
        form: {
          linkType: '1',
          architType: '1'
        },
        imageUrl: '',
        options: [
          {
            label: '程序应用',
            value: '1'
          },
          {
            label: '网页应用',
            value: '2'
          }
        ]
      };
    },
    methods: {
      delImg() {
        this.imageUrl = '';
        this.file = null;
      },
      handleClose() {
        this.dialogVisible = false;
      },
      async open(type, id) {
        this.type = type;
        if (type == '新增') {
          this.form = {
            linkType: '1',
            architType: '1'
          };
          this.imageUrl = '';
          this.file = null;
        } else {
          this.file = null;
          this.form = await getDetails(id);
          this.imageUrl =
            window.location.origin +
            '/api/main/file/getFile?objectName=' +
            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) {
          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>
  .unifiedPortal-form {
    .icon-box {
      display: flex;
      margin-bottom: 10px;
      .title {
        flex: 0 0 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .font:before {
          content: '*';
          color: red;
          margin-right: 4px;
        }
      }
      .img {
        flex: 1;
      }
    }
  }
  .typeSelect {
    width: 100%;
  }
  .avatar-uploader {
    height: 120px;
    width: 100%;
  }
  .avatar {
    width: 120px;
    height: 120px;
    position: relative;
    border: 1px solid #d9d9d9;
    > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .el-icon-close {
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      color: #000;
    }
  }
  .avatar-uploader-icon {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d9d9d9;
  }
</style>