diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index e2f58b10f..cca62c859 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -123,8 +123,12 @@ module.exports = {
   MergeAll: 'Merge All',
   TreeOperation: 'Tree Operation',
   essentialInformation: 'General Information',
+  DetailsPhasedImplementation: 'Details of the phased implementation',
+  Statutenumberclause: 'Statute number/clause',
   OrganizationName: 'Organization Name',
   EnterOrganizationDepartment: 'Please enter organization / department name',
+  Typeofimplementation: 'Type of implementation',
+  ImplementationDate: 'Implementation date',
   SuperiorDepartment: 'Superior Department',
   enterOrganizationCode: 'Please enter organization code',
   nothing: 'Nothing',
diff --git a/jero-web/src/common/lang/zh-cn.js b/jero-web/src/common/lang/zh-cn.js
index ed71ce96b..345917f36 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -125,6 +125,10 @@ module.exports = {
   MergeAll: '合并所有',
   TreeOperation: '树操作',
   essentialInformation: '基本信息',
+  DetailsPhasedImplementation: '分阶段实施详情',
+  Statutenumberclause: '法规编号/条款',
+  Typeofimplementation: '实施类型',
+  ImplementationDate: '实施时间',
   OrganizationName: '机构名称',
   EnterOrganizationDepartment: '请输入机构/部门名称',
   SuperiorDepartment: '上级部门',
diff --git a/jero-web/src/components/dict/JDictSelectTag.vue b/jero-web/src/components/dict/JDictSelectTag.vue
index 6362c6bc7..b73e30232 100644
--- a/jero-web/src/components/dict/JDictSelectTag.vue
+++ b/jero-web/src/components/dict/JDictSelectTag.vue
@@ -109,7 +109,7 @@
           }
         })
         if (this.triggerChange) {
-          this.$emit('change', val)
+          this.$emit('change', val,content)
         } else {
           this.$emit('input', val)
           this.$emit('changeQuery', content, this.db_field_name)
diff --git a/jero-web/src/components/libraryAddForm/index.vue b/jero-web/src/components/libraryAddForm/index.vue
index 86cd81291..a075581f9 100644
--- a/jero-web/src/components/libraryAddForm/index.vue
+++ b/jero-web/src/components/libraryAddForm/index.vue
@@ -225,11 +225,184 @@
                   </a-form-model-item>
                 </div>
               </a-col>
+
             </div>
           </a-row>
         </div>
 
       </div>
+
+      <div>
+      <div class="header-text" style='margin-bottom: 0px'>
+        {{$t('DetailsPhasedImplementation')}}
+      </div>
+        <a-button key="submit" type="primary" @click="newlyAdded" style='float: right; z-index: 99; margin-bottom: 5px'>
+          {{ $t('newlyAdded') }}
+        </a-button>
+        <a-table
+          :loading="loading"
+          :pagination="false"
+          :data-source="dataGradto"
+          :columns="columnsGrading"
+          rowKey='id'
+          :scroll="{x: '100%'}"
+        >
+          <span slot="Gradoperation" slot-scope="text,result,index">
+                  <a @click="handeredit(result,index)" style="margin-right: 10px">
+                    {{$t('edit')}}
+                  </a>
+                  <a @click="deleteLib(result,index)" style="margin-right: 10px">
+                    {{$t("deleteLib")}}
+                  </a>
+          </span>
+        </a-table>
+      </div>
+      <a-modal
+        :model="tabledataGrad"
+        :title="$t('newlyAdded')"
+        :width="900"
+        :visible="visibleGrad"
+        :confirm-loading="confirmLoading"
+        :maskClosable="false"
+        @cancel="visibleGrad = false"
+      >
+          <a-form-model>
+            <a-row :gutter="24">
+              <a-col :span="12">
+                <div class="box-title-text">
+                  <div class="title-text">
+                    <span>{{$t('Statutenumberclause')}}</span>
+                  </div>
+                  <a-form-model-item class="itemModel">
+                    <a-input class="box-input" v-model="tabledataGrad.standNumberOrClause"
+                                    :placeholder="$t('PleaseEnter')+$t('Statutenumberclause')"/>
+                  </a-form-model-item>
+                </div>
+              </a-col>
+              <a-col :span="12">
+                <div class="box-title-text">
+                  <div class="title-text">
+                    <span>{{$t('Typeofimplementation')}}</span>
+                  </div>
+                  <a-form-model-item class="itemModel">
+                    <j-dict-select-tag class="box-input" v-model="tabledataGrad.implementationType"
+                                       :placeholder="$t('PleaseSelect')+$t('Typeofimplementation')"
+                                       :type="'select'"
+                                       @changeQuery='implementationTypeChange'
+                                       :triggerChange="false" dictCode="shi2_shi1_lei4_xing2"/>
+                  </a-form-model-item>
+                </div>
+              </a-col>
+              <a-col :span="12">
+                <div class="box-title-text">
+                  <div class="title-text">
+                    <span>{{$t('ImplementationDate')}}</span>
+                  </div>
+                  <a-form-model-item class="itemModel">
+                    <a-date-picker class="box-input"  v-model="tabledataGrad.implementationDate"
+                                   :placeholder="$t('PleaseSelect')+$t('ImplementationDate')"
+                                   format="YYYY-MM-DD"
+                                   @change='dateChangeOne'
+                                   style="width: 100%"/>
+                    <!--                      :disabledDate="disabledDate"-->
+                  </a-form-model-item>
+                </div>
+              </a-col>
+              <a-col :span="12">
+                <div class="box-title-text">
+                <div class="title-text">
+                  <span>{{$t('remarks')}}</span>
+                </div>
+                <a-form-model-item class="itemModel" style="height: auto">
+                  <a-textarea :placeholder="$t('pleaseEnter')+$t('remarks')"
+                              :rows="4" v-model="tabledataGrad.remarks"/>
+                </a-form-model-item>
+              </div>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        <template slot="footer">
+          <a-button key="back" @click="visibleGrad = false">
+            {{ $t('cancel') }}
+          </a-button>
+          <a-button key="submit" type="primary" @click="handleCancel">
+            {{ $t('determine') }}
+          </a-button>
+        </template>
+      </a-modal>
+      <a-modal
+      :model="tabledataGrad"
+      :title="$t('edit')"
+      :width="900"
+      :visible="tablevisibleGrad"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @cancel="tablevisibleGrad = false"
+    >
+      <a-form-model>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span>{{$t('Statutenumberclause')}}</span>
+              </div>
+              <a-form-model-item class="itemModel">
+                <a-input class="box-input" v-model="tabledataGrad.standNumberOrClause"
+                         :placeholder="$t('PleaseEnter')+$t('Statutenumberclause')"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span>{{$t('Typeofimplementation')}}</span>
+              </div>
+              <a-form-model-item class="itemModel">
+                <j-dict-select-tag class="box-input" v-model="tabledataGrad.implementationType"
+                                   :placeholder="$t('PleaseSelect')+$t('Typeofimplementation')"
+                                   :type="'select'"
+                                   @changeQuery='implementationTypeChange'
+                                   :triggerChange="false" dictCode="shi2_shi1_lei4_xing2"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span>{{$t('ImplementationDate')}}</span>
+              </div>
+              <a-form-model-item class="itemModel">
+                <a-date-picker class="box-input"  v-model="tabledataGrad.implementationDate"
+                               :placeholder="$t('PleaseSelect')+$t('ImplementationDate')"
+                               format="YYYY-MM-DD"
+                               @change='dateChangeOne'
+                               style="width: 100%"/>
+                <!--                      :disabledDate="disabledDate"-->
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span>{{$t('remarks')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" style="height: auto">
+                <a-textarea :placeholder="$t('pleaseEnter')+$t('remarks')"
+                            :rows="4" v-model="tabledataGrad.remarks"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form-model>
+      <template slot="footer">
+        <a-button key="back" @click="tablevisibleGrad = false">
+          {{ $t('cancel') }}
+        </a-button>
+        <a-button key="submit" type="primary" @click="tablehandleCancel">
+          {{ $t('determine') }}
+        </a-button>
+      </template>
+    </a-modal>
       <uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"></uploadFile>
     </a-form-model>
   </a-spin>
@@ -266,7 +439,12 @@
     },
     data() {
       return {
+        tablevisibleGrad: false,
+        visibleGrad: false,
+        loading: false,
         formInline: {},
+        tabledataGrad: {},
+        dataGradto: [],
         isFormInline: false,
         rules: {},
         labelCol: {
@@ -296,13 +474,80 @@
             text: this.$t('relatedInformation'),
             content: []
           }
-        ]
+        ],
+        columnsGrading: [
+          {
+            title: this.$t('Statutenumberclause'),
+            dataIndex: 'standNumberOrClause',
+            align: 'left',
+            ellipsis: true,
+            width: 160
+          },
+          {
+            title: this.$t('Typeofimplementation'),
+            dataIndex: 'implementationTypeText',
+            align: 'left',
+            ellipsis: true,
+            width: 100
+          },
+          {
+            title: this.$t('ImplementationDate'),
+            dataIndex: 'implementationDate',
+            align: 'left',
+            ellipsis: true,
+            width: 150
+          },
+          {
+            title: this.$t('remarks'),
+            dataIndex: 'remarks',
+            align: 'left',
+            ellipsis: true,
+            width: 254
+          },
+          {
+            title: this.$t('operation'),
+            align: 'left',
+            fixed: 'right',
+            width: 180,
+            scopedSlots: { customRender: 'Gradoperation' }
+          }
+        ],
+        dataGrad: [],
       }
     },
     mounted() {
 
     },
     methods: {
+      tablehandleCancel(){
+        this.tablevisibleGrad = false
+        console.log(this.tabledataGrad)
+        this.dataGradto[this.tabledataIndex] = this.tabledataGrad
+        this.dataGradto= [... this.dataGradto]
+      },
+      deleteLib(val,index) {
+        let _this = this
+        this.$confirm({
+          content: _this.$t('ConfirmDelete'),
+          onOk() {
+            _this.dataGradto.splice(index,1)
+            _this.dataGradto = [..._this.dataGradto]
+          }
+        })
+      },
+      newlyAdded(){
+        this.tabledataGrad = {}
+        this.visibleGrad = true
+      },
+      handeredit(result,index){
+        this.tablevisibleGrad = true
+        this.tabledataIndex = index
+        this.tabledataGrad = JSON.parse(JSON.stringify(result))
+      },
+      handleCancel(){
+        this.dataGradto.push(this.tabledataGrad)
+        this.visibleGrad = false
+      },
       disabledDate(current) {
         return current && current < moment().subtract(1, 'day')
       },
@@ -314,6 +559,7 @@
         this.formInline = { ...this.formInline }
       },
       sumber() {
+        // this.postTable()
         this.$refs.ruleForm.validate(valid => {
           if (valid) {
             this.confirmLoading = true
@@ -329,6 +575,7 @@
                 formInline[res] = formInline[res].join(',')
               }
             })
+            formInline.phasedImplementationDetailsEOList = this.dataGradto
             postAction(url, formInline).then((res) => {
               if (res.success) {
                 this.confirmLoading = false
@@ -361,6 +608,13 @@
       dateChange(item) {
         this.formInline[item.db_field_name] = this.formInline[item.db_field_name] ? moment(this.formInline[item.db_field_name]).format('YYYY-MM-DD') : ''
       },
+      dateChangeOne(item) {
+        this.tabledataGrad.implementationDate = this.tabledataGrad.implementationDate ? moment(this.tabledataGrad.implementationDate).format('YYYY-MM-DD') : ''
+        console.log(this.tabledataGrad.implementationDate)
+      },
+      implementationTypeChange(val){
+        this.tabledataGrad.implementationTypeText = val
+      },
       onChange(item) {
         let dateOne = moment(this.formInline[item][0]).format('YYYY-MM-DD')
         let dateTwo = moment(this.formInline[item][1]).format('YYYY-MM-DD')
@@ -479,18 +733,33 @@
           }
         })
       },
+      postTable(){
+        let params = this.dataGradto
+        postAction(this.url.getDocumentInfo, params).then((res) => {
+          if (res.success) {
+            this.$message.success(this.$t('OperationSuccessful'))
+          }
+        })
+      },
       edit(item) {
         this.type = 'edit'
+        this.loading = true
         this.getForm(() => {
           getAction(this.url.getDocumentInfo, { id: item.id }).then((res) => {
             if (res.success) {
               this.formInline = res.result[0]
+              this.dataGrad = res.result[0].phasedImplementationDetailsEOList
+              this.dataGradto = this.dataGrad
+              this.loading = false
+            } else {
+              this.loading = false
             }
           })
         })
       },
       add() {
         this.formInline = {}
+        this.dataGrad = []
         this.type = 'add'
         this.getForm()
       },
@@ -642,4 +911,13 @@
     line-height: 6px;
     color: #fff;
   }
