CABaggageData2.0/src/views/authorityManagement/components/authorityAppAdd.vue

<!--
 * @Author: your name
 * @Date: 2021-11-29 09:18:04
 * @LastEditTime: 2022-02-28 10:52:56
 * @LastEditors: Please set LastEditors
 * @Description: 新增/编辑应用
 * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\addApp.vue
-->
<template>
  <div class="addApp flex-wrap">
    <!--新增应用-->
    <div class="addApp-form r24">
      <div class="addApp-form-title flex">
        <div class="manageTitle">新增应用</div>
        <div class="btn">
          <el-button size="small" @click="onSubmit('form')" type="primary">保存</el-button>
        </div>
      </div>
      <div class="addApp-form-content dialog-public-background">
        <el-form ref="form" class="form" :rules="rules" :model="form">
          <el-form-item prop="name" label="应用名称">
            <el-input placeholder="请输入应用名称" maxlength="32" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item class="url" prop="url" label="应用地址">
            <el-input placeholder="请输入应用地址" maxlength="200" v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item class="content" prop="content" label="描述">
            <el-input type="textarea" maxlength="200" rows="3" placeholder="请输入描述" v-model="form.content"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--上传logo-->
    <div class="addApp-upload">
      <div class="flex">
        <div class="upload">
          <div class="title">上传Logo</div>
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        <div class="preview">
          <div class="title">预览</div>
          <div class="box"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SaveApp } from "@/api/apiAuthority";
export default {
  name: "Addapp",
  data () {
    return {
      form: {
        //应用表单
        name: "",
        id: "",
        app: "",
        url: "",
        content: "",
      },
      rules: {
        //表单验证
        name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
        content: [{ required: true, message: "请输入描述", trigger: "blur" }],
      },
      radio: "1",
      type: null, //参数类型
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove (file, fileList) {
      //
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 新增应用
    async saveApp () {
      try {
        const res = await SaveApp({
          AppName: this.form.name,
          AppDesc: this.form.content,
          AppUrl: this.form.url,
        });
        if (res.code === 0) {
          this.$message.success(res.message);
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.push("/authority");
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
this.$message.error("失败");
      }
    },
    /**
     * @description: 提交
     * @param {*}
     * @return {*}
     */
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveApp();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.addApp {
  padding: 24px;
  .addApp-form {
    flex: 1;
    background: #ffffff;
    border-radius: 4px;
    padding: 30px 68px 32px 24px;
    .title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #303133;
      .isqy {
        span {
          font-weight: 400;
          font-size: 14px;
          margin: 0 28px 0 42px;
        }
      }
    }
    .addApp-form-title {
      line-height: 32px;
    }
    .addApp-form-content {
      margin-top: 40px;
      ::v-deep .form {
        .el-form-item {
          display: flex;
        }
        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }
        .url {
          margin-left: 10px;
          .el-form-item__content {
            width: calc(100% - 70px);
          }
        }
        .content {
          .el-form-item__content {
            flex: 1;
          }
          .el-form-item__label {
            margin-left: 10px;
          }
        }
        textarea {
          resize: none;
        }
      }
    }
  }
  .addApp-upload {
    width: 425px;
    background: #ffffff;
    border-radius: 4px;
    padding: 32px 32px 40px 32px;
    .title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #303133;
      margin-bottom: 22px;
    }
    ::v-deep .el-upload--picture-card {
      height: 160px;
      line-height: 160px;
      width: 160px;
      background: #f5f7fa;
      border: 1px dashed #2d67e3;
      border-radius: 4px;
      .el-icon-plus {
        font-size: 51px;
        color: #2d67e3;
      }
    }
    .preview {
      .box {
        width: 160px;
        height: 160px;
        background: #3b3c3d;
        border-radius: 4px;
      }
    }
  }
}
</style>