diff --git a/frontend/src/business/components/settings/organization/BugManagement.vue b/frontend/src/business/components/settings/organization/BugManagement.vue
index 8a2ee1511d..670a4ff8cf 100644
--- a/frontend/src/business/components/settings/organization/BugManagement.vue
+++ b/frontend/src/business/components/settings/organization/BugManagement.vue
@@ -15,227 +15,45 @@
       </el-radio-group>
     </div>
 
-    <div style="width: 500px">
-      <div style="margin-top: 20px;margin-bottom: 10px">{{ $t('organization.integration.basic_auth_info') }}</div>
-      <el-form :model="form" ref="form" label-width="120px" size="small" :disabled="show" :rules="rules">
-        <el-form-item :label="$t('organization.integration.api_account')" prop="account">
-          <el-input v-model="form.account" :placeholder="$t('organization.integration.input_api_account')"/>
-        </el-form-item>
-        <el-form-item :label="$t('organization.integration.api_password')" prop="password">
-          <el-input v-model="form.password" auto-complete="new-password"
-                    :placeholder="$t('organization.integration.input_api_password')" show-password/>
-        </el-form-item>
-        <el-form-item :label="$t('organization.integration.jira_url')" prop="url" v-if="platform === 'Jira'">
-          <el-input v-model="form.url" :placeholder="$t('organization.integration.input_jira_url')"/>
-        </el-form-item>
-        <el-form-item :label="$t('organization.integration.jira_issuetype')" prop="issuetype"
-                      v-if="platform === 'Jira'">
-          <el-input v-model="form.issuetype" :placeholder="$t('organization.integration.input_jira_issuetype')"/>
-        </el-form-item>
-      </el-form>
-    </div>
+    <tapd-setting v-if="tapdEnable" ref="tapdSetting"/>
+    <jira-setting v-if="jiraEnable" ref="jiraSetting"/>
+    <zentao-setting v-if="zentaoEnable" ref="zentaoSetting"/>
 