+
+  .table {
+    margin-top: 5px;
+  }
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentManage/library/docDetail/index.vue b/jero-web/src/views/documentManage/library/docDetail/index.vue
index b923275cb..fa7898358 100644
--- a/jero-web/src/views/documentManage/library/docDetail/index.vue
+++ b/jero-web/src/views/documentManage/library/docDetail/index.vue
@@ -162,9 +162,34 @@
               </div>
             </div>
           </div>
+          <div class='content-box'>
+            <div class="content">
+              <div class="header-text">
+                {{$t('DetailsPhasedImplementation')}}
+              </div>
+              <a-table
+                :pagination="false"
+                :scroll="{x: '100%'}"
+                :data-source="dataGrad"
+                :columns="columnsGrading"
+              >
+              </a-table>
+              <div class="page" v-if="dataGrad.length > 0">
+                <a-pagination
+                  :show-total="total => $t('total')+` ${tabletotal} `+$t('strip')"
+                  show-quick-jumper
+                  show-size-changer
+                  :page-size.sync="tablepageSize"
+                  :total="tabletotal"
+                  :current="tablepageNo"
+                  @change="onTableChange"
+                  @showSizeChange="tableSizeChange"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-
     </div>
     <a-modal
       :title="$t('UpdateLog')"
@@ -287,7 +312,8 @@
         url: {
           getInfo: 'document/bussDocumentLibraryEO/getInfoById',
           list: 'log/bussLogEO/page',
-          getTitle: '/document/bussDocumentLibraryEO/getTitle'
+          getTitle: '/document/bussDocumentLibraryEO/getTitle',
+          getPage: '/document/phasedImplementationDetailsEO/page'
         },
         titleHeader: '',
         visibleFile: false,
