rongxing-vue/src/views/modules/common/column.vue

<template>
  <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="显示状态">
          <el-switch
            v-model="item.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">
            <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>
          </el-select>
        </el-form-item>
        <el-form-item label="位置">
          <el-select style="width: 100px" v-model="item.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>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="updateColumnList()"  >确定</el-button>
      <el-button @click="visible = false" type="primary">取消</el-button>
    </span>
  </el-dialog>

</template>

<script>


import {
  saveTableUser,
  getTableDefaultListLanguage,
  getTableUserListLanguage
} from "@/api/table.js"

export default {
  data() {
    return {
      // 用户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
            })
          }
        }
      })

    },
    // 修改 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)
        }
      })
    },
  }
}
</script>
<style >

   .el-switch__label * {
    font-size: 12px;
  }
   .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;
   }

   .el-select-dropdown__item {
     height: 28px;
     line-height: 28px;
   }
</style>