wsnet
/
pad-app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

7.12

dev
wangchen 2023-07-12 18:06:16 +08:00
parent 5d831a105f
commit cc06e1a6ff
31 changed files with 6256 additions and 3622 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/head-view/head-view.vue
View File

@ -27,6 +27,7 @@
.headInfo { .headInfo {
position: relative; position: relative;
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #999999;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
font-size: 18px; font-size: 18px;
@ -39,4 +40,4 @@
} }
} }
</style> </style>

3
main.js
View File

@ -33,7 +33,8 @@ import {
Uploader, Uploader,
Field, Field,
Checkbox, Checkbox,
CheckboxGroup CheckboxGroup,
Progress
} from 'vant'; } from 'vant';
Vue.use(Radio); Vue.use(Radio);

6
pages.json
View File

@ -12,6 +12,12 @@
"navigationBarTitleText": "指令" "navigationBarTitleText": "指令"
} }
}, },
{
"path": "pages/index/instructDetails",
"style": {
"navigationBarTitleText": "货物详情"
}
},
{ {
"path": "pages/discharge/index", "path": "pages/discharge/index",
"style": { "style": {

454
pages/index/instruct.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<view class="app"> <view class="app">
<head-view title="船名/航次"></head-view> <head-view v-show="current!=2" title="船名/航次"></head-view>
<head-info v-show="current==2"></head-info>
<view class="content"> <view class="content">
<view class="form"> <view class="form">
<view class="input"> <view class="input">
@ -8,11 +9,11 @@
@iconClick="iconClick"> @iconClick="iconClick">
</uni-easyinput> </uni-easyinput>
</view> </view>
<view class="select"> <view class="select" v-show="current!=0">
<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="港区"> <uni-data-select v-model="value" :localdata="range" @change="change" placeholder="港区">
</uni-data-select> </uni-data-select>
</view> </view>
<view class="select"> <view class="select" v-show="current!=0">
<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="贸易类型"> <uni-data-select v-model="value" :localdata="range" @change="change" placeholder="贸易类型">
</uni-data-select> </uni-data-select>
</view> </view>
@ -20,7 +21,7 @@
<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="品牌"> <uni-data-select v-model="value" :localdata="range" @change="change" placeholder="品牌">
</uni-data-select> </uni-data-select>
</view> </view>
<view class="select"> <view class="select" v-show="current!=0">
<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="车型"> <uni-data-select v-model="value" :localdata="range" @change="change" placeholder="车型">
</uni-data-select> </uni-data-select>
</view> </view>
@ -28,7 +29,7 @@
<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="港口"> <uni-data-select v-model="value" :localdata="range" @change="change" placeholder="港口">
</uni-data-select> </uni-data-select>
</view> </view>
<view class="select"> <view class="select" v-show="current!=0">
<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="计划状态"> <uni-data-select v-model="value" :localdata="range" @change="change" placeholder="计划状态">
</uni-data-select> </uni-data-select>
</view> </view>
@ -43,50 +44,218 @@
</radio-group> </radio-group>
</view> </view>
<view class="buttonlist"> <view class="buttonlist">
<button class="button" type="default">指令发送</button> <button v-show="current==0" class="button" type="default">指令发送</button>
<button class="button" type="default">装船要求</button> <button v-show="current!=2" class="button" type="default">装船要求</button>
<button class="button" type="default">刷新</button> <button class="button" type="default">刷新</button>
<button v-show="current==2" class="button" type="default">显示</button>
</view> </view>
<view class="tablist"> <view class="itemList" v-show="current==0">
<view class="tab" :class="active==1?'active':''" type="default" @click="active=1">未发送</view> <view class="exp" v-for="(item,index) in itemList" :key="item.index">
<view class="tab" :class="active==2?'active':''" type="default" @click="active=2">已发送</view> <view class="item">
</view> <view class="rowHead" v-show="active==1">
<view class="itemList"> <radio :value="item.value" />
<view class="item" v-for="item in itemList" :key="item.index">
<view class="row">
<view class="col weight">
船舱层数：5层3舱
</view> </view>
<view class="col"> <view class="row">
数量：1,000 <view class="col weight">
</view> 船舱层数：5层3舱
<view class="col">
港口：厦门港
</view>
</view>
<view class="row">
<view class="col weight">
计划状态：已发送
</view>
<view class="col">
负责人：我是一个负责人
</view>
<view class="col">
发送时间：2023/09/09 16:00
</view>
</view>
<view class="rowFoot">
<view class="col">
装船进度
</view>
<view class="col">
<view class="progress-box">
<progress :percent="item" show-info stroke-width="3" />
</view> </view>
<view class="col">
数量：1,000
</view>
<view class="col">
港口：厦门港
</view>
</view>
<view class="row">
<view class="col weight">
计划状态：已发送
</view>
<view class="col">
负责人：我是一个负责人
</view>
<view class="col">
发送时间：2023/09/09 16:00
</view>
</view>
<view class="rowFoot">
<view class="col">
装船进度
</view>
<view class="col">
<view class="progress-box">
<van-progress :percentage="itemSum(item.sum)" :pivot-text="'60/' + item.sum" />
</view>
</view>
</view>
<view class="fs blue">
<text v-show="active==1">发送</text>
<text v-show="active==2">{{item.status}}</text>
</view>
</view>
<view class="details">
<uni-icons v-show="itemActive != index" class="jt" type="top" size="24" color="#108ee9"
@click="isActive(index)"></uni-icons>
<view class="itemDetails" v-show="itemActive == index">
<view class="row" v-for="cell in item.xq">
<view class="cell">
TD90959749495
</view>
<view class="cell">
中转港：厦门港
</view>
<view class="cell">
数量：100
</view>
<view class="cell">
品牌：特斯拉
</view>
<view class="cell">
车型：电动车
</view>
<view class="cell">
型号：特斯拉plus
</view>
<view class="cell blue" @click="toDetails">
详情
</view>
</view>
<uni-icons class="jt" type="bottom" size="24" color="#108ee9"
@click="itemActive = '-1'"></uni-icons>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="tablist" v-show="current==1">
<view class="tab" :class="active==1?'active':''" type="default" @click="tabChange(1)">未发送</view>
<view class="tab" :class="active==2?'active':''" type="default" @click="tabChange(2)">已发送</view>
</view>
<view class="itemList" v-show="current==1">
<view class="exp" v-for="(item,index) in itemList" :key="item.index">
<view class="item">
<view class="rowHead" v-if="active==1">
<radio :value="item.value" />
</view>
<view class="row">
<view class="col weight">
船舱层数：5层3舱
</view>
<view class="col">
数量：1,000
</view>
<view class="col">
港口：厦门港
</view>
</view>
<view class="row">
<view class="col weight">
计划状态：已发送
</view>
<view class="col">
负责人：我是一个负责人
</view>
<view class="col">
发送时间：2023/09/09 16:00
</view>
</view>
<view class="rowFoot">
<view class="col">
装船进度
</view>
<view class="col">
<view class="progress-box">
<van-progress :percentage="itemSum(item.sum)" :pivot-text="'60/' + item.sum" />
</view>
</view>
</view>
<view class="fs blue">
<text v-show="active==1">发送</text>
<text v-show="active==2">{{item.status}}</text>
</view>
</view>
<view class="details">
<uni-icons v-show="itemActive != index" class="jt" type="top" size="24" color="#108ee9"
@click="isActive(index)"></uni-icons>
<view class="itemDetails" v-show="itemActive == index">
<view class="row" v-for="cell in item.xq">
<view class="cell">
TD90959749495
</view>
<view class="cell">
中转港：厦门港
</view>
<view class="cell">
数量：100
</view>
<view class="cell">
品牌：特斯拉
</view>
<view class="cell">
车型：电动车
</view>
<view class="cell">
型号：特斯拉plus
</view>
<view class="cell blue" @click="toDetails">
详情
</view>
</view>
<uni-icons class="jt" type="bottom" size="24" color="#108ee9"
@click="itemActive = '-1'"></uni-icons>
</view>
</view>
</view>
</view>
<view class="currentList" v-show="current==2">
<view class="imgLi">
<image src="@/static/images/u176.png" mode="widthFix">
</view>
<view class="title">
第一层
</view>
<view class="nr">
<text class="text">是否可调夹板: 是</text>
<text class="text">是否有跳板: 双尾跳</text>
</view>
<view class="imgLi">
<image src="@/static/images/u86.png" mode="widthFix">
</view>
<view class="tableHead">
<text>明细(100)</text>
<uni-icons class="jt" type="bottom" size="24"></uni-icons>
</view>
<uni-table border stripe emptyText="暂无更多数据">
<!-- 表头行 -->
<uni-tr class="gray">
<uni-th align="center" width="20">提单号</uni-th>
<uni-th align="center" width="20">港口</uni-th>
<uni-th align="center" width="20">品牌</uni-th>
<uni-th align="center" width="20">车型</uni-th>
<uni-th align="center" width="20">型号</uni-th>
<uni-th align="center" width="20">车型明细</uni-th>
<uni-th align="center" width="20">数量</uni-th>
<uni-th align="center" width="20">长</uni-th>
<uni-th align="center" width="20">宽</uni-th>
<uni-th align="center" width="20">高</uni-th>
<uni-th align="center" width="20">位置</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>1123</uni-td>
<uni-td>2</uni-td>
<uni-td>3</uni-td>
<uni-td>4</uni-td>
<uni-td>1</uni-td>
<uni-td>2</uni-td>
<uni-td>3</uni-td>
<uni-td>4</uni-td>
<uni-td>1</uni-td>
<uni-td>2</uni-td>
<uni-td>3</uni-td>
</uni-tr>
</uni-table>
</view>
</view> </view>
</view> </view>
@ -94,12 +263,60 @@
<script> <script>
import HeadView from '@/components/head-view/head-view.vue'; import HeadView from '@/components/head-view/head-view.vue';
import HeadInfo from '@/components/head-info/head-info';
export default { export default {
data() { data() {
return { return {
value1: "", value1: "",
value: '', value: '',
itemList: [1, 1, 1, 1, 2, 1, 1, 1, 1], itemList: [],
goList: [{ //已发送
sum: 300,
xq: 2
},
{
sum: 600,
xq: 3
},
{
sum: 900,
xq: 1
},
{
sum: 100,
xq: 2
},
{
sum: 200,
xq: 2
}
],
noList: [{ //已发送
sum: 100,
xq: 2,
status: '暂停'
},
{
sum: 300,
xq: 3,
status: '重新发送'
},
{
sum: 200,
xq: 1,
status: '重新发送'
},
{
sum: 500,
xq: 2,
status: '暂停'
},
{
sum: 800,
xq: 2,
status: '暂停'
}
],
range: [1], range: [1],
items: [{ items: [{
value: '1', value: '1',
@ -120,16 +337,35 @@
}, },
], ],
current: 0, current: 0,
active: 1 active: 1,
itemActive: -1,
}
},
computed: {
itemSum() {
return function(item) {
let sum = (60 / item) * 100
console.log(sum);
return sum
};
} }
}, },
onLoad() { onLoad() {
this.tabChange(1)
}, },
components: { components: {
HeadView HeadView,
HeadInfo
}, },
methods: { methods: {
tabChange(tag) {
this.active = tag
if (this.active == 1) {
this.itemList = this.goList
} else {
this.itemList = this.noList
}
},
change() {}, change() {},
radioChange: function(evt) { radioChange: function(evt) {
for (let i = 0; i < this.items.length; i++) { for (let i = 0; i < this.items.length; i++) {
@ -138,21 +374,33 @@
break; break;
} }
} }
},
isActive(e) {
this.itemActive = e
},
toDetails() {
uni.navigateTo({
url: '/pages/index/instructDetails'
})
} }
} }
}; };
</script> </script>
<style> <style>
.blue {
color: #108ee9;
}
.content { .content {
padding: 20px; padding: 20px;
background-color: #fff;
.form { .form {
display: flex; display: flex;
.select { .select {
width: 100px; width: 100px;
margin-left: 15px; margin-left: 15px;
} }
@ -176,13 +424,13 @@
.buttonlist { .buttonlist {
width: 340px; width: 340px;
display: flex;
justify-content: space-between;
.button { .button {
display: inline-block;
width: 100px; width: 100px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
margin-right: 20rpx;
} }
} }
@ -210,32 +458,104 @@
.itemList { .itemList {
margin-top: 30px; margin-top: 30px;
.item { .exp {
height: 110px;
padding: 20px;
border-bottom: 2px solid #e9e9e9; border-bottom: 2px solid #e9e9e9;
display: flex; text-align: center;
justify-content: space-between; padding-bottom: 10px;
.weight { .item {
font-weight: 900; height: 110px;
} padding: 20px 20px 0;
.row {
width: 30%;
flex-direction: column;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: left;
.weight {
font-weight: 900;
}
.rowHead {
width: 4%;
}
.row {
width: 28%;
flex-direction: column;
display: flex;
justify-content: space-between;
}
.rowFoot {
width: 34%;
flex-direction: column;
display: flex;
justify-content: space-around;
}
.fs {
width: 6%;
text-align: right;
line-height: 110px;
}
} }
.rowFoot { .details {
width: 40%; padding: 20px;
flex-direction: column;
display: flex; .itemDetails {
justify-content: space-around; border-top: 2px dotted #7d7d7d;
color: #1890ff;
.row {
display: flex;
justify-content: space-between;
height: 50px;
line-height: 50px;
}
}
}
}
}
.currentList {
width: 85%;
margin: 10px auto;
.tableHead {
margin-top: 10px;
height: 50px;
line-height: 50px;
background-color: #fff;
display: flex;
justify-content: space-between;
padding: 0 12px;
font-size: 20px;
border: 1px solid #f2f2f2;
}
.gray {
background-color: #f9f9f9;
}
.imgLi {
margin-bottom: 5px;
}
.title {
line-height: 50px;
font-size: 21px;
font-weight: 900;
}
.nr {
font-size: 16px;
.text {
display: inline-block;
margin-right: 50px;
} }
} }
} }
} }
</style> </style>

277
pages/index/instructDetails.vue 100644
View File

@ -0,0 +1,277 @@
<template>
<view class="details">
<head-view title="货物详情"></head-view>
<view class="container">
<view class="formTitle">
基本信息
</view>
<view class="formNr">
<view class="row">
<view class="col">
<view class="title">
船名:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
航次:
</view>
<text>1123</text>
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
港口:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
泊位:
</view>
<text>1123</text>
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
备注:
</view>
<text>1123</text>
</view>
<view class="col">
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
货代:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
联系人:
</view>
<text>1123</text>
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
联系方式:
</view>
<text>1123</text>
</view>
<view class="col">
</view>
</view>
</view>
<view class="formTitle">
详细信息
</view>
<view class="formNr">
<view class="row">
<view class="col">
<view class="title">
提单号:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
品牌:
</view>
<text>1123</text>
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
型号:
</view>
<text>1123</text>
</view>
<view class="col">
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
车型明细:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
车长:
</view>
<text>1123</text>
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
车宽:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
车高:
</view>
<text>1123</text>
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
体积:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
重量:
</view>
<text>1123</text>
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
数量:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
单票数量:
</view>
<text>1123</text>
</view>
</view>
<view class="row">
<view class="col">
<view class="title">
单票重量:
</view>
<text>1123</text>
</view>
<view class="col">
<view class="title">
单票体积:
</view>
<text>1123</text>
</view>
</view>
</view>
<view class="formTitle">
货物明细
</view>
<view class="formNr">
<uni-table border stripe emptyText="暂无更多数据">
<!-- 表头行 -->
<uni-tr class="gray">
<uni-th align="center" width="20">序号</uni-th>
<uni-th align="center" width="20">车架号/条形码</uni-th>
<uni-th align="center" width="20">作业状态</uni-th>
<uni-th align="center" width="20">场位</uni-th>
<uni-th align="center" width="20">操作</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>1123</uni-td>
<uni-td>2</uni-td>
<uni-td>3</uni-td>
<uni-td>4</uni-td>
<uni-td align="center" class="blue" @click="cs">残损</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</view>
</template>
<script>
import HeadInfo from '@/components/head-info/head-info';
export default {
data() {
return {}
},
components: {
HeadInfo
},
methods: {
cs() {
console.log(1);
}
}
}
</script>
<style lang="less" scoped>
.blue {
color: #108ee9;
}
.details {
.container {
padding: 20px 30px;
.formTitle {
padding-left: 10px;
border-left: 5px solid #2979ff;
font-size: 20px;
font-weight: bold;
}
.formNr {
margin: 40px 0 30px;
.row {
width: 70%;
display: flex;
justify-content: space-between;
font-size: 18px;
line-height: 60px;
.col {
display: flex;
justify-content: center;
.title {
width: 150px;
text-align: right;
font-weight: 900;
color: #999ba6;
}
}
}
.gray {
background-color: #f9f9f9;
}
}
}
}
</style>

BIN
static/images/u176.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
static/images/u86.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

354
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
View File

@ -1,177 +1,177 @@
<template> <template>
<view class="uni-calendar-item__weeks-box" :class="{ <view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable, 'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--before-checked-x':weeks.beforeMultiple, 'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple, 'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked-x':weeks.afterMultiple, 'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)"> }" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{ <view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover), 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover, 'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple, 'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple, 'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple, 'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable, 'uni-calendar-item--disable':weeks.disable,
}"> }">
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> <text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text> <text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
</view> </view>
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view> <view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
weeks: { weeks: {
type: Object, type: Object,
default () { default () {
return {} return {}
} }
}, },
calendar: { calendar: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {}
} }
}, },
selected: { selected: {
type: Array, type: Array,
default: () => { default: () => {
return [] return []
} }
}, },
checkHover: { checkHover: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
methods: { methods: {
choiceDate(weeks) { choiceDate(weeks) {
this.$emit('change', weeks) this.$emit('change', weeks)
}, },
handleMousemove(weeks) { handleMousemove(weeks) {
this.$emit('handleMouse', weeks) this.$emit('handleMouse', weeks)
} }
} }
} }
</script> </script>
<style lang="scss" > <style lang="scss" >
$uni-primary: #007aff !default; $uni-primary: #007aff !default;
.uni-calendar-item__weeks-box { .uni-calendar-item__weeks-box {
flex: 1; flex: 1;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 1px 0; margin: 1px 0;
position: relative; position: relative;
} }
.uni-calendar-item__weeks-box-text { .uni-calendar-item__weeks-box-text {
font-size: 14px; font-size: 14px;
// font-family: Lato-Bold, Lato; // font-family: Lato-Bold, Lato;
font-weight: bold; font-weight: bold;
color: darken($color: $uni-primary, $amount: 40%); color: darken($color: $uni-primary, $amount: 40%);
} }
.uni-calendar-item__weeks-box-item { .uni-calendar-item__weeks-box-item {
position: relative; position: relative;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 40px; width: 40px;
height: 40px; height: 40px;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
} }
.uni-calendar-item__weeks-box-circle { .uni-calendar-item__weeks-box-circle {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
background-color: #dd524d; background-color: #dd524d;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--disable { .uni-calendar-item__weeks-box .uni-calendar-item--disable {
cursor: default; cursor: default;
} }
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable { .uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1; color: #D1D1D1;
} }
.uni-calendar-item--today { .uni-calendar-item--today {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 17%; right: 17%;
background-color: #dd524d; background-color: #dd524d;
width:6px; width:6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
} }
.uni-calendar-item--extra { .uni-calendar-item--extra {
color: #dd524d; color: #dd524d;
opacity: 0.8; opacity: 0.8;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--checked { .uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-primary; background-color: $uni-primary;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 3px solid #fff; border: 3px solid #fff;
} }
.uni-calendar-item--checked .uni-calendar-item--checked-text { .uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff; color: #fff;
} }
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text { .uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
color: #333; color: #333;
} }
.uni-calendar-item--multiple { .uni-calendar-item--multiple {
background-color: #F6F7FC; background-color: #F6F7FC;
// color: #fff; // color: #fff;
} }
.uni-calendar-item--multiple .uni-calendar-item--before-checked, .uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked { .uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: $uni-primary; background-color: $uni-primary;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 3px solid #F6F7FC; border: 3px solid #F6F7FC;
} }
.uni-calendar-item--before-checked .uni-calendar-item--checked-text, .uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text { .uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff; color: #fff;
} }
.uni-calendar-item--before-checked-x { .uni-calendar-item--before-checked-x {
border-top-left-radius: 50px; border-top-left-radius: 50px;
border-bottom-left-radius: 50px; border-bottom-left-radius: 50px;
box-sizing: border-box; box-sizing: border-box;
background-color: #F6F7FC; background-color: #F6F7FC;
} }
.uni-calendar-item--after-checked-x { .uni-calendar-item--after-checked-x {
border-top-right-radius: 50px; border-top-right-radius: 50px;
border-bottom-right-radius: 50px; border-bottom-right-radius: 50px;
background-color: #F6F7FC; background-color: #F6F7FC;
} }
</style> </style>

