2026-04-24 10:11:46 +08:00

147 lines
4.9 KiB
Vue

<template>
<div class="api-sign">
<el-form ref="apiSingFrom" :model="apiSingFrom" :rules="rules" label-width="80px">
<el-form-item :label="$t('pages.toolsOther.apiSign.platform')" prop="platform">
<el-select
v-model="apiSingFrom.platform"
:placeholder="$t('pages.toolsOther.apiSign.platformPlaceholder')"
style="width: 100%"
class="filter-item"
>
<el-option
v-for="item in originPlatforms"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('pages.toolsOther.apiSign.body')" prop="body">
<el-input v-model="apiSingFrom.body" />
</el-form-item>
<el-form-item :label="$t('pages.toolsOther.apiSign.signKey')" prop="key">
<el-input v-model="apiSingFrom.key" />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="submitApiSignFormLoading" @click="submitApiSignForm()">{{ $t('common.submit') }}</el-button>
<el-button @click.prevent="settingRequestApiSing()">{{ $t('pages.toolsOther.action.setAttributes') }}</el-button>
</el-form-item>
</el-form>
<div v-if="apiSingParamContent" class="sgin-content">
{{ apiSingParamContent }}
</div>
<el-dialog
:title="$t('pages.toolsOther.apiSign.dialogTitle')"
:visible.sync="apiSingParamContentVisible"
:modal-append-to-body="true"
:append-to-body="true"
:before-close="apiSingParamContentHandleClose"
>
<div class="form-dialog-api-sing">
<el-form label-width="80px" :model="addSingAttributeForm" style="margin-right: 20px;">
<el-row v-for="(item, index) in addSingAttributeForm.attributes" :key="index" :gutter="10">
<el-col :span="12">
<el-form-item :label="$t('pages.toolsOther.apiSign.key')">
<el-input v-model="item.key" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('pages.toolsOther.apiSign.value')">
<el-input v-model="item.value" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="cleanSingAttribute">{{ $t('pages.toolsOther.action.clearAttributes') }}</el-button>
<el-button @click="addSingAttribute">{{ $t('pages.toolsOther.action.addAttribute') }}</el-button>
<el-button type="primary" @click="submitAddSingAttribute">{{ $t('pages.toolsOther.action.confirm') }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { requestApiSing } from '@/api/tools'
import { originPlatforms } from '@/constant/origin'
export default {
name: 'ToolsOther',
data() {
return {
addSingAttributeForm: {
attributes: [
{ key: '', value: '' }
]
},
apiSingParamContentVisible: false,
originPlatforms,
apiSingFrom: {
platform: 'iOS',
body: '',
key: ''
},
submitApiSignFormLoading: false,
apiSingParamContent: null,
}
},
computed: {
rules() {
return {
platform: [{ required: true, message: this.$t('pages.toolsOther.validation.requiredParam'), trigger: 'blur' }],
body: [{ required: true, message: this.$t('pages.toolsOther.validation.requiredParam'), trigger: 'blur' }],
key: [{ required: true, message: this.$t('pages.toolsOther.validation.requiredParam'), trigger: 'blur' }]
}
}
},
methods: {
cleanSingAttribute() {
this.addSingAttributeForm.attributes = [{ key: '', value: '' }]
},
submitAddSingAttribute() {
const attributes = this.addSingAttributeForm.attributes
const resultModel = {}
for (let index = 0; index < attributes.length; index++) {
const attribute = attributes[index]
resultModel[attribute.key] = attribute.value
}
this.apiSingFrom.body = JSON.stringify(resultModel)
this.apiSingParamContentVisible = false
},
apiSingParamContentHandleClose() {
this.apiSingParamContentVisible = false
},
addSingAttribute() {
this.addSingAttributeForm.attributes.push({ key: '', value: '' })
},
settingRequestApiSing() {
this.apiSingParamContentVisible = true
},
submitApiSignForm() {
const that = this
that.$refs.apiSingFrom.validate((valid) => {
if (!valid) {
console.error('error submit!!')
return
}
that.submitApiSignFormLoading = true
requestApiSing(that.apiSingFrom).then(res => {
that.submitApiSignFormLoading = false
that.apiSingParamContent = res.body
}).catch(er => {
that.submitApiSignFormLoading = false
})
})
}
}
}
</script>
<style scoped lang="scss">
.sgin-content {
background: rgb(243, 240, 240);
padding: 20px;
}
</style>