Skip to content

M
mes-pad
Commit 93fdb87b authored by mengcheng's avatar mengcheng
Browse files
Options

修改主体样式

parent 250b3774
Show whitespace changes
Inline Side-by-side
Showing with 881 additions and 731 deletions
common/http.api.js
View file @ 93fdb87b
...@@ -64,6 +64,9 @@ const install = (Vue, vm) => { ...@@ -64,6 +64,9 @@ const install = (Vue, vm) => {
//根据字典类型查询字典数据信息 //根据字典类型查询字典数据信息
getDicts: (params = {}) => vm.$u.get(config.adminPath + '/system/dict/data/type/' + params), getDicts: (params = {}) => vm.$u.get(config.adminPath + '/system/dict/data/type/' + params),
//根据字典类型查询字典数据信息
getIssusLinebyWorkorderCodes: (params = {}) => vm.$u.post(config.adminPath + '/mobile/wm/issueline/listByWorkorderCodes', params),
/** /**
* 工艺工序相关API * 工艺工序相关API
......
components/DictData/index.js
View file @ 93fdb87b
...@@ -2,21 +2,35 @@ ...@@ -2,21 +2,35 @@
import DataDict from '@/common/dict' import DataDict from '@/common/dict'
// import http from '@/common/http.api' // import http from '@/common/http.api'
const cache = {}; // 用于缓存已请求的字典数据
const install = (Vue, vm) => { const install = (Vue, vm) => {
Vue.use(DataDict, { Vue.use(DataDict, {
metas: { metas: {
'*': { '*': {
labelField: 'dictLabel', labelField: 'dictLabel',
valueField: 'dictValue', valueField: 'dictValue',
request(dictMeta) { request(dictMeta) {
return vm.$u.api.getDicts(dictMeta.type).then(res => res.data) if (cache[dictMeta.type]) {
return Promise.resolve(cache[dictMeta.type]);
} else {
// return vm.$u.api.getDicts(dictMeta.type).then(res => res.data)
return vm.$u.api.getDicts(dictMeta.type).then(res => {
cache[dictMeta.type] = res.data;
return res.data;
});
}
}, },
}, },
}, },
}) })
} }
const logout = () => {
Object.keys(cache).forEach(key => delete cache[key]);
};
export default { export default {
install, install,
logout
} }
components/ScanInput/index.vue
View file @ 93fdb87b
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="inputp"> <div class="inputp">
<div class="inputs"> <div class="inputs">
<u-icon name="search" size="35" class='searchimg' @click='search'/> <u-icon name="search" size="35" class='searchimg' @click='search'/>
<input type="text" v-model="searchval" :placeholder="placeholder" @blur="search" confirm-type="search" inputmode="search" ref='searchinput' :focus='isfocus' <input type="text" v-model="value" :placeholder="placeholder" confirm-type="search"
class='scaninput' @confirm='search' > inputmode="search" ref='searchinput' :focus='isfocus' class='scaninput' @input='search'>
<u-icon name="scan" size="35" class="scanimg" @click='clickscan'/> <u-icon name="scan" size="35" class="scanimg" @click='clickscan'/>
</div> </div>
</div> </div>
...@@ -13,27 +13,24 @@ ...@@ -13,27 +13,24 @@
export default { export default {
name: 'SearchInput', name: 'SearchInput',
props: { props: {
hasscanbtn: Boolean,//是否有扫码按钮 hasscanbtn: Boolean,
isfocus: Boolean,//是否默认focus isfocus: Boolean,
hasgosearch: Boolean,//是否要跳转到搜索界面 hasgosearch: Boolean,
types: Number,//跳转的时候的参数type值 types: Number,
placeholder: { placeholder: {
type: String, type: String,
default: '搜索车辆编号' default: '搜索车辆编号'
}, },
gourl: {//跳转的搜索页面 gourl: {
type: String, type: String,
default: '/pages/scan/scan' default: '/pages/scan/scan'
}
}, },
data() { value: {
return { type: String,
showsearchbtn: false, default: ''
searchval: '' }
};
}, },
methods: { methods: {
// 点击input的时候
clickinput() { clickinput() {
// var me = this; // var me = this;
// if (me.hasgosearch) { // if (me.hasgosearch) {
...@@ -43,19 +40,17 @@ export default { ...@@ -43,19 +40,17 @@ export default {
// }) // })
// } // }
}, },
// 搜索
search() { search() {
var me = this; var me = this;
if (me.searchval === '') { if (me.value === '') {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '请先输入搜索内容' title: '请先输入搜索内容'
}) })
return; return;
} }
me.$emit('serach', me.searchval) me.$emit('serach', me.value)
}, },
// 点击扫码的时候
clickscan() { clickscan() {
var me = this; var me = this;
if (me.hasscanbtn) { if (me.hasscanbtn) {
...@@ -75,25 +70,19 @@ export default { ...@@ -75,25 +70,19 @@ export default {
code = arr[1]; code = arr[1];
} }
}) })
me.searchval = code; me.$emit('inputchange', code);
} }
}) })
} }
}, },
watch: { watch: {
searchval(v) { value(v) {
var me = this; var me = this;
me.$emit('inputchange', v) me.$emit('input', v)
if (v != '') {
me.showsearchbtn = true;
} else {
me.showsearchbtn = false;
}
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.inputp { .inputp {
padding: 20upx; padding: 20upx;
......
pages/index/index.vue
View file @ 93fdb87b
...@@ -58,6 +58,7 @@ import ProContent from "../mes/pro/index.vue" ...@@ -58,6 +58,7 @@ import ProContent from "../mes/pro/index.vue"
import GxContent from "../mes/gx/index.vue" import GxContent from "../mes/gx/index.vue"
import QcContent from "../mes/qc/index.vue" import QcContent from "../mes/qc/index.vue"
import ProdReport from "../mes/prodReport/index.vue" import ProdReport from "../mes/prodReport/index.vue"
import DictData from '@/components/DictData'
export default { export default {
name: 'HomePage', name: 'HomePage',
...@@ -155,8 +156,9 @@ export default { ...@@ -155,8 +156,9 @@ export default {
this.$u.toast(res.msg); this.$u.toast(res.msg);
} }
if (res.code == '200') { if (res.code === 200) {
setTimeout(() => { setTimeout(() => {
DictData.logout();
uni.reLaunch({ uni.reLaunch({
url: '/pages/sys/login/login' url: '/pages/sys/login/login'
}); });
...@@ -172,7 +174,7 @@ export default { ...@@ -172,7 +174,7 @@ export default {
} }
</script> </script>
<style > <style>
.common-container { .common-container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
......
pages/mes/prodReport/index.vue
View file @ 93fdb87b
...@@ -23,45 +23,42 @@ ...@@ -23,45 +23,42 @@
总报工订单数：{{ tableData.length }} 总报工订单数：{{ tableData.length }}
</view> </view>
<view class="prod-body-left-bom"> <view class="prod-body-left-bom">
<view class="prod-body-left-bom-type"> <!-- <view class="prod-body-left-bom-type">-->
<u-subsection :list="typeList" :current="currentType" type="primary" font-size="28" <!-- <u-subsection :list="typeList" :current="currentType" type="primary" font-size="28"-->
@change="typeChange"></u-subsection> <!-- @change="typeChange"></u-subsection>-->
</view> <!-- </view>-->
<view class="prod-body-left-bom-table"> <!-- <view class="prod-body-left-bom-table">-->
<u-form> <!-- <u-form>-->
<u-row gutter="16"> <!-- <u-row gutter="16">-->
<u-col span="3"> <!-- <u-col span="3">-->
<u-form-item label="任务单号" label-width="150"> <!-- <u-form-item label="任务单号" label-width="150">-->
{{ curTaskInfo.taskCode }} <!-- {{ curTaskInfo.taskCode }}-->
</u-form-item> <!-- </u-form-item>-->
</u-col> <!-- </u-col>-->
<u-col span="4"> <!-- <u-col span="4">-->
<u-form-item label="物料条码" label-width="150"> <!-- <u-form-item label="物料条码" label-width="150">-->
<SearchInput v-model="materialRecordInfo.materialBatchNumber" placeholder="请输入物料条码" <!-- <SearchInput v-model="materialRecordInfo.materialBatchNumber" placeholder="请输入物料条码"-->
hassearchbtn="true" <!-- hassearchbtn="true"-->
@inputchange="(val)=>{materialRecordInfo.materialBatchNumber=val}"/> <!-- @inputchange="(val)=>{materialRecordInfo.materialBatchNumber=val}"/>-->
</u-form-item> <!-- </u-form-item>-->
</u-col> <!-- </u-col>-->
<u-col span="2"> <!-- <u-col span="2">-->
<u-form-item label="数量"> <!-- <u-form-item label="数量">-->
<u-number-box :min="0" v-model="materialRecordInfo.quantity"></u-number-box> <!-- <u-number-box :min="0" v-model="materialRecordInfo.quantity"></u-number-box>-->
</u-form-item> <!-- </u-form-item>-->
</u-col> <!-- </u-col>-->
<u-col span="1">
<u-button type="primary" size="mini" @click="commonClick('MaterialUsageRecord')">添加</u-button>
</u-col>
<!-- <u-col span="1">--> <!-- <u-col span="1">-->
<!-- <u-button type="primary" @click="commonClick('')">删除</u-button>--> <!-- <u-button type="primary" size="mini" @click="commonClick('MaterialUsageRecord')">添加</u-button>-->
<!-- </u-col>--> <!-- </u-col>-->
<u-col span="1"> <!-- <u-col span="1">-->
<!-- <u-button type="primary" size="mini" @click="commonClick('')">领料批次</u-button>--> <!-- </u-col>-->
</u-col> <!-- <u-col span="5">-->
<u-col span="5"> <!-- </u-col>-->
</u-col> <!-- </u-row>-->
</u-row> <!-- </u-form>-->
</u-form> <zb-table :columns="issusLineColumn" :stripe="true" :fit="true" :border="true"
<zb-table :columns="bomFeeColumn" :stripe="true" :border="true" :data="materialUsageRecordList"></zb-table> :data="issusLineList"></zb-table>
</view> <!-- </view>-->
</view> </view>
</view> </view>
<view class="prod-body-right"> <view class="prod-body-right">
...@@ -105,7 +102,7 @@ ...@@ -105,7 +102,7 @@
<u-row> <u-row>
<u-col span="6"> <u-col span="6">
<u-form-item label="报工总数量" prop="quantity"> <u-form-item label="报工总数量" prop="quantity">
{{ feedback.quantityQuanlify + feedback.quantityUnquanlify }} {{ feedback.quantityQualify + feedback.quantityUnqualify }}
</u-form-item> </u-form-item>
</u-col> </u-col>
<u-col span="6"> <u-col span="6">
...@@ -362,7 +359,45 @@ export default { ...@@ -362,7 +359,45 @@ export default {
tableSelectData: [], tableSelectData: [],
feedbackForms: [], feedbackForms: [],
materialUsageRecordList: [], materialUsageRecordList: [],
materialusagerecordLoading: false materialusagerecordLoading: false,
issusLineList: [],
issusLineColumn: [
{
name: 'itemCode',
label: '产品物料编码',
},
{
name: 'itemName',
label: '产品物料名称',
},
{
name: 'specification',
label: '规格型号',
},
{
name: 'unitOfMeasure',
label: '单位',
},
{
name: 'quantityIssued',
label: '领料数量',
},
{
name: 'batchCode',
label: '批次号',
},
{
name: 'warehouseName',
label: '仓库名称',
},
{
name: 'locationName',
label: '库区名称',
},
{
name: 'areaName',
label: '库位名称',
}]
} }
}, },
created() { created() {
...@@ -421,7 +456,9 @@ export default { ...@@ -421,7 +456,9 @@ export default {
this.tableSelectData.forEach((item) => { this.tableSelectData.forEach((item) => {
this.changeStatus(item.taskId, 'FINISHED') this.changeStatus(item.taskId, 'FINISHED')
}) })
setTimeout(() => {
this.getTaskList() this.getTaskList()
}, 666)
break; break;
case 'Prod': case 'Prod':
this.doFeedback() this.doFeedback()
...@@ -442,10 +479,18 @@ export default { ...@@ -442,10 +479,18 @@ export default {
this.knifeTempSearch.locationCode = ''; this.knifeTempSearch.locationCode = '';
this.knifeTempVisible = true this.knifeTempVisible = true
}, },
getIssusLinebyWorkorderCodes() {
this.issusLineList = []
this.$u.api.getIssusLinebyWorkorderCodes({workorderCodes: ['MO202401180001']}).then(res => {
if (res.code === 200) {
this.issusLineList = res.rows;
}
});
},
rowClick(row, index) { rowClick(row, index) {
this.curTaskInfo = row; this.curTaskInfo = row;
this.getMaterialUsageRecordList(); // this.getMaterialUsageRecordList();
this.getIssusLinebyWorkorderCodes();
}, },
toggleAllSelection(checked, arr) { toggleAllSelection(checked, arr) {
this.tableSelectData = arr this.tableSelectData = arr
...@@ -467,15 +512,18 @@ export default { ...@@ -467,15 +512,18 @@ export default {
}, },
getTaskList() { getTaskList() {
this.form = {} this.form = {}
this.tableData = []
this.$u.api.getTaskList({ this.$u.api.getTaskList({
workstationId: this.vuex_workstation.workstationId, workstationId: this.vuex_workstation.workstationId,
}).then(res => { }).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.tableData = res.rows; this.tableData = res.rows;
this.curTaskInfo = {}
this.materialUsageRecordList = []
if (this.tableData.length > 0) { if (this.tableData.length > 0) {
this.curTaskInfo = this.tableData[0] this.curTaskInfo = this.tableData[0]
this.getMaterialUsageRecordList(); // this.getMaterialUsageRecordList();
this.getIssusLinebyWorkorderCodes();
} else { } else {
} }
} }
...@@ -486,6 +534,7 @@ export default { ...@@ -486,6 +534,7 @@ export default {
this.getMaterialUsageRecordList() this.getMaterialUsageRecordList()
}, },
getMaterialUsageRecordList() { getMaterialUsageRecordList() {
this.materialUsageRecordList = []
this.materialusagerecordLoading = true this.materialusagerecordLoading = true
this.$u.api.materialusagerecordList({ this.$u.api.materialusagerecordList({
workstationId: this.vuex_workstation.workstationId, workstationId: this.vuex_workstation.workstationId,
...@@ -520,7 +569,8 @@ export default { ...@@ -520,7 +569,8 @@ export default {
this.materialRecordInfo.quantity = 0; this.materialRecordInfo.quantity = 0;
this.materialRecordInfo.materialBatchNumber = ''; this.materialRecordInfo.materialBatchNumber = '';
this.$u.toast('上报成功'); this.$u.toast('上报成功');
this.getMaterialUsageRecordList() this.getIssusLinebyWorkorderCodes();
// this.getMaterialUsageRecordList()
} }
}); });
}, },
...@@ -600,16 +650,24 @@ export default { ...@@ -600,16 +650,24 @@ export default {
} }
this.$u.api.feedback({ this.$u.api.feedback({
taskId: item.taskId, taskId: item.taskId,
taskCode: item.taskCode,
quantityFeedback: item.quantity, quantityFeedback: item.quantity,
quantityQualified: item.quantityQualify, quantityQualified: item.quantityQualify,
quantityUnquanlified: item.quantityUnqualify, quantityUnquanlified: item.quantityUnqualify,
userName: this.vuex_user.userName, userName: this.vuex_user.userName,
feedbackType: item.feedbackType, feedbackType: item.feedbackType,
routeId: item.routeId, routeId: item.routeId,
routeCode: item.routeCode,
processId: item.processId, processId: item.processId,
processCode: item.processCode,
processName: item.processName,
itemId: item.itemId, itemId: item.itemId,
itemCode: item.itemCode, itemCode: item.itemCode,
itemName: item.itemName itemName: item.itemName,
workstationId: item.workstationId,
workstationCode: item.workstationCode,
workstationName: item.workstationName,
startTime: item.startTime
}).then(res => { }).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$u.toast('上报成功'); this.$u.toast('上报成功');
......
pages/mes/qc/index.vue
View file @ 93fdb87b
...@@ -18,6 +18,10 @@ ...@@ -18,6 +18,10 @@
<view class="list-bar"> <view class="list-bar">
<scroll-view scroll-y="true" class="scroll-list" :style="{ 'height': (this.screenHeight -280) + 'px' }"> <scroll-view scroll-y="true" class="scroll-list" :style="{ 'height': (this.screenHeight -280) + 'px' }">
<uni-table ref="qcTable" border stripe :loading="loading" emptyText="未查询到数据"> <uni-table ref="qcTable" border stripe :loading="loading" emptyText="未查询到数据">
<!-- <zb-table :columns="tableColumn" :stripe="true" @rowClick="rowClick"-->
<!-- @toggleRowSelection="toggleRowSelection" @toggleAllSelection="toggleAllSelection" :border="true"-->
<!-- :data="tableData"></zb-table>-->
<uni-tr> <uni-tr>
<uni-th width="160px" align="center">检验单编号</uni-th> <uni-th width="160px" align="center">检验单编号</uni-th>
<uni-th width="160px" align="center">检验单名称</uni-th> <uni-th width="160px" align="center">检验单名称</uni-th>
...@@ -73,16 +77,16 @@ ...@@ -73,16 +77,16 @@
<u-modal width="1800rpx" v-model="qcModalFlag" :showConfirmButton=true :showCancelButton="true" <u-modal width="1800rpx" v-model="qcModalFlag" :showConfirmButton=true :showCancelButton="true"
title="请填写检验单" title="请填写检验单"
content="操作内容"> content="操作内容">
<u-form ref="qcForm" label-width="70px" :model="qcForm" :rules="qcRules"> <u-form ref="qcForm" label-width="70px">
<u-row> <u-row>
<u-col span="5"> <u-col span="5">
<u-form-item label="任务编号" prop="taskCode"> <u-form-item label="任务编号">
<SearchInput v-model="qcForm.taskCode" placeholder="请输入任务编号" hassearchbtn="true" <SearchInput v-model="qcForm.taskCode" placeholder="请输入任务编号" hassearchbtn="true"
@serach="searchTask"/> @serach="searchTask"/>
</u-form-item> </u-form-item>
</u-col> </u-col>
<u-col span="3"> <u-col span="3">
<u-form-item label="检验单名称" label-width="90px" prop="ipqcName"> <u-form-item label="检验单名称" label-width="90px">
<u-input v-model="qcForm.ipqcName" placeholder="请输入检验单名称"></u-input> <u-input v-model="qcForm.ipqcName" placeholder="请输入检验单名称"></u-input>
</u-form-item> </u-form-item>
</u-col> </u-col>
...@@ -122,7 +126,16 @@ ...@@ -122,7 +126,16 @@
</u-form-item> </u-form-item>
</u-col> </u-col>
</u-row> </u-row>
<u-button type="primary" @click="submitIpqc" class="submit-qc">提交</u-button> <u-row>
<u-col span="3"></u-col>
<u-col span="3">
<u-button type="primary" @click="submitIpqc">保存</u-button>
</u-col>
<u-col span="1"></u-col>
<u-col span="3">
<u-button type="success" @click="submitIpqc('CONFIRMED')">完成</u-button>
</u-col>
</u-row>
</u-form> </u-form>
<scroll-view scroll-y="true" scroll-x="true" class="line-list"> <scroll-view scroll-y="true" scroll-x="true" class="line-list">
<view class="line-content"> <view class="line-content">
...@@ -316,7 +329,8 @@ export default { ...@@ -316,7 +329,8 @@ export default {
this.taskInfo = res.data; this.taskInfo = res.data;
} }
}, },
async submitIpqc() {
async submitIpqc(status = 'PREPARE') {
if (!this.taskInfo) { if (!this.taskInfo) {
this.$u.toast('请输入任务单号！'); this.$u.toast('请输入任务单号！');
return return
...@@ -381,6 +395,7 @@ export default { ...@@ -381,6 +395,7 @@ export default {
}); });
}, },
addQC(type) { addQC(type) {
this.qcForm = {}
this.curQcType = type; this.curQcType = type;
if (type === 'QCMSG') { if (type === 'QCMSG') {
this.qcMsgVisible = true this.qcMsgVisible = true
...@@ -392,6 +407,7 @@ export default { ...@@ -392,6 +407,7 @@ export default {
qcLineClick(item) { qcLineClick(item) {
this.qcModalFlag = true; this.qcModalFlag = true;
this.qcForm = item this.qcForm = item
console.log(this.qcForm)
this.getTemplateLineList() this.getTemplateLineList()
}, },
qcLineItemClick(item) { qcLineItemClick(item) {
......
pages/sys/login/login.vue
View file @ 93fdb87b
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
loading: false, loading: false,
loginForm: { loginForm: {
username: "admin", username: "admin",
password: "admin123", password: "000000",
rememberMe: false, rememberMe: false,
validCode:'', validCode:'',
uuid: "" uuid: ""
......
uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue
View file @ 93fdb87b
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<script> <script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js' import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js' import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';; import props from './props.js';
/** /**
* sticky 吸顶 * sticky 吸顶
* @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。 * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
......
uni_modules/zb-table/components/zb-table/zb-table.vue
View file @ 93fdb87b
<template> <template>
<!-- #ifdef H5 || APP-PLUS --> <!-- #ifdef H5 || APP-PLUS -->
<view :class="['zb-table','zb-table-fixed-header',!border&&(bodyTableLeft>50||headerTableLeft>50)&&'scroll-left-fixed']"> <view
:class="['zb-table','zb-table-fixed-header',!border&&(bodyTableLeft>50||headerTableLeft>50)&&'scroll-left-fixed']">
<view class="zb-table-content" style="flex: 1"> <view class="zb-table-content" style="flex: 1">
<view class="zb-table-scroll" style="height: 100%;"> <view class="zb-table-scroll" style="height: 100%;">
<template v-if="showHeader"> <template v-if="showHeader">
...@@ -9,15 +10,14 @@ ...@@ -9,15 +10,14 @@
<scroll-view class="zb-table-headers" <scroll-view class="zb-table-headers"
@scroll="handleTableScrollLeft" @scroll="handleTableScrollLeft"
scroll-x="true" scroll-x="true"
scroll-y="false" scroll-y="true"
id="tableHeaders" id="tableHeaders"
scroll-anchoring="true" scroll-anchoring="true"
:scroll-left="headerTableLeft" :scroll-left="headerTableLeft"
style=" style="height: 100%">
height: 100%">
<view class="zb-table-fixed" > <view class="zb-table-fixed">
<view class="zb-table-thead" style="position: relative;" > <view class="zb-table-thead" style="position: relative;">
<view class="item-tr"> <view class="item-tr">
<view <view
@click.stop="sortAction(item,index)" @click.stop="sortAction(item,index)"
...@@ -35,14 +35,17 @@ ...@@ -35,14 +35,17 @@
<template v-if="item.type==='selection'"> <template v-if="item.type==='selection'">
<view class="checkbox-item"> <view class="checkbox-item">
<tableCheckbox <tableCheckbox
:indeterminate="indeterminate" :checked="checkedAll" @checkboxSelected="checkboxSelectedAll"></tableCheckbox> :indeterminate="indeterminate" :checked="checkedAll"
@checkboxSelected="checkboxSelectedAll"></tableCheckbox>
</view> </view>
</template> </template>
<template v-else> <template v-else>
{{ item.label }} {{ item.label }}
<view class="sorter-table" v-if="item.sorter"> <view class="sorter-table" v-if="item.sorter">
<view :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view> <view
<view :class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view> :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view>
<view
:class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view>
</view> </view>
</template> </template>
...@@ -73,12 +76,12 @@ ...@@ -73,12 +76,12 @@
@scrolltolower="scrolltolower" @scrolltolower="scrolltolower"
@scrolltoupper="(e)=>debounce(scrollToLeft)(e)" @scrolltoupper="(e)=>debounce(scrollToLeft)(e)"
@scroll="handleBodyScroll" :scroll-left="bodyTableLeft" :scroll-top="bodyScrollTop" @scroll="handleBodyScroll" :scroll-left="bodyTableLeft" :scroll-top="bodyScrollTop"
:style=" `height: calc(100% - ${showSummary?80:40}px)`" > :style=" `height: calc(100% - ${showSummary?80:40}px)`">
<view class="zb-table-fixed"> <view class="zb-table-fixed">
<view class="zb-table-tbody"> <view class="zb-table-tbody">
<view :class="['item-tr',highlight&&isHighlight(item,index)?'current-row':'']" <view :class="['item-tr',highlight&&isHighlight(item,index)?'current-row':'']"
@click.stop="rowClick(item,index)" @click.stop="rowClick(item,index)"
v-for="(item,index) in transData" :key="item.key" > v-for="(item,index) in transData" :key="item.key">
<view <view
:style="[{ :style="[{
width:`${ite.width?ite.width:'100'}px`, width:`${ite.width?ite.width:'100'}px`,
...@@ -103,24 +106,26 @@ ...@@ -103,24 +106,26 @@
}"> }">
<template v-if="ren.type==='custom'"> <template v-if="ren.type==='custom'">
<view :class="ren.class||''" style="cursor: pointer"> <view :class="ren.class||''" style="cursor: pointer">
{{ren.name}} {{ ren.name }}
</view> </view>
</template> </template>
<template v-else> <template v-else>
<button <button
:class="ren.class||''" :class="ren.class||''"
:type="ren.type||'primary'" :size="ren.size||'mini'">{{ren.name}}</button> :type="ren.type||'primary'" :size="ren.size||'mini'">{{ ren.name }}
</button>
</template> </template>
</view> </view>
</view> </view>
</template> </template>
<template v-else-if="ite.type==='selection'"> <template v-else-if="ite.type==='selection'">
<view class="checkbox-item"> <view class="checkbox-item">
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item" :checked="item.checked"/> <tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item"
:checked="item.checked"/>
</view> </view>
</template> </template>
<template v-else-if="ite.type==='index'"> <template v-else-if="ite.type==='index'">
{{index+1}} {{ index + 1 }}
</template> </template>
<template v-else-if="ite.type==='img'"> <template v-else-if="ite.type==='img'">
<view class="checkbox-item"> <view class="checkbox-item">
...@@ -132,12 +137,12 @@ ...@@ -132,12 +137,12 @@
:key="iImage" :key="iImage"
:src="iImageTem" style="width: 40px;height:30px; " mode="aspectFit"></image> :src="iImageTem" style="width: 40px;height:30px; " mode="aspectFit"></image>
</template> </template>
<text v-else>{{ite.emptyString}}</text> <text v-else>{{ ite.emptyString }}</text>
</view> </view>
</template> </template>
<template v-else> <template v-else>
<!-- {{ ite.filters?itemFilter(item,ite):(item[ite.name]==null||item[ite.name]==='')?ite.emptyString:item[ite.name] }}--> <!-- {{ ite.filters?itemFilter(item,ite):(item[ite.name]==null||item[ite.name]==='')?ite.emptyString:item[ite.name] }}-->
{{ ite.filters?itemFilter(item,ite):formatterAction(item,ite,index,i) }} {{ ite.filters ? itemFilter(item, ite) : formatterAction(item, ite, index, i) }}
</template> </template>
</view> </view>
</view> </view>
...@@ -181,14 +186,17 @@ ...@@ -181,14 +186,17 @@
<template v-if="item.type==='selection'"> <template v-if="item.type==='selection'">
<view class="checkbox-item"> <view class="checkbox-item">
<tableCheckbox <tableCheckbox
:indeterminate="indeterminate" :checked="checkedAll" @checkboxSelected="checkboxSelectedAll"></tableCheckbox> :indeterminate="indeterminate" :checked="checkedAll"
@checkboxSelected="checkboxSelectedAll"></tableCheckbox>
</view> </view>
</template> </template>
<template v-else> <template v-else>
{{ item.label }} {{ item.label }}
<view class="sorter-table" v-if="item.sorter"> <view class="sorter-table" v-if="item.sorter">
<view :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view> <view
<view :class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view> :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view>
<view
:class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view>
</view> </view>
</template> </template>
</view> </view>
...@@ -224,14 +232,15 @@ ...@@ -224,14 +232,15 @@
v-for="(item,index) in fixedLeftColumns"> v-for="(item,index) in fixedLeftColumns">
<template v-if="item.type==='selection'"> <template v-if="item.type==='selection'">
<view class="checkbox-item"> <view class="checkbox-item">
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,ite)" :cellData="ite" :checked="ite.checked"/> <tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,ite)" :cellData="ite"
:checked="ite.checked"/>
</view> </view>
</template> </template>
<template v-else-if="item.type==='index'"> <template v-else-if="item.type==='index'">
{{i+1}} {{ i + 1 }}
</template> </template>
<template v-else> <template v-else>
{{ite[item.name]||item.emptyString}} {{ ite[item.name] || item.emptyString }}
</template> </template>
</view> </view>
</view> </view>
...@@ -257,11 +266,9 @@ ...@@ -257,11 +266,9 @@
<view class="zb-table-applet"> <view class="zb-table-applet">
<view class="zb-table-content" style="white-space: nowrap"> <view class="zb-table-content" style="white-space: nowrap">
<scroll-view <scroll-view
<!-- #ifdef MP-ALIPAY --> <!-- #ifdef MP-ALIPAY -->
@scroll="scrollAlipay" @scroll="scrollAlipay"
<!-- #endif --> <!-- #endif -->
@scrolltolower="scrolltolower" @scrolltolower="scrolltolower"
<!-- #ifdef MP-ALIPAY --> <!-- #ifdef MP-ALIPAY -->
style=" height: 100%;overflow-x:scroll" style=" height: 100%;overflow-x:scroll"
...@@ -271,11 +278,11 @@ ...@@ -271,11 +278,11 @@
<!-- #endif --> <!-- #endif -->
scroll-y="true" scroll-y="true"
scroll-x="true"> scroll-x="true">
<view class="zb-table-scroll" > <view class="zb-table-scroll">
<template v-if="showHeader"> <template v-if="showHeader">
<view class="zb-table-header top-header-uni" style=""> <view class="zb-table-header top-header-uni" style="">
<view class="zb-table-fixed" > <view class="zb-table-fixed">
<view class="zb-table-thead" style="position: relative;" > <view class="zb-table-thead" style="position: relative;">
<view class="item-tr"> <view class="item-tr">
<view <view
@click.stop="sortAction(item,index)" @click.stop="sortAction(item,index)"
...@@ -293,14 +300,17 @@ ...@@ -293,14 +300,17 @@
<template v-if="item.type==='selection'"> <template v-if="item.type==='selection'">
<view class="checkbox-item"> <view class="checkbox-item">
<tableCheckbox <tableCheckbox
:indeterminate="indeterminate" :checked="checkedAll" @checkboxSelected="checkboxSelectedAll"></tableCheckbox> :indeterminate="indeterminate" :checked="checkedAll"
@checkboxSelected="checkboxSelectedAll"></tableCheckbox>
</view> </view>
</template> </template>
<template v-else> <template v-else>
{{ item.label||'' }} {{ item.label || '' }}
<view class="sorter-table" v-if="item.sorter"> <view class="sorter-table" v-if="item.sorter">
<view :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view> <view
<view :class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view> :class="['sorter-table-icon',item.sorterMode==='_asc'&&`sorting${item.sorterMode||''}`]"></view>
<view
:class="['sorter-table-icon',item.sorterMode==='_desc'&&`sorting${item.sorterMode||''}`]"></view>
</view> </view>
</template> </template>
</view> </view>
...@@ -316,7 +326,7 @@ ...@@ -316,7 +326,7 @@
<view class="zb-table-tbody"> <view class="zb-table-tbody">
<view :class="['item-tr',highlight&&isHighlight(item,index)?'current-row':'']" <view :class="['item-tr',highlight&&isHighlight(item,index)?'current-row':'']"
@click.stop="rowClick(item,index)" @click.stop="rowClick(item,index)"
v-for="(item,index) in transData" :key="item.key" > v-for="(item,index) in transData" :key="item.key">
<view <view
:style="[{ :style="[{
left:`${ite.left}px`, left:`${ite.left}px`,
...@@ -342,20 +352,22 @@ ...@@ -342,20 +352,22 @@
}"> }">
<template v-if="ren.type==='custom'"> <template v-if="ren.type==='custom'">
<view :class="ren.class||''" style="cursor: pointer"> <view :class="ren.class||''" style="cursor: pointer">
{{ren.name}} {{ ren.name }}
</view> </view>
</template> </template>
<template v-else> <template v-else>
<button <button
:class="ren.class||''" :class="ren.class||''"
:type="ren.type||'primary'" :size="ren.size||'mini'">{{ren.name}}</button> :type="ren.type||'primary'" :size="ren.size||'mini'">{{ ren.name }}
</button>
</template> </template>
</view> </view>
</view> </view>
</template> </template>
<template v-else-if="ite.type==='selection'"> <template v-else-if="ite.type==='selection'">
<view class="checkbox-item"> <view class="checkbox-item">
<tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item" :checked="item.checked"/> <tableCheckbox @checkboxSelected="(e)=>checkboxSelected(e,item)" :cellData="item"
:checked="item.checked"/>
</view> </view>
</template> </template>
<template v-else-if="ite.type==='img'"> <template v-else-if="ite.type==='img'">
...@@ -370,14 +382,14 @@ ...@@ -370,14 +382,14 @@
</view> </view>
</template> </template>
<text v-else>{{ite.emptyString}}</text> <text v-else>{{ ite.emptyString }}</text>
</template> </template>
<template v-else-if="ite.type==='index'"> <template v-else-if="ite.type==='index'">
{{index+1}} {{ index + 1 }}
</template> </template>
<template v-else> <template v-else>
<!-- {{ ite.filters?itemFilter(item,ite):(item[ite.name]==null||item[ite.name]==='')?ite.emptyString:item[ite.name] }}--> <!-- {{ ite.filters?itemFilter(item,ite):(item[ite.name]==null||item[ite.name]==='')?ite.emptyString:item[ite.name] }}-->
{{ ite.filters?itemFilter(item,ite):formatterAction(item,ite,index,i) }} {{ ite.filters ? itemFilter(item, ite) : formatterAction(item, ite, index, i) }}
</template> </template>
</view> </view>
</view> </view>
...@@ -412,96 +424,97 @@ import {getScrollbarSize} from "./js/util"; ...@@ -412,96 +424,97 @@ import {getScrollbarSize} from "./js/util";
// #endif // #endif
export default { export default {
components:{ components: {
TableCheckbox, TableCheckbox,
TableSummary, TableSummary,
TableSideSummary, TableSideSummary,
TableH5Summary, TableH5Summary,
ZbLoadMore ZbLoadMore
}, },
props:{ props: {
highlight:{ highlight: {
type:Boolean, type: Boolean,
default:false default: false
}, },
itemDate:{ itemDate: {
type:Object, type: Object,
default:()=>{} default: () => {
}
}, },
columns:{ columns: {
type:Array, type: Array,
default:()=>[] default: () => []
}, },
showSummary:{ showSummary: {
type:Boolean, type: Boolean,
default:false default: false
}, },
isShowLoadMore:{ isShowLoadMore: {
type:Boolean, type: Boolean,
default:false default: false
}, },
data:{ data: {
type:Array, type: Array,
default:()=>[] default: () => []
}, },
sumText:{ sumText: {
type:String, type: String,
default:'合计' default: '合计'
}, },
showHeader:{ showHeader: {
type:Boolean, type: Boolean,
default:true default: true
}, },
border:{ border: {
type:Boolean, type: Boolean,
default:false default: false
}, },
stripe:{ stripe: {
type:Boolean, type: Boolean,
default:true default: true
}, },
fit:{ fit: {
type:Boolean, type: Boolean,
default:false default: false
}, },
rowKey:[String, Function], rowKey: [String, Function],
summaryMethod:Function, summaryMethod: Function,
pullUpLoading:Function, pullUpLoading: Function,
formatter:Function, formatter: Function,
cellStyle:Function, cellStyle: Function,
cellHeaderStyle:Function, cellHeaderStyle: Function,
permissionBtn:Function, permissionBtn: Function,
}, },
computed:{ computed: {
loadMoreHeight(){ loadMoreHeight() {
return this.isLoadMore?40:0 return this.isLoadMore ? 40 : 0
}, },
fixedLeftColumns(){ fixedLeftColumns() {
let arr = [] let arr = []
for(let i=0;i<this.columns.length;i++){ for (let i = 0; i < this.columns.length; i++) {
let item = this.columns[i] let item = this.columns[i]
if(item.fixed){ if (item.fixed) {
arr.push(item) arr.push(item)
}else { } else {
break break
} }
} }
return arr return arr
}, },
imgs(){ imgs() {
return (item)=>{ return (item) => {
return typeof item==='string'?[item]:item return typeof item === 'string' ? [item] : item
} }
}, },
itemfilters(){ itemfilters() {
return(item,ite)=>{ return (item, ite) => {
if(item[ite.name]==null){ if (item[ite.name] == null) {
return ite.emptyString return ite.emptyString
} }
return item[ite.name] return item[ite.name]
} }
}, },
scrollbarSize(){ scrollbarSize() {
// #ifdef H5 // #ifdef H5
return getScrollbarSize() return getScrollbarSize()
// #endif // #endif
...@@ -510,114 +523,114 @@ export default { ...@@ -510,114 +523,114 @@ export default {
return 0 return 0
// #endif // #endif
}, },
isFixedLeft(){ isFixedLeft() {
if(!this.columns.length){ if (!this.columns.length) {
return false return false
} }
if(!this.data.length){ if (!this.data.length) {
return false return false
} }
let [firstArr] = this.columns let [firstArr] = this.columns
return !!firstArr.fixed; return !!firstArr.fixed;
}, },
transColumns(){ transColumns() {
if(this.fit){ if (this.fit) {
this.columns.forEach(column=>{ this.columns.forEach(column => {
if(column.type==="operation"&&column.renders){ if (column.type === "operation" && column.renders) {
let str = '' let str = ''
column.renders.map((item)=>{ column.renders.map((item) => {
str+=item.name str += item.name
}) })
column.width = this.getTextWidth(str)+column.renders.length*40 column.width = this.getTextWidth(str) + column.renders.length * 40
}else if(column.type==="img"){ } else if (column.type === "img") {
}else if(column.type==="selection"){ } else if (column.type === "selection") {
}else{ } else {
let arr = [this.getTextWidth(column.label)] let arr = [this.getTextWidth(column.label)]
this.data.forEach(data=>{ this.data.forEach(data => {
let str = (data[column.name]+'') let str = (data[column.name] + '')
if(str==='undefined'){ if (str === 'undefined') {
arr.push(30) arr.push(30)
}else{ } else {
let width = this.getTextWidth(str) let width = this.getTextWidth(str)
arr.push(width) arr.push(width)
} }
}) })
column.width = Math.max(...arr)+20 column.width = Math.max(...arr) + 20
} }
}) })
} }
let number = 0 let number = 0
this.columns.forEach((item,index)=>{ this.columns.forEach((item, index) => {
if(item.type==="operation"&&item.renders&&!item.width){ if (item.type === "operation" && item.renders && !item.width) {
let str = '' let str = ''
item.renders.map((item)=>{ item.renders.map((item) => {
str+=item.name str += item.name
}) })
item.width = this.getTextWidth(str)+item.renders.length*40 item.width = this.getTextWidth(str) + item.renders.length * 40
} }
if(item.type==="img"){ if (item.type === "img") {
if(!item.width){ if (!item.width) {
let arr = [] let arr = []
let widImg = this.getTextWidth(item.label) let widImg = this.getTextWidth(item.label)
this.data.forEach(data=>{ this.data.forEach(data => {
if(data[item.name]){ if (data[item.name]) {
let urls = typeof data[item.name]==='string'?[data[item.name]]:data[item.name] let urls = typeof data[item.name] === 'string' ? [data[item.name]] : data[item.name]
arr.push(urls.length) arr.push(urls.length)
} }
item.width = Math.max(...arr)*40+widImg item.width = Math.max(...arr) * 40 + widImg
}) })
} }
} }
if(item.fixed){ if (item.fixed) {
if(index===0){ if (index === 0) {
item.left = 0 item.left = 0
number+=item.width number += item.width
}else { } else {
item.left = number item.left = number
number+=item.width number += item.width
} }
} }
item.emptyString = item.emptyString||'--' item.emptyString = item.emptyString || '--'
}) })
return this.columns return this.columns
}, },
transData(){ transData() {
let flag = this.columns.some(item=>item.type==='selection') let flag = this.columns.some(item => item.type === 'selection')
this.data.forEach((item,index)=>{ this.data.forEach((item, index) => {
if(flag){ if (flag) {
if(item.checked){ if (item.checked) {
if(!this.selectArr.length){ if (!this.selectArr.length) {
this.selectArr.push(item) this.selectArr.push(item)
} }
} }
} }
if(this.rowKey){ if (this.rowKey) {
if(typeof this.rowKey==='function'){ if (typeof this.rowKey === 'function') {
item.key = Object.freeze(this.rowKey(item))||Date.now() item.key = Object.freeze(this.rowKey(item)) || Date.now()
}else { } else {
item.key = Object.freeze(item[this.rowKey])||Date.now() item.key = Object.freeze(item[this.rowKey]) || Date.now()
} }
}else { } else {
item.key = index item.key = index
} }
}) })
if(flag){ if (flag) {
if(this.data.length){ if (this.data.length) {
let le = this.data.filter(item=>item.checked).length let le = this.data.filter(item => item.checked).length
if(le){ if (le) {
if(le===this.data.length){ if (le === this.data.length) {
this.checkedAll = true this.checkedAll = true
}else { } else {
this.indeterminate = true this.indeterminate = true
} }
}else { } else {
this.checkedAll = false this.checkedAll = false
this.indeterminate = false this.indeterminate = false
this.selectArr = [] this.selectArr = []
} }
}else { } else {
this.checkedAll = false this.checkedAll = false
this.indeterminate = false this.indeterminate = false
this.selectArr = [] this.selectArr = []
...@@ -625,28 +638,28 @@ export default { ...@@ -625,28 +638,28 @@ export default {
} }
return this.data return this.data
}, },
isHighlight(){ isHighlight() {
return (item,index)=>{ return (item, index) => {
if(this.rowKey){ if (this.rowKey) {
return item.key === this.currentRow['key'] return item.key === this.currentRow['key']
}else{ } else {
return index === this.currentRowIndex return index === this.currentRowIndex
} }
} }
}, },
getHeaderCellStyle() { getHeaderCellStyle() {
return (column, columnIndex,childIndex)=>{ return (column, columnIndex, childIndex) => {
const cellStyle = this.cellHeaderStyle; const cellStyle = this.cellHeaderStyle;
if(typeof cellStyle==='function'){ if (typeof cellStyle === 'function') {
return cellStyle({ column, columnIndex}) return cellStyle({column, columnIndex})
} }
return {} return {}
} }
}, },
getCellStyle() { getCellStyle() {
return (row, column, rowIndex, columnIndex)=>{ return (row, column, rowIndex, columnIndex) => {
const cellStyle = this.cellStyle; const cellStyle = this.cellStyle;
if(typeof cellStyle==='function'){ if (typeof cellStyle === 'function') {
return cellStyle({row, column, rowIndex, columnIndex}) return cellStyle({row, column, rowIndex, columnIndex})
} }
return {} return {}
...@@ -655,37 +668,37 @@ export default { ...@@ -655,37 +668,37 @@ export default {
}, },
data() { data() {
return { return {
button:[], button: [],
alipayScrollTop:0, alipayScrollTop: 0,
alipayScrollOldTop:0, alipayScrollOldTop: 0,
alipayFlag:false, alipayFlag: false,
bodyTableLeft:0, bodyTableLeft: 0,
headerTableLeft:0, headerTableLeft: 0,
lastScrollLeft:0, lastScrollLeft: 0,
isLoadMore:false, isLoadMore: false,
headerFooterTableLeft:0, headerFooterTableLeft: 0,
leftFiexScrollTop:0, leftFiexScrollTop: 0,
bodyScrollTop:0, bodyScrollTop: 0,
currentDriver:null, currentDriver: null,
currentDriver1:null, currentDriver1: null,
bodyTime:null, bodyTime: null,
currentRowIndex:null, currentRowIndex: null,
currentRow: {}, currentRow: {},
bodyTime1:null, bodyTime1: null,
headerTime:null, headerTime: null,
debounceTime:null, debounceTime: null,
operation:{}, operation: {},
completedFlag:false, completedFlag: false,
selectArr:[], selectArr: [],
indeterminate:false, indeterminate: false,
checkedAll:false, checkedAll: false,
completeLoading:false, completeLoading: false,
aliTime:null, aliTime: null,
} }
}, },
created(){ created() {
}, },
mounted(){ mounted() {
// setTimeout(()=>{ // setTimeout(()=>{
// uni.createSelectorQuery().in(this).select(".top-header-uni").boundingClientRect( data => { // uni.createSelectorQuery().in(this).select(".top-header-uni").boundingClientRect( data => {
...@@ -695,168 +708,168 @@ export default { ...@@ -695,168 +708,168 @@ export default {
// }).exec(); // }).exec();
// },1000) // },1000)
}, },
beforeDestroy(){ beforeDestroy() {
this.aliTime&&clearTimeout(this.aliTime) this.aliTime && clearTimeout(this.aliTime)
this.debounceTime&&clearTimeout(this.debounceTime) this.debounceTime && clearTimeout(this.debounceTime)
this.bodyTime1&&clearTimeout(this.bodyTime1) this.bodyTime1 && clearTimeout(this.bodyTime1)
this.bodyTime&&clearTimeout(this.bodyTime) this.bodyTime && clearTimeout(this.bodyTime)
this.selectArr = [] this.selectArr = []
this.indeterminate = false this.indeterminate = false
this.checkedAll = false this.checkedAll = false
}, },
methods: { methods: {
clearSelection(){ clearSelection() {
this.transData.forEach(item=>{ this.transData.forEach(item => {
item.checked = false item.checked = false
}) })
this.selectArr = [] this.selectArr = []
this.indeterminate = false this.indeterminate = false
this.checkedAll = false this.checkedAll = false
}, },
formatterAction(row,column,rowIndex,columnIndex){ formatterAction(row, column, rowIndex, columnIndex) {
if(column.formatter&&typeof this.formatter==='function'){ if (column.formatter && typeof this.formatter === 'function') {
return this.formatter(row,column,rowIndex,columnIndex) return this.formatter(row, column, rowIndex, columnIndex)
} }
return (row[column.name]==null||row[column.name]==='')?column.emptyString:row[column.name] return (row[column.name] == null || row[column.name] === '') ? column.emptyString : row[column.name]
}, },
permission(item,renders,index){ permission(item, renders, index) {
if(this.permissionBtn&&typeof this.permissionBtn==='function'){ if (this.permissionBtn && typeof this.permissionBtn === 'function') {
return this.permissionBtn(item,renders,index) return this.permissionBtn(item, renders, index)
} }
return renders return renders
}, },
pullUpCompleteLoading(type){ pullUpCompleteLoading(type) {
this.isLoadMore = false this.isLoadMore = false
if(type==='ok'){ if (type === 'ok') {
this.completeLoading = true this.completeLoading = true
} }
}, },
scrollAlipay(e){ scrollAlipay(e) {
if(!this.alipayScrollOldTop){ if (!this.alipayScrollOldTop) {
this.alipayScrollOldTop = e.detail.scrollTop this.alipayScrollOldTop = e.detail.scrollTop
} }
this.aliTime&&clearTimeout(this.aliTime) this.aliTime && clearTimeout(this.aliTime)
this.aliTime = setTimeout(()=>{ this.aliTime = setTimeout(() => {
if(this.alipayFlag&&e.detail.scrollTop>this.alipayScrollOldTop){ if (this.alipayFlag && e.detail.scrollTop > this.alipayScrollOldTop) {
this.pullLoad() this.pullLoad()
} }
this.alipayFlag = false this.alipayFlag = false
this.alipayScrollOldTop = null this.alipayScrollOldTop = null
},500) }, 500)
}, },
pullLoad(){ pullLoad() {
if(this.isShowLoadMore){ if (this.isShowLoadMore) {
this.isLoadMore = true this.isLoadMore = true
this.$emit('pullUpLoading') this.$emit('pullUpLoading')
let that = this let that = this
this.pullUpLoading&&this.pullUpLoading.call(this.$parent.$parent, (type)=>{ this.pullUpLoading && this.pullUpLoading.call(this.$parent.$parent, (type) => {
that.isLoadMore = false that.isLoadMore = false
if(type==='ok'){ if (type === 'ok') {
that.completeLoading=true that.completeLoading = true
} }
}) })
} }
}, },
scrolltolower(e){ scrolltolower(e) {
this.alipayFlag = true this.alipayFlag = true
if(e.detail.direction==='bottom'){ if (e.detail.direction === 'bottom') {
this.pullLoad() this.pullLoad()
} }
// this.pullUpLoading.call(this.$parent) // this.pullUpLoading.call(this.$parent)
}, },
previewImage(item,url,current){ previewImage(item, url, current) {
let urls = typeof url==='string'?[url]:url let urls = typeof url === 'string' ? [url] : url
uni.previewImage({ uni.previewImage({
current, current,
urls:urls urls: urls
}) })
}, },
resetHighlight(){ resetHighlight() {
this.currentRowIndex = null this.currentRowIndex = null
this.currentRow = {} this.currentRow = {}
}, },
cellClick(row,index,column){ cellClick(row, index, column) {
this.$emit('cellClick',row,index,column) this.$emit('cellClick', row, index, column)
}, },
rowClick(row,index){ rowClick(row, index) {
if(this.highlight){ if (this.highlight) {
this.currentRowIndex = index this.currentRowIndex = index
this.currentRow = row this.currentRow = row
this.$emit('currentChange',row,index) this.$emit('currentChange', row, index)
} }
this.$emit('rowClick',row,index) this.$emit('rowClick', row, index)
}, },
checkboxSelectedAll(e){ checkboxSelectedAll(e) {
this.indeterminate = false this.indeterminate = false
if(e.checked){ if (e.checked) {
this.selectArr = [] this.selectArr = []
this.checkedAll = true this.checkedAll = true
this.data.forEach(item=>{ this.data.forEach(item => {
// this.$set(item,'checked',true) // this.$set(item,'checked',true)
item.checked = true item.checked = true
this.selectArr.push(item) this.selectArr.push(item)
}) })
}else{ } else {
this.checkedAll = false this.checkedAll = false
this.data.forEach(item=>{ this.data.forEach(item => {
this.$set(item,'checked',false) this.$set(item, 'checked', false)
}) })
this.selectArr = [] this.selectArr = []
} }
// #ifndef H5 || APP-PLUS // #ifndef H5 || APP-PLUS
this.$forceUpdate() this.$forceUpdate()
// #endif // #endif
this.$emit('toggleAllSelection',e.checked,this.selectArr) this.$emit('toggleAllSelection', e.checked, this.selectArr)
}, },
checkboxSelected(e,item){ checkboxSelected(e, item) {
// #ifdef H5 || APP-PLUS // #ifdef H5 || APP-PLUS
this.$set(item,'checked',e.checked) this.$set(item, 'checked', e.checked)
// #endif // #endif
// #ifndef H5 || APP-PLUS // #ifndef H5 || APP-PLUS
this.data.forEach(item=>{ this.data.forEach(item => {
if(item.key===e.data.key){ if (item.key === e.data.key) {
item.checked = e.checked item.checked = e.checked
} }
}) })
// #endif // #endif
item.checked = e.checked item.checked = e.checked
e.data.checked = e.checked e.data.checked = e.checked
if(e.checked){ if (e.checked) {
this.selectArr.push(e.data) this.selectArr.push(e.data)
}else{ } else {
this.selectArr = this.selectArr.filter(item=>item.key!==e.data.key) this.selectArr = this.selectArr.filter(item => item.key !== e.data.key)
} }
if(this.selectArr.length===this.transData.length){ if (this.selectArr.length === this.transData.length) {
this.indeterminate = false this.indeterminate = false
this.checkedAll = true this.checkedAll = true
}else{ } else {
this.indeterminate = true this.indeterminate = true
this.checkedAll = false this.checkedAll = false
} }
if(!this.selectArr.length){ if (!this.selectArr.length) {
this.checkedAll = false this.checkedAll = false
this.indeterminate = false this.indeterminate = false
} }
// #ifndef H5 || APP-PLUS // #ifndef H5 || APP-PLUS
this.$forceUpdate() this.$forceUpdate()
// #endif // #endif
this.$emit('toggleRowSelection',e.checked,this.selectArr) this.$emit('toggleRowSelection', e.checked, this.selectArr)
}, },
itemFilter(item,ite){ itemFilter(item, ite) {
if(ite.filters&&ite.name){ if (ite.filters && ite.name) {
let key = item[ite.name] let key = item[ite.name]
return ite.filters[key]||'' return ite.filters[key] || ''
} }
return item[ite.name]||ite.emptyString return item[ite.name] || ite.emptyString
}, },
// 默认字体为微软雅黑 Microsoft YaHei,字体大小为 14px // 默认字体为微软雅黑 Microsoft YaHei,字体大小为 14px
getTextWidth(str) { getTextWidth(str) {
if(str.length<3){ if (str.length < 3) {
return 40 return 40
} }
let regx = /^[0-9]+.?[0-9]*$/ let regx = /^[0-9]+.?[0-9]*$/
...@@ -868,23 +881,23 @@ export default { ...@@ -868,23 +881,23 @@ export default {
} else if (char >= '\u4e00' && char <= '\u9fa5') { } else if (char >= '\u4e00' && char <= '\u9fa5') {
// 如果是中文字符，为字符分配15个单位宽度 // 如果是中文字符，为字符分配15个单位宽度
flexWidth += 15 flexWidth += 15
} else if(regx.test(char)){ } else if (regx.test(char)) {
flexWidth += 9 flexWidth += 9
}else { } else {
// 其他种类字符，为字符分配8个单位宽度 // 其他种类字符，为字符分配8个单位宽度
flexWidth += 7 flexWidth += 7
} }
} }
return flexWidth return flexWidth
}, },
width(item){ width(item) {
return `${item.width?item.width:'100'}px` return `${item.width ? item.width : '100'}px`
}, },
showStripe(index){ showStripe(index) {
if(this.currentDriver)return if (this.currentDriver) return
if(this.stripe){ if (this.stripe) {
return (index % 2) != 0?'odd':'even' return (index % 2) != 0 ? 'odd' : 'even'
}else{ } else {
return '' return ''
} }
}, },
...@@ -896,140 +909,142 @@ export default { ...@@ -896,140 +909,142 @@ export default {
} }
return false; return false;
}, },
isDate(data){ isDate(data) {
if(isNaN(data)&&!isNaN(Date.parse(data))){ if (isNaN(data) && !isNaN(Date.parse(data))) {
return true return true
} }
return false return false
}, },
sortAction(item,index){ sortAction(item, index) {
if(!item.sorter){return false} if (!item.sorter) {
this.$set(item,'sorterMode',item.sorterMode==='_asc'?'_desc':'_asc') return false
if(item.sorter==='custom'){ }
this.$emit('sort-change',item,item.sorterMode.replace('_',''),index) this.$set(item, 'sorterMode', item.sorterMode === '_asc' ? '_desc' : '_asc')
}else { if (item.sorter === 'custom') {
this.$emit('sort-change', item, item.sorterMode.replace('_', ''), index)
} else {
this.sortData(item) this.sortData(item)
} }
// #ifndef H5 || APP-PLUS // #ifndef H5 || APP-PLUS
this.$forceUpdate() this.$forceUpdate()
// #endif // #endif
}, },
sortData(item){ sortData(item) {
let key = item.name let key = item.name
if(item.sorterMode==='_asc'){ if (item.sorterMode === '_asc') {
this.data.sort((a,b)=>{ this.data.sort((a, b) => {
if(this.checkNumber(a[key])){ if (this.checkNumber(a[key])) {
return a[key]-b[key] return a[key] - b[key]
} }
if(this.isDate(a[key])){ if (this.isDate(a[key])) {
let a1 = new Date(a[key]).getTime() let a1 = new Date(a[key]).getTime()
let b1 = new Date(b[key]).getTime() let b1 = new Date(b[key]).getTime()
return a1-b1 return a1 - b1
} }
}) })
}else { } else {
this.data.sort((a,b)=>{ this.data.sort((a, b) => {
if(this.checkNumber(a[key])){ if (this.checkNumber(a[key])) {
return b[key]-a[key] return b[key] - a[key]
} }
if(this.isDate(a[key])){ if (this.isDate(a[key])) {
let a1 = new Date(a[key]).getTime() let a1 = new Date(a[key]).getTime()
let b1 = new Date(b[key]).getTime() let b1 = new Date(b[key]).getTime()
return b1-a1 return b1 - a1
} }
}) })
} }
}, },
throttle(method,delay=60){ throttle(method, delay = 60) {
let time = null let time = null
return (...args)=>{ return (...args) => {
if(!time){ if (!time) {
time = setTimeout(()=>{ time = setTimeout(() => {
method(...args) method(...args)
time = null; time = null;
},delay) }, delay)
} }
} }
}, },
debounce(method,delay=1000){ debounce(method, delay = 1000) {
return (...args)=>{ return (...args) => {
this.debounceTime&&clearTimeout(this.debounceTime) this.debounceTime && clearTimeout(this.debounceTime)
this.debounceTime = setTimeout(()=>{ this.debounceTime = setTimeout(() => {
method(...args) method(...args)
},delay) }, delay)
} }
}, },
handleBodyScroll(e){ handleBodyScroll(e) {
if(this.currentDriver&&this.currentDriver!==e.currentTarget.id)return if (this.currentDriver && this.currentDriver !== e.currentTarget.id) return
this.currentDriver = e.currentTarget.id this.currentDriver = e.currentTarget.id
this.headerTableLeft = e.detail.scrollLeft this.headerTableLeft = e.detail.scrollLeft
this.headerFooterTableLeft = e.detail.scrollLeft this.headerFooterTableLeft = e.detail.scrollLeft
this.leftFiexScrollTop = e.detail.scrollTop this.leftFiexScrollTop = e.detail.scrollTop
this.bodyTime&&clearTimeout(this.bodyTime) this.bodyTime && clearTimeout(this.bodyTime)
this.bodyTime = setTimeout(()=>{ this.bodyTime = setTimeout(() => {
this.currentDriver=null this.currentDriver = null
},200) }, 200)
}, },
leftFixedScrollAction(e){ leftFixedScrollAction(e) {
if(this.currentDriver&&this.currentDriver!==e.currentTarget.id)return if (this.currentDriver && this.currentDriver !== e.currentTarget.id) return
this.currentDriver = e.currentTarget.id this.currentDriver = e.currentTarget.id
this.bodyScrollTop = e.detail.scrollTop this.bodyScrollTop = e.detail.scrollTop
this.bodyTime&&clearTimeout(this.bodyTime) this.bodyTime && clearTimeout(this.bodyTime)
this.bodyTime = setTimeout(()=>{ this.bodyTime = setTimeout(() => {
this.currentDriver=null this.currentDriver = null
},200) }, 200)
}, },
scrollToLeft(e){ scrollToLeft(e) {
if(this.currentDriver1&&this.currentDriver1!==e.currentTarget.id)return if (this.currentDriver1 && this.currentDriver1 !== e.currentTarget.id) return
this.currentDriver1 = e.currentTarget.id this.currentDriver1 = e.currentTarget.id
if(e.detail.direction==='left'&&this.headerTableLeft<10){ if (e.detail.direction === 'left' && this.headerTableLeft < 10) {
this.headerTableLeft = 0 this.headerTableLeft = 0
}else if(e.detail.direction==='top'&&this.leftFiexScrollTop<10){ } else if (e.detail.direction === 'top' && this.leftFiexScrollTop < 10) {
this.leftFiexScrollTop = 0 this.leftFiexScrollTop = 0
} }
this.bodyTime&&clearTimeout(this.bodyTime) this.bodyTime && clearTimeout(this.bodyTime)
this.bodyTime = setTimeout(()=>{ this.bodyTime = setTimeout(() => {
this.currentDriver1=null this.currentDriver1 = null
},200) }, 200)
}, },
scrollToFixedLeft(e){ scrollToFixedLeft(e) {
if(this.currentDriver1&&this.currentDriver1!==e.currentTarget.id)return if (this.currentDriver1 && this.currentDriver1 !== e.currentTarget.id) return
this.currentDriver1 = e.currentTarget.id this.currentDriver1 = e.currentTarget.id
if(e.detail.direction==='top'&&this.bodyScrollTop<10){ if (e.detail.direction === 'top' && this.bodyScrollTop < 10) {
this.bodyScrollTop = 0 this.bodyScrollTop = 0
} }
this.bodyTime&&clearTimeout(this.bodyTime) this.bodyTime && clearTimeout(this.bodyTime)
this.bodyTime = setTimeout(()=>{ this.bodyTime = setTimeout(() => {
this.currentDriver1=null this.currentDriver1 = null
},200) }, 200)
}, },
handleTableScrollLeft(e,type){ handleTableScrollLeft(e, type) {
if(this.currentDriver&&this.currentDriver!==e.currentTarget.id)return if (this.currentDriver && this.currentDriver !== e.currentTarget.id) return
this.currentDriver = e.currentTarget.id this.currentDriver = e.currentTarget.id
this.bodyTableLeft = e.detail.scrollLeft this.bodyTableLeft = e.detail.scrollLeft
this.headerFooterTableLeft = e.detail.scrollLeft this.headerFooterTableLeft = e.detail.scrollLeft
this.bodyTime&&clearTimeout(this.bodyTime) this.bodyTime && clearTimeout(this.bodyTime)
this.bodyTime = setTimeout(()=>{ this.bodyTime = setTimeout(() => {
this.currentDriver=null this.currentDriver = null
},200) }, 200)
}, },
handleFooterTableScrollLeft(e){ handleFooterTableScrollLeft(e) {
if(this.currentDriver&&this.currentDriver!==e.currentTarget.id)return if (this.currentDriver && this.currentDriver !== e.currentTarget.id) return
this.currentDriver = e.currentTarget.id this.currentDriver = e.currentTarget.id
this.bodyTableLeft = e.detail.scrollLeft this.bodyTableLeft = e.detail.scrollLeft
this.headerTableLeft = e.detail.scrollLeft this.headerTableLeft = e.detail.scrollLeft
this.bodyTime&&clearTimeout(this.bodyTime) this.bodyTime && clearTimeout(this.bodyTime)
this.bodyTime = setTimeout(()=>{ this.bodyTime = setTimeout(() => {
this.currentDriver=null this.currentDriver = null
},200) }, 200)
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.zb-table-fixed-left{ .zb-table-fixed-left {
/*去除左边滚动条 */ /*去除左边滚动条 */
scroll-view ::-webkit-scrollbar { scroll-view ::-webkit-scrollbar {
display: none !important; display: none !important;
...@@ -1039,7 +1054,8 @@ export default { ...@@ -1039,7 +1054,8 @@ export default {
background: transparent; background: transparent;
} }
} }
.zb-table-header{
.zb-table-header {
///*去除头部滚动条 */ ///*去除头部滚动条 */
scroll-view ::-webkit-scrollbar { scroll-view ::-webkit-scrollbar {
display: none !important; display: none !important;
...@@ -1052,36 +1068,47 @@ export default { ...@@ -1052,36 +1068,47 @@ export default {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.sorter-table{ .sorter-table {
position: absolute; position: absolute;
right: 6px; right: 6px;
top:50%; top: 50%;
transform:translateY(-50%); transform: translateY(-50%);
.sorter-table-icon{
.sorter-table-icon {
width: 0; width: 0;
height: 0; height: 0;
color: #dcdcdc; color: #dcdcdc;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-left: 4px solid transparent; border-left: 4px solid transparent;
} }
.sorter-table-icon:first-child{
.sorter-table-icon:first-child {
border-bottom: 5px solid currentColor; border-bottom: 5px solid currentColor;
} }
.sorter-table-icon:last-child{
.sorter-table-icon:last-child {
margin-top: 1.5px; margin-top: 1.5px;
border-top: 5px solid currentColor; border-top: 5px solid currentColor;
} }
.sorting_desc{
.sorting_desc {
color: #2979ff; color: #2979ff;
} }
.sorting_asc{
.sorting_asc {
color: #2979ff; color: #2979ff;
} }
} }
.checkbox-item{
display: flex;align-items: center;justify-content: center;width: 100%;height: 100% .checkbox-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%
} }
.no-data{
.no-data {
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
display: flex; display: flex;
...@@ -1089,7 +1116,8 @@ export default { ...@@ -1089,7 +1116,8 @@ export default {
align-items: center; align-items: center;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
} }
.item-th{
.item-th {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
width: 100px; width: 100px;
...@@ -1097,13 +1125,14 @@ export default { ...@@ -1097,13 +1125,14 @@ export default {
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
transition: background 0.3s; transition: background 0.3s;
padding-right: 5px; padding-right: 5px;
word-break:keep-all; /* 不换行 */ word-break: keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */ white-space: nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.zb-table{
.zb-table {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
...@@ -1111,25 +1140,30 @@ export default { ...@@ -1111,25 +1140,30 @@ export default {
flex-direction: column; flex-direction: column;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
.zb-table-content{
.zb-table-content {
//height: 100%; //height: 100%;
//flex: 1; //flex: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.zb-table-fixed{
.zb-table-fixed {
min-width: 100%; min-width: 100%;
} }
.zb-table-body{
.zb-table-body {
position: relative; position: relative;
background: #fff; background: #fff;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.item-tr{
.item-tr {
display: flex; display: flex;
//height: 41px; //height: 41px;
} }
.item-td{
.item-td {
flex-shrink: 0; flex-shrink: 0;
width: 100px; width: 100px;
padding-left: 8px; padding-left: 8px;
...@@ -1137,22 +1171,24 @@ export default { ...@@ -1137,22 +1171,24 @@ export default {
line-height: 40px; line-height: 40px;
padding-right: 5px; padding-right: 5px;
box-sizing: border-box; box-sizing: border-box;
word-break:keep-all; /* 不换行 */ word-break: keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */ white-space: nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
overflow-wrap: break-word; overflow-wrap: break-word;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
//transition: background 0.3s; //transition: background 0.3s;
} }
.zb-table-fixed-left .zb-table-header{ .zb-table-fixed-left .zb-table-header {
overflow-y: hidden; overflow-y: hidden;
} }
.zb-table-header { .zb-table-header {
overflow: hidden; overflow: hidden;
background: #fafafa; background: #fafafa;
.item-th{
.item-th {
padding-left: 8px; padding-left: 8px;
line-height: 39px; line-height: 39px;
height: 40px; height: 40px;
...@@ -1161,17 +1197,21 @@ export default { ...@@ -1161,17 +1197,21 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
} }
.zb-table-fixed-left .zb-table-fixed{
.zb-table-fixed-left .zb-table-fixed {
background: #fff; background: #fff;
} }
.zb-table-fixed-right .zb-table-fixed{
.zb-table-fixed-right .zb-table-fixed {
background: #fff; background: #fff;
} }
.zb-table-body-inner{
.zb-table-body-inner {
height: 100%; height: 100%;
// overflow: scroll; // overflow: scroll;
} }
.zb-table-fixed-left{
.zb-table-fixed-left {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 1; z-index: 1;
...@@ -1180,24 +1220,28 @@ export default { ...@@ -1180,24 +1220,28 @@ export default {
height: 100%; height: 100%;
//transition: box-shadow 0.3s ease; //transition: box-shadow 0.3s ease;
} }
.odd{
background-color:rgba(249,249,249,0.6); .odd {
background-color: rgba(249, 249, 249, 0.6);
//height: 100%; //height: 100%;
width: 100%; width: 100%;
} }
.even{
background-color:white ; .even {
background-color: white;
//height: 100%; //height: 100%;
width: 100%; width: 100%;
} }
} }
.scroll-left-fixed{
.scroll-left-fixed {
.zb-table-fixed-left { .zb-table-fixed-left {
left: 0; left: 0;
box-shadow: 6px 0 6px -4px #ccc; box-shadow: 6px 0 6px -4px #ccc;
} }
} }
.zb-table-applet{
.zb-table-applet {
height: 100%; height: 100%;
//overflow: hidden; //overflow: hidden;
width: 100%; width: 100%;
...@@ -1205,57 +1249,63 @@ export default { ...@@ -1205,57 +1249,63 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 12px; font-size: 12px;
.zb-table-content{
.zb-table-content {
//height: 100%; //height: 100%;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.zb-table-fixed{
.zb-table-fixed {
min-width: 100%; min-width: 100%;
width: fit-content; width: fit-content;
} }
.zb-table-body{ .zb-table-body {
position: relative; position: relative;
background: #fff; background: #fff;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.item-tr{
.item-tr {
display: flex; display: flex;
//height: 41px; //height: 41px;
} }
.item-td{
.item-td {
flex-shrink: 0; flex-shrink: 0;
width: 100px; width: 100px;
padding-left: 8px; padding-left: 8px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding-right:20px; padding-right: 20px;
box-sizing: border-box; box-sizing: border-box;
word-break:keep-all; /* 不换行 */ word-break: keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */ white-space: nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
overflow-wrap: break-word; overflow-wrap: break-word;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
//transition: background 0.3s; //transition: background 0.3s;
} }
.zb-table-header { .zb-table-header {
//overflow: hidden; //overflow: hidden;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
//width: fit-content; //width: fit-content;
.item-th{ .item-th {
padding-left: 8px; padding-left: 8px;
line-height: 39px; line-height: 39px;
height: 40px; height: 40px;
box-sizing: border-box; box-sizing: border-box;
background: #fafafa; background: #fafafa;
} }
.zb-stick-side{
.zb-stick-side {
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
...@@ -1266,17 +1316,21 @@ export default { ...@@ -1266,17 +1316,21 @@ export default {
//box-shadow: 6px 0 6px -4px #ccc; //box-shadow: 6px 0 6px -4px #ccc;
} }
} }
.zb-table-fixed-left .zb-table-fixed{
.zb-table-fixed-left .zb-table-fixed {
background: #fff; background: #fff;
} }
.zb-table-fixed-right .zb-table-fixed{
.zb-table-fixed-right .zb-table-fixed {
background: #fff; background: #fff;
} }
.zb-table-fixed-header .zb-table-body-inner{
.zb-table-fixed-header .zb-table-body-inner {
height: 100%; height: 100%;
// overflow: scroll; // overflow: scroll;
} }
.zb-table-fixed-left{
.zb-table-fixed-left {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 1; z-index: 1;
...@@ -1285,58 +1339,72 @@ export default { ...@@ -1285,58 +1339,72 @@ export default {
height: 100%; height: 100%;
//transition: box-shadow 0.3s ease; //transition: box-shadow 0.3s ease;
} }
.scroll-left-fixed{
.scroll-left-fixed {
.zb-table-fixed-left { .zb-table-fixed-left {
left: 0; left: 0;
box-shadow: 6px 0 6px -4px #ccc; box-shadow: 6px 0 6px -4px #ccc;
} }
} }
.odd{
background-color:rgba(249,249,249,0.6); .odd {
background-color: rgba(249, 249, 249, 0.6);
//height: 100%; //height: 100%;
width: 100%; width: 100%;
} }
.even{
background-color:white ; .even {
background-color: white;
//height: 100%; //height: 100%;
width: 100%; width: 100%;
} }
.zb-table-tbody { .zb-table-tbody {
.zb-stick-side{ .zb-stick-side {
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
background:white; background: white;
//box-shadow: 6px 0 6px -2px #ccc; //box-shadow: 6px 0 6px -2px #ccc;
} }
.odd{
background:#f9f9f9; .odd {
background: #f9f9f9;
//height: 100%; //height: 100%;
width: 100%; width: 100%;
} }
.even{
background:white ; .even {
background: white;
//height: 100%; //height: 100%;
width: 100%; width: 100%;
} }
} }
.current-row{
.item-td{ .current-row {
.item-td {
background-color: #ecf5ff; background-color: #ecf5ff;
} }
} }
} }
.current-row{
.item-td{ .current-row {
.item-td {
background-color: #ecf5ff; background-color: #ecf5ff;
} }
} }
.zb-table-header{
.zb-table-header {
height: 40px; height: 40px;
} }
.scrollPosition{
position: absolute;right: 0;top: 0;height: 100%;background: red; .scrollPosition {
position: absolute;
right: 0;
top: 0;
height: 100%;
background: red;
z-index: 999; z-index: 999;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment