|
|
@@ -1,405 +1,425 @@
|
|
|
<template>
|
|
|
- <div class="flex-container-1">
|
|
|
- <div class="flex-content-1 table-fix-head">
|
|
|
- <table class="fixed-table table-striped table-bordered"
|
|
|
- :width="tableWidth"
|
|
|
- height="40px">
|
|
|
- <thead>
|
|
|
- <tr height="40px">
|
|
|
- <th width="50px"
|
|
|
- class="fixed-cell">
|
|
|
- <input @click="selectAll($event)"
|
|
|
- :checked="allSelected"
|
|
|
- type="checkbox" />
|
|
|
- </th>
|
|
|
-
|
|
|
- <th v-for="infoGridField in infoGridFields"
|
|
|
- v-show="infoGridField.isShow"
|
|
|
- :key="infoGridField.fieldName"
|
|
|
- :width="infoGridField.width + 'px'"
|
|
|
- @dragover="ondragover($event, infoGridField)"
|
|
|
- @click="onSort(infoGridField)">
|
|
|
-
|
|
|
- <div class="rz-handle"
|
|
|
- draggable='true'
|
|
|
- :id="'infoGridFieldId_' + infoGridField.fieldName"
|
|
|
- @dragstart="ondragstart($event, infoGridField)"
|
|
|
- @drag="ondrag($event, infoGridField)"
|
|
|
- @dragend="ondragend($event, infoGridField)">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="td-max">
|
|
|
- {{infoGridField.name}}
|
|
|
- </div>
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="rowData in dataList"
|
|
|
- :key="rowData.id"
|
|
|
- height="40px">
|
|
|
- <td class="fixed-cell">
|
|
|
- <input v-model="rowData.checked"
|
|
|
- type="checkbox"
|
|
|
- :value="rowData.id" />
|
|
|
- </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 == null || infoGridField.simpleDisplayType == '' || infoGridField.simpleDisplayType == 'NONE'">
|
|
|
- {{ rowData.data[infoGridField.fieldName] == undefined ? "" : rowData.data[infoGridField.fieldName].displayValue[0] }}
|
|
|
- </span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex-footer-1"
|
|
|
- style="margin-top: 10px;">
|
|
|
- <div class="pull-left">
|
|
|
- <span>
|
|
|
- 第
|
|
|
- {{(pagination.current_page-1)*pagination.per_page+1}}
|
|
|
- -
|
|
|
- {{pagination.current_page*pagination.per_page}}
|
|
|
- 条,共计
|
|
|
- {{pagination.total}}
|
|
|
- 条,每页
|
|
|
- </span>
|
|
|
- <PageSizeSelect v-on:pageSizeChanged="gridSizeSelect">
|
|
|
-
|
|
|
- </PageSizeSelect>
|
|
|
-
|
|
|
- <span>条</span>
|
|
|
- </div>
|
|
|
- <div class="pull-right">
|
|
|
- <Pagination :pagination="pagination"
|
|
|
- :callback="refreshSearch"></Pagination>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="flex-container-1">
|
|
|
+ <div class="flex-content-1 table-fix-head">
|
|
|
+ <table
|
|
|
+ class="fixed-table table-striped table-bordered"
|
|
|
+ :width="tableWidth"
|
|
|
+ height="40px"
|
|
|
+ >
|
|
|
+ <thead>
|
|
|
+ <tr height="40px">
|
|
|
+ <th
|
|
|
+ width="50px"
|
|
|
+ class="fixed-cell"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ :checked="allSelected"
|
|
|
+ type="checkbox"
|
|
|
+ @click="selectAll($event)"
|
|
|
+ />
|
|
|
+ </th>
|
|
|
+
|
|
|
+ <th
|
|
|
+ v-for="infoGridField in infoGridFields"
|
|
|
+ v-show="infoGridField.isShow"
|
|
|
+ :key="infoGridField.fieldName"
|
|
|
+ :width="infoGridField.width + 'px'"
|
|
|
+ @dragover="ondragover($event, infoGridField)"
|
|
|
+ @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 in dataList"
|
|
|
+ :key="rowData.id"
|
|
|
+ height="40px"
|
|
|
+ >
|
|
|
+ <td class="fixed-cell">
|
|
|
+ <input
|
|
|
+ v-model="rowData.checked"
|
|
|
+ type="checkbox"
|
|
|
+ :value="rowData.id"
|
|
|
+ />
|
|
|
+ </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 == null || infoGridField.simpleDisplayType == '' || infoGridField.simpleDisplayType == 'NONE'">
|
|
|
+ {{ rowData.data[infoGridField.fieldName] == undefined ? "" : rowData.data[infoGridField.fieldName].displayValue[0] }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="flex-footer-1"
|
|
|
+ style="margin-top: 10px;"
|
|
|
+ >
|
|
|
+ <div class="pull-left">
|
|
|
+ <span>
|
|
|
+ 第
|
|
|
+ {{ (pagination.current_page-1)*pagination.per_page+1 }}
|
|
|
+ -
|
|
|
+ {{ pagination.current_page*pagination.per_page }}
|
|
|
+ 条,共计
|
|
|
+ {{ pagination.total }}
|
|
|
+ 条,每页
|
|
|
+ </span>
|
|
|
+ <PageSizeSelect @page-size-changed="gridSizeSelect" />
|
|
|
+
|
|
|
+ <span>条</span>
|
|
|
+ </div>
|
|
|
+ <div class="pull-right">
|
|
|
+ <Pagination
|
|
|
+ :pagination="pagination"
|
|
|
+ :callback="refreshSearch"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-var Common = require("../../common/Common.js");
|
|
|
-var InfoUtil = require("./InfoUtil.js");
|
|
|
-var Pagination = require("../../vue-bootstrap-pagination/src/vue-bootstrap-pagination.vue").default;
|
|
|
-var PageSizeSelect = require("../../page-size-select/src/PageSizeSelect.vue").default;
|
|
|
+var Common = require('../../common/Common.js');
|
|
|
+var InfoUtil = require('./InfoUtil.js');
|
|
|
+var Pagination = require('../../vue-bootstrap-pagination/src/vue-bootstrap-pagination.vue').default;
|
|
|
+var PageSizeSelect = require('../../page-size-select/src/PageSizeSelect.vue').default;
|
|
|
|
|
|
export default {
|
|
|
- props: [
|
|
|
- "infoWindowNo", // 查询窗口编号
|
|
|
- "infoGridFields", // 表格字段
|
|
|
- "infoWindowData", // 渲染的数据
|
|
|
- "isSelectedById", // 方法：根据id判断数据是否被选中
|
|
|
- ],
|
|
|
-
|
|
|
- data: function () {
|
|
|
- return {
|
|
|
- dataList: [],
|
|
|
- pagination: {
|
|
|
- total: 0,
|
|
|
- per_page: Common.pageSize, // required
|
|
|
- current_page: 1, // required
|
|
|
- last_page: 10, // required
|
|
|
- },
|
|
|
- sortStyle: '',
|
|
|
- sortClause: '',
|
|
|
+
|
|
|
+ components: {
|
|
|
+ Pagination,
|
|
|
+ PageSizeSelect,
|
|
|
+ },
|
|
|
+ props: [
|
|
|
+ 'infoWindowNo', // 查询窗口编号
|
|
|
+ 'infoGridFields', // 表格字段
|
|
|
+ 'infoWindowData', // 渲染的数据
|
|
|
+ 'isSelectedById', // 方法：根据id判断数据是否被选中
|
|
|
+ ],
|
|
|
+
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ dataList: [],
|
|
|
+ pagination: {
|
|
|
+ total: 0,
|
|
|
+ per_page: Common.pageSize, // required
|
|
|
+ current_page: 1, // required
|
|
|
+ last_page: 10, // required
|
|
|
+ },
|
|
|
+ sortStyle: '',
|
|
|
+ sortClause: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ /**
|
|
|
+ * 自动计算表格的宽度
|
|
|
+ * @author YangZhiJie 20210909
|
|
|
+ */
|
|
|
+ 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';
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 是否选择了全部的数据
|
|
|
+ * @author YangZhiJie 20210909
|
|
|
+ */
|
|
|
+ allSelected: function () {
|
|
|
+ var _self = this;
|
|
|
+ if (this.dataList === undefined || this.dataList === null || this.dataList.length == 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let index = 0, length = this.dataList.length; index < length; index++) {
|
|
|
+ if (this.dataList[index].checked === false) {
|
|
|
+ return false;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
},
|
|
|
+ },
|
|
|
|
|
|
- components: {
|
|
|
- Pagination,
|
|
|
- PageSizeSelect,
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ infoWindowData: function (newValue, oldValue) {
|
|
|
+ this.setDataList(newValue);
|
|
|
},
|
|
|
|
|
|
- methods: {
|
|
|
- /**
|
|
|
+ dataList: {
|
|
|
+ handler: function(newValue, oldValue){
|
|
|
+ // 清除延迟执行
|
|
|
+ if(this.selectChangedTimeout !== undefined && this.selectChangedTimeout !== null){
|
|
|
+ window.clearTimeout(this.selectChangedTimeout);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置延迟执行
|
|
|
+ this.selectChangedTimeout = setTimeout(()=>{
|
|
|
+ console.log('selectChanged');
|
|
|
+ this.$emit('selectChanged', this.dataList);
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
* 重新设置分页
|
|
|
* 供外部组件调用
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- resetPagination: function () {
|
|
|
- this.pagination.current_page = 1;
|
|
|
- this.pagination.last_page = 10;
|
|
|
- this.pagination.total = 0;
|
|
|
- },
|
|
|
+ resetPagination: function () {
|
|
|
+ this.pagination.current_page = 1;
|
|
|
+ this.pagination.last_page = 10;
|
|
|
+ this.pagination.total = 0;
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 设置分页
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- setPagination: function (total, lastPage) {
|
|
|
- this.pagination.last_page = lastPage;
|
|
|
- this.pagination.total = total;
|
|
|
- },
|
|
|
+ setPagination: function (total, lastPage) {
|
|
|
+ this.pagination.last_page = lastPage;
|
|
|
+ this.pagination.total = total;
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 获取查询参数
|
|
|
* 供外部组件调用
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- getQueryParam: function () {
|
|
|
- return {
|
|
|
- infoWindowNo: this.infoWindowNo,
|
|
|
- start: (this.pagination.current_page - 1) * this.pagination.per_page,
|
|
|
- length: this.pagination.per_page,
|
|
|
- sortClause: this.sortClause,
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
+ getQueryParam: function () {
|
|
|
+ return {
|
|
|
+ infoWindowNo: this.infoWindowNo,
|
|
|
+ start: (this.pagination.current_page - 1) * this.pagination.per_page,
|
|
|
+ length: this.pagination.per_page,
|
|
|
+ sortClause: this.sortClause,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
* 页码数量改变
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- gridSizeSelect: function (newPageSize) {
|
|
|
- this.pagination.per_page = newPageSize;
|
|
|
- this.pagination.current_page = 1;
|
|
|
- },
|
|
|
+ gridSizeSelect: function (newPageSize) {
|
|
|
+ this.pagination.per_page = newPageSize;
|
|
|
+ this.pagination.current_page = 1;
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 列开始拖动
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- ondragstart: function (event, gridFieldItem) {
|
|
|
- var _self = this;
|
|
|
- _self.startX = event.pageX;
|
|
|
- _self.startWidth = Number(gridFieldItem.width);
|
|
|
- event.dataTransfer.setDragImage(event.target, 0, 20);
|
|
|
- event.dataTransfer.effectAllowed = 'move';
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
+ ondragstart: function (event, gridFieldItem) {
|
|
|
+ var _self = this;
|
|
|
+ _self.startX = event.pageX;
|
|
|
+ _self.startWidth = Number(gridFieldItem.width);
|
|
|
+ event.dataTransfer.setDragImage(event.target, 0, 20);
|
|
|
+ event.dataTransfer.effectAllowed = 'move';
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
* 列拖动
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- ondrag: function (event, gridFieldItem) {
|
|
|
- var _self = this;
|
|
|
- gridFieldItem.width = _self.startWidth + (event.pageX - _self.startX);
|
|
|
- },
|
|
|
+ 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;
|
|
|
+ ondragend: function (event, gridFieldItem, index) {
|
|
|
+ var _self = this;
|
|
|
|
|
|
- let newWidth = _self.startWidth + (event.pageX - _self.startX);
|
|
|
- if (newWidth < 50) {
|
|
|
- newWidth = 50;
|
|
|
- }
|
|
|
- gridFieldItem.width = newWidth;
|
|
|
+ let newWidth = _self.startWidth + (event.pageX - _self.startX);
|
|
|
+ if (newWidth < 50) {
|
|
|
+ newWidth = 50;
|
|
|
+ }
|
|
|
+ gridFieldItem.width = newWidth;
|
|
|
|
|
|
- gridFieldItem.width = gridFieldItemClone.width;
|
|
|
- InfoUtil.saveInfoGridFields(_self.infoWindowDto.no, _self.infoGridFields);
|
|
|
+ //gridFieldItem.width = gridFieldItemClone.width;
|
|
|
+ InfoUtil.saveInfoGridFields(_self.infoWindowDto.no, _self.infoGridFields);
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- ondragover: function (event, gridFieldItem) {
|
|
|
- event.preventDefault()
|
|
|
- event.dataTransfer.dropEffect = 'move';
|
|
|
- },
|
|
|
+ ondragover: function (event, gridFieldItem) {
|
|
|
+ event.preventDefault();
|
|
|
+ event.dataTransfer.dropEffect = 'move';
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 排序
|
|
|
* @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;
|
|
|
-
|
|
|
- this.$emit("refreshSearch");
|
|
|
-
|
|
|
- _self.sortStyle = ((_self.sortStyle === " ASC") ? " DESC" : " ASC");
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
+ 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;
|
|
|
+
|
|
|
+ this.$emit('refreshSearch');
|
|
|
+
|
|
|
+ _self.sortStyle = ((_self.sortStyle === ' ASC') ? ' DESC' : ' ASC');
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
* 发送查询请求
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- refreshSearch: function(){
|
|
|
- this.$emit("refreshSearch");
|
|
|
- },
|
|
|
+ refreshSearch: function(){
|
|
|
+ this.$emit('refreshSearch');
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 冻结表头
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- fixedTableHeader: function () {
|
|
|
- let _self = this;
|
|
|
- _self.$nextTick(function () {
|
|
|
- var $th = $('.table-fix-head').find('thead');
|
|
|
- var $fixedCell = $('.table-fix-head').find('.fixed-cell');
|
|
|
- $('.table-fix-head').on('scroll', function () {
|
|
|
- $th.css('transform', 'translateY(' + this.scrollTop + 'px)');
|
|
|
- $fixedCell.css('transform', 'translateX(' + this.scrollLeft + 'px)');
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
+ fixedTableHeader: function () {
|
|
|
+ let _self = this;
|
|
|
+ _self.$nextTick(function () {
|
|
|
+ var $th = $('.table-fix-head').find('thead');
|
|
|
+ var $fixedCell = $('.table-fix-head').find('.fixed-cell');
|
|
|
+ $('.table-fix-head').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]
|
|
|
- };
|
|
|
- this.$set(rowData.data, fieldName, tempFieldValue);
|
|
|
- } else {
|
|
|
- this.$set(rowData.data[fieldName].displayValue, 0, value);
|
|
|
- }
|
|
|
- rowData.checked = true;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
+ 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],
|
|
|
+ };
|
|
|
+ this.$set(rowData.data, fieldName, tempFieldValue);
|
|
|
+ } else {
|
|
|
+ this.$set(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];
|
|
|
- }
|
|
|
- },
|
|
|
+ getDisplayValue(rowData, infoGridField) {
|
|
|
+ let fieldValue = rowData.data[infoGridField.fieldName];
|
|
|
+ if (fieldValue === undefined || fieldValue === null) {
|
|
|
+ return '';
|
|
|
+ } else {
|
|
|
+ return fieldValue.displayValue[0];
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 选择所有/取消选择的数据
|
|
|
* @author YangZhiJie 20210909
|
|
|
*/
|
|
|
- selectAll: function (event) {
|
|
|
- var isChecked = event.currentTarget.checked;
|
|
|
+ selectAll: function (event) {
|
|
|
+ var isChecked = event.currentTarget.checked;
|
|
|
|
|
|
- if (this.dataList === undefined || this.dataList === null || this.dataList.length == 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (this.dataList === undefined || this.dataList === null || this.dataList.length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- for (let index = 0, length = this.dataList.length; index < length; index++) {
|
|
|
- this.dataList[index].checked = isChecked;
|
|
|
- }
|
|
|
- },
|
|
|
+ for (let index = 0, length = this.dataList.length; index < length; index++) {
|
|
|
+ this.dataList[index].checked = isChecked;
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 设置dataList数据
|
|
|
* @author YangZhiJie 20210908
|
|
|
*/
|
|
|
- setDataList: function (dataList) {
|
|
|
- let _self = this;
|
|
|
- if (dataList === null || dataList === undefined) {
|
|
|
- this.dataList.splice(0, this.dataList.length);
|
|
|
- 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++) {
|
|
|
- if(this.isSelectedById != null){
|
|
|
- tempDataList[index].checked = this.isSelectedById(tempDataList[index].id);
|
|
|
- }else{
|
|
|
- tempDataList[index].checked = false;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- this.dataList = tempDataList;
|
|
|
-
|
|
|
- this.$nextTick(function(){
|
|
|
- _self.fixedTableHeader();
|
|
|
- });
|
|
|
+ setDataList: function (dataList) {
|
|
|
+ let _self = this;
|
|
|
+ if (dataList === null || dataList === undefined) {
|
|
|
+ this.dataList.splice(0, this.dataList.length);
|
|
|
+ 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++) {
|
|
|
+ if(this.isSelectedById != null){
|
|
|
+ tempDataList[index].checked = this.isSelectedById(tempDataList[index].id);
|
|
|
+ }else{
|
|
|
+ tempDataList[index].checked = false;
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
|
|
|
- computed: {
|
|
|
- /**
|
|
|
- * 自动计算表格的宽度
|
|
|
- * @author YangZhiJie 20210909
|
|
|
- */
|
|
|
- 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";
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 是否选择了全部的数据
|
|
|
- * @author YangZhiJie 20210909
|
|
|
- */
|
|
|
- allSelected: function () {
|
|
|
- var _self = this;
|
|
|
- if (this.dataList === undefined || this.dataList === null || this.dataList.length == 0) {
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- for (let index = 0, length = this.dataList.length; index < length; index++) {
|
|
|
- if (this.dataList[index].checked === false) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return true;
|
|
|
- },
|
|
|
- },
|
|
|
+ this.dataList = tempDataList;
|
|
|
|
|
|
- watch: {
|
|
|
-
|
|
|
- infoWindowData: function (newValue, oldValue) {
|
|
|
- this.setDataList(newValue);
|
|
|
- },
|
|
|
-
|
|
|
- dataList: {
|
|
|
- handler: function(newValue, oldValue){
|
|
|
- // 清除延迟执行
|
|
|
- if(this.selectChangedTimeout !== undefined && this.selectChangedTimeout !== null){
|
|
|
- window.clearTimeout(this.selectChangedTimeout);
|
|
|
- }
|
|
|
-
|
|
|
- // 设置延迟执行
|
|
|
- this.selectChangedTimeout = setTimeout(()=>{
|
|
|
- console.log('selectChanged');
|
|
|
- this.$emit("selectChanged", this.dataList);
|
|
|
- }, 500);
|
|
|
- },
|
|
|
- deep: true
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ this.$nextTick(function(){
|
|
|
+ _self.fixedTableHeader();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
