开发者配置项、开发者选项自定义

devOptions.vue源码

<!-- 开发者选项 （Ctrl+Alt+Shift+D）-->
<template><div :class="$options.name" v-if="visible"><el-dialog:custom-class="`sg-el-dialog`":append-to-body="true":close-on-click-modal="false":close-on-press-escape="true":destroy-on-close="true":fullscreen="false":show-close="true":title="`开发者配置项`":width="`520px`":visible.sync="visible"style="animation: none"><template v-if="showDevOptions"><div style="margin: -20px 0"><!-- 这里添加弹窗内容 --><el-selectstyle="width: 100%"v-model="selectGroupValue_sgAPI"@change="changeGroupSelect_sgAPI":placeholder="`请选择`"><el-option-groupv-for="group in selectGroupOptions_sgAPI":key="group.label":label="group.label"><el-optionv-for="item in group.options":key="item.value":label="`${item.label}${item.value === `custom` ? `` : `[${item.value}]`}`":value="item.value":disabled="item.disabled"/></el-option-group></el-select><el-inputv-if="showCustomSgAPI"style="width: 100%; margin-top: 10px"ref="input"v-model.trim="inputValue_sgAPI"maxlength="20":show-word-limit="false":placeholder="`请输入接口路径(带http或https协议)`"@focus="$refs.input.select()"clearable/><el-divider /><el-button type="danger" @click="oneClickRestore" style="width: 100%">一键还原所有数据</el-button><el-alertstyle="margin-top: 10px":closable="true":close-text="``":description="``":effect="'light'":show-icon="true":title="`警告！该操作将丢失所有上传资源数据和配置信息！请谨慎操作！`":type="'error'"></el-alert><el-dialog:custom-class="'sg-el-dialog'":append-to-body="true":close-on-click-modal="true":close-on-press-escape="true":destroy-on-close="true":fullscreen="false":show-close="true":title="`输入登录密码执行一键还原`":width="'300px'":visible.sync="dialogVisible_oneClickRestore"><div><!-- 这里添加弹窗内容 --><el-inputstyle="width: 100%"ref="psw"type="password"v-model="psw"show-passwordmaxlength="20":show-word-limit="false":placeholder="`请输入6位以上的密码`"@focus="$refs.psw.select()"clearable/></div><div slot="footer"><el-button type="info" @click="dialogVisible_oneClickRestore = false" plain>取消</el-button><el-button type="primary" @click="confirmRestore">确定</el-button></div></el-dialog></div><div slot="footer" style="display: flex"><el-button type="info" @click="visible = false" plain style="flex-grow: 1">取消</el-button><el-button type="danger" @click="reset">重置配置项</el-button><el-button type="primary" @click="save">确定并刷新页面</el-button><el-button type="success" @click="change2Local">模拟本地环境</el-button></div></template><template v-else><div style="margin: -20px 0 -10px; display: flex; flex-wrap: nowrap"><el-inputstyle="width: 100%; margin-right: 10px"ref="psw"type="password"v-model="psw"show-passwordmaxlength="20":show-word-limit="false":placeholder="`请输入开发者密码`"@focus="$refs.psw.select()"[e-mail]="enterSet"/><el-button type="primary" @click="enterSet">进入设置</el-button></div></template></el-dialog></div>
</template>
<script>
export default {name: "api",components: {},data() {return {visible: false,showDevOptions: false,showCustomSgAPI: false,inputValue_sgAPI: ``,psw: ``, //开发者密码dialogVisible_oneClickRestore: false,selectGroupOptions_sgAPI: this.$global.devConfig.sgAPI,selectGroupValue_sgAPI: "",};},props: ["value", //是否显示"disabled", //是否禁用"data",],computed: {},watch: {value: {handler(d) {this.visible = d;if (d) {this.psw = ``;this.showDevOptions = false;this.init();}},deep: true,immediate: true,},visible(d) {this.$emit("input", d);}, //是否显示（双向绑定）selectGroupValue_sgAPI(d) {this.showCustomSgAPI = d === `custom`;},},created() {},mounted() {},destroyed() {},methods: {change2Local(d) {let query = this.$route.query;query.isLocal = true;let href = `${this.$g.getWebURLBeforeHash()}/${this.$router.resolve({path: this.$route.path,query,}).href}`;window.open(href, "_target");this.$g.screen.closeWebPage();},enterSet(d) {if (!this.psw)return this.$message.error(this.$refs.psw.$el.querySelector("input").placeholder);if (this.psw == this.$global.devConfig.devPassword) {this.showDevOptions = true;} else {this.showDevOptions = false;this.$message.error(`密码不正确`);}},//初始化init({ d } = {}) {let sgAPI = localStorage.sgAPI || this.$d.API_ROOT_URL;this.selectGroupValue_sgAPI = this.getGroup_sgAPI(sgAPI).value;if (this.selectGroupValue_sgAPI === `custom`) {this.inputValue_sgAPI = sgAPI;}},getGroup_sgAPI(value) {let aa = this.selectGroupOptions_sgAPI;for (let i = 0, len = aa.length; i < len; i++) {let options = aa[i].options;let option = options.find((v) => v.value == value);if (option) return option;}return { value: `custom`, label: `其他` };},changeGroupSelect_sgAPI(d) {},valid(d) {if (this.selectGroupValue_sgAPI === `custom`) {if (!this.$g.checkEverything(`httpurl`, this.inputValue_sgAPI))return this.$message.error(`请输入正确的网址URL`);}},reload(d) {this.visible = false;location.reload(true);},reset(d) {delete localStorage.sgAPI;this.reload();},save(d) {if (this.valid()) return;if (this.selectGroupOptions_sgAPI === `custom`) {localStorage.sgAPI = this.inputValue_sgAPI;} else {localStorage.sgAPI = this.selectGroupValue_sgAPI;}this.reload();},oneClickRestore(d) {this.$confirm(`<b  style="color: #F56C6C;font-weight: bold;font-size: 24px;" >此操作将永久删除所有数据和配置信息，是否继续？</b>`,`提示`,{dangerouslyUseHTMLString: true,confirmButtonText: `确定`,cancelButtonText: `取消`,type: "error",}).then(() => {//this.$message.success(`删除成功`);this.$confirm(`<b  style="color: #F56C6C;font-weight: bold;font-size: 24px;" >请最后一次确认是否要删除所数据和配置信息？</b>`,`提示`,{dangerouslyUseHTMLString: true,confirmButtonText: `确定`,cancelButtonText: `取消`,type: "error",}).then(() => {this.dialogVisible_oneClickRestore = true;//this.$message.success(`删除成功`);}).catch(() => {//this.$message(`已取消删除`);});}).catch(() => {//this.$message(`已取消删除`);});},valid_oneClickRestore(d) {if (!this.psw) return this.$message.error("请输入密码");if (this.psw.length < 6) return this.$message.error("请输入正确的密码");},confirmRestore(d) {if (this.valid_oneClickRestore()) return;let data = {PSW: this.psw,sgLog: `前端请求来源：${this.$options.name}一键还原`,};this.$d.一键还原接口({data,r: {l: { show: () => (this.loading = true), close: () => (this.loading = false) },s: (d) => {this.dialogVisible = false;this.$message.success(`一键还原成功`);setTimeout(() => {this.$global.exit({ clearCookie: true });}, 1000);// console.log("【成功】", d);},},});},},
};
</script>
<style lang="scss" scoped>
.api {
}
</style>

配置项

// 开发者配置项----------------------------------------
devConfig: {devPassword: `******`,//开发者密码sgAPI: [{label: '测试环境',options: [{ value: `//shuzhiqiang.com:8088/rp`, label: '***环境名称' },{ value: `//shuzhiqiang.com:8088/rp`, label: '***环境名称' },],},{label: '生产环境',options: [{ value: `//shuzhiqiang.com/api`, label: '***环境名称' },{ value: `//shuzhiqiang.com:30107/api`, label: '***环境名称' },]},{label: '其他',options: [{ value: `custom`, label: '自定义' },]},]
},