初步完成tab2静态页面

houtai/package-lock.json

@@ -1061,11 +1061,19 @@
       "version": "7.15.4",
       "resolved": "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.15.4.tgz?cache=0&sync_timestamp=1630618785994&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.15.4.tgz",
       "integrity": "sha1-/RfRa/34eObdAtGXU6OfqKjZyEo=",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.16.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.5.tgz",
+      "integrity": "sha512-F1pMwvTiUNSAM8mc45kccMQxj31x3y3P+tA/X8hKNWp3/hUsxdGxZ3D3H8JIkxtfA8qGkaBTKvcmvStaYseAFw==",
+      "requires": {
+        "core-js-pure": "^3.19.0",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/template": {
       "version": "7.15.4",
       "resolved": "https://registry.nlark.com/@babel/template/download/@babel/template-7.15.4.tgz?cache=0&sync_timestamp=1630618922172&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Ftemplate%2Fdownload%2F%40babel%2Ftemplate-7.15.4.tgz",
@@ -3982,6 +3990,11 @@
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.20.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.20.1.tgz",
+      "integrity": "sha512-yeNNr3L9cEBwNy6vhhIJ0nko7fE7uFO6PgawcacGt2VWep4WqQx0RiqlkgSP7kqUMC1IKdfO9qPeWXcUheHLVQ=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.nlark.com/core-util-is/download/core-util-is-1.0.2.tgz",
@@ -10349,8 +10362,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz?cache=0&sync_timestamp=1626993001371&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.9.tgz",
-      "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=",
-      "dev": true
+      "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -12496,6 +12508,23 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "wangeditor": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-4.7.11.tgz",
+      "integrity": "sha512-z6xEHTSj4YgqvQkHWh9/V/Md7hjEKchXquwvtxvWhwlMS/wBFprCg7qgE4omzuSBeivkZZGTJP08pmdHzOwCUQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1621437868630&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",

houtai/package.json

@@ -15,7 +15,8 @@
     "js-base64": "^3.7.2",
     "moment": "^2.29.1",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "wangeditor": "^4.7.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

houtai/src/assets/css/base.css

@@ -153,4 +153,31 @@ input[type="number"] {
 }
 .el-pagination button:hover{
   color: #b9412e;
-}
+}
+.w-e-menu {
+	z-index: 2 !important;
+}
+.w-e-text-container {
+	z-index: 1 !important;
+}
+.w-e-toolbar {
+	z-index: 10 !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(19) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(13) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(14) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(16) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(20) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(21) {
+	display: none !important;
+}

houtai/src/router/index.js

@@ -45,16 +45,16 @@ const routes = [
         component: () => import('../views/tab2/index.vue')
       },
       {
-        path: 'tab2Edit1',
-        name: 'tab2Edit1',
+        path: 'tab2Add',
+        name: 'tab2Add',
         meta: { myInd: 2 },
-        component: () => import('../views/tab2/edit1.vue')
+        component: () => import('../views/tab2/tab2Add.vue')
       },
       {
-        path: 'tab2Edit2',
-        name: 'tab2Edit2',
+        path: 'tab2Look',
+        name: 'tab2Look',
         meta: { myInd: 2 },
-        component: () => import('../views/tab2/edit2.vue')
+        component: () => import('../views/tab2/tab2Look.vue')
       },
       {
         path: 'tab3',

houtai/src/views/layout/index.vue

@@ -44,7 +44,7 @@
         </ul>
       </div>
       <!-- 右侧内容 -->
-      <div class="right">
+      <div class="right" @click="cut=false">
         <Router-view />
       </div>
     </div>

houtai/src/views/tab1/index.vue

@@ -100,7 +100,6 @@
               <template #default="{ row }">
                 <el-button
                   type="text"
-                  v-if="row.name3"
                   @click="lookGood(row.id)"
                   >查看</el-button
                 >
@@ -151,6 +150,16 @@ export default {
       },
       tableData: [
         { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
         { name1: '123', name2: '123', name3: false }
       ]
     }
@@ -308,6 +317,13 @@ export default {
       }
     }
   }