1858
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
View File

File diff suppressed because it is too large Load Diff

44
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
View File

@ -1,22 +1,22 @@
{ {
"uni-datetime-picker.selectDate": "select date", "uni-datetime-picker.selectDate": "select date",
"uni-datetime-picker.selectTime": "select time", "uni-datetime-picker.selectTime": "select time",
"uni-datetime-picker.selectDateTime": "select date and time", "uni-datetime-picker.selectDateTime": "select date and time",
"uni-datetime-picker.startDate": "start date", "uni-datetime-picker.startDate": "start date",
"uni-datetime-picker.endDate": "end date", "uni-datetime-picker.endDate": "end date",
"uni-datetime-picker.startTime": "start time", "uni-datetime-picker.startTime": "start time",
"uni-datetime-picker.endTime": "end time", "uni-datetime-picker.endTime": "end time",
"uni-datetime-picker.ok": "ok", "uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear", "uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel", "uni-datetime-picker.cancel": "cancel",
"uni-datetime-picker.year": "-", "uni-datetime-picker.year": "-",
"uni-datetime-picker.month": "", "uni-datetime-picker.month": "",
"uni-calender.MON": "MON", "uni-calender.MON": "MON",
"uni-calender.TUE": "TUE", "uni-calender.TUE": "TUE",
"uni-calender.WED": "WED", "uni-calender.WED": "WED",
"uni-calender.THU": "THU", "uni-calender.THU": "THU",
"uni-calender.FRI": "FRI", "uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT", "uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN", "uni-calender.SUN": "SUN",
"uni-calender.confirm": "confirm" "uni-calender.confirm": "confirm"
} }

