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

<template>
  <el-dialog
    :title="`${type}统一门户`"
    :visible.sync="dialogVisible"
    width="20%"
  >
    <el-form label-width="80px" 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="名称" 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 v-model="form.linkUrl" placeholder="请输入内容"></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 { 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>