@@ -319,18 +345,51 @@
         ],
         dataSourceRelated: [],
         detailList: [],
+        dataGrad:[],
         visible: false,
         serial_number: '',
         confirmLoading: false,
         downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
         downLoadImgUrl: window._CONFIG['domianWebImgURL'] + '/sys/common/download',
-        loading: false,
         dataSource: [],
         pageNo: 1,
+        tablepageNo: 1,
         pageSize: 10,
+        tablepageSize: 10,
         total: 0,
+        tabletotal: 0,
         visibleRelated: false,
         dataSourceFile: [],
+        columnsGrading: [
+          {
+            title: this.$t('Statutenumberclause'),
+            dataIndex: 'standNumberOrClause',
+            align: 'left',
+            ellipsis: true,
+            width: 300
+          },
+          {
+            title: this.$t('Typeofimplementation'),
+            dataIndex: 'implementationTypeText',
+            align: 'left',
+            ellipsis: true,
+            width: 150
+          },
+          {
+            title: this.$t('ImplementationDate'),
+            dataIndex: 'implementationDate',
+            align: 'left',
+            ellipsis: true,
+            width: 150
+          },
+          {
+            title: this.$t('remarks'),
+            dataIndex: 'remarks',
+            align: 'left',
+            ellipsis: true,
+            width: 350
+          },
+        ],
         columns: [
           {
             title: this.$t('ModificationContent'),
@@ -364,6 +423,7 @@
       this.getTitle(function() {
         _this.getInfoById()
       })
+      this.getPage()
     },
     methods: {
       ...mapGetters(['userInfo']),
@@ -441,6 +501,23 @@
           }
         })
       },
