style:table表格样式

任超
Showing 6 changed files with 139 additions and 80 deletions
src/components/lb-table/lb-table.vue
src/views/registerBook/fdcq1.vue
src/views/registerBook/fdcq2.vue
src/views/registerBook/jsydsyq.vue
src/views/registerBook/qlxxCommon.scss
src/views/workflow/workFrame.vue
--- a/src/components/lb-table/lb-table.vue
View file @a2e1e4c
+++ b/src/components/lb-table/lb-table.vue
View file @a2e1e4c
@@ -10,18 +10,18 @@
 <template>
  <div :class="['lb-table', customClass]">
-    <el-table v-if="!heightNumSetting" class="table-fixed" ref="elTable" :border='border'
+    <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable"
-      :row-class-name="tableRowClassName" :show-header='showHeader'
+      :border='border' :row-class-name="tableRowClassName" :show-header='showHeader'
      :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
      :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
      <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
      </lb-column>
    </el-table>
-    <el-table v-else ref="elTable" class="table-fixed" :border='border' :row-class-name="tableRowClassName"
+    <el-table v-else ref="elTable" class="table-fixed" :row-style="{ height: '50px' }" :border='border'
-      :show-header='showHeader' :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs"
+      :row-class-name="tableRowClassName" :show-header='showHeader'
-      :max-height="maxHeight" v-on="$listeners" :data="data" style="width: 100%"
+      :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :max-height="maxHeight"
-      :span-method="this.merge ? this.mergeMethod : this.spanMethod">
+      v-on="$listeners" :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
      <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
      </lb-column>
    </el-table>
--- a/src/views/registerBook/fdcq1.vue
View file @a2e1e4c
+++ b/src/views/registerBook/fdcq1.vue
View file @a2e1e4c
@@ -5,30 +5,45 @@
        {{ title }}
        <div class="checkbox">
          <el-checkbox-group v-model="checkList" @change="checkChange">
-            <el-checkbox
+            <el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
-              v-for="item in qsztList"
-              :key="item.value"
-              :label="item.value"
-              >{{ item.label }}</el-checkbox
-            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="xxTableBox">
+        <!-- 固定前三个 -->
        <table class="xxTable">
-          <tr v-for="(item, colindex) in columns" :key="colindex">
+          <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
            <td>
              {{ item.label }}
            </td>
-            <td
+            <td v-for="(row, index) in tableData" :key="index" :class="[
-              v-for="(row, index) in tableData"
+              row.qszt == '2' ? 'lishi' : '',
-              :key="index"
+              row.qszt == '0' ? 'linshi' : '',
-              :class="[
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
-                row.qszt == '2' ? 'lishi' : '',
+            ]">
-                row.qszt == '0' ? 'linshi' : '',
+              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
-                item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
+                正在办理
-              ]"
+              </div>
-            >
+              <span v-if="item.prop == 'qszt'">
+                {{ getQsztName(row[item.prop]) }}
+              </span>
+              <span v-else> {{ row[item.prop] }}</span>
+            </td>
+            <td v-for="count in emptycolNum" :key="~count"></td>
+          </tr>
+        </table>
+        <table class="xxTable rollTable">
+          <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
+            <td>
+              {{ item.label }}
+            </td>
+            <td v-for="(row, index) in tableData" :key="index" :class="[
+              row.qszt == '2' ? 'lishi' : '',
+              row.qszt == '0' ? 'linshi' : '',
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
+            ]">
              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                正在办理
              </div>
@@ -50,7 +65,7 @@
 import { getJsydsyqList } from "@/api/registerBook.js";
 import { datas } from "./qlxxFormData.js";
 export default {
-  data() {
+  data () {
    return {
      title: "建设用地使用权、宅基地使用权登记信息",
      qsztList: datas.columns().qsztList,
@@ -65,11 +80,11 @@ export default {
      columns: datas.columns().JSYDSYQ,
    };
  },
-  created() {
+  created () {
    this.loadData();
  },
  methods: {
-    loadData() {
+    loadData () {
      getJsydsyqList({
        bdcdyid: this.propsParam.bdcdyid,
        qllx: this.propsParam.qllx,
@@ -77,7 +92,7 @@ export default {
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.result;
-           if (this.tableData.length < datas.columns().emptycolNum) {
+          if (this.tableData.length < datas.columns().emptycolNum) {
            this.emptycolNum =
              datas.columns().emptycolNum - this.tableData.length;
          } else {
@@ -86,7 +101,7 @@ export default {
        }
      });
    },
-   checkChange() {
+    checkChange () {
      if (this.checkList.length === 0) {
        this.tableData = [];
        this.emptycolNum = datas.columns().emptycolNum;
@@ -94,7 +109,7 @@ export default {
        this.loadData();
      }
    },
-    getQsztName(code) {
+    getQsztName (code) {
      let name = "";
      for (let item of this.qsztList) {
        if (item.value == code) {
--- a/src/views/registerBook/fdcq2.vue
View file @a2e1e4c
+++ b/src/views/registerBook/fdcq2.vue
View file @a2e1e4c
@@ -5,30 +5,22 @@
        {{ title }}
        <div class="checkbox">
          <el-checkbox-group v-model="checkList" @change="checkChange">
-            <el-checkbox
+            <el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
-              v-for="item in qsztList"
-              :key="item.value"
-              :label="item.value"
-              >{{ item.label }}</el-checkbox
-            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="xxTableBox">
+        <!-- 固定前三个 -->
        <table class="xxTable">
-          <tr v-for="(item, colindex) in columns" :key="colindex">
+          <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
            <td>
              {{ item.label }}
            </td>
-            <td
+            <td v-for="(row, index) in tableData" :key="index" :class="[
-              v-for="(row, index) in tableData"
+              row.qszt == '2' ? 'lishi' : '',
-              :key="index"
+              row.qszt == '0' ? 'linshi' : '',
-              :class="[
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
-                row.qszt == '2' ? 'lishi' : '',
+            ]">
-                row.qszt == '0' ? 'linshi' : '',
-                item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
-              ]"
-            >
              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                正在办理
              </div>
@@ -41,6 +33,30 @@
            <td v-for="count in emptycolNum" :key="~count"></td>
          </tr>
        </table>
+        <table class="xxTable rollTable">
+          <tr v-for="(item, colindex) in columnsslice(3)" :key="colindex">
+            <td>
+              {{ item.label }}
+            </td>
+            <td v-for="(row, index) in tableData" :key="index" :class="[
+              row.qszt == '2' ? 'lishi' : '',
+              row.qszt == '0' ? 'linshi' : '',
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
+            ]">
+              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
+                正在办理
+              </div>
+              <span v-if="item.prop == 'qszt'">
+                {{ getQsztName(row[item.prop]) }}
+              </span>
+              <span v-else> {{ row[item.prop] }}</span>
+            </td>
+            <td v-for="count in emptycolNum" :key="~count"></td>
+          </tr>
+        </table>
      </div>
    </div>
  </div>
@@ -50,7 +66,7 @@
 import { getFdcq2List } from "@/api/registerBook.js";
 import { datas } from "./qlxxFormData.js";
 export default {
-  data() {
+  data () {
    return {
      title: "房地产权登记信息（独幢、层、套、间房屋）",
      qsztList: datas.columns().qsztList,
@@ -65,11 +81,11 @@ export default {
      columns: datas.columns().FDCQ2,
    };
  },
-  created() {
+  created () {
    this.loadData();
  },
  methods: {
-    loadData() {
+    loadData () {
      getFdcq2List({
        bdcdyid: this.propsParam.bdcdyid,
        qllx: this.propsParam.qllx,
@@ -77,7 +93,7 @@ export default {
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.result;
-         if (this.tableData.length < datas.columns().emptycolNum) {
+          if (this.tableData.length < datas.columns().emptycolNum) {
            this.emptycolNum =
              datas.columns().emptycolNum - this.tableData.length;
          } else {
@@ -86,7 +102,7 @@ export default {
        }
      });
    },
-    checkChange() {
+    checkChange () {
      if (this.checkList.length === 0) {
        this.tableData = [];
        this.emptycolNum = datas.columns().emptycolNum;
@@ -94,7 +110,7 @@ export default {
        this.loadData();
      }
    },
-    getQsztName(code) {
+    getQsztName (code) {
      let name = "";
      for (let item of this.qsztList) {
        if (item.value == code) {
--- a/src/views/registerBook/jsydsyq.vue
View file @a2e1e4c
+++ b/src/views/registerBook/jsydsyq.vue
View file @a2e1e4c
@@ -5,30 +5,45 @@
        {{ title }}
        <div class="checkbox">
          <el-checkbox-group v-model="checkList" @change="checkChange">
-            <el-checkbox
+            <el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
-              v-for="item in qsztList"
-              :key="item.value"
-              :label="item.value"
-              >{{ item.label }}</el-checkbox
-            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="xxTableBox">
+        <!-- 固定前三个 -->
        <table class="xxTable">
-          <tr v-for="(item, colindex) in columns" :key="colindex">
+          <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
            <td>
              {{ item.label }}
            </td>
-            <td
+            <td v-for="(row, index) in tableData" :key="index" :class="[
-              v-for="(row, index) in tableData"
+              row.qszt == '2' ? 'lishi' : '',
-              :key="index"
+              row.qszt == '0' ? 'linshi' : '',
-              :class="[
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
-                row.qszt == '2' ? 'lishi' : '',
+            ]">
-                row.qszt == '0' ? 'linshi' : '',
+              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
-                item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
+                正在办理
-              ]"
+              </div>
-            >
+              <span v-if="item.prop == 'qszt'">
+                {{ getQsztName(row[item.prop]) }}
+              </span>
+              <span v-else> {{ row[item.prop] }}</span>
+            </td>
+            <td v-for="count in emptycolNum" :key="~count"></td>
+          </tr>
+        </table>
+        <table class="xxTable rollTable">
+          <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
+            <td>
+              {{ item.label }}
+            </td>
+            <td v-for="(row, index) in tableData" :key="index" :class="[
+              row.qszt == '2' ? 'lishi' : '',
+              row.qszt == '0' ? 'linshi' : '',
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
+            ]">
              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                正在办理
              </div>
@@ -50,7 +65,7 @@
 import { getJsydsyqList } from "@/api/registerBook.js";
 import { datas } from "./qlxxFormData.js";
 export default {
-  data() {
+  data () {
    return {
      title: "建设用地使用权、宅基地使用权登记信息",
      qsztList: datas.columns().qsztList,
@@ -65,11 +80,11 @@ export default {
      columns: datas.columns().JSYDSYQ,
    };
  },
-  created() {
+  created () {
    this.loadData();
  },
  methods: {
-    loadData() {
+    loadData () {
      getJsydsyqList({
        bdcdyid: this.propsParam.bdcdyid,
        qllx: this.propsParam.qllx,
@@ -86,7 +101,7 @@ export default {
        }
      });
    },
-    checkChange() {
+    checkChange () {
      if (this.checkList.length === 0) {
        this.tableData = [];
        this.emptycolNum = datas.columns().emptycolNum;
@@ -94,7 +109,7 @@ export default {
        this.loadData();
      }
    },
-    getQsztName(code) {
+    getQsztName (code) {
      let name = "";
      for (let item of this.qsztList) {
        if (item.value == code) {
--- a/src/views/registerBook/qlxxCommon.scss
View file @a2e1e4c
+++ b/src/views/registerBook/qlxxCommon.scss
View file @a2e1e4c
@@ -105,13 +105,19 @@
                z-index: 10;
            }
+            tr {
+                display: flex;
+            }
            tr td {
-                border: 1px solid #ccc;
+                border: 1px solid rgb(227, 226, 226);
                text-align: center;
                height: 40px;
                padding: 4px;
                font-size: 13px;
                width: 140px;
+                flex: 1;
+                width: 100%;
            }
            >tr:nth-child(odd) td {
@@ -130,5 +136,12 @@
                color: #7f7f7f;
            }
        }
+        .rollTable {
+            margin-top: -2px;
+            display: block;
+            height: calc(100vh - 300px);
+            overflow-y: scroll;
+        }
    }
 }
\ No newline at end of file
--- a/src/views/workflow/workFrame.vue
View file @a2e1e4c
+++ b/src/views/workflow/workFrame.vue
View file @a2e1e4c
@@ -362,7 +362,7 @@ export default {
              console.log("确认回调");
            },
          })
-          break;  
+          break;
        case "signout":
          window.close();
          break;
@@ -404,12 +404,12 @@ export default {
      this.currentSelectProps = this.unitData[index];
      getStepFormInfo(this.unitData[index]).then((res) => {
        if (res.code === 200) {
-         //获取单元对应的所有表单信息
+          //获取单元对应的所有表单信息
-         this.tabList = res.result;
+          this.tabList = res.result;
-         //默认加载第一个表单信息
+          //默认加载第一个表单信息
-         this.tabName = res.result[0].value;
+          this.tabName = res.result[0].value;
-         //处理分屏材料信息
+          //处理分屏材料信息
-         let that = this;
+          let that = this;
          this.tabList.forEach(function (item, index) {
            if (item.value == "clxx") {
              that.clxxIndex = index;
@@ -426,7 +426,6 @@ export default {
    },
    //表单选项卡事件
    beforeLeave (activeName, oldActiveName) {
-      console.log(this.oldDetail, this.newDetail);
      if (!_.isEqual(this.oldDetail, this.newDetail)) {
        this.$message.error('界面内容有所变化,请先保存')
        return false
@@ -436,6 +435,7 @@ export default {
    },
    //切换选项卡内容组件
    getFromRouter (tabname) {
+      console.log(tabname, 'tabnametabname');
      this.componentTag = getForm(tabname, this.$route.query.sqywbm);
    },
    //发送下一个环节