开发法规月报页面

jero-web/src/common/lang/en-us.js

@@ -962,6 +962,17 @@ module.exports = {
   releaseStatus:'Release status',
   uploadedBy:'Uploaded by',
   uploadMonthly:'Upload monthly',
+  chapterContents:'Chapter contents',
+  chineseTitle:'Chinese title',
+  englishTitle:'English title',
+  regulatoryContact:'Regulatory contact',
+  exportStatus:'Export status',
+  monthlyTitleTemplate:'Monthly title template',
+  monthlyIntegrationAndExport:'Monthly integration and export',
+  addContent:'Add content',
+  monthSelection:'Month selection',
+  moveUp:'Move up',
+  moveDown:'Move down',
 //  上报库
   Enable: 'Enable',
   Latestupdatetime: 'Latest update time',

jero-web/src/common/lang/zh-cn.js

@@ -727,7 +727,7 @@ module.exports = {
   // 认证状态
   timeoperation: '时，才有权限操作此按钮。',
   NiOnumberis: 'NIO编号为',
-  NoOperationPermissionForthisbutton:'没有此按钮的操作权限',
+  NoOperationPermissionForthisbutton: '没有此按钮的操作权限',
   Attentionfreeze: '注：冻结后该冻结配置内容不可进行编辑。',
   Filledperson: '工程接口人没有填写,请填写完工程接口人再进行下发收集。',
   Datastatusis: '数据状态为',
@@ -956,17 +956,28 @@ module.exports = {
   documentLibraryDetails: '文档库详情',
   question: '催办',
   ConfirmQuestion: '确认催办？',
-  OnlyOrTaskconfirmationOut:'只有清单确认状态或任务确认状态为待确认时才可以进行催办',
-  disableInput:'禁止输入',
+  OnlyOrTaskconfirmationOut: '只有清单确认状态或任务确认状态为待确认时才可以进行催办',
+  disableInput: '禁止输入',
   or: '或',
-  warningTime:'预警时间',
-  RegulationMonthlyManagement:'法规月报管理',
-  RegulationMonthlyFill:'法规月报填写',
-  RegulationMonthlyName:'法规月报名称',
-  monthlyLanguage:'月报语种',
-  releaseStatus:'发布状态',
-  uploadedBy:'上传人',
-  uploadMonthly:'上传月报',
+  warningTime: '预警时间',
+  RegulationMonthlyManagement: '法规月报管理',
+  RegulationMonthlyFill: '法规月报填写',
+  RegulationMonthlyName: '法规月报名称',
+  monthlyLanguage: '月报语种',
+  releaseStatus: '发布状态',
+  uploadedBy: '上传人',
+  uploadMonthly: '上传月报',
+  chapterContents: '章节目录',
+  chineseTitle: '中文标题',
+  englishTitle: '英文标题',
+  regulatoryContact:'法规联系人',
+  exportStatus:'导出状态',
+  monthlyTitleTemplate:'月报标题模板',
+  monthlyIntegrationAndExport:'月报整合导出',
+  addContent:'新增内容',
+  monthSelection:'月份选择',
+  moveUp:'上移',
+  moveDown:'下移',
 //  上报库
   Enable: '启用',
   Latestupdatetime: '最新更新时间',

jero-web/src/views/businessSupport/regulationReport/components/RegulationMonthlyFill.vue

@@ -5,11 +5,12 @@
         <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 class="title-text" :title="$t('monthSelection')">
+                <span>{{$t('monthSelection')}}</span>
               </div>
-              <j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('RegulationMonthlyName')"
-                       v-model="queryParam.RegulationMonthlyName"></j-input>
+              <a-month-picker class="box-input"
+                              v-model="queryParam.monthSelection"
+                              :placeholder="$t('monthSelection')"/>
             </div>
           </a-col>
           <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
@@ -22,9 +23,17 @@
       </a-form>
     </div>
     <div class="table-operator">
-      <div @click="uploadMonthlyClick" class="operator-text">
-        <a-icon type="cloud-upload"/>
-        {{$t('uploadMonthly')}}
+      <div @click="monthlyTitleTemplateClick" class="operator-text">
+        <a-icon type="apartment"/>
+        {{$t('monthlyTitleTemplate')}}
+      </div>
+      <div @click="monthlyIntegrationAndExportClick" class="operator-text">
+        <a-icon type="import"/>
+        {{$t('monthlyIntegrationAndExport')}}
+      </div>
+      <div @click="addContentClick" class="operator-text">
+        <a-icon type="plus"/>
+        {{$t('addContent')}}
       </div>
       <div @click="BatchDeleteClick" class="operator-text">
         <a-icon type="delete"/>
@@ -43,6 +52,11 @@
         :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         :columns="columns"
       >
+         <span slot="operation" slot-scope="text,record">
+           <a class="text-operation" @click="viewClick(record)">{{$t('view')}}</a>
+           <a class="text-operation" @click="edit(record)">{{$t('edit')}}</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
@@ -56,16 +70,25 @@
         />
       </div>
     </div>
+    <fillTable ref="fillTableRef"/>
   </a-card>
 </template>
 
 <script>
+  import { getAction, postAction, downloadFile } from '@/api/manage'
+  import fillTable from './modules/fillTable'
+
   export default {
     name: 'RegulationMonthlyFill',
+    components: {
+      fillTable
+    },
     data() {
       return {
         //url传参严格按照当前命名
-        url: {},
+        url: {
+          deleteBatch: ''
+        },
         loading: false,
         dataSource: [],
         selectedRowKeys: [],
@@ -75,37 +98,44 @@
         queryParam: {},
         columns: [
           {
-            title: this.$t('RegulationMonthlyName'),
+            title: this.$t('chapterContents'),
             align: 'center',
-            dataIndex: 'RegulationMonthlyName',
+            dataIndex: 'chapterContents',
             width: 170
           },
           {
-            title: this.$t('monthlyLanguage'),
+            title: this.$t('chineseTitle'),
             align: 'center',
-            dataIndex: 'monthlyLanguage',
+            dataIndex: 'chineseTitle',
             width: 170
           },
           {
-            title: this.$t('releaseStatus'),
-            align: 'center',
-            width: 140,
-            ellipsis: true,
-            dataIndex: 'releaseStatus'
-          },
-          {
-            title: this.$t('uploadTime'),
+            title: this.$t('englishTitle'),
             align: 'center',
             width: 170,
             ellipsis: true,
-            dataIndex: 'uploadTime'
+            dataIndex: 'englishTitle'
           },
           {
-            title: this.$t('uploadedBy'),
+            title: this.$t('regulatoryContact'),
+            align: 'center',
+            width: 170,
+            ellipsis: true,
+            dataIndex: 'regulatoryContact'
+          },
+          {
+            title: this.$t('completedBy'),
             align: 'center',
             ellipsis: true,
             width: 170,
-            dataIndex: 'uploadedBy'
+            dataIndex: 'completedBy'
+          },
+          {
+            title: this.$t('exportStatus'),
+            align: 'center',
+            ellipsis: true,
+            width: 170,
+            dataIndex: 'exportStatus'
           },
           {
             title: this.$t('operation'),
@@ -122,10 +152,13 @@
     },
     methods: {
       searchQuery() {
-
+        this.pageNo = 1
+        this.getList()
       },
       searchReset() {
-
+        this.queryParam = {}
+        this.pageNo = 1
+        this.getList()
       },
       onSelectChange(value) {
         this.selectedRowKeys = value
@@ -133,26 +166,71 @@
       handleCompare() {
 
       },
-      handleExport() {
-
+      pageOnChange(page) {
+        this.pageNo = page
+        this.getList()
       },
-      clearSelected() {
-
-      },
-      pageOnChange() {
-
-      },
-      SizeChange() {
-
+      SizeChange(pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.getList()
       },
       getList() {
 
       },
-      uploadMonthlyClick() {
+      monthlyTitleTemplateClick() {
+        this.$refs.fillTableRef.getData()
+      },
+      monthlyIntegrationAndExportClick() {
 
       },
-      BatchDeleteClick() {
+      addContentClick() {
 
+      },
+      viewClick(row) {
+
+      },
+      edit(row) {
+
+      },
+      //删除
+      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)
+              }
+            })
+          }
+        })
+      },
+      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'))
+        }
       }
     }
   }
@@ -162,6 +240,10 @@
   .RegulationMonthly .ant-card-body {
     padding: 10px 0 0 0 !important;
   }
+
+  .box-input .ant-calendar-picker-input {
+    height: 38px;
+  }
 </style>
 <style scoped>
   @import '~@assets/less/common.less';

jero-web/src/views/businessSupport/regulationReport/components/modules/fillTable.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <a-modal
+      :title="$t('monthlyTitleTemplate')"
+      :width="1200"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @cancel="visible = false"
+    >
+      <template slot="footer">
+        <a-button key="back" @click="visible = false">
+          {{$t('cancel')}}
+        </a-button>
+      </template>
+      <div class="table-operator-right">
+        <div @click="newlyAddedClick" class="operator-text">
+          <a-icon type="plus"/>
+          {{$t('newlyAdded')}}
+        </div>
+      </div>
+      <a-table
+        ref="table"
+        size="middle"
+        :loading="loading"
+        :pagination="false"
+        :scroll="{x: '100%'}"
+        :data-source="dataSource"
+        :columns="columns"
+      >
+        <span slot="operation" slot-scope="text,record">
+           <a class="text-operation" @click="moveUpClick(record)">{{$t('moveUp')}}</a>
+           <a class="text-operation" @click="moveDownClick(record)">{{$t('moveDown')}}</a>
+           <a class="text-operation" @click="edit(record)">{{$t('edit')}}</a>
+           <a class="text-operation" @click="deleteLib(record)">{{$t('deleteLib')}}</a>
+        </span>
+      </a-table>
+      <div class="page" v-if="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="onChange"
+          @showSizeChange="SizeChange"
+        />
+      </div>
+    </a-modal>
+    <fillTableAdd ref="fillTableAddRef" @fillTableAddForm="fillTableAddForm"/>
+  </div>
+</template>
+
+<script>
+  import fillTableAdd from './fillTableAdd'
+
+  export default {
+    name: 'fillTable',
+    components: {
+      fillTableAdd
+    },
+    data() {
+      return {
+        visible: false,
+        confirmLoading: false,
+        loading: false,
+        dataSource: [],
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        columns: [
+          {
+            title: this.$t('number'),
+            align: 'center',
+            width: 70,
+            customRender: function(t, r, index) {
+              return parseInt(index) + 1
+            }
+          },
+          {
+            title: this.$t('chineseTitle'),
+            align: 'center',
+            dataIndex: 'chineseTitle',
+            width: 210
+          },
+          {
+            title: this.$t('englishTitle'),
+            align: 'center',
+            width: 210,
+            ellipsis: true,
+            dataIndex: 'englishTitle'
+          },
+          {
+            title: this.$t('operation'),
+            align: 'center',
+            fixed: 'right',
+            width: 180,
+            scopedSlots: { customRender: 'operation' }
+          }
+        ]
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      edit() {
+
+      },
+      getData() {
+        this.visible = true
+        this.getList()
+      },
+      onChange(page, pageSize) {
+        this.pageNo = page
+        this.getList()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.getList()
+      },
+      fillTableAddForm() {
+        this.pageNo = 1
+        this.getList()
+      },
+      getList() {
+
+      },
+      moveUpClick() {
+
+      },
+      moveDownClick() {
+
+      },
+      deleteLib() {
+
+      },
+      newlyAddedClick() {
+        this.$refs.fillTableAddRef.add()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .table-operator-right {
+    text-align: right;
+    margin-bottom: 16px;
+  }
+</style>

jero-web/src/views/businessSupport/regulationReport/components/modules/fillTableAdd.vue

@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <a-modal
+      :title="title"
+      :width="800"
+      :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="12">
+            <div class="box-title-text">
+              <div class="title-text">
+              <span class="title-text-text"
+                    :title="$t('chineseTitle')">{{$t('chineseTitle')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="chineseTitle">
+                <a-input class="box-input"
+                         v-model="formInline.chineseTitle"
+                         :placeholder="$t('PleaseEnter')+$t('chineseTitle')"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" :title="$t('englishTitle')">{{$t('englishTitle')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="englishTitle">
+                <a-input class="box-input"
+                         v-model="formInline.englishTitle"
+                         :placeholder="$t('PleaseEnter')+$t('englishTitle')"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+              <span class="title-text-text"
+                    :title="$t('ParentName')">{{$t('ParentName')}}</span>
+              </div>
+              <a-form-model-item class="itemModel">
+                <a-input class="box-input"
+                         v-model="formInline.ParentName"
+                         :placeholder="$t('PleaseEnter')+$t('ParentName')"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'fillTableAdd',
+    data() {
+      return {
+        visible: false,
+        confirmLoading: false,
+        formInline: {},
+        rules: {},
+        title: ''
+      }
+    },
+    mounted() {
+
+    },
+    methods: {
+      add() {
+        this.title = this.$t('newlyAdded')
+        this.visible = true
+        this.$nextTick(() => {
+          this.formInline = {}
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      edit(row) {
+        this.title = this.$t('edit')
+        this.visible = true
+        this.$nextTick(() => {
+          this.formInline = row
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      handleOk() {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      handleCancel() {
+        this.visible = false
+      }
+    }
+  }
+</script>
+
+<style>
+  .formAdd .ant-form-item-label {
+    width: 130px;
+  }
+
+  .formAdd .ant-form-item-control-wrapper {
+    display: inline-block;
+    width: 100%;
+  }
+
+  /*.formAdd .ant-form-item {*/
+  /*  margin-bottom: 20px;*/
+  /*}*/
+
+  .itemModel .ant-form-item-control-wrapper {
+    width: 100%;
+  }
+
+  .box-input .ant-select-selection--single {
+    height: 38px;
+  }
+
+  .box-input .ant-select-selection--multiple {
+    height: 38px;
+  }
+
+  .box-input .ant-select-selection__rendered {
+    line-height: 38px;
+    height: 38px;
+  }
+
+  .box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
+    margin-top: 6px;
+  }
+
+  .box-input .ant-calendar-picker {
+    line-height: 38px;
+    height: 38px;
+  }
+
+  .box-input .ant-calendar-picker-input {
+    height: 38px;
+  }
+
+  .box-input .ant-input-number-input-wrap {
+    line-height: 38px;
+    height: 38px;
+  }
+
+  .box-input .ant-calendar-picker-input {
+    padding: 4px 30px 4px 11px;
+  }
+</style>
+<style scoped>
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+  }
+
+  .title-text {
+    width:100px;
+    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;
+  }
+</style>