14
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
View File

@ -1,8 +1,8 @@
import en from './en.json' import en from './en.json'
import zhHans from './zh-Hans.json' import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json' import zhHant from './zh-Hant.json'
export default { export default {
en, en,
'zh-Hans': zhHans, 'zh-Hans': zhHans,
'zh-Hant': zhHant 'zh-Hant': zhHant
} }

1868
uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
View File

File diff suppressed because it is too large Load Diff

2064
uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
View File

File diff suppressed because it is too large Load Diff

904
uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
View File

@ -1,453 +1,453 @@
class Calendar { class Calendar {
constructor({ constructor({
selected, selected,
startDate, startDate,
endDate, endDate,
range, range,
} = {}) { } = {}) {
// 当前日期 // 当前日期
this.date = this.getDateObj(new Date()) // 当前初入日期 this.date = this.getDateObj(new Date()) // 当前初入日期
// 打点信息 // 打点信息
this.selected = selected || []; this.selected = selected || [];
// 起始时间 // 起始时间
this.startDate = startDate this.startDate = startDate
// 终止时间 // 终止时间
this.endDate = endDate this.endDate = endDate
// 是否范围选择 // 是否范围选择
this.range = range this.range = range
// 多选状态 // 多选状态
this.cleanMultipleStatus() this.cleanMultipleStatus()
// 每周日期 // 每周日期
this.weeks = {} this.weeks = {}
this.lastHover = false this.lastHover = false
} }
/** /**
* 设置日期 * 设置日期
* @param {Object} date * @param {Object} date
*/ */
setDate(date) { setDate(date) {
const selectDate = this.getDateObj(date) const selectDate = this.getDateObj(date)
this.getWeeks(selectDate.fullDate) this.getWeeks(selectDate.fullDate)
} }
/** /**
* 清理多选状态 * 清理多选状态
*/ */
cleanMultipleStatus() { cleanMultipleStatus() {
this.multipleStatus = { this.multipleStatus = {
before: '', before: '',
after: '', after: '',
data: [] data: []
} }
} }
setStartDate(startDate) { setStartDate(startDate) {
this.startDate = startDate this.startDate = startDate
} }
setEndDate(endDate) { setEndDate(endDate) {
this.endDate = endDate this.endDate = endDate
} }
getPreMonthObj(date){ getPreMonthObj(date){
date = fixIosDateFormat(date) date = fixIosDateFormat(date)
date = new Date(date) date = new Date(date)
const oldMonth = date.getMonth() const oldMonth = date.getMonth()
date.setMonth(oldMonth - 1) date.setMonth(oldMonth - 1)
const newMonth = date.getMonth() const newMonth = date.getMonth()
if(oldMonth !== 0 && newMonth - oldMonth === 0){ if(oldMonth !== 0 && newMonth - oldMonth === 0){
date.setMonth(newMonth - 1) date.setMonth(newMonth - 1)
} }
return this.getDateObj(date) return this.getDateObj(date)
} }
getNextMonthObj(date){ getNextMonthObj(date){
date = fixIosDateFormat(date) date = fixIosDateFormat(date)
date = new Date(date) date = new Date(date)
const oldMonth = date.getMonth() const oldMonth = date.getMonth()
date.setMonth(oldMonth + 1) date.setMonth(oldMonth + 1)
const newMonth = date.getMonth() const newMonth = date.getMonth()
if(newMonth - oldMonth > 1){ if(newMonth - oldMonth > 1){
date.setMonth(newMonth - 1) date.setMonth(newMonth - 1)
} }
return this.getDateObj(date) return this.getDateObj(date)
} }
/** /**
* 获取指定格式Date对象 * 获取指定格式Date对象
*/ */
getDateObj(date) { getDateObj(date) {
date = fixIosDateFormat(date) date = fixIosDateFormat(date)
date = new Date(date) date = new Date(date)
return { return {
fullDate: getDate(date), fullDate: getDate(date),
year: date.getFullYear(), year: date.getFullYear(),
month: addZero(date.getMonth() + 1), month: addZero(date.getMonth() + 1),
date: addZero(date.getDate()), date: addZero(date.getDate()),
day: date.getDay() day: date.getDay()
} }
} }
/** /**
* 获取上一个月日期集合 * 获取上一个月日期集合
*/ */
getPreMonthDays(amount, dateObj) { getPreMonthDays(amount, dateObj) {
const result = [] const result = []
for (let i = amount - 1; i >= 0; i--) { for (let i = amount - 1; i >= 0; i--) {
const month = dateObj.month > 1 ? dateObj.month -1 : 12 const month = dateObj.month > 1 ? dateObj.month -1 : 12
const year = month === 12 ? dateObj.year - 1 : dateObj.year const year = month === 12 ? dateObj.year - 1 : dateObj.year
const date = new Date(year,month,-i).getDate() const date = new Date(year,month,-i).getDate()
const fullDate = `${year}-${addZero(month)}-${addZero(date)}` const fullDate = `${year}-${addZero(month)}-${addZero(date)}`
let multiples = this.multipleStatus.data let multiples = this.multipleStatus.data
let multiplesStatus = -1 let multiplesStatus = -1
if (this.range && multiples) { if (this.range && multiples) {
multiplesStatus = multiples.findIndex((item) => { multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, fullDate) return this.dateEqual(item, fullDate)
}) })
} }
const checked = multiplesStatus !== -1 const checked = multiplesStatus !== -1
// 获取打点信息 // 获取打点信息
const extraInfo = this.selected && this.selected.find((item) => { const extraInfo = this.selected && this.selected.find((item) => {
if (this.dateEqual(fullDate, item.date)) { if (this.dateEqual(fullDate, item.date)) {
return item return item
} }
}) })
result.push({ result.push({
fullDate, fullDate,
year, year,
month, month,
date, date,
multiple: this.range ? checked : false, multiple: this.range ? checked : false,
beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after), beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after), afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after),
disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)), disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)),
isToday: fullDate === this.date.fullDate, isToday: fullDate === this.date.fullDate,
userChecked: false, userChecked: false,
extraInfo extraInfo
}) })
} }
return result return result
} }
/** /**
* 获取本月日期集合 * 获取本月日期集合
*/ */
getCurrentMonthDays(amount, dateObj) { getCurrentMonthDays(amount, dateObj) {
const result = [] const result = []
const fullDate = this.date.fullDate const fullDate = this.date.fullDate
for (let i = 1; i <= amount; i++) { for (let i = 1; i <= amount; i++) {
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}` const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
const isToday = fullDate === currentDate const isToday = fullDate === currentDate
// 获取打点信息 // 获取打点信息
const extraInfo = this.selected && this.selected.find((item) => { const extraInfo = this.selected && this.selected.find((item) => {
if (this.dateEqual(currentDate, item.date)) { if (this.dateEqual(currentDate, item.date)) {
return item return item
} }
}) })
// 日期禁用 // 日期禁用
let disableBefore = true let disableBefore = true
let disableAfter = true let disableAfter = true
if (this.startDate) { if (this.startDate) {
disableBefore = dateCompare(this.startDate, currentDate) disableBefore = dateCompare(this.startDate, currentDate)
} }
if (this.endDate) { if (this.endDate) {
disableAfter = dateCompare(currentDate, this.endDate) disableAfter = dateCompare(currentDate, this.endDate)
} }
let multiples = this.multipleStatus.data let multiples = this.multipleStatus.data
let multiplesStatus = -1 let multiplesStatus = -1
if (this.range && multiples) { if (this.range && multiples) {
multiplesStatus = multiples.findIndex((item) => { multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, currentDate) return this.dateEqual(item, currentDate)
}) })
} }
const checked = multiplesStatus !== -1 const checked = multiplesStatus !== -1
result.push({ result.push({
fullDate: currentDate, fullDate: currentDate,
year: dateObj.year, year: dateObj.year,
month: dateObj.month, month: dateObj.month,
date: i, date: i,
multiple: this.range ? checked : false, multiple: this.range ? checked : false,
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after), beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after), afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(currentDate,this.endDate)), disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(currentDate,this.endDate)),
isToday, isToday,
userChecked: false, userChecked: false,
extraInfo extraInfo
}) })
} }
return result return result
} }
/** /**
* 获取下一个月日期集合 * 获取下一个月日期集合
*/ */
_getNextMonthDays(amount, dateObj) { _getNextMonthDays(amount, dateObj) {
const result = [] const result = []
const month = dateObj.month + 1 const month = dateObj.month + 1
for (let i = 1; i <= amount; i++) { for (let i = 1; i <= amount; i++) {
const month = dateObj.month === 12 ? 1 : dateObj.month*1 + 1 const month = dateObj.month === 12 ? 1 : dateObj.month*1 + 1
const year = month === 1 ? dateObj.year + 1 : dateObj.year const year = month === 1 ? dateObj.year + 1 : dateObj.year
const fullDate = `${year}-${addZero(month)}-${addZero(i)}` const fullDate = `${year}-${addZero(month)}-${addZero(i)}`
let multiples = this.multipleStatus.data let multiples = this.multipleStatus.data
let multiplesStatus = -1 let multiplesStatus = -1
if (this.range && multiples) { if (this.range && multiples) {
multiplesStatus = multiples.findIndex((item) => { multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, fullDate) return this.dateEqual(item, fullDate)
}) })
} }
const checked = multiplesStatus !== -1 const checked = multiplesStatus !== -1
// 获取打点信息 // 获取打点信息
const extraInfo = this.selected && this.selected.find((item) => { const extraInfo = this.selected && this.selected.find((item) => {
if (this.dateEqual(fullDate, item.date)) { if (this.dateEqual(fullDate, item.date)) {
return item return item
} }
}) })
result.push({ result.push({
fullDate, fullDate,
year, year,
date: i, date: i,
month, month,
multiple: this.range ? checked : false, multiple: this.range ? checked : false,
beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after), beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after), afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after),
disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)), disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)),
isToday: fullDate === this.date.fullDate, isToday: fullDate === this.date.fullDate,
userChecked: false, userChecked: false,
extraInfo extraInfo
}) })
} }
return result return result
} }
/** /**
* 获取当前日期详情 * 获取当前日期详情
* @param {Object} date * @param {Object} date
*/ */
getInfo(date) { getInfo(date) {
if (!date) { if (!date) {
date = new Date() date = new Date()
} }
return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate) return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
} }
/** /**
* 比较时间是否相等 * 比较时间是否相等
*/ */
dateEqual(before, after) { dateEqual(before, after) {
before = new Date(fixIosDateFormat(before)) before = new Date(fixIosDateFormat(before))
after = new Date(fixIosDateFormat(after)) after = new Date(fixIosDateFormat(after))
return before.valueOf() === after.valueOf() return before.valueOf() === after.valueOf()
} }
/** /**
* 比较真实起始日期 * 比较真实起始日期
*/ */
isLogicBefore(currentDate, before, after) { isLogicBefore(currentDate, before, after) {
let logicBefore = before let logicBefore = before
if (before && after) { if (before && after) {
logicBefore = dateCompare(before, after) ? before : after logicBefore = dateCompare(before, after) ? before : after
} }
return this.dateEqual(logicBefore, currentDate) return this.dateEqual(logicBefore, currentDate)
} }
isLogicAfter(currentDate, before, after) { isLogicAfter(currentDate, before, after) {
let logicAfter = after let logicAfter = after
if (before && after) { if (before && after) {
logicAfter = dateCompare(before, after) ? after : before logicAfter = dateCompare(before, after) ? after : before
} }
return this.dateEqual(logicAfter, currentDate) return this.dateEqual(logicAfter, currentDate)
} }
/** /**
* 获取日期范围内所有日期 * 获取日期范围内所有日期
* @param {Object} begin * @param {Object} begin
* @param {Object} end * @param {Object} end
*/ */
geDateAll(begin, end) { geDateAll(begin, end) {
var arr = [] var arr = []
var ab = begin.split('-') var ab = begin.split('-')
var ae = end.split('-') var ae = end.split('-')
var db = new Date() var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2]) db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date() var de = new Date()
de.setFullYear(ae[0], ae[1] - 1, ae[2]) de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000 var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000 var unixDe = de.getTime() - 24 * 60 * 60 * 1000
for (var k = unixDb; k <= unixDe;) { for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000 k = k + 24 * 60 * 60 * 1000
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate) arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
} }
return arr return arr
} }
/** /**
* 获取多选状态 * 获取多选状态
*/ */
setMultiple(fullDate) { setMultiple(fullDate) {
if (!this.range) return if (!this.range) return
let { let {
before, before,
after after
} = this.multipleStatus } = this.multipleStatus
if (before && after) { if (before && after) {
if (!this.lastHover) { if (!this.lastHover) {
this.lastHover = true this.lastHover = true
return return
} }
this.multipleStatus.before = fullDate this.multipleStatus.before = fullDate
this.multipleStatus.after = '' this.multipleStatus.after = ''
this.multipleStatus.data = [] this.multipleStatus.data = []
this.multipleStatus.fulldate = '' this.multipleStatus.fulldate = ''
this.lastHover = false this.lastHover = false
} else { } else {
if (!before) { if (!before) {
this.multipleStatus.before = fullDate this.multipleStatus.before = fullDate
this.lastHover = false this.lastHover = false
} else { } else {
this.multipleStatus.after = fullDate this.multipleStatus.after = fullDate
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
.after); .after);
} else { } else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
.before); .before);
} }
this.lastHover = true this.lastHover = true
} }
} }
this.getWeeks(fullDate) this.getWeeks(fullDate)
} }
/** /**
* 鼠标 hover 更新多选状态 * 鼠标 hover 更新多选状态
*/ */
setHoverMultiple(fullDate) { setHoverMultiple(fullDate) {
if (!this.range || this.lastHover) return if (!this.range || this.lastHover) return
const { before } = this.multipleStatus const { before } = this.multipleStatus
if (!before) { if (!before) {
this.multipleStatus.before = fullDate this.multipleStatus.before = fullDate
} else { } else {
this.multipleStatus.after = fullDate this.multipleStatus.after = fullDate
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after); this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else { } else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before); this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
} }
} }
this.getWeeks(fullDate) this.getWeeks(fullDate)
} }
/** /**
* 更新默认值多选状态 * 更新默认值多选状态
*/ */
setDefaultMultiple(before, after) { setDefaultMultiple(before, after) {
this.multipleStatus.before = before this.multipleStatus.before = before
this.multipleStatus.after = after this.multipleStatus.after = after
if (before && after) { if (before && after) {
if (dateCompare(before, after)) { if (dateCompare(before, after)) {
this.multipleStatus.data = this.geDateAll(before, after); this.multipleStatus.data = this.geDateAll(before, after);
this.getWeeks(after) this.getWeeks(after)
} else { } else {
this.multipleStatus.data = this.geDateAll(after, before); this.multipleStatus.data = this.geDateAll(after, before);
this.getWeeks(before) this.getWeeks(before)
} }
} }
} }
/** /**
* 获取每周数据 * 获取每周数据
* @param {Object} dateData * @param {Object} dateData
*/ */
getWeeks(dateData) { getWeeks(dateData) {
const { const {
year, year,
month, month,
} = this.getDateObj(dateData) } = this.getDateObj(dateData)
const preMonthDayAmount = new Date(year, month - 1, 1).getDay() const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData)) const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
const currentMonthDayAmount = new Date(year, month, 0).getDate() const currentMonthDayAmount = new Date(year, month, 0).getDate()
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData)) const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData)) const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays] const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
const weeks = new Array(6) const weeks = new Array(6)
for (let i = 0; i < calendarDays.length; i++) { for (let i = 0; i < calendarDays.length; i++) {
const index = Math.floor(i / 7) const index = Math.floor(i / 7)
if(!weeks[index]){ if(!weeks[index]){
weeks[index] = new Array(7) weeks[index] = new Array(7)
} }
weeks[index][i % 7] = calendarDays[i] weeks[index][i % 7] = calendarDays[i]
} }
this.calendar = calendarDays this.calendar = calendarDays
this.weeks = weeks this.weeks = weeks
} }
} }
function getDateTime(date, hideSecond){ function getDateTime(date, hideSecond){
return `${getDate(date)} ${getTime(date, hideSecond)}` return `${getDate(date)} ${getTime(date, hideSecond)}`
} }
function getDate(date) { function getDate(date) {
date = fixIosDateFormat(date) date = fixIosDateFormat(date)
date = new Date(date) date = new Date(date)
const year = date.getFullYear() const year = date.getFullYear()
const month = date.getMonth()+1 const month = date.getMonth()+1
const day = date.getDate() const day = date.getDate()
return `${year}-${addZero(month)}-${addZero(day)}` return `${year}-${addZero(month)}-${addZero(day)}`
} }
function getTime(date, hideSecond){ function getTime(date, hideSecond){
date = fixIosDateFormat(date) date = fixIosDateFormat(date)
date = new Date(date) date = new Date(date)
const hour = date.getHours() const hour = date.getHours()
const minute = date.getMinutes() const minute = date.getMinutes()
const second = date.getSeconds() const second = date.getSeconds()
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}` return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
} }
function addZero(num) { function addZero(num) {
if(num < 10){ if(num < 10){
num = `0${num}` num = `0${num}`
} }
return num return num
} }
function getDefaultSecond(hideSecond) { function getDefaultSecond(hideSecond) {
return hideSecond ? '00:00' : '00:00:00' return hideSecond ? '00:00' : '00:00:00'
} }
function dateCompare(startDate, endDate) { function dateCompare(startDate, endDate) {
startDate = new Date(fixIosDateFormat(startDate)) startDate = new Date(fixIosDateFormat(startDate))
endDate = new Date(fixIosDateFormat(endDate)) endDate = new Date(fixIosDateFormat(endDate))
return startDate <= endDate return startDate <= endDate
} }
function checkDate(date){ function checkDate(date){
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
return date.match(dateReg) return date.match(dateReg)
} }
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9]:[0-5]?[0-9])?$/ const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9]:[0-5]?[0-9])?$/
function fixIosDateFormat(value) { function fixIosDateFormat(value) {
if (typeof value === 'string' && dateTimeReg.test(value)) { if (typeof value === 'string' && dateTimeReg.test(value)) {
value = value.replace(/-/g, '/') value = value.replace(/-/g, '/')
} }
return value return value
} }
export {Calendar, getDateTime, getDate, getTime, addZero, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat} export {Calendar, getDateTime, getDate, getTime, addZero, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat}

