diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
index 16f764ed2..e39f8816f 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
@@ -96,17 +96,20 @@
       </div>
     </div>
     <countryCardReleaseModel ref="countryCardReleaseModelRef"/>
+    <countryCardReleaseAdd ref="countryCardReleaseAddRef"/>
   </div>
 </template>
 
 <script>
   import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
   import countryCardReleaseModel from './countryCardReleaseModel'
+  import countryCardReleaseAdd from './countryCardReleaseAdd'
 
   export default {
     name: 'countryCardRelease',
     components: {
-      countryCardReleaseModel
+      countryCardReleaseModel,
+      countryCardReleaseAdd
     },
     data() {
       return {
@@ -193,7 +196,7 @@
         this.selectedRowKeys = value
       },
       newlyAddedClick() {
-
+        this.$refs.countryCardReleaseAddRef.add()
       },
       templateMaintenanceClick() {
         this.$refs.countryCardReleaseModelRef.getData()
@@ -221,7 +224,7 @@
         }
       },
       edit() {
-
+        this.$refs.countryCardReleaseAddRef.edit()
       },
       subscribe() {
 
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseAdd.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseAdd.vue
new file mode 100644
index 000000000..122175961
--- /dev/null
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseAdd.vue
@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <a-drawer
+      :title="title"
+      :maskClosable="false"
+      :width="1000"
+      placement="right"
+      :closable="true"
+      @close="handleCancel"
+      :visible="visible"
+      style="height: 100%;overflow: auto;padding-bottom: 53px;">
+      <div style="margin-bottom: 60px">
+        <a-table
+          :columns="columns"
+          :scroll="{x: '100%',y:'calc(100vh - 300px)'}"
+          :data-source="dataList"
+          :pagination="false"
+          :loading="loading">
+           <span slot="content" slot-scope="text,record,index">
+                    <a-input class="box-input"
+                             v-if="false"
+                             v-model="record.problemLabel"
+                             :placeholder="$t('PleaseEnter')"/>
+                    <a-select :placeholder="$t('PleaseSelect')"
+                              style="width: 100%"
+                              v-if="false"
+                              v-model="record.projectNameId">
+                      <a-select-option v-for="(item, key) in record.projectNameList"
+                                       :key="key"
+                                       :value="item.id">
+                     <span style="display: inline-block;width: 100%" :title=" item.projectName ">
+                           {{ item.projectName}}
+                     </span>
+                      </a-select-option>
+                    </a-select>
+                <a-button type="primary" class="button-text"
+                          @click="clickButtonToUpload('verifyDeliverableTemplate',index)">
+                  {{ (record.verifyDeliverableTemplate === 'null' || record.verifyDeliverableTemplate === '' ||
+                  record.verifyDeliverableTemplate == null) ? $t('clickUpload') : $t('viewUploadedFiles')
+                  }}
+                </a-button>
+           </span>
+        </a-table>
+        <div class="page" v-if="dataList.length > 0">
+          <a-pagination
+            :show-total="total => $t('total')+`${total}`+$t('strip')"
+            show-quick-jumper
+            show-size-changer
+            :page-size.sync="pageSize"
+            :total="total"
+            :current="pageNo"
+            @change="onChange"
+            @showSizeChange="SizeChange"
+          />
+        </div>
+      </div>
+
+      <div class="drawer-bootom-button">
+        <a-button @click="handleCancel" type="danger" style="margin-right: 16px">{{$t('cancel')}}</a-button>
+        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
+      </div>
+    </a-drawer>
+    <uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"/>
+  </div>
+</template>
+
+<script>
+  import { getAction, postAction, deleteAction } from '@/api/manage'
+  import uploadFile from '@/components/uploadFile/file'
+
+  export default {
+    name: 'countryCardReleaseAdd',
+    components: {
+      uploadFile
+    },
+    data() {
+      return {
+        url: {
+          list: '',
+          deleteOne: ''
+        },
+        title: '',
+        visible: false,
+        selectedRowKeys: [],
+        dataList: [{}],
+        loading: false,
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        confirmLoading: false,
+        index: '',
+        columns: [
+          {
+            title: this.$t('LabelName'),
+            dataIndex: 'LabelName',
+            align: 'center',
+            ellipsis: true
+          },
+          {
+            title: this.$t('describe'),
+            dataIndex: 'describe',
+            align: 'center',
+            ellipsis: true
+          },
+          {
+            title: this.$t('content'),
+            align: 'center',
+            fixed: 'right',
+            width: 180,
+            scopedSlots: { customRender: 'content' }
+          }
+        ]
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      add() {
+        this.visible = true
+        this.title = this.$t('newlyAdded')
+      },
+      edit() {
+        this.visible = true
+        this.title = this.$t('edit')
+      },
+      clickButtonToUpload(item, index) {
+        this.$refs.uploadFile.perentHandleFunc()
+        this.index = index
+        this.$refs.uploadFile.visible = true
+        this.uploadName = item
+        getAction('sys/common/getFileInfos', { id: this.dataList[this.index][this.uploadName] }).then((res) => {
+          if (res.success) {
+            this.$refs.uploadFile.perentHandleFunc(res.result)
+          } else {
+            this.$refs.uploadFile.perentHandleFunc()
+          }
+        })
+      },
+      /** 上传文件的回调 */
+      uploadSuccess(data) {
+        let attIdList = []
+        if (data && data.length > 0) {
+          data.map(item => {
+            attIdList.push(item.id || data.name)
+          })
+        }
+        /** 赋值给当前对应的表单文件 */
+        this.dataList[this.index][this.uploadName] = attIdList.join(',')
+        this.dataList = [...this.dataList]
+      },
+      handleCancel() {
+        this.visible = false
+      },
+      handleSubmit() {
+
+      },
+      onChange(page, pageSize) {
+        this.pageNo = page
+        this.replacePage()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.replacePage()
+      },
+      replacePage() {
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize
+        }
+        this.loading = true
+        postAction(this.url.list, query).then((res) => {
+          if (res.success) {
+            this.dataList = res.result.records || []
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.dataList = []
+            this.total = 0
+            this.loading = false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 100;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .box-title {
+    width: 100%;
+    text-align: right;
+    margin-bottom: 20px;
+  }
+
+  .operator-text {
+    cursor: pointer;
+    margin-right: 13px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+  }
+
+  .button-text {
+    height: 38px;
+    width: 100%;
+    line-height: 38px;
+    background: #fff;
+    border: 1px #00B3BE solid;
+    color: #00B3BE;
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModelAdd.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModelAdd.vue
index a4e39ccb8..3edf87f98 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModelAdd.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardReleaseModelAdd.vue
@@ -1,122 +1,130 @@
 <template>
-  <a-modal
-    :title="title"
-    :width="700"
-    :visible="visible"
-    :confirm-loading="confirmLoading"
-    :maskClosable="false"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
-    <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <div class="box-title-text">
-            <div class="title-text">
-              <span class="Required">*</span>
-              <span class="title-text-text"
-                    :title="$t('LabelName')">{{$t('LabelName')}}</span>
+  <div>
+    <a-modal
+      :title="title"
+      :width="700"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text"
+                      :title="$t('LabelName')">{{$t('LabelName')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="LabelName">
+                <a-input class="box-input"
+                         :disabled="disabled"
+                         v-model="formInline.LabelName"
+                         :placeholder="$t('PleaseEnter')+$t('LabelName')"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="LabelName">
-              <a-input class="box-input"
-                       :disabled="disabled"
-                       v-model="formInline.LabelName"
-                       :placeholder="$t('PleaseEnter')+$t('LabelName')"/>
-            </a-form-model-item>
-          </div>
-        </a-col>
-      </a-row>
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <div class="box-title-text">
-            <div class="title-text">
-              <span class="Required">*</span>
-              <span class="title-text-text"
-                    :title="$t('LabelType')">{{$t('LabelType')}}</span>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text"
+                      :title="$t('LabelType')">{{$t('LabelType')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="LabelType">
+                <a-input class="box-input"
+                         :disabled="disabled"
+                         v-model="formInline.LabelType"
+                         :placeholder="$t('PleaseEnter')+$t('LabelType')"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="LabelType">
-              <a-input class="box-input"
-                       :disabled="disabled"
-                       v-model="formInline.LabelType"
-                       :placeholder="$t('PleaseEnter')+$t('LabelType')"/>
-            </a-form-model-item>
-          </div>
-        </a-col>
-      </a-row>
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <div class="box-title-text">
-            <div class="title-text">
-              <span class="Required">*</span>
-              <span class="title-text-text"
-                    :title="$t('dropDownOptions')">{{$t('dropDownOptions')}}</span>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text"
+                      :title="$t('dropDownOptions')">{{$t('dropDownOptions')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="dropDownOptions">
+                <a-button class="submit" @click="dropDownOptionsClick" type="primary">
+                  {{$t('dropDownOptionMaintenance')}}
+                </a-button>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="dropDownOptions">
-              <a-button class="submit" @click="dropDownOptionsClick" type="primary">
-                {{$t('dropDownOptionMaintenance')}}
-              </a-button>
-            </a-form-model-item>
-          </div>
-        </a-col>
-      </a-row>
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <div class="box-title-text">
-            <div class="title-text">
-              <span class="Required">*</span>
-              <span class="title-text-text"
-                    :title="$t('DisplayOrder')">{{$t('DisplayOrder')}}</span>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text"
+                      :title="$t('DisplayOrder')">{{$t('DisplayOrder')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="DisplayOrder">
+                <a-input-number class="box-input"
+                                :disabled="disabled"
+                                v-model="formInline.DisplayOrder"
+                                :placeholder="$t('PleaseEnter')+$t('DisplayOrder')"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="DisplayOrder">
-              <a-input-number class="box-input"
-                              :disabled="disabled"
-                              v-model="formInline.DisplayOrder"
-                              :placeholder="$t('PleaseEnter')+$t('DisplayOrder')"/>
-            </a-form-model-item>
-          </div>
-        </a-col>
-      </a-row>
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <div class="box-title-text">
-            <div class="title-text">
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="box-title-text">
+              <div class="title-text">
               <span class="title-text-text"
                     :title="$t('associatedWebsite')">{{$t('associatedWebsite')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="associatedWebsite">
+                <a-input class="box-input"
+                         :disabled="disabled"
+                         v-model="formInline.associatedWebsite"
+                         :placeholder="$t('PleaseEnter')+$t('associatedWebsite')"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="associatedWebsite">
-              <a-input class="box-input"
-                       :disabled="disabled"
-                       v-model="formInline.associatedWebsite"
-                       :placeholder="$t('PleaseEnter')+$t('associatedWebsite')"/>
-            </a-form-model-item>
-          </div>
-        </a-col>
-      </a-row>
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <div class="box-title-text">
-            <div class="title-text">
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="box-title-text">
+              <div class="title-text">
               <span class="title-text-text"
                     :title="$t('describe')">{{$t('describe')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="describe">
+                <a-textarea
+                  :placeholder="$t('PleaseEnter')+$t('describe')"
+                  :disabled="disabled"
+                  v-model="formInline.describe" :rows="4"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="describe">
-              <a-textarea
-                :placeholder="$t('PleaseEnter')+$t('describe')"
-                :disabled="disabled"
-                v-model="formInline.describe" :rows="4"/>
-            </a-form-model-item>
-          </div>
-        </a-col>
-      </a-row>
-    </a-form-model>
-  </a-modal>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-modal>
+    <optionMaintenance ref="optionMaintenanceRef"/>
+  </div>
+
 </template>
 
 <script>
   import { getAction, postAction, downloadFile } from '@/api/manage'
+  import optionMaintenance from './optionMaintenance'
 
   export default {
     name: 'countryCardReleaseModelAdd',
+    components: {
+      optionMaintenance
+    },
     data() {
       return {
         visible: false,
@@ -171,6 +179,9 @@
     mounted() {
     },
     methods: {
+      dropDownOptionsClick() {
+        this.$refs.optionMaintenanceRef.getData()
+      },
       add() {
         this.visible = true
         this.title = this.$t('addLabel')
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/optionMaintenance.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/optionMaintenance.vue
new file mode 100644
index 000000000..5b00c4acc
--- /dev/null
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/optionMaintenance.vue
@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <a-drawer
+      :title="$t('dropDownOptionMaintenance')"
+      :maskClosable="false"
+      :width="1000"
+      placement="right"
+      :closable="true"
+      @close="handleCancel"
+      :visible="visible"
+      style="height: 100%;overflow: auto;padding-bottom: 53px;">
+      <div style="margin-bottom: 60px">
+        <div class="box-title">
+          <div @click="addLabelClick" class="operator-text">
+            <a-icon type="plus"/>
+            {{$t('newlyAdded')}}
+          </div>
+        </div>
+        <a-table
+          :columns="columns"
+          :scroll="{x: '100%',y:'calc(100vh - 300px)'}"
+          :data-source="dataList"
+          :pagination="false"
+          :loading="loading">
+           <span slot="operation" slot-scope="text,record">
+              <a style="margin-right: 8px" @click="edit(record)">{{$t('edit')}}</a>
+              <a @click="deleteData">{{$t('delete')}}</a>
+           </span>
+        </a-table>
+        <div class="page" v-if="dataList.length > 0">
+          <a-pagination
+            :show-total="total => $t('total')+`${total}`+$t('strip')"
+            show-quick-jumper
+            show-size-changer
+            :page-size.sync="pageSize"
+            :total="total"
+            :current="pageNo"
+            @change="onChange"
+            @showSizeChange="SizeChange"
+          />
+        </div>
+      </div>
+
+      <div class="drawer-bootom-button">
+        <a-button @click="handleCancel" type="danger">{{$t('cancel')}}</a-button>
+      </div>
+    </a-drawer>
+    <optionMaintenanceAdd ref="optionMaintenanceAddRef"
+                          @classificationMaintenanceAddForm="optionMaintenanceAddForm"/>
+  </div>
+</template>
+
+<script>
+  import { getAction, postAction, deleteAction } from '@/api/manage'
+  import optionMaintenanceAdd from './optionMaintenanceAdd'
+
+  export default {
+    name: 'optionMaintenance',
+    components: {
+      optionMaintenanceAdd
+    },
+    data() {
+      return {
+        url: {
+          list: '',
+          deleteOne: ''
+        },
+        visible: false,
+        selectedRowKeys: [],
+        dataList: [{}],
+        loading: false,
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        columns: [
+          {
+            title: this.$t('name'),
+            dataIndex: 'name',
+            align: 'center',
+            ellipsis: true
+          },
+          {
+            title: this.$t('enName'),
+            dataIndex: 'enName',
+            align: 'center',
+            ellipsis: true
+          },
+          {
+            title: this.$t('describe'),
+            dataIndex: 'describe',
+            align: 'center',
+            ellipsis: true
+          },
+          {
+            title: this.$t('operation'),
+            align: 'center',
+            fixed: 'right',
+            width: 180,
+            scopedSlots: { customRender: 'operation' }
+          }
+        ]
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      getData() {
+        this.visible = true
+      },
+      handleCancel() {
+        this.visible = false
+      },
+      onChange(page, pageSize) {
+        this.pageNo = page
+        this.replacePage()
+      },
+      addLabelClick() {
+        this.$refs.optionMaintenanceAddRef.add()
+      },
+      edit(val) {
+        this.$refs.optionMaintenanceAddRef.edit(JSON.parse(JSON.stringify(val)))
+      },
+      deleteData(val) {
+        let _this = this
+        this.$confirm({
+          content: _this.$t('ConfirmDelete'),
+          onOk() {
+            deleteAction(_this.url.deleteOne, { id: val.id }).then((res) => {
+              if (res.success) {
+                _this.$message.success(_this.$t('OperationSuccessful'))
+                _this.getList()
+              } else {
+                _this.$message.warning(_this.$t('operationFailed'))
+              }
+            })
+          }
+        })
+      },
+      optionMaintenanceAddForm() {
+        this.pageNo = 1
+        this.replacePage()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.replacePage()
+      },
+      replacePage() {
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize
+        }
+        this.loading = true
+        postAction(this.url.list, query).then((res) => {
+          if (res.success) {
+            this.dataList = res.result.records || []
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.dataList = []
+            this.total = 0
+            this.loading = false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 100;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .box-title {
+    width: 100%;
+    text-align: right;
+    margin-bottom: 20px;
+  }
+
+  .operator-text {
+    cursor: pointer;
+    margin-right: 13px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/optionMaintenanceAdd.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/optionMaintenanceAdd.vue
new file mode 100644
index 000000000..8b6f1d610
--- /dev/null
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/optionMaintenanceAdd.vue
@@ -0,0 +1,215 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="700"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :maskClosable="false"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="Required">*</span>
+              <span class="title-text-text"
+                    :title="$t('name')">{{$t('name')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="name">
+              <a-input class="box-input"
+                       v-model="formInline.name"
+                       :placeholder="$t('PleaseEnter')+$t('name')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="Required">*</span>
+              <span class="title-text-text"
+                    :title="$t('enName')">{{$t('enName')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="enName">
+              <a-input class="box-input"
+                       v-model="formInline.enName"
+                       :placeholder="$t('PleaseEnter')+$t('enName')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="Required">*</span>
+              <span class="title-text-text"
+                    :title="$t('DisplayOrder')">{{$t('DisplayOrder')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="DisplayOrder">
+              <a-input-number class="box-input"
+                              v-model="formInline.DisplayOrder"
+                              :placeholder="$t('PleaseEnter')+$t('DisplayOrder')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="title-text-text"
+                    :title="$t('describe')">{{$t('describe')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="describe">
+              <a-textarea
+                :placeholder="$t('PleaseEnter')+$t('describe')"
+                :disabled="disabled"
+                v-model="formInline.describe" :rows="4"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+  import { getAction, postAction, downloadFile } from '@/api/manage'
+
+  export default {
+    name: 'optionMaintenanceAdd',
+    data() {
+      return {
+        visible: false,
+        confirmLoading: false,
+        formInline: {},
+        disabled: false,
+        rules: {
+          name: [
+            {
+              required: true,
+              message: this.$t('name') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 100,
+              message: this.$t('name') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ],
+          enName: [
+            {
+              required: true,
+              message: this.$t('enName') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 100,
+              message: this.$t('enName') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ],
+          DisplayOrder: [
+            {
+              required: true,
+              message: this.$t('DisplayOrder') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            }
+          ],
+          describe: [
+            {
+              max: 300,
+              message: this.$t('describe') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ]
+        },
+        title: ''
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      add() {
+        this.visible = true
+        this.title = this.$t('newlyAdded')
+        this.$nextTick(() => {
+          this.formInline = {}
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      edit(data) {
+        this.visible = true
+        this.title = this.$t('edit')
+        this.$nextTick(() => {
+          this.formInline = data
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      PersonnelSelectionChange(value, id) {
+        this.formInline[value] = id
+        this.formInline = { ...this.formInline }
+      },
+      handleOk() {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      handleCancel() {
+        this.visible = false
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+  }
+
+  .title-text {
+    width: 84px;
+    text-align: right;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 42px;
+    line-height: 42px;
+  }
+
+  .box-input {
+    display: inline-block;
+    height: 38px;
+    width: 100%;
+  }
+
+  .itemModel {
+    width: calc(100% - 130px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .title-text-text {
+    margin-top: 9px;
+  }
+
+  .formAdd {
+    margin-bottom: 40px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+</style>
\ No newline at end of file