+  .table{
+    max-width: 1370px;
+  }
+  /deep/.el-table__body-wrapper{
+    max-height: 485px;
+    overflow-y: auto;
+  }
       .paging {
       position: absolute;
       bottom: 15px;

houtai/src/views/tab2/edit1.vue

@@ -1,229 +0,0 @@
-<!--  -->
-<template>
-  <div class="tab2Edit1">
-    <div class="top">{{myData.type}}</div>
-    <div class="from">
-      <el-form
-        :model="ruleForm"
-        :rules="rules"
-        ref="ruleForm"
-        label-width="130px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="用电总量：" prop="1">
-          <el-input
-            v-model.number="ruleForm[1]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="今日用电总量：" prop="2">
-          <el-input
-            v-model.number="ruleForm[2]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="同比节能：" prop="3">
-          <el-input
-            v-model.number="ruleForm[3]"
-            type="number"
-          ></el-input>
-          <span class="unit"> % </span>
-        </el-form-item>
-        <el-form-item label="更新时间：">
-          <i class="biaoshi"></i>
-          <el-date-picker
-            v-model="time"
-            type="datetime"
-            placeholder="选择日期时间"
-            align="right"
-            :picker-options="pickerOptions"
-          >
-          </el-date-picker>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!-- 下面的按钮 -->
-    <div class="btn">
-      <el-button @click="$router.push('/layout/tab2')">返 回</el-button>
-      <el-button type="primary" @click="btnOk">提 交</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { energySave } from '@/apis/tab2'
-export default {
-  name: 'tab2Edit1',
-  components: {},
-  data () {
-    // 这里存放数据
-    const validatePass = (rule, value, callback) => {
-      if (value > 99999999.99) {
-        callback(new Error('不能超过99999999.99'))
-      } else {
-        callback()
-      }
-    }
-    const validatePass2 = (rule, value, callback) => {
-      if (value > 9999999999.99) {
-        callback(new Error('不能超过9999999999.99'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      pickerOptions: {
-        shortcuts: [
-          {
-            text: '今天',
-            onClick (picker) {
-              picker.$emit('pick', new Date())
-            }
-          },
-          {
-            text: '昨天',
-            onClick (picker) {
-              const date = new Date()
-              date.setTime(date.getTime() - 3600 * 1000 * 24)
-              picker.$emit('pick', date)
-            }
-          },
-          {
-            text: '一周前',
-            onClick (picker) {
-              const date = new Date()
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-              picker.$emit('pick', date)
-            }
-          }
-        ]
-      },
-      disTime: '',
-      time: '',
-      myData: {},
-      ruleForm: {
-        1: '', // 用电总量
-        2: '', // 今日用电总量
-        3: '' // 同比节能
-      },
-      rules: {
-        1: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass2, trigger: 'blur' }
-        ],
-        2: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        3: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {
-    time (val) {
-      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
-      this.disTime = temp
-    }
-  },
-  // 方法集合
-  methods: {
-    // 点击提交
-    async btnOk () {
-      if (this.time === null) return this.$message.warning('时间不能为空!')
-      try {
-        await this.$refs.ruleForm.validate()
-        const obj = {}
-        obj.type = 'detail'
-        obj.id = Number(this.myData.id)
-        obj.data = JSON.stringify(this.ruleForm)
-        obj.userUpdateTime = this.disTime
-        const res = await energySave(obj)
-        if (res.code === 0) {
-          this.$message.success('修改成功')
-          this.$router.push('/layout/tab2')
-        }
-        // console.log(999, res)
-        // console.log(777777777777, obj)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    getCurrentTime () {
-      // 获取当前时间并打印
-      var _this = this
-      const yy = new Date().getFullYear()
-      const mm = new Date().getMonth() + 1
-      const dd = new Date().getDate()
-      const hh = new Date().getHours()
-      const mf =
-        new Date().getMinutes() < 10
-          ? '0' + new Date().getMinutes()
-          : new Date().getMinutes()
-      const ss =
-        new Date().getSeconds() < 10
-          ? '0' + new Date().getSeconds()
-          : new Date().getSeconds()
-      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
-      this.time = _this.gettime
-      // console.log(_this.gettime)
-    }
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  async created () {
-    this.myData = this.$route.query
-    // console.log(998, this.myData)
-    for (const k in this.myData.data) {
-      this.ruleForm[k] = this.myData.data[k]
-    }
-    this.getCurrentTime()
-    // console.log(999, this.$route.query)
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab2Edit1 {
-  height: 100%;
-  position: relative;
-  .top {
-    height: 40px;
-    line-height: 40px;
-    background-color: #fbfbfb;
-    padding-left: 20px;
-  }
-  .from {
-    margin-top: 30px;
-    width: 50%;
-    .unit {
-      position: absolute;
-      right: -40px;
-      top: 0;
-    }
-  }
-  .btn {
-    display: flex;
-    justify-content: space-between;
-    width: 200px;
-    position: absolute;
-    left: 50%;
-    bottom: 30px;
-    transform: translateX(-50%);
-  }
-}
-</style>

houtai/src/views/tab2/edit2.vue

@@ -1,340 +0,0 @@
-<!--  -->
-<template>
-  <div class="tab2Edit2">
-    <div class="top">{{myData.type}}</div>
-    <div class="from">
-      <el-form
-        :model="ruleForm"
-        :rules="rules"
-        ref="ruleForm"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="1月：" prop="1">
-          <el-input
-            v-model.number="ruleForm[1]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="2月：" prop="2">
-          <el-input
-            v-model.number="ruleForm[2]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="3月：" prop="3">
-          <el-input
-            v-model.number="ruleForm[3]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="4月：" prop="4">
-          <el-input
-            v-model.number="ruleForm[4]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="5月：" prop="5">
-          <el-input
-            v-model.number="ruleForm[5]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="6月：" prop="6">
-          <el-input
-            v-model.number="ruleForm[6]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="7月：" prop="7">
-          <el-input
-            v-model.number="ruleForm[7]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="8月：" prop="8">
-          <el-input
-            v-model.number="ruleForm[8]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="9月：" prop="9">
-          <el-input
-            v-model.number="ruleForm[9]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="10月：" prop="10">
-          <el-input
-            v-model.number="ruleForm[10]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="11月：" prop="11">
-          <el-input
-            v-model.number="ruleForm[11]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="12月：" prop="12">
-          <el-input
-            v-model.number="ruleForm[12]"
-            type="number"
-          ></el-input>
-          <span class="unit">kwh</span>
-        </el-form-item>
-        <el-form-item label="更新时间：">
-          <i class="biaoshi"></i>
-          <el-date-picker
-            v-model="time"
-            type="datetime"
-            placeholder="选择日期时间"
-            align="right"
-            :picker-options="pickerOptions"
-          >
-          </el-date-picker>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!-- 下面的按钮 -->
-    <div class="btn">
-      <el-button @click="$router.push('/layout/tab2')">返 回</el-button>
-      <el-button type="primary" @click="btnOk">提 交</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { energySave } from '@/apis/tab2'
-export default {
-  name: 'tab2Edit2',
-  components: {},
-  data () {
-    // 这里存放数据
-    const validatePass = (rule, value, callback) => {
-      if (value > 99999999.99) {
-        callback(new Error('不能超过99999999.99'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      pickerOptions: {
-        shortcuts: [
-          {
-            text: '今天',
-            onClick (picker) {
-              picker.$emit('pick', new Date())
-            }
-          },
-          {
-            text: '昨天',
-            onClick (picker) {
-              const date = new Date()
-              date.setTime(date.getTime() - 3600 * 1000 * 24)
-              picker.$emit('pick', date)
-            }
-          },
-          {
-            text: '一周前',
-            onClick (picker) {
-              const date = new Date()
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-              picker.$emit('pick', date)
-            }
-          }
-        ]
-      },
-      disTime: '',
-      time: '',
-      myData: {},
-      ruleForm: {
-        1: '',
-        2: '',
-        3: '',
-        4: '',
-        5: '',
-        6: '',
-        7: '',
-        8: '',
-        9: '',
-        10: '',
-        11: '',
-        12: ''
-      },
-      rules: {
-        1: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        2: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        3: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        4: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        5: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        6: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        7: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        8: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        9: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        10: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        11: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        12: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ]
-      },
-      typeSwitch: {
-        '实时用电监控-当前值': 'current',
-        '实时用电监控-近三年均值': 'yearAvg',
-        '月度节能情况-同比增长': 'monthUp',
-        '月度节能情况-均值': 'monthAvg'
-      }
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {
-    time (val) {
-      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
-      this.disTime = temp
-    }
-  },
-  // 方法集合
-  methods: {
-    // 点击提交
-    async btnOk () {
-      if (this.time === null) return this.$message.warning('时间不能为空!')
-      try {
-        await this.$refs.ruleForm.validate()
-        const obj = {}
-        obj.type = this.typeSwitch[this.myData.type]
-        obj.id = Number(this.myData.id)
-        obj.data = JSON.stringify(this.ruleForm)
-        obj.userUpdateTime = this.disTime
-        const res = await energySave(obj)
-        if (res.code === 0) {
-          this.$message.success('修改成功')
-          this.$router.push('/layout/tab2')
-        }
-        // console.log(999, res)
-        // console.log(777777777777, obj)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    getCurrentTime () {
-      // 获取当前时间并打印
-      var _this = this
-      const yy = new Date().getFullYear()
-      const mm = new Date().getMonth() + 1
-      const dd = new Date().getDate()
-      const hh = new Date().getHours()
-      const mf =
-        new Date().getMinutes() < 10
-          ? '0' + new Date().getMinutes()
-          : new Date().getMinutes()
-      const ss =
-        new Date().getSeconds() < 10
-          ? '0' + new Date().getSeconds()
-          : new Date().getSeconds()
-      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
-      this.time = _this.gettime
-      // console.log(_this.gettime)
-    }
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  async created () {
-    this.myData = this.$route.query
-    // console.log(998, this.myData)
-    for (const k in this.myData.data) {
-      this.ruleForm[k] = this.myData.data[k]
-    }
-    this.getCurrentTime()
-    // console.log(999, this.$route.query)
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab2Edit2 {
-  height: 100%;
-  position: relative;
-  .top {
-    height: 40px;
-    line-height: 40px;
-    background-color: #fbfbfb;
-    padding-left: 20px;
-  }
-  .from {
-    max-height: 600px;
-    overflow-y: auto;
-    margin-top: 30px;
-    .unit {
-      position: absolute;
-      right: -40px;
-      top: 0;
-    }
-    /deep/.el-form-item__content{
-      width: 500px;
-    }
-  }
-  .btn {
-    display: flex;
-    justify-content: space-between;
-    width: 200px;
-    position: absolute;
-    left: 50%;
-    bottom: 30px;
-    transform: translateX(-50%);
-  }
-}
-</style>

houtai/src/views/tab2/index.vue

@@ -1,88 +1,207 @@
 <template>
-<div class='tab2'>
-  <div class="table">
-    <el-table :data="tableData" border style="width: 100%">
-        <el-table-column prop="id" label="序列" width="80"></el-table-column>
-        <el-table-column prop="type" label="栏目类型" width="240"></el-table-column>
-        <el-table-column prop="conten" label="数据字段"></el-table-column>
-        <el-table-column prop="time" label="更新时间" width="200"> </el-table-column>
-        <el-table-column  label="操作" width="120">
-          <template #default='{row}'>
-              <el-button type="text" @click="edit(row)">修 改</el-button>
-          </template>
-        </el-table-column>
-    </el-table>
+  <div class="tab2">
+    <div class="insideTop">
+      学院领导管理
+      <div class="add">
+        <el-button type="primary" @click="$router.push('/layout/tab2Add')">新增领导信息</el-button>
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="classify">全部</div>
+      <div class="search">
+        <span>发布时间：</span>
+        <el-date-picker
+          style="width: 240px"
+          v-model="time"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        >
+        </el-date-picker>
+        <span class="search_k">姓名关键字：</span>
+        <el-input
+          v-model="formData.searchKey"
+          placeholder="请输入"
+          style="width: 240px"
+        ></el-input>
+        <span class="search_k">排序：</span>
+        <el-select
+          v-model="formData.type"
+          placeholder="请选择"
+          style="width: 240px"
+        >
+          <el-option label="发布时间" value="time"></el-option>
+          <el-option label="排序编号" value="number"></el-option>
+        </el-select>
+        <!-- 右侧按钮 -->
+        <div class="search_btn">
+          <el-button type="primary">查 询</el-button>
+          <el-button>重 置</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="序号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="姓名" width="200">
+            <template #default="{ row }">
+              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="任职职位" width="200">
+            <template #default="{ row }">
+              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="封面图片" width="100">
+            <template #default>
+              <img class="table_img" src="../../assets/img/demo.png" alt="" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="name1" label="阅读"> </el-table-column>
+          <el-table-column prop="name1" label="发布人"> </el-table-column>
+          <el-table-column prop="name2" label="发布时间" width="200">
+          </el-table-column>
+          <el-table-column prop="address" label="排序" width="80">
+            <template #default="{ row }">
+              <el-input type="text" v-model="row.name1"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name3" label="是否显示">
+            <template #default="{ row }">
+              <el-switch v-model="row.name3" active-color="#b9412e">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-button type="text" @click="lookGood(row.id)"
+                >查看</el-button
+              >
+              <el-button type="text" v-if="!row.name3">编辑</el-button>
+              <el-button type="text" v-if="!row.name3">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="paging">
+      <el-pagination
+        layout="sizes,prev, pager, next,jumper"
+        :total="total"
+        :current-page="formData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+      >
+      </el-pagination>
+    </div>
   </div>
-</div>
 </template>
 
 <script>
-import { energyList } from '@/apis/tab2'
 export default {
   name: 'tab2',
   components: {},
   data () {
     // 这里存放数据
     return {
-      from: {
+      total: 100,
+      time: '',
+      formData: {
+        startTime: '',
+        endTime: '',
         pageNum: 1,
         pageSize: 9999,
         searchKey: '',
-        type: ''
+        type: 'time'
       },
-      dictionaries: {
-        detail: '能耗详情',
-        current: '实时用电监控-当前值',
-        yearAvg: '实时用电监控-近三年均值',
-        monthUp: '月度节能情况-同比增长',
-        monthAvg: '月度节能情况-均值'
-      },
-      tableData: []
+      tableData: [
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false }
+      ]
     }
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    time (val) {
+      this.handleSelect(val)
+    }
+  },
   // 方法集合
   methods: {
-    // 封装获取列表方法
-    async energyList (data) {
-      const res = await energyList(data)
-      // console.log(999, res)
-      res.data.forEach(v => {
-        const temp = {}
-        temp.id = v.id
-        temp.type = this.dictionaries[v.type]
-        temp.data = JSON.parse(v.data)
-        temp.time = v.userUpdateTime
-        if (v.id === 1) {
-          temp.conten = `用电总量：${temp.data[1]}kwh；同比节能：${temp.data[2]}kwh；今日用电量：${temp.data[3]}kwh`
-        } else { temp.conten = `1月：${temp.data[1]}kwh；2月：${temp.data[2]}kwh；3月：${temp.data[3]}kwh；4月：${temp.data[4]}kwh；5月：${temp.data[5]}kwh；6月：${temp.data[6]}kwh；7月：${temp.data[7]}kwh；8月：${temp.data[8]}kwh；9月：${temp.data[9]}kwh；10月：${temp.data[10]}kwh；11月：${temp.data[11]}kwh；12月：${temp.data[12]}kwh` }
-        this.tableData.push(temp)
-      })
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
     },
-    // 点击修改
-    edit (val) {
-      // console.log(999, val)
-      let temp = ''
-      if (val.id === 1) {
-        temp = '/layout/tab2Edit1'
-      } else temp = '/layout/tab2Edit2'
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+    }, // 点击查看
+    lookGood (id) {
       this.$router.push({
-        path: temp,
-        query: val
+        path: '/layout/tab2Look'
+        // query: { conLeftId: this.conLeft }
       })
+    },
+    // 时间处理----------------
+    handleSelect (e) {
+      const date = []
+      for (const i in e) {
+        date.push(this.gettime(e[i]))
+      }
+      this.formData.startTime = date[0]
+      if (date[1]) {
+        this.formData.endTime = date[1].replace('00:00:00', '23:59:59')
+      }
+      if (e === null) this.formData.endTime = ''
+    },
+    gettime (data) {
+      const value =
+        data.getFullYear() +
+        '-' +
+        this.checkTime(data.getMonth() + 1) +
+        '-' +
+        this.checkTime(data.getDate()) +
+        ' ' +
+        this.checkTime(data.getHours()) +
+        ':' +
+        this.checkTime(data.getMinutes()) +
+        ':' +
+        this.checkTime(data.getSeconds())
+      return value
+    },
+    checkTime (i) {
+      if (i < 10) {
+        i = '0' + i
+      }
+      return i
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-    this.energyList(this.from)
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
+  mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -93,6 +212,50 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.tab2 {
+  height: 100%;
+  .insideTop .add{
+    right: 55px;
+  }
+  .conten {
+    padding: 15px 30px 0;
+    height: calc(100% - 32px);
+    .classify {
+      text-align: center;
+      width: 40px;
+      padding-bottom: 10px;
+      color: #b9412e;
+      border-bottom: 2px solid #b9412e;
+    }
+    .search {
+      margin-bottom: 20px;
+      position: relative;
+      margin-top: 12px;
+      height: 40px;
+      .search_k {
+        margin-left: 30px;
+      }
+      .search_btn {
+        display: flex;
+        justify-content: space-between;
+        width: 200px;
+        position: absolute;
+        right: 22px;
+        top: 0;
+      }
+    }
+    .table {
+      max-width: 1533px;
+    }
+    /deep/.el-table__body-wrapper {
+      max-height: 485px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    bottom: 15px;
+    right: 50px;
+  }
+}
 </style>

houtai/src/views/tab2/tab2Add.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="tab2Add">
+    <div class="insideTop">
+      学院领导管理 > 新增领导信息
+      <div class="add">
+        <el-button type="primary" @click="goBack">返 回</el-button>
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="con_top">基本信息</div>
+      <!-- 表单 -->
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="120px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="标题：" prop="name">
+          <el-input
+            v-model="ruleForm.name"
+            maxlength="25"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="性别：" prop="sex">
+          <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
+          <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
+        </el-form-item>
+        <el-form-item label="政治面貌：" prop="face">
+          <el-select
+            v-model="ruleForm.face"
+            placeholder="请选择"
+            style="width: 500px"
+          >
+            <el-option label="中共党员" value="中共党员"></el-option>
+            <el-option label="中共预备党员" value="中共预备党员"></el-option>
+            <el-option label="共青团员" value="共青团员"></el-option>
+            <el-option label="民革党员" value="民革党员"></el-option>
+            <el-option label="民盟盟员" value="民盟盟员"></el-option>
+            <el-option label="民建会员" value="民建会员"></el-option>
+            <el-option label="民进会员" value="民进会员"></el-option>
+            <el-option label="农工党党员" value="农工党党员"></el-option>
+            <el-option label="致公党党员" value="致公党党员"></el-option>
+            <el-option label="九三学社社员" value="九三学社社员"></el-option>
+            <el-option label="台盟盟员" value="台盟盟员"></el-option>
+            <el-option label="无党派人士" value="无党派人士"></el-option>
+            <el-option label="群众" value="群众"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="任期职位：" prop="position">
+          <el-input
+            v-model="ruleForm.position"
+            maxlength="50"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="任期：">
+          <i class="biaoshi biaoshi1"></i>
+          <el-date-picker
+            style="width: 500px"
+            v-model="time"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <!-- 图片和附件 -->
+        <el-form-item label="领导照片">
+          <i class="biaoshi biaoshi2"></i>
+          <el-upload
+            class="avatar-uploader"
+            :action="baseURL + '/cms/security/video/upload/img'"
+            :headers="{
+              token,
+            }"
+            :show-file-list="false"
+            :before-upload="beforethumbUpload"
+            :on-success="upload_thumb_success"
+          >
+            <div v-if="ruleForm.thumb" class="imgdiv">
+              <img
+                style="width: 100%; height: 100%"
+                :src="baseURL + ruleForm.thumb"
+              />
+              <i
+                class="el-icon-circle-close"
+                @click.stop="ruleForm.thumb = ''"
+              ></i>
+            </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <p class="upHint">
+            格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M。
+          </p>
+        </el-form-item>
+      </el-form>
+      <!-- 富文本 -->
+      <div class="con_top">领导简介</div>
+      <div id="div1" style="z-index: 1"></div>
+      <!-- 底部按钮 -->
+      <div class="con_btn">
+        <el-button type="primary">保 存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import E from 'wangeditor'
+export default {
+  name: 'tab2Add',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      time: '',
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        name: '',
+        sex: '1',
+        face: '',
+        position: '',
+        startTime: '',
+        endTime: '',
+        thumb: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        sex: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        face: [{ required: true, message: '不能为空', trigger: 'change' }],
+        position: [{ required: true, message: '不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+    time (val) {
+      this.handleSelect(val)
+    }
+  },
+  // 方法集合
+  methods: {
+    // 上传图片
+    beforethumbUpload (file) {
+      // console.log(998, file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 5
+      const typeOk =
+        file.type === 'image/png' ||
+        file.type === 'image/jpeg' ||
+        file.type === 'image/gif'
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error('照片格式有误！')
+          reject(file)
+        } else if (!sizeOk) {
+          this.$message.error('照片大小超过5M！')
+          reject(file)
+        } else if (file.name.length > 32) {
+          this.$message.error('照片名字不能超过32个字！')
+          reject(file)
+        } else {
+          this.$message.success('上传成功')
+          resolve(file)
+        }
+      })
+    },
+    upload_thumb_success (data) {
+      // console.log('图片上传成功', data.data.urlPath)
+      this.ruleForm.thumb = data.data.urlPath
+    },
+    // 点击返回
+    goBack () {
+      this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          this.$router.push('/layout/tab2')
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 时间处理----------------
+    handleSelect (e) {
+      const date = []
+      for (const i in e) {
+        date.push(this.gettime(e[i]))
+      }
+      this.ruleForm.startTime = date[0]
+      if (date[1]) {
+        this.ruleForm.endTime = date[1].replace('00:00:00', '23:59:59')
+      }
+      if (e === null) this.ruleForm.endTime = ''
+    },
+    gettime (data) {
+      const value =
+        data.getFullYear() +
+        '-' +
+        this.checkTime(data.getMonth() + 1) +
+        '-' +
+        this.checkTime(data.getDate()) +
+        ' ' +
+        this.checkTime(data.getHours()) +
+        ':' +
+        this.checkTime(data.getMinutes()) +
+        ':' +
+        this.checkTime(data.getSeconds())
+      return value
+    },
+    checkTime (i) {
+      if (i < 10) {
+        i = '0' + i
+      }
+      return i
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    // 初始化富文本
+    // 富文本
+    this.editor = new E('#div1')
+    // 配置字体
+    this.editor.config.fontNames = [
+      '黑体',
+      '仿宋',
+      '楷体',
+      '标楷体',
+      '华文仿宋',
+      '华文楷体',
+      '宋体',
+      '微软雅黑',
+      'Arial',
+      'Tahoma',
+      'Verdana',
+      'Times New Roman'
+    ]
+    this.editor.config.uploadImgShowBase64 = true // 图片地址
+    this.editor.config.showLinkVideo = false
+    this.editor.create()
+    this.editor.txt.html('66666666666666666')
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab2Add {
+  height: 100%;
+  .conten {
+  padding-bottom: 10px;
+  overflow-y: auto;
+    height: calc(100% - 32px);
+    .con_top {
+      margin-bottom: 12px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      background-color: #fbfbfb;
+    }
+    .biaoshi1::before {
+      left: -64px;
+      top: -10px;
+    }
+    .biaoshi2::before {
+      left: -78px;
+    }
+    /deep/.el-icon-plus {
+      border: 1px dashed #ccc;
+    }
+    .avatar-uploader .el-upload {
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+      border-color: #3e5eb3;
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+    #div1{
+      width: 85%;
+      margin: 0 auto;
+    }
+    .con_btn {
+      width: 80px;
+      margin: 15px auto 0;
+    }
+  }
+}
+</style>

houtai/src/views/tab2/tab2Look.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="tab2Look">
+    <div class="insideTop">
+      学院领导管理 > 查看领导信息
+      <div class="add">
+        <el-button type="primary" @click="$router.push('/layout/tab2')"
+          >返 回</el-button
+        >
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="con_top">基本信息</div>
+      <div class="row">
+        <div>姓名：</div>
+        <span>某某某</span>
+      </div>
+      <div class="row">
+        <div>性别：</div>
+        <span>男</span>
+      </div>
+      <div class="row">
+        <div>政治面貌：</div>
+        <span>中共党员</span>
+      </div>
+      <div class="row">
+        <div>任期职位：</div>
+        <span>政治部主任</span>
+      </div>
+      <div class="row">
+        <div>任期：</div>
+        <span>2010年10月-2019年6月</span>
+      </div>
+      <div class="row">
+        <div>领导照片：</div>
+        <el-image
+          style="width: 300px; height: 300px"
+          :src="srcList[0]"
+          :preview-src-list="srcList"
+        >
+        </el-image>
+      </div>
+      <div class="row">
+        <div>显示设置：</div>
+        <el-switch disabled v-model="value" active-color="#b9412e"> </el-switch>
+      </div>
+      <div class="con_top">领导简介</div>
+      <div id="div1">领导简介</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tab2Look',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      value: true,
+      srcList: [
+        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab2Look {
+  height: 100%;
+  .conten {
+    padding-bottom: 20px;
+    overflow-y: auto;
+    position: relative;
+    height: calc(100% - 32px);
+    .con_top {
+      margin-bottom: 12px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      background-color: #fbfbfb;
+    }
+    .row {
+      display: flex;
+      margin: 25px 0;
+      & > div {
+        width: 120px;
+        text-align: right;
+      }
+    }
+    #div1{
+      width: 85%;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

houtai/src/views/tab2/模板.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="tab2">
+    <div class="insideTop">
+      学院领导管理
+      <div class="add">
+        <el-button type="primary" @click="addGood">新增学院领导</el-button>
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="classify">全部</div>
+      <div class="search">
+        <span>发布时间：</span>
+        <el-date-picker
+          style="width: 240px"
+          v-model="time"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        >
+        </el-date-picker>
+        <span class="search_k">姓名关键字：</span>
+        <el-input
+          v-model="formData.searchKey"
+          placeholder="请输入"
+          style="width: 240px"
+        ></el-input>
+        <span class="search_k">排序：</span>
+        <el-select
+          v-model="formData.type"
+          placeholder="请选择"
+          style="width: 240px"
+        >
+          <el-option label="发布时间" value="time"></el-option>
+          <el-option label="排序编号" value="number"></el-option>
+        </el-select>
+        <!-- 右侧按钮 -->
+        <div class="search_btn">
+          <el-button type="primary">查 询</el-button>
+          <el-button>重 置</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="序号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="姓名" width="200">
+            <template #default="{ row }">
+              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="name1" label="姓名"> </el-table-column>
+          <el-table-column prop="name1" label="任职职位"> </el-table-column>
+          <el-table-column label="封面图片" width="100">
+            <template #default>
+              <img class="table_img" src="../../assets/img/demo.png" alt="" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="name1" label="阅读"> </el-table-column>
+          <el-table-column prop="name1" label="发布人"> </el-table-column>
+          <el-table-column prop="name2" label="发布时间" width="200">
+          </el-table-column>
+          <el-table-column prop="address" label="排序" width="80">
+            <template #default="{ row }">
+              <el-input type="text" v-model="row.name1"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name3" label="是否显示">
+            <template #default="{ row }">
+              <el-switch v-model="row.name3" active-color="#b9412e">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-button type="text" v-if="row.name3" @click="lookGood(row.id)"
+                >查看</el-button
+              >
+              <el-button type="text" v-if="!row.name3">编辑</el-button>
+              <el-button type="text" v-if="!row.name3">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="paging">
+      <el-pagination
+        layout="sizes,prev, pager, next,jumper"
+        :total="total"
+        :current-page="formData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tab2',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      total: 100,
+      time: '',
+      formData: {
+        startTime: '',
+        endTime: '',
+        pageNum: 1,
+        pageSize: 9999,
+        searchKey: '',
+        type: 'time'
+      },
+      tableData: [
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+    time (val) {
+      this.handleSelect(val)
+    }
+  },
+  // 方法集合
+  methods: {
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+    }, // 点击查看
+    lookGood (id) {
+      // this.$router.push({
+      //   path: '/layout/tab1Look',
+      //   query: { conLeftId: this.conLeft }
+      // })
+    },
+    // 点击新增
+    addGood () {}
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab2 {
+  height: 100%;
+  .insideTop .add{
+    right: 55px;
+  }
+  .conten {
+    padding: 15px 30px 0;
+    height: calc(100% - 32px);
+    .classify {
+      text-align: center;
+      width: 40px;
+      padding-bottom: 10px;
+      color: #b9412e;
+      border-bottom: 2px solid #b9412e;
+    }
+    .search {
+      margin-bottom: 20px;
+      position: relative;
+      margin-top: 12px;
+      height: 40px;
+      .search_k {
+        margin-left: 30px;
+      }
+      .search_btn {
+        display: flex;
+        justify-content: space-between;
+        width: 200px;
+        position: absolute;
+        right: 22px;
+        top: 0;
+      }
+    }
+    .table {
+      max-width: 1533px;
+    }
+    /deep/.el-table__body-wrapper {
+      max-height: 485px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    bottom: 15px;
+    right: 50px;
+  }
+}
+</style>