feat(扫码功能): 重构扫码页面并新增分卷录入功能
- 重构扫码页面结构,采用标签页形式组织功能模块 - 新增分卷录入功能组件(apart.vue)和基础录入功能组件(typing.vue) - 新增物料选择组件(klp-product-select)和标签页组件(klp-tabs) - 新增WMS相关API接口(product.js, warehouse.js等) - 更新uni-data-select组件支持多选和插槽功能 - 更新uni-icons和uni-load-more组件版本及功能 - 移除冗余样式和代码,优化现有组件结构 refactor(组件): 优化acidity.vue组件使用新的标签页组件 style: 移除冗余CSS样式代码 chore: 更新多个uni_modules组件的package.json版本号
This commit is contained in:
66
apps/hand-factory/api/wms/coil.js
Normal file
66
apps/hand-factory/api/wms/coil.js
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询钢卷物料表列表
|
||||||
|
export function listMaterialCoil(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function exportMaterialCoil(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil/export',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMaterialCoil(CoilMaterialId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil/' + CoilMaterialId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addMaterialCoil(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateMaterialCoil(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 简单更新钢卷物料表
|
||||||
|
export function updateMaterialCoilSimple(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除钢卷物料表
|
||||||
|
export function delMaterialCoil(CoilMaterialId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil/' + CoilMaterialId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 钢卷溯源查询
|
||||||
|
export function getMaterialCoilTrace(CoilMaterialId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil/trace/' + CoilMaterialId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
44
apps/hand-factory/api/wms/product.js
Normal file
44
apps/hand-factory/api/wms/product.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询产品列表
|
||||||
|
export function listProduct(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/product/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询产品详细
|
||||||
|
export function getProduct(productId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/product/' + productId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增产品
|
||||||
|
export function addProduct(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/product',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改产品
|
||||||
|
export function updateProduct(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/product',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除产品
|
||||||
|
export function delProduct(productId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/product/' + productId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
52
apps/hand-factory/api/wms/rawMaterial.js
Normal file
52
apps/hand-factory/api/wms/rawMaterial.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询原材料列表
|
||||||
|
export function listRawMaterial(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/rawMaterial/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询原材料详细
|
||||||
|
export function getRawMaterial(rawMaterialId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/rawMaterial/' + rawMaterialId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增原材料
|
||||||
|
export function addRawMaterial(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/rawMaterial',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改原材料
|
||||||
|
export function updateRawMaterial(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/rawMaterial',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除原材料
|
||||||
|
export function delRawMaterial(rawMaterialId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/rawMaterial/' + rawMaterialId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function listRawMaterialWithDemand(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/rawMaterial//listWithDemand',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
44
apps/hand-factory/api/wms/warehouse.js
Normal file
44
apps/hand-factory/api/wms/warehouse.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询仓库/库区/库位自关联列表
|
||||||
|
export function listWarehouse(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/warehouse/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询仓库/库区/库位自关联详细
|
||||||
|
export function getWarehouse(warehouseId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/warehouse/' + warehouseId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增仓库/库区/库位自关联
|
||||||
|
export function addWarehouse(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/warehouse',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改仓库/库区/库位自关联
|
||||||
|
export function updateWarehouse(data) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/warehouse',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除仓库/库区/库位自关联
|
||||||
|
export function delWarehouse(warehouseId) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/warehouse/' + warehouseId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<uni-data-select v-model="itemId" :localdata="localData"></uni-data-select>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
listProduct
|
||||||
|
} from '@/api/wms/product.js'
|
||||||
|
import {
|
||||||
|
listRawMaterial
|
||||||
|
} from '@/api/wms/rawMaterial.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "klp-product-select",
|
||||||
|
props: {
|
||||||
|
itemType: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
itemType() {
|
||||||
|
this.$emit('input', undefined)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
listProduct({ pageSize: 9999, pageNum: 1 }).then(res => {
|
||||||
|
this.products = res.rows
|
||||||
|
})
|
||||||
|
listRawMaterial({ pageSize: 9999, pageNum: 1 }).then(res => {
|
||||||
|
this.raws = res.rows
|
||||||
|
})
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
itemId: {
|
||||||
|
get() {
|
||||||
|
this.value
|
||||||
|
},
|
||||||
|
set(v) {
|
||||||
|
this.$emit('input', v)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
localData() {
|
||||||
|
if (this.itemType == 'raw_material') {
|
||||||
|
return this.raws.map(item => ({
|
||||||
|
text: item.rawMaterialName,
|
||||||
|
value: item.rawMaterialId
|
||||||
|
}))
|
||||||
|
} else if (this.itemType == 'product') {
|
||||||
|
return this.products.map(item => ({
|
||||||
|
text: item.productName,
|
||||||
|
value: item.productId
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
raws: [],
|
||||||
|
products: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -335,13 +335,10 @@ export default {
|
|||||||
switch (this.activeTab) {
|
switch (this.activeTab) {
|
||||||
case "day":
|
case "day":
|
||||||
return this.startDate;
|
return this.startDate;
|
||||||
break;
|
|
||||||
case "month":
|
case "month":
|
||||||
return `${this.startDate} 至 ${this.endDate}`;
|
return `${this.startDate} 至 ${this.endDate}`;
|
||||||
break;
|
|
||||||
case "year":
|
case "year":
|
||||||
return `${this.startDate} 至 ${this.endDate}`;
|
return `${this.startDate} 至 ${this.endDate}`;
|
||||||
break;
|
|
||||||
default:
|
default:
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view class="tab">
|
<view class="tab">
|
||||||
<uni-data-checkbox
|
<!-- <uni-data-checkbox
|
||||||
mode="tag"
|
mode="tag"
|
||||||
selectedColor="#2bf"
|
selectedColor="#2bf"
|
||||||
v-model="currentTab"
|
v-model="currentTab"
|
||||||
:localdata="tabData"
|
:localdata="tabData"
|
||||||
></uni-data-checkbox>
|
></uni-data-checkbox> -->
|
||||||
|
<head-tabs-vue v-model="currentTab" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<scroll-view scroll-y v-if="currentTab === 1">
|
<scroll-view scroll-y v-if="currentTab === 1">
|
||||||
@@ -95,28 +96,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import HeadTabsVue from '../panels/klp-tabs/klp-tabs.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
HeadTabsVue
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentTab: 1,
|
currentTab: 1,
|
||||||
tabData: [
|
|
||||||
{
|
|
||||||
text: "实时监控",
|
|
||||||
value: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "生产统计",
|
|
||||||
value: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "停机统计",
|
|
||||||
value: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "班组绩效",
|
|
||||||
value: 4,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
chartData: {},
|
chartData: {},
|
||||||
webStatus: [
|
webStatus: [
|
||||||
{ label: '网络状态', value: '正常' },
|
{ label: '网络状态', value: '正常' },
|
||||||
|
|||||||
@@ -152,12 +152,6 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentTab: 1, // 当前选中的标签页
|
currentTab: 1, // 当前选中的标签页
|
||||||
tabData: [
|
|
||||||
{ text: "实时监控", value: 1 },
|
|
||||||
{ text: "生产统计", value: 2 },
|
|
||||||
{ text: "停机统计", value: 3 },
|
|
||||||
{ text: "班组绩效", value: 4 }
|
|
||||||
],
|
|
||||||
status: [ // 状态指标数据(供 k-metric-card 使用)
|
status: [ // 状态指标数据(供 k-metric-card 使用)
|
||||||
{ label: '网络状态', value: '正常' },
|
{ label: '网络状态', value: '正常' },
|
||||||
{ label: '当前班组', value: '乙 / 中' }
|
{ label: '当前班组', value: '乙 / 中' }
|
||||||
|
|||||||
390
apps/hand-factory/components/panels/code/apart.vue
Normal file
390
apps/hand-factory/components/panels/code/apart.vue
Normal file
@@ -0,0 +1,390 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 扫码按钮 -->
|
||||||
|
<button class="scan-btn" @click="handleScan">点击扫码</button>
|
||||||
|
|
||||||
|
<!-- 表单区域:扫码后显示 -->
|
||||||
|
<uni-form ref="form" v-model="form" :rules="rules" v-if="form.coilId" label-width="160rpx">
|
||||||
|
<!-- 分卷数量控制 -->
|
||||||
|
<view class="coil-control">
|
||||||
|
<text class="control-text">分卷数量:{{ form.newCoils.length }} 卷</text>
|
||||||
|
<button class="add-btn" @click="addCoil">+ 添加卷</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 动态渲染多卷表单 -->
|
||||||
|
<view v-for="(coil, index) in form.newCoils" :key="index" class="coil-group">
|
||||||
|
<!-- 卷标识 -->
|
||||||
|
<view class="coil-title">
|
||||||
|
<text>卷 {{ index + 1 }}</text>
|
||||||
|
<!-- 仅当卷数量大于1时显示删除按钮 -->
|
||||||
|
<button
|
||||||
|
class="delete-btn"
|
||||||
|
@click="deleteCoil(index)"
|
||||||
|
v-if="form.newCoils.length > 1"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 卷信息表单项 -->
|
||||||
|
<uni-form-item :label="`物料类型(${index + 1})`" :prop="`newCoils.${index}.itemType`">
|
||||||
|
<uni-data-checkbox
|
||||||
|
v-model="coil.itemType"
|
||||||
|
:localdata="[{ text: '原料', value: 'raw_material' }, { text: '产品', value: 'product' }]"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<uni-form-item :label="`原料/产品(${index + 1})`" :prop="`newCoils.${index}.itemId`">
|
||||||
|
<klp-product-select
|
||||||
|
:item-type="coil.itemType"
|
||||||
|
v-model="coil.itemId"
|
||||||
|
></klp-product-select>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<uni-form-item :label="`所属班组(${index + 1})`" :prop="`newCoils.${index}.team`">
|
||||||
|
<input
|
||||||
|
v-model="coil.team"
|
||||||
|
placeholder="请输入班组名称"
|
||||||
|
class="input-control"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<uni-form-item :label="`当前卷号(${index + 1})`" :prop="`newCoils.${index}.currentCoilNo`">
|
||||||
|
<input
|
||||||
|
v-model="coil.currentCoilNo"
|
||||||
|
placeholder="请输入卷号信息"
|
||||||
|
class="input-control"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<uni-form-item :label="`毛重(kg)(${index + 1})`" :prop="`newCoils.${index}.grossWeight`">
|
||||||
|
<input
|
||||||
|
v-model="coil.grossWeight"
|
||||||
|
type="number"
|
||||||
|
placeholder="请输入毛重"
|
||||||
|
class="input-control"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<uni-form-item :label="`净重(kg)(${index + 1})`" :prop="`newCoils.${index}.netWeight`">
|
||||||
|
<input
|
||||||
|
v-model="coil.netWeight"
|
||||||
|
type="number"
|
||||||
|
placeholder="请输入净重"
|
||||||
|
class="input-control"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<!-- 卷分隔线 -->
|
||||||
|
<view class="coil-divider" v-if="index !== form.newCoils.length - 1"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 确认按钮 -->
|
||||||
|
<uni-form-item>
|
||||||
|
<button class="confirm-btn" @click="handleConfirm">
|
||||||
|
确认信息并录入系统
|
||||||
|
</button>
|
||||||
|
</uni-form-item>
|
||||||
|
</uni-form>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getGenerateRecord } from '@/api/wms/code.js'
|
||||||
|
import { updateMaterialCoil } from '@/api/wms/coil.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
coilId: undefined,
|
||||||
|
hasMergeSplit: 1, // 1表示分卷
|
||||||
|
newCoils: [
|
||||||
|
{
|
||||||
|
itemType: 'raw_material',
|
||||||
|
itemId: undefined,
|
||||||
|
team: undefined,
|
||||||
|
currentCoilNo: undefined,
|
||||||
|
warehouseId: undefined,
|
||||||
|
grossWeight: undefined,
|
||||||
|
netWeight: undefined,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 表单验证规则(适配数组形式的多卷数据)
|
||||||
|
rules: {
|
||||||
|
// 基础验证:必须扫码
|
||||||
|
coilId: {
|
||||||
|
required: true,
|
||||||
|
message: '请先扫码获取卷ID',
|
||||||
|
trigger: ['change', 'blur']
|
||||||
|
},
|
||||||
|
// 多卷验证规则(通过newCoils[index].xxx形式匹配)
|
||||||
|
'newCoils.*.itemType': {
|
||||||
|
required: true,
|
||||||
|
message: '请选择物料类型',
|
||||||
|
trigger: 'change'
|
||||||
|
},
|
||||||
|
'newCoils.*.itemId': {
|
||||||
|
required: true,
|
||||||
|
message: '请选择对应原料/产品',
|
||||||
|
trigger: 'change'
|
||||||
|
},
|
||||||
|
'newCoils.*.team': {
|
||||||
|
required: true,
|
||||||
|
message: '请输入所属班组',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
'newCoils.*.currentCoilNo': {
|
||||||
|
required: true,
|
||||||
|
message: '请输入当前卷号',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
'newCoils.*.grossWeight': {
|
||||||
|
required: true,
|
||||||
|
message: '请输入毛重',
|
||||||
|
trigger: 'blur',
|
||||||
|
type: 'number'
|
||||||
|
},
|
||||||
|
'newCoils.*.netWeight': {
|
||||||
|
required: true,
|
||||||
|
message: '请输入净重',
|
||||||
|
trigger: 'blur',
|
||||||
|
type: 'number'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 处理扫码逻辑
|
||||||
|
handleScan() {
|
||||||
|
uni.scanCode({
|
||||||
|
success: (res) => {
|
||||||
|
console.log('扫码结果:', res.result)
|
||||||
|
getGenerateRecord(res.result).then(res => {
|
||||||
|
const result = JSON.parse(res.data.content);
|
||||||
|
this.$set(this.form, 'coilId', result.coil_id);
|
||||||
|
this.$refs.form?.validateField('coilId'); // 验证扫码字段
|
||||||
|
console.log('扫码获取的卷信息:', result);
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '扫码信息解析失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('扫码失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '扫码失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加新卷
|
||||||
|
addCoil() {
|
||||||
|
// 初始化新卷数据(与初始卷结构一致)
|
||||||
|
const newCoil = {
|
||||||
|
itemType: 'raw_material',
|
||||||
|
itemId: undefined,
|
||||||
|
team: undefined,
|
||||||
|
currentCoilNo: undefined,
|
||||||
|
warehouseId: undefined,
|
||||||
|
grossWeight: undefined,
|
||||||
|
netWeight: undefined,
|
||||||
|
};
|
||||||
|
this.form.newCoils.push(newCoil);
|
||||||
|
// 清除表单验证状态(避免新增项显示错误)
|
||||||
|
this.$refs.form?.clearValidate();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除指定卷
|
||||||
|
deleteCoil(index) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除',
|
||||||
|
content: `确定要删除第${index + 1}卷吗?`,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.form.newCoils.splice(index, 1);
|
||||||
|
// 清除表单验证状态
|
||||||
|
this.$refs.form?.clearValidate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理确认提交
|
||||||
|
handleConfirm() {
|
||||||
|
this.$refs.form.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
// 提交的数据包含:原始卷ID + 分卷标识 + 所有新卷信息
|
||||||
|
updateMaterialCoil(this.form).then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分卷信息录入成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
// 重置表单
|
||||||
|
this.resetForm();
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('提交失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '录入失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 验证失败时滚动到第一个错误项
|
||||||
|
this.scrollToErrorField();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
resetForm() {
|
||||||
|
this.form = {
|
||||||
|
coilId: undefined,
|
||||||
|
hasMergeSplit: 1,
|
||||||
|
newCoils: [
|
||||||
|
{
|
||||||
|
itemType: 'raw_material',
|
||||||
|
itemId: undefined,
|
||||||
|
team: undefined,
|
||||||
|
currentCoilNo: undefined,
|
||||||
|
warehouseId: undefined,
|
||||||
|
grossWeight: undefined,
|
||||||
|
netWeight: undefined,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.$refs.form?.resetFields();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 滚动到第一个错误的表单项
|
||||||
|
scrollToErrorField() {
|
||||||
|
const errorEl = document.querySelector('.uni-form-item--error');
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 扫码按钮样式 */
|
||||||
|
.scan-btn {
|
||||||
|
width: 600rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
background-color: #007aff;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin: 0 auto 60rpx;
|
||||||
|
display: block;
|
||||||
|
box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分卷控制区 */
|
||||||
|
.coil-control {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 0 40rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
background-color: #4cd964;
|
||||||
|
color: white;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 单卷表单组样式 */
|
||||||
|
.coil-group {
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卷标题 */
|
||||||
|
.coil-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coil-title text {
|
||||||
|
font-size: 34rpx;
|
||||||
|
color: #007aff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除按钮 */
|
||||||
|
.delete-btn {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
background-color: #ff3b30;
|
||||||
|
color: white;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 输入框样式 */
|
||||||
|
.input-control {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确认按钮样式 */
|
||||||
|
.confirm-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
background-color: #00b42a;
|
||||||
|
color: white;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 180, 42, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单项间距 */
|
||||||
|
.uni-form-item {
|
||||||
|
margin-bottom: 25rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卷分隔线 */
|
||||||
|
.coil-divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: #eee;
|
||||||
|
margin: 30rpx 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
12
apps/hand-factory/components/panels/code/merge.vue
Normal file
12
apps/hand-factory/components/panels/code/merge.vue
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<view class="">
|
||||||
|
合并
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
21
apps/hand-factory/components/panels/code/trace.vue
Normal file
21
apps/hand-factory/components/panels/code/trace.vue
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<view class="">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columns: [
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
238
apps/hand-factory/components/panels/code/typing.vue
Normal file
238
apps/hand-factory/components/panels/code/typing.vue
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 扫码按钮 -->
|
||||||
|
<button class="scan-btn" @click="handleScan">点击扫码</button>
|
||||||
|
|
||||||
|
<!-- 表单区域 -->
|
||||||
|
<uni-form ref="form" v-model="form" :rules="rules" v-if="form.coilId" label-width="160rpx">
|
||||||
|
<!-- 类型选择 -->
|
||||||
|
<uni-form-item label="物料类型" prop="itemType">
|
||||||
|
<uni-data-checkbox
|
||||||
|
v-model="form.itemType"
|
||||||
|
:localdata="[{ text: '原料', value: 'raw_material' }, { text: '产品', value: 'product' }]"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<!-- 物料选择 -->
|
||||||
|
<uni-form-item label="原料/产品" prop="itemId">
|
||||||
|
<klp-product-select
|
||||||
|
:item-type="form.itemType"
|
||||||
|
v-model="form.itemId"
|
||||||
|
></klp-product-select>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<!-- 班组输入 -->
|
||||||
|
<uni-form-item label="所属班组" prop="team">
|
||||||
|
<input
|
||||||
|
v-model="form.team"
|
||||||
|
placeholder="请输入班组名称"
|
||||||
|
class="input-control"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<!-- 卷号输入 -->
|
||||||
|
<uni-form-item label="当前卷号" prop="currentCoilNo">
|
||||||
|
<input
|
||||||
|
v-model="form.currentCoilNo"
|
||||||
|
placeholder="请输入卷号信息"
|
||||||
|
class="input-control"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<!-- 毛重输入 -->
|
||||||
|
<uni-form-item label="毛重(kg)" prop="grossWeight">
|
||||||
|
<input
|
||||||
|
v-model="form.grossWeight"
|
||||||
|
type="number"
|
||||||
|
placeholder="请输入毛重"
|
||||||
|
class="input-control"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<!-- 净重输入 -->
|
||||||
|
<uni-form-item label="净重(kg)" prop="netWeight">
|
||||||
|
<input
|
||||||
|
v-model="form.netWeight"
|
||||||
|
type="number"
|
||||||
|
placeholder="请输入净重"
|
||||||
|
class="input-control"
|
||||||
|
/>
|
||||||
|
</uni-form-item>
|
||||||
|
|
||||||
|
<!-- 确认按钮 -->
|
||||||
|
<uni-form-item>
|
||||||
|
<button class="confirm-btn" @click="handleConfirm">
|
||||||
|
确认信息并录入系统
|
||||||
|
</button>
|
||||||
|
</uni-form-item>
|
||||||
|
</uni-form>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getGenerateRecord } from '@/api/wms/code.js'
|
||||||
|
import { updateMaterialCoil } from '@/api/wms/coil.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
coilId: undefined,
|
||||||
|
itemType: 'raw_material',
|
||||||
|
itemId: undefined,
|
||||||
|
team: undefined,
|
||||||
|
currentCoilNo: undefined,
|
||||||
|
warehouseId: undefined,
|
||||||
|
grossWeight: undefined,
|
||||||
|
netWeight: undefined,
|
||||||
|
},
|
||||||
|
// 表单验证规则
|
||||||
|
rules: {
|
||||||
|
coilId: {
|
||||||
|
required: true,
|
||||||
|
message: '请先扫码获取卷ID',
|
||||||
|
trigger: ['change', 'blur']
|
||||||
|
},
|
||||||
|
itemType: {
|
||||||
|
required: true,
|
||||||
|
message: '请选择物料类型',
|
||||||
|
trigger: 'change'
|
||||||
|
},
|
||||||
|
itemId: {
|
||||||
|
required: true,
|
||||||
|
message: '请选择对应原料/产品',
|
||||||
|
trigger: 'change'
|
||||||
|
},
|
||||||
|
team: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入所属班组',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
currentCoilNo: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入当前卷号',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
grossWeight: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入毛重',
|
||||||
|
trigger: 'blur',
|
||||||
|
type: 'number'
|
||||||
|
},
|
||||||
|
netWeight: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入净重',
|
||||||
|
trigger: 'blur',
|
||||||
|
type: 'number'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 处理扫码逻辑
|
||||||
|
handleScan() {
|
||||||
|
uni.scanCode({
|
||||||
|
success: (res) => {
|
||||||
|
console.log('扫码结果:', res.result)
|
||||||
|
getGenerateRecord(res.result).then(res => {
|
||||||
|
const result = JSON.parse(res.data.content);
|
||||||
|
this.$set(this.form, 'coilId', result.coil_id);
|
||||||
|
// 扫码后验证coilId字段
|
||||||
|
this.$refs.form.validateField('coilId');
|
||||||
|
console.log('扫码获取的卷信息:', result);
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '扫码信息解析失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('扫码失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '扫码失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理确认提交
|
||||||
|
handleConfirm() {
|
||||||
|
// 表单验证
|
||||||
|
this.$refs.form.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
// 验证通过,提交数据
|
||||||
|
updateMaterialCoil(this.form).then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '录入成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
// 重置表单
|
||||||
|
this.$refs.form.resetFields();
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('提交失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '录入失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 验证失败,不提交
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 扫码按钮样式 */
|
||||||
|
.scan-btn {
|
||||||
|
width: 600rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
background-color: #007aff;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin: 0 auto 60rpx;
|
||||||
|
display: block;
|
||||||
|
box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 输入框样式 */
|
||||||
|
.input-control {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确认按钮样式 */
|
||||||
|
.confirm-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
background-color: #00b42a;
|
||||||
|
color: white;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 180, 42, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单项间距 */
|
||||||
|
.uni-form-item {
|
||||||
|
margin-bottom: 30rpx !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
48
apps/hand-factory/components/panels/klp-tabs/klp-tabs.vue
Normal file
48
apps/hand-factory/components/panels/klp-tabs/klp-tabs.vue
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<uni-data-checkbox mode="tag" selectedColor="#2bf" v-model="currentTab" :localdata="tabData"></uni-data-checkbox>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentTab: {
|
||||||
|
set(value) {
|
||||||
|
this.$emit('input', value);
|
||||||
|
},
|
||||||
|
get() {
|
||||||
|
return this.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabData: [{
|
||||||
|
text: "实时监控",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "生产统计",
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "停机统计",
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "班组绩效",
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -1,174 +1,117 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- logo 和标题 -->
|
<!-- 标签栏 -->
|
||||||
<image class="logo" src="/static/logo.jpg"></image>
|
<view class="tab-container">
|
||||||
<view class="text-area">
|
<view
|
||||||
<text class="title">{{ title }}</text>
|
v-for="item in tabs"
|
||||||
</view>
|
:key="item.value"
|
||||||
|
@click="switchTab(item.value)"
|
||||||
|
class="tab-item"
|
||||||
|
:class="{ 'tab-active': currentTab === item.value }"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 扫码按钮 -->
|
<!-- 动态组件区域 - 根据当前标签显示对应组件 -->
|
||||||
<button class="scan-btn" @click="startScan">点击扫码</button>
|
<view class="component-container">
|
||||||
|
<component
|
||||||
<!-- 扫码结果组件:仅传递必要props -->
|
:is="currentComponent"
|
||||||
<scan-result-card
|
></component>
|
||||||
v-if="scanResult"
|
</view>
|
||||||
:scan-result="scanResult"
|
</view>
|
||||||
:code-status="codeStatus"
|
|
||||||
:current-time="currentTime"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 备注和确认按钮:仅状态非2(已出库)时显示 -->
|
|
||||||
<textarea
|
|
||||||
v-if="scanResult && codeStatus !== CODE_STATUS.OUT_STOCK"
|
|
||||||
v-model="remark"
|
|
||||||
placeholder="请填写备注"
|
|
||||||
></textarea>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="confirm-btn"
|
|
||||||
@click="confirm"
|
|
||||||
v-if="scanResult && codeStatus !== CODE_STATUS.OUT_STOCK"
|
|
||||||
>
|
|
||||||
确认信息并录入系统
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 引入组件和API
|
import ApartVue from '@/components/panels/code/apart.vue'
|
||||||
import {
|
import MergeVue from '@/components/panels/code/merge.vue'
|
||||||
formatCurrentTime
|
import TraceVue from '@/components/panels/code/trace.vue'
|
||||||
} from '@/utils/wms';
|
import TypingVue from '@/components/panels/code/typing.vue'
|
||||||
import {
|
|
||||||
CODE_STATUS,
|
|
||||||
IO_TYPE
|
|
||||||
} from '@/constants/wms';
|
|
||||||
import {
|
|
||||||
SCAN_OPERATION_STRATEGIES
|
|
||||||
} from '@/strategies/wmsScan';
|
|
||||||
import {
|
|
||||||
addStockIoDetail
|
|
||||||
} from '@/api/wms/stockIoDetail.js';
|
|
||||||
import {
|
|
||||||
getGenerateRecord,
|
|
||||||
updateGenerateRecord
|
|
||||||
} from '@/api/wms/code.js';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '科伦普扫码器',
|
|
||||||
scanResult: null, // 扫码结果(传递给组件)
|
scanResult: null, // 扫码结果(传递给组件)
|
||||||
currentTime: '', // 扫码时间(传递给组件)
|
currentTime: '', // 扫码时间(传递给组件)
|
||||||
recordId: undefined,
|
recordId: undefined,
|
||||||
codeStatus: undefined,
|
codeStatus: undefined,
|
||||||
remark: '',
|
remark: '',
|
||||||
CODE_STATUS,
|
currentTab: 'typing', // 当前激活的标签
|
||||||
|
tabs: [
|
||||||
|
{ label: '录入', value: 'typing' },
|
||||||
|
{ label: '分卷', value: 'apart' },
|
||||||
|
// { label: '合卷', value: 'merge' },
|
||||||
|
{ label: '追溯', value: 'trace' }
|
||||||
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad() {
|
components: {
|
||||||
this.currentTime = formatCurrentTime(); // 用工具函数
|
ApartVue,
|
||||||
|
MergeVue,
|
||||||
|
TraceVue,
|
||||||
|
TypingVue
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
username() {
|
||||||
|
return this.$store.state.user.name
|
||||||
|
},
|
||||||
|
avatar() {
|
||||||
|
return this.$store.state.user.avatar
|
||||||
|
},
|
||||||
|
windowHeight() {
|
||||||
|
return uni.getSystemInfoSync().windowHeight - 50
|
||||||
|
},
|
||||||
|
// 根据当前标签计算要显示的组件
|
||||||
|
currentComponent() {
|
||||||
|
// 转换为组件名(如 'typing' -> 'TypingVue')
|
||||||
|
return this.currentTab.charAt(0).toUpperCase() + this.currentTab.slice(1) + 'Vue'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: '扫码(' + this.username + ')',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// 更新当前时间(格式化后传递给组件)
|
// 切换标签
|
||||||
updateCurrentTime() {
|
switchTab(tabValue) {
|
||||||
const date = new Date();
|
this.currentTab = tabValue
|
||||||
const year = date.getFullYear();
|
|
||||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
||||||
const day = date.getDate().toString().padStart(2, '0');
|
|
||||||
const hour = date.getHours().toString().padStart(2, '0');
|
|
||||||
const minute = date.getMinutes().toString().padStart(2, '0');
|
|
||||||
this.currentTime = `${year}-${month}-${day} ${hour}:${minute}`;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 开始扫码:仅保留调用API和赋值逻辑,无业务分支
|
// 处理确认录入
|
||||||
async startScan() {
|
handleConfirm() {
|
||||||
uni.scanCode({
|
if (!this.scanResult && this.currentTab !== 'trace') {
|
||||||
success: async (res) => {
|
|
||||||
const codeId = res.result;
|
|
||||||
this.recordId = codeId;
|
|
||||||
uni.showLoading({
|
|
||||||
title: '正在获取二维码信息'
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
const {
|
|
||||||
data
|
|
||||||
} = await getGenerateRecord(codeId);
|
|
||||||
this.scanResult = JSON.parse(data.content);
|
|
||||||
this.codeStatus = data.status; // 直接用枚举对应的数值
|
|
||||||
this.currentTime = formatCurrentTime(); // 工具函数
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取扫码信息失败:', error);
|
|
||||||
uni.showToast({
|
|
||||||
title: '获取信息失败',
|
|
||||||
icon: 'none',
|
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
uni.hideLoading();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
/* 原有逻辑不变 */ }
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 确认录入:用策略模式替代if-else
|
|
||||||
async confirm() {
|
|
||||||
if (!this.scanResult || this.codeStatus === undefined) return;
|
|
||||||
|
|
||||||
// 1. 生成策略key(状态-IO类型)
|
|
||||||
const strategyKey = `${this.codeStatus}-${this.scanResult.ioType}`;
|
|
||||||
// 2. 匹配对应的策略(无策略则提示异常)
|
|
||||||
const strategy = SCAN_OPERATION_STRATEGIES[strategyKey];
|
|
||||||
if (!strategy) {
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '未知业务场景,无法处理',
|
title: '请先扫码获取信息',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
});
|
})
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
// 这里添加确认录入的逻辑
|
||||||
// 3. 执行策略:组装参数并调用入库API
|
console.log('确认录入信息:', {
|
||||||
const addParams = strategy.getAddParams(this.scanResult, this.remark);
|
tab: this.currentTab,
|
||||||
await addStockIoDetail(addParams);
|
scanResult: this.scanResult,
|
||||||
|
currentTime: this.currentTime,
|
||||||
|
recordId: this.recordId,
|
||||||
|
codeStatus: this.codeStatus,
|
||||||
|
remark: this.remark,
|
||||||
|
operator: this.username
|
||||||
|
})
|
||||||
|
|
||||||
// 4. 执行策略:更新二维码状态
|
uni.showToast({
|
||||||
const targetStatus = strategy.getUpdateStatus();
|
title: '录入成功',
|
||||||
await updateGenerateRecord({
|
icon: 'success'
|
||||||
recordId: this.recordId,
|
})
|
||||||
status: targetStatus
|
|
||||||
});
|
|
||||||
|
|
||||||
// 成功提示 + 清空数据
|
|
||||||
uni.showToast({
|
|
||||||
title: '确认成功,信息已录入系统',
|
|
||||||
icon: 'none',
|
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
this.scanResult = null;
|
|
||||||
this.recordId = undefined;
|
|
||||||
this.codeStatus = undefined;
|
|
||||||
this.remark = '';
|
|
||||||
}, 2000); // 原0秒无意义,改为与提示同步
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('确认失败:', error);
|
|
||||||
uni.showToast({
|
|
||||||
title: '确认失败,请重试',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* 父页面样式:保留原有样式,新增确认按钮样式 */
|
/* 父页面样式:保留原有样式,新增标签栏样式 */
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -179,49 +122,52 @@
|
|||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
/* 标签栏容器 */
|
||||||
height: 200rpx;
|
.tab-container {
|
||||||
margin-top: 100rpx;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-area {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
width: 100%;
|
||||||
margin-bottom: 80rpx;
|
background-color: #fff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
/* 标签项样式 */
|
||||||
font-size: 36rpx;
|
.tab-item {
|
||||||
color: #333;
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 25rpx 0;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 激活标签样式 */
|
||||||
|
.tab-active {
|
||||||
|
color: #007aff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 扫码按钮样式 */
|
/* 激活标签下划线 */
|
||||||
.scan-btn {
|
.tab-active::after {
|
||||||
width: 600rpx;
|
content: '';
|
||||||
height: 100rpx;
|
position: absolute;
|
||||||
line-height: 100rpx;
|
bottom: 0;
|
||||||
font-size: 36rpx;
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 6rpx;
|
||||||
background-color: #007aff;
|
background-color: #007aff;
|
||||||
color: white;
|
border-radius: 3rpx 3rpx 0 0;
|
||||||
border-radius: 50rpx;
|
|
||||||
margin-bottom: 60rpx;
|
|
||||||
box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 确认按钮样式(父页面新增,与组件间距协调) */
|
/* 组件容器样式 */
|
||||||
.confirm-btn {
|
.component-container {
|
||||||
width: 680rpx;
|
width: 100%;
|
||||||
/* 与组件宽度一致,视觉对齐 */
|
min-height: 400rpx;
|
||||||
height: 90rpx;
|
background-color: #fff;
|
||||||
line-height: 90rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
background-color: #00b42a;
|
|
||||||
color: white;
|
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
margin-top: 30rpx;
|
padding: 30rpx;
|
||||||
/* 与组件保持间距 */
|
margin-bottom: 40rpx;
|
||||||
box-shadow: 0 2rpx 8rpx rgba(0, 180, 42, 0.2);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,3 +1,15 @@
|
|||||||
|
## 1.1.0(2025-08-19)
|
||||||
|
- 新增 插槽 selected empty option
|
||||||
|
- 新增 mutiple 属性,支持多选功能
|
||||||
|
- 新增 wrap 属性,支持选中的文字超过一行显示
|
||||||
|
- 新增 align 属性,支持修改选中的文字显示的位置
|
||||||
|
- 新增 hideRight 属性,支持隐藏右侧所有按钮
|
||||||
|
- 新增 mode 属性,支持修改边框样式
|
||||||
|
- 新增 事件 open close clear
|
||||||
|
## 1.0.10(2025-04-14)
|
||||||
|
- 修复 清除按钮不展示问题
|
||||||
|
## 1.0.9(2025-03-26)
|
||||||
|
- 优化 默认背景为白色与整体组件保持风格统一
|
||||||
## 1.0.8(2024-03-28)
|
## 1.0.8(2024-03-28)
|
||||||
- 修复 在vue2下:style动态绑定导致编译失败的bug
|
- 修复 在vue2下:style动态绑定导致编译失败的bug
|
||||||
## 1.0.7(2024-01-20)
|
## 1.0.7(2024-01-20)
|
||||||
|
|||||||
@@ -2,30 +2,59 @@
|
|||||||
<view class="uni-stat__select">
|
<view class="uni-stat__select">
|
||||||
<span v-if="label" class="uni-label-text hide-on-phone">{{label + ':'}}</span>
|
<span v-if="label" class="uni-label-text hide-on-phone">{{label + ':'}}</span>
|
||||||
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
||||||
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
<view class="uni-select" :class="{'uni-select--disabled':disabled, 'uni-select--wrap': shouldWrap , 'border-default': mode == 'default','border-bottom': mode == 'underline'}">
|
||||||
<view class="uni-select__input-box" @click="toggleSelector">
|
<view class="uni-select__input-box" @click="toggleSelector" :class="{'uni-select__input-box--wrap': shouldWrap}">
|
||||||
<view v-if="current" class="uni-select__input-text">{{textShow}}</view>
|
<view v-if="slotSelected" class="slot-content padding-top-bottom" :class="{'uni-select__input-text--wrap': shouldWrap}">
|
||||||
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
<slot name="selected" :selectedItems="getSelectedItems()"></slot>
|
||||||
<view v-if="current && clear && !disabled" @click.stop="clearVal">
|
</view>
|
||||||
|
<template v-else>
|
||||||
|
<view v-if="textShow" class="uni-select__input-text" :class="{'uni-select__input-text--wrap': shouldWrap}">
|
||||||
|
<view class="padding-top-bottom" :class="'align-'+align">{{textShow}}</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="uni-select__input-text uni-select__input-placeholder" :class="'align-'+align">{{typePlaceholder}}</view>
|
||||||
|
</template>
|
||||||
|
<view key="clear-button" v-if="!hideRight && shouldShowClear && clear && !disabled" @click.stop="clearVal">
|
||||||
<uni-icons type="clear" color="#c0c4cc" size="24" />
|
<uni-icons type="clear" color="#c0c4cc" size="24" />
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view key="arrow-button" v-else-if="!hideRight">
|
||||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
||||||
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
|
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
|
||||||
<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
|
<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
|
||||||
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
||||||
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
<template v-if="slotEmpty && mixinDatacomResData.length === 0">
|
||||||
<text>{{emptyTips}}</text>
|
<view class="uni-select__selector-empty">
|
||||||
</view>
|
<slot name="empty" :empty="emptyTips"></slot>
|
||||||
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
</view>
|
||||||
@click="change(item)">
|
</template>
|
||||||
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
<template v-else>
|
||||||
</view>
|
<view v-if="mixinDatacomResData.length === 0" class="uni-select__selector-empty">
|
||||||
</scroll-view>
|
<text>{{emptyTips}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-if="slotOption">
|
||||||
|
<view v-for="(itemData,index) in mixinDatacomResData" :key="index" @click="change(itemData)">
|
||||||
|
<slot name="option" :item="itemData" :itemSelected="multiple? getCurrentValues().includes(itemData.value):getCurrentValues() == itemData.value"></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<view v-if="!multiple && mixinDatacomResData.length > 0" class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||||
|
@click="change(item)">
|
||||||
|
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="multiple && mixinDatacomResData.length > 0" >
|
||||||
|
<checkbox-group @change="checkBoxChange">
|
||||||
|
<label class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" >
|
||||||
|
<checkbox :value="index+''" :checked="getCurrentValues().includes(item.value)" :disabled="item.disable"></checkbox>
|
||||||
|
<view :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</view>
|
||||||
|
</label>
|
||||||
|
</checkbox-group>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -36,22 +65,56 @@
|
|||||||
* DataChecklist 数据选择器
|
* DataChecklist 数据选择器
|
||||||
* @description 通过数据渲染的下拉框组件
|
* @description 通过数据渲染的下拉框组件
|
||||||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
||||||
* @property {String} value 默认值
|
* @property {String|Array} value 默认值,多选时为数组
|
||||||
* @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}]
|
* @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}]
|
||||||
* @property {Boolean} clear 是否可以清空已选项
|
* @property {Boolean} clear 是否可以清空已选项
|
||||||
* @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效
|
* @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效
|
||||||
* @property {String} label 左侧标题
|
* @property {String} label 左侧标题
|
||||||
* @property {String} placeholder 输入框的提示文字
|
* @property {String} placeholder 输入框的提示文字
|
||||||
* @property {Boolean} disabled 是否禁用
|
* @property {Boolean} disabled 是否禁用
|
||||||
|
* @property {Boolean} multiple 是否多选模式
|
||||||
|
* @property {Boolean} wrap 是否允许选中文本换行显示
|
||||||
* @property {String} placement 弹出位置
|
* @property {String} placement 弹出位置
|
||||||
* @value top 顶部弹出
|
* @value top 顶部弹出
|
||||||
* @value bottom 底部弹出(default)
|
* @value bottom 底部弹出(default)
|
||||||
|
* @property {String} align 选择文字的位置
|
||||||
|
* @value left 显示左侧
|
||||||
|
* @value center 显示中间
|
||||||
|
* @value right 显示 右侧
|
||||||
|
* @property {Boolean} hideRight 是否隐藏右侧按钮
|
||||||
|
* @property {String} mode 边框样式
|
||||||
|
* @value default 四周边框
|
||||||
|
* @value underline 下边框
|
||||||
|
* @value none 无边框
|
||||||
* @event {Function} change 选中发生变化触发
|
* @event {Function} change 选中发生变化触发
|
||||||
|
* @event {Function} open 选择框开启时触发
|
||||||
|
* @event {Function} close 选择框关闭时触发
|
||||||
|
* @event {Function} clear 点击清除按钮之后触发
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "uni-data-select",
|
name: "uni-data-select",
|
||||||
mixins: [uniCloud.mixinDatacom || {}],
|
mixins: [uniCloud.mixinDatacom || {}],
|
||||||
|
emits: [
|
||||||
|
'open',
|
||||||
|
'close',
|
||||||
|
'update:modelValue',
|
||||||
|
'input',
|
||||||
|
'clear',
|
||||||
|
'change'
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
prop: 'modelValue',
|
||||||
|
event: 'update:modelValue'
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
virtualHost: false,
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-TOUTIAO
|
||||||
|
virtualHost: true
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
localdata: {
|
localdata: {
|
||||||
type: Array,
|
type: Array,
|
||||||
@@ -60,11 +123,11 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
value: {
|
value: {
|
||||||
type: [String, Number],
|
type: [String, Number, Array],
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
modelValue: {
|
modelValue: {
|
||||||
type: [String, Number],
|
type: [String, Number, Array],
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
@@ -99,7 +162,27 @@
|
|||||||
placement: {
|
placement: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'bottom'
|
default: 'bottom'
|
||||||
}
|
},
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
wrap: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
align:{
|
||||||
|
type: String,
|
||||||
|
default: "left"
|
||||||
|
},
|
||||||
|
hideRight: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
mode:{
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -133,20 +216,35 @@
|
|||||||
common
|
common
|
||||||
},
|
},
|
||||||
valueCom() {
|
valueCom() {
|
||||||
// #ifdef VUE3
|
if (this.value === '') return this.modelValue
|
||||||
return this.modelValue;
|
if (this.modelValue === '') return this.value
|
||||||
// #endif
|
return this.value
|
||||||
// #ifndef VUE3
|
|
||||||
return this.value;
|
|
||||||
// #endif
|
|
||||||
},
|
},
|
||||||
textShow() {
|
textShow() {
|
||||||
// 长文本显示
|
// 长文本显示
|
||||||
let text = this.current;
|
if (this.multiple) {
|
||||||
if (text.length > 10) {
|
const currentValues = this.getCurrentValues();
|
||||||
return text.slice(0, 25) + '...';
|
if (Array.isArray(currentValues) && currentValues.length > 0) {
|
||||||
|
const selectedItems = this.mixinDatacomResData.filter(item => currentValues.includes(item.value));
|
||||||
|
return selectedItems.map(item => this.formatItemName(item)).join(', ');
|
||||||
|
} else {
|
||||||
|
return ''; // 空数组时返回空字符串,显示占位符
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return this.current;
|
||||||
}
|
}
|
||||||
return text;
|
},
|
||||||
|
shouldShowClear() {
|
||||||
|
if (this.multiple) {
|
||||||
|
const currentValues = this.getCurrentValues();
|
||||||
|
return Array.isArray(currentValues) && currentValues.length > 0;
|
||||||
|
} else {
|
||||||
|
return !!this.current;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
shouldWrap() {
|
||||||
|
// 只有在多选模式、开启换行、且有内容时才应用换行样式
|
||||||
|
return this.multiple && this.wrap && !!this.textShow;
|
||||||
},
|
},
|
||||||
getOffsetByPlacement() {
|
getOffsetByPlacement() {
|
||||||
switch (this.placement) {
|
switch (this.placement) {
|
||||||
@@ -155,10 +253,38 @@
|
|||||||
case 'bottom':
|
case 'bottom':
|
||||||
return "top:calc(100% + 12px);";
|
return "top:calc(100% + 12px);";
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
slotSelected(){
|
||||||
|
// #ifdef VUE2
|
||||||
|
return this.$scopedSlots ? this.$scopedSlots.selected : false
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
return this.$slots ? this.$slots.selected : false
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
slotEmpty(){
|
||||||
|
// #ifdef VUE2
|
||||||
|
return this.$scopedSlots ? this.$scopedSlots.empty : false
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
return this.$slots ? this.$slots.empty : false
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
slotOption(){
|
||||||
|
// #ifdef VUE2
|
||||||
|
return this.$scopedSlots ? this.$scopedSlots.option : false
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
return this.$slots ? this.$slots.option : false
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
|
showSelector:{
|
||||||
|
handler(val,old){
|
||||||
|
val ? this.$emit('open') : this.$emit('close')
|
||||||
|
}
|
||||||
|
},
|
||||||
localdata: {
|
localdata: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(val, old) {
|
handler(val, old) {
|
||||||
@@ -178,9 +304,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getSelectedItems() {
|
||||||
|
const currentValues = this.getCurrentValues();
|
||||||
|
let _minxData = this.mixinDatacomResData
|
||||||
|
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||||
|
_minxData = JSON.parse(JSON.stringify(this.mixinDatacomResData))
|
||||||
|
// #endif
|
||||||
|
if (this.multiple) {
|
||||||
|
return _minxData.filter(item => currentValues.includes(item.value)) || [];
|
||||||
|
} else {
|
||||||
|
return _minxData.filter(item => item.value === currentValues) || [];
|
||||||
|
}
|
||||||
|
},
|
||||||
debounce(fn, time = 100) {
|
debounce(fn, time = 100) {
|
||||||
let timer = null
|
let timer = null
|
||||||
return function(...args) {
|
return function(...args) {
|
||||||
@@ -190,6 +327,23 @@
|
|||||||
}, time)
|
}, time)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 检查项目是否已选中
|
||||||
|
isSelected(item) {
|
||||||
|
if (this.multiple) {
|
||||||
|
const currentValues = this.getCurrentValues();
|
||||||
|
return Array.isArray(currentValues) && currentValues.includes(item.value);
|
||||||
|
} else {
|
||||||
|
return this.getCurrentValues() === item.value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取当前选中的值
|
||||||
|
getCurrentValues() {
|
||||||
|
if (this.multiple) {
|
||||||
|
return Array.isArray(this.valueCom) ? this.valueCom : (this.valueCom ? [this.valueCom] : []);
|
||||||
|
} else {
|
||||||
|
return this.valueCom;
|
||||||
|
}
|
||||||
|
},
|
||||||
// 执行数据库查询
|
// 执行数据库查询
|
||||||
query() {
|
query() {
|
||||||
this.mixinDatacomEasyGet();
|
this.mixinDatacomEasyGet();
|
||||||
@@ -201,7 +355,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
initDefVal() {
|
initDefVal() {
|
||||||
let defValue = ''
|
let defValue = this.multiple ? [] : ''
|
||||||
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
||||||
defValue = this.valueCom
|
defValue = this.valueCom
|
||||||
} else {
|
} else {
|
||||||
@@ -212,47 +366,105 @@
|
|||||||
if (strogeValue || strogeValue === 0) {
|
if (strogeValue || strogeValue === 0) {
|
||||||
defValue = strogeValue
|
defValue = strogeValue
|
||||||
} else {
|
} else {
|
||||||
let defItem = ''
|
let defItem = this.multiple ? [] : ''
|
||||||
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
||||||
defItem = this.mixinDatacomResData[this.defItem - 1].value
|
defItem = this.multiple ? [this.mixinDatacomResData[this.defItem - 1].value] : this.mixinDatacomResData[this.defItem - 1].value
|
||||||
}
|
}
|
||||||
defValue = defItem
|
defValue = defItem
|
||||||
}
|
}
|
||||||
if (defValue || defValue === 0) {
|
if (defValue || defValue === 0 || (this.multiple && Array.isArray(defValue) && defValue.length > 0)) {
|
||||||
this.emit(defValue)
|
this.emit(defValue)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
|
||||||
this.current = def ? this.formatItemName(def) : ''
|
if (this.multiple) {
|
||||||
|
const selectedValues = Array.isArray(defValue) ? defValue : (defValue ? [defValue] : []);
|
||||||
|
const selectedItems = this.mixinDatacomResData.filter(item => selectedValues.includes(item.value));
|
||||||
|
this.current = selectedItems.map(item => this.formatItemName(item));
|
||||||
|
} else {
|
||||||
|
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||||
|
this.current = def ? this.formatItemName(def) : ''
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {[String, Number]} value
|
* @param {[String, Number, Array]} value
|
||||||
* 判断用户给的 value 是否同时为禁用状态
|
* 判断用户给的 value 是否同时为禁用状态
|
||||||
*/
|
*/
|
||||||
isDisabled(value) {
|
isDisabled(value) {
|
||||||
let isDisabled = false;
|
if (Array.isArray(value)) {
|
||||||
|
// 对于数组,如果任意一个值被禁用,则认为整体被禁用
|
||||||
this.mixinDatacomResData.forEach(item => {
|
return value.some(val => {
|
||||||
if (item.value === value) {
|
return this.mixinDatacomResData.some(item => item.value === val && item.disable);
|
||||||
isDisabled = item.disable
|
});
|
||||||
}
|
} else {
|
||||||
})
|
let isDisabled = false;
|
||||||
|
this.mixinDatacomResData.forEach(item => {
|
||||||
return isDisabled;
|
if (item.value === value) {
|
||||||
|
isDisabled = item.disable
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return isDisabled;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
clearVal() {
|
clearVal() {
|
||||||
this.emit('')
|
const emptyValue = this.multiple ? [] : '';
|
||||||
|
this.emit(emptyValue)
|
||||||
|
this.current = this.multiple ? [] : ''
|
||||||
if (this.collection) {
|
if (this.collection) {
|
||||||
this.removeCache()
|
this.removeCache()
|
||||||
}
|
}
|
||||||
|
this.$emit('clear')
|
||||||
|
},
|
||||||
|
checkBoxChange(res){
|
||||||
|
let range = res.detail.value
|
||||||
|
|
||||||
|
let currentValues = range && range.length > 0? range.map((item)=>{
|
||||||
|
const index = parseInt(item, 10);
|
||||||
|
|
||||||
|
if (isNaN(index)) {
|
||||||
|
console.error(`无效索引: ${item}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index < 0 || index >= this.mixinDatacomResData.length) {
|
||||||
|
console.error(`索引越界: ${index}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.mixinDatacomResData[index].value;
|
||||||
|
}) : []
|
||||||
|
const selectedItems = this.mixinDatacomResData.filter(dataItem => currentValues.includes(dataItem.value));
|
||||||
|
this.current = selectedItems.map(dataItem => this.formatItemName(dataItem));
|
||||||
|
|
||||||
|
this.emit(currentValues);
|
||||||
},
|
},
|
||||||
change(item) {
|
change(item) {
|
||||||
if (!item.disable) {
|
if (!item.disable) {
|
||||||
this.showSelector = false
|
if (this.multiple) {
|
||||||
this.current = this.formatItemName(item)
|
// 多选模式
|
||||||
this.emit(item.value)
|
let currentValues = this.getCurrentValues();
|
||||||
|
if (!Array.isArray(currentValues)) {
|
||||||
|
currentValues = currentValues ? [currentValues] : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemValue = item.value;
|
||||||
|
const index = currentValues.indexOf(itemValue);
|
||||||
|
|
||||||
|
if (index > -1) {
|
||||||
|
currentValues.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
currentValues.push(itemValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedItems = this.mixinDatacomResData.filter(dataItem => currentValues.includes(dataItem.value));
|
||||||
|
this.current = selectedItems.map(dataItem => this.formatItemName(dataItem));
|
||||||
|
|
||||||
|
this.emit(currentValues);
|
||||||
|
} else {
|
||||||
|
// 单选模式
|
||||||
|
this.showSelector = false
|
||||||
|
this.current = this.formatItemName(item)
|
||||||
|
this.emit(item.value)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
emit(val) {
|
emit(val) {
|
||||||
@@ -330,6 +542,11 @@
|
|||||||
$uni-main-color: #333 !default;
|
$uni-main-color: #333 !default;
|
||||||
$uni-secondary-color: #909399 !default;
|
$uni-secondary-color: #909399 !default;
|
||||||
$uni-border-3: #e5e5e5;
|
$uni-border-3: #e5e5e5;
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$uni-success: #4cd964 !default;
|
||||||
|
$uni-warning: #f0ad4e !default;
|
||||||
|
$uni-error: #dd524d !default;
|
||||||
|
$uni-info: #909399 !default;
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 500px) {
|
||||||
@@ -352,6 +569,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uni-stat-box {
|
.uni-stat-box {
|
||||||
|
background-color: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
@@ -370,9 +588,16 @@
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-bottom {
|
||||||
|
border-bottom: solid 1px $uni-border-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-default {
|
||||||
|
border: 1px solid $uni-border-3;
|
||||||
|
}
|
||||||
|
|
||||||
.uni-select {
|
.uni-select {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 1px solid $uni-border-3;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
@@ -384,15 +609,20 @@
|
|||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: solid 1px $uni-border-3;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 35px;
|
min-height: 35px;
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
background-color: #f5f7fa;
|
background-color: #f5f7fa;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--wrap {
|
||||||
|
height: auto;
|
||||||
|
min-height: 35px;
|
||||||
|
// align-items: flex-start;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-select__label {
|
.uni-select__label {
|
||||||
@@ -404,7 +634,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uni-select__input-box {
|
.uni-select__input-box {
|
||||||
height: 35px;
|
// height: 35px;
|
||||||
|
width: 0px;
|
||||||
position: relative;
|
position: relative;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -412,6 +643,24 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
&--wrap {
|
||||||
|
.uni-select__input-text {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.padding-top-bottom {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-content {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-select__input {
|
.uni-select__input {
|
||||||
@@ -463,15 +712,18 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: center;
|
|
||||||
/* border-bottom: solid 1px $uni-border-3; */
|
/* border-bottom: solid 1px $uni-border-3; */
|
||||||
padding: 0px 10px;
|
padding: 0px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-select__selector-item:hover {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
|
.uni-select__selector-item-check {
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-select__selector-empty:last-child,
|
.uni-select__selector-empty:last-child,
|
||||||
@@ -490,15 +742,14 @@
|
|||||||
.uni-popper__arrow_bottom,
|
.uni-popper__arrow_bottom,
|
||||||
.uni-popper__arrow_bottom::after,
|
.uni-popper__arrow_bottom::after,
|
||||||
.uni-popper__arrow_top,
|
.uni-popper__arrow_top,
|
||||||
.uni-popper__arrow_top::after,
|
.uni-popper__arrow_top::after {
|
||||||
{
|
position: absolute;
|
||||||
position: absolute;
|
display: block;
|
||||||
display: block;
|
width: 0;
|
||||||
width: 0;
|
height: 0;
|
||||||
height: 0;
|
border-color: transparent;
|
||||||
border-color: transparent;
|
border-style: solid;
|
||||||
border-style: solid;
|
border-width: 6px;
|
||||||
border-width: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-popper__arrow_bottom {
|
.uni-popper__arrow_bottom {
|
||||||
@@ -544,11 +795,22 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-o-text-overflow: ellipsis;
|
-o-text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
&--wrap {
|
||||||
|
white-space: normal;
|
||||||
|
text-overflow: initial;
|
||||||
|
-o-text-overflow: initial;
|
||||||
|
overflow: visible;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-all;
|
||||||
|
// line-height: 1.5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-select__input-placeholder {
|
.uni-select__input-placeholder {
|
||||||
color: $uni-base-color;
|
color: $uni-base-color;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
margin: 1px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-select--mask {
|
.uni-select--mask {
|
||||||
@@ -559,4 +821,17 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.align-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "uni-data-select",
|
"id": "uni-data-select",
|
||||||
"displayName": "uni-data-select 下拉框选择器",
|
"displayName": "uni-data-select 下拉框选择器",
|
||||||
"version": "1.0.8",
|
"version": "1.1.0",
|
||||||
"description": "通过数据驱动的下拉框选择器",
|
"description": "通过数据驱动的下拉框选择器",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"uni-ui",
|
"uni-ui",
|
||||||
@@ -12,12 +12,14 @@
|
|||||||
],
|
],
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
"engines": {
|
"engines": {
|
||||||
"HBuilderX": "^3.1.1"
|
"HBuilderX": "^3.1.1",
|
||||||
|
"uni-app": "^4.45",
|
||||||
|
"uni-app-x": ""
|
||||||
},
|
},
|
||||||
"directories": {
|
"directories": {
|
||||||
"example": "../../temps/example_temps"
|
"example": "../../temps/example_temps"
|
||||||
},
|
},
|
||||||
"dcloudext": {
|
"dcloudext": {
|
||||||
"sale": {
|
"sale": {
|
||||||
"regular": {
|
"regular": {
|
||||||
"price": "0.00"
|
"price": "0.00"
|
||||||
@@ -35,50 +37,68 @@
|
|||||||
"permissions": "无"
|
"permissions": "无"
|
||||||
},
|
},
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
"type": "component-vue"
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
},
|
},
|
||||||
"uni_modules": {
|
"uni_modules": {
|
||||||
"dependencies": ["uni-load-more"],
|
"dependencies": [
|
||||||
|
"uni-load-more"
|
||||||
|
],
|
||||||
"encrypt": [],
|
"encrypt": [],
|
||||||
"platforms": {
|
"platforms": {
|
||||||
"cloud": {
|
"cloud": {
|
||||||
"tcb": "y",
|
"tcb": "√",
|
||||||
"aliyun": "y",
|
"aliyun": "√",
|
||||||
"alipay": "n"
|
"alipay": "√"
|
||||||
},
|
},
|
||||||
"client": {
|
"client": {
|
||||||
"App": {
|
"uni-app": {
|
||||||
"app-vue": "u",
|
"vue": {
|
||||||
"app-nvue": "n"
|
"vue2": "√",
|
||||||
|
"vue3": "√"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "√",
|
||||||
|
"nvue": "-",
|
||||||
|
"android": "√",
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√",
|
||||||
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "-",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "-",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "-",
|
||||||
|
"union": "-"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"H5-mobile": {
|
"uni-app-x": {
|
||||||
"Safari": "y",
|
"web": {
|
||||||
"Android Browser": "y",
|
"safari": "-",
|
||||||
"微信浏览器(Android)": "y",
|
"chrome": "-"
|
||||||
"QQ浏览器(Android)": "y"
|
},
|
||||||
},
|
"app": {
|
||||||
"H5-pc": {
|
"android": "-",
|
||||||
"Chrome": "y",
|
"ios": "-",
|
||||||
"IE": "y",
|
"harmony": "-"
|
||||||
"Edge": "y",
|
},
|
||||||
"Firefox": "y",
|
"mp": {
|
||||||
"Safari": "y"
|
"weixin": "-"
|
||||||
},
|
}
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "u",
|
|
||||||
"百度": "u",
|
|
||||||
"字节跳动": "u",
|
|
||||||
"QQ": "u",
|
|
||||||
"京东": "u"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "u",
|
|
||||||
"联盟": "u"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
## 2.0.10(2024-06-07)
|
## 2.0.12(2025-08-26)
|
||||||
- 优化 uni-app x 中,size 属性的类型
|
- 优化 uni-app x 下 size 类型问题
|
||||||
|
## 2.0.11(2025-08-18)
|
||||||
|
- 修复 图标点击事件返回
|
||||||
## 2.0.9(2024-01-12)
|
## 2.0.9(2024-01-12)
|
||||||
fix: 修复图标大小默认值错误的问题
|
fix: 修复图标大小默认值错误的问题
|
||||||
## 2.0.8(2023-12-14)
|
## 2.0.8(2023-12-14)
|
||||||
|
|||||||
@@ -1,91 +1,91 @@
|
|||||||
<template>
|
<template>
|
||||||
<text class="uni-icons" :style="styleObj">
|
<text class="uni-icons" :style="styleObj">
|
||||||
<slot>{{unicode}}</slot>
|
<slot>{{unicode}}</slot>
|
||||||
</text>
|
</text>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { fontData, IconsDataItem } from './uniicons_file'
|
import { fontData, IconsDataItem } from './uniicons_file'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Icons 图标
|
* Icons 图标
|
||||||
* @description 用于展示 icon 图标
|
* @description 用于展示 icon 图标
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||||
* @property {Number,String} size 图标大小
|
* @property {Number} size 图标大小
|
||||||
* @property {String} type 图标图案,参考示例
|
* @property {String} type 图标图案,参考示例
|
||||||
* @property {String} color 图标颜色
|
* @property {String} color 图标颜色
|
||||||
* @property {String} customPrefix 自定义图标
|
* @property {String} customPrefix 自定义图标
|
||||||
* @event {Function} click 点击 Icon 触发事件
|
* @event {Function} click 点击 Icon 触发事件
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: "uni-icons",
|
name: "uni-icons",
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#333333'
|
default: '#333333'
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 16
|
default: 16
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
unicode() : string {
|
unicode() : string {
|
||||||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
|
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
|
||||||
if (codes !== null) {
|
if (codes !== null) {
|
||||||
return codes.unicode
|
return codes.unicode
|
||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
},
|
},
|
||||||
iconSize() : string {
|
iconSize() : string {
|
||||||
const size = this.size
|
const size = this.size
|
||||||
if (typeof size == 'string') {
|
if (typeof size == 'string') {
|
||||||
const reg = /^[0-9]*$/g
|
const reg = /^[0-9]*$/g
|
||||||
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
||||||
// return '' + this.size
|
// return '' + this.size
|
||||||
}
|
}
|
||||||
return this.getFontSize(size as number)
|
return this.getFontSize(size as number)
|
||||||
},
|
},
|
||||||
styleObj() : UTSJSONObject {
|
styleObj() : UTSJSONObject {
|
||||||
if (this.fontFamily !== '') {
|
if (this.fontFamily !== '') {
|
||||||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
|
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
|
||||||
}
|
}
|
||||||
return { color: this.color, fontSize: this.iconSize }
|
return { color: this.color, fontSize: this.iconSize }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() { },
|
created() { },
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* 字体大小
|
* 字体大小
|
||||||
*/
|
*/
|
||||||
getFontSize(size : number) : string {
|
getFontSize(size : number) : string {
|
||||||
return size + 'px';
|
return size + 'px';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: UniIconsFontFamily;
|
font-family: UniIconsFontFamily;
|
||||||
src: url('./uniicons.ttf');
|
src: url('./uniicons.ttf');
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-icons {
|
.uni-icons {
|
||||||
font-family: UniIconsFontFamily;
|
font-family: UniIconsFontFamily;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -85,8 +85,8 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
_onClick() {
|
_onClick(e) {
|
||||||
this.$emit('click')
|
this.$emit('click', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "uni-icons",
|
"id": "uni-icons",
|
||||||
"displayName": "uni-icons 图标",
|
"displayName": "uni-icons 图标",
|
||||||
"version": "2.0.10",
|
"version": "2.0.12",
|
||||||
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
|
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"uni-ui",
|
"uni-ui",
|
||||||
@@ -11,12 +11,14 @@
|
|||||||
],
|
],
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
"engines": {
|
"engines": {
|
||||||
"HBuilderX": "^3.2.14"
|
"HBuilderX": "^3.2.14",
|
||||||
|
"uni-app": "^4.08",
|
||||||
|
"uni-app-x": "^4.61"
|
||||||
},
|
},
|
||||||
"directories": {
|
"directories": {
|
||||||
"example": "../../temps/example_temps"
|
"example": "../../temps/example_temps"
|
||||||
},
|
},
|
||||||
"dcloudext": {
|
"dcloudext": {
|
||||||
"sale": {
|
"sale": {
|
||||||
"regular": {
|
"regular": {
|
||||||
"price": "0.00"
|
"price": "0.00"
|
||||||
@@ -34,54 +36,74 @@
|
|||||||
"permissions": "无"
|
"permissions": "无"
|
||||||
},
|
},
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
"type": "component-vue"
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
},
|
},
|
||||||
"uni_modules": {
|
"uni_modules": {
|
||||||
"dependencies": ["uni-scss"],
|
"dependencies": [
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
"encrypt": [],
|
"encrypt": [],
|
||||||
"platforms": {
|
"platforms": {
|
||||||
"cloud": {
|
"cloud": {
|
||||||
"tcb": "y",
|
"tcb": "x",
|
||||||
"aliyun": "y",
|
"aliyun": "x",
|
||||||
"alipay": "n"
|
"alipay": "x"
|
||||||
},
|
},
|
||||||
"client": {
|
"client": {
|
||||||
"App": {
|
"uni-app": {
|
||||||
"app-vue": "y",
|
"vue": {
|
||||||
"app-nvue": "y",
|
"vue2": "√",
|
||||||
"app-uvue": "y"
|
"vue3": "√"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "√",
|
||||||
|
"nvue": "-",
|
||||||
|
"android": {
|
||||||
|
"extVersion": "",
|
||||||
|
"minVersion": "29"
|
||||||
|
},
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√",
|
||||||
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "√",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "√",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "√",
|
||||||
|
"union": "√"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"H5-mobile": {
|
"uni-app-x": {
|
||||||
"Safari": "y",
|
"web": {
|
||||||
"Android Browser": "y",
|
"safari": "√",
|
||||||
"微信浏览器(Android)": "y",
|
"chrome": "√"
|
||||||
"QQ浏览器(Android)": "y"
|
},
|
||||||
},
|
"app": {
|
||||||
"H5-pc": {
|
"android": {
|
||||||
"Chrome": "y",
|
"extVersion": "",
|
||||||
"IE": "y",
|
"minVersion": "29"
|
||||||
"Edge": "y",
|
},
|
||||||
"Firefox": "y",
|
"ios": "√",
|
||||||
"Safari": "y"
|
"harmony": "√"
|
||||||
},
|
},
|
||||||
"小程序": {
|
"mp": {
|
||||||
"微信": "y",
|
"weixin": "√"
|
||||||
"阿里": "y",
|
}
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y",
|
|
||||||
"钉钉": "y",
|
|
||||||
"快手": "y",
|
|
||||||
"飞书": "y",
|
|
||||||
"京东": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "y",
|
|
||||||
"联盟": "y"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
|
## 1.3.7(2025-08-20)
|
||||||
|
- 修复 微信小程序css警告问题
|
||||||
## 1.3.6(2024-10-15)
|
## 1.3.6(2024-10-15)
|
||||||
- 修复 微信小程序中的getSystemInfo警告
|
- 修复 微信小程序中的getSystemInfo警告
|
||||||
## 1.3.5(2024-10-12)
|
|
||||||
- 修复 微信小程序中的getSystemInfo警告
|
|
||||||
## 1.3.4(2024-10-12)
|
|
||||||
- 修复 微信小程序中的getSystemInfo警告
|
|
||||||
## 1.3.3(2022-01-20)
|
## 1.3.3(2022-01-20)
|
||||||
- 新增 showText属性 ,是否显示文本
|
- 新增 showText属性 ,是否显示文本
|
||||||
## 1.3.2(2022-01-19)
|
## 1.3.2(2022-01-19)
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
<!-- #ifndef APP-NVUE -->
|
<!-- #ifndef APP-NVUE -->
|
||||||
<view v-else-if="!webviewHide && status === 'loading' && showIcon"
|
<view v-else-if="!webviewHide && status === 'loading' && showIcon"
|
||||||
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
|
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
|
||||||
<image :src="imgBase64" mode="widthFix"></image>
|
<image class="image" :src="imgBase64" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<text v-if="showText" class="uni-load-more__text"
|
<text v-if="showText" class="uni-load-more__text"
|
||||||
@@ -210,7 +210,7 @@
|
|||||||
animation: loading-ios-H5 1s 0s step-end infinite;
|
animation: loading-ios-H5 1s 0s step-end infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-load-more__img--ios-H5 image {
|
.uni-load-more__img--ios-H5 .image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "uni-load-more",
|
"id": "uni-load-more",
|
||||||
"displayName": "uni-load-more 加载更多",
|
"displayName": "uni-load-more 加载更多",
|
||||||
"version": "1.3.6",
|
"version": "1.3.7",
|
||||||
"description": "LoadMore 组件,常用在列表里面,做滚动加载使用。",
|
"description": "LoadMore 组件,常用在列表里面,做滚动加载使用。",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"uni-ui",
|
"uni-ui",
|
||||||
@@ -11,12 +11,14 @@
|
|||||||
],
|
],
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
"engines": {
|
"engines": {
|
||||||
"HBuilderX": ""
|
"HBuilderX": "",
|
||||||
|
"uni-app": "^4.07",
|
||||||
|
"uni-app-x": ""
|
||||||
},
|
},
|
||||||
"directories": {
|
"directories": {
|
||||||
"example": "../../temps/example_temps"
|
"example": "../../temps/example_temps"
|
||||||
},
|
},
|
||||||
"dcloudext": {
|
"dcloudext": {
|
||||||
"sale": {
|
"sale": {
|
||||||
"regular": {
|
"regular": {
|
||||||
"price": "0.00"
|
"price": "0.00"
|
||||||
@@ -34,49 +36,68 @@
|
|||||||
"permissions": "无"
|
"permissions": "无"
|
||||||
},
|
},
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
"type": "component-vue"
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
},
|
},
|
||||||
"uni_modules": {
|
"uni_modules": {
|
||||||
"dependencies": ["uni-scss"],
|
"dependencies": [
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
"encrypt": [],
|
"encrypt": [],
|
||||||
"platforms": {
|
"platforms": {
|
||||||
"cloud": {
|
"cloud": {
|
||||||
"tcb": "y",
|
"tcb": "x",
|
||||||
"aliyun": "y",
|
"aliyun": "x",
|
||||||
"alipay": "n"
|
"alipay": "x"
|
||||||
},
|
},
|
||||||
"client": {
|
"client": {
|
||||||
"App": {
|
"uni-app": {
|
||||||
"app-vue": "y",
|
"vue": {
|
||||||
"app-nvue": "y"
|
"vue2": "√",
|
||||||
|
"vue3": "√"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "√",
|
||||||
|
"nvue": "-",
|
||||||
|
"android": "√",
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√",
|
||||||
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "√",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "√",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "√",
|
||||||
|
"union": "√"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"H5-mobile": {
|
"uni-app-x": {
|
||||||
"Safari": "y",
|
"web": {
|
||||||
"Android Browser": "y",
|
"safari": "-",
|
||||||
"微信浏览器(Android)": "y",
|
"chrome": "-"
|
||||||
"QQ浏览器(Android)": "y"
|
},
|
||||||
},
|
"app": {
|
||||||
"H5-pc": {
|
"android": "-",
|
||||||
"Chrome": "y",
|
"ios": "-",
|
||||||
"IE": "y",
|
"harmony": "-"
|
||||||
"Edge": "y",
|
},
|
||||||
"Firefox": "y",
|
"mp": {
|
||||||
"Safari": "y"
|
"weixin": "-"
|
||||||
},
|
}
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "y",
|
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "u",
|
|
||||||
"联盟": "u"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -177,44 +177,6 @@ export default {
|
|||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.business-module-icon i {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-blue {
|
|
||||||
background: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-green {
|
|
||||||
background: #22c55e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-yellow {
|
|
||||||
background: #eab308;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-purple {
|
|
||||||
background: #a855f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-red {
|
|
||||||
background: #ef4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-indigo {
|
|
||||||
background: #6366f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-teal {
|
|
||||||
background: #14b8a6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.business-module-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #303133;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitor-panel {
|
.monitor-panel {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
|||||||
Reference in New Issue
Block a user