【sgCreateCallAPIFunctionParam】自定义小工具:敏捷开发→调用接口方法参数生成工具
<template>
<div :class="$options.name" class="sgDevTool">
<sgHead />
<div class="sg-container">
<div class="sg-start">
<div style="margin-bottom: 10px">
参数列表[逗号模式]
<el-tooltip
:content="`如何获取参数列表[逗号模式]?`"
:effect="`dark`"
:enterable="false"
:placement="`top`"
:transition="`none`"
>
<el-link
icon="el-icon-info"
:underline="false"
@click="$refs.image.showViewer = true"
/>
</el-tooltip>
<el-image
ref="image"
style="display: none"
:preview-src-list="[`~@/../static/img/${$options.name}.gif`]"
/>
</div>
<el-input
style="margin-bottom: 10px"
ref="textareaValue1"
type="textarea"
:placeholder="`请粘贴apifox.com网站对应接口-运行-body-[x-www-form-urlencoded]-批量编辑-逗号模式,复制内容`"
v-model="textareaValue1"
show-word-limit
/>
<el-button type="primary" @click="createResult">运行</el-button>
</div>
<div class="sg-center">→</div>
<div class="sg-end">
<ouputTextarea ref="ouputTextarea" v-model="textareaValue2" />
</div>
</div>
</div>
</template>
<script>
import sgHead from "@/vue/components/sgHead";
import ouputTextarea from "@/vue/components/ouputTextarea";
export default {
name: "sgCreateCallAPIFunctionParam",
components: {
sgHead,
ouputTextarea,
},
data() {
return {
textareaValue1: localStorage[`sgDevTool/leftTextArea`],
textareaValue2: "",
};
},
computed: {},
watch: {
textareaValue1(newValue, oldValue) {
newValue && this.createResult(newValue);
localStorage[`sgDevTool/leftTextArea`] = newValue;
},
},
created() {},
methods: {
createResult(d) {
if (this.textareaValue1.includes("true,")) {
let texts = this.$g.getMultiLineTexts(this.textareaValue1);
let r = [];
texts.forEach((v) => {
if (v.includes("true,")) {
r.push(
v
.split("true,")[1]
.split(",")[0]
.replace(/\[/g, ``)
.replace(/\]/g, ``)
.replace(/\s+/g, "")
);
}
});
let params1 = r.join(",");
let params2 = r.join(",\n");
this.textareaValue2 = `${params1}
${params2},
`;
this.$refs.ouputTextarea.copyResult(); //自动复制生成结果
} else {
return this.$message.error(this.$refs.textareaValue1.$attrs.placeholder);
}
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/css/sgDevTool";
</style>