anpinjingyuan-ui/src/combination/listComponent.vue

<template>
  <div>
    <div style="width: 100%;height: 40px;">
      <div style="margin: 0 12px;float: left;">
        <el-button
          v-for="item in customButton"
          :type="item.type"
          :size="item.size"
          :icon="item.icon"
          :disabled="item.disabled"
          @click="buttonList(item)">
          {{ item.name }}
        </el-button>
      </div>
      <div class="tabSetting">
        <div style="margin-left:10px;float: right">
          <el-button
            icon="el-icon-setting"
            size="mini"
            circle
            @click="showSetting = !showSetting"
          ></el-button>
        </div>
        <right-toolbar
          @showSearch="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :row-class-name="rowClassName"
    >
      <el-table-column
        v-for="(item,index) in setRowList"
        :key="index"
        :prop="item.label"
        :label="item.name"
        :width="item.width"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="item.name === '操作'">
            <span v-if="item.operation == 1">
              <el-button type="text" @click="viewMethod(scope)">查看</el-button>
              <el-button type="text" @click="modification(scope)">修改</el-button>
              <el-button type="text" @click="deletion(scope)">删除</el-button>
            </span>
            <span v-if="item.operation == 2">
              <el-button type="text" @click="deleteRow(scope.$index, tableData)">移除</el-button>
            </span>
          </span>
          <span v-else-if="item.changeable">
            <el-select v-if="item.changeable == 1" v-model="scope.row[item.label]" slot="prepend" placeholder="请选择">
              <el-option
                v-for="(item,index) in item.data"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input v-if="item.changeable == 2" v-model="scope.row[item.label]" placeholder="请输入内容" :onkeyup="item.onabort"></el-input>
            <el-date-picker
              v-if="item.changeable == 3"
              v-model="scope.row[item.label]"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </span>
          <span v-else>{{ scope.row[item.label] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="自定义列显示" :visible.sync="showSetting" width="700px">
      <div>配置排序列数据（拖动调整顺序）</div>
      <div style="margin-left: 17px">
        <el-checkbox
          v-model="allCheck"
          label="全选"
          @change="allChecked"
        ></el-checkbox>
      </div>
      <div style="padding: 4px; display: flex; justify-content: center">
        <draggable
          v-model="setRowList"
          group="site"
          animation="300"
          @start="onStart"
          @end="onEnd"
          handle=".indraggable"
        >
          <transition-group>
            <div
              v-for="item in setRowList"
              :key="item.surface"
              class="listStyle"
            >
              <div style="width: 500px" class="indraggable">
                <div class="progress" :style="{ width: item.width + 'px' }">
                  <el-checkbox
                    :label="item.name"
                    v-model="item.checked"
                    :true-label="0"
                    :false-label="1"
                  >{{ item.name }}
                  </el-checkbox>
                </div>
              </div>
              <el-input-number
                v-model.number="item.width"
                controls-position="right"
                :min="1"
                :max="500"
                size="mini"
              ></el-input-number>
            </div>
          </transition-group>
        </draggable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSetting = false">取 消</el-button>
        <el-button @click="delRow" type="danger">重 置</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addSet, resetModule } from "@/api/system/set";
import Cookies from "js-cookie";
export default {
  name: 'listComponent',
  props: ['tableData', 'listStyle','queryList','customButton'],
  data() {
    return {
      setRowList:this.queryList.columnList.length !== 0?this.queryList.columnList:this.listStyle,
      showSetting: false,
      allCheck: false,
    }
  },
  created() {
    console.log(this.listStyle)
    console.log(this.queryList)
    console.log(this.queryList.columnList.length)
  },
  methods: {
    //行号设置
    rowClassName({row, rowIndex}) {
      console.log(row,rowIndex)
      //把每一行的索引放进row.id
      row.fLineNumber = rowIndex+1;
      console.log(row.fLineNumber)
    },
    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.setRowList.map((e) => {
          return (e.checked = 0);
        });
      } else {
        this.setRowList.map((e) => {
          return (e.checked = 1);
        });
      }
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    //保存列设置
    save() {
      this.showSetting = false;
      this.data = {
        tableName: this.queryList.tableName,
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList,
      };
      addSet(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.getRowList = this.setRowList.filter((e) => e.checked == 0);
        }
      });
    },
    //自定义列
    delRow() {
      this.data = {
        tableName: this.queryList.tableName,
        userId: Cookies.get("userName"),
      };
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.setRowList = this.listStyle;
          console.log(this.getRowList)
        }
      });
    },
    showSearch(){
      this.$emit('showSearch')
    },
    //刷新按钮
    getList(){
      this.$emit('getList')
    },
    //所有按钮
    buttonList(row){
      this.$emit('buttonList', row)
    },
    //查看
    viewMethod(scope) {
      this.$emit('see', scope)
    },
    //修改
    modification(scope){
      this.$emit('modify', scope)
    },
    //删除
    deletion(scope){
      this.$emit('deletion', scope)
    },
    //移出
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //选择
    handleSelectionChange(selection){
      this.$emit('selectionbox', selection)
    }
  }
}
</script>

<style scoped>
.listStyle {
  display: flex;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}
.listStyle:last-child {
  border-bottom: 1px solid #dcdfe6;
}
.progress {
  display: flex;
  align-items: center;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  height: 100%;
}
</style>