pc-component-v5/packages/info/src/DocGeneratorSelected.vue

<template>
  <div class="flex-container-2">
    <div class="flex-content-2 table-fix-head-2">
      <table
        class="fixed-table table-striped table-bordered"
        :width="tableWidth"
        height="40px"
      >
        <thead>
          <tr height="40px">
            <th
              width="50px"
              class="fixed-cell"
            >
              序号
            </th>

            <th
              width="50px"
              class="fixed-cell"
            >
              操作
            </th>

            <th
              v-for="infoGridField in infoGridFields"
              v-show="infoGridField.isShow"
              :key="infoGridField.fieldName"
              :width="infoGridField.width + 'px'"
              @click="onSort(infoGridField)"
            >
              <div
                :id="'infoGridFieldId_' + infoGridField.fieldName"
                class="rz-handle"
                draggable="true"
                @dragstart="ondragstart($event, infoGridField)"
                @drag="ondrag($event, infoGridField)"
                @dragend="ondragend($event, infoGridField)"
              />

              <div class="td-max">
                {{ infoGridField.name }}
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(rowData, index) in dataList"
            :key="rowData.id"
            height="40px"
          >
            <td class="fixed-cell">
              {{ index + 1 }}
            </td>
            <td class="fixed-cell">
              <span
                class="label label-danger"
                style="cursor: pointer;"
                @click="removeRow(rowData)"
              >删除</span>
            </td>
            <td
              v-for="infoGridField in infoGridFields"
              :key="infoGridField.fieldName + '_' + rowData.id"
            >
              <input
                v-if="infoGridField.simpleDisplayType == 'TextEditor'"
                type="text"
                class="form-control"
                :value="getDisplayValue(rowData, infoGridField)"
                @keyup="valueChange($event, rowData, infoGridField)"
              />
              <input
                v-if="infoGridField.simpleDisplayType == 'NumberEditor'"
                type="number"
                class="form-control"
                :value="getDisplayValue(rowData,infoGridField)"
                @keyup="valueChange($event, rowData, infoGridField)"
              />
              <span v-if="infoGridField.simpleDisplayType == undefined">
                {{ rowData.data[infoGridField.fieldName]==undefined?"":rowData.data[infoGridField.fieldName].displayValue[0] }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div
      class="flex-footer-2"
      style="margin-top: 10px;"
    >
      <div class="pull-left">
        <span>
          共计 {{ dataList.length }} 条
        </span>
      </div>
    </div>
  </div>
</template>

<script>
var Common = require('../../common/Common.js').default;
var Notify = require('../../common/Notify.js').default;
var InfoUtil = require('./InfoUtil.js').default;

export default {

  components: {
  },
  props: {
    // 查询窗口编号
    'infoWindowNo': {
      type: String,
      default: null,
    }, 
    // 表格字段
    'infoGridFields': {
      type: Object,
      default: null,
    },
  },

  emits: ['selectChanged'],

  data: function () {
    return {
      dataList: [],
      sortStyle: '',
      sortClause: '',
    };
  },
  
  computed: {
    /**
         * 自动计算表格的宽度
         */
    tableWidth: function () {
      var totalWidth = 50;
      if (this.infoGridFields !== undefined) {
        this.infoGridFields.forEach(function (infoGridField) {
          if (infoGridField.width !== undefined
                        && infoGridField.width !== null
                        && infoGridField.width !== '') {
            totalWidth += Number(infoGridField.width);
          }
        });
      }
      return totalWidth + 'px';
    },
  },

  methods: {

    /**
         * 列开始拖动
         * @author YangZhiJie 20210909
         */
    ondragstart: function (event, gridFieldItem) {
      var _self = this;
      _self.startX = event.pageX;
      _self.startWidth = Number(gridFieldItem.width);
    },

    /**
         * 列拖动
         * @author YangZhiJie 20210909
         */
    ondrag: function (event, gridFieldItem) {
      var _self = this;
      gridFieldItem.width = _self.startWidth + (event.pageX - _self.startX);
    },

    /**
         * 列结束拖动
         * @author YangZhiJie 20210909
         */
    ondragend: function (event, gridFieldItem, index) {
      var _self = this;
      var gridFieldItemClone = {
        'id': gridFieldItem.id,
        'index': index,
        'isShow': gridFieldItem.isShow,
        'width': gridFieldItem.width,
        'sortNo': gridFieldItem.sortNo,
        'fieldName': gridFieldItem.fieldName,
      };
      gridFieldItemClone.width = _self.startWidth + (event.pageX - _self.startX);
      if (gridFieldItemClone.width < 50) {
        gridFieldItemClone.width = 50;
      }
      gridFieldItem.width = gridFieldItemClone.width;
      InfoUtil.saveInfoGridField(_self.infoWindowNo, gridFieldItemClone);
      InfoUtil.restoreInfoGridField(_self.infoWindowNo, _self.infoGridFields);
    },


    /**
         * 排序
         * @author YangZhiJie 20210909
         */
    onSort: function (infoGridField) {
      var _self = this;
      var fieldName = null;
      if (infoGridField.sortFieldName != undefined && infoGridField.sortFieldName != '') {
        fieldName = infoGridField.sortFieldName;
      } else {
        fieldName = infoGridField.fieldName;
      }
      _self.sortClause = fieldName + _self.sortStyle;
      _self.sortStyle = ((_self.sortStyle === ' ASC') ? ' DESC' : ' ASC');
      console.warn('暂时不支持排序。');
    },


    /**
         * 冻结表头
         * @author YangZhiJie 20210909
         */
    fixedTableHeader: function () {
      let _self = this;
      _self.$nextTick(function () {
        var $th = $('.table-fix-head-2').find('thead');
        var $fixedCell = $('.table-fix-head-2').find('.fixed-cell');
        $('.table-fix-head-2').on('scroll', function () {
          $th.css('transform', 'translateY(' + this.scrollTop + 'px)');
          $fixedCell.css('transform', 'translateX(' + this.scrollLeft + 'px)');
        });
      });
    },


    /**
         * 表格中填写的值发生了改变
         * @author YangZhiJie 20210909
         */
    valueChange: function (event, rowData, infoGridField) {
      var _self = this;
      var value = event.target.value;
      const fieldName = infoGridField.fieldName;
      if (rowData.data[fieldName] == undefined) {
        var tempFieldValue = {
          displayValue: [value],
        };
        rowData.data[fieldName] = tempFieldValue;
      } else {
        rowData.data[fieldName].displayValue[0] = value;
      }
      rowData.checked = true;
    },

    /**
         * 获取显示的值
         * @author YangZhiJie 20210909
         */
    getDisplayValue(rowData, infoGridField) {
      let fieldValue = rowData.data[infoGridField.fieldName];
      if (fieldValue === undefined || fieldValue === null) {
        return '';
      } else {
        return fieldValue.displayValue[0];
      }
    },


    /**
         * 设置dataList数据
         * @author YangZhiJie 20210908
         */
    parseDataList: function (dataList) {
      let _self = this;
      if (dataList === null || dataList === undefined) {
        return;
      }
      if (!Array.isArray(dataList)) {
        console.error('参数异常，参数不是数组类型。');
        console.error(dataList);
        return;
      }

      const tempDataList = JSON.parse(JSON.stringify(dataList));
      for (let index = 0, length = tempDataList.length; index < length; index++) {
        let tempData = tempDataList[index];
        let rowData = this.getRowDataById(tempData.id);
        if(tempData.checked === true){
          if(rowData === null){
            this.dataList[this.dataList.length]=tempData;
          } else {
            let dataListIndex = this.dataList.indexOf(rowData);
            this.dataList[dataListIndex]=tempData;
          }
        } else if(tempData.checked === false){
          if(rowData !== null){
            let dataListIndex = this.dataList.indexOf(rowData);
            this.dataList.splice(dataListIndex, 1);
          }
        }
      }

      this.$nextTick(function(){
        _self.fixedTableHeader();
      });
    },

    /**
         * 删除用户行
         * @param rowData 行数据
         * @author YangZhiJie 2021-09-08
         */
    removeRow: function(rowData){
      let index = this.dataList.indexOf(rowData);
      if(index >= 0){
        this.dataList.splice(index, 1);
      }
      this.$emit('selectChanged');
    },

    /**
         * 根据id获取行数据
         * @author YangZhiJie 20210909
         */
    getRowDataById: function(id){
      for (let index = 0, length = this.dataList.length; index < length; index++) {
        if(this.dataList[index].id === id){
          return this.dataList[index];
        }
      }
      return null;
    },

    /**
         * 根据id判断数据是否被选中
         * 供外部接口调用
         * @author YangZhiJie 20210909
         */
    isSelectedById: function(id){
      let rowData = this.getRowDataById(id);
      return rowData === null ? false : true;
    },


    /**
         * 获取选中的数据
         * 供外部接口调用
         * @author YangZhiJie 20210909
         */
    getSelectedData: function(){
      return this.dataList;
    },

  },
};
</script>

<style scoped>
.flex-container-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 10px);
}

.flex-content-2 {
    flex: 1;
    overflow: auto;
    width: 100%;
    margin-top: 5px;
}

.flex-footer-2 {
    height: 35px;
    /*放大缩小比例为0 */
    flex: 0 0 35px;
}
</style>


<style scoped>
.fixed-table {
    table-layout: fixed;
}

.fixed-cell{
    text-align: center;
}

table.fixed-table th {
    position: relative;
    min-width: 10px;
}

table.fixed-table tr td:first-child,
table.fixed-table tr th:first-child {
    text-align: center;
}

table.fixed-table th,
table.fixed-table td {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0.1em;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    background-color: white;
}

table.fixed-table th .rz-handle {
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.05) 2px,
        rgba(0, 0, 0, 0.05) 4px
    );
    cursor: ew-resize !important;
}

table.fixed-table th .rz-handle.rz-handle-active {
    border-right: 1px dotted #000;
}
</style>