27
uni_modules/uni-table/changelog.md 100644
View File

@ -0,0 +1,27 @@
## 1.2.3（2023-03-28）
- 修复 在vue3模式下可能会出现错误的问题
## 1.2.2（2022-11-29）
- 优化 主题样式
## 1.2.1（2022-06-06）
- 修复 微信小程序存在无使用组件的问题
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-table](https://uniapp.dcloud.io/component/uniui/uni-table)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-07-08）
- 新增 uni-th 支持 date 日期筛选范围
## 1.0.6（2021-07-05）
- 新增 uni-th 支持 range 筛选范围
## 1.0.5（2021-06-28）
- 新增 uni-th 筛选功能
## 1.0.4（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.3（2021-04-16）
- 新增 sortable 属性，是否开启单列排序
- 优化 表格多选逻辑
## 1.0.2（2021-03-22）
- uni-tr 添加 disabled 属性，用于 type=selection 时，设置某行是否可由全选按钮控制
## 1.0.1（2021-02-05）
- 调整为uni_modules目录规范

455
uni_modules/uni-table/components/uni-table/uni-table.vue 100644
View File

@ -0,0 +1,455 @@
<template>
<view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
<!-- #ifdef H5 -->
<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
<slot></slot>
<tr v-if="noData" class="uni-table-loading">
<td class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</td>
</tr>
<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
</table>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
<slot></slot>
<view v-if="noData" class="uni-table-loading">
<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
</view>
<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
</view>
<!-- #endif -->
</view>
</template>
<script>
/**
* Table 表格
* @description 用于展示多条结构类似的数据
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Boolean} border 是否带有纵向边框
* @property {Boolean} stripe 是否显示斑马线
* @property {Boolean} type 是否开启多选
* @property {String} emptyText 空数据时显示的文本内容
* @property {Boolean} loading 显示加载中
* @event {Function} selection-change 开启多选时，当选择项发生变化时会触发该事件
*/
export default {
name: 'uniTable',
options: {
virtualHost: true
},
emits:['selection-change'],
props: {
data: {
type: Array,
default() {
return []
}
},
// 是否有竖线
border: {
type: Boolean,
default: false
},
// 是否显示斑马线
stripe: {
type: Boolean,
default: false
},
// 多选
type: {
type: String,
default: ''
},
// 没有更多数据
emptyText: {
type: String,
default: '没有更多数据'
},
loading: {
type: Boolean,
default: false
},
rowKey: {
type: String,
default: ''
}
},
data() {
return {
noData: true,
minWidth: 0,
multiTableHeads: []
}
},
watch: {
loading(val) {},
data(newVal) {
let theadChildren = this.theadChildren
let rowspan = 1
if (this.theadChildren) {
rowspan = this.theadChildren.rowspan
}
// this.trChildren.length - rowspan
this.noData = false
// this.noData = newVal.length === 0
}
},
created() {
// 定义tr的实例数组
this.trChildren = []
this.thChildren = []
this.theadChildren = null
this.backData = []
this.backIndexData = []
},
methods: {
isNodata() {
let theadChildren = this.theadChildren
let rowspan = 1
if (this.theadChildren) {
rowspan = this.theadChildren.rowspan
}
this.noData = this.trChildren.length - rowspan <= 0
},
/**
* 选中所有
*/
selectionAll() {
let startIndex = 1
let theadChildren = this.theadChildren
if (!this.theadChildren) {
theadChildren = this.trChildren[0]
} else {
startIndex = theadChildren.rowspan - 1
}
let isHaveData = this.data && this.data.length > 0
theadChildren.checked = true
theadChildren.indeterminate = false
this.trChildren.forEach((item, index) => {
if (!item.disabled) {
item.checked = true
if (isHaveData && item.keyValue) {
const row = this.data.find(v => v[this.rowKey] === item.keyValue)
if (!this.backData.find(v => v[this.rowKey] === row[this.rowKey])) {
this.backData.push(row)
}
}
if (index > (startIndex - 1) && this.backIndexData.indexOf(index - startIndex) === -1) {
this.backIndexData.push(index - startIndex)
}
}
})
// this.backData = JSON.parse(JSON.stringify(this.data))
this.$emit('selection-change', {
detail: {
value: this.backData,
index: this.backIndexData
}
})
},
/**
* 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
*/
toggleRowSelection(row, selected) {
// if (!this.theadChildren) return
row = [].concat(row)
this.trChildren.forEach((item, index) => {
// if (item.keyValue) {
const select = row.findIndex(v => {
//
if (typeof v === 'number') {
return v === index - 1
} else {
return v[this.rowKey] === item.keyValue
}
})
let ischeck = item.checked
if (select !== -1) {
if (typeof selected === 'boolean') {
item.checked = selected
} else {
item.checked = !item.checked
}
if (ischeck !== item.checked) {
this.check(item.rowData||item, item.checked, item.rowData?item.keyValue:null, true)
}
}
// }
})
this.$emit('selection-change', {
detail: {
value: this.backData,
index:this.backIndexData
}
})
},
/**
* 用于多选表格，清空用户的选择
*/
clearSelection() {
let theadChildren = this.theadChildren
if (!this.theadChildren) {
theadChildren = this.trChildren[0]
}
// if (!this.theadChildren) return
theadChildren.checked = false
theadChildren.indeterminate = false
this.trChildren.forEach(item => {
// if (item.keyValue) {
item.checked = false
// }
})
this.backData = []
this.backIndexData = []
this.$emit('selection-change', {
detail: {
value: [],
index: []
}
})
},
/**
* 用于多选表格，切换所有行的选中状态
*/
toggleAllSelection() {
let list = []
let startIndex = 1
let theadChildren = this.theadChildren
if (!this.theadChildren) {
theadChildren = this.trChildren[0]
} else {
startIndex = theadChildren.rowspan - 1
}
this.trChildren.forEach((item, index) => {
if (!item.disabled) {
if (index > (startIndex - 1) ) {
list.push(index-startIndex)
}
}
})
this.toggleRowSelection(list)
},
/**
* 选中\取消选中
* @param {Object} child
* @param {Object} check
* @param {Object} rowValue
*/
check(child, check, keyValue, emit) {
let theadChildren = this.theadChildren
if (!this.theadChildren) {
theadChildren = this.trChildren[0]
}
let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
if(childDomIndex < 0){
childDomIndex = this.data.findIndex(v=>v[this.rowKey] === keyValue) + 1
}
const dataLen = this.trChildren.filter(v => !v.disabled && v.keyValue).length
if (childDomIndex === 0) {
check ? this.selectionAll() : this.clearSelection()
return
}
if (check) {
if (keyValue) {
this.backData.push(child)
}
this.backIndexData.push(childDomIndex - 1)
} else {
const index = this.backData.findIndex(v => v[this.rowKey] === keyValue)
const idx = this.backIndexData.findIndex(item => item === childDomIndex - 1)
if (keyValue) {
this.backData.splice(index, 1)
}
this.backIndexData.splice(idx, 1)
}
const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled)
if (!domCheckAll) {
theadChildren.indeterminate = false
theadChildren.checked = true
} else {
theadChildren.indeterminate = true
theadChildren.checked = false
}
if (this.backIndexData.length === 0) {
theadChildren.indeterminate = false
}
if (!emit) {
this.$emit('selection-change', {
detail: {
value: this.backData,
index: this.backIndexData
}
})
}
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
.uni-table-scroll {
width: 100%;
/* #ifndef APP-NVUE */
overflow-x: auto;
/* #endif */
}
.uni-table {
position: relative;
width: 100%;
border-radius: 5px;
// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
background-color: #fff;
/* #ifndef APP-NVUE */
box-sizing: border-box;
display: table;
overflow-x: auto;
::v-deep .uni-table-tr:nth-child(n + 2) {
&:hover {
background-color: #f5f7fa;
}
}
::v-deep .uni-table-thead {
.uni-table-tr {
// background-color: #f5f7fa;
&:hover {
background-color:#fafafa;
}
}
}
/* #endif */
}
.table--border {
border: 1px $border-color solid;
border-right: none;
}
.border-none {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
.table--stripe {
/* #ifndef APP-NVUE */
::v-deep .uni-table-tr:nth-child(2n + 3) {
background-color: #fafafa;
}
/* #endif */
}
/* 表格加载、无数据样式 */
.uni-table-loading {
position: relative;
/* #ifndef APP-NVUE */
display: table-row;
/* #endif */
height: 50px;
line-height: 50px;
overflow: hidden;
box-sizing: border-box;
}
.empty-border {
border-right: 1px $border-color solid;
}
.uni-table-text {
position: absolute;
right: 0;
left: 0;
text-align: center;
font-size: 14px;
color: #999;
}
.uni-table-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index: 99;
/* #ifndef APP-NVUE */
display: flex;
margin: auto;
transition: all 0.5s;
/* #endif */
justify-content: center;
align-items: center;
}
.uni-table--loader {
width: 30px;
height: 30px;
border: 2px solid #aaa;
// border-bottom-color: transparent;
border-radius: 50%;
/* #ifndef APP-NVUE */
animation: 2s uni-table--loader linear infinite;
/* #endif */
position: relative;
}
@keyframes uni-table--loader {
0% {
transform: rotate(360deg);
}
10% {
border-left-color: transparent;
}
20% {
border-bottom-color: transparent;
}
30% {
border-right-color: transparent;
}
40% {
border-top-color: transparent;
}
50% {
transform: rotate(0deg);
}
60% {
border-top-color: transparent;
}
70% {
border-left-color: transparent;
}
80% {
border-bottom-color: transparent;
}
90% {
border-right-color: transparent;
}
100% {
transform: rotate(-360deg);
}
}
</style>

29
uni_modules/uni-table/components/uni-tbody/uni-tbody.vue 100644
View File

@ -0,0 +1,29 @@
<template>
<!-- #ifdef H5 -->
<tbody>
<slot></slot>
</tbody>
<!-- #endif -->
<!-- #ifndef H5 -->
<view><slot></slot></view>
<!-- #endif -->
</template>
<script>
export default {
name: 'uniBody',
options: {
virtualHost: true
},
data() {
return {
}
},
created() {},
methods: {}
}
</script>
<style>
</style>

90
uni_modules/uni-table/components/uni-td/uni-td.vue 100644
View File

@ -0,0 +1,90 @@
<template>
<!-- #ifdef H5 -->
<td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</td>
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- :class="{'table--border':border}" -->
<view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
/**
* Td 单元格
* @description 表格中的标准单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number} align = [left|center|right] 单元格对齐方式
*/
export default {
name: 'uniTd',
options: {
virtualHost: true
},
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
},
rowspan: {
type: [Number,String],
default: 1
},
colspan: {
type: [Number,String],
default: 1
}
},
data() {
return {
border: false
};
},
created() {
this.root = this.getTable()
this.border = this.root.border
},
methods: {
/**
* 获取父元素实例
*/
getTable() {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== 'uniTable') {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
},
}
}
</script>
<style lang="scss">
$border-color:#EBEEF5;
.uni-table-td {
display: table-cell;
padding: 8px 10px;
font-size: 14px;
border-bottom: 1px $border-color solid;
font-weight: 400;
color: #606266;
line-height: 23px;
box-sizing: border-box;
}
.table--border {
border-right: 1px $border-color solid;
}
</style>

511
uni_modules/uni-table/components/uni-th/filter-dropdown.vue 100644
View File

@ -0,0 +1,511 @@
<template>
<view class="uni-filter-dropdown">
<view class="dropdown-btn" @click="onDropdown">
<view class="icon-select" :class="{active: canReset}" v-if="isSelect || isRange"></view>
<view class="icon-search" :class="{active: canReset}" v-if="isSearch">
<view class="icon-search-0"></view>
<view class="icon-search-1"></view>
</view>
<view class="icon-calendar" :class="{active: canReset}" v-if="isDate">
<view class="icon-calendar-0"></view>
<view class="icon-calendar-1"></view>
</view>
</view>
<view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
<view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
<!-- select-->
<view v-if="isSelect" class="list">
<label class="flex-r a-i-c list-item" v-for="(item,index) in dataList" :key="index"
@click="onItemClick($event, index)">
<check-box class="check" :checked="item.checked" />
<view class="checklist-content">
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
</view>
</label>
</view>
<view v-if="isSelect" class="flex-r opera-area">
<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSelectReset">
{{resource.reset}}</view>
<view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{resource.submit}}</view>
</view>
<!-- search -->
<view v-if="isSearch" class="search-area">
<input class="search-input" v-model="filterValue" />
</view>
<view v-if="isSearch" class="flex-r opera-area">
<view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{resource.search}}</view>
<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSearchReset">
{{resource.reset}}</view>
</view>
<!-- range -->
<view v-if="isRange">
<view class="input-label">{{resource.gt}}</view>
<input class="input" v-model="gtValue" />
<view class="input-label">{{resource.lt}}</view>
<input class="input" v-model="ltValue" />
</view>
<view v-if="isRange" class="flex-r opera-area">
<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleRangeReset">
{{resource.reset}}</view>
<view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{resource.submit}}</view>
</view>
<!-- date -->
<view v-if="isDate">
<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
<view></view>
</uni-datetime-picker>
</view>
</view>
</view>
</template>
<script>
import checkBox from '../uni-tr/table-checkbox.vue'
const resource = {
"reset": "重置",
"search": "搜索",
"submit": "确定",
"filter": "筛选",
"gt": "大于等于",
"lt": "小于等于",
"date": "日期范围"
}
const DropdownType = {
Select: "select",
Search: "search",
Range: "range",
Date: "date",
Timestamp: "timestamp"
}
export default {
name: 'FilterDropdown',
emits:['change'],
components: {
checkBox
},
options: {
virtualHost: true
},
props: {
filterType: {
type: String,
default: DropdownType.Select
},
filterData: {
type: Array,
default () {
return []
}
},
mode: {
type: String,
default: 'default'
},
map: {
type: Object,
default () {
return {
text: 'text',
value: 'value'
}
}
},
filterDefaultValue: {
type: [Array,String],
default () {
return ""
}
}
},
computed: {
canReset() {
if (this.isSearch) {
return this.filterValue.length > 0
}
if (this.isSelect) {
return this.checkedValues.length > 0
}
if (this.isRange) {
return (this.gtValue.length > 0 && this.ltValue.length > 0)
}
if (this.isDate) {
return this.dateSelect.length > 0
}
return false
},
isSelect() {
return this.filterType === DropdownType.Select
},
isSearch() {
return this.filterType === DropdownType.Search
},
isRange() {
return this.filterType === DropdownType.Range
},
isDate() {
return (this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp)
}
},
watch: {
filterData(newVal) {
this._copyFilters()
},
indeterminate(newVal) {
this.isIndeterminate = newVal
}
},
data() {
return {
resource,
enabled: true,
isOpened: false,
dataList: [],
filterValue: this.filterDefaultValue,
checkedValues: [],
gtValue: '',
ltValue: '',
dateRange: [],
dateSelect: []
};
},
created() {
this._copyFilters()
},
methods: {
_copyFilters() {
let dl = JSON.parse(JSON.stringify(this.filterData))
for (let i = 0; i < dl.length; i++) {
if (dl[i].checked === undefined) {
dl[i].checked = false
}
}
this.dataList = dl
},
openPopup() {
this.isOpened = true
if (this.isDate) {
this.$nextTick(() => {
if (!this.dateRange.length) {
this.resetDate()
}
this.$refs.datetimepicker.show()
})
}
},
closePopup() {
this.isOpened = false
},
handleClose(e) {
this.closePopup()
},
resetDate() {
let date = new Date()
let dateText = date.toISOString().split('T')[0]
this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59']
},
onDropdown(e) {
this.openPopup()
},
onItemClick(e, index) {
let items = this.dataList
let listItem = items[index]
if (listItem.checked === undefined) {
items[index].checked = true
} else {
items[index].checked = !listItem.checked
}
let checkvalues = []
for (let i = 0; i < items.length; i++) {
const item = items[i]
if (item.checked) {
checkvalues.push(item.value)
}
}
this.checkedValues = checkvalues
},
datetimechange(e) {
this.closePopup()
this.dateRange = e
this.dateSelect = e
this.$emit('change', {
filterType: this.filterType,
filter: e
})
},
timepickerclose(e) {
this.closePopup()
},
handleSelectSubmit() {
this.closePopup()
this.$emit('change', {
filterType: this.filterType,
filter: this.checkedValues
})
},
handleSelectReset() {
if (!this.canReset) {
return;
}
var items = this.dataList
for (let i = 0; i < items.length; i++) {
let item = items[i]
this.$set(item, 'checked', false)
}
this.checkedValues = []
this.handleSelectSubmit()
},
handleSearchSubmit() {
this.closePopup()
this.$emit('change', {
filterType: this.filterType,
filter: this.filterValue
})
},
handleSearchReset() {
if (!this.canReset) {
return;
}
this.filterValue = ''
this.handleSearchSubmit()
},
handleRangeSubmit(isReset) {
this.closePopup()
this.$emit('change', {
filterType: this.filterType,
filter: isReset === true ? [] : [parseInt(this.gtValue), parseInt(this.ltValue)]
})
},
handleRangeReset() {
if (!this.canReset) {
return;
}
this.gtValue = ''
this.ltValue = ''
this.handleRangeSubmit(true)
}
}
}
</script>
<style lang="scss">
$uni-primary: #1890ff !default;
.flex-r {
display: flex;
flex-direction: row;
}
.flex-f {
flex: 1;
}
.a-i-c {
align-items: center;
}
.j-c-c {
justify-content: center;
}
.icon-select {
width: 14px;
height: 16px;
border: solid 6px transparent;
border-top: solid 6px #ddd;
border-bottom: none;
background-color: #ddd;
background-clip: content-box;
box-sizing: border-box;
}
.icon-select.active {
background-color: $uni-primary;
border-top-color: $uni-primary;
}
.icon-search {
width: 12px;
height: 16px;
position: relative;
}
.icon-search-0 {
border: 2px solid #ddd;
border-radius: 8px;
width: 7px;
height: 7px;
}
.icon-search-1 {
position: absolute;
top: 8px;
right: 0;
width: 1px;
height: 7px;
background-color: #ddd;
transform: rotate(-45deg);
}
.icon-search.active .icon-search-0 {
border-color: $uni-primary;
}
.icon-search.active .icon-search-1 {
background-color: $uni-primary;
}
.icon-calendar {
color: #ddd;
width: 14px;
height: 16px;
}
.icon-calendar-0 {
height: 4px;
margin-top: 3px;
margin-bottom: 1px;
background-color: #ddd;
border-radius: 2px 2px 1px 1px;
position: relative;
}
.icon-calendar-0:before, .icon-calendar-0:after {
content: '';
position: absolute;
top: -3px;
width: 4px;
height: 3px;
border-radius: 1px;
background-color: #ddd;
}
.icon-calendar-0:before {
left: 2px;
}
.icon-calendar-0:after {
right: 2px;
}
.icon-calendar-1 {
height: 9px;
background-color: #ddd;
border-radius: 1px 1px 2px 2px;
}
.icon-calendar.active {
color: $uni-primary;
}
.icon-calendar.active .icon-calendar-0,
.icon-calendar.active .icon-calendar-1,
.icon-calendar.active .icon-calendar-0:before,
.icon-calendar.active .icon-calendar-0:after {
background-color: $uni-primary;
}
.uni-filter-dropdown {
position: relative;
font-weight: normal;
}
.dropdown-popup {
position: absolute;
top: 100%;
background-color: #fff;
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
min-width: 150px;
z-index: 1000;
}
.dropdown-popup-left {
left: 0;
}
.dropdown-popup-right {
right: 0;
}
.uni-dropdown-cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: transparent;
z-index: 100;
}
.list {
margin-top: 5px;
margin-bottom: 5px;
}
.list-item {
padding: 5px 10px;
text-align: left;
}
.list-item:hover {
background-color: #f0f0f0;
}
.check {
margin-right: 5px;
}
.search-area {
padding: 10px;
}
.search-input {
font-size: 12px;
border: 1px solid #f0f0f0;
border-radius: 3px;
padding: 2px 5px;
min-width: 150px;
text-align: left;
}
.input-label {
margin: 10px 10px 5px 10px;
text-align: left;
}
.input {
font-size: 12px;
border: 1px solid #f0f0f0;
border-radius: 3px;
margin: 10px;
padding: 2px 5px;
min-width: 150px;
text-align: left;
}
.opera-area {
cursor: default;
border-top: 1px solid #ddd;
padding: 5px;
}
.opera-area .btn {
font-size: 12px;
border-radius: 3px;
margin: 5px;
padding: 4px 4px;
}
.btn-default {
border: 1px solid #ddd;
}
.btn-default.disable {
border-color: transparent;
}
.btn-submit {
background-color: $uni-primary;
color: #ffffff;
}
</style>