+      getPage(){
+        let tablequery = {
+          pageNo: this.tablepageNo,
+          pageSize: this.tablepageSize,
+          bussDocumentLibraryId: this.$route.query.id
+        }
+        getAction(this.url.getPage, tablequery).then((res) => {
+          if (res.success) {
+            this.dataGrad = res.result.records
+            this.tabletotal=res.result.total
+            this.loading = false
+          } else {
+            this.dataGrad = []
+            this.loading = false
+          }
+        })
+      },
       clickButtonToUpload(item) {
         this.loading = true
         this.visibleFile = true
@@ -518,11 +595,20 @@
         this.pageNo = page
         this.bussLogList()
       },
+      onTableChange(page, pageSize) {
+        this.tablepageNo = page
+        this.getPage()
+      },
       SizeChange(page, pageSize) {
         this.pageNo = 1
         this.pageSize = pageSize
         this.bussLogList()
       },
+      tableSizeChange(page, pageSize) {
+        this.tablepageNo = 1
+        this.tablepageSize = pageSize
+        this.getPage()
+      },
       DocumentSplitting() {
         let serial_number = ''
         if (this.detailList.length > 0) {
@@ -835,6 +921,10 @@
   //}
 
   /deep/ .ant-table-placeholder{
-    margin-top: 8px !important;
+    margin-top: 0px !important;
+  }
+
+  .text {
+    margin-right: 10px
   }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentManage/library/index.vue b/jero-web/src/views/documentManage/library/index.vue
index d261d2fa8..da37839a2 100644
--- a/jero-web/src/views/documentManage/library/index.vue
+++ b/jero-web/src/views/documentManage/library/index.vue
@@ -127,7 +127,8 @@
           deleteBatch: 'document/bussDocumentLibraryEO/deleteBatch', //删除
           pullMessage: 'document/bussDocumentLibraryEO/pullMessage',//推送
           importZipUrl: '/document/bussDocumentLibraryEO/importZip',//导入
-          verifyBind: '/document/bussDocumentLibraryEO/verifyBind' //验证当前的数据是否可以删除
+          verifyBind: '/document/bussDocumentLibraryEO/verifyBind', //验证当前的数据是否可以删除
+          getPage : '/document/phasedImplementationDetailsEO/page'
         },
         idList: []
       }