@ajaxjs/ui 1.2.1 → 1.2.3

package/README.md

@@ -1,17 +1,14 @@
-[![NPM](https://img.shields.io/npm/v/@ajaxjs/ui.svg?sanitize=true)](https://www.npmjs.com/package/@ajaxjs/ui)
-[![Vue.js](https://img.shields.io/badge/Vue.js-2.6.14-brightgreen.svg?style=flat&logo=vuedotjs&logoColor=white)](https://vuejs.org)
-[![TypeScript](https://img.shields.io/badge/TypeScript-4.9.4-blue.svg?style=flat&logo=Typescript&logoColor=white)](https://www.typescriptlang.org/)
-[![License](https://img.shields.io/badge/license-Apache--2.0-green.svg?longCache=true&style=flat)](http://www.apache.org/licenses/LICENSE-2.0.txt)
-[![Email](https://img.shields.io/badge/Contact--me-Email-orange.svg)](mailto:frank@ajaxjs.com)
-[![QQ群](https://framework.ajaxjs.com/static/qq.svg)](https://shang.qq.com/wpa/qunwpa?idkey=3877893a4ed3a5f0be01e809e7ac120e346102bd550deb6692239bb42de38e22)
+# Widgets based on iView.js
 
+for Vue2 & iView.js v2
 
-# Simple Widget library
+## API Selector API 选择器
 
-A few widgets, vue.js + typescript + less.js
+## API Helper 可视化 HTTP 请求工具
 
-NPM: https://www.npmjs.com/package/@ajaxjs/ui
+![Api Helper](https://foruda.gitee.com/images/1678378502563913592/697d70c3_784269.png)
 
-## Install
 
-    npm i @ajaxjs/ui
+教程 https://blog.csdn.net/zhangxin09/article/details/129391388
+
+[在线演示](https://framework.ajaxjs.com/demo/api-helper/) | [源码](https://gitee.com/sp42_admin/ajaxjs/tree/master/aj-ui-widget/api-helper) | [NPM 发布页](https://www.npmjs.com/package/@ajaxjs/aj-api-helper)

package/dist/api-helper/common/arg.vue

@@ -0,0 +1,46 @@
+<template>
+  <!-- 参数控制 -->
+  <Form :label-width="80">
+    <FormItem label="参数名称">
+      <Input v-model="args.name" placeholder="请输入参数的变量名，必填" />
+    </FormItem>
+
+    <FormItem label="参数类型">
+      <Select>
+        <Option></Option>
+      </Select>
+    </FormItem>
+
+    <FormItem label="是否必填">
+      <Checkbox v-model="single">必填</Checkbox>
+    </FormItem>
+
+    <FormItem label="参数值">
+      <Select>
+        <Option></Option>
+      </Select>
+    </FormItem>
+
+    <FormItem label="校验正则">
+      <Input v-model="args.name" placeholder="请输入参数的变量名，必填" />
+    </FormItem>
+
+    <FormItem label="参数说明">
+      <Input v-model="args.name" type="textarea" :rows="4" placeholder="请输入参数的变量名，必填" />
+    </FormItem>
+
+  </Form>
+</template>
+
+<script lang="ts">
+export default {
+  data(): {} {
+    return {
+      args: {} as API_HELPER_ARGUMENT,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+</style>

package/dist/api-helper/common/http-method.vue

@@ -0,0 +1,53 @@
+<template>
+  <span><span class="httpMethod" :class="type">{{type}}</span></span>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.httpMethod {
+  border: 1px solid;
+  border-radius: 3px;
+  padding: 0 3px;
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin-right: 3px;
+  font-size: 5px;
+  line-height: 15px;
+  height: 14px;
+}
+
+.GET {
+  border-color: #19be6b;
+  background-color: #f5fffa;
+  color: #19be6b;
+}
+
+.POST {
+  border-color: #2db7f5;
+  background-color: #e8f2fc;
+  color: #2db7f5;
+}
+
+.PUT {
+  border-color: #f90;
+  background-color: #fcf3e8;
+  color: #f90;
+}
+
+.DELETE {
+  border-color: #ff4f4f;
+  background-color: #ffeeee;
+  color: #ff4f4f;
+}
+</style>

package/dist/api-helper/common/input-table.vue

@@ -0,0 +1,128 @@
+<template>
+  <table class="input-table">
+    <thead>
+      <th width="50"></th>
+      <th>Key</th>
+      <th>Value</th>
+      <th>说明</th>
+      <th>操作</th>
+    </thead>
+    <tr v-for="(item, index) in tableData" :key="index" :class="{disable: !item.enable}">
+      <td align="center">
+        <input type="checkbox" v-model="item.enable" />
+      </td>
+      <td>
+        <input @focus="onInputFocus" @blur="onInoutBlur" @input="onInput(index)" v-model="item.key" />
+      </td>
+      <td>
+        <input @focus="onInputFocus" @blur="onInoutBlur" v-model="item.value" />
+      </td>
+      <td>
+        <input @focus="onInputFocus" @blur="onInoutBlur" v-model="item.desc" />
+      </td>
+      <td align="center">
+        <Icon type="md-trash" class="delBtn" title="删除" @click="delRow(index)" />
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: this.data,
+    };
+  },
+  props: {
+    data: { type: Array, required: true },
+  },
+  methods: {
+    onInputFocus(e) {
+      let input = e.target;
+      if (
+        input.parentNode &&
+        input.parentNode.parentNode &&
+        input.parentNode.parentNode.tagName == "TR"
+      ) {
+        let tr = input.parentNode.parentNode;
+        tr.classList.add("highlight");
+      }
+    },
+    onInoutBlur(e) {
+      let input = e.target;
+      if (
+        input.parentNode &&
+        input.parentNode.parentNode &&
+        input.parentNode.parentNode.tagName == "TR"
+      ) {
+        let tr = input.parentNode.parentNode;
+        tr.classList.remove("highlight");
+      }
+    },
+    onInput(index) {
+      if (index + 1 == this.tableData.length) {
+        // 最后一行
+        this.tableData.push({
+          enable: true,
+          key: "",
+          value: "",
+          desc: "",
+        });
+      }
+    },
+    delRow(index) {
+      if (this.tableData.length == 1) {
+      } else {
+        this.$delete(this.tableData, index);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.input-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  input {
+    border: 1px solid transparent;
+    outline: none;
+    padding: 0px 3px;
+    width: 100%;
+  }
+
+  input:focus {
+    border: 1px solid lightgray !important;
+    background-color: white !important;
+  }
+
+  tr {
+    &.highlight {
+      background-color: #f9f9f9;
+
+      input {
+        border-color: #f9f9f9;
+        background-color: #f9f9f9;
+      }
+    }
+
+    &.disable {
+      input {
+        color: lightgray;
+      }
+    }
+  }
+
+  td,
+  th {
+    padding: 5px 5px;
+    border: 1px solid lightgray;
+  }
+}
+
+.delBtn {
+  cursor: pointer;
+}
+</style>

package/dist/api-helper/document/document-render.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    data(): {
+        documnetObj: API_HELPER_DOCUMENT;
+        args: API_HELPER_ARGUMENT[];
+    };
+    methods: {
+        enlagrn(e: Event): void;
+    };
+};
+export default _default;

package/dist/api-helper/document/document-render.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    data() {
+        return {
+            documnetObj: {
+                name: "解锁任务中所有的飞机",
+                description: "把 空闲、解锁失败的进行解锁",
+                httpMethod: "GET",
+                url: "/uav/{uav_id}/check_status",
+                demoUrl: "http://test.ajaxjs.com:8081/drone/uav/10001/check_status",
+                isShow: true
+            },
+            args: [
+                {
+                    desc: "任务 id",
+                    name: "task_id",
+                    type: "FORM",
+                    dataType: "string",
+                    comment: "执行任务 execute | 立即返航 return | 结束任务 close 任选一",
+                    isRequired: true,
+                    values: [
+                        { value: "execute", comment: "执行任务" },
+                        { value: "return", comment: "立即返航" },
+                        { value: "close", comment: "结束任务" },
+                    ],
+                },
+            ],
+        };
+    },
+    methods: {
+        enlagrn(e) {
+            let img = e.target;
+            img.classList.toggle("small");
+        },
+    },
+};
+//# sourceMappingURL=document-render.js.map

package/dist/api-helper/document/document-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-render.js","sourceRoot":"","sources":["../../../src/api-helper/document/document-render.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACX,IAAI;QACA,OAAO;YACH,WAAW,EAAE;gBACT,IAAI,EAAE,YAAY;gBAClB,WAAW,EAAE,gBAAgB;gBAC7B,UAAU,EAAE,KAAK;gBACjB,GAAG,EAAE,4BAA4B;gBACjC,OAAO,EAAE,0DAA0D;gBACnE,MAAM,EAAE,IAAI;aACQ;YACxB,IAAI,EAAE;gBACF;oBACI,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,MAAM;oBACZ,QAAQ,EAAE,QAAQ;oBAClB,OAAO,EAAE,6CAA6C;oBACtD,UAAU,EAAE,IAAI;oBAChB,MAAM,EAAE;wBACJ,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE;wBACrC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE;wBACpC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE;qBACtC;iBACJ;aACqB;SAC7B,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL,OAAO,CAAC,CAAQ;YACZ,IAAI,GAAG,GAA6B,CAAC,CAAC,MAAM,CAAC;YAC7C,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC;KACJ;CACJ,CAAC"}

package/dist/api-helper/document/document-render.ts

@@ -0,0 +1,35 @@
+export default {
+    data() {
+        return {
+            documnetObj: {
+                name: "解锁任务中所有的飞机",
+                description: "把 空闲、解锁失败的进行解锁",
+                httpMethod: "GET",
+                url: "/uav/{uav_id}/check_status",
+                demoUrl: "http://test.ajaxjs.com:8081/drone/uav/10001/check_status",
+                isShow: true
+            } as API_HELPER_DOCUMENT,
+            args: [
+                {
+                    desc: "任务 id",
+                    name: "task_id",
+                    type: "FORM",
+                    dataType: "string",
+                    comment: "执行任务 execute | 立即返航 return | 结束任务 close 任选一",
+                    isRequired: true,
+                    values: [
+                        { value: "execute", comment: "执行任务" },
+                        { value: "return", comment: "立即返航" },
+                        { value: "close", comment: "结束任务" },
+                    ],
+                },
+            ] as API_HELPER_ARGUMENT[],
+        };
+    },
+    methods: {
+        enlagrn(e: Event): void {
+            let img: HTMLElement = <HTMLElement>e.target;
+            img.classList.toggle("small");
+        },
+    },
+};

package/dist/api-helper/document/document-render.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="document-rendered">
+    <h3>{{documnetObj.name}}</h3>
+    <p>{{documnetObj.description}}</p>
+
+    <div>
+      <h3 style="margin-top:0;">对应 UI：</h3>
+      <img class="ui small" @click="enlagrn($event)" src="https://tcs-devops.aliyuncs.com/storage/112h785d5d59567281da7b2b5f67ee7ec6b5?Signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBcHBJRCI6IjVlNzQ4MmQ2MjE1MjJiZDVjN2Y5YjMzNSIsIl9hcHBJZCI6IjVlNzQ4MmQ2MjE1MjJiZDVjN2Y5YjMzNSIsIl9vcmdhbml6YXRpb25JZCI6IiIsImV4cCI6MTY1NjI0MTAzNywiaWF0IjoxNjU1NjM2MjM3LCJyZXNvdXJjZSI6Ii9zdG9yYWdlLzExMmg3ODVkNWQ1OTU2NzI4MWRhN2IyYjVmNjdlZTdlYzZiNSJ9.zKVBc_WpZmoNV2XdzQOpKRSe4Etm5w2o2HH2afZrHOg" />
+    </div>
+
+    <p style="padding-top:3px">请求 <span class=" code-font">{{documnetObj.httpMethod}}</span> <span class="code code-font">{{documnetObj.url}}</span></p>
+
+    <h3>请求参数：</h3>
+    <table class="request-arg aj-table">
+      <thead>
+        <th>参数说明</th>
+        <th>变量</th>
+        <th>类型</th>
+        <th>参数位置</th>
+        <th>必填</th>
+        <th>描述</th>
+      </thead>
+      <tbody>
+        <tr v-for="arg in args" :key="arg.name">
+          <td>{{arg.desc}}</td>
+          <td>{{arg.name}}</td>
+          <td>{{arg.dataType}}</td>
+          <td>{{arg.type}}</td>
+          <td>{{arg.isRequired?'Yes': 'No'}}</td>
+          <td>{{arg.comment}}
+
+            <ul v-if="arg.values && arg.values.length">
+              <li v-for="enu in arg.values" :key="enu.value">
+                {{enu.value}} : {{enu.comment}}
+              </li>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3>请求示例：</h3>
+    <div class="note">
+      <a :href="documnetObj.demoUrl" target="_blank">{{documnetObj.demoUrl}}</a>
+    </div>
+    <h3>返回结果：</h3>
+
+    <pre class="note">
+{
+	"status": int,       // 调用接口是否成功，0：失败，1：成功
+	"errorCode": string, // 错误码，当 status=0 时，必须返回错误码
+	"message": string,   // 错误具体信息
+	"data": {            // 飞机状态信息
+		"airSpeed": 52.0,
+		"altitude": 55.5,
+		"ammeterState": "OK",
+		"compassState": "OK",
+		"flightState": "UNLOCKED", 
+		"gpsState": "OK",
+		"gpsTime": "2022-06-07 14:36:14",
+		"groundSpeed": 5.0,
+		"heading": 55.0,
+		"ip": "192.168.0.22",
+		"latitude": 39.9352,
+		"longitude": 116.354,
+		"netSignal": 98.0,
+		"netState": "OK",
+		"power": 8.0,
+		"satelliteMod": "98",
+		"satelliteNum": 98,
+		"satellitePrecision": 98.0,
+		"uavId": "10001",
+		"voltage": 5.0
+	}
+}</pre>
+  </div>
+</template>
+
+<script lang="ts" src="./document-render.ts">
+
+</script>
+
+<style lang="less" scoped>
+.document-rendered {
+  h3 {
+    font-weight: bold;
+    font-size: 1.2rem;
+    margin: 8px 0;
+  }
+
+  img.ui {
+    cursor: pointer;
+    max-width: 360px;
+    &.small {
+      max-width: 260px;
+    }
+  }
+}
+
+.code {
+  padding: 3px 4px;
+  //   border: 1px solid rgb(250, 167, 59);
+  background-color: rgb(253, 222, 222);
+  color: rgb(255, 35, 35);
+}
+
+.code-font {
+  font-family: "Courier New";
+}
+
+.note {
+  padding-left: 10px;
+  border-left: 4px solid lightgray;
+}
+
+.request-arg {
+  width: 98%;
+  td {
+    text-align: center;
+  }
+}
+
+// 快速制作1px 表格边框，为需要设置的 table 元素加上 border 的class即可
+.aj-table {
+  border: 1px lightgray solid;
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  th {
+    // background-color: #efefef;
+    letter-spacing: 3px;
+  }
+
+  td,
+  th {
+    border: 1px lightgray solid;
+    line-height: 160%;
+    height: 120%;
+    padding: 6px;
+  }
+
+  tr {
+    // .transition (background-color 400ms ease-out);
+
+    &:nth-child(odd) {
+      //   background: #f5f5f5;
+      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
+    }
+
+    &:hover {
+      background-color: #fbf8e9;
+    }
+  }
+}
+</style>

package/dist/api-helper/document/document.d.ts

@@ -0,0 +1,31 @@
+import Render from "./document-render.vue";
+declare const _default: {
+    components: {
+        Render: import("vue").VueConstructor<Render<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Render<Record<string, any>, Record<string, any>, never, never, any>>>;
+    };
+    data(): {
+        perview: boolean;
+        value3: boolean;
+        documnetObj: API_HELPER_DOCUMENT;
+        styles: {
+            height: string;
+            overflow: string;
+            paddingBottom: string;
+            position: string;
+        };
+        formData: {
+            name: string;
+            url: string;
+            owner: string;
+            type: string;
+            approver: string;
+            date: string;
+            desc: string;
+        };
+    };
+    methods: {
+        enlagrn(e: Event): void;
+        save(): void;
+    };
+};
+export default _default;

package/dist/api-helper/document/document.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const document_render_vue_1 = __importDefault(require("./document-render.vue"));
+// import { xhr_post_upload } from "../../../util/xhr";
+//@ts-ignore
+// import FileUploader from "./../../../widget/FileUploader/FileUploader.vue";
+exports.default = {
+    components: {
+        Render: document_render_vue_1.default,
+        // FileUploader 
+    },
+    data() {
+        return {
+            perview: false,
+            value3: false,
+            documnetObj: {
+                name: "解锁任务中所有的飞机",
+                description: "把 空闲、解锁失败的进行解锁",
+                httpMethod: "GET",
+                url: "/uav/{uav_id}/check_status",
+                demoUrl: "http://test.ajaxjs.com:8081/drone/uav/10001/check_status",
+                codeState: "DEFINED",
+                isShow: true,
+            },
+            styles: {
+                height: "calc(100% - 55px)",
+                overflow: "auto",
+                paddingBottom: "53px",
+                position: "static",
+            },
+            formData: {
+                name: "",
+                url: "",
+                owner: "",
+                type: "",
+                approver: "",
+                date: "",
+                desc: "",
+            },
+        };
+    },
+    methods: {
+        enlagrn(e) {
+            let img = e.target;
+            img.classList.toggle("small");
+        },
+        save() {
+            // xhr_post_upload("", (j) => {}, {}, { contentType: null });
+        },
+    },
+};
+//# sourceMappingURL=document.js.map

package/dist/api-helper/document/document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.js","sourceRoot":"","sources":["../../../src/api-helper/document/document.ts"],"names":[],"mappings":";;;;;AAAA,gFAA2C;AAC3C,uDAAuD;AACvD,YAAY;AACZ,8EAA8E;AAE9E,kBAAe;IACX,UAAU,EAAE;QACR,MAAM,EAAN,6BAAM;QACN,gBAAgB;KACnB;IACD,IAAI;QACA,OAAO;YACH,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,KAAK;YAEb,WAAW,EAAE;gBACT,IAAI,EAAE,YAAY;gBAClB,WAAW,EAAE,gBAAgB;gBAC7B,UAAU,EAAE,KAAK;gBACjB,GAAG,EAAE,4BAA4B;gBACjC,OAAO,EAAE,0DAA0D;gBACnE,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,IAAI;aACQ;YAExB,MAAM,EAAE;gBACJ,MAAM,EAAE,mBAAmB;gBAC3B,QAAQ,EAAE,MAAM;gBAChB,aAAa,EAAE,MAAM;gBACrB,QAAQ,EAAE,QAAQ;aACrB;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE,EAAE;gBACR,GAAG,EAAE,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE;gBACR,IAAI,EAAE,EAAE;aACX;SAGJ,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL,OAAO,CAAC,CAAQ;YACZ,IAAI,GAAG,GAA6B,CAAC,CAAC,MAAM,CAAC;YAC7C,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC;QAED,IAAI;YACA,6DAA6D;QACjE,CAAC;KACJ;CACJ,CAAC"}

package/dist/api-helper/document/document.ts

@@ -0,0 +1,55 @@
+import Render from "./document-render.vue";
+// import { xhr_post_upload } from "../../../util/xhr";
+//@ts-ignore
+// import FileUploader from "./../../../widget/FileUploader/FileUploader.vue";
+
+export default {
+    components: {
+        Render,
+        // FileUploader 
+    },
+    data() {
+        return {
+            perview: false,
+            value3: false,
+
+            documnetObj: {
+                name: "解锁任务中所有的飞机",
+                description: "把 空闲、解锁失败的进行解锁",
+                httpMethod: "GET",
+                url: "/uav/{uav_id}/check_status",
+                demoUrl: "http://test.ajaxjs.com:8081/drone/uav/10001/check_status",
+                codeState: "DEFINED",
+                isShow: true,
+            } as API_HELPER_DOCUMENT,
+
+            styles: {
+                height: "calc(100% - 55px)",
+                overflow: "auto",
+                paddingBottom: "53px",
+                position: "static",
+            },
+            formData: {
+                name: "",
+                url: "",
+                owner: "",
+                type: "",
+                approver: "",
+                date: "",
+                desc: "",
+            },
+
+            
+        };
+    },
+    methods: {
+        enlagrn(e: Event): void {
+            let img: HTMLElement = <HTMLElement>e.target;
+            img.classList.toggle("small");
+        },
+
+        save(): void {
+            // xhr_post_upload("", (j) => {}, {}, { contentType: null });
+        },
+    },
+};