285
uni_modules/uni-table/components/uni-th/uni-th.vue 100644
View File

@ -0,0 +1,285 @@
<template>
<!-- #ifdef H5 -->
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
<view class="uni-table-th-row">
<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
<slot></slot>
<view v-if="sortable" class="arrow-box">
<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
</view>
</view>
<dropdown v-if="filterType || filterData.length" :filterDefaultValue="filterDefaultValue" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
</view>
</th>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }"><slot></slot></view>
<!-- #endif -->
</template>
<script>
// #ifdef H5
import dropdown from './filter-dropdown.vue'
// #endif
/**
* Th 表头
* @description 表格内的表头单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number | String} width 单元格宽度（支持纯数字、携带单位px或rpx）
* @property {Boolean} sortable 是否启用排序
* @property {Number} align = [left|center|right] 单元格对齐方式
* @value left 单元格文字左侧对齐
* @value center 单元格文字居中
* @value right 单元格文字右侧对齐
* @property {Array} filterData 筛选数据
* @property {String} filterType [search|select] 筛选类型
* @value search 关键字搜素
* @value select 条件选择
* @event {Function} sort-change 排序触发事件
*/
export default {
name: 'uniTh',
options: {
virtualHost: true
},
components: {
// #ifdef H5
dropdown
// #endif
},
emits:['sort-change','filter-change'],
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
},
rowspan: {
type: [Number, String],
default: 1
},
colspan: {
type: [Number, String],
default: 1
},
sortable: {
type: Boolean,
default: false
},
filterType: {
type: String,
default: ""
},
filterData: {
type: Array,
default () {
return []
}
},
filterDefaultValue: {
type: [Array,String],
default () {
return ""
}
}
},
data() {
return {
border: false,
ascending: false,
descending: false
}
},
computed: {
// 根据props中的width属性 自动匹配当前th的宽度(px)
customWidth(){
if(typeof this.width === 'number'){
return this.width
} else if(typeof this.width === 'string') {
let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
return this.width.replace('px', '')
} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
let numberRpx = Number(this.width.replace('rpx', ''))
let widthCoe = uni.getSystemInfoSync().screenWidth / 750
return Math.round(numberRpx * widthCoe)
} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
return this.width
} else { // 不符合格式
return ''
}
} else {
return ''
}
},
contentAlign() {
let align = 'left'
switch (this.align) {
case 'left':
align = 'flex-start'
break
case 'center':
align = 'center'
break
case 'right':
align = 'flex-end'
break
}
return align
}
},
created() {
this.root = this.getTable('uniTable')
this.rootTr = this.getTable('uniTr')
this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140)
this.border = this.root.border
this.root.thChildren.push(this)
},
methods: {
sort() {
if (!this.sortable) return
this.clearOther()
if (!this.ascending && !this.descending) {
this.ascending = true
this.$emit('sort-change', { order: 'ascending' })
return
}
if (this.ascending && !this.descending) {
this.ascending = false
this.descending = true
this.$emit('sort-change', { order: 'descending' })
return
}
if (!this.ascending && this.descending) {
this.ascending = false
this.descending = false
this.$emit('sort-change', { order: null })
}
},
ascendingFn() {
this.clearOther()
this.ascending = !this.ascending
this.descending = false
this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
},
descendingFn() {
this.clearOther()
this.descending = !this.descending
this.ascending = false
this.$emit('sort-change', { order: this.descending ? 'descending' : null })
},
clearOther() {
this.root.thChildren.map(item => {
if (item !== this) {
item.ascending = false
item.descending = false
}
return item
})
},
ondropdown(e) {
this.$emit("filter-change", e)
},
/**
* 获取父元素实例
*/
getTable(name) {
let parent = this.$parent
let parentName = parent.$options.name
while (parentName !== name) {
parent = parent.$parent
if (!parent) return false
parentName = parent.$options.name
}
return parent
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
$uni-primary: #007aff !default;
.uni-table-th {
padding: 12px 10px;
/* #ifndef APP-NVUE */
display: table-cell;
box-sizing: border-box;
/* #endif */
font-size: 14px;
font-weight: bold;
color: #909399;
border-bottom: 1px $border-color solid;
}
.uni-table-th-row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.table--border {
border-right: 1px $border-color solid;
}
.uni-table-th-content {
display: flex;
align-items: center;
flex: 1;
}
.arrow-box {
}
.arrow {
display: block;
position: relative;
width: 10px;
height: 8px;
// border: 1px red solid;
left: 5px;
overflow: hidden;
cursor: pointer;
}
.down {
top: 3px;
::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 2px;
top: -5px;
transform: rotate(45deg);
background-color: #ccc;
}
&.active {
::after {
background-color: $uni-primary;
}
}
}
.up {
::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 2px;
top: 5px;
transform: rotate(45deg);
background-color: #ccc;
}
&.active {
::after {
background-color: $uni-primary;
}
}
}
</style>