-    <div style="margin-left: 120px">
-      <el-button type="primary" size="mini" :disabled="!show" @click="testConnection">{{ $t('ldap.test_connect') }}
-      </el-button>
-      <el-button v-if="showEdit" size="mini" @click="edit">{{ $t('commons.edit') }}</el-button>
-      <el-button type="primary" v-if="showSave" size="mini" @click="save('form')">{{ $t('commons.save') }}</el-button>
-      <el-button v-if="showCancel" size="mini" @click="cancelEdit">{{ $t('organization.integration.cancel_edit') }}
-      </el-button>
-      <el-button type="info" size="mini" @click="cancelIntegration('form')" :disabled="!show">
-        {{ $t('organization.integration.cancel_integration') }}
-      </el-button>
-    </div>
-
-    <div class="defect-tip">
-      <div>{{ $t('organization.integration.use_tip') }}</div>
-      <div>
-        1. {{ $t('organization.integration.use_tip_tapd') }}
-      </div>
-      <div>
-        2. {{ $t('organization.integration.use_tip_jira') }}
-      </div>
-      <div>
-        3. {{ $t('organization.integration.use_tip_two') }}
-        <router-link to="/track/project/all" style="margin-left: 5px">
-          {{ $t('organization.integration.link_the_project_now') }}
-        </router-link>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-import {getCurrentUser} from "../../../../common/js/utils";
+import TapdSetting from "@/business/components/settings/organization/components/TapdSetting";
+import JiraSetting from "@/business/components/settings/organization/components/JiraSetting";
+import ZentaoSetting from "@/business/components/settings/organization/components/ZentaoSetting";
+import {JIRA, TAPD, ZEN_TAO} from "@/common/js/constants";
 
 export default {
-  name: "IssuesManagement",
+  name: "BugManagement",
+  components: {TapdSetting, JiraSetting, ZentaoSetting},
   data() {
     return {
-      form: {},
+      tapdEnable: true,
+      jiraEnable: false,
+      zentaoEnable: false,
       result: {},
-      platform: '',
-      orgId: '',
-      show: true,
-      showEdit: true,
-      showSave: false,
-      showCancel: false,
-      rules: {
-        account: {
-          required: true,
-          message: this.$t('organization.integration.input_api_account'),
-          trigger: ['change', 'blur']
-        },
-        password: {
-          required: true,
-          message: this.$t('organization.integration.input_api_password'),
-          trigger: ['change', 'blur']
-        },
-        url: {
-          required: true,
-          message: this.$t('organization.integration.input_jira_url'),
-          trigger: ['change', 'blur']
-        },
-        issuetype: {
-          required: true,
-          message: this.$t('organization.integration.input_jira_issuetype'),
-          trigger: ['change', 'blur']
-        }
-      },
+      platform: TAPD
     }
   },
-  created() {
-    this.init(this.platform);
-  },
   methods: {
-    init(platform) {
-      let param = {};
-      param.platform = platform;
-      param.orgId = getCurrentUser().lastOrganizationId;
-      this.result = this.$post("service/integration/type", param, response => {
-        let data = response.data;
-        this.platform = data.platform;
-        if (data.configuration) {
-          let config = JSON.parse(data.configuration);
-          this.$set(this.form, 'account', config.account);
-          this.$set(this.form, 'password', config.password);
-          this.$set(this.form, 'url', config.url);
-          this.$set(this.form, 'issuetype', config.issuetype);
-        } else {
-          this.clear();
-        }
-      })
-    },
-    edit() {
-      this.show = false;
-      this.showEdit = false;
-      this.showSave = true;
-      this.showCancel = true;
-    },
-    cancelEdit() {
-      this.showEdit = true;
-      this.showCancel = false;
-      this.showSave = false;
-      this.show = true;
-      this.init(this.platform);
-    },
-    cancelIntegration() {
-      if (this.form.account && this.form.password && this.platform) {
-
-        this.$alert(this.$t('organization.integration.cancel_confirm') + this.platform + "？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              let param = {};
-              param.orgId = getCurrentUser().lastOrganizationId;
-              param.platform = this.platform;
-              this.result = this.$post("service/integration/delete", param, () => {
-                this.$success(this.$t('organization.integration.successful_operation'));
-                this.init('');
-              });
-            }
-          }
-        });
-      } else {
-        this.$warning(this.$t('organization.integration.not_integrated'));
-      }
-    },
-    save(form) {
-      if (!this.platform) {
-        this.$warning(this.$t('organization.integration.choose_platform'));
-        return;
-      }
-
-      this.$refs[form].validate(valid => {
-        if (valid) {
-
-          let formatUrl = this.form.url.trim();
-          if (!formatUrl.endsWith('/')) {
-            formatUrl = formatUrl + '/';
-          }
-
-          let param = {};
-          let auth = {
-            account: this.form.account,
-            password: this.form.password,
-            url: formatUrl,
-            issuetype: this.form.issuetype
-          };
-          param.organizationId = getCurrentUser().lastOrganizationId;
-          param.platform = this.platform;
-          param.configuration = JSON.stringify(auth);
-
-          this.result = this.$post("service/integration/save", param, () => {
-            this.show = true;
-            this.showEdit = true;
-            this.showSave = false;
-            this.showCancel = false;
-            this.init(this.platform);
-            this.$success(this.$t('commons.save_success'));
-          });
-        } else {
-          return false;
-        }
-      })
-    },
     change(platform) {
-      this.show = true;
-      this.showEdit = true;
-      this.showCancel = false;
-      this.showSave = false;
-      let param = {};
-      param.orgId = getCurrentUser().lastOrganizationId;
-      param.platform = platform;
-      this.result = this.$post("service/integration/type", param, response => {
-        let data = response.data;
-        if (data.configuration) {
-          let config = JSON.parse(data.configuration);
-          this.$set(this.form, 'account', config.account);
-          this.$set(this.form, 'password', config.password);
-          this.$set(this.form, 'url', config.url);
-          this.$set(this.form, 'issuetype', config.issuetype);
-        } else {
-          this.clear();
-        }
-      })
-    },
-    clear() {
-      this.$set(this.form, 'account', '');
-      this.$set(this.form, 'password', '');
-      this.$set(this.form, 'url', '');
-      this.$set(this.form, 'issuetype', '');
-      this.$nextTick(() => {
-        this.$refs.form.clearValidate();
-      });
-    },
-    testConnection() {
-      if (this.form.account && this.form.password && this.platform) {
-        this.result = this.$get("issues/auth/" + this.platform, () => {
-          this.$success(this.$t('organization.integration.verified'));
-        });
-      } else {
-        this.$warning(this.$t('organization.integration.not_integrated'));
-        return false;
+      if (platform === TAPD) {
+        this.tapdEnable = true;
+        this.jiraEnable = false;
+        this.zentaoEnable = false;
+      } else if (platform === JIRA) {
+        this.tapdEnable = false;
+        this.jiraEnable = true;
+        this.zentaoEnable = false;
+      } else if (platform === ZEN_TAO) {
+        this.tapdEnable = false;
+        this.jiraEnable = false;
+        this.zentaoEnable = true;
       }
     }
   }
