提交 5eae5d40 authored 作者: 刘旭's avatar 刘旭

同步最新代码

上级 b7a98f8c
...@@ -13,7 +13,7 @@ export const getMetadataList = () => request('/lowcodeplatform-system/center/met ...@@ -13,7 +13,7 @@ export const getMetadataList = () => request('/lowcodeplatform-system/center/met
// 获取元数据 // 获取元数据
export const getMetadata = (formId: string) => export const getMetadata = (formId: string) =>
request('/lowcodeplatform-system/center/metadata/detail', 'GET', { formId }); request('/lowcodeplatform-system/center/metadata/detail', 'GET', { formId });
export const getUserParameter = (formId: string) => export const getUserParameter = (formId: string) =>
request('/lowcodeplatform-system/center/business/getUserParameter', 'GET', { formId }); request('/lowcodeplatform-system/center/business/getUserParameter', 'GET', { formId });
...@@ -38,4 +38,12 @@ export const getByBillNo = (data: any) => ...@@ -38,4 +38,12 @@ export const getByBillNo = (data: any) =>
// 获取条码规则 // 获取条码规则
export const getAnalysis = (data: any) => export const getAnalysis = (data: any) =>
request('/wms-system/barcode/analysis', 'GET', data); request('/wms-system/barcode/analysis', 'GET', data);
\ No newline at end of file
// 获取规则选单
export const getRuleSelection = (lowFormId: string) =>
request('/lowcodeplatform-system/center/bill/transform/rule/selection', 'GET', { lowFormId });
// 获取规则选单
export const changeDataById = (data: any) =>
request('/lowcodeplatform-system/center/bill/transform/change/databyid', 'POST', data);
<template>
<view class="uni-container">
<uni-table ref="tableRef" :loading="tableState.loading" border stripe emptyText="暂无更多数据">
<uni-tr>
<uni-th class="" width="70" align="center">操作</uni-th>
<uni-th v-for="(item, index) in fieldData" :key="index" width="200" align="center">{{ item.fieldName }}
</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in data" :key="index">
<uni-td>
<slot name="options"></slot>
</uni-td>
<uni-td v-for="(res, index) in fieldData" :key="index" align="center" class="unitd">{{ item[res.key] }}
</uni-td>
</uni-tr>
</uni-table>
</view>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
const props = defineProps({
data: {
type: Array,
default: []
} as any,
fieldData: {
type: Array,
default: []
} as any
})
const tableState = reactive({
searchVal: '',
loading: false,
selectedIndexs: []
})
const tableRef = ref()
// 分页触发
const change = (e: any) => {
tableRef.value.table.clearSelection()
tableState.selectedIndexs.length = 0
}
// 搜索
const search = () => {
// tableState.getData(1, tableState.searchVal)
}
defineExpose({
change
})
</script>
<style lang="scss" scoped>
/* #ifndef H5 */
/* page {
padding-top: 85px;
} */
/* #endif */
.uni-group {
display: flex;
align-items: center;
}
.unitd {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200rpx;
}
</style>
\ No newline at end of file
{ {
"name" : "pda测试", "name" : "wms测试",
"appid" : "__UNI__6D85B85", "appid" : "__UNI__6D85B85",
"description" : "", "description" : "",
"versionName" : "1.0.1", "versionName" : "1.0.1",
......
...@@ -62,6 +62,13 @@ ...@@ -62,6 +62,13 @@
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarBackgroundColor": "#f6f6f6" "navigationBarBackgroundColor": "#f6f6f6"
} }
},
{
"path": "pages/apply/optionsMenu",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#f6f6f6"
}
} }
], ],
"tabBar": { "tabBar": {
......
...@@ -13,10 +13,6 @@ ...@@ -13,10 +13,6 @@
<u-button type="primary" size="mini" @tap="handlePrint(res)">打印</u-button> <u-button type="primary" size="mini" @tap="handlePrint(res)">打印</u-button>
</u-divider> </u-divider>
</view> </view>
<view style="margin-top:4%; display: flex; flex-direction: row;">
<canvas canvas-id="edit_area_canvas"
:style="{ width: state.canvasWidth + 'px', height: state.canvasHeight + 'px' }"></canvas>
</view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -60,6 +56,7 @@ const handlePrint = async (row: any) => { ...@@ -60,6 +56,7 @@ const handlePrint = async (row: any) => {
let printData = [] as any[] let printData = [] as any[]
if (formId == 'WMS_Receive') { if (formId == 'WMS_Receive') {
const { data: serialList } = await getByBillNo({ billNo, formId }) const { data: serialList } = await getByBillNo({ billNo, formId })
console.log(serialList);
if (serialList.data.length === 0) return uni.showToast({ if (serialList.data.length === 0) return uni.showToast({
title: '该编码下无序列号', title: '该编码下无序列号',
icon: 'none' icon: 'none'
......
<template>
<u-popup v-model="props.modelValue" mode="center" closeable @close="handleClose">
<view class="center-popup">
<view class="content">
<view class="title">选单</view>
<u-radio-group v-model="radioValue">
<u-radio v-for="(item, index) in list" :key="index" :name="item.upFormId">
{{ item.upFormName }}
</u-radio>
</u-radio-group>
</view>
<view class="footer">
<u-button type="primary" style="width: 70%" @tap="onConfirm">确定</u-button>
</view>
</view>
</u-popup>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
const props = defineProps({
modelValue: {
type: Boolean,
detault: false
},
list: {
type: Array,
default: []
} as any
})
const emits = defineEmits(['update:modelValue', 'radioConfirm'])
const radioValue = ref()
const onConfirm = () => {
emits('radioConfirm', radioValue.value)
}
const handleClose = () => {
emits('update:modelValue', false)
}
defineExpose({
radioValue
})
</script>
<style lang="scss" scoped>
.center-popup {
padding: 40rpx 40rpx;
min-height: 500rpx;
width: 500rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.content {
.title {
font-size: 32rpx;
margin-bottom: 20rpx;
}
}
.footer {
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
\ No newline at end of file
<template> <template>
<vk-header :title="title" back-icon-name="nav-back" background="#3cbafd" /> <vk-header :title="title" back-icon-name="nav-back" background="#3cbafd" />
<!-- <view style="display: flex;"> --> <!-- <button @tap="initSerialNumberData({ serialNumber: 'A087', curFormId: 'WMS_InStock' })">A087</button> -->
<!-- <button @tap="initSerialNumberData({ serialNumber: 'A043', curFormId: 'WMS_UpStock' })">A3031</button> -->
<!-- <button @tap="initSerialNumberData({ serialNumber: 'A033', curFormId: 'WMS_InStock' })">A3033</button>
<button @tap="initSerialNumberData({ serialNumber: 'A035', curFormId: 'WMS_InStock' })">A3035</button>
<button @tap="initSerialNumberData({ serialNumber: 'A037', curFormId: 'WMS_InStock' })">A3037</button> -->
<!-- </view> -->
<view class="header"> <view class="header">
<view class="scan-input"> <view class="scan-input">
<scanInput :inputValue="inputValue" /> <scanInput :inputValue="inputValue" />
...@@ -84,31 +78,47 @@ ...@@ -84,31 +78,47 @@
<u-action-sheet :list="sheetList" :cancel-btn="false" v-model="sheetShow" @click="sheetClick" /> <u-action-sheet :list="sheetList" :cancel-btn="false" v-model="sheetShow" @click="sheetClick" />
<u-modal v-model="modelData.show" width="300" :content="modelData.content" show-cancel-button <u-modal v-model="modelData.show" width="300" :content="modelData.content" show-cancel-button
@confirm="modelConfirm" /> @confirm="modelConfirm" />
<options-menu-popup v-model="optionsMenuShow" ref="optionsMenuRef" :list="optionsMenuList"
@radioConfirm="radioConfirm" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, ref } from 'vue'; import { nextTick, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import { getMetadata, getDataBySerialNumber, createBusiness, getAnalysis } from '@/api/apply'; import {
getMetadata,
getDataBySerialNumber,
createBusiness,
getAnalysis,
getRuleSelection
} from '@/api/apply';
import vkHeader from '@/components/header/index.vue'; import vkHeader from '@/components/header/index.vue';
import detailForm from './components/detailForm.vue'; import detailForm from './components/detailForm.vue';
import scanInput from './components/scanInput.vue'; import scanInput from './components/scanInput.vue';
import optionsMenuPopup from './components/optionsMenuPopup.vue';
const sheetShow = ref(false);
const optionsMenuShow = ref(false);
const list = ref([] as any);
const optionsMenuList = ref([] as any);
const optionsMenuRef = ref([] as any);
const saveList = ref([] as any)
const metadata = ref();
const metadataList = ref([] as any);
const pageData = ref(); const pageData = ref();
const title = ref(); const title = ref();
const inputValue = ref(''); const inputValue = ref('');
const sheetList = ref([{ text: '查询' }, { text: '清空' }]); const sheetList = ref([{ text: '查询' }, { text: '清空' }, { text: '选单' }]);
const modelData = ref({ const modelData = ref({
content: '确认提交?', content: '确认提交?',
show: false, show: false,
}); });
const sheetShow = ref(false); onLoad(() => {
pageData.value = JSON.parse(uni.getStorageSync('pageData') as any);
const list = ref([] as any); title.value = pageData.value.title;
const saveList = ref([] as any) init();
});
const handleInput = async (e: any) => { const handleInput = async (e: any) => {
let barcodeList = uni.getStorageSync('barcodeList') let barcodeList = uni.getStorageSync('barcodeList')
...@@ -152,9 +162,25 @@ const sheetClick = (index: number) => { ...@@ -152,9 +162,25 @@ const sheetClick = (index: number) => {
case 1: case 1:
console.log('撤销'); console.log('撤销');
break; break;
case 2:
optionsMenu()
optionsMenuShow.value = true
break;
} }
}; };
// 选单,相当于下推的某个前一个步骤
const optionsMenu = async () => {
const { permTag: formId } = JSON.parse(uni.getStorageSync('pageData'));
const { data: res } = await getRuleSelection(formId)
if (res.code === 200) {
console.log(res.data);
optionsMenuList.value = res.data.records
optionsMenuRef.value.radioValue = optionsMenuList.value[0]?.upFormId || ''
}
}
const modelConfirm = async () => { const modelConfirm = async () => {
if (saveList.value.length === 0) return uni.showToast({ if (saveList.value.length === 0) return uni.showToast({
title: '请先完成扫描', title: '请先完成扫描',
...@@ -223,14 +249,6 @@ const mergeList = (list: any[]) => { ...@@ -223,14 +249,6 @@ const mergeList = (list: any[]) => {
return data; return data;
} }
onLoad(() => {
pageData.value = JSON.parse(uni.getStorageSync('pageData') as any);
title.value = pageData.value.title;
init();
});
const metadata = ref();
const metadataList = ref([] as any);
const initSerialNumberData = async (data: any) => { const initSerialNumberData = async (data: any) => {
console.log(data, 'sss'); console.log(data, 'sss');
...@@ -313,6 +331,8 @@ const filterList = (list: any[]) => { ...@@ -313,6 +331,8 @@ const filterList = (list: any[]) => {
}; };
const baseDataFilter = (list: any[], baseList: any[]) => { const baseDataFilter = (list: any[], baseList: any[]) => {
console.log(list, baseList);
let mobileList = [] as any[]; let mobileList = [] as any[];
let dataList = [] as any[]; let dataList = [] as any[];
const recursiveFilter = (item: any) => { const recursiveFilter = (item: any) => {
...@@ -339,14 +359,16 @@ const baseDataFilter = (list: any[], baseList: any[]) => { ...@@ -339,14 +359,16 @@ const baseDataFilter = (list: any[], baseList: any[]) => {
mobileList = [...mobileList, item]; mobileList = [...mobileList, item];
}; };
list.forEach(item => recursiveFilter(item)); list.forEach(item => recursiveFilter(item));
console.log(mobileList, 'mobileList');
for (const k in baseList) { for (const k in baseList) {
mobileList.map((item: any) => { mobileList.map((item: any) => {
if (item.options.remoteFunc === k) { if (item.options.remoteFunc === k) {
let obj = {} as any let obj = {} as any
const label = item.options.props.label const label = item.options.props.label
const value = item.options.props.value const value = item.options.props.value
if (baseList[k][0][label]) obj['label'] = baseList[k][0][label] if (baseList[k].length && baseList[k][0][label]) obj['label'] = baseList[k][0][label]
if (baseList[k][0][value]) obj['value'] = baseList[k][0][value] if (baseList[k].length && baseList[k][0][value]) obj['value'] = baseList[k][0][value]
if (obj) dataList.push(obj) if (obj) dataList.push(obj)
} }
}) })
...@@ -359,6 +381,13 @@ const closeButton = (index: number) => { ...@@ -359,6 +381,13 @@ const closeButton = (index: number) => {
saveList.value.splice(index, 1) saveList.value.splice(index, 1)
} }
const radioConfirm = (upFormId: string) => {
if (!upFormId) return
optionsMenuShow.value = false
const list = optionsMenuList.value.filter((item: any) => item.upFormId === upFormId)
uni.navigateTo({ url: '/pages/apply/optionsMenu?list=' + encodeURIComponent(JSON.stringify(list[0])) })
}
const reset = () => { const reset = () => {
saveList.value = [] saveList.value = []
inputValue.value = '' inputValue.value = ''
...@@ -471,6 +500,7 @@ const reset = () => { ...@@ -471,6 +500,7 @@ const reset = () => {
position: fixed; position: fixed;
right: 0; right: 0;
top: 76%; top: 76%;
z-index: 999;
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
width: 100rpx; width: 100rpx;
height: 120rpx; height: 120rpx;
......
<template>
<headers title='选单' back-icon-name="nav-back" background="#3cbafd" />
<view>
<view class="card" v-for="(res, r) in businessList" :key="r" @tap="optionsMenu(res)">
<block v-for="(item, index) of res.arr" :key="index">
<view style="padding: 10rpx 0; display: flex; flex-direction: row;">
<view style="margin-right: 5rpx; width: 200rpx;">{{ item.label }}</view>
<view style="flex: 1; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
{{ item.value }}
</view>
</view>
</block>
</view>
<view class="uni-pagination-box">
<uni-pagination show-icon :page-size="listQuery.pageSize" :current="listQuery.pageNo"
:total="listQuery.total" />
</view>
</view>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { getBusinessList, changeDataById } from '@/api/apply';
import { onLoad } from '@dcloudio/uni-app';
import { sLoading, hLoading } from '@/utils/util'
import headers from '@/components/header/index.vue'
const listQuery = reactive({
formId: '',
// 每页数据量
pageSize: 10,
// 当前页
pageNo: 1,
// 数据总量
total: 0,
})
const fieldList = ref()
const dataList = ref()
const optionsMenuId = ref()
const upFormId = ref()
const businessList = ref([] as any)
const optionsMenu = async (row: any) => {
if (row) {
const data = {
ruleId: optionsMenuId.value,
sourceId: row.id
}
const { data: res } = await changeDataById(data)
console.log(res);
if (res.code === 200) {
uni.navigateBack()
}
}
}
const init = async (formId: string) => {
sLoading()
listQuery.formId = formId
const { data: res } = await getBusinessList(listQuery)
console.log(res);
if (res.code === 200) {
handleLoadData(res.data)
listQuery.total = res.data.total
fieldList.value = res.data.fieldList
dataList.value = res.data.dataList
}
}
const handleLoadData = (data: any) => {
data.dataList.map((item: any) => {
let business = {
id: item.id,
arr: [] as any
}
data.fieldList.map((field: any) => {
let obj = {} as any
obj.id = item.id
for (const d in item) {
if (field.key === d) {
obj.label = field.fieldName
obj.value = item[d]
business.arr.push(obj)
}
}
})
businessList.value.push(business)
})
hLoading()
}
onLoad((option: any) => {
const list = JSON.parse(decodeURIComponent(option.list))
console.log(list);
optionsMenuId.value = list.id
upFormId.value = list.upFormId
init(list.upFormId)
})
</script>
<style lang="scss" scoped>
.card.box-list {
display: flex;
flex-direction: row;
}
.uni-pagination-box {
background-color: #fff;
}
:deep(.uni-pagination--disabled) {
background-color: #fff;
}
:deep(.uni-pagination--enabled) {
background-color: #fff;
}
</style>
\ No newline at end of file
## 2.2.24(2023-06-02)
- 修复 部分情况修改时间,开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
- 优化 当前月可以选择上月、下月的日期
## 2.2.23(2023-05-02)
- 修复 部分情况修改时间,开始时间未更新 [详情](https://github.com/dcloudio/uni-ui/issues/737)
- 修复 部分平台及设备第一次点击无法显示弹框
- 修复 ios 日期格式未补零显示及使用异常 [详情](https://ask.dcloud.net.cn/question/162979)
## 2.2.22(2023-03-30)
- 修复 日历 picker 修改年月后,自动选中当月1日 [详情](https://ask.dcloud.net.cn/question/165937)
- 修复 小程序端 低版本 ios NaN [详情](https://ask.dcloud.net.cn/question/162979)
## 2.2.21(2023-02-20)
- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
## 2.2.20(2023-02-17)
- 优化 值为空依然选中当天问题
- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
- 优化 非范围选择未选择日期时间,点击确认按钮选中当前日期时间
- 优化 字节小程序日期时间范围选择,底部日期换行问题
## 2.2.19(2023-02-09)
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
## 2.2.18(2023-02-08)
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
- 优化 PC端输入日期格式错误时返回当前日期时间
- 优化 PC端输入日期时间超出 start、end 限制的Bug
- 优化 移动端日期时间范围用法时间展示不完整问题
## 2.2.17(2023-02-04)
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
## 2.2.16(2023-02-02)
- 修复 字节小程序报错的Bug
## 2.2.15(2023-02-02)
- 修复 某些情况切换月份错误的Bug
## 2.2.14(2023-01-30)
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
## 2.2.13(2023-01-10)
- 修复 多次加载组件造成内存占用的Bug
## 2.2.12(2022-12-01)
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
## 2.2.11(2022-09-19)
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
## 2.2.10(2022-09-19)
- 修复 反向选择日期范围,日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
## 2.2.9(2022-09-16)
- 可以使用 uni-scss 控制主题色
## 2.2.8(2022-09-08)
- 修复 close事件无效的Bug
## 2.2.7(2022-09-05)
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
## 2.2.6(2022-06-30)
- 优化 组件样式,调整了组件图标大小、高度、颜色等,与uni-ui风格保持一致
## 2.2.5(2022-06-24)
- 修复 日历顶部年月及底部确认未国际化的Bug
## 2.2.4(2022-03-31)
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
## 2.2.3(2022-03-28)
- 修复 Vue3 下动态赋值未响应的Bug
## 2.2.2(2021-12-10)
- 修复 clear-icon 属性在小程序平台不生效的Bug
## 2.2.1(2021-12-10)
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的Bug
## 2.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
## 2.1.5(2021-11-09)
- 新增 提供组件设计资源,组件样式调整
## 2.1.4(2021-09-10)
- 修复 hide-second 在移动端的Bug
- 修复 单选赋默认值时,赋值日期未高亮的Bug
- 修复 赋默认值时,移动端未正确显示时间的Bug
## 2.1.3(2021-09-09)
- 新增 hide-second 属性,支持只使用时分,隐藏秒
## 2.1.2(2021-09-03)
- 优化 取消选中时(范围选)直接开始下一次选择, 避免多点一次
- 优化 移动端支持清除按钮,同时支持通过 ref 调用组件的 clear 方法
- 优化 调整字号大小,美化日历界面
- 修复 因国际化导致的 placeholder 失效的Bug
## 2.1.1(2021-08-24)
- 新增 支持国际化
- 优化 范围选择器在 pc 端过宽的问题
## 2.1.0(2021-08-09)
- 新增 适配 vue3
## 2.0.19(2021-08-09)
- 新增 支持作为 uni-forms 子组件相关功能
- 修复 在 uni-forms 中使用时,选择时间报 NAN 错误的Bug
## 2.0.18(2021-08-05)
- 修复 type 属性动态赋值无效的Bug
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
- 修复 组件未赋值时范围选左、右日历相同的Bug
## 2.0.17(2021-08-04)
- 修复 范围选未正确显示当前值的Bug
- 修复 h5 平台(移动端)报错 'cale' of undefined 的Bug
## 2.0.16(2021-07-21)
- 新增 return-type 属性支持返回 date 日期对象
## 2.0.15(2021-07-14)
- 修复 单选日期类型,初始赋值后不在当前日历的Bug
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
- 优化 移动端移除显示框的清空按钮,无实际用途
## 2.0.14(2021-07-14)
- 修复 组件赋值为空,界面未更新的Bug
- 修复 start 和 end 不能动态赋值的Bug
- 修复 范围选类型,用户选择后再次选择右侧日历(结束日期)显示不正确的Bug
## 2.0.13(2021-07-08)
- 修复 范围选择不能动态赋值的Bug
## 2.0.12(2021-07-08)
- 修复 范围选择的初始时间在一个月内时,造成无法选择的bug
## 2.0.11(2021-07-08)
- 优化 弹出层在超出视窗边缘定位不准确的问题
## 2.0.10(2021-07-08)
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合,导致日期字体看不清的Bug
- 优化 弹出层在超出视窗边缘被遮盖的问题
## 2.0.9(2021-07-07)
- 新增 maskClick 事件
- 修复 特殊情况日历 rpx 布局错误的Bug,rpx -> px
- 修复 范围选择时清空返回值不合理的bug,['', ''] -> []
## 2.0.8(2021-07-07)
- 新增 日期时间显示框支持插槽
## 2.0.7(2021-07-01)
- 优化 添加 uni-icons 依赖
## 2.0.6(2021-05-22)
- 修复 图标在小程序上不显示的Bug
- 优化 重命名引用组件,避免潜在组件命名冲突
## 2.0.5(2021-05-20)
- 优化 代码目录扁平化
## 2.0.4(2021-05-12)
- 新增 组件示例地址
## 2.0.3(2021-05-10)
- 修复 ios 下不识别 '-' 日期格式的Bug
- 优化 pc 下弹出层添加边框和阴影
## 2.0.2(2021-05-08)
- 修复 在 admin 中获取弹出层定位错误的bug
## 2.0.1(2021-05-08)
- 修复 type 属性向下兼容,默认值从 date 变更为 datetime
## 2.0.0(2021-04-30)
- 支持日历形式的日期+时间的范围选择
> 注意:此版本不向后兼容,不再支持单独时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)
## 1.0.6(2021-03-18)
- 新增 hide-second 属性,时间支持仅选择时、分
- 修复 选择跟显示的日期不一样的Bug
- 修复 chang事件触发2次的Bug
- 修复 分、秒 end 范围错误的Bug
- 优化 更好的 nvue 适配
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
<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>
</view>
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
</view>
</template>
<script>
export default {
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
checkHover: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
},
handleMousemove(weeks) {
this.$emit('handleMouse', weeks)
}
}
}
</script>
<style lang="scss" >
$uni-primary: #007aff !default;
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1px 0;
position: relative;
}
.uni-calendar-item__weeks-box-text {
font-size: 14px;
// font-family: Lato-Bold, Lato;
font-weight: bold;
color: darken($color: $uni-primary, $amount: 40%);
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #dd524d;
}
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
cursor: default;
}
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
}
.uni-calendar-item--today {
position: absolute;
top: 10px;
right: 17%;
background-color: #dd524d;
width:6px;
height: 6px;
border-radius: 50%;
}
.uni-calendar-item--extra {
color: #dd524d;
opacity: 0.8;
}
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-primary;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
color: #333;
}
.uni-calendar-item--multiple {
background-color: #F6F7FC;
// color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: $uni-primary;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #F6F7FC;
}
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--before-checked-x {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
box-sizing: border-box;
background-color: #F6F7FC;
}
.uni-calendar-item--after-checked-x {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #F6F7FC;
}
</style>
{
"uni-datetime-picker.selectDate": "select date",
"uni-datetime-picker.selectTime": "select time",
"uni-datetime-picker.selectDateTime": "select date and time",
"uni-datetime-picker.startDate": "start date",
"uni-datetime-picker.endDate": "end date",
"uni-datetime-picker.startTime": "start time",
"uni-datetime-picker.endTime": "end time",
"uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel",
"uni-datetime-picker.year": "-",
"uni-datetime-picker.month": "",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN",
"uni-calender.confirm": "confirm"
}
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"uni-datetime-picker.selectDate": "选择日期",
"uni-datetime-picker.selectTime": "选择时间",
"uni-datetime-picker.selectDateTime": "选择日期时间",
"uni-datetime-picker.startDate": "开始日期",
"uni-datetime-picker.endDate": "结束日期",
"uni-datetime-picker.startTime": "开始时间",
"uni-datetime-picker.endTime": "结束时间",
"uni-datetime-picker.ok": "确定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "确认"
}
\ No newline at end of file
{
"uni-datetime-picker.selectDate": "選擇日期",
"uni-datetime-picker.selectTime": "選擇時間",
"uni-datetime-picker.selectDateTime": "選擇日期時間",
"uni-datetime-picker.startDate": "開始日期",
"uni-datetime-picker.endDate": "結束日期",
"uni-datetime-picker.startTime": "開始时间",
"uni-datetime-picker.endTime": "結束时间",
"uni-datetime-picker.ok": "確定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "確認"
}
\ No newline at end of file
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.2.24",
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
"keywords": [
"uni-datetime-picker",
"uni-ui",
"uniui",
"日期时间选择器",
"日期时间"
],
"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-icons"
],
"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",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
> `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载*非uni_modules版本*,旧版本将不再维护`
## DatetimePicker 时间选择器
> **组件名:uni-datetime-picker**
> 代码块: `uDatetimePicker`
该组件的优势是,支持**时间戳**输入和输出(起始时间、终止时间也支持时间戳),可**同时选择**日期和时间。
若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。
**_点击 picker 默认值规则:_**
- 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value,则初始值 value 为当前本地时间 Date.now(), 但不会显示在 picker 显示框中
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 1.3.5(2022-01-24)
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4(2022-01-24)
- 优化 size 支持其他单位
## 1.3.3(2022-01-17)
- 修复 nvue 有些图标不显示的bug,兼容老版本图标
## 1.3.2(2021-12-01)
- 优化 示例可复制图标名称
## 1.3.1(2021-11-23)
- 优化 兼容旧组件 type 值
## 1.3.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-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7(2021-11-08)
## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5(2021-05-12)
- 新增 组件示例地址
## 1.1.4(2021-02-05)
- 调整为uni_modules目录规范
<template>
<!-- #ifdef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif -->
</template>
<script>
import icons from './icons.js';
const getVal = (val) => {
const reg = /^[0-9]*$/g
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
}
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('"+iconUrl+"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'UniIcons',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 16
},
customPrefix:{
type: String,
default: ''
}
},
data() {
return {
icons: icons.glyphs
}
},
computed:{
unicode(){
let code = this.icons.find(v=>v.font_class === this.type)
if(code){
return unescape(`%u${code.unicode}`)
}
return ''
},
iconSize(){
return getVal(this.size)
}
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
/* #endif */
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
</style>
.uniui-color:before {
content: "\e6cf";
}
.uniui-wallet:before {
content: "\e6b1";
}
.uniui-settings-filled:before {
content: "\e6ce";
}
.uniui-auth-filled:before {
content: "\e6cc";
}
.uniui-shop-filled:before {
content: "\e6cd";
}
.uniui-staff-filled:before {
content: "\e6cb";
}
.uniui-vip-filled:before {
content: "\e6c6";
}
.uniui-plus-filled:before {
content: "\e6c7";
}
.uniui-folder-add-filled:before {
content: "\e6c8";
}
.uniui-color-filled:before {
content: "\e6c9";
}
.uniui-tune-filled:before {
content: "\e6ca";
}
.uniui-calendar-filled:before {
content: "\e6c0";
}
.uniui-notification-filled:before {
content: "\e6c1";
}
.uniui-wallet-filled:before {
content: "\e6c2";
}
.uniui-medal-filled:before {
content: "\e6c3";
}
.uniui-gift-filled:before {
content: "\e6c4";
}
.uniui-fire-filled:before {
content: "\e6c5";
}
.uniui-refreshempty:before {
content: "\e6bf";
}
.uniui-location-filled:before {
content: "\e6af";
}
.uniui-person-filled:before {
content: "\e69d";
}
.uniui-personadd-filled:before {
content: "\e698";
}
.uniui-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.uniui-eye:before {
content: "\e651";
}
.uniui-eye-filled:before {
content: "\e66a";
}
.uniui-eye-slash:before {
content: "\e6b3";
}
.uniui-eye-slash-filled:before {
content: "\e6b4";
}
.uniui-info-filled:before {
content: "\e649";
}
.uniui-reload:before {
content: "\e6b2";
}
.uniui-micoff-filled:before {
content: "\e6b0";
}
.uniui-map-pin-ellipse:before {
content: "\e6ac";
}
.uniui-map-pin:before {
content: "\e6ad";
}
.uniui-location:before {
content: "\e6ae";
}
.uniui-starhalf:before {
content: "\e683";
}
.uniui-star:before {
content: "\e688";
}
.uniui-star-filled:before {
content: "\e68f";
}
.uniui-calendar:before {
content: "\e6a0";
}
.uniui-fire:before {
content: "\e6a1";
}
.uniui-medal:before {
content: "\e6a2";
}
.uniui-font:before {
content: "\e6a3";
}
.uniui-gift:before {
content: "\e6a4";
}
.uniui-link:before {
content: "\e6a5";
}
.uniui-notification:before {
content: "\e6a6";
}
.uniui-staff:before {
content: "\e6a7";
}
.uniui-vip:before {
content: "\e6a8";
}
.uniui-folder-add:before {
content: "\e6a9";
}
.uniui-tune:before {
content: "\e6aa";
}
.uniui-auth:before {
content: "\e6ab";
}
.uniui-person:before {
content: "\e699";
}
.uniui-email-filled:before {
content: "\e69a";
}
.uniui-phone-filled:before {
content: "\e69b";
}
.uniui-phone:before {
content: "\e69c";
}
.uniui-email:before {
content: "\e69e";
}
.uniui-personadd:before {
content: "\e69f";
}
.uniui-chatboxes-filled:before {
content: "\e692";
}
.uniui-contact:before {
content: "\e693";
}
.uniui-chatbubble-filled:before {
content: "\e694";
}
.uniui-contact-filled:before {
content: "\e695";
}
.uniui-chatboxes:before {
content: "\e696";
}
.uniui-chatbubble:before {
content: "\e697";
}
.uniui-upload-filled:before {
content: "\e68e";
}
.uniui-upload:before {
content: "\e690";
}
.uniui-weixin:before {
content: "\e691";
}
.uniui-compose:before {
content: "\e67f";
}
.uniui-qq:before {
content: "\e680";
}
.uniui-download-filled:before {
content: "\e681";
}
.uniui-pyq:before {
content: "\e682";
}
.uniui-sound:before {
content: "\e684";
}
.uniui-trash-filled:before {
content: "\e685";
}
.uniui-sound-filled:before {
content: "\e686";
}
.uniui-trash:before {
content: "\e687";
}
.uniui-videocam-filled:before {
content: "\e689";
}
.uniui-spinner-cycle:before {
content: "\e68a";
}
.uniui-weibo:before {
content: "\e68b";
}
.uniui-videocam:before {
content: "\e68c";
}
.uniui-download:before {
content: "\e68d";
}
.uniui-help:before {
content: "\e679";
}
.uniui-navigate-filled:before {
content: "\e67a";
}
.uniui-plusempty:before {
content: "\e67b";
}
.uniui-smallcircle:before {
content: "\e67c";
}
.uniui-minus-filled:before {
content: "\e67d";
}
.uniui-micoff:before {
content: "\e67e";
}
.uniui-closeempty:before {
content: "\e66c";
}
.uniui-clear:before {
content: "\e66d";
}
.uniui-navigate:before {
content: "\e66e";
}
.uniui-minus:before {
content: "\e66f";
}
.uniui-image:before {
content: "\e670";
}
.uniui-mic:before {
content: "\e671";
}
.uniui-paperplane:before {
content: "\e672";
}
.uniui-close:before {
content: "\e673";
}
.uniui-help-filled:before {
content: "\e674";
}
.uniui-paperplane-filled:before {
content: "\e675";
}
.uniui-plus:before {
content: "\e676";
}
.uniui-mic-filled:before {
content: "\e677";
}
.uniui-image-filled:before {
content: "\e678";
}
.uniui-locked-filled:before {
content: "\e668";
}
.uniui-info:before {
content: "\e669";
}
.uniui-locked:before {
content: "\e66b";
}
.uniui-camera-filled:before {
content: "\e658";
}
.uniui-chat-filled:before {
content: "\e659";
}
.uniui-camera:before {
content: "\e65a";
}
.uniui-circle:before {
content: "\e65b";
}
.uniui-checkmarkempty:before {
content: "\e65c";
}
.uniui-chat:before {
content: "\e65d";
}
.uniui-circle-filled:before {
content: "\e65e";
}
.uniui-flag:before {
content: "\e65f";
}
.uniui-flag-filled:before {
content: "\e660";
}
.uniui-gear-filled:before {
content: "\e661";
}
.uniui-home:before {
content: "\e662";
}
.uniui-home-filled:before {
content: "\e663";
}
.uniui-gear:before {
content: "\e664";
}
.uniui-smallcircle-filled:before {
content: "\e665";
}
.uniui-map-filled:before {
content: "\e666";
}
.uniui-map:before {
content: "\e667";
}
.uniui-refresh-filled:before {
content: "\e656";
}
.uniui-refresh:before {
content: "\e657";
}
.uniui-cloud-upload:before {
content: "\e645";
}
.uniui-cloud-download-filled:before {
content: "\e646";
}
.uniui-cloud-download:before {
content: "\e647";
}
.uniui-cloud-upload-filled:before {
content: "\e648";
}
.uniui-redo:before {
content: "\e64a";
}
.uniui-images-filled:before {
content: "\e64b";
}
.uniui-undo-filled:before {
content: "\e64c";
}
.uniui-more:before {
content: "\e64d";
}
.uniui-more-filled:before {
content: "\e64e";
}
.uniui-undo:before {
content: "\e64f";
}
.uniui-images:before {
content: "\e650";
}
.uniui-paperclip:before {
content: "\e652";
}
.uniui-settings:before {
content: "\e653";
}
.uniui-search:before {
content: "\e654";
}
.uniui-redo-filled:before {
content: "\e655";
}
.uniui-list:before {
content: "\e644";
}
.uniui-mail-open-filled:before {
content: "\e63a";
}
.uniui-hand-down-filled:before {
content: "\e63c";
}
.uniui-hand-down:before {
content: "\e63d";
}
.uniui-hand-up-filled:before {
content: "\e63e";
}
.uniui-hand-up:before {
content: "\e63f";
}
.uniui-heart-filled:before {
content: "\e641";
}
.uniui-mail-open:before {
content: "\e643";
}
.uniui-heart:before {
content: "\e639";
}
.uniui-loop:before {
content: "\e633";
}
.uniui-pulldown:before {
content: "\e632";
}
.uniui-scan:before {
content: "\e62a";
}
.uniui-bars:before {
content: "\e627";
}
.uniui-cart-filled:before {
content: "\e629";
}
.uniui-checkbox:before {
content: "\e62b";
}
.uniui-checkbox-filled:before {
content: "\e62c";
}
.uniui-shop:before {
content: "\e62f";
}
.uniui-headphones:before {
content: "\e630";
}
.uniui-cart:before {
content: "\e631";
}
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.3.5",
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
"keywords": [
"uni-ui",
"uniui",
"icon",
"图标"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.2.14"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"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",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Icons 图标
> **组件名:uni-icons**
> 代码块: `uIcons`
用于展示 icons 图标 。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
// @use "sass:math"; // @use "sass:math";
@import '../tools/functions.scss'; @import '../tools/functions.scss';
// 间距基础倍数 // 间距基础倍数
$uni-space-root: 2 !default; $uni-space-root: 2 !default;
// 边框半径默认值 // 边框半径默认值
$uni-radius-root: 5px !default; $uni-radius-root:5px !default;
$uni-radius: () !default; $uni-radius: () !default;
// 边框半径断点 // 边框半径断点
$uni-radius: map-deep-merge( $uni-radius: map-deep-merge(
( (
0: 0, 0: 0,
// TODO 当前版本暂时不支持 sm 属性 // TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2), // 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root, null: $uni-radius-root,
'lg': $uni-radius-root * 2, 'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6, 'xl': $uni-radius-root * 6,
'pill': 9999px, 'pill': 9999px,
'circle': 50%, 'circle': 50%
), ),
$uni-radius $uni-radius
); );
// 字体家族 // 字体家族
$body-font-family: 'Roboto', sans-serif !default; $body-font-family: 'Roboto', sans-serif !default;
...@@ -26,109 +26,108 @@ $heading-font-family: $body-font-family !default; ...@@ -26,109 +26,108 @@ $heading-font-family: $body-font-family !default;
$uni-headings: () !default; $uni-headings: () !default;
$letterSpacing: -0.01562em; $letterSpacing: -0.01562em;
$uni-headings: map-deep-merge( $uni-headings: map-deep-merge(
( (
'h1': ( 'h1': (
size: 32px, size: 32px,
weight: 300, weight: 300,
line-height: 50px, line-height: 50px,
// letter-spacing:-0.01562em // letter-spacing:-0.01562em
), ),
'h2': ( 'h2': (
size: 28px, size: 28px,
weight: 300, weight: 300,
line-height: 40px, line-height: 40px,
// letter-spacing: -0.00833em // letter-spacing: -0.00833em
), ),
'h3': ( 'h3': (
size: 24px, size: 24px,
weight: 400, weight: 400,
line-height: 32px, line-height: 32px,
// letter-spacing: normal // letter-spacing: normal
), ),
'h4': ( 'h4': (
size: 20px, size: 20px,
weight: 400, weight: 400,
line-height: 30px, line-height: 30px,
// letter-spacing: 0.00735em // letter-spacing: 0.00735em
), ),
'h5': ( 'h5': (
size: 16px, size: 16px,
weight: 400, weight: 400,
line-height: 24px, line-height: 24px,
// letter-spacing: normal // letter-spacing: normal
), ),
'h6': ( 'h6': (
size: 14px, size: 14px,
weight: 500, weight: 500,
line-height: 18px, line-height: 18px,
// letter-spacing: 0.0125em // letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
), ),
'subtitle': ( $uni-headings
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'page': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false,,
),
),
$uni-headings
); );
// 主色 // 主色
$uni-primary: #2979ff !default; $uni-primary: #2979ff !default;
$uni-primary-disable: lighten($uni-primary, 20%) !default; $uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary, 25%) !default; $uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色 // 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 // 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default; $uni-success: #18bc37 !default;
$uni-success-disable: lighten($uni-success, 20%) !default; $uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success, 25%) !default; $uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default; $uni-warning: #f3a73f !default;
$uni-warning-disable: lighten($uni-warning, 20%) !default; $uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning, 25%) !default; $uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default; $uni-error: #e43d33 !default;
$uni-error-disable: lighten($uni-error, 20%) !default; $uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error, 25%) !default; $uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default; $uni-info: #8f939c !default;
$uni-info-disable: lighten($uni-info, 20%) !default; $uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info, 25%) !default; $uni-info-light: lighten($uni-info,25%) !default;
// 中性色 // 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 // 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字 $uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字 $uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字 $uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明 $uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色 // 边框颜色
$uni-border-1: #f0f0f0 !default; $uni-border-1: #F0F0F0 !default;
$uni-border-2: #ededed !default; $uni-border-2: #EDEDED !default;
$uni-border-3: #dcdcdc !default; $uni-border-3: #DCDCDC !default;
$uni-border-4: #b9b9b9 !default; $uni-border-4: #B9B9B9 !default;
// 常规色 // 常规色
$uni-black: #000000 !default; $uni-black: #000000 !default;
$uni-white: #ffffff !default; $uni-white: #ffffff !default;
$uni-transparent: rgba( $uni-transparent: rgba($color: #000000, $alpha: 0) !default;
$color: #000000,
$alpha: 0,
) !default;
// 背景色 // 背景色
$uni-bg-color: #f7f7f7 !default; $uni-bg-color: #f7f7f7 !default;
...@@ -139,24 +138,9 @@ $uni-spacing-base: 15px !default; ...@@ -139,24 +138,9 @@ $uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default; $uni-spacing-lg: 30px !default;
// 阴影 // 阴影
$uni-shadow-sm: 0 0 5px $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
rgba( $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$color: #d8d8d8, $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
$alpha: 0.5,
) !default;
$uni-shadow-base: 0 1px 8px 1px
rgba(
$color: #a5a5a5,
$alpha: 0.2,
) !default;
$uni-shadow-lg: 0px 1px 10px 2px
rgba(
$color: #a5a4a4,
$alpha: 0.5,
) !default;
// 蒙版 // 蒙版
$uni-mask: rgba( $uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
$color: #000000,
$alpha: 0.4,
) !default;
## 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目录规范
<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>
<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>
<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>
<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>
<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>
<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>
{
"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"
}
{
"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"
}
{
"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"
}
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
}
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "确定",
"filter-dropdown.filter": "筛选",
"filter-dropdown.gt": "大于等于",
"filter-dropdown.lt": "小于等于",
"filter-dropdown.date": "日期范围"
}
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "確定",
"filter-dropdown.filter": "篩選",
"filter-dropdown.gt": "大於等於",
"filter-dropdown.lt": "小於等於",
"filter-dropdown.date": "日期範圍"
}
{
"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"
}
}
}
}
}
\ No newline at end of file
## Table 表单
> 组件名:``uni-table``,代码块: `uTable`。
用于展示多条结构类似的数据
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-table)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
// import { reactive } from "vue";
// import { createNew } from './ble/tsc'
// let blueTooth: any;
// const state: any = reactive({
// looptime: 0,
// currentTime: 1,
// lastData: 0,
// oneTimeData: 0,
// canvasWidth: 1050,
// canvasHeight: 750,
// buffSize: [],
// printNum: [],
// printerNum: 1,
// currentPrint: 1,
// isReceiptSend: false,
// isLabelSend: false
// })
// export const init = () => {
// let list = [] as any[]
// let numList = []
// let j = 0
// for (let i = 20; i < 200; i += 10) {
// list[j] = i;
// j++
// }
// for (let i = 1; i < 10; i++) {
// numList[i - 1] = i
// }
// state.buffSize = list;
// state.oneTimeData = list[0];
// state.printNum = numList;
// state.printerNum = numList[0];
// }
// export const labelTest = (tooth: any, printData?: any) => {
// blueTooth = tooth
// let canvasWidth = state.canvasWidth
// let canvasHeight = state.canvasHeight
// let { qrcode, barcode, fields } = printData
// // x 和 y: 文字的起始位置坐标,以毫米为单位。
// // font: 字体类型,可以是预装载的或者外部下载的字体。
// // x_ 和 y_: 水平和垂直缩放比例,范围为 0 - 10,可调整字体大小。
// // str: 要打印的文字内容。
// // codetype: 条形码类型,支持 CODE128、CODE39、CODE93 等多种类型。
// // height: 条码的高度,以毫米为单位。
// // readable: 是否在条形码下方打印可读的文字标签。0 表示不打印,1 表示打印。
// // narrow 和 wide: 条形码线条的宽度比例,范围为 1 - 10。
// // content: 条形码所表示的内容。
// let command = createNew()
// command.setSize(70, 52); // 设置页面大小
// command.setGap(0); //传感器 command.setCls(); //清除打印机缓存
// // command.setText(40, 50, 'TSS24.BF2', 1, 1, 'WMS编码号');
// // command.setBarCode(200, 40, 'EAN8', 64, 1, 3, 3, '1234567');
// // command.setText(40, 100, 'TSS24.BF2', 1, 1, '佳博智汇');
// // command.setText(40, 140, 'TSS24.BF2', 1, 1, 'h测试数字12345678');
// // command.setText(40, 180, 'TSS24.BF2', 1, 1, 'g测试数字12345678');
// // command.setText(40, 220, 'TSS24.BF2', 1, 1, 'f测试数字12345678');
// // command.setText(40, 260, 'TSS24.BF2', 1, 1, 'e测试数字12345678');
// // command.setText(40, 300, 'TSS24.BF2', 1, 1, 'd测试数字12345678');
// // command.setText(40, 340, 'TSS24.BF2', 1, 1, 'c测试数字12345678');
// // command.setText(40, 380, 'TSS24.BF2', 1, 1, 'b测试数字12345678');
// // command.setQR(300, 180, 'L', 8, 'A', 'www.smarnet.cc佳博智汇');
// command.setText(40, 50, 'TSS24.BF2', 1, 1, 'WMS编码号');
// command.setBarCode(200, 40, 'EAN8', 64, 1, 3, 3, barcode);
// let num = 60
// for (const k in fields) {
// command.setText(40, num + 40, 'TSS24.BF2', 1, 1, JSON.stringify(fields[k]));
// }
// command.setQR(300, 180, 'L', 6, 'A', JSON.stringify(qrcode));
// setTimeout(() => {
// uni.canvasGetImageData({
// canvasId: 'edit_area_canvas',
// x: 0,
// y: 0,
// width: canvasWidth,
// height: canvasHeight,
// success: function (res) {
// command.setBitmap(60, 0, 1, res)
// },
// complete: function () {
// command.setPagePrint()
// state.isLabelSend = true;
// prepareSend(command.getData())
// }
// })
// }, 300);
// }
// //准备发送,根据每次发送字节数来处理分包数量
// const prepareSend = (buff: any[]) => {
// console.log(buff.length, 'buff.length');
// let time = state.oneTimeData
// let looptime = (Number(buff.length) / Number(time));
// let lastData = (Number(buff.length) % Number(time));
// console.log(looptime + "---" + lastData)
// state.looptime = looptime + 1;
// state.lastData = lastData;
// state.currentTime = 1;
// Send(buff)
// }
// //分包发送
// const Send = (buff: any) => {
// let {
// currentTime,
// looptime: loopTime,
// lastData,
// oneTimeData: onTimeData,
// printerNum: printNum,
// currentPrint } = state;
// let buf;
// let dataView;
// if (currentTime < loopTime) {
// buf = new ArrayBuffer(onTimeData)
// dataView = new DataView(buf)
// for (var i = 0; i < onTimeData; ++i) {
// dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
// }
// } else {
// buf = new ArrayBuffer(lastData)
// dataView = new DataView(buf)
// for (var i = 0; i < lastData; ++i) {
// dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
// }
// }
// console.log("第" + currentTime + "次发送数据大小为:" + buf.byteLength)
// let BLEInformation = blueTooth.BLEInformation
// plus.bluetooth.writeBLECharacteristicValue({
// deviceId: BLEInformation.deviceId,
// serviceId: BLEInformation.writeServiceId,
// characteristicId: BLEInformation.writeCharaterId,
// value: buf,
// success: function (res) {
// console.log(res)
// },
// fail: function (e) {
// console.log(e)
// },
// complete: function () {
// currentTime++
// if (currentTime <= loopTime) {
// state.currentTime = currentTime;
// Send(buff)
// } else {
// uni.showToast({
// title: '已打印第' + currentPrint + '张',
// })
// if (currentPrint == printNum) {
// state.looptime = 0;
// state.lastData = 0;
// state.currentTime = 1;
// state.isReceiptSend = false;
// state.isLabelSend = false;
// state.currentPrint = 1;
// } else {
// currentPrint++;
// state.currentPrint = currentPrint;
// state.currentTime = 1;
// Send(buff)
// }
// }
// }
// })
// }
\ No newline at end of file
...@@ -2,6 +2,7 @@ import config from './config'; ...@@ -2,6 +2,7 @@ import config from './config';
import { useGlobalStore } from '@/store/useStore'; import { useGlobalStore } from '@/store/useStore';
const baseUrl = config.baseUrl; const baseUrl = config.baseUrl;
// 封装公共申请办法 // 封装公共申请办法
function request( function request(
url: string, url: string,
...@@ -9,7 +10,7 @@ function request( ...@@ -9,7 +10,7 @@ function request(
data?: object | any, data?: object | any,
responseType?: string responseType?: string
) { ) {
return new Promise<any>(function (resolve, reject) { return new Promise<any>(function(resolve, reject) {
let header: any; let header: any;
const globalStore = useGlobalStore(); const globalStore = useGlobalStore();
uni.showLoading({ uni.showLoading({
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论