From 65d58bca914542cbb56d5d0cb6087860e440240d Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Wed, 22 Jun 2022 10:25:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E6=B3=95=E8=A7=84=E6=9C=88?=
 =?UTF-8?q?=E6=8A=A5=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/common/lang/en-us.js             |   7 +
 jero-web/src/common/lang/zh-cn.js             |   7 +
 jero-web/src/components/layouts/Tabcrumbs.vue |   8 +-
 .../components/RegulationMonthlyFill.vue      | 208 ++++++++++++
 .../RegulationMonthlyManagement.vue           | 312 ++++++++++++++++++
 .../components/modules/managementAdd.vue      | 257 +++++++++++++++
 .../regulationReport/index.vue                |  42 +++
 7 files changed, 835 insertions(+), 6 deletions(-)
 create mode 100644 jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyFill.vue
 create mode 100644 jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyManagement.vue
 create mode 100644 jero-web/src/views/businessSupport/regulationReport/components/modules/managementAdd.vue
 create mode 100644 jero-web/src/views/businessSupport/regulationReport/index.vue

diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index faee708cd..1c4f25207 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -955,4 +955,11 @@ module.exports = {
   OnlyOrTaskconfirmationOut: 'Only when the list confirmation status or task confirmation status is to be confirmed can the reminder be carried out',
   or: 'or',
   warningTime:'Warning time',
+  RegulationMonthlyManagement:'Regulation Monthly Management',
+  RegulationMonthlyFill:'Regulation Monthly Fill',
+  RegulationMonthlyName:'Regulation monthly name',
+  monthlyLanguage:'Monthly language',
+  releaseStatus:'Release status',
+  uploadedBy:'Uploaded by',
+  uploadMonthly:'Upload monthly',
 }
\ No newline at end of file
diff --git a/jero-web/src/common/lang/zh-cn.js b/jero-web/src/common/lang/zh-cn.js
index 73fdc0447..96d70a9fc 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -960,4 +960,11 @@ module.exports = {
   disableInput:'禁止输入',
   or: '或',
   warningTime:'预警时间',
+  RegulationMonthlyManagement:'法规月报管理',
+  RegulationMonthlyFill:'法规月报填写',
+  RegulationMonthlyName:'法规月报名称',
+  monthlyLanguage:'月报语种',
+  releaseStatus:'发布状态',
+  uploadedBy:'上传人',
+  uploadMonthly:'上传月报',
 }