@@ -247,14 +65,6 @@ export default {
   padding: 10px 30px;
 }
 
-.defect-tip {
-  background: #EDEDED;
-  border: solid #E1E1E1 1px;
-  margin: 10px 0;
-  padding: 10px;
-  border-radius: 3px;
-}
-
 .platform {
   height: 90px;
   vertical-align: middle
diff --git a/frontend/src/business/components/settings/organization/components/BugManageBtn.vue b/frontend/src/business/components/settings/organization/components/BugManageBtn.vue
new file mode 100644
index 0000000000..2b3e6d2156
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/components/BugManageBtn.vue
@@ -0,0 +1,71 @@
+<template>
+  <div style="margin-left: 120px">
+    <el-button type="primary" size="mini" :disabled="!show" @click="testConnection">
+      {{ $t('ldap.test_connect') }}
+    </el-button>
+    <el-button v-if="showEdit" size="mini" @click="edit">
+      {{ $t('commons.edit') }}
+    </el-button>
+    <el-button type="primary" v-if="showSave" size="mini" @click="save">
+      {{ $t('commons.save') }}
+    </el-button>
+    <el-button v-if="showCancel" size="mini" @click="cancelEdit">
+      {{ $t('organization.integration.cancel_edit') }}
+    </el-button>
+    <el-button type="info" size="mini" :disabled="!show" @click="cancelIntegration">
+      {{ $t('organization.integration.cancel_integration') }}
+    </el-button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "BugManageBtn",
+  data() {
+    return {
+      showEdit: true,
+      showSave: false,
+      showCancel: false,
+    }
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    form: Object,
+  },
+  methods: {
+    testConnection() {
+      this.$emit("testConnection");
+    },
+    edit() {
+      this.$emit("update:show", false);
+      this.showEdit = false;
+      this.showSave = true;
+      this.showCancel = true;
+    },
+    cancelEdit() {
+      this.showEdit = true;
+      this.showCancel = false;
+      this.showSave = false;
+      this.$emit("update:show", true);
+      this.init();
+    },
+    init() {
+      this.$emit("init");
+    },
+    save() {
+      this.$emit("save");
+    },
+    cancelIntegration() {
+      this.$emit("cancelIntegration");
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/settings/organization/components/JiraSetting.vue b/frontend/src/business/components/settings/organization/components/JiraSetting.vue
new file mode 100644
index 0000000000..08c721631e
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/components/JiraSetting.vue
@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <div style="width: 500px">
+      <div style="margin-top: 20px;margin-bottom: 10px">{{ $t('organization.integration.basic_auth_info') }}</div>
+      <el-form :model="form" ref="form" label-width="120px" size="small" :disabled="show" :rules="rules">
+        <el-form-item :label="$t('organization.integration.api_account')" prop="account">
+          <el-input v-model="form.account" :placeholder="$t('organization.integration.input_api_account')"/>
+        </el-form-item>
+        <el-form-item :label="$t('organization.integration.api_password')" prop="password">
+          <el-input v-model="form.password" auto-complete="new-password"
+                    :placeholder="$t('organization.integration.input_api_password')" show-password/>
+        </el-form-item>
+        <el-form-item :label="$t('organization.integration.jira_url')" prop="url">
+          <el-input v-model="form.url" :placeholder="$t('organization.integration.input_jira_url')"/>
+        </el-form-item>
+        <el-form-item :label="$t('organization.integration.jira_issuetype')" prop="issuetype">
+          <el-input v-model="form.issuetype" :placeholder="$t('organization.integration.input_jira_issuetype')"/>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <bug-manage-btn @save="save"
+                    @init="init"
+                    @testConnection="testConnection"
+                    @cancelIntegration="cancelIntegration"
+                    :form="form"
+                    :show.sync="show"
+                    ref="bugBtn"/>
+
+    <div class="defect-tip">
+      <div>{{ $t('organization.integration.use_tip') }}</div>
+      <div>
+        1. {{ $t('organization.integration.use_tip_jira') }}
+      </div>
+      <div>
+        2. {{ $t('organization.integration.use_tip_two') }}
+        <router-link to="/track/project/all" style="margin-left: 5px">
+          {{ $t('organization.integration.link_the_project_now') }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BugManageBtn from "@/business/components/settings/organization/components/BugManageBtn";
+import {getCurrentUser} from "@/common/js/utils";
+import {JIRA} from "@/common/js/constants";
+
+export default {
+  name: "JiraSetting",
+  components: {BugManageBtn},
+  created() {
+    this.init();
+  },
+  beforeDestroy() {
+    console.log("jira setting destroy");
+  },
+  data() {
+    return {
+      show: true,
+      form: {},
+      rules: {
+        account: {
+          required: true,
+          message: this.$t('organization.integration.input_api_account'),
+          trigger: ['change', 'blur']
+        },
+        password: {
+          required: true,
+          message: this.$t('organization.integration.input_api_password'),
+          trigger: ['change', 'blur']
+        },
+        url: {
+          required: true,
+          message: this.$t('organization.integration.input_api_password'),
+          trigger: ['change', 'blur']
+        },
+        issuetype: {
+          required: true,
+          message: this.$t('organization.integration.input_api_password'),
+          trigger: ['change', 'blur']
+        }
+      },
+    }
+  },
+  methods: {
+    init() {
+      let param = {};
+      param.platform = JIRA;
+      const {lastOrganizationId} = getCurrentUser();
+      param.orgId = lastOrganizationId;
+      this.$parent.result = this.$post("service/integration/type", param, response => {
+        let data = response.data;
+        if (data.configuration) {
+          let config = JSON.parse(data.configuration);
+          this.$set(this.form, 'account', config.account);
+          this.$set(this.form, 'password', config.password);
+          this.$set(this.form, 'url', config.url);
+          this.$set(this.form, 'issuetype', config.issuetype);
+        } else {
+          this.clear();
+        }
+      })
+    },
+    save() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          let formatUrl = this.form.url.trim();
+          if (!formatUrl.endsWith('/')) {
+            formatUrl = formatUrl + '/';
+          }
+          let param = {};
+          let auth = {
+            account: this.form.account,
+            password: this.form.password,
+            url: formatUrl,
+            issuetype: this.form.issuetype
+          };
+          const {lastOrganizationId} = getCurrentUser();
+          param.organizationId = lastOrganizationId;
+          param.platform = JIRA;
+          param.configuration = JSON.stringify(auth);
+          this.$parent.result = this.$post("service/integration/save", param, () => {
+            this.show = true;
+            this.$refs.bugBtn.showEdit = true;
+            this.$refs.bugBtn.showSave = false;
+            this.$refs.bugBtn.showCancel = false;
+            this.init();
+            this.$success(this.$t('commons.save_success'));
+          });
+        } else {
+          return false;
+        }
+      })
+    },
+    clear() {
+      this.$set(this.form, 'account', '');
+      this.$set(this.form, 'password', '');
+      this.$set(this.form, 'url', '');
+      this.$set(this.form, 'issuetype', '');
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      });
+    },
+    testConnection() {
+      if (this.form.account && this.form.password) {
+        this.$parent.result = this.$get("issues/auth/" + JIRA, () => {
+          this.$success(this.$t('organization.integration.verified'));
+        });
+      } else {
+        this.$warning(this.$t('organization.integration.not_integrated'));
+        return false;
+      }
+    },
+    cancelIntegration() {
+      if (this.form.account && this.form.password) {
+        this.$alert(this.$t('organization.integration.cancel_confirm') + JIRA + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              let param = {};
+              const {lastOrganizationId} = getCurrentUser();
+              param.orgId = lastOrganizationId;
+              param.platform = JIRA;
+              this.$parent.result = this.$post("service/integration/delete", param, () => {
+                this.$success(this.$t('organization.integration.successful_operation'));
+                this.init('');
+              });
+            }
+          }
+        });
+      } else {
+        this.$warning(this.$t('organization.integration.not_integrated'));
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.defect-tip {
+  background: #EDEDED;
+  border: solid #E1E1E1 1px;
+  margin: 10px 0;
+  padding: 10px;
+  border-radius: 3px;
+}
+</style>
diff --git a/frontend/src/business/components/settings/organization/components/TapdSetting.vue b/frontend/src/business/components/settings/organization/components/TapdSetting.vue
new file mode 100644
index 0000000000..73d78240c5
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/components/TapdSetting.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div style="width: 500px">
+      <div style="margin-top: 20px;margin-bottom: 10px">{{ $t('organization.integration.basic_auth_info') }}</div>
+      <el-form :model="form" ref="form" label-width="120px" size="small" :disabled="show" :rules="rules">
+        <el-form-item :label="$t('organization.integration.api_account')" prop="account">
+          <el-input v-model="form.account" :placeholder="$t('organization.integration.input_api_account')"/>
+        </el-form-item>
+        <el-form-item :label="$t('organization.integration.api_password')" prop="password">
+          <el-input v-model="form.password" auto-complete="new-password"
+                    :placeholder="$t('organization.integration.input_api_password')" show-password/>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <bug-manage-btn @save="save"
+                    @init="init"
+                    @testConnection="testConnection"
+                    @cancelIntegration="cancelIntegration"
+                    :form="form"
+                    :show.sync="show"
+                    ref="bugBtn"/>
+
+    <div class="defect-tip">
+      <div>{{ $t('organization.integration.use_tip') }}</div>
+      <div>
+        1. {{ $t('organization.integration.use_tip_tapd') }}
+      </div>
+      <div>
+        2. {{ $t('organization.integration.use_tip_two') }}
+        <router-link to="/track/project/all" style="margin-left: 5px">
+          {{ $t('organization.integration.link_the_project_now') }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BugManageBtn from "@/business/components/settings/organization/components/BugManageBtn";
+import {getCurrentUser} from "@/common/js/utils";
+import {TAPD} from "@/common/js/constants";
+
+export default {
+  name: "TapdSetting.vue",
+  components: {
+    BugManageBtn
+  },
+  created() {
+    this.init();
+  },
+  beforeDestroy() {
+    console.log("tapd setting destroy");
+  },
+  data() {
+    return {
+      show: true,
+      form: {},
+      rules: {
+        account: {
+          required: true,
+          message: this.$t('organization.integration.input_api_account'),
+          trigger: ['change', 'blur']
+        },
+        password: {
+          required: true,
+          message: this.$t('organization.integration.input_api_password'),
+          trigger: ['change', 'blur']
+        }
+      },
+    }
+  },
+  methods: {
+    init() {
+      let param = {};
+      param.platform = TAPD;
+      const {lastOrganizationId} = getCurrentUser();
+      param.orgId = lastOrganizationId;
+      this.$parent.result = this.$post("service/integration/type", param, response => {
+        let data = response.data;
+        if (data.configuration) {
+          let config = JSON.parse(data.configuration);
+          this.$set(this.form, 'account', config.account);
+          this.$set(this.form, 'password', config.password);
+        } else {
+          this.clear();
+        }
+      })
+    },
+    save: function () {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+
+          let param = {};
+          let auth = {
+            account: this.form.account,
+            password: this.form.password,
+          };
+          const {lastOrganizationId} = getCurrentUser();
+          param.organizationId = lastOrganizationId;
+          param.platform = TAPD;
+          param.configuration = JSON.stringify(auth);
+
+          this.$parent.result = this.$post("service/integration/save", param, () => {
+            this.show = true;
+            this.$refs.bugBtn.showEdit = true;
+            this.$refs.bugBtn.showSave = false;
+            this.$refs.bugBtn.showCancel = false;
+            this.init();
+            this.$success(this.$t('commons.save_success'));
+          });
+        } else {
+          return false;
+        }
+      })
+    },
+    clear() {
+      this.$set(this.form, 'account', '');
+      this.$set(this.form, 'password', '');
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      });
+    },
+    testConnection() {
+      if (this.form.account && this.form.password) {
+        this.$parent.result = this.$get("issues/auth/" + TAPD, () => {
+          this.$success(this.$t('organization.integration.verified'));
+        });
+      } else {
+        this.$warning(this.$t('organization.integration.not_integrated'));
+        return false;
+      }
+    },
+    cancelIntegration() {
+      if (this.form.account && this.form.password) {
+        this.$alert(this.$t('organization.integration.cancel_confirm') + TAPD + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              let param = {};
+              const {lastOrganizationId} = getCurrentUser();
+              param.orgId = lastOrganizationId;
+              param.platform = TAPD;
+              this.$parent.result = this.$post("service/integration/delete", param, () => {
+                this.$success(this.$t('organization.integration.successful_operation'));
+                this.init('');
+              });
+            }
+          }
+        });
+      } else {
+        this.$warning(this.$t('organization.integration.not_integrated'));
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.defect-tip {
+  background: #EDEDED;
+  border: solid #E1E1E1 1px;
+  margin: 10px 0;
+  padding: 10px;
+  border-radius: 3px;
+}
+
+</style>
diff --git a/frontend/src/business/components/settings/organization/components/ZentaoSetting.vue b/frontend/src/business/components/settings/organization/components/ZentaoSetting.vue
new file mode 100644
index 0000000000..54cce82a5e
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/components/ZentaoSetting.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div style="width: 500px">
+      <div style="margin-top: 20px;margin-bottom: 10px">{{ $t('organization.integration.basic_auth_info') }}</div>
+      <el-form :model="form" ref="form" label-width="120px" size="small" :disabled="show" :rules="rules">
+        <el-form-item :label="$t('organization.integration.api_account')" prop="account">
+          <el-input v-model="form.account" :placeholder="$t('organization.integration.input_api_account')"/>
+        </el-form-item>
+        <el-form-item :label="$t('organization.integration.api_password')" prop="password">
+          <el-input v-model="form.password" auto-complete="new-password"
+                    :placeholder="$t('organization.integration.input_api_password')" show-password/>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <bug-manage-btn @save="save"
+                    @init="init"
+                    @testConnection="testConnection"
+                    @cancelIntegration="cancelIntegration"
+                    :form="form"
+                    :show.sync="show"
+                    ref="bugBtn"/>
+
+    <div class="defect-tip">
+      <div>{{ $t('organization.integration.use_tip') }}</div>
+      <div>
+        1. {{ $t('organization.integration.use_tip_tapd') }}
+      </div>
+      <div>
+        2. {{ $t('organization.integration.use_tip_two') }}
+        <router-link to="/track/project/all" style="margin-left: 5px">
+          {{ $t('organization.integration.link_the_project_now') }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BugManageBtn from "@/business/components/settings/organization/components/BugManageBtn";
+import {getCurrentUser} from "@/common/js/utils";
+import {ZEN_TAO} from "@/common/js/constants";
+
+export default {
+  name: "ZentaoSetting",
+  components: {
+    BugManageBtn
+  },
+  created() {
+    this.init();
+  },
+  beforeDestroy() {
+    console.log("zentao setting destroy");
+  },
+  data() {
+    return {
+      show: true,
+      form: {},
+      rules: {
+        account: {
+          required: true,
+          message: this.$t('organization.integration.input_api_account'),
+          trigger: ['change', 'blur']
+        },
+        password: {
+          required: true,
+          message: this.$t('organization.integration.input_api_password'),
+          trigger: ['change', 'blur']
+        }
+      },
+    }
+  },
+  methods: {
+    save() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+
+          let param = {};
+          let auth = {
+            account: this.form.account,
+            password: this.form.password,
+          };
+          const {lastOrganizationId} = getCurrentUser();
+          param.organizationId = lastOrganizationId;
+          param.platform = ZEN_TAO;
+          param.configuration = JSON.stringify(auth);
+
+          this.$parent.result = this.$post("service/integration/save", param, () => {
+            this.show = true;
+            this.$refs.bugBtn.showEdit = true;
+            this.$refs.bugBtn.showSave = false;
+            this.$refs.bugBtn.showCancel = false;
+            this.init();
+            this.$success(this.$t('commons.save_success'));
+          });
+        } else {
+          return false;
+        }
+      })
+    },
+    init() {
+      let param = {};
+      param.platform = ZEN_TAO;
+      const {lastOrganizationId} = getCurrentUser();
+      param.orgId = lastOrganizationId;
+      this.$parent.result = this.$post("service/integration/type", param, response => {
+        let data = response.data;
+        if (data.configuration) {
+          let config = JSON.parse(data.configuration);
+          this.$set(this.form, 'account', config.account);
+          this.$set(this.form, 'password', config.password);
+        } else {
+          this.clear();
+        }
+      })
+    },
+    clear() {
+      this.$set(this.form, 'account', '');
+      this.$set(this.form, 'password', '');
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      });
+    },
+    testConnection() {
+      if (this.form.account && this.form.password) {
+        this.$parent.result = this.$get("issues/auth/" + ZEN_TAO, () => {
+          this.$success(this.$t('organization.integration.verified'));
+        });
+      } else {
+        this.$warning(this.$t('organization.integration.not_integrated'));
+        return false;
+      }
+    },
+    cancelIntegration() {
+      if (this.form.account && this.form.password) {
+        this.$alert(this.$t('organization.integration.cancel_confirm') + ZEN_TAO + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              let param = {};
+              const {lastOrganizationId} = getCurrentUser();
+              param.orgId = lastOrganizationId;
+              param.platform = ZEN_TAO;
+              this.$parent.result = this.$post("service/integration/delete", param, () => {
+                this.$success(this.$t('organization.integration.successful_operation'));
+                this.init('');
+              });
+            }
+          }
+        });
+      } else {
+        this.$warning(this.$t('organization.integration.not_integrated'));
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.defect-tip {
+  background: #EDEDED;
+  border: solid #E1E1E1 1px;
+  margin: 10px 0;
+  padding: 10px;
+  border-radius: 3px;
+}
+</style>
diff --git a/frontend/src/common/js/constants.js b/frontend/src/common/js/constants.js
index 72882106ac..4342253b7d 100644
--- a/frontend/src/common/js/constants.js
+++ b/frontend/src/common/js/constants.js
@@ -20,6 +20,10 @@ export const ZH_CN = 'zh_CN';
 export const ZH_TW = 'zh_TW';
 export const EN_US = 'en_US';
 
+export const TAPD = 'Tapd';
+export const JIRA = 'Jira';
+export const ZEN_TAO = 'Zentao';
+
 export const SCHEDULE_TYPE = {
   API_TEST: 'API_TEST',
   PERFORMANCE_TEST: 'PERFORMANCE_TEST'