.

2019-11-21 13:05:43 +08:00
parent 27c678ce50
commit 7b824eccec
43 changed files with 1993 additions and 0 deletions
--- a/MergeTableCell/App.vue
+++ b/MergeTableCell/App.vue
@@ -0,0 +1,87 @@
+<template>
+  <div id="app">
+    <el-table
+      :data="data"
+      border 
+      fit 
+      stripe
+      :span-method="cellMerge"
+      highlight-current-row 
+      size="small"
+      style="width: 100%;">
+      <el-table-column prop="ruleId_1" label="指标编码" align="center" width="100"></el-table-column>
+      <el-table-column prop="checkRange" label="检查范围" align="center" width="100"></el-table-column>
+      <el-table-column prop="ruleId_2" label="指标编码" align="center" width="100"></el-table-column>
+      <el-table-column prop="checkContent" label="检查内容" align="center" width="100"></el-table-column>
+      <el-table-column prop="ruleId_3" label="指标编码" align="center" width="120"></el-table-column>
+      <el-table-column prop="checkItem" label="检查项" align="center" width="300"></el-table-column>
+      <el-table-column prop="ruleId_4" label="指标编码" align="center" width="200"></el-table-column>
+      <el-table-column prop="checkPoint" label="检查要点" align="left"  header-align="center"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+import data from './data'
+
+Vue.use(Element)
+export default {
+  name: 'app',
+  data () {
+    return {
+      data:data,
+      spanArr: [],//二维数组，用于存放单元格合并规则
+      position: 0,//用于存储相同项的开始index
+    }
+  },
+  created() {
+    this.rowspan(0,'ruleId_1');
+    this.rowspan(1,'checkRange');
+    this.rowspan(2,'ruleId_2');
+    this.rowspan(3,'checkContent');
+    this.rowspan(4,'ruleId_3');
+    this.rowspan(5,'checkItem');
+    this.rowspan(6,'ruleId_4');
+    this.rowspan(7,'checkPoint');
+  },
+  methods:{
+    rowspan(idx, prop) {
+      this.spanArr[idx] = [];
+      this.position = 0; 
+      this.data.forEach((item,index) => {
+        if( index === 0){
+          this.spanArr[idx].push(1);
+          this.position = 0;
+        }else{
+          if(this.data[index][prop] === this.data[index-1][prop] ){
+            this.spanArr[idx][this.position] += 1;//有相同项
+            this.spanArr[idx].push(0); // 名称相同后往数组里面加一项0
+          }else{
+            this.spanArr[idx].push(1);//同列的前后两行单元格不相同
+            this.position = index;
+          }
+        }
+      })
+    },
+    //表格单元格合并
+    cellMerge({ row, column, rowIndex, columnIndex }) {
+      for(let i = 0; i<this.spanArr.length; i++) {
+        if(columnIndex === i){
+          const _row = this.spanArr[i][rowIndex];
+          const _col = _row>0 ? 1 : 0;
+          // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
--- a/MergeTableCell/README.md
+++ b/MergeTableCell/README.md
@@ -0,0 +1,13 @@
+# 1.运行demo
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
--- a/MergeTableCell/data.js
+++ b/MergeTableCell/data.js
@@ -0,0 +1,22 @@
+let data = [
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100501101',checkItem:'检查网络安全协调领导机构运行情况',    ruleId_4:'u30100501101101',checkPoint:'等级保护联络员是否参加公安网安部门组织召开的等级保护联络员会议？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100501101',checkItem:'检查网络安全协调领导机构运行情况',    ruleId_4:'u30100501101102',checkPoint:'联络员是否以书面形式向主管领导汇报公安网安部门在联络员会议上通报的内容？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502102',checkItem:'检查网络安全责任部门运行情况',        ruleId_4:'u30100501102101',checkPoint:'网络安全责任部门是否对本单位的网络安全工作下发文件或召开会议等方式进行业务指导？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502102',checkItem:'检查网络安全责任部门运行情况',        ruleId_4:'u30100501102102',checkPoint:'网络安全责任部门是否对本单位的网络安全工作听取汇报或现场检查等方式进行监督检查？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502103',checkItem:'检查网络安全工作文件执行情况',        ruleId_4:'u30100501103101',checkPoint:'网络安全责任部门是否对本单位的网络安全工作文件或方案明确网络安全工作所需要执行的内容？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502103',checkItem:'检查网络安全工作文件执行情况',        ruleId_4:'u30100501103102',checkPoint:'是否有网络安全工作文件或方案的执行情况的总结或汇报？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502104',checkItem:'检查网络安全工作会议、业务培训情况',   ruleId_4:'u30100501104101',checkPoint:'是否有组织人员培训的工作会议记录或文件？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502104',checkItem:'检查网络安全工作会议、业务培训情况',   ruleId_4:'u30100501104102',checkPoint:'受训人员的业务水平是否明显提高？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502105',checkItem:'检查主要领导对网络安全工作的重视情况', ruleId_4:'u30100501105101',checkPoint:'是否将网络安全工作的执行情况纳入到年度考核指标？' },
+  { ruleId_1:'u301', checkRange: '网络安全工作基本情况', ruleId_2: 'u30100501', checkContent: '网络安全工作的组织部署', ruleId_3: 'u30100502105', checkItem: '检查主要领导对网络安全工作的重视情况', ruleId_4: 'u30100501105102', checkPoint: '开展网络安全工作的经费是否纳入年度预算？' },
+  
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502101',checkItem:'检查网络安全领导机构执行情况', ruleId_4:'u30100502101101',checkPoint:'是否有网络安全工作的领导责任制？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502101',checkItem:'检查网络安全领导机构执行情况', ruleId_4:'u30100502101102',checkPoint:'对于网络安全领导是否有网络安全工作的考核指标？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502102',checkItem:'检查网络安全职能部门的执行情况', ruleId_4:'u30100502102101',checkPoint:'是否对本单位的网络安全工作发布文件或召开会议等方式进行业务指导？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502102',checkItem:'检查网络安全职能部门的执行情况', ruleId_4:'u30100502102102',checkPoint:'是否对本单位的网络安全工作听取汇报或现场检查等方式进行监督？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502103',checkItem:'检查网络安全责任追究制度执行情况', ruleId_4:'u30100502103101',checkPoint:'是否对所有的网络安全事故/事件有详细记录？' },
+  { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502103',checkItem:'检查网络安全责任追究制度执行情况', ruleId_4:'u30100502103102',checkPoint:'是否按照网络安全责任追究制度进行处理？' },
+
+]
+
+export default data
--- a/MergeTableCell/index.html
+++ b/MergeTableCell/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>mergeTableCell</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>
--- a/MergeTableCell/main.js
+++ b/MergeTableCell/main.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App),
+})
--- a/MergeTableCell/package.json
+++ b/MergeTableCell/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "mergeTableCell",
+  "description": "mergeTableCell",
+  "version": "1.0.0",
+  "author": "NLRX",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "vue": "^2.5.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-component": "^1.1.1",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-3": "^6.24.1",
+	"element-ui": "^2.4.10",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
+    "file-loader": "^1.1.4",
+    "vue-loader": "^13.0.5",
+    "vue-template-compiler": "^2.4.4",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1"
+  }
+}
--- a/MergeTableCell/webpack.config.js
+++ b/MergeTableCell/webpack.config.js
@@ -0,0 +1,82 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: './main.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader'
+        ],
+      },      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
+        loader: 'file-loader'
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    },
+    extensions: ['*', '.js', '.vue', '.json']
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true
+  },
+  performance: {
+    hints: false
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ])
+}