0913xx

src/views/interface/item/child/ActionMock.vue

@@ -0,0 +1,344 @@
+<template>
+    <a-modal :visible="true" :width="width" :maskClosable="false" :destroyOnClose="true" :title="title" :footer="null"
+        wrapClassName="modal-wrap" @cancel="onClose">
+        <div class="action-content">
+            <!-- 请求链接 -->
+            <div class="item">
+                <div class="item-header">
+                    <div class="title">请求链接</div>
+                </div>
+                <div class="item-body">
+                    <a-input :addon-before="action.requestMethod" v-model:value="action.requestUrl" disabled>
+                        <template #addonAfter>
+                            <div class="submit-btn" @click="onSubmit">发送</div>
+                        </template>
+                    </a-input>
+                </div>
+            </div>
+            <!-- 请求参数 -->
+            <div class="item">
+                <div class="item-header">
+                    <div class="title">请求参数</div>
+                    <div class="btns">
+                        <div class="btn" @click="openGetToken">获取token</div>
+                    </div>
+                </div>
+                <div class="item-body">
+                    <a-table :data-source="queryParams" :columns="reqColumns" :pagination="{ hideOnSinglePage: true }"
+                        bordered>
+                        <template #required="{ record }">
+                            <div>{{ record.required ? '是' : '否' }}</div>
+                        </template>
+                        <template #paramsValue="{ record }">
+                            <a-textarea v-if="record.in === 'body' || record.type !== 'string'"
+                                v-model:value="reqParams[record.key].paramsValue" :rows="3" />
+                            <a-input v-else v-model:value="reqParams[record.key].paramsValue" />
+                        </template>
+                    </a-table>
+                </div>
+            </div>
+            <!-- 返回数据 -->
+            <div class="item">
+                <div class="item-header">
+                    <div class="title">返回数据</div>
+                </div>
+                <div class="item-body">
+                    <a-textarea v-model:value="resData" placeholder="返回数据" :rows="4" disabled />
+                </div>
+            </div>
+        </div>
+    </a-modal>
+    <a-modal v-model:visible="visible" centered title="获取token" width="600px" :maskClosable="false" @cancel="closeGetToken" :footer="null">
+        <div class="content" style="padding: 20px 10px 10px;font-size: 16px;">
+            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+                <!-- <a-form-item label="client_id" name="client_id">
+                    <a-input v-model:value="tokenFormData.client_id" style="width: 100%" placeholder="" />
+                </a-form-item>
+                <a-form-item label="client_secret" name="client_secret">
+                    <a-input v-model:value="tokenFormData.client_secret" style="width: 100%" placeholder="" />
+                </a-form-item>
+                <a-form-item label="username" name="username">
+                    <a-input v-model:value="tokenFormData.username" style="width: 100%" placeholder="" />
+                </a-form-item>
+                <a-form-item label="password" name="password">
+                    <a-input v-model:value="tokenFormData.password" style="width: 100%" placeholder="" />
+                </a-form-item> -->
+                <a-form-item label="access_token" name="access_token">
+                    <a-textarea v-model:value="accessToken" placeholder="" :rows="8"/>
+                </a-form-item>
+            </a-form>
+        </div>
+        <!-- <template #footer>
+            <a-button type="primary" :loading="loading" @click="getTokenSubmit">获取token</a-button>
+        </template> -->
+    </a-modal>
+</template>
+<script>
+import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
+import { message } from 'ant-design-vue';
+import { session } from '/@/utils/Memory';
+import axios from 'axios';
+
+const props = {
+    action: {
+        type: Object,
+        default: {}
+    }
+}
+export default defineComponent({
+    name: 'modal',
+    components: {},
+    props,
+    setup(props, { emit }) {
+        const data = reactive({
+            width: '1200px',
+            title: '调试接口',
+        })
+
+        //获取token相关数据
+        // const formRef = ref(null)
+        // const tokenFormData = reactive({
+        //     client_id: "",
+        //     client_secret: "",
+        //     username: "",
+        //     password: "",
+        //     access_token: ""
+        // })
+        const accessToken = ref('')
+        // const rules = {
+        //     client_id: [{
+        //         required: true,
+        //         message: '请输入client_id',
+        //         trigger: 'blur'
+        //     }],
+        //     client_secret: [{
+        //         required: true,
+        //         message: '请输入client_secret',
+        //         trigger: 'blur'
+        //     }],
+        //     username: [{
+        //         required: true,
+        //         message: '请输入账号',
+        //         trigger: 'blur'
+        //     }],
+        //     password: [{
+        //         required: true,
+        //         message: '请输入密码',
+        //         trigger: 'blur'
+        //     }]
+        // };
+        const visible = ref(false)
+        //请求参数数组
+        const reqParams = ref([])
+        //返回数据
+        const resData = ref('')
+        //请求原始数据
+        const action = ref(props.action)
+        const reqRealUrl = ref(null)
+        const reqMethod = ref(null)
+        const queryParams = ref(null)
+        watch(
+            () => props.action,
+            (val) => {
+                action.value = val;
+                reqRealUrl.value = action.value.askUrl;
+                queryParams.value = action.value.queryParams;
+                queryParams.value.forEach((item, index) => {
+                    item.key = index
+                })
+            },
+            {
+                deep: true,
+                immediate: true
+            }
+        )
+        // 请求参数table
+        const reqColumns = [
+            {
+                title: '是否必填',
+                align: 'center',
+                dataIndex: 'required',
+                slots: {
+                    customRender: 'required',
+                }
+            },
+            {
+                title: '参数名称',
+                align: 'center',
+                dataIndex: 'name',
+                key: 'name'
+            },
+            {
+                title: '参数位置',
+                align: 'center',
+                dataIndex: 'in',
+                key: 'in'
+            },
+            {
+                title: '数据类型',
+                align: 'center',
+                dataIndex: 'type',
+                key: 'type'
+            },
+            {
+                title: '参数值',
+                align: 'center',
+                dataIndex: 'paramsValue',
+                slots: {
+                    customRender: 'paramsValue',
+                }
+            }
+        ]
+        // 关闭请求弹窗
+        const onClose = (e) => {
+            emit('closeModal')
+        }
+        //发送请求
+        const onSubmit = () => {
+            // console.log(queryParams.value);
+            console.log(reqParams.value);
+            let validate = true
+            reqParams.value.forEach(item=>{
+                if(item.required && item.paramsValue===''){
+                    validate = false
+                }
+            })
+            if(!validate){
+                message.error('请检查必填项')
+                return;
+            }
+            // 先组装请求参数
+            let params = {}, data = null, header={}
+            reqParams.value.forEach(item=>{
+                if(item.in === 'query'){
+                    params[item.name] = item.paramsValue || null
+                }else if(item.in === 'header'){
+                    header[item.name] = item.paramsValue || null
+                }else{
+                    data = JSON.parse(item.paramsValue)
+                }
+            })
+            console.log(header);
+            axios({
+                url:reqRealUrl.value,
+                header:header,
+                method:reqMethod.value,
+                params:params,
+                data:data
+            }).then(res=>{
+                console.log(res);
+            })
+        }
+        //初始化请求所需数据
+        onMounted(() => {
+            reqRealUrl.value = action.value.askUrl;
+            reqMethod.value = action.requestMethod;
+            queryParams.value = action.value.queryParams;
+            queryParams.value.forEach((item, index) => {
+                item.key = index
+                reqParams.value.push({
+                    required:item.required,
+                    name: item.name,
+                    in:item.in,
+                    paramsValue: ''
+                })
+            })
+            console.log(queryParams.value);
+        })
+        //打开获取token弹窗
+        const openGetToken = () => {
+            visible.value = true
+            accessToken.value = session.getItem('token')
+        }
+        // 获取token提交
+        // const getTokenSubmit = () => {
+        //     formRef.value.validate().then(() => {
+        //         message.info('获取token');
+        //         visible.value = false;
+        //     })
+        // }
+        //关闭获取token弹窗
+        const closeGetToken = () => {
+            visible.value = false;
+            accessToken.value = ''
+        }
+        return {
+            // formRef,
+            ...toRefs(data),
+            // tokenFormData,
+            // rules,
+            accessToken,
+            visible,
+            reqParams,
+            resData,
+            reqRealUrl,
+            reqMethod,
+            queryParams,
+            reqColumns,
+            labelCol: { span: 5 },
+            wrapperCol: { span: 16 },
+            //func
+            onClose,
+            onSubmit,
+            openGetToken,
+            closeGetToken
+        };
+    },
+});
+</script>
+<style lang="less" scoped>
+.modal-wrap {
+    .action-content {
+        padding: 10px 20px 10px 10px;
+
+        .item {
+            margin-top: 10px;
+            margin-bottom: 20px;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            .item-header {
+                padding-left: 10px;
+                height: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                border-left: 2px solid #e6a23c;
+                box-sizing: border-box;
+
+                .btns {
+                    display: flex;
+
+                    .btn {
+                        width: 80px;
+                        height: 30px;
+                        line-height: 30px;
+                        text-align: center;
+                        border-radius: 5px;
+                        background-color: #66b1ff;
+                        color: #fff;
+                        cursor: pointer;
+                        user-select: none;
+                    }
+                }
+            }
+
+            .item-body {
+                margin-top: 10px;
+                padding-left: 10px;
+
+                .submit-btn {
+                    cursor: pointer;
+                    user-select: none;
+                }
+
+                ::v-deep td{
+                    padding: 5px 5px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/interface/item/child/Details.vue

@@ -6,8 +6,8 @@
             <div class="item-header">
                 <div class="title">基本信息</div>
                 <div class="btns">
-                    <div class="btn">接口说明</div>
-                    <div class="btn">在线调试</div>
+                    <div class="btn" @click="openActionRemark">调试说明</div>
+                    <div class="btn" @click="openActionMock">在线调试</div>
                 </div>
             </div>
             <div class="item-body">
@@ -25,7 +25,7 @@
             <div class="item-body">
                 <a-table :data-source="reqData" :columns="reqColumns" :pagination="{ hideOnSinglePage: true }">
                     <template #required="{ record }">
-                        <div>{{ record.required? '是' : '否' }}</div>
+                        <div>{{ record.required ? '是' : '否' }}</div>
                     </template>
                 </a-table>
             </div>
@@ -46,15 +46,28 @@
                 <div class="title">返回示例</div>
             </div>
             <div class="item-body">
-                <a-textarea v-model:value="resExample" placeholder="" :autosize="true" />
+                <a-textarea v-model:value="resExample" placeholder="" :autoSize="true" />
             </div>
         </div>
     </div>
+    <a-modal v-model:visible="visible" centered title="调用说明"  width="700px" :footer="null">
+        <div class="content" style="padding: 20px 10px 10px;font-size: 16px;">
+            <p>· 使用需鉴权的接口要在网络请求头（Http Headers）中添加参数（Authorization）项，设置已授权的令牌（JWT：JSON Web Tokens）</p>
+            <p>· 获取授权的JWT如下:</p>
+            <p>1). 首先拥有成都市规划和自然资源局门户的账号和密码</p>
+            <p>2). 其次由信息中心管理员配置client_id、client_secret、username、password参数值</p>
+            <p>3). 然后获取access_token</p>
+            <p>4). 最后通过access_token访问需鉴权的资源</p>
+            <p>5). 注意:access_token有效期为:30分钟,过期需重新获取</p>
+        </div>
+    </a-modal>
+    <ActionMock v-if="showActionMock" @closeModal="showActionMock = false" :action="actionData"/>
 </template>
 
 <script>
 import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
 import { getInterfaceDetail } from '/@/api/interface/interface.ts';
+import ActionMock from './ActionMock.vue';
 
 const props = {
     action: {
@@ -65,11 +78,11 @@ const props = {
 
 export default defineComponent({
     name: 'assemblyDetail',
-    components: {},
+    components: {ActionMock},
     props,
     setup(props) {
         //action数据，初始化时使用这个数据去组装需要的数据
-        const data = ref(null)
+        const actionData = ref(null)
 
         // 四类数据
         const baseData = ref(null)
@@ -77,6 +90,9 @@ export default defineComponent({
         const resData = ref(null)
         const resExample = ref(null)
 
+        const visible = ref(false)
+        const showActionMock = ref(false)
+
         //请求参数表
         const reqColumns = [
             {
@@ -152,7 +168,7 @@ export default defineComponent({
         )
         const getActionData = (id) => {
             getInterfaceDetail(id).then(res => {
-                data.value = {
+                actionData.value = {
                     ...res,
                     queryParams: JSON.parse(res.queryParams),
                     requestHeaders: JSON.parse(res.requestHeaders),
@@ -163,50 +179,69 @@ export default defineComponent({
                 baseData.value = [
                     {
                         label: '接口名称',
-                        value: data.value.name || '',
+                        value: actionData.value.name || '',
                     },
                     {
                         label: '接口地址',
-                        value: data.value.requestUrl || '',
+                        value: actionData.value.requestUrl || '',
                     },
                     {
                         label: '请求方式',
-                        value: data.value.requestMethod ? data.value.requestMethod : '',
+                        value: actionData.value.requestMethod ? actionData.value.requestMethod : '',
                     },
                     {
                         label: '发布日期',
-                        value: data.value.publishTime || '',
+                        value: actionData.value.publishTime || '',
                     },
                     {
                         label: '版本号',
-                        value: data.value.version || ''
+                        value: actionData.value.version || ''
                     },
                     {
                         label: '接口描述',
-                        value: data.value.remark || ''
+                        value: actionData.value.remark || ''
                     },
                 ]
-                reqData.value = data.value.queryParams
-                reqData.value.forEach((item,index)=>{
+                reqData.value = actionData.value.queryParams
+                reqData.value.unshift({
+                    description:'令牌',
+                    in:'header',
+                    name:'Authorization',
+                    required:false,
+                    type:'string'
+                })
+                reqData.value.forEach((item, index) => {
                     item.key = index
                 })
-                resData.value = data.value.responseParams
-                resData.value.forEach((item,index)=>{
+                resData.value = actionData.value.responseParams
+                resData.value.forEach((item, index) => {
                     item.key = index
                 })
-                resExample.value = data.value.successRespExample
-                console.log(data.value);
+                resExample.value = actionData.value.successRespExample
+                console.log(actionData.value);
             })
         }
+        const openActionRemark = () => {
+            visible.value = true;
+        }
+        const openActionMock = ()=>{
+            showActionMock.value = true
+        }
         return {
-            data,
+            actionData,
             baseData,
             reqData,
             resData,
             resExample,
 
             reqColumns,
-            resColumns
+            resColumns,
+
+            visible,
+            showActionMock,
+
+            openActionRemark,
+            openActionMock
         };
     },
 });
@@ -243,6 +278,8 @@ export default defineComponent({
                     background-color: #66b1ff;
                     color: #fff;
                     margin-right: 10px;
+                    cursor: pointer;
+                    user-select: none;
                 }
             }
         }