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

    devOptions.vue源码

    2. <template>
    3.   <div :class="$options.name" v-if="visible">
    4.     <el-dialog
    5.       :custom-class="`sg-el-dialog`"
    6.       :append-to-body="true"
    7.       :close-on-click-modal="false"
    8.       :close-on-press-escape="true"
    9.       :destroy-on-close="true"
    10.       :fullscreen="false"
    11.       :show-close="true"
    12.       :title="`开发者配置项`"
    13.       :width="`520px`"
    14.       :visible.sync="visible"
    15.       style="animation: none"
    16.     >
    17.       <template v-if="showDevOptions">
    18.         <div style="margin: -20px 0">
    19.           
    20.           <el-select
    21.             style="width: 100%"
    22.             v-model="selectGroupValue_sgAPI"
    23.             @change="changeGroupSelect_sgAPI"
    24.             :placeholder="`请选择`"
    25.           >
    26.             <el-option-group
    27.               v-for="group in selectGroupOptions_sgAPI"
    28.               :key="group.label"
    29.               :label="group.label"
    30.             >
    31.               <el-option
    32.                 v-for="item in group.options"
    33.                 :key="item.value"
    34.                 :label="`${item.label}${
    35.                   item.value === `custom` ? `` : `[${item.value}]`
    36.                 }`"
    37.                 :value="item.value"
    38.                 :disabled="item.disabled"
    39.               />
    40.             el-option-group>
    41.           el-select>
    42.           <el-input
    43.             v-if="showCustomSgAPI"
    44.             style="width: 100%; margin-top: 10px"
    45.             ref="input"
    46.             v-model.trim="inputValue_sgAPI"
    47.             maxlength="20"
    48.             :show-word-limit="false"
    49.             :placeholder="`请输入接口路径(带http或https协议)`"
    50.             @focus="$refs.input.select()"
    51.             clearable
    52.           />
    53.  
    54.           <el-divider />
    55.  
    56.           <el-button type="danger" @click="oneClickRestore" style="width: 100%"
    57.             >一键还原所有数据
    58.           >
    59.           <el-alert
    60.             style="margin-top: 10px"
    61.             :closable="true"
    62.             :close-text="``"
    63.             :description="``"
    64.             :effect="'light'"
    65.             :show-icon="true"
    66.             :title="`警告！该操作将丢失所有上传资源数据和配置信息！请谨慎操作！`"
    67.             :type="'error'"
    68.           >
    69.           el-alert>
    70.  
    71.           <el-dialog
    72.             :custom-class="'sg-el-dialog'"
    73.             :append-to-body="true"
    74.             :close-on-click-modal="true"
    75.             :close-on-press-escape="true"
    76.             :destroy-on-close="true"
    77.             :fullscreen="false"
    78.             :show-close="true"
    79.             :title="`输入登录密码执行一键还原`"
    80.             :width="'300px'"
    81.             :visible.sync="dialogVisible_oneClickRestore"
    82.           >
    83.             <div>
    84.               
    85.               <el-input
    86.                 style="width: 100%"
    87.                 ref="psw"
    88.                 type="password"
    89.                 v-model="psw"
    90.                 show-password
    91.                 maxlength="20"
    92.                 :show-word-limit="false"
    93.                 :placeholder="`请输入6位以上的密码`"
    94.                 @focus="$refs.psw.select()"
    95.                 clearable
    96.               />
    97.             div>
    98.             <div slot="footer">
    99.               <el-button type="info" @click="dialogVisible_oneClickRestore = false" plain
    100.                 >取消
    101.               >
    102.               <el-button type="primary" @click="confirmRestore">确定el-button>
    103.             div>
    104.           el-dialog>
    105.         div>
    106.         <div slot="footer" style="display: flex">
    107.           <el-button type="info" @click="visible = false" plain style="flex-grow: 1"
    108.             >取消
    109.           >
    110.           <el-button type="danger" @click="reset">重置配置项el-button>
    111.           <el-button type="primary" @click="save">确定并刷新页面el-button>
    112.           <el-button type="success" @click="change2Local">模拟本地环境el-button>
    113.         div>
    114.       template>
    115.  
    116.       <template v-else>
    117.         <div style="margin: -20px 0 -10px; display: flex; flex-wrap: nowrap">
    118.           <el-input
    119.             style="width: 100%; margin-right: 10px"
    120.             ref="psw"
    121.             type="password"
    122.             v-model="psw"
    123.             show-password
    124.             maxlength="20"
    125.             :show-word-limit="false"
    126.             :placeholder="`请输入开发者密码`"
    127.             @focus="$refs.psw.select()"
    128.             clearable
    129.             @keyup.enter.native="enterSet"
    130.           />
    131.           <el-button type="primary" @click="enterSet">进入设置el-button>
    132.         div>
    133.       template>
    134.     el-dialog>
    135.   div>
    136. template>
    137. <script>
    138. export default {
    139.   name: "api",
    140.   components: {},
    141.   data() {
    142.     return {
    143.       visible: false,
    144.       showDevOptions: false,
    145.       showCustomSgAPI: false,
    146.       inputValue_sgAPI: ``,
    147.       psw: ``, //开发者密码
    148.       dialogVisible_oneClickRestore: false,
    149.  
    150.       selectGroupOptions_sgAPI: this.$global.devConfig.sgAPI,
    151.       selectGroupValue_sgAPI: "",
    152.     };
    153.   },
    154.   props: [
    155.     "value", //是否显示
    156.     "disabled", //是否禁用
    157.     "data",
    158.   ],
    159.   computed: {},
    160.   watch: {
    161.     value: {
    162.       handler(d) {
    163.         this.visible = d;
    164.         if (d) {
    165.           this.psw = ``;
    166.           this.showDevOptions = false;
    167.           this.init();
    168.         }
    169.       },
    170.       deep: true,
    171.       immediate: true,
    172.     },
    173.     visible(d) {
    174.       this.$emit("input", d);
    175.     }, //是否显示（双向绑定）
    176.     selectGroupValue_sgAPI(d) {
    177.       this.showCustomSgAPI = d === `custom`;
    178.     },
    179.   },
    180.   created() {},
    181.   mounted() {},
    182.   destroyed() {},
    183.   methods: {
    184.     change2Local(d) {
    185.       let query = this.$route.query;
    186.       query.isLocal = true;
    187.  
    188.       let href = `${this.$g.getWebURLBeforeHash()}/${
    189.         this.$router.resolve({
    190.           path: this.$route.path,
    191.           query,
    192.         }).href
    193.       }`;
    194.       window.open(href, "_target");
    195.       this.$g.screen.closeWebPage();
    196.     },
    197.     enterSet(d) {
    198.       if (!this.psw)
    199.         return this.$message.error(this.$refs.psw.$el.querySelector("input").placeholder);
    200.  
    201.       if (this.psw == this.$global.devConfig.devPassword) {
    202.         this.showDevOptions = true;
    203.       } else {
    204.         this.showDevOptions = false;
    205.         this.$message.error(`密码不正确`);
    206.       }
    207.     },
    208.     //初始化
    209.     init({ d } = {}) {
    210.       let sgAPI = localStorage.sgAPI || this.$d.API_ROOT_URL;
    211.       this.selectGroupValue_sgAPI = this.getGroup_sgAPI(sgAPI).value;
    212.       if (this.selectGroupValue_sgAPI === `custom`) {
    213.         this.inputValue_sgAPI = sgAPI;
    214.       }
    215.     },
    216.     getGroup_sgAPI(value) {
    217.       let aa = this.selectGroupOptions_sgAPI;
    218.       for (let i = 0, len = aa.length; i < len; i++) {
    219.         let options = aa[i].options;
    220.         let option = options.find((v) => v.value == value);
    221.         if (option) return option;
    222.       }
    223.       return { value: `custom`, label: `其他` };
    224.     },
    225.     changeGroupSelect_sgAPI(d) {},
    226.     valid(d) {
    227.       if (this.selectGroupValue_sgAPI === `custom`) {
    228.         if (!this.$g.checkEverything(`httpurl`, this.inputValue_sgAPI))
    229.           return this.$message.error(`请输入正确的网址URL`);
    230.       }
    231.     },
    232.     reload(d) {
    233.       this.visible = false;
    234.       location.reload(true);
    235.     },
    236.     reset(d) {
    237.       delete localStorage.sgAPI;
    238.  
    239.       this.reload();
    240.     },
    241.     save(d) {
    242.       if (this.valid()) return;
    243.       if (this.selectGroupOptions_sgAPI === `custom`) {
    244.         localStorage.sgAPI = this.inputValue_sgAPI;
    245.       } else {
    246.         localStorage.sgAPI = this.selectGroupValue_sgAPI;
    247.       }
    248.       this.reload();
    249.     },
    250.     oneClickRestore(d) {
    251.       this.$confirm(
    252.         `此操作将永久删除所有数据和配置信息，是否继续？`,
    253.         `提示`,
    254.         {
    255.           dangerouslyUseHTMLString: true,
    256.           confirmButtonText: `确定`,
    257.           cancelButtonText: `取消`,
    258.           type: "error",
    259.         }
    260.       )
    261.         .then(() => {
    262.           //this.$message.success(`删除成功`);
    263.           this.$confirm(
    264.             `请最后一次确认是否要删除所数据和配置信息？`,
    265.             `提示`,
    266.             {
    267.               dangerouslyUseHTMLString: true,
    268.               confirmButtonText: `确定`,
    269.               cancelButtonText: `取消`,
    270.               type: "error",
    271.             }
    272.           )
    273.             .then(() => {
    274.               this.dialogVisible_oneClickRestore = true;
    275.               //this.$message.success(`删除成功`);
    276.             })
    277.             .catch(() => {
    278.               //this.$message(`已取消删除`);
    279.             });
    280.         })
    281.         .catch(() => {
    282.           //this.$message(`已取消删除`);
    283.         });
    284.     },
    285.     valid_oneClickRestore(d) {
    286.       if (!this.psw) return this.$message.error("请输入密码");
    287.       if (this.psw.length < 6) return this.$message.error("请输入正确的密码");
    288.     },
    289.     confirmRestore(d) {
    290.       if (this.valid_oneClickRestore()) return;
    291.  
    292.       let data = {
    293.         PSW: this.psw,
    294.         sgLog: `前端请求来源：${this.$options.name}一键还原`,
    295.       };
    296.       this.$d.一键还原接口({
    297.         data,
    298.         r: {
    299.           l: { show: () => (this.loading = true), close: () => (this.loading = false) },
    300.           s: (d) => {
    301.             this.dialogVisible = false;
    302.             this.$message.success(`一键还原成功`);
    303.             setTimeout(() => {
    304.               this.$global.exit({ clearCookie: true });
    305.             }, 1000);
    306.             // console.log("【成功】", d);
    307.           },
    308.         },
    309.       });
    310.     },
    311.   },
    312. };
    313. script>
    314. <style lang="scss" scoped>
    315. .api {
    316. }
    317. style>

    配置项

    1. // 开发者配置项----------------------------------------
    2. devConfig: {
    3.     devPassword: `******`,//开发者密码
    4.     sgAPI: [
    5.         {
    6.             label: '测试环境',
    7.             options: [
    8.                 { value: `//shuzhiqiang.com:8088/rp`, label: '***环境名称' },
    9.                 { value: `//shuzhiqiang.com:8088/rp`, label: '***环境名称' },
    10.             ],
    11.  
    12.         },
    13.         {
    14.             label: '生产环境',
    15.             options: [
    16.                 { value: `//shuzhiqiang.com/api`, label: '***环境名称' },
    17.                 { value: `//shuzhiqiang.com:30107/api`, label: '***环境名称' },
    18.             ]
    19.         },
    20.         {
    21.             label: '其他',
    22.             options: [
    23.                 { value: `custom`, label: '自定义' },
    24.             ]
    25.         },
    26.     ]
    27. },

  • 相关阅读:
    SpringBoot第十三篇：同时集成华为RC6.5.1安全版kafka和原生kafka，通过配置文件动态控制
    Dubbo admin 快速搭建
    【UE4 反射系统】 UCLAS UFUNCTION UPROPERTY 宏简单解析 持续更新
    javascript 算术运算符，比较运算符 ，逻辑运算符
    CSS关于默认宽度
    申请与认证IB课程全流程
    《MongoDB》在docker中用得到关于MongoDB一行命令
    机器学习笔记 - sklearn随机森林（集成学习）
    web前端设计与开发期末作品 旅游咨询网站 HTML5期末大作业 HTML+CSS旅游社网站5个页面 关于制作网页主题论述
    NX二次开发-UFUN查询对象的类型和子类型UF_OBJ_ask_type_and_subtype
  • 原文地址：https://blog.csdn.net/qq_37860634/article/details/139806488