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

<template>
  <el-dialog :title="`${type}统一门户`" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
    <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.link">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 100px">
            <el-option label="http://" value="http://"></el-option>
            <el-option label="https://" value="https://"></el-option>
          </el-select>
        </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="配置信息" v-if="form.architType !== '1'">
        <div>
          <p class="waing"> 注意 配置CS架构时,请一定要仔细阅读教程</p>
          <a @click="downLoadScript" style="margin-right: 20px;">脚本下载</a>

          <a @click="downLoadFiexs">教程下载</a>

        </div>
      </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, downLoadScript,downLoadFiexs } 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',
        link: ''
      },
      select: '',
      imageUrl: '',
      options: [
        {
          label: '程序应用',
          value: '1'
        },
        {
          label: '网页应用',
          value: '2'
        }
      ]
    };
  },
  methods: {
    delImg() {
      this.imageUrl = '';
      this.file = null;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    downLoadScript() {
      downLoadScript()
    },
    downLoadFiexs() {
      downLoadFiexs()
    },
    
    async open(type, id) {
      this.type = type;
      if (type == '新增') {
        this.form = {
          linkType: '1',
          architType: '1',
          link: ''
        };
        this.imageUrl = '';
        this.file = null;
      } else {
        this.file = null;
        const data = await getDetails(id);
        // 编辑时，需要去掉链接前面的http://和https://
        let link = data.linkUrl.replace(/^https?:\/\//, '');

        this.imageUrl =
          window.location.origin +
          '/api/main/file/getFile?objectName=' +
          data.iconPath;
        this.select = data.linkUrl.split('://')[0]
          ? data.linkUrl.split('://')[0] + '://'
          : '';
        // console.log(this.imageUrl, ' this.imageUrl');
        this.form = { ...data, link };
      }
      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.link) {
        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('请上传图片');
        }
      }
      // let urlWithoutProtocol = this.form.link.replace(/^https?:\/\//, '');
      this.form.linkUrl = `${this.select}${this.form.link}`;
      delete this.form.link;
      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;
    }
  }
}

.waing {
  color: #f00;
}

.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>