anpinjingyuan-ui/src/combination/listComponent.vue

<template>
  <div>
    <div style="width: 100%;height: 40px;">
      <div style="margin: 10px 12px;float: left;">
        <span v-for="(item, index) in customButton" :key="index">
          <el-upload v-if="item.upload === true" style="float: left;margin-right: 10px" class="upload-demo"
            :headers="headers" :action="item.action" :show-file-list="false" :on-success="handleAvatarSuccess"
            :multiple="false">
            <el-button :size="item.size" :icon="item.icon" :type="item.type" :disabled="item.disabled"
              :plain="item.plain ? item.plain : false" v-hasPermi="item.hasPermi ? item.hasPermi : hasPermi.lookup">点击上传
            </el-button>
          </el-upload>
          <el-button v-else style="float: left;margin-right: 10px" :type="item.type" :size="item.size" :icon="item.icon"
            :plain="item.plain ? item.plain : false" :disabled="item.disabled"
            v-hasPermi="item.hasPermi ? item.hasPermi : hasPermi.lookup" @click="buttonList(item)">
            {{ item.name }}
          </el-button>
        </span>
      </div>
      <div class="tabSetting" style="float: right;margin: 10px 0">
        <div style="margin-left:10px;float: right">
          <el-button icon="el-icon-setting" size="mini" circle @click="showSetting = !showSetting"></el-button>
        </div>
        <right-toolbar v-if="isItHidden" @showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </div>
      <div style="margin:10px 10px 0 0;float: right;" v-if="isItHidden">
        <el-button type="success" plain icon="el-icon-search" size="mini" @click="feedback('搜索')">搜索</el-button>
        <el-button type="warning" plain icon="el-icon-refresh-left" @click="feedback('重置')" size="mini">重置</el-button>
        <el-button type="info" plain icon="el-icon-open" @click="feedback('展开')" size="mini">展开</el-button>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
      :row-class-name="rowClassName" :show-summary="tatolLabel ? true : false" :summary-method="listTotal"
      @expand-change="expandChange" class="apTable">
      <el-table-column type="expand" v-if="expandBool">
        <template slot-scope="props">
          <el-table :data="props.row.itemData" style="width: 100%">
            <el-table-column v-for="(item, index) in itemdetailStyle" :key="index" :prop="item.label"
              :label="item.name" :width="item.width" :fixed="item.fixed"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="60" align="center" fixed="left" />
      <el-table-column v-for="(item, index) in queryList.columnList" :key="index" :prop="item.label" :label="item.name"
        :width="item.width" :fixed="item.fixed" :show-overflow-tooltip="item.changeable ? false : true" align="center"
        sortable>
        <template slot-scope="scope">
          <!--          <span style="display:none;">{{item.disabled}}</span>-->
          <span v-if="item.name === '操作'">
            <span v-if="item.operation == 1">
              <el-button type="text" @click="viewMethod(scope)" v-hasPermi="hasPermi.lookup">查看</el-button>
              <!--              <el-button type="text" @click="modification(scope)">修改</el-button>-->
              <el-button type="text" @click="deletion(scope)" v-if="scope.row.fBillstatus < 4 || !scope.row.fBillstatus"
                v-hasPermi="hasPermi.disappear">删除</el-button>
            </span>
            <span v-if="item.operation == 2">
              <el-button type="text" @click="deleteRow(scope.$index, tableData)" :disabled="item.disabled">移除
              </el-button>
            </span>
          </span>
          <span v-else-if="item.changeable && listData">
            <el-select v-if="item.changeable == 1" filterable :disabled="item.disabled" @change="change(scope)"
              v-model="scope.row[item.label]" slot="prepend" placeholder="请选择">
              <el-option v-for="(item, index) in listData[item.label]" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <el-input v-if="item.changeable == 2" @input="totalAmount(scope, item)" :disabled="item.disabled"
              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"
              :disabled="item.disabled" style="width: 100%" placeholder="选择日期" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </span>
          <!-- <span v-else-if="item.label == 'projectName' && CRKTJ" 
            style="color: #409EFF;cursor: pointer"
            @click.stop="jump(scope.row)">{{ scope.row[item.label] }}</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";
import { getToken } from '@/utils/auth'
export default {
  name: 'listComponent',
  props: ['tableData', 'listStyle', 'queryList', 'customButton', 'arrow', 'setRowList', 'isItHidden', 'tatolLabel', 'listData', 'hasPermi', 'CRKTJ','expandBool','itemdetailStyle'],
  data() {
    return {
      showSetting: false,
      allCheck: false,
      headers: {
        Authorization: "Bearer " + getToken()
      },
    }
  },
  watch: {
    queryList: function (newValue, oldValue) {
      console.log(newValue, oldValue)
      this.queryList.columnList = newValue.columnList
    },
  },
  created() {
    console.log(this.listStyle)
    console.log(this.queryList)
    console.log(this.queryList.columnList.length)
  },
  methods: {
    //下拉数据变动时触发
    change(scope) {
      this.$emit('change', scope)
    },
    //输入框数据变动时触发
    totalAmount(scope, item) {
      this.$emit('totalAmount', scope, item)
    },
    //合计
    listTotal(param) {
      const { columns, data } = param
      const sums = []
      for (let item in this.tatolLabel) {
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
          } else if (column.label == this.tatolLabel[item]) {
            const values = data.map((item) => Number(item[column.property]))
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0)
              sums[index] = sums[index].toFixed(2)
            }
          }
        })
      }
      return sums
    },
    initData() {
      this.queryList.columnList = this.queryList.columnList
      console.log(this.queryList.columnList)
    },
    //行号设置
    rowClassName({ row, rowIndex }) {
      // console.log(row,rowIndex)
      //把每一行的索引放进row.id
      row.serialNumber = rowIndex + 1;
      // console.log(row.fLineNumber)
    },
    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.queryList.columnList.map((e) => {
          return (e.checked = 0);
        });
      } else {
        this.queryList.columnList.map((e) => {
          return (e.checked = 1);
        });
      }
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    //保存列设置
    save() {
      this.showSetting = false;
      let data = {
        tableName: this.queryList.tableName,
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList,
      };
      addSet(data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.queryList.columnList = 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.$set(this.queryList, 'columnList', this.listStyle)
          this.setRowList = this.listStyle;
        }
      });
    },
    showSearch() {
      this.$emit('showSearch')
    },
    handleAvatarSuccess(response, file, fileList) {
      console.log()
      if (response.code == 200) {
        this.$emit('handleAvatarSuccess')
      } else {
        this.$message.error(response.msg);
      }
    },
    //刷新按钮
    getList() {
      this.$emit('getList')
    },
    //搜索、重置、展开
    feedback(res) {
      this.$emit('feedback', res)
    },
    //所有按钮
    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) {
      this.$emit('deletRows', index, rows)
    },
    //选择
    handleSelectionChange(selection) {
      this.$emit('selectionbox', selection)
    },
    handleClick() {
      this.$emit('handleClick')
    },
    jump(row) {
      this.$emit('jump', row)
      // console.log(row)
    },
    expandChange(row) {
      this.$emit('expandChange', row)
    }
  },
}
</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%;
}
.apTable /deep/ .el-table__expanded-cell[class*=cell] {
    padding: 0px 60px;
}
</style>