|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2021-11-29 09:18:04
|
|
|
- * @LastEditTime: 2022-01-07 15:48:47
|
|
|
+ * @LastEditTime: 2022-02-28 23:07:09
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
* @Description: 新增/编辑应用
|
|
|
* @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\addApp.vue
|
|
@@ -30,57 +30,60 @@
|
|
|
<el-form ref="form" class="form" :rules="rules" :model="form">
|
|
|
<div class="flex">
|
|
|
<el-form-item prop="name" label="应用名称">
|
|
|
- <el-input
|
|
|
- placeholder="请输入应用名称"
|
|
|
- maxlength="32"
|
|
|
- v-model="form.name"
|
|
|
- ></el-input>
|
|
|
+ <el-input placeholder="请输入应用名称" maxlength="32" v-model="form.name"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="APPID">
|
|
|
- <el-input
|
|
|
- placeholder="请输入APPID"
|
|
|
- disabled
|
|
|
- v-model="form.id"
|
|
|
- ></el-input>
|
|
|
+ <el-form-item label="请求类型">
|
|
|
+ <el-select 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 label="APPSECRET">
|
|
|
- <el-input
|
|
|
- placeholder="请输入APPSECRET"
|
|
|
- disabled
|
|
|
- v-model="form.app"
|
|
|
- ></el-input>
|
|
|
+ <el-form-item label="参数类型">
|
|
|
+ <el-input placeholder="请输入参数类型" v-model="form.app"></el-input>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
<el-form-item class="url" prop="url" label="应用地址">
|
|
|
- <el-input
|
|
|
- placeholder="请输入应用地址"
|
|
|
- maxlength="200"
|
|
|
- v-model="form.url"
|
|
|
- ></el-input>
|
|
|
+ <el-input placeholder="请输入应用地址" maxlength="200" v-model="form.url"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="content" class="content" label="描述">
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- maxlength="200"
|
|
|
- rows="3"
|
|
|
- placeholder="请输入描述"
|
|
|
- v-model="form.content"
|
|
|
- ></el-input>
|
|
|
+ <el-input type="textarea" maxlength="200" rows="3" placeholder="请输入描述" v-model="form.content"></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 v-model="domain.AppInputName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参数类型" :prop="'domains.' + index + '.type'">
|
|
|
+ <el-input placeholder="请输入参数类型" v-model="domain.AppInputType"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参数位置" :prop="'domains.' + index + '.place'">
|
|
|
+ <el-input placeholder="请输入参数位置" v-model="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">
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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>
|
|
@@ -102,7 +105,7 @@ import {
|
|
|
} from "@/api/apiAuthority";
|
|
|
export default {
|
|
|
name: "Addapp",
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
form: {
|
|
|
//应用表单
|
|
@@ -122,36 +125,46 @@ export default {
|
|
|
type: null, //参数类型
|
|
|
dialogImageUrl: "",
|
|
|
dialogVisible: false,
|
|
|
+ dynamicValidateForm: {
|
|
|
+ domains: [{
|
|
|
+ AppInputName: '',
|
|
|
+ AppInputType: '',
|
|
|
+ AppInputSite: ''
|
|
|
+ }]
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
- created() {
|
|
|
+ created () {
|
|
|
const { AuthId, Status } = this.$route.query;
|
|
|
this.radio = Status;
|
|
|
this.AppId = AuthId;
|
|
|
this.getAppDetails(AuthId);
|
|
|
},
|
|
|
methods: {
|
|
|
- handleRemove(file, fileList) {
|
|
|
+ handleRemove (file, fileList) {
|
|
|
console.log(file, fileList);
|
|
|
},
|
|
|
- handlePictureCardPreview(file) {
|
|
|
+ handlePictureCardPreview (file) {
|
|
|
this.dialogImageUrl = file.url;
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
//获取应用详情
|
|
|
- async getAppDetails(id) {
|
|
|
+ async getAppDetails (id) {
|
|
|
try {
|
|
|
const res = await GetAppDetails({
|
|
|
AppId: id,
|
|
|
});
|
|
|
if (res.code === 0) {
|
|
|
- const { AppName, AppShowId, AppShowSecret, AppDesc, AppUrl } =
|
|
|
+ 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 = AppShowId;
|
|
|
+ // this.form.app = AppShowSecret;
|
|
|
+ this.form.id = RequestType;
|
|
|
+ this.form.app = BodyType;
|
|
|
this.form.content = AppDesc;
|
|
|
this.form.url = AppUrl;
|
|
|
+ this.dynamicValidateForm.domains = Inputs;
|
|
|
} else {
|
|
|
this.$message.error(res.message);
|
|
|
}
|
|
@@ -160,7 +173,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//应用状态变更
|
|
|
- async handleChange(val) {
|
|
|
+ async handleChange (val) {
|
|
|
try {
|
|
|
const res = await UpdateAppStatus({
|
|
|
AppId: this.AppId,
|
|
@@ -176,13 +189,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//应用状态变更
|
|
|
- async editApp() {
|
|
|
+ async editApp () {
|
|
|
try {
|
|
|
const res = await EditApp({
|
|
|
AppId: this.AppId,
|
|
|
AppDesc: this.form.content,
|
|
|
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);
|
|
@@ -196,7 +212,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//应用删除
|
|
|
- async deleteApp() {
|
|
|
+ async deleteApp () {
|
|
|
try {
|
|
|
const res = await DeleteApp({
|
|
|
AppId: this.AppId,
|
|
@@ -213,6 +229,20 @@ export default {
|
|
|
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
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -222,7 +252,7 @@ export default {
|
|
|
padding: 0 64px;
|
|
|
padding-top: 32px;
|
|
|
.addApp-form {
|
|
|
- width: 920px;
|
|
|
+ flex: 1;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
|
|
|
border-radius: 16px;
|
|
@@ -269,9 +299,24 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .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: 425px;
|
|
|
+ width: 767px;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
|
|
|
border-radius: 16px;
|
|
@@ -296,6 +341,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.preview {
|
|
|
+ margin-left: 40px;
|
|
|
.box {
|
|
|
width: 160px;
|
|
|
height: 160px;
|