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