动态列样式修改 2022年10月31日 sxm

src/views/modules/common/column.vue

@@ -1,64 +1,96 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" title="设置表格列"
+  <el-dialog :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" title="设置表格栏位"
              :visible.sync="visible"
-             width="852px" v-drag>
-    <el-form label-position="top"  @keyup.enter.native="updateColumnList()"
-             v-model="userColumnList"
-             inline="inline"
-             size="mini"
-             label-width="120px">
-      <el-form-item v-for="(item,index) in userColumnList"
-                    :key="index"
-                    :label="item.columnLabel"
-                    :prop="item.columnProp">
-        <el-form-item label="排序">
-          <el-input style="width: 100px" oninput="value=value.replace(/[^\d]/g, '')" v-model="item.sortLv"  :min="0" ></el-input>
-<!--          <el-input-number v-model="item.sortLv" controls-position="right" size="mini" :min="0"-->
-<!--                           :max="100"></el-input-number>-->
-        </el-form-item>
-        <el-form-item label="显示状态">
+             class="cl"
+             width="958px" v-drag>
+    <el-table
+      :height="height"
+      :data="userColumnList"
+      border
+      v-loading="dataListLoading"
+      highlight-current-row
+      :row-style="{height: '20px'}"
+      style="width: 100%;">
+      <el-table-column
+        width="120"
+        label="栏位名称">
+        <template slot-scope="scope">
+          <el-input readonly v-model="scope.row.columnProp"  ></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column
+        width="80"
+        label="显示顺序">
+        <template slot-scope="scope">
+          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.sortLv"  :min="0" ></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column
+        width="140"
+        label="显示状态">
+        <template slot-scope="scope">
           <el-switch
-            v-model="item.status"
+            v-model="scope.row.status"
             active-text="显示"
             inactive-text="隐藏">
           </el-switch>
-        </el-form-item>
-        <el-form-item label="排序">
-          <el-switch
-            v-model="item.columnSortable"
-            active-text="排序"
-            inactive-text="不排序">
-          </el-switch>
-        </el-form-item>
-        <el-form-item label="固定位置">
-          <el-select style="width: 100px"  v-model="item.fixed">
+        </template>
+      </el-table-column>
+      <el-table-column
+        width="120"
+        label="固定位置">
+        <template slot-scope="scope">
+          <el-select style="width: 100px"  v-model="scope.row.fixed">
             <el-option label="不固定" value=""></el-option>
             <el-option label="左固定" value="left"></el-option>
             <el-option label="右固定" value="right"></el-option>
           </el-select>
-
-        </el-form-item>
-        <el-form-item label="宽度">
-          <el-input style="width: 100px" oninput="value=value.replace(/[^\d]/g, '')" v-model="item.columnWidth"  :min="0" ></el-input>
-<!--          <el-input-number v-model="item.columnWidth" controls-position="right" size="mini" :min="0"-->
-<!--                           :max="1000"></el-input-number>-->
-        </el-form-item>
-        <el-form-item label="类型">
-          <el-select style="width: 100px" v-model="item.columnType" >
-            <el-option value="string" label="字符"></el-option>
-            <el-option value="number" label="数字"></el-option>
-            <el-option value="date" label="日期"></el-option>
+        </template>
+      </el-table-column>
+      <el-table-column
+        width="160"
+        label="排序">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.columnSortable"
+            active-text="排序"
+            inactive-text="不排序">
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column
+        width="100"
+        label="宽度">
+        <template slot-scope="scope">
+          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.columnWidth"  :min="0" ></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column
+        width="100"
+        label="类型">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.columnType" >
+            <el-option value="string" label="string"></el-option>
+            <el-option value="number" label="number"></el-option>
+            <el-option value="date" label="date"></el-option>
           </el-select>
-        </el-form-item>
-        <el-form-item label="位置">
-          <el-select style="width: 100px" v-model="item.align" >
+        </template>
+      </el-table-column>
+      <el-table-column
+        width="100"
+        label="位置">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.align" >
             <el-option value="left" label="居左"></el-option>
             <el-option value="center" label="居中"></el-option>
             <el-option value="right" label="居右"></el-option>
           </el-select>
-        </el-form-item>
-      </el-form-item>
-    </el-form>
+        </template>
+      </el-table-column>
+    </el-table>
+
+
+
     <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="updateColumnList()"  >确定</el-button>
       <el-button @click="visible = false" type="primary">取消</el-button>
@@ -70,115 +102,202 @@
 <script>
 
 
-import {
-  saveTableUser,
-  getTableDefaultListLanguage,
-  getTableUserListLanguage
-} from "@/api/table.js"
+  import {
+    saveTableUser,
+    getTableDefaultListLanguage,
+    getTableUserListLanguage
+  } from "@/api/table.js"
 
-export default {
-  data() {
-    return {
-      // 用户table 配置集合
-      userColumnList: [],
-      queryTable: {},
-      visible: false,
-      fullscreenLoading: false
-    }
-  },
-  methods: {
+  export default {
+    data() {
+      return {
+        height: 400,
+        // 展示列集
+        columnList: [
+          {
+            columnLabel: "显示顺序",
+            columnHidden: false,
+            columnImage: false,
+            columnSortable: false,
+            columnWidth: null,
+            format: null,
+            sortLv: 0,
+            status: true,
+            fixed: '',
+            serialNumber: null,
+            columnType: null,
+            align: null
+          },
+          {
+            columnLabel: "显示状态",
+            columnHidden: false,
+            columnImage: false,
+            columnSortable: false,
+            columnWidth: null,
+            format: null,
+            sortLv: 0,
+            status: true,
+            fixed: '',
+            serialNumber: null,
+            columnType: null,
+            align: null
+          },
+          {
+            columnLabel: "排序",
+            columnHidden: false,
+            columnImage: false,
+            columnSortable: false,
+            columnWidth: null,
+            format: null,
+            sortLv: 0,
+            status: true,
+            fixed: '',
+            serialNumber: null,
+            columnType: null,
+            align: null
+          },
+          {
+            columnLabel: "固定状态",
+            columnHidden: false,
+            columnImage: false,
+            columnSortable: false,
+            columnWidth: null,
+            format: null,
+            sortLv: 0,
+            status: true,
+            fixed: '',
+            serialNumber: null,
+            columnType: null,
+            align: null
+          },
+          {
+            columnLabel: "宽度",
+            columnHidden: false,
+            columnImage: false,
+            columnSortable: false,
+            columnWidth: null,
+            format: null,
+            sortLv: 0,
+            status: true,
+            fixed: '',
+            serialNumber: null,
+            columnType: null,
+            align: null
+          },
+          {
+            columnLabel: "类型",
+            columnHidden: false,
+            columnImage: false,
+            columnSortable: false,
+            columnWidth: null,
+            format: null,
+            sortLv: 0,
+            status: true,
+            fixed: '',
+            serialNumber: null,
+            columnType: null,
+            align: null
+          },
+          {
+            columnLabel: "位置",
+            columnHidden: false,
+            columnImage: false,
+            columnSortable: false,
+            columnWidth: null,
+            format: null,
+            sortLv: 0,
+            status: true,
+            fixed: '',
+            serialNumber: null,
+            columnType: null,
+            align: null
+          },
+
+        ],
+        dataList: [],
+        // 用户table 配置集合
+        userColumnList: [],
+        queryTable: {},
+        visible: false,
+        fullscreenLoading: false
+      }
+    },
+    methods: {
 
-    // 获取 用户的配置
-    init(queryTable) {
-      this.visible = true
-      this.queryTable = queryTable
-      getTableUserListLanguage(queryTable).then(({data}) => {
-        if (data.code == 0) {
-          this.userColumnList = data.rows
-          if (data.rows.length <= 0) {
-            getTableDefaultListLanguage(queryTable).then(({data}) => {
-              this.userColumnList = data.rows
-            })
+      // 获取 用户的配置
+      init(queryTable) {
+        this.visible = true
+        this.queryTable = queryTable
+        getTableUserListLanguage(queryTable).then(({data}) => {
+          if (data.code == 0) {
+            this.userColumnList = data.rows
+            if (data.rows.length <= 0) {
+              getTableDefaultListLanguage(queryTable).then(({data}) => {
+                this.userColumnList = data.rows
+              })
+            }
           }
-        }
-      })
+        })
 
-    },
-    // 修改 table 列
-    updateColumnList() {
-      const loading = this.$loading({
-        lock: true,
-        text: '正在保存用户设置',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-      let userColumns = []
-      for (let column of this.userColumnList) {
-        let userColumn = {
-          userId: this.$store.state.user.name,
-          functionId: column.functionId,
-          tableId: column.tableId,
-          tableName: column.tableName,
-          columnProp: column.columnProp,
-          headerAlign: column.headerAlign,
-          align: column.align,
-          columnWidth: column.columnWidth,
-          columnLabel: column.columnLabel,
-          columnHidden: column.columnHidden,
-          columnImage: column.columnImage,
-          columnSortable: column.columnSortable,
-          format: column.format,
-          sortLv: column.sortLv,
-          status: column.status,
-          fixed: column.fixed,
-          serialNumber: column.serialNumber,
-          columnType:column.columnType
-        }
-        userColumns.push(userColumn)
-        this.$emit("refreshData",this.queryTable.tableId);
-      }
-      saveTableUser(userColumns).then(({data}) => {
-        if (data.code == 0) {
-          this.$message.success(data.msg)
-          loading.close();
-          this.visible = false
-          this.$emit("refreshData",this.queryTable.tableId);
-        } else {
-          this.$message.error(data.msg)
+      },
+      // 修改 table 列
+      updateColumnList() {
+        const loading = this.$loading({
+          lock: true,
+          text: '正在保存用户设置',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        let userColumns = []
+        for (let column of this.userColumnList) {
+          let userColumn = {
+            userId: this.$store.state.user.name,
+            functionId: column.functionId,
+            tableId: column.tableId,
+            tableName: column.tableName,
+            columnProp: column.columnProp,
+            headerAlign: column.headerAlign,
+            align: column.align,
+            columnWidth: column.columnWidth,
+            columnLabel: column.columnLabel,
+            columnHidden: column.columnHidden,
+            columnImage: column.columnImage,
+            columnSortable: column.columnSortable,
+            format: column.format,
+            sortLv: column.sortLv,
+            status: column.status,
+            fixed: column.fixed,
+            serialNumber: column.serialNumber,
+            columnType:column.columnType
+          }
+          userColumns.push(userColumn)
+          this.$emit("refreshData");
         }
-      })
-    },
+        saveTableUser(userColumns).then(({data}) => {
+          if (data.code == 0) {
+            this.$message.success(data.msg)
+            loading.close();
+            this.visible = false
+            this.$emit("refreshData",this.queryTable.tableId);
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
+      },
+    }
   }
-}
 </script>
 <style >
-
-   .el-switch__label * {
+  .cl .el-table .cell {
+    line-height: 20px;
     font-size: 12px;
+    height: 20px;
   }
-   .el-switch {
 
-     font-size: 12px;
-     line-height: 15px;
-     height: 15px;
-   }
-
-   .el-switch__core {
-     margin: 0;
-     position: relative;
-     width: 30px;
-     height: 18px;
-      border: 0px solid #dcdfe6;
-     outline: 0;
-     border-radius: 10px;
-     -webkit-box-sizing: border-box;
-   }
-   .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
-     margin-bottom: 0px;
-   }
+  .cl .el-switch__label * {
+    line-height: 1;
+    font-size: 12px;
+    display: inline-block;
+  }
 
-   .el-select-dropdown__item {
-     height: 28px;
-     line-height: 28px;
-   }
 </style>