Foshan4A4.0/src/views/authorityManagement/components/authorityAppEdit.vue

<!--
 * @Author: your name
 * @Date: 2021-11-29 09:18:04
 * @LastEditTime: 2022-03-17 14:09:47
 * @LastEditors: your name
 * @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="title">
          编辑应用
          <!-- <span class="isqy">
            <span>是否启用</span>
            <el-radio-group v-model="radio">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </span> -->
        </div>
        <div class="btn">
          <!-- <el-button @click="deleteApp" class="r24" type="danger">删除</el-button> -->
          <el-button @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" label-position="right" label-width="80px">
          <div class="flex">
            <el-form-item prop="name" label="应用名称">
              <el-input placeholder="请输入应用名称" v-model.trim="form.name"></el-input>
            </el-form-item>
            <el-form-item label="请求类型">
              <el-select @change="typeChange" v-model="form.id" placeholder="请求类型">
                <el-option label="get" :value="1"></el-option>
                <el-option label="post" :value="2"></el-option>
              </el-select>
              <!-- <el-input placeholder="请输入APPID" disabled v-model="form.id"></el-input> -->
            </el-form-item>
            <el-form-item prop="app" label="参数类型">
              <el-select :disabled="typeFlag" v-model="form.app" placeholder="参数类型">
                <el-option label="application/json" value="application/json"></el-option>
                <el-option label="application/text" value="application/text"></el-option>
              </el-select>
              <!-- <el-input placeholder="请输入参数类型" v-model.trim="form.app"></el-input> -->
            </el-form-item>
          </div>
          <el-form-item class="url" prop="url" label="应用地址">
            <el-input placeholder="请输入应用地址" v-model.trim="form.url"></el-input>
          </el-form-item>
          <el-form-item prop="desc" class="desc" label="描述">
            <el-input type="textarea" rows="3" placeholder="请输入描述" v-model.trim="form.desc"></el-input>
          </el-form-item>
        </el-form>
        <div class="addApp-form-title domain-title flex">
          <div class="title">参数管理</div>
          <div class="btn">
            <el-button @click="addDomain" type="primary">新增</el-button>
          </div>
        </div>
        <div class="addApp-form-content domain">
          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="85px" class="demo-dynamic">
            <div class="flex" v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
              <div class="flex-wrap">
                <el-form-item label="入参名称" :prop="'domains.' + index + '.name'">
                  <el-input placeholder="请输入最大64位参数名称" maxlength="64" v-model.trim="domain.AppInputName"></el-input>
                </el-form-item>
                <el-form-item label="入参类型" :prop="'domains.' + index + '.type'">
                  <el-select v-model="domain.AppInputType" :disabled="typeFlag" placeholder="参数类型">
                    <el-option label="string" value="string"></el-option>
                    <el-option label="int" value="int"></el-option>
                  </el-select>
                  <!-- <el-input placeholder="请输入最大8位参数类型" maxlength="8" v-model.trim="domain.AppInputType"></el-input> -->
                </el-form-item>
                <el-form-item label="入参位置" :prop="'domains.' + index + '.place'">
                  <el-select v-model="domain.AppInputSite" placeholder="参数位置">
                    <el-option label="header" value="header"></el-option>
                    <el-option label="body" value="body"></el-option>
                  </el-select>
                  <!-- <el-input placeholder="请输入最大8位参数位置" maxlength="8" v-model.trim="domain.AppInputSite"></el-input> -->
                </el-form-item>
              </div>
              <div>
                <el-button size="small" type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <!--上传logo-->
    <div class="addApp-upload">
      <div class="flex-wrap">
        <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 {
  GetAppDetails,
  EditApp,
  UpdateAppStatus,
  DeleteApp,
} from "@/api/apiAuthority";
import { lengthValidator } from '@/utils/validate'
export default {
  name: "Addapp",
  data () {
    return {
      form: {
        //应用表单
        name: "",
        id: "",
        app: "",
        url: "",
        desc: "",
      },
      rules: {
        //表单验证
        name: [
          { required: true, message: "请输入应用名称", trigger: "blur" },
          { validator: lengthValidator, max: 32, message: '长度在 1 到 32 个字符', trigger: ['change', 'blur'] }
        ],
        url: [{ validator: lengthValidator, max: 128, message: '长度在 1 到 128 个字符', trigger: ['change', 'blur'] }],
        desc: [
          // { required: true, message: "请输入描述", trigger: "blur" },
          { validator: lengthValidator, max: 128, message: '长度在 1到 128 个字符', trigger: ['change', 'blur'] }
        ],
        app: [{ validator: lengthValidator, max: 32, message: '长度在 1 到 32 个字符', trigger: ['change', 'blur'] }]
      },
      radio: 1,
      AppId: null,
      type: null, //参数类型
      dialogImageUrl: "",
      dialogVisible: false,
      dynamicValidateForm: {
        domains: [{
          AppInputName: '',
          AppInputType: '',
          AppInputSite: ''
        }]
      },
      typeFlag: false
    };
  },
  created () {
    const { AuthId, Status } = this.$route.query;
    this.radio = Status;
    this.AppId = AuthId;
    this.getAppDetails(AuthId);
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //获取应用详情
    async getAppDetails (id) {
      try {
        const res = await GetAppDetails({
          AppId: id,
        });
        if (res.code === 0) {
          const { AppName, AppShowId, AppShowSecret, AppDesc, AppUrl, Inputs, RequestType, BodyType } =
            res.returnData;
          this.form.name = AppName;
          // this.form.id = AppShowId;
          // this.form.app = AppShowSecret;
          this.form.id = Number(RequestType) || '';
          this.form.app = BodyType;
          this.form.desc = AppDesc;
          this.form.url = AppUrl;
          this.dynamicValidateForm.domains = Inputs;
          this.typeFlag = this.form.id;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //应用状态变更
    async handleChange (val) {
      try {
        const res = await UpdateAppStatus({
          AppId: this.AppId,
          Status: val,
        });
        if (res.code === 0) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editApp();
        } else {
          return false;
        }
      });
    },
    //应用状态变更
    async editApp () {
      try {
        const res = await EditApp({
          AppId: this.AppId,
          AppDesc: this.form.desc,
          AppName: this.form.name,
          AppUrl: this.form.url,
          RequestType: this.form.id,
          BodyType: this.form.app,
          Inputs: this.dynamicValidateForm.domains
        });
        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) {
        console.log("出错了", error);
      }
    },
    //应用删除
    async deleteApp () {
      try {
        const res = await DeleteApp({
          AppId: this.AppId,
        });
        if (res.code === 0) {
          this.$message.success(res.message);
          setTimeout(() => {
            this.$router.push("/authority");
          }, 2000);
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    removeDomain (item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain () {
      this.dynamicValidateForm.domains.push({
        AppInputName: '',
        AppInputType: '',
        AppInputSite: '',
        AppId: this.AppId
      });
    },
    typeChange (val) {
      const datas = this.dynamicValidateForm.domains
      if (val == 1) {
        this.typeFlag = true;
        this.form.app = '';
        datas.forEach(item => {
          item.AppInputType = 'string';
        })
      } else {
        this.typeFlag = false;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.addApp {
  padding: 0 64px;
  padding-top: 32px;
  .addApp-form {
    flex: 1;
    background: #ffffff;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 32px 32px 40px 32px;
    .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-content {
      margin-top: 40px;
      ::v-deep .form {
        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }
        .content {
          .el-form-item__content {
            flex: 1;
          }
          .el-form-item__label {
            margin-left: 27px;
          }
        }
        textarea {
          resize: none;
        }
      }
    }
    .domain {
      ::v-deep .demo-dynamic {
        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }
        .el-button--danger {
          position: relative;
          top: 4px;
        }
      }
    }
    .domain-title {
      margin-top: 56px;
    }
  }
  .addApp-upload {
    width: 767px;
    background: #ffffff;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    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 #767eba;
      border-radius: 4px;
      .el-icon-plus {
        font-size: 51px;
        color: #767eba;
      }
    }
    .preview {
      margin-left: 40px;
      .box {
        width: 160px;
        height: 160px;
        background: #3b3c3d;
        border-radius: 4px;
      }
    }
  }
}
</style>