\ No newline at end of file
diff --git a/jero-web/src/components/layouts/Tabcrumbs.vue b/jero-web/src/components/layouts/Tabcrumbs.vue
index 42616fa75..43e8276ac 100644
--- a/jero-web/src/components/layouts/Tabcrumbs.vue
+++ b/jero-web/src/components/layouts/Tabcrumbs.vue
@@ -27,9 +27,7 @@
     watch: {
       '$route': function(val) {
         if (val.meta.title == '首页' ||
-          val.meta.title === ' Home Page' ||
-          this.$route.meta.title === '法规预警' ||
-          this.$route.meta.title === 'Regulatory Early Warning') {
+          val.meta.title === ' Home Page') {
           this.Navigation = val.meta.title
           this.subNavigation = null
         } else {
@@ -40,9 +38,7 @@
     mounted() {
       console.log(this.$route.meta)
       if (this.$route.meta.title === '首页' ||
-        this.$route.meta.title === ' Home Page' ||
-        this.$route.meta.title === '法规预警' ||
-        this.$route.meta.title === 'Regulatory Early Warning') {
+        this.$route.meta.title === ' Home Page') {
         this.Navigation = this.$route.meta.title
         this.subNavigation = null
       } else {
diff --git a/jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyFill.vue b/jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyFill.vue
new file mode 100644
index 000000000..74f026074
--- /dev/null
+++ b/jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyFill.vue
@@ -0,0 +1,208 @@
+<template>
+  <a-card :bordered="false" class="RegulationMonthly">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('RegulationMonthlyName')">
+                <span>{{$t('RegulationMonthlyName')}}</span>
+              </div>
+              <j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('RegulationMonthlyName')"
+                       v-model="queryParam.RegulationMonthlyName"></j-input>
+            </div>
+          </a-col>
+          <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+               <a-col :md="6" :sm="24">
+                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
+               </a-col>
+      </span>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="table-operator">
+      <div @click="uploadMonthlyClick" class="operator-text">
+        <a-icon type="cloud-upload"/>
+        {{$t('uploadMonthly')}}
+      </div>
+      <div @click="BatchDeleteClick" class="operator-text">
+        <a-icon type="delete"/>
+        {{$t('BatchDelete')}}
+      </div>
+    </div>
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        :loading="loading"
+        :pagination="false"
+        :scroll="{x: '100%'}"
+        rowKey="id"
+        :data-source="dataSource"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :columns="columns"
+      >
+      </a-table>
+      <div class="page" v-if="dataSource && dataSource.length > 0">
+        <a-pagination
+          :show-total="total => $t('total')+` ${total} `+$t('strip')"
+          show-quick-jumper
+          show-size-changer
+          :page-size.sync="pageSize"
+          :total="total"
+          @change="pageOnChange"
+          @showSizeChange="SizeChange"
+        />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script>
+  export default {
+    name: 'RegulationMonthlyFill',
+    data() {
+      return {
+        //url传参严格按照当前命名
+        url: {},
+        loading: false,
+        dataSource: [],
+        selectedRowKeys: [],
+        total: 0,
+        pageSize: 10,
+        pageNo: 1,
+        queryParam: {},
+        columns: [
+          {
+            title: this.$t('RegulationMonthlyName'),
+            align: 'center',
+            dataIndex: 'RegulationMonthlyName',
+            width: 170
+          },
+          {
+            title: this.$t('monthlyLanguage'),
+            align: 'center',
+            dataIndex: 'monthlyLanguage',
+            width: 170
+          },
+          {
+            title: this.$t('releaseStatus'),
+            align: 'center',
+            width: 140,
+            ellipsis: true,
+            dataIndex: 'releaseStatus'
+          },
+          {
+            title: this.$t('uploadTime'),
+            align: 'center',
+            width: 170,
+            ellipsis: true,
+            dataIndex: 'uploadTime'
+          },
+          {
+            title: this.$t('uploadedBy'),
+            align: 'center',
+            ellipsis: true,
+            width: 170,
+            dataIndex: 'uploadedBy'
+          },
+          {
+            title: this.$t('operation'),
+            align: 'center',
+            fixed: 'right',
+            width: 180,
+            scopedSlots: { customRender: 'operation' }
+          }
+        ]
+      }
+    },
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      searchQuery() {
+
+      },
+      searchReset() {
+
+      },
+      onSelectChange(value) {
+        this.selectedRowKeys = value
+      },
+      handleCompare() {
+
+      },
+      handleExport() {
+
+      },
+      clearSelected() {
+
+      },
+      pageOnChange() {
+
+      },
+      SizeChange() {
+
+      },
+      getList() {
+
+      },
+      uploadMonthlyClick() {
+
+      },
+      BatchDeleteClick() {
+
+      }
+    }
+  }
+</script>
+
+<style>
+  .RegulationMonthly .ant-card-body {
+    padding: 10px 0 0 0 !important;
+  }
+</style>
+<style scoped>
+  @import '~@assets/less/common.less';
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 20%;
+    min-width: 110px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 70%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
+
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyManagement.vue b/jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyManagement.vue
new file mode 100644
index 000000000..9d15af59c
--- /dev/null
+++ b/jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyManagement.vue
@@ -0,0 +1,312 @@
+<template>
+  <a-card :bordered="false" class="RegulationMonthly">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('RegulationMonthlyName')">
+                <span>{{$t('RegulationMonthlyName')}}</span>
+              </div>
+              <j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('RegulationMonthlyName')"
+                       v-model="queryParam.RegulationMonthlyName"></j-input>
+            </div>
+          </a-col>
+          <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+               <a-col :md="6" :sm="24">
+                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
+               </a-col>
+      </span>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="table-operator">
+      <div @click="uploadMonthlyClick" class="operator-text">
+        <a-icon type="cloud-upload"/>
+        {{$t('uploadMonthly')}}
+      </div>
+      <div @click="BatchDeleteClick" class="operator-text">
+        <a-icon type="delete"/>
+        {{$t('BatchDelete')}}
+      </div>
+    </div>
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        :loading="loading"
+        :pagination="false"
+        :scroll="{x: '100%'}"
+        rowKey="id"
+        :data-source="dataSource"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :columns="columns"
+      >
+          <span slot="operation" slot-scope="text,record">
+           <a class="text-operation"
+              @click="withdraw(record)">
+             {{record.state == 2 ? $t('release') : $t('withdraw')}}
+           </a>
+           <a class="text-operation"
+              @click="deleteLib(record)">{{$t('deleteLib')}}</a>
+        </span>
+      </a-table>
+      <div class="page" v-if="dataSource && dataSource.length > 0">
+        <a-pagination
+          :show-total="total => $t('total')+` ${total} `+$t('strip')"
+          show-quick-jumper
+          show-size-changer
+          :page-size.sync="pageSize"
+          :total="total"
+          @change="pageOnChange"
+          @showSizeChange="SizeChange"
+        />
+      </div>
+    </div>
+    <managementAdd ref="managementAddRef" @managementAddForm="managementAddForm"/>
+  </a-card>
+</template>
+
+<script>
+  import eventBUs from '../../../../common/event'
+  import managementAdd from './modules/managementAdd'
+  import { getAction, postAction } from '@/api/manage'
+
+  export default {
+    name: 'RegulationMonthlyManagement',
+    components: {
+      managementAdd
+    },
+    data() {
+      return {
+        //url传参严格按照当前命名
+        url: {
+          list: '',
+          urlWithdraw: '',
+          deleteBatch: ''
+        },
+        loading: false,
+        dataSource: [],
+        selectedRowKeys: [],
+        total: 0,
+        pageSize: 10,
+        pageNo: 1,
+        queryParam: {},
+        columns: [
+          {
+            title: this.$t('RegulationMonthlyName'),
+            align: 'center',
+            dataIndex: 'RegulationMonthlyName',
+            width: 170
+          },
+          {
+            title: this.$t('monthlyLanguage'),
+            align: 'center',
+            dataIndex: 'monthlyLanguage',
+            width: 170
+          },
+          {
+            title: this.$t('releaseStatus'),
+            align: 'center',
+            width: 140,
+            ellipsis: true,
+            dataIndex: 'releaseStatus'
+          },
+          {
+            title: this.$t('uploadTime'),
+            align: 'center',
+            width: 170,
+            ellipsis: true,
+            dataIndex: 'uploadTime'
+          },
+          {
+            title: this.$t('uploadedBy'),
+            align: 'center',
+            ellipsis: true,
+            width: 170,
+            dataIndex: 'uploadedBy'
+          },
+          {
+            title: this.$t('operation'),
+            align: 'center',
+            fixed: 'right',
+            width: 180,
+            scopedSlots: { customRender: 'operation' }
+          }
+        ]
+      }
+    },
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      searchQuery() {
+        this.pageNo = 1
+        this.getList()
+      },
+      searchReset() {
+        this.pageNo = 1
+        this.queryParam = {}
+        this.getList()
+      },
+      onSelectChange(value) {
+        this.selectedRowKeys = value
+      },
+      pageOnChange(page) {
+        this.pageNo = page
+        this.getList()
+      },
+      SizeChange(pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.getList()
+      },
+      getList() {
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize,
+          ...this.queryParam
+        }
+        this.loading = true
+        getAction(this.url.list, query).then((res) => {
+          if (res.success) {
+            if (res.result.current > 1 && res.result.records.length == 0) {
+              this.pageNo = res.result.current - 1
+              this.getList()
+              return
+            }
+            this.dataSource = res.result.records || []
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      },
+      uploadMonthlyClick() {
+        this.$refs.managementAddRef.add()
+      },
+      BatchDeleteClick() {
+        if (this.selectedRowKeys.length > 0) {
+          let _this = this
+          this.$confirm({
+            content: _this.$t('ConfirmBatchDeletion'),
+            onOk() {
+              let idList = JSON.parse(JSON.stringify(_this.selectedRowKeys))
+              getAction(_this.url.deleteBatch, { ids: idList.join(',') }).then((res) => {
+                if (res.success) {
+                  _this.$message.success(_this.$t('OperationSuccessful'))
+                  _this.selectedRowKeys = []
+                  _this.getList()
+                } else {
+                  _this.$message.warning(res.message)
+                }
+              })
+            }
+          })
+        } else {
+          this.$message.warning(this.$t('selectLeastOne'))
+        }
+      },
+      managementAddForm() {
+        this.getList()
+      },
+      //撤回
+      withdraw(val) {
+        let item = {}
+        let content = ''
+        if (val.state == 2) {
+          content = this.$t('confirmRelease')
+          item.state = 1
+        } else {
+          item.state = 2
+          content = this.$t('confirmWithdraw')
+        }
+        item.id = val.id
+        let _this = this
+        this.$confirm({
+          content: content,
+          onOk() {
+            postAction(_this.url.urlWithdraw, item).then((res) => {
+              if (res.success) {
+                _this.$message.success(_this.$t('OperationSuccessful'))
+                _this.getList()
+              } else {
+                _this.$message.warning(res.message)
+              }
+            })
+          }
+        })
+      },
+      //删除
+      deleteLib(val) {
+        let _this = this
+        this.$confirm({
+          content: _this.$t('ConfirmDelete'),
+          onOk() {
+            getAction(_this.url.deleteBatch, { ids: val.id }).then((res) => {
+              if (res.success) {
+                _this.$message.success(_this.$t('OperationSuccessful'))
+                _this.getList()
+              } else {
+                _this.$message.warning(res.message)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+<style>
+  .RegulationMonthly .ant-card-body {
+    padding: 10px 0 0 0 !important;
+  }
+</style>
+<style scoped>
+  @import '~@assets/less/common.less';
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 20%;
+    min-width: 110px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 70%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
+
+  .text-operation {
+    margin-right: 8px;
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/regulationReport/components/modules/managementAdd.vue b/jero-web/src/views/businessSupport/regulationReport/components/modules/managementAdd.vue
new file mode 100644
index 000000000..8f8d68927
--- /dev/null
+++ b/jero-web/src/views/businessSupport/regulationReport/components/modules/managementAdd.vue
@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <a-drawer
+      :title="$t('uploadMonthly')"
+      :maskClosable="false"
+      :width="600"
+      placement="right"
+      :closable="true"
+      @close="handleCancel"
+      :visible="visible"
+      style="height: 100%;overflow: auto;padding-bottom: 53px;">
+      <a-spin :spinning="confirmLoading">
+        <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+          <a-row :gutter="24">
+            <a-col :span="24">
+              <div class="box-title-text-add">
+                <div class="title-text-add">
+                  <span class="Required">*</span>
+                  <span class="title-text-text"
+                        :title="$t('monthlyReportRegulations')">{{$t('monthlyReportRegulations')}}</span>
+                </div>
+                <a-form-model-item class="itemModel" :prop="'RegulationMonthlyName'">
+                  <a-button type="primary" class="button-text"
+                            @click="clickButtonToUpload('RegulationMonthlyName')">
+                    {{ (formInline['RegulationMonthlyName'] === 'null' || formInline['RegulationMonthlyName'] === '' ||
+                    formInline['RegulationMonthlyName'] == null) ? $t('clickUpload') : $t('viewUploadedFiles')
+                    }}
+                  </a-button>
+                </a-form-model-item>
+              </div>
+            </a-col>
+            <a-col :span="24">
+              <div class="box-title-text-add">
+                <div class="title-text-add">
+                  <span class="Required">*</span>
+                  <span class="title-text-text" :title="$t('monthlyLanguage')">{{$t('monthlyLanguage')}}</span>
+                </div>
+                <a-form-model-item class="itemModel" prop="useExplain">
+                  <a-textarea
+                    :placeholder="$t('PleaseEnter')+$t('instructionForUse')"
+                    v-model.trim="formInline.useExplain" :rows="4"/>
+                </a-form-model-item>
+              </div>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </a-spin>
+      <div class="drawer-bootom-button">
+        <a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
+        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
+      </div>
+    </a-drawer>
+    <uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"></uploadFile>
+  </div>
+</template>
+
+<script>
+  import uploadFile from '@/components/uploadFile/file'
+  import { getAction, postAction } from '@/api/manage'
+
+  export default {
+    name: 'managementAdd',
+    components: {
+      uploadFile
+    },
+    data() {
+      return {
+        rules: {
+          name: [
+            {
+              required: true,
+              message: this.$t('VirtualListName') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 100,
+              message: this.$t('VirtualListName') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ],
+          useExplain: [
+            {
+              required: true,
+              message: this.$t('instructionForUse') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 500,
+              message: this.$t('instructionForUse') + this.$t('cannotExceed') + 500 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ]
+        },
+        visible: false,
+        formInline: {},
+        confirmLoading: false,
+        uploadName: ''
+      }
+    },
+    methods: {
+      handleCancel() {
+        this.visible = false
+      },
+      handleSubmit() {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      add() {
+        this.visible = true
+        this.$nextTick(() => {
+          this.formInline = {}
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      clickButtonToUpload(item) {
+        this.$refs.uploadFile.perentHandleFunc()
+        this.$refs.uploadFile.visible = true
+        this.uploadName = item
+        getAction('sys/common/getFileInfos', { id: this.formInline[item] }).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.formInline[this.uploadName] = attIdList.join(',')
+        this.formInline = { ...this.formInline }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 20%;
+    min-width: 110px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 70%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
+
+  .text-operation {
+    margin-right: 8px;
+  }
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .box-title-text-add {
+    line-height: 1.4;
+    display: flex;
+  }
+
+  .title-text-add {
+    width: 114px;
+    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;
+    margin-top: 3px;
+  }
+
+  .box-input-add {
+    display: inline-block;
+    height: 38px;
+    width: 100%;
+  }
+
+  .itemModel {
+    width: calc(100% - 130px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+
+  .title-text-text {
+    margin-top: 9px;
+  }
+
+  .formAdd {
+    margin-bottom: 40px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    z-index: 100;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .button-text {
+    height: 38px;
+    width: calc(100% - 100px);
+    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/regulationReport/index.vue b/jero-web/src/views/businessSupport/regulationReport/index.vue
new file mode 100644
index 000000000..8c13af823
--- /dev/null
+++ b/jero-web/src/views/businessSupport/regulationReport/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="box">
+    <a-tabs :model="activeTab" @change="callback">
+      <a-tab-pane :key="$t('RegulationMonthlyManagement')" :tab="$t('RegulationMonthlyManagement')">
+        <RegulationMonthlyManagement v-if="activeTab == $t('RegulationMonthlyManagement')"/>
+      </a-tab-pane>
+      <a-tab-pane :key="$t('RegulationMonthlyFill')" :tab="$t('RegulationMonthlyFill')">
+        <RegulationMonthlyFill v-if="activeTab == $t('RegulationMonthlyFill')"/>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+  import RegulationMonthlyFill from './components/RegulationMonthlyFill'
+  import RegulationMonthlyManagement from './components/RegulationMonthlyManagement'
+
+  export default {
+    name: 'index',
+    components: {
+      RegulationMonthlyFill,
+      RegulationMonthlyManagement
+    },
+    data() {
+      return {
+        activeTab: this.$t('RegulationMonthlyManagement')
+      }
+    },
+    methods: {
+      callback(tab) {
+        this.activeTab = tab
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .box {
+    padding: 0 24px 24px 24px;
+    box-sizing: border-box;
+  }
+</style>
\ No newline at end of file