129
uni_modules/uni-table/components/uni-thead/uni-thead.vue 100644
View File

@ -0,0 +1,129 @@
<template>
<!-- #ifdef H5 -->
<thead class="uni-table-thead">
<tr class="uni-table-tr">
<th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
</th>
</tr>
<slot></slot>
</thead>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-thead"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from '../uni-tr/table-checkbox.vue'
export default {
name: 'uniThead',
components: {
tableCheckbox
},
options: {
virtualHost: true
},
data() {
return {
border: false,
selection: false,
rowspan: 1,
indeterminate: false,
checked: false
}
},
created() {
this.root = this.getTable()
// #ifdef H5
this.root.theadChildren = this
// #endif
this.border = this.root.border
this.selection = this.root.type
},
methods: {
init(self) {
this.rowspan++
},
checkboxSelected(e) {
this.indeterminate = false
const backIndexData = this.root.backIndexData
const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
if (backIndexData.length === data.length) {
this.checked = false
this.root.clearSelection()
} else {
this.checked = true
this.root.selectionAll()
}
},
/**
* 获取父元素实例
*/
getTable(name = 'uniTable') {
let parent = this.$parent
let parentName = parent.$options.name
while (parentName !== name) {
parent = parent.$parent
if (!parent) return false
parentName = parent.$options.name
}
return parent
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
.uni-table-thead {
display: table-header-group;
}
.uni-table-tr {
/* #ifndef APP-NVUE */
display: table-row;
transition: all 0.3s;
box-sizing: border-box;
/* #endif */
border: 1px red solid;
background-color: #fafafa;
}
.checkbox {
padding: 0 8px;
width: 26px;
padding-left: 12px;
/* #ifndef APP-NVUE */
display: table-cell;
vertical-align: middle;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1px $border-color solid;
font-size: 14px;
// text-align: center;
}
.tr-table--border {
border-right: 1px $border-color solid;
}
/* #ifndef APP-NVUE */
.uni-table-tr {
::v-deep .uni-table-th {
&.table--border:last-child {
// border-right: none;
}
}
::v-deep .uni-table-td {
&.table--border:last-child {
// border-right: none;
}
}
}
/* #endif */
</style>

179
uni_modules/uni-table/components/uni-tr/table-checkbox.vue 100644
View File

@ -0,0 +1,179 @@
<template>
<view class="uni-table-checkbox" @click="selected">
<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
<view class="checkbox__inner-icon"></view>
</view>
<view v-else class="checkbox__inner checkbox--indeterminate">
<view class="checkbox__inner-icon"></view>
</view>
</view>
</template>
<script>
export default {
name: 'TableCheckbox',
emits:['checkboxSelected'],
props: {
indeterminate: {
type: Boolean,
default: false
},
checked: {
type: [Boolean,String],
default: false
},
disabled: {
type: Boolean,
default: false
},
index: {
type: Number,
default: -1
},
cellData: {
type: Object,
default () {
return {}
}
}
},
watch:{
checked(newVal){
if(typeof this.checked === 'boolean'){
this.isChecked = newVal
}else{
this.isChecked = true
}
},
indeterminate(newVal){
this.isIndeterminate = newVal
}
},
data() {
return {
isChecked: false,
isDisabled: false,
isIndeterminate:false
}
},
created() {
if(typeof this.checked === 'boolean'){
this.isChecked = this.checked
}
this.isDisabled = this.disabled
},
methods: {
selected() {
if (this.isDisabled) return
this.isIndeterminate = false
this.isChecked = !this.isChecked
this.$emit('checkboxSelected', {
checked: this.isChecked,
data: this.cellData
})
}
}
}
</script>
<style lang="scss">
$uni-primary: #007aff !default;
$border-color: #DCDFE6;
$disable:0.4;
.uni-table-checkbox {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
margin: 5px 0;
cursor: pointer;
// 多选样式
.checkbox__inner {
/* #ifndef APP-NVUE */
flex-shrink: 0;
box-sizing: border-box;
/* #endif */
position: relative;
width: 16px;
height: 16px;
border: 1px solid $border-color;
border-radius: 2px;
background-color: #fff;
z-index: 1;
.checkbox__inner-icon {
position: absolute;
/* #ifdef APP-NVUE */
top: 2px;
/* #endif */
/* #ifndef APP-NVUE */
top: 2px;
/* #endif */
left: 5px;
height: 7px;
width: 3px;
border: 1px solid #fff;
border-left: 0;
border-top: 0;
opacity: 0;
transform-origin: center;
transform: rotate(45deg);
box-sizing: content-box;
}
&.checkbox--indeterminate {
border-color: $uni-primary;
background-color: $uni-primary;
.checkbox__inner-icon {
position: absolute;
opacity: 1;
transform: rotate(0deg);
height: 2px;
top: 0;
bottom: 0;
margin: auto;
left: 0px;
right: 0px;
bottom: 0;
width: auto;
border: none;
border-radius: 2px;
transform: scale(0.5);
background-color: #fff;
}
}
&:hover{
border-color: $uni-primary;
}
// 禁用
&.is-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
background-color: #F2F6FC;
border-color: $border-color;
}
// 选中
&.is-checked {
border-color: $uni-primary;
background-color: $uni-primary;
.checkbox__inner-icon {
opacity: 1;
transform: rotate(45deg);
}
// 选中禁用
&.is-disable {
opacity: $disable;
}
}
}
}
</style>

171
uni_modules/uni-table/components/uni-tr/uni-tr.vue 100644
View File

@ -0,0 +1,171 @@
<template>
<!-- #ifdef H5 -->
<tr class="uni-table-tr">
<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
</th>
<slot></slot>
<!-- <uni-th class="th-fixed">123</uni-th> -->
</tr>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-tr">
<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
</view>
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from './table-checkbox.vue'
/**
* Tr 表格行组件
* @description 表格行组件 仅包含 th,td 组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=
*/
export default {
name: 'uniTr',
components: { tableCheckbox },
props: {
disabled: {
type: Boolean,
default: false
},
keyValue: {
type: [String, Number],
default: ''
}
},
options: {
virtualHost: true
},
data() {
return {
value: false,
border: false,
selection: false,
widthThArr: [],
ishead: true,
checked: false,
indeterminate:false
}
},
created() {
this.root = this.getTable()
this.head = this.getTable('uniThead')
if (this.head) {
this.ishead = false
this.head.init(this)
}
this.border = this.root.border
this.selection = this.root.type
this.root.trChildren.push(this)
const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
if(rowData){
this.rowData = rowData
}
this.root.isNodata()
},
mounted() {
if (this.widthThArr.length > 0) {
const selectionWidth = this.selection === 'selection' ? 50 : 0
this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
}
},
// #ifndef VUE3
destroyed() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
// #ifdef VUE3
unmounted() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
methods: {
minWidthUpdate(width) {
this.widthThArr.push(width)
},
// 选中
checkboxSelected(e) {
let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
this.checked = e.checked
this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
},
change(e) {
this.root.trChildren.forEach(item => {
if (item === this) {
this.root.check(this, e.detail.value.length > 0 ? true : false)
}
})
},
/**
* 获取父元素实例
*/
getTable(name = 'uniTable') {
let parent = this.$parent
let parentName = parent.$options.name
while (parentName !== name) {
parent = parent.$parent
if (!parent) return false
parentName = parent.$options.name
}
return parent
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
.uni-table-tr {
/* #ifndef APP-NVUE */
display: table-row;
transition: all 0.3s;
box-sizing: border-box;
/* #endif */
}
.checkbox {
padding: 0 8px;
width: 26px;
padding-left: 12px;
/* #ifndef APP-NVUE */
display: table-cell;
vertical-align: middle;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1px $border-color solid;
font-size: 14px;
// text-align: center;
}
.tr-table--border {
border-right: 1px $border-color solid;
}
/* #ifndef APP-NVUE */
.uni-table-tr {
::v-deep .uni-table-th {
&.table--border:last-child {
// border-right: none;
}
}
::v-deep .uni-table-td {
&.table--border:last-child {
// border-right: none;
}
}
}
/* #endif */
</style>

9
uni_modules/uni-table/i18n/en.json 100644
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "Reset",
"filter-dropdown.search": "Search",
"filter-dropdown.submit": "Submit",
"filter-dropdown.filter": "Filter",
"filter-dropdown.gt": "Greater or equal to",
"filter-dropdown.lt": "Less than or equal to",
"filter-dropdown.date": "Date"
}

9
uni_modules/uni-table/i18n/es.json 100644
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "Reiniciar",
"filter-dropdown.search": "Búsqueda",
"filter-dropdown.submit": "Entregar",
"filter-dropdown.filter": "Filtrar",
"filter-dropdown.gt": "Mayor o igual a",
"filter-dropdown.lt": "Menos que o igual a",
"filter-dropdown.date": "Fecha"
}

9
uni_modules/uni-table/i18n/fr.json 100644
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "Réinitialiser",
"filter-dropdown.search": "Chercher",
"filter-dropdown.submit": "Soumettre",
"filter-dropdown.filter": "Filtre",
"filter-dropdown.gt": "Supérieur ou égal à",
"filter-dropdown.lt": "Inférieur ou égal à",
"filter-dropdown.date": "Date"
}

12
uni_modules/uni-table/i18n/index.js 100644
View File

@ -0,0 +1,12 @@
import en from './en.json'
import es from './es.json'
import fr from './fr.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
es,
fr,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

9
uni_modules/uni-table/i18n/zh-Hans.json 100644
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "确定",
"filter-dropdown.filter": "筛选",
"filter-dropdown.gt": "大于等于",
"filter-dropdown.lt": "小于等于",
"filter-dropdown.date": "日期范围"
}

9
uni_modules/uni-table/i18n/zh-Hant.json 100644
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "確定",
"filter-dropdown.filter": "篩選",
"filter-dropdown.gt": "大於等於",
"filter-dropdown.lt": "小於等於",
"filter-dropdown.date": "日期範圍"
}

83
uni_modules/uni-table/package.json 100644
View File

@ -0,0 +1,83 @@
{
"id": "uni-table",
"displayName": "uni-table 表格",
"version": "1.2.3",
"description": "表格组件，多用于展示多条结构类似的数据，如",
"keywords": [
"uni-ui",
"uniui",
"table",
"表格"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss","uni-datetime-picker"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "n",
"QQ": "y"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

13
uni_modules/uni-table/readme.md 100644
View File

@ -0,0 +1,13 @@
## Table 表单
> 组件名：``uni-table``，代码块： `uTable`。
用于展示多条结构类似的数据
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-table)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839