diff --git a/web/packages/apiServices/i18n/en.json b/web/packages/apiServices/i18n/en.json
index ea3eceb9d..ea6c18c29 100644
--- a/web/packages/apiServices/i18n/en.json
+++ b/web/packages/apiServices/i18n/en.json
@@ -69,6 +69,7 @@
         "applicant": "Applicant：",
         "status": "Status",
         "find": "Find",
+        "approve": "Submit Approval",
         "path": "API Path：",
         "submitter": "Submitter",
         "scriptsPath": "Scripts Path："
@@ -93,6 +94,8 @@
         "reason": "Reason",
         "ip_whitelist": "Ip Whitelist",
         "apply_time": "Apply Time",
+        "applySource": "Apply Source",
+        "proxyExecuteUser": "Execute User",
         "caller": "Caller",
         "access": "Access",
         "version": "Version",
@@ -133,6 +136,8 @@
       "disable": "Stop",
       "normal": "Normal",
       "expired": "Expired",
+      "submited": "已提单",
+      "unsubmit": "未提单",
       "all": "All",
       "updateApiModal": {
         "modalTitle": "Update API",
diff --git a/web/packages/apiServices/i18n/zh.json b/web/packages/apiServices/i18n/zh.json
index 3ed8a18b8..96998a7b8 100644
--- a/web/packages/apiServices/i18n/zh.json
+++ b/web/packages/apiServices/i18n/zh.json
@@ -71,6 +71,7 @@
         "path": "API路径：",
         "submitter": "提交人",
         "find": "查询",
+        "approve": "批量提交审批",
         "scriptsPath": "脚本路径："
       },
       "buttonText": {
@@ -102,6 +103,8 @@
         "reason": "申请原因",
         "ip_whitelist": "白名单IP",
         "apply_time": "申请起始时间",
+        "applySource": "审批单号",
+        "executeUser": "代理执行用户",
         "caller": "调用方",
         "access": "限流情况",
         "version": "版本号",
@@ -133,6 +136,8 @@
       "disable": "已禁用",
       "normal": "正常",
       "expired": "已过期",
+      "submited": "已提单",
+      "unsubmit": "未提单",
       "all": "全部",
       "updateApiModal": {
         "modalTitle": "数据服务API更新",
diff --git a/web/packages/apiServices/module/apiServices/apiCard.vue b/web/packages/apiServices/module/apiServices/apiCard.vue
index d8d90176f..d035bc2de 100644
--- a/web/packages/apiServices/module/apiServices/apiCard.vue
+++ b/web/packages/apiServices/module/apiServices/apiCard.vue
@@ -24,7 +24,8 @@
         </slot>
       </div>
       <slot>
-        <div class="desc">{{ desc }}</div>
+        <div class="desc" :title="desc">描述：{{ desc ? desc : '--' }}</div>
+        <div class="version" v-if="title.versionVos">当前运行中版本：{{title.versionVos && title.versionVos[0] && title.versionVos[0].version ? title.versionVos[0].version : '--'}} <Tag  v-if="title.existNewerVersion" color="red">有新版本</Tag></div>
       </slot>
       <slot name="floor">
         <div class="floor">
@@ -159,16 +160,42 @@ export default {
     }
   }
   .desc {
-    text-indent: 2em;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    width: 100%;
+    // font-size: 0.65rem;
+    // margin: 8px 0;
+    // word-break: break-all; /* 单词内部也可断行 */
+    // word-wrap: break-word; /* 允许单词内部断行，并自动溢出，即换行 */
+    // text-indent: 2em;
+
+    // 最多两行 多的在第二行最后显示...
+    // white-space: nowrap;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    // display: -webkit-box;
+    // -webkit-line-clamp: 2;
+    // -webkit-box-orient: vertical;
+
     display: -webkit-box;
-    // margin-bottom: 10px;
-    line-height: 1.5;
-    font-size: 0.8rem;
-    height: 2.4rem;
-    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-bottom: 4px;
+    margin-top: 4px;
+    height: 36px;
+    word-wrap: break-word;   /* 在需要时断开字符 */
+    word-break: break-all;  /* 在需要时断开单词 */
+  }
+  .version {
+    font-size: 0.65rem;
+    padding: 0px 0 8px 0;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    word-break: break-all; /* 单词内部也可断行 */
+    word-wrap: break-word; /* 允许单词内部断行，并自动溢出，即换行 */
   }
   .floor {
     text-align: center;
diff --git a/web/packages/apiServices/module/apiServices/index.vue b/web/packages/apiServices/module/apiServices/index.vue
index ba7baa685..5e4d08bf9 100644
--- a/web/packages/apiServices/module/apiServices/index.vue
+++ b/web/packages/apiServices/module/apiServices/index.vue
@@ -2,7 +2,10 @@
   <div class="main service-cener">
     <div class="tap-bar">
       <h3 class="title">
-        <Icon v-if="microModule !== 'apiServices'" type="md-arrow-round-back" @click="goBack" class="back"></Icon>
+        <SvgIcon v-if="microModule !== 'apiServices'" style="font-size: 16px;display: inline-block;transform: rotate(180deg);"
+          color="#444444"
+          @click="goBack"
+          icon-class="fi-expand-right"/>
         <span>{{$t('message.apiServices.title')}}</span>
       </h3>
     </div>
@@ -24,6 +27,7 @@
       </Col>
       <Col span="5">
         <Button class="search" type="primary" @click="getApiData">{{$t("message.apiServices.label.find")}}</Button>
+        <Button class="search" type="primary" @click="gotoSubmit">{{$t("message.apiServices.label.approve")}}</Button>
       </Col>
     </Row>
     <div class="workspace-header-right">
@@ -411,6 +415,13 @@ export default {
     this.getTagList();
     this.username = this.getUserName();
   },
+  mounted() {
+    // 切到非第一页,进入 管理页,再返回数据服务首页,要保留进管理页之前的分页
+    if (sessionStorage.getItem('apiservicesCurrentPage') && sessionStorage.getItem('apiservicesCurrentPage') !== 'null' && sessionStorage.getItem('apiservicesCurrentPage') !== 'undefined') {
+      this.page.pageNow = Number(sessionStorage.getItem('apiservicesCurrentPage'));
+      sessionStorage.removeItem('apiservicesCurrentPage')
+    }
+  },
   computed: {
     pageDatalist() {// 展示的数据
       let list = this.apiData;
@@ -504,6 +515,9 @@ export default {
         }
       })
     },
+    gotoSubmit() {
+      this.$router.push({ name: 'ServicesSubmit', query: { workspaceId: this.$route.query.workspaceId} })
+    },
     changeVisual(type) {
       this.visual = type;
     },
@@ -517,6 +531,7 @@ export default {
     commonAction(row, arg) { // 更多操作的id
       const id = arg[0];
       if (id === 1) { // 跳到管理页
+        sessionStorage.setItem('apiservicesCurrentPage', this.page.pageNow)
         this.$router.push({path: '/servicesMangement',query: {apiId: arg[0], workspaceId: this.$route.query.workspaceId, id: row.id, scriptPath: row.scriptPath }})
       } else if(id === 2) { // 禁用、启用
         // 发起请求
@@ -653,6 +668,7 @@ export default {
   height: $percent-all;
   display: flex;
   flex-direction: column;
+  overflow: auto;
   .title, .search-bar, .workspace-header-right, .page-bar {
     flex: none;
   }
@@ -719,9 +735,9 @@ export default {
     display: flex;
     align-items: $align-center;
     justify-content: space-between;
-    // .tabs-content {
-      // flex: 1;
-    // }
+    .tabs-content {
+      max-width: calc(100% - 150px);
+    }
     .showAll {
       margin: 0 10px;
       color: $primary-color;
diff --git a/web/packages/apiServices/module/servicesMangement/component/APIVersions.vue b/web/packages/apiServices/module/servicesMangement/component/APIVersions.vue
index d6ae30a3e..8b51b3a0f 100644
--- a/web/packages/apiServices/module/servicesMangement/component/APIVersions.vue
+++ b/web/packages/apiServices/module/servicesMangement/component/APIVersions.vue
@@ -120,12 +120,14 @@ export default {
           key: "status",
           align: "center",
           render: (h, scope) => {
+            const colors = ['red','rgb(18, 150, 219)','#0F1222','#F29360']
+            const list = [this.$t('message.apiServices.disable'),this.$t('message.apiServices.enable'),this.$t('message.apiServices.unsubmit'),this.$t('message.apiServices.submited')]
             return h(
               "span",
               {
-                style: { color: scope.row.status === 1 ? 'rgb(18, 150, 219)': 'red'}
+                style: { color: colors[scope.row.status]}
               },
-              scope.row.status === 1 ? this.$t('message.apiServices.enable') : this.$t('message.apiServices.disable')
+              list[scope.row.status]
             );
           }
         },
@@ -139,6 +141,11 @@ export default {
           key: "creator",
           align: "center"
         },
+        {
+          title: this.$t('message.apiServices.apiTable.executeUser'),
+          key: "executeUser",
+          align: "center"
+        },
         {
           title: this.$t('message.apiServices.apiTable.publishDateStr'),
           key: "createTime",
diff --git a/web/packages/apiServices/module/servicesMangement/component/TokenAuthorization.vue b/web/packages/apiServices/module/servicesMangement/component/TokenAuthorization.vue
index d12307ab8..e1f566fb0 100644
--- a/web/packages/apiServices/module/servicesMangement/component/TokenAuthorization.vue
+++ b/web/packages/apiServices/module/servicesMangement/component/TokenAuthorization.vue
@@ -16,6 +16,9 @@
       <FormItem :label-width="80" :label="$t('message.apiServices.label.applicant')" style="width: 300px">
         <Input v-model="formItem.user" :placeholder="$t('message.apiServices.placeholder.emter')"></Input>
       </FormItem>
+      <FormItem :label-width="80" :label="$t('message.apiServices.apiTable.version')" style="width: 300px">
+        <Input v-model="formItem.version" :placeholder="$t('message.apiServices.placeholder.emter')"></Input>
+      </FormItem>
       <FormItem :label-width="80" :label="$t('message.apiServices.label.status')"  style="width: 300px">
         <Select v-model="formItem.status">
           <Option value="">{{$t('message.apiServices.all')}}</Option>
@@ -70,6 +73,7 @@ export default {
       formItem: {
         applyTime: "",
         user: "",
+        version: "",
         status: ""
       },
       page: {
@@ -122,11 +126,21 @@ export default {
           key: "user",
           align: "center"
         },
+        {
+          title: this.$t('message.apiServices.apiTable.version'),
+          key: "version",
+          align: "center"
+        },
         {
           title: this.$t('message.apiServices.apiTable.status'),
           slot: "status",
           align: "center"
         },
+        {
+          title: this.$t('message.apiServices.apiTable.applySource'),
+          key: "applySource",
+          align: "center"
+        },
         {
           title: this.$t('message.apiServices.apiTable.duration'),
           key: "duration",
@@ -175,12 +189,14 @@ export default {
         apiId: this.$route.query.id,
         user: this.formItem.user || undefined,
         status: this.formItem.status || undefined,
+        version: this.formItem.version || undefined,
         startDate: this.formItem.applyTime[0] ? this.formItem.applyTime[0].getTime() : undefined,
         endDate: this.formItem.applyTime[1] ? this.formItem.applyTime[1].getTime() : undefined,
         currentPage: this.page.pageNow,
         pageSize: this.page.pageSize,
       }, 'get').then((res) => {
         this.tokenData = res.queryList;
+        console.log('this.tokenData: ', this.tokenData);
         this.page.totalSize = res.total;
         // 每次数据查询之后需比较当前页，是否超出可选范围
         const num = Math.ceil(this.page.totalSize / this.page.pageSize);
diff --git a/web/packages/apiServices/module/servicesMangement/index.vue b/web/packages/apiServices/module/servicesMangement/index.vue
index ec640fa87..5f7f239f5 100644
--- a/web/packages/apiServices/module/servicesMangement/index.vue
+++ b/web/packages/apiServices/module/servicesMangement/index.vue
@@ -2,7 +2,10 @@
   <div class="dataServicesContent">
     <nav class="title">
       <Breadcrumb class="breadcrumb" separator="/">
-        <Icon type="md-arrow-round-back" @click="goBack" class="back"></Icon>
+        <SvgIcon style="font-size: 16px;display: inline-block;transform: rotate(180deg);"
+          color="#444444"
+          @click="goBack"
+          icon-class="fi-expand-right"/>
         <BreadcrumbItem :to="{ name: 'Apiservices', query:{ workspaceId: $route.query.workspaceId }}">
           <!-- <Icon type="ios-home-outline" size="16"></Icon> -->
           {{$t('message.apiServices.title')}}
@@ -84,7 +87,7 @@
               </Input>
               <Button type="primary" @click="refreshAction">{{ $t('message.apiServices.buttonText.refresh') }}</Button>
             </FormItem>
-            <!-- <FormItem class="submit">
+          <!-- <FormItem class="submit">
               <Button @click="handleSubmit('formValidate')" type="primary">{{$t('message.apiServices.save')}}</Button>
             </FormItem> -->
           </Form>
@@ -172,13 +175,13 @@ export default {
   },
   created() {
     // 获取api相关数据
-    api.fetch('/dss/apiservice/queryById', {
+    api.fetch('/dss/apiservice/queryByManager', {
       id: this.$route.query.id,
     }, 'get').then((rst) => {
       if (rst.result) {
         // api的基础信息
         this.apiData = rst.result;
-        this.formValidate.approvalNo = this.apiData.approvalVo.approvalNo;
+        this.formValidate.approvalNo = this.apiData.approvalVo && this.apiData.approvalVo.approvalNo ? this.apiData.approvalVo.approvalNo : '';
         // 更改网页title
         document.title = rst.result.aliasName || rst.result.name;
         // 加工api信息tab的数据
diff --git a/web/packages/apiServices/router.js b/web/packages/apiServices/router.js
index ea60b7038..0456e83bb 100644
--- a/web/packages/apiServices/router.js
+++ b/web/packages/apiServices/router.js
@@ -23,6 +23,14 @@ const routes = [
     },
     component: () => import('./view/servicesExecute/index.vue')
   },
+  {
+    path: '/ServicesSubmit',
+    name: 'ServicesSubmit',
+    meta: {
+      publicPage: true
+    },
+    component: () => import('./view/servicesSubmit/index.vue')
+  },
 ]
 
 export default routes;
diff --git a/web/packages/apiServices/view/servicesSubmit/index.vue b/web/packages/apiServices/view/servicesSubmit/index.vue
new file mode 100644
index 000000000..95964442d
--- /dev/null
+++ b/web/packages/apiServices/view/servicesSubmit/index.vue
@@ -0,0 +1,393 @@
+<template>
+  <div class="submit-wrapper">
+    <div style="font-size: 16px;">
+      <SvgIcon style="font-size: 16px;display: inline-block;transform: rotate(180deg);"
+        color="#444444"
+        @click="goBack"
+        icon-class="fi-expand-right"/> 批量提交审批</div>
+    <Row class="main">
+      <Col span="14">
+        <div class="title">数据API信息</div>
+        <Form
+          ref="submitForm"
+          :model="formData"
+          :rules="formValid"
+          :label-width="100"
+        >
+          <FormItem
+            prop="id"
+            label="选择API"
+            class="api-select"
+          >
+            <Select v-model="formData.id"
+              filterable
+              clearable
+              multiple>
+              <Option v-for="item in apiList" :key="item.id" :value="item.id+'_-_'+item.name">{{item.name}}</Option>
+            </Select>
+            <div class="tag-list">
+              <Tag v-for="item of selectedApi"
+                closable
+                @click.native="toggleInfo(item)"
+                @on-close="delectSelect(item)"
+                :class="{'active': currentApi.id == item.id}"
+                :key="item.id">
+                {{ item.name }}
+              </Tag>
+            </div>
+          </FormItem>
+          <div class="title">审批信息</div>
+          <FormItem
+            prop="approvalName"
+            label="审批单名称">
+            <Input v-model="formData.approvalName" />
+          </FormItem>
+          <FormItem
+            prop="applyUser"
+            label="授权用户">
+            <Select v-model="formData.applyUser" multiple filterable>
+              <Option v-for="item in applyUserList" :key="item.name" :value="item.name">{{item.name}}</Option>
+            </Select>
+          </FormItem>
+          <FormItem
+            prop="duration"
+            label="授权期限"
+          >
+            <Input v-model="formData.duration" placeholder="取值范围1-7300,永久请输入星号：*">
+              <template #append><span>天</span></template>
+            </Input>
+          </FormItem>
+          <FormItem
+            prop="importance"
+            label="重要程度">
+            <Select v-model="formData.importance">
+              <Option value="1">高</Option>
+              <Option value="2">中</Option>
+              <Option value="3">低</Option>
+            </Select>
+          </FormItem>
+          <FormItem
+            prop="backgroundDesc"
+            label="背景描述">
+            <Input v-model="formData.backgroundDesc" type="textarea" />
+          </FormItem>
+          <FormItem
+            prop="attentionUser"
+            label="关注人">
+            <Select v-model="formData.attentionUser" multiple filterable>
+              <Option v-for="item in applyUserList" :key="item.name" :value="item.name">{{item.name}}</Option>
+            </Select>
+          </FormItem>
+        </Form>
+        <Button style="margin-left:100px" type="primary" @click="confirm" :loading="isConfirmLoading">提交审批</Button>
+        <Button style="margin-left:20px" type="default" @click="cancel">取消</Button>
+      </Col>
+      <Col span="15" class="info-detail" v-show="showInfo">
+        <div class="title">API信息
+          <SvgIcon style="float:right;padding:2px" @click="toggleInfo()" icon-class="close2"/>
+        </div>
+        <div class="info-item"><span class="label">API英文名</span> {{currentApi.name}}</div>
+        <div class="info-item"><span class="label">API中文名</span> {{currentApi.aliasName}}</div>
+        <div class="info-item"><span class="label">API路径</span> {{currentApi.path}}</div>
+        <div class="info-item"><span class="label">协议</span> {{currentApi.protocol === 1 ? 'HTTP' : 'HTTPS'}}</div>
+        <div class="info-item"><span class="label">请求方式</span> {{currentApi.method}}</div>
+        <div class="info-item"><span class="label">可见范围</span> {{currentApi.scope === 'grantView' ? '授权可见' : ''}}</div>
+        <div class="info-item"><span class="label">标签</span> {{currentApi.tag}}</div>
+        <div class="info-item"><span class="label">描述</span> {{currentApi.description}}</div>
+        <div class="info-item"><span class="label">备注</span> {{currentApi.comment}}</div>
+        <div class="title" style="margin-top:10px">参数信息</div>
+        <Table :columns="paramInfoColumns" :data="currentApi.params">
+        </Table>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import api from '@dataspherestudio/shared/common/service/api';
+import { GetWorkspaceUserManagement } from '@dataspherestudio/shared/common/service/apiCommonMethod.js';
+import storage from '@dataspherestudio/shared/common/helper/storage';
+
+export default {
+  data() {
+    return {
+      formData: {
+        approvalName: '',
+        id: [],
+        backgroundDesc: '',
+        applyUser: [],
+        duration: '',
+        importance: '',
+        attentionUser: []
+      },
+      applyUserList: [],
+      showInfo: false,
+      currentApi: {
+        params: []
+      },
+      // 提交按钮的loading
+      isConfirmLoading: false,
+      paramInfoColumns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: this.$t('message.scripts.apiPublish.paramTable.paramName'),
+          key: 'name'
+        },
+        {
+          title: this.$t('message.scripts.apiPublish.paramTable.displayName'),
+          key: 'displayName',
+        },
+        {
+          title: this.$t('message.scripts.apiPublish.paramTable.paramType'),
+          key: 'type',
+          render: (h, params) => {
+            return h('div', this.getType(params.row.type));
+          }
+        },
+        {
+          title: this.$t('message.scripts.apiPublish.paramTable.require.title'),
+          key: 'required',
+          render: (h, params) => {
+            return h('div', params.row.required == '1' ? '是' : '否');
+          }
+        },
+        {
+          title: this.$t('message.scripts.apiPublish.paramTable.describe'),
+          key: 'description',
+        }
+      ],
+      apiList: [],
+      formValid: {
+        id: [
+          {
+            type: 'array',
+            required: true,
+            message: "请选择数据服务API",
+            trigger: "change",
+          }
+        ],
+        approvalName: [
+          {
+            required: true,
+            message: "请填写审批单名称",
+            trigger: "blur",
+          },
+          { message: "审批单名称最长200字符", max: 200 }
+        ],
+        applyUser: [
+          {
+            type: 'array',
+            required: true,
+            message: "请选择授权用户",
+            trigger: "change",
+          }
+        ],
+        duration: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              value = value.trim()
+              if (value === '*') {
+                callback()
+              }
+              if (!value) {
+                return callback(new Error('请填写授权期限'))
+              }
+              if (value <=0 || value > 7300 || value % 1 !== 0) {
+                callback(new Error('授权期限取值范围1-7300整数天，或*'))
+              }
+              return callback()
+            }
+          }
+        ],
+        importance: [
+          {
+            required: true,
+            message: "请选择重要程度",
+            trigger: "change",
+          }
+        ],
+        backgroundDesc: [
+          {
+            required: true,
+            message: "请填写背景描述",
+            trigger: "blur",
+          },
+          { message: "背景描述最长500字符", max: 500 }
+        ]
+
+      }
+    }
+  },
+  computed: {
+    selectedApi() {
+      return this.formData.id.map(it => {
+        return {
+          id: it.split('_-_')[0],
+          name: it.split('_-_')[1],
+        }
+      })
+    }
+  },
+  methods: {
+    toggleInfo(info) {
+      if (info) {
+        this.currentApi = {
+          ...this.apiList.find(it => it.id == info.id)
+        }
+        this.showInfo = true
+      } else {
+        this.currentApi = {
+          params: []
+        }
+        this.showInfo = false
+      }
+    },
+    getApiData() {
+      api.fetch('/dss/apiservice/availableSubmitApi', {
+        workspaceId: this.$route.query.workspaceId
+      }, 'get').then((res) => {
+        this.apiList = res.availableSubmitApiList;
+      }).finally(()=> {
+      })
+    },
+    confirm() {
+      this.$refs.submitForm.validate(valid=>{
+        if(valid) {
+          const submitApiInfos = this.formData.id.map(it => {
+            const api = this.apiList.find(item => item.id == it.split('_-_')[0])
+            return api && {
+              apiId: api.id,
+              apiVersionId: api.latestVersionId
+            }
+          })
+          const params = {
+            approvalName: this.formData.approvalName,
+            backgroundDesc: this.formData.backgroundDesc,
+            applyUser: this.formData.applyUser.join(','),
+            duration: this.formData.duration.trim() === '*' ? '*' : this.formData.duration.trim() - 0 + '',
+            importance: this.formData.importance,
+            attentionUser: this.formData.attentionUser.join(','),
+            creator: this.getUserName(),
+            submitApiInfos,
+            workspaceId: this.$route.query.workspaceId
+          }
+          this.isConfirmLoading = true
+          api.fetch('/dss/apiservice/submit', params, 'post').then(() => {
+            this.$Message.success('提交成功')
+            this.isConfirmLoading = false
+            this.$router.push({ name: 'Apiservices', query: { workspaceId: this.$route.query.workspaceId} })
+          }).catch(() => {
+            this.isConfirmLoading = false
+          })
+        }
+      })
+    },
+    cancel() {
+      this.$refs.submitForm.resetFields();
+      this.goBack();
+    },
+    delectSelect(item) {
+      this.showInfo = false;
+      this.formData.id = this.formData.id.filter(it => {
+        return it.split('_-_')[0] !== item.id
+      })
+    },
+    getType(type) {
+      switch (type) {
+        case '1':
+          return 'String';
+        case '2':
+          return 'Number';
+        case '3':
+          return 'Date';
+        case '4':
+          return 'Array';
+        default:
+          return '';
+      }
+    },
+    getApplyUserList() {
+      if (this.$route.query.workspaceId) {
+        GetWorkspaceUserManagement( {
+          workspaceId: this.$route.query.workspaceId
+        }).then((res) => {
+          this.applyUserList = res.workspaceUsers;
+        })
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    getUserName() {
+      return storage.get("baseInfo", "local")
+        ? storage.get("baseInfo", "local").username
+        : '';
+    }
+  },
+  mounted() {
+    this.getApiData()
+    this.getApplyUserList()
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '@dataspherestudio/shared/common/style/variables.scss';
+
+.submit-wrapper {
+  height: 100%;
+  padding: 20px;
+  background: #eee;
+}
+.main {
+  background: #fff;
+  padding: 20px;
+  margin-top: 10px;
+  height: calc(100% - 30px);
+  overflow: auto;
+}
+.title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.info-item {
+  padding: 4px 0;
+}
+.label {
+  display: inline-block;
+  width: 120px;
+}
+.info-detail {
+  padding: 20px;
+  position: fixed;
+  right: 10px;
+  bottom: 0;
+  border: 1px solid #eee;
+  box-shadow: 0 0 5px 3px #eee;
+  background: #fff;
+  top: 59px;
+  z-index: 999;
+  overflow: auto;
+}
+.submit-wrapper {
+  .api-select {
+    ::v-deep .ivu-select-multiple .ivu-tag-checked {
+      display: none;
+    }
+  }
+
+  .active {
+    ::v-deep .ivu-tag-text, ::v-deep .ivu-icon {
+      color: $primary-color;
+    }
+  }
+}
+.tag-list {
+  margin-top: 5px;
+}
+
+</style>
diff --git a/web/packages/exts/open-source/scriptis/apiPublish/index.vue b/web/packages/exts/open-source/scriptis/apiPublish/index.vue
index f4f5e98d5..4abf2d143 100644
--- a/web/packages/exts/open-source/scriptis/apiPublish/index.vue
+++ b/web/packages/exts/open-source/scriptis/apiPublish/index.vue
@@ -43,7 +43,7 @@
         :model="addApiData"
         :rules="ruleValidate"
         :label-width="90" >
-        <div v-if="step === 1">
+        <div v-show="step === 1">
           <FormItem
             prop="apiName"
             :label="$t('message.scripts.apiPublish.addApiModal.apiName')">
@@ -89,6 +89,11 @@
               <Option v-for="item in visibleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
             </Select>
           </FormItem>
+          <FormItem
+            prop="proxyUser"
+            :label="$t('message.scripts.apiPublish.addApiModal.proxyUser')">
+            <Input v-model="addApiData.proxyUser"/>
+          </FormItem>
           <FormItem
             prop="describe"
             :rules="[{ message: $t('message.scripts.apiPublish.rule.contentLengthLimitTwo'), max: 200 }]"
@@ -102,42 +107,23 @@
             <Input v-model="addApiData.comment" show-word-limit type="textarea"/>
           </FormItem>
         </div>
-        <div v-if="step === 2">
+        <div v-show="step === 2">
           <Table :columns="paramInfoColumns" :data="addApiData.paramList">
             <template slot-scope="{row, index}" slot="defaultValue">
               <Input :class="{ verificationValue: tip[row.paramName] }" :title="addApiData.paramList[index].defaultValue" @on-blur="verificationValue(row)" :type="inputType(row.paramType)" v-model="addApiData.paramList[index].defaultValue"/>
             </template>
           </Table>
         </div>
-        <div v-if="step === 3">
-          <FormItem
-            prop="approvalName"
-            :label="$t('message.scripts.apiPublish.addApiModal.approvalName')">
-            <Input v-model="addApiData.approvalName"/>
-          </FormItem>
-          <FormItem
-            prop="applyUser"
-            :label="$t('message.scripts.apiPublish.addApiModal.applyUser')">
-            <Select v-model="addApiData.applyUser" multiple filterable placeholder="Select your user">
-              <Option v-for="item in applyUserList" :key="item.name" :value="item.name">{{item.name}}</Option>
-            </Select>
-          </FormItem>
-          <FormItem
-            prop="proxyUser"
-            :label="$t('message.scripts.apiPublish.addApiModal.proxyUser')">
-            <Input v-model="addApiData.proxyUser"/>
-          </FormItem>
-        </div>
       </Form>
       <div slot="footer">
         <!-- 取消按钮 -->
         <Button :disabled="saveLoading" @click="cancel">{{$t('message.scripts.apiPublish.addApiModal.cancel')}}</Button>
         <!-- 上一步按钮 -->
-        <Button v-if="step === 2 || step === 3" :disabled="saveLoading" @click="backStep">{{$t('message.scripts.apiPublish.addApiModal.back')}}</Button>
+        <Button v-if="step === 2" :disabled="saveLoading" @click="backStep">{{$t('message.scripts.apiPublish.addApiModal.back')}}</Button>
         <!-- 下一步按钮 -->
-        <Button v-if="step === 1 || step === 2" @click="nextStep(step)">{{$t('message.scripts.apiPublish.addApiModal.nextStep')}}</Button>
+        <Button v-if="step === 1" @click="nextStep(step)">{{$t('message.scripts.apiPublish.addApiModal.nextStep')}}</Button>
         <!-- 保存提交按钮 -->
-        <Button v-if="step === 3" type="primary" :loading="saveLoading" @click="saveApiOk">
+        <Button v-if="step === 2" type="primary" :loading="saveLoading" @click="saveApiOk">
           <span v-if="saveLoading">{{$t('message.scripts.publishing')}}</span>
           <span v-else>{{$t('message.scripts.apiPublish.addApiModal.confirm')}}</span>
         </Button>
@@ -157,75 +143,46 @@
         :model="updateApiData"
         :label-width="120"
       >
-        <template v-if="step === 1">
-          <FormItem
-            prop="id"
-            label="请选择服务API:"
-            :rules="[
-              {
-                required: true,
-                message: 'Please select the API'
-              }
-            ]">
-            <Select v-model="updateApiData.id" placeholder="Select your api">
-              <Option v-for="item in apiList" :key="item.id" :value="item.id">{{item.name}}</Option>
-            </Select>
-          </FormItem>
-          {{$t('message.scripts.apiPublish.updateApiModal.paramConfirm')}}
-          <Table :columns="paramInfoColumns" :data="updateApiData.paramList">
-            <template slot-scope="{row, index}" slot="defaultValue">
-              <Input :class="{ verificationValue: tip[row.paramName] }" @on-blur="verificationValue(row)" :title="updateApiData.paramList[index].defaultValue" :type="inputType(row.paramType)" v-model="updateApiData.paramList[index].defaultValue"/>
-            </template>
-          </Table>
-        </template>
-        <template v-if="step === 2">
-          <FormItem
-            prop="approvalName"
-            :label="$t('message.scripts.apiPublish.addApiModal.approvalName')"
-            :rules="[{ required: true, message: 'The name cannot be empty', trigger: 'blur' }]"
-          >
-            <Input v-model="updateApiData.approvalName"/>
-          </FormItem>
-          <FormItem
-            prop="applyUser"
-            :label="$t('message.scripts.apiPublish.addApiModal.applyUser')"
-            :rules="[
-              { required: true, message: 'Please select the user', type: 'array' }
-            ]"
-          >
-            <Select v-model="updateApiData.applyUser" multiple filterable placeholder="Select your user">
-              <Option v-for="item in applyUserList" :key="item.name" :value="item.name">{{item.name}}</Option>
-            </Select>
-          </FormItem>
-          <FormItem
-            prop="proxyUser"
-            :label="$t('message.scripts.apiPublish.addApiModal.proxyUser')"
-            :rules="[
-              { required: false }
-            ]">
-            <Input v-model="updateApiData.proxyUser"/>
-          </FormItem>
-          <FormItem
-            prop="describe"
-            :rules="[{ message: $t('message.scripts.apiPublish.rule.contentLengthLimitTwo'), max: 200 }]"
-            :label="$t('message.scripts.apiPublish.addApiModal.describe')">
-            <Input v-model="updateApiData.describe" show-word-limit type="textarea"/>
-          </FormItem>
-          <FormItem
-            prop="comment"
-            :rules="[{ message: $t('message.scripts.apiPublish.rule.contentLengthLimitMax'), max:1024 }]"
-            :label="$t('message.scripts.apiPublish.addApiModal.comment')">
-            <Input v-model="updateApiData.comment" show-word-limit type="textarea"/>
-          </FormItem>
-        </template>
+        <FormItem
+          prop="id"
+          label="请选择服务API:"
+          :rules="[
+            {
+              required: true,
+              message: 'Please select the API'
+            }
+          ]">
+          <Select v-model="updateApiData.id" placeholder="Select your api">
+            <Option v-for="item in apiList" :key="item.id" :value="item.id">{{item.name}}</Option>
+          </Select>
+        </FormItem>
+        <FormItem
+          prop="proxyUser"
+          :label="$t('message.scripts.apiPublish.addApiModal.proxyUser')">
+          <Input v-model="updateApiData.proxyUser"/>
+        </FormItem>
+        <FormItem
+          prop="describe"
+          :rules="[{ message: $t('message.scripts.apiPublish.rule.contentLengthLimitTwo'), max: 200 }]"
+          :label="$t('message.scripts.apiPublish.addApiModal.describe')">
+          <Input v-model="updateApiData.describe" show-word-limit type="textarea"/>
+        </FormItem>
+        <FormItem
+          prop="comment"
+          :rules="[{ message: $t('message.scripts.apiPublish.rule.contentLengthLimitMax'), max:1024 }]"
+          :label="$t('message.scripts.apiPublish.addApiModal.comment')">
+          <Input v-model="updateApiData.comment" show-word-limit type="textarea"/>
+        </FormItem>
+        {{$t('message.scripts.apiPublish.updateApiModal.paramConfirm')}}
+        <Table :columns="paramInfoColumns" :data="updateApiData.paramList">
+          <template slot-scope="{row, index}" slot="defaultValue">
+            <Input :class="{ verificationValue: tip[row.paramName] }" @on-blur="verificationValue(row)" :title="updateApiData.paramList[index].defaultValue" :type="inputType(row.paramType)" v-model="updateApiData.paramList[index].defaultValue"/>
+          </template>
+        </Table>
       </Form>
       <div slot="footer">
         <Button :disabled="saveLoading" @click="updateApiCancel">{{$t('message.scripts.apiPublish.addApiModal.cancel')}}</Button>
-        <!-- 上一步按钮 -->
-        <Button v-if="step === 2" :disabled="saveLoading" @click="backStep">{{$t('message.scripts.apiPublish.addApiModal.back')}}</Button>
-        <Button v-if="step === 1" @click="updateNextStep(step)">{{$t('message.scripts.apiPublish.addApiModal.nextStep')}}</Button>
         <Button
-          v-if="step === 2"
           type="primary"
           :loading="saveLoading"
           @click="updateApiOk">
@@ -278,9 +235,6 @@ export default {
       saveLoading: false,
       addApiModalWidth: 450,
       ruleValidate: {
-        approvalName: [
-          { required: true, message: this.$t('message.scripts.apiPublish.rule.approvalName'), trigger: 'blur' }
-        ],
         apiName: [
           {
             required: true,
@@ -322,13 +276,7 @@ export default {
             validator: this.checkApiPath,
             trigger: 'blur'
           }
-        ],
-        applyUser: [
-          { required: true, message: 'Please select the user' }
-        ],
-        gender: [
-          { required: true, message: 'Please select gender', trigger: 'change' }
-        ],
+        ]
       },
       paramTypeList: [
         {
@@ -580,7 +528,6 @@ export default {
         visible: 'grantView',
         describe: '',
         approvalName: 'default',
-        applyUser: [],
         proxyUser: '',
         paramList: [
 
@@ -600,7 +547,6 @@ export default {
         describe: '',
         latestVersionId: '',
         approvalName: 'default',
-        applyUser: [],
         proxyUser: '',
         paramList: [],
         comment: ''
@@ -644,11 +590,11 @@ export default {
     apiDataFill(id) {
       const currentApi = this.apiList.find((item) => item.id == id);
       if (currentApi) {
-        this.updateApiData.approvalName = currentApi.approvalVo.approvalName;
         // 如果之前绑定的用户被删除，需要清掉
-        this.updateApiData.applyUser = currentApi.approvalVo.applyUser.split(',').filter((item) => this.applyUserList.some((i) => i.name === item));
-        this.updateApiData.proxyUser = currentApi.approvalVo.executeUser;
+        console.log('currentApi: ', currentApi);
+        this.updateApiData.proxyUser = currentApi.executeUser || '';
         this.updateApiData.comment = currentApi.comment || '';
+        this.updateApiData.describe = currentApi.description || '';
       }
     },
     // 验证发布和更新的默认值是否满足条件
@@ -760,8 +706,6 @@ export default {
               describe: rst.result.description,
               resourceId: rst.result.resourceId,
               latestVersionId: rst.result.latestVersionId,
-              approvalName: 'default',
-              applyUser: [],
               proxyUser: '',
               comment: ''
             }
@@ -895,7 +839,6 @@ export default {
               details: item.details
             })
           })
-
           this.saveLoading = true;
           api.fetch('/dss/apiservice/api', {
             comment: this.addApiData.comment,
@@ -906,6 +849,7 @@ export default {
             method: this.addApiData.requestType,
             scope: this.addApiData.visible,
             description: this.addApiData.describe,
+            executeUser: this.addApiData.proxyUser,
             type: this.script.application,
             runType: this.script.runType, //
             tag: this.addApiData.tagArr.join(','),
@@ -913,13 +857,7 @@ export default {
             content: this.script.data,
             scriptPath: this.work.filepath,
             workspaceId: this.$route.query.workspaceId,
-            metadata: this.convertMetadata(this.script.params),
-            approvalVo: {
-              approvalName: this.addApiData.approvalName,
-              applyUser: this.addApiData.applyUser.join(','),
-              executeUser: this.addApiData.proxyUser,
-              creator: this.getUserName()
-            }
+            metadata: this.convertMetadata(this.script.params)
           }, 'post').then(() => {
             this.addApiModalShow = false;
             this.saveLoading = false;
@@ -945,6 +883,7 @@ export default {
       this.$emit('on-save');
 
       this.$refs['updateApi'].validate((valid) => {
+        console.log('this.updateApiData: ', this.updateApiData);
         if (valid) {
           var params = []
           this.updateApiData.paramList.forEach(function (item) {
@@ -969,6 +908,7 @@ export default {
             method: this.updateApiData.requestType,
             scope: this.updateApiData.visible,
             description: this.updateApiData.describe,
+            executeUser: this.updateApiData.proxyUser,
             type: this.script.application,
             runType: this.script.runType,
             tag: this.updateApiData.tagArr.join(','),
@@ -977,13 +917,7 @@ export default {
             scriptPath: this.work.filepath,
             metadata: this.convertMetadata(this.script.params),
             workspaceId: this.$route.query.workspaceId,
-            comment: this.updateApiData.comment,
-            approvalVo: {
-              approvalName: this.updateApiData.approvalName,
-              applyUser: this.updateApiData.applyUser.join(','),
-              executeUser: this.updateApiData.proxyUser,
-              creator: this.getUserName()
-            }
+            comment: this.updateApiData.comment
           }, 'put').then(() => {
             this.updateApiModalShow = false
             this.saveLoading = false;
diff --git a/web/packages/shared/components/consoleComponent/result.vue b/web/packages/shared/components/consoleComponent/result.vue
index fabe0eded..d8efc448c 100644
--- a/web/packages/shared/components/consoleComponent/result.vue
+++ b/web/packages/shared/components/consoleComponent/result.vue
@@ -230,7 +230,7 @@ export default {
       return path
     },
     taskID() {
-      return this.work.taskID || (this.work.data && this.work.data.history && this.work.data.history[0] && this.work.data.history[0].taskID)
+      return this.work ? this.work.taskID || (this.work.data && this.work.data.history && this.work.data.history[0] && this.work.data.history[0].taskID) : ''
     }
   },
   watch: {