src/components/RightToolbar/index.vue
@@ -7,11 +7,14 @@
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip v-show="$route.path.includes('point')" class="item" effect="dark" content="自定义列" placement="top">
        <el-button size="mini" circle icon="el-icon-collection-tag" @click="addDynamicColumn()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
          <el-button size="mini" circle icon="el-icon-menu" />
          <el-dropdown-menu slot="dropdown">
          <el-dropdown-menu slot="dropdown" style="max-height: 650px;overflow-y: auto">
            <template v-for="item in columns">
              <el-dropdown-item :key="item.key">
                <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
@@ -29,19 +32,52 @@
        @change="dataChange"
      ></el-transfer>
    </el-dialog>
    <el-dialog
      title="添加动态列"
      :visible.sync="showDynamicColumn"
      width="500px"
      :before-close="dynamicColumnClose">
      <div>
        <div style="margin-bottom: 8px">
          <el-button style="float: right" type="primary" @click="addColumn" size="small">新增一条</el-button>
        </div>
        <div v-for="(dynamicColumn, index) in dynamicColumnList" :key="index">
          <el-form :inline="true" size="small">
            <el-form-item label="列名" prop="labelValue">
              <div style="display: flex; flex-direction: row">
                <el-input v-model="dynamicColumn.labelValue"></el-input>
                <el-button style="margin-left: 8px" type="danger" @click="delColumn(dynamicColumn.id, index)">删除</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dynamicColumnClose">取 消</el-button>
        <el-button type="primary" size="small" :disabled="!dynamicColumnList || dynamicColumnList.length < 1" @click="saveColumns">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addDynamicColumn, deleteDynamicColumnById, editDynamicColumn, getDynamicColumnList } from '@/api/platform/dynamicColumn'
export default {
  name: "RightToolbar",
  data() {
    return {
      dynamicColumnList: [],
      showDynamicColumn: false,
      // 显隐数据
      value: [],
      // 弹出层标题
      title: "显示/隐藏",
      // 是否显示弹出层
      open: false,
      tableKey: 0,
    };
  },
  props: {
@@ -80,6 +116,9 @@
    }
  },
  created() {
    if (this.$route.path.includes("point")) {
      this.getDyColumn()
    }
    if (this.showColumnsType == 'transfer') {
      // 显隐列初始默认隐藏列
      for (let item in this.columns) {
@@ -90,6 +129,46 @@
    }
  },
  methods: {
    getDyColumn() {
      // 查询动态列
      let params = {
        tableName: 't_yw_point'
      }
      getDynamicColumnList(params).then(res => {
        this.dynamicColumnList = res.data
      })
    },
    addDynamicColumn() {
      this.getDyColumn()
      this.showDynamicColumn = true
    },
    saveColumns() {
      editDynamicColumn(this.dynamicColumnList).then(res => {
        this.$message.success("保存成功")
        this.$emit('refreshHeader');
        this.showDynamicColumn = false
      })
    },
    addColumn() {
      this.dynamicColumnList.push({
        id: null,
        labelValue: ''
      })
    },
    delColumn(id, index) {
      if(id) {
        deleteDynamicColumnById(id).then(res => {
          this.$message.success("删除成功")
          this.getDyColumn();
          this.$emit('refreshHeader');
        })
      }else {
        this.dynamicColumnList.splice(index,1)
      }
    },
    dynamicColumnClose() {
      this.showDynamicColumn = false
    },
    // 搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);