29 changed files with 2633 additions and 3989 deletions
File diff suppressed because it is too large
@ -0,0 +1,53 @@ |
|||||
|
<template> |
||||
|
<view class=""> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
planeName:"测试" |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
onLoad() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
onReady() { |
||||
|
|
||||
|
}, |
||||
|
onBackPress(options) { |
||||
|
if (options.from === 'navigateBack') { |
||||
|
// uni.navigateBack({ |
||||
|
// delta: 1 |
||||
|
// }) |
||||
|
uni.navigateBack({ |
||||
|
delta:1, |
||||
|
success: () => { |
||||
|
uni.$emit('getPlanNumber',{ |
||||
|
planeName:planeName |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -1,8 +1,352 @@ |
|||||
<template> |
<template> |
||||
|
<view class="page-wraper"> |
||||
|
<view class="page-header flex" |
||||
|
style="font-size: 32rpx; padding-left: 10rpx; padding-top: 10rpx; flex-direction: column;"> |
||||
|
<!-- <view class="flex u-col-center space-between"> |
||||
|
<view class="" style="font-size: 35rpx;"> |
||||
|
计划单号 : {{planNumber}} |
||||
|
<text v-if="planName!=''">({{planName}})</text> |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<button type="primary" size="mini" @click="showPlanSelect">选择单号</button> |
||||
|
</view> |
||||
|
</view> --> |
||||
|
<!-- <view class="" style="width: 100%;background-color: gray;height: 2rpx; margin-top: 10rpx;" /> --> |
||||
|
|
||||
|
</view> |
||||
|
<view class="page-main"> |
||||
|
|
||||
|
<scroll-view scroll-y="true" class="page-main-scroll"> |
||||
|
<view style="padding-bottom: 80rpx;width: 100%;"> |
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<!-- <view class="" style="font-size: 35rpx;"> |
||||
|
计划单号 |
||||
|
</view> --> |
||||
|
<uni-section title="计划单号" subTitle="选择计划单号" subTitleFontSize="26rpx" titleFontSize="35rpx" type="line" > |
||||
|
</uni-section> |
||||
|
|
||||
|
<view class="uni-flex space-between"> |
||||
|
<view class="" style="width: 75%; "> |
||||
|
<input class="input" disabled v-model="planNumber" /> |
||||
|
</view> |
||||
|
<view class="uni-flex" style="width: 25%; align-items: center;"> |
||||
|
<button type="primary" size="mini" @click="showPlanSelect">选择单号</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="原料名称" subTitle="输入或者选择原料名称" subTitleFontSize="26rpx" titleFontSize="35rpx" type="line"> |
||||
|
</uni-section> |
||||
|
<view class="uni-flex space-between"> |
||||
|
<view class="" style="width: 75%;"> |
||||
|
<input class="input" v-model="materialName" /> |
||||
|
</view> |
||||
|
<view class="uni-flex" style="width: 25%; align-items: center;"> |
||||
|
<button type="primary" size="mini" @click="showMaterialSelect">选择原料</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="原料投入量" subTitle="输入原料投入量" subTitleFontSize="26rpx" titleFontSize="35rpx" type="line"> |
||||
|
</uni-section> |
||||
|
<view class="uni-flex space-between"> |
||||
|
<view class="" style="width: 50%;"> |
||||
|
<input class="input" v-model="materialQty" type="digit" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<view class="page-footer"> |
||||
|
<view class="uni-flex u-col-center space-between padding_10" |
||||
|
style="background-color:ghostwhite; width: 100%; "> |
||||
|
<view class=""> |
||||
|
<!-- <button class="btn_single_reset" hover-class="btn_single_after" @click="reset">重置</button> --> |
||||
|
</view> |
||||
|
<view class=" uni-flex uni-row"> |
||||
|
<button class="btn_single_commit" hover-class="btn_commit_after" @click="submit">提交</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<winScanNormal ref="scanPopup" title="设备编号" @getResult='getScanResult'></winScanNormal> |
||||
|
|
||||
|
<wz-select-popup ref="selectPopup" title="选择计划单号" @select="select" /> |
||||
|
<wz-select-popup ref="selectPopupMaterial" title="选择原料" @select="selectMaterial" /> |
||||
|
<showModal ref="comMessage"></showModal> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { |
||||
|
simulationReqGetList, |
||||
|
getDataList, |
||||
|
getMaterialList |
||||
|
} from "./mock.js" |
||||
|
import { |
||||
|
getPlaneNumberList, |
||||
|
getMaterialLists, |
||||
|
foamCheckSubmit |
||||
|
} from '@/api/request2.js'; |
||||
|
import showModal from '../../mycomponents/common/showModal.vue' |
||||
|
import winScanNormal from "@/mycomponents/scan/winScanNormal.vue" |
||||
|
import { |
||||
|
getCurrDateTime, |
||||
|
} from "@/common/basic.js" |
||||
|
export default { |
||||
|
components: { |
||||
|
winScanNormal, |
||||
|
showModal |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dateTime: "", |
||||
|
planNumber: "", |
||||
|
materialName:"", |
||||
|
materialCode:"", |
||||
|
materialQty:"", |
||||
|
planName: "", |
||||
|
dataList: [], |
||||
|
userForm: { |
||||
|
names: [], |
||||
|
values: [], |
||||
|
origin: [] |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
onLoad() { |
||||
|
}, |
||||
|
onUnload() { |
||||
|
}, |
||||
|
onReady() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
getScanResult(result) { |
||||
|
|
||||
|
}, |
||||
|
onScroll(event) { |
||||
|
// 处理滚动事件 |
||||
|
console.log(event.detail); |
||||
|
}, |
||||
|
submit() { |
||||
|
if (this.planNumber == "") { |
||||
|
this.showMessage("请选择计划单号") |
||||
|
return |
||||
|
} |
||||
|
if (this.materialName == "") { |
||||
|
this.showMessage("请输入原料名称") |
||||
|
return |
||||
|
} |
||||
|
if (this.materialQty == ""||this.materialQty==0) { |
||||
|
this.showMessage("请输入原料数量") |
||||
|
return |
||||
|
} |
||||
|
uni.showLoading({ |
||||
|
title:"加载中", |
||||
|
mask:true |
||||
|
}) |
||||
|
var param ={ |
||||
|
planNumber:this.planNumber, |
||||
|
materialName:this.materialName, |
||||
|
materialQty:this.materialQty |
||||
|
} |
||||
|
// foamMaterialInputSubmit(param).then(res=>{ |
||||
|
// uni.hideLoading() |
||||
|
// this.showMessage("提交成功") |
||||
|
// this.resetData() |
||||
|
// }).catch(error=>{ |
||||
|
// uni.hideLoading() |
||||
|
// this.showMessage(error) |
||||
|
// }) |
||||
|
}, |
||||
|
showMessage(hint){ |
||||
|
this.$refs.comMessage.showMessage("提示", hint) |
||||
|
}, |
||||
|
resetData() { |
||||
|
this.planNumber =""; |
||||
|
this.materialName="" |
||||
|
this.materialQty=0 |
||||
|
}, |
||||
|
showPlanSelect() { |
||||
|
uni.showLoading({ |
||||
|
title:"加载中", |
||||
|
mask:true |
||||
|
}) |
||||
|
getPlaneNumberList().then(res=>{ |
||||
|
uni.hideLoading() |
||||
|
this.$refs.selectPopup.open({ |
||||
|
mode: 'radio', //radio checkbox 单选、多选 |
||||
|
dataList: getDataList(), //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
// selected: this.userForm.values, //已选中的数据 |
||||
|
// proxyConfig: { //组件内部代理请求数据配置 |
||||
|
// reqFun: this.reqGetList, //请求方法 |
||||
|
// localPaging: false //前端本地分页 |
||||
|
// }, |
||||
|
search: { |
||||
|
type: 'local', //local本地数据搜索 | remote请求接口 |
||||
|
}, |
||||
|
fields: { |
||||
|
label: 'name', |
||||
|
value: 'code' |
||||
|
} |
||||
|
}) |
||||
|
}).catch(error=>{ |
||||
|
uni.hideLoading() |
||||
|
this.showMessage(error) |
||||
|
}) |
||||
|
this.$refs.selectPopup.open({ |
||||
|
mode: 'radio', //radio checkbox 单选、多选 |
||||
|
dataList: getDataList(), //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
// selected: this.userForm.values, //已选中的数据 |
||||
|
// proxyConfig: { //组件内部代理请求数据配置 |
||||
|
// reqFun: this.reqGetList, //请求方法 |
||||
|
// localPaging: false //前端本地分页 |
||||
|
// }, |
||||
|
search: { |
||||
|
type: 'local', //local本地数据搜索 | remote请求接口 |
||||
|
}, |
||||
|
fields: { |
||||
|
label: 'name', |
||||
|
value: 'code' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
select(mode, data) { |
||||
|
this.planNumber = data.code |
||||
|
this.planName = data.name |
||||
|
console.log(mode) |
||||
|
console.log(data) |
||||
|
}, |
||||
|
|
||||
|
showMaterialSelect() { |
||||
|
// getMaterialLists().then(res=>{ |
||||
|
// uni.hideLoading() |
||||
|
// var dataList =getMaterialList(); |
||||
|
// this.$refs.selectPopupMaterial.open({ |
||||
|
// mode: 'radio', //radio checkbox 单选、多选 |
||||
|
// dataList: dataList, //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
// // selected: this.userForm.values, //已选中的数据 |
||||
|
// // proxyConfig: { //组件内部代理请求数据配置 |
||||
|
// // reqFun: this.reqGetList, //请求方法 |
||||
|
// // localPaging: false //前端本地分页 |
||||
|
// // }, |
||||
|
// search: { |
||||
|
// type: 'local', //local本地数据搜索 | remote请求接口 |
||||
|
// }, |
||||
|
// fields: { |
||||
|
// label: 'name', |
||||
|
// value: 'code' |
||||
|
// } |
||||
|
// }) |
||||
|
|
||||
|
// }).catch(error=>{ |
||||
|
// uni.hideLoading() |
||||
|
// this.showMessage(error) |
||||
|
// }) |
||||
|
|
||||
|
this.$refs.selectPopupMaterial.open({ |
||||
|
mode: 'radio', //radio checkbox 单选、多选 |
||||
|
dataList: getMaterialList(), //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
// selected: this.userForm.values, //已选中的数据 |
||||
|
// proxyConfig: { //组件内部代理请求数据配置 |
||||
|
// reqFun: this.reqGetList, //请求方法 |
||||
|
// localPaging: false //前端本地分页 |
||||
|
// }, |
||||
|
search: { |
||||
|
type: 'local', //local本地数据搜索 | remote请求接口 |
||||
|
}, |
||||
|
fields: { |
||||
|
label: 'name', |
||||
|
value: 'code' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
selectMaterial(mode, data){ |
||||
|
this.materialName = data.name |
||||
|
console.log("selectPopupMaterial") |
||||
|
}, |
||||
|
reqGetList(data) { |
||||
|
// var data ={ |
||||
|
// pageIndex:1, |
||||
|
// pageSize:10, |
||||
|
// name:"" |
||||
|
// } |
||||
|
var test = simulationReqGetList({ |
||||
|
pageIndex: data.pageIndex, |
||||
|
pageSize: data.pageSize, |
||||
|
name: data.searchValue |
||||
|
}) |
||||
|
return test; |
||||
|
|
||||
|
}, |
||||
|
openScanPopup() { |
||||
|
this.$refs.scanPopup.openScanPopup(); |
||||
|
}, |
||||
|
|
||||
|
closeScanPopup() { |
||||
|
this.$refs.scanPopup.closeScanPopup(); |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style lang="scss"> |
||||
|
.example { |
||||
|
padding: 15px; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.segmented-control { |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
|
||||
|
.button-group { |
||||
|
margin-top: 15px; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
|
||||
|
.form-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.input { |
||||
|
padding: 10rpx; |
||||
|
height: 65rpx; |
||||
|
text-align: left; |
||||
|
margin: 5rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
outline: none; |
||||
|
border-radius: 10rpx; |
||||
|
border: 1rpx solid lightgrey; |
||||
|
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
const defaultData = { |
||||
|
pageIndex: 1, |
||||
|
pageSize: 20, |
||||
|
name: '' |
||||
|
} |
||||
|
/**模拟后端请求*/ |
||||
|
export const simulationReqGetList = function(data = defaultData) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
let list = [] |
||||
|
if (data.pageIndex > 3) { |
||||
|
return resolve(list) |
||||
|
} |
||||
|
const startIndex = data.pageIndex * data.pageSize - data.pageSize |
||||
|
if(data.name){ |
||||
|
list.push({ |
||||
|
name: `搜索数据`+data.name, |
||||
|
code: `1` |
||||
|
}) |
||||
|
}else { |
||||
|
for (let i = startIndex; i < data.pageIndex * data.pageSize; i++) { |
||||
|
list.push({ |
||||
|
name: `第${i + 1}条数据`, |
||||
|
code: `${i}-${i + 1}` |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
return resolve(list) |
||||
|
}, 1000) |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export const getDataList = function() { |
||||
|
let list = [] |
||||
|
for (let i = 0; i < 75; i++) { |
||||
|
list.push({ |
||||
|
name: `计划单号${i + 1}`, |
||||
|
code: `${i + 1}` |
||||
|
}) |
||||
|
} |
||||
|
return list |
||||
|
} |
||||
|
|
||||
|
export const getMaterialList = function() { |
||||
|
let list = [] |
||||
|
for (let i = 0; i < 50; i++) { |
||||
|
list.push({ |
||||
|
name: `原料${i + 1}`, |
||||
|
code: `${i + 1}` |
||||
|
}) |
||||
|
} |
||||
|
return list |
||||
|
} |
||||
@ -1,154 +0,0 @@ |
|||||
<template> |
|
||||
<view class=""> |
|
||||
<view class="" v-for="(item, index) in formData" :key="index"> |
|
||||
<view class="flex uni-row u-col-center" style=" border-bottom: #9e9e9e;"> |
|
||||
<view class=""> |
|
||||
<text class="colorRed">*</text> |
|
||||
<text class="num" style="font-size: 32rpx;">{{ index + 1 }}.</text> |
|
||||
</view> |
|
||||
<view class="" style="display: flex;flex-direction: column;"> |
|
||||
<view class="content"> |
|
||||
内容 : {{ item.content }} |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="flex uni-row uni-center align-center"> |
|
||||
<input class="input" :placeholder="item.placeholder" v-model="item.name" /> |
|
||||
<view class=""> |
|
||||
<button type="primary" size="mini" @click="select(item)">选择</button> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="methond"> |
|
||||
方法 : {{item.methond}} |
|
||||
</view> |
|
||||
|
|
||||
</view> |
|
||||
<button @click="submit">提交</button> |
|
||||
<button @click="reset">重置</button> |
|
||||
<selectPopup :dataList="dataList" ref="selectPopup" @select="getSelect"></selectPopup> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import selectPopup from "./selectPopup.vue" |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
selectPopup |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
deviceCode: "", |
|
||||
deviceName: "", |
|
||||
dataList: [{ |
|
||||
value: 1, |
|
||||
name: "状态良好", |
|
||||
}, |
|
||||
{ |
|
||||
value: 2, |
|
||||
name: "正在处理", |
|
||||
}, |
|
||||
{ |
|
||||
value: 3, |
|
||||
name: "状态不好或损毁", |
|
||||
}, |
|
||||
{ |
|
||||
value: 4, |
|
||||
name: "停机状态", |
|
||||
} |
|
||||
], |
|
||||
formData: [{ |
|
||||
content: "检查各个管路及接头", |
|
||||
methond: "目视野无液体渗出", |
|
||||
placeholder: "请输入类型1", |
|
||||
name: '', |
|
||||
value:"", |
|
||||
}, |
|
||||
{ |
|
||||
content: "电机检查", |
|
||||
methond: "倾听无异响", |
|
||||
placeholder: "请输入类型2", |
|
||||
name: '', |
|
||||
value:"", |
|
||||
}], |
|
||||
selectItem:{} |
|
||||
|
|
||||
}; |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
select(item) { |
|
||||
this.selectItem=item |
|
||||
this.$refs.selectPopup.showPopup() |
|
||||
}, |
|
||||
getSelect(item) { |
|
||||
this.selectItem.name = item.name |
|
||||
this.selectItem.value = item.value |
|
||||
console.log(item) |
|
||||
}, |
|
||||
submit(){ |
|
||||
var isCheckPass=true |
|
||||
for (var i = 0; i < this.formData.length; i++) { |
|
||||
var item =this.formData[i]; |
|
||||
if(item.name==""){ |
|
||||
uni.showToast({ |
|
||||
title:item.placeholder |
|
||||
}) |
|
||||
break |
|
||||
} |
|
||||
} |
|
||||
if(isCheckPass){ |
|
||||
console.log(this.formData) |
|
||||
}else { |
|
||||
console.log(this.formData) |
|
||||
} |
|
||||
}, |
|
||||
reset(){ |
|
||||
for (var i = 0; i < this.formData.length; i++) { |
|
||||
var item = this.formData[i]; |
|
||||
item.name ="" |
|
||||
item.value ="" |
|
||||
} |
|
||||
console.log(this.formData) |
|
||||
} |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.colorRed { |
|
||||
color: red; |
|
||||
font-size: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
font-size: 35rpx; |
|
||||
} |
|
||||
|
|
||||
.methond { |
|
||||
margin-left: 30rpx; |
|
||||
font-size: 29rpx; |
|
||||
color: #999; |
|
||||
} |
|
||||
|
|
||||
.input { |
|
||||
padding: 10rpx; |
|
||||
height: 100%; |
|
||||
text-align: left; |
|
||||
margin: 10rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
outline: none; |
|
||||
border-radius: 10rpx; |
|
||||
border: 1rpx solid lightgrey; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,8 +1,558 @@ |
|||||
<template> |
<template> |
||||
|
<view class="page-wraper"> |
||||
|
<view class="page-header flex" |
||||
|
style="font-size: 32rpx; padding-left: 10rpx; padding-top: 10rpx; flex-direction: column;"> |
||||
|
<!-- <view class="flex u-col-center space-between"> |
||||
|
<view class="" style="font-size: 35rpx;"> |
||||
|
计划单号 : {{planCode}} |
||||
|
<text v-if="planName!=''">({{planName}})</text> |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<button type="primary" size="mini" @click="showPlanSelect">选择单号</button> |
||||
|
</view> |
||||
|
</view> --> |
||||
|
<!-- <view class="" style="width: 100%;background-color: gray;height: 2rpx; margin-top: 10rpx;" /> --> |
||||
|
|
||||
|
</view> |
||||
|
<view class="page-main"> |
||||
|
<scroll-view scroll-y="true" class="page-main-scroll"> |
||||
|
<view style="padding-bottom: 80rpx;width: 100%;"> |
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="1.生产计划" subTitle="选择生产计划" subTitleFontSize="26rpx" titleFontSize="35rpx" |
||||
|
type="line"> |
||||
|
</uni-section> |
||||
|
<view class="uni-flex space-between"> |
||||
|
<view class="" style="width: 75%;"> |
||||
|
<uni-easyinput disabled trim="all" v-model="planCode"></uni-easyinput> |
||||
|
</view> |
||||
|
<view class="uni-flex" style="width: 25%; align-items: center;"> |
||||
|
<button type="primary" size="mini" @click="showPlanSelect">选择</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="2.料筒号" subTitle="扫描料筒号" subTitleFontSize="26rpx" titleFontSize="35rpx" |
||||
|
type="line"> |
||||
|
</uni-section> |
||||
|
|
||||
|
<view class="uni-flex"> |
||||
|
<uni-easyinput |
||||
|
@clear="bucketClear" |
||||
|
ref="inputBucketCode" class="uni-mt-5" trim="all" v-model="bucketCode" |
||||
|
@confirm="onConfirmBucketCode" ></uni-easyinput> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="3.零件号" subTitle="扫描零件号" subTitleFontSize="26rpx" titleFontSize="35rpx" |
||||
|
type="line"> |
||||
|
</uni-section> |
||||
|
<view class="uni-flex space-between"> |
||||
|
<uni-easyinput |
||||
|
ref="inputItemCode" |
||||
|
@clear="itemClear" |
||||
|
class="uni-mt-5" trim="all" v-model="itemCode" |
||||
|
@confirm="onConfirmItemCode" ></uni-easyinput> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="4.批次号" subTitle="扫描批次号" subTitleFontSize="26rpx" titleFontSize="35rpx" |
||||
|
type="line"> |
||||
|
</uni-section> |
||||
|
<view class="uni-flex space-between"> |
||||
|
<uni-easyinput |
||||
|
class="uni-mt-5" |
||||
|
trim="all" |
||||
|
ref="inputBatchCode" |
||||
|
v-model="batchCode" |
||||
|
@confirm="onConfirmBatchCode"></uni-easyinput> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="5.参考号" subTitle="扫描参考号" subTitleFontSize="26rpx" titleFontSize="35rpx" |
||||
|
type="line"> |
||||
|
</uni-section> |
||||
|
<view class="uni-flex space-between"> |
||||
|
<uni-easyinput |
||||
|
class="uni-mt-5" |
||||
|
trim="all" |
||||
|
ref="inputReferenceCode" |
||||
|
v-model="referenceCode" |
||||
|
@confirm="onConfirmReferenceCode"></uni-easyinput> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="6.供应商编码" subTitle="扫描供应商编码" subTitleFontSize="26rpx" titleFontSize="35rpx" |
||||
|
type="line"> |
||||
|
</uni-section> |
||||
|
<view class="uni-flex space-between"> |
||||
|
<uni-easyinput |
||||
|
class="uni-mt-5" |
||||
|
ref="inputSupplierCode" |
||||
|
trim="all" |
||||
|
v-model="supplierCode" |
||||
|
@confirm="onConfirmSupplierCode"></uni-easyinput> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="uni-flex uni-column " style="margin: 10rpx;"> |
||||
|
<uni-section title="7.重量" subTitle="输入重量" subTitleFontSize="26rpx" titleFontSize="35rpx" |
||||
|
type="line"> |
||||
|
</uni-section> |
||||
|
<view class="uni-flex space-between"> |
||||
|
<uni-easyinput |
||||
|
class="uni-mt-5" |
||||
|
trim="all" |
||||
|
ref="inputWeight" |
||||
|
v-model="weight" |
||||
|
@confirm="onConfirmWeight"></uni-easyinput> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<view class="page-footer"> |
||||
|
<view class="uni-flex u-col-center space-between padding_10" |
||||
|
style="background-color:ghostwhite; width: 100%; "> |
||||
|
<view class=""> |
||||
|
<!-- <button class="btn_single_reset" hover-class="btn_single_after" @click="reset">重置</button> --> |
||||
|
</view> |
||||
|
<view class=" uni-flex uni-row"> |
||||
|
<button class="btn_single_commit" hover-class="btn_commit_after" @click="submit">提交</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<winScanNormal ref="scanPopup" title="设备编号" @getResult='getScanResult'></winScanNormal> |
||||
|
|
||||
|
<wz-select-popup ref="selectPopup" title="选择计划单号" @select="select" /> |
||||
|
<wz-select-popup ref="selectPopupMaterial" title="选择原料" @select="selectMaterial" /> |
||||
|
<showModal ref="comMessage" @confirm="confirm"></showModal> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { |
||||
|
simulationReqGetList, |
||||
|
getDataList, |
||||
|
getMaterialList |
||||
|
} from "../foam/mock.js" |
||||
|
import { |
||||
|
getPlaneNumberList, |
||||
|
getMaterialLists, |
||||
|
foamInputSubmit, |
||||
|
getBucketCode, |
||||
|
getItemCode |
||||
|
} from '@/api/request2.js'; |
||||
|
import showModal from '../../mycomponents/common/showModal.vue' |
||||
|
import winScanNormal from "@/mycomponents/scan/winScanNormal.vue" |
||||
|
import { |
||||
|
getCurrDateTime, |
||||
|
} from "@/common/basic.js" |
||||
|
export default { |
||||
|
components: { |
||||
|
winScanNormal, |
||||
|
showModal |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dateTime: "", |
||||
|
|
||||
|
planName: "", |
||||
|
dataList: [], |
||||
|
userForm: { |
||||
|
names: [], |
||||
|
values: [], |
||||
|
origin: [] |
||||
|
}, |
||||
|
planCode: "", |
||||
|
bucketCheckCode:"", |
||||
|
bucketCode:"", |
||||
|
itemCode:"", |
||||
|
itemCheckCode:"", |
||||
|
batchCode:"", |
||||
|
referenceCode:"", |
||||
|
supplierCode:"", |
||||
|
weight:"", |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
onLoad() {}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
getScanResult(result) { |
||||
|
|
||||
|
}, |
||||
|
onScroll(event) { |
||||
|
// 处理滚动事件 |
||||
|
console.log(event.detail); |
||||
|
}, |
||||
|
itemClear(){ |
||||
|
this.itemCode = "" |
||||
|
this.itemCheckCode = ""; |
||||
|
}, |
||||
|
|
||||
|
bucketClear(){ |
||||
|
this.bucketCode = "" |
||||
|
this.bucketCheckCode = ""; |
||||
|
}, |
||||
|
onConfirmBucketCode(data){ |
||||
|
this.itemCode = "" |
||||
|
this.itemCheckCode ="" |
||||
|
if(data==undefined||data==""){ |
||||
|
this.showMessage("2.料筒号", "输入料筒号") |
||||
|
this.$refs.inputBucketCode.focused = true |
||||
|
return; |
||||
|
} |
||||
|
uni.showLoading({ |
||||
|
title: "加载中", |
||||
|
mask: true |
||||
|
}) |
||||
|
// getBucketCode().then(res=>{ |
||||
|
// uni.hideLoading(); |
||||
|
// this.bucketCheckCode = data; |
||||
|
// }).catch(error=>{ |
||||
|
// uni.hideLoading(); |
||||
|
// this.bucketCode = "" |
||||
|
// this.bucketCheckCode = ""; |
||||
|
// this.showMessage("2.料筒号","料筒号【"+data+"】无效"+error) |
||||
|
// }) |
||||
|
|
||||
|
if(this.checkBucketCode(data)){ |
||||
|
this.bucketCheckCode = data; |
||||
|
this.$refs.inputItemCode.focused = true |
||||
|
}else { |
||||
|
this.bucketCode = "" |
||||
|
this.bucketCheckCode = ""; |
||||
|
this.showMessage("2.料筒号","料筒号【"+data+"】无效") |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
onConfirmItemCode(data){ |
||||
|
if(this.bucketCheckCode==""){ |
||||
|
this.itemCode = "" |
||||
|
this.bucketCheckCode ="" |
||||
|
this.$refs.inputBucketCode.focused = true |
||||
|
this.showMessage("2.料筒号","请先扫描料筒号") |
||||
|
return; |
||||
|
} |
||||
|
if(data==undefined||data==""){ |
||||
|
this.showMessage("3.零件号","输入零件号") |
||||
|
this.$refs.inputItemCode.focused = true |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// getItemCode().then(res=>{ |
||||
|
// uni.hideLoading(); |
||||
|
// this.itemCheckCode = data; |
||||
|
// }).catch(error=>{ |
||||
|
// uni.hideLoading(); |
||||
|
// this.itemCode = "" |
||||
|
// this.itemCheckCode = ""; |
||||
|
// this.showMessage("3.零件号","零件号【"+data+"】无效"+error) |
||||
|
// }) |
||||
|
|
||||
|
if(this.checkItemCode(data)){ |
||||
|
this.itemCode = data |
||||
|
this.itemCheckCode =data |
||||
|
this.$refs.inputBatchCode.focused = true |
||||
|
}else { |
||||
|
this.itemCode = "" |
||||
|
this.itemCheckCode ="" |
||||
|
this.showMessage("3.零件号","零件号【"+data+"】无效") |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
confirm(content){ |
||||
|
if(content.includes("料筒")){ |
||||
|
this.$refs.inputBucketCode.focused = true |
||||
|
}else if(content.includes("零件")){ |
||||
|
this.$refs.inputItemCode.focused = true |
||||
|
}else if(content.includes("批次")){ |
||||
|
this.$refs.inputBatchCode.focused = true |
||||
|
}else if(content.includes("参考")){ |
||||
|
this.$refs.inputReferenceCode.focused = true |
||||
|
}else if(content.includes("供应商")){ |
||||
|
this.$refs.inputSupplierCode.focused = true |
||||
|
}else if(content.includes("重量")){ |
||||
|
this.$refs.inputWeight.focused = true |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
checkBucketCode(code){ |
||||
|
var isCheckPass =false; |
||||
|
if(code=="1"){ |
||||
|
isCheckPass=true |
||||
|
}else { |
||||
|
isCheckPass=false |
||||
|
} |
||||
|
return isCheckPass; |
||||
|
}, |
||||
|
|
||||
|
checkItemCode(code){ |
||||
|
var isCheckPass =false; |
||||
|
if(code=="123"){ |
||||
|
isCheckPass=true |
||||
|
}else { |
||||
|
isCheckPass=false |
||||
|
} |
||||
|
return isCheckPass; |
||||
|
}, |
||||
|
|
||||
|
onConfirmBatchCode(data){ |
||||
|
if(data==undefined||data==""){ |
||||
|
this.showMessage("4.批次","输入批次号位空") |
||||
|
return; |
||||
|
} |
||||
|
this.$refs.inputReferenceCode.focused = true |
||||
|
}, |
||||
|
onConfirmReferenceCode(data){ |
||||
|
if(data==undefined||data==""){ |
||||
|
this.showMessage("4.批次","输入参考号位空") |
||||
|
return; |
||||
|
} |
||||
|
this.$refs.inputSupplierCode.focused = true |
||||
|
}, |
||||
|
onConfirmSupplierCode(data){ |
||||
|
if(data==undefined||data==""){ |
||||
|
this.showMessage("6.供应商编码","输入供应商编码位空") |
||||
|
return; |
||||
|
} |
||||
|
this.$refs.inputWeight.focused = true |
||||
|
}, |
||||
|
onConfirmWeight(data){ |
||||
|
if(data==undefined||data==""){ |
||||
|
this.showMessage("7.数量","输入数量为空") |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
submit() { |
||||
|
if (this.planCode == "") { |
||||
|
this.showMessage("1.计划单号","请选择计划单号") |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.bucketCode == "") { |
||||
|
this.bucketCode="" |
||||
|
this.bucketCheckCode == "" |
||||
|
this.showMessage("2.料筒号","请扫描料筒号") |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.bucketCheckCode == "") { |
||||
|
this.showMessage("2.料筒号","请按回车校验料筒号") |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.itemCode == "") { |
||||
|
this.itemCode="" |
||||
|
this.itemCheckCode == "" |
||||
|
this.showMessage("3.零件号","请扫描零件号") |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.itemCheckCode == "") { |
||||
|
this.showMessage("3.零件号","请按回车校验零件号") |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.batchCode == "") { |
||||
|
this.showMessage("4.批次号","请扫描批次号") |
||||
|
return |
||||
|
} |
||||
|
if (this.referenceCode == "") { |
||||
|
this.showMessage("5.参考号","请扫描参考号") |
||||
|
return |
||||
|
} |
||||
|
if (this.supplierCode == "") { |
||||
|
this.showMessage("6.供应商编码","请扫描供应商") |
||||
|
return |
||||
|
} |
||||
|
if (this.weight == "") { |
||||
|
this.showMessage("7.数量","请输入重量") |
||||
|
return |
||||
|
} |
||||
|
if (this.weight ==0) { |
||||
|
this.showMessage("7.数量","输入重量必须大于0") |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
|
||||
|
var param ={ |
||||
|
planCode:this.planCode, |
||||
|
bucketCode:this.bucketCheckCode, |
||||
|
itemCode:this.itemCheckCode, |
||||
|
batchCode:this.batchCode, |
||||
|
referenceCode:this.referenceCode, |
||||
|
supplierCode:this.supplierCode, |
||||
|
weight:this.weight |
||||
|
} |
||||
|
console.log("参数",param) |
||||
|
// uni.showLoading({ |
||||
|
// title: "加载中", |
||||
|
// mask: true |
||||
|
// }) |
||||
|
// var param = { |
||||
|
// planCode: this.planCode, |
||||
|
// materialName: this.materialName, |
||||
|
// materialQty: this.materialQty |
||||
|
// } |
||||
|
// foamInputSubmit(param).then(res=>{ |
||||
|
// uni.hideLoading() |
||||
|
// this.showMessage("提交成功") |
||||
|
// this.clearData() |
||||
|
// }).catch(error=>{ |
||||
|
// uni.hideLoading() |
||||
|
// this.showMessage(error) |
||||
|
// }) |
||||
|
}, |
||||
|
showMessage(title,hint) { |
||||
|
this.$refs.comMessage.showMessage(title, hint) |
||||
|
}, |
||||
|
resetData() { |
||||
|
this.planCode = ""; |
||||
|
this.materialName = "" |
||||
|
this.materialQty = 0 |
||||
|
}, |
||||
|
showPlanSelect() { |
||||
|
// uni.showLoading({ |
||||
|
// title:"加载中", |
||||
|
// mask:true |
||||
|
// }) |
||||
|
// getPlaneNumberList().then(res=>{ |
||||
|
// uni.hideLoading() |
||||
|
// this.$refs.selectPopup.open({ |
||||
|
// mode: 'radio', //radio checkbox 单选、多选 |
||||
|
// dataList: getDataList(), //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
// // selected: this.userForm.values, //已选中的数据 |
||||
|
// // proxyConfig: { //组件内部代理请求数据配置 |
||||
|
// // reqFun: this.reqGetList, //请求方法 |
||||
|
// // localPaging: false //前端本地分页 |
||||
|
// // }, |
||||
|
// search: { |
||||
|
// type: 'local', //local本地数据搜索 | remote请求接口 |
||||
|
// }, |
||||
|
// fields: { |
||||
|
// label: 'name', |
||||
|
// value: 'code' |
||||
|
// } |
||||
|
// }) |
||||
|
// }).catch(error=>{ |
||||
|
// uni.hideLoading() |
||||
|
// this.showMessage(error) |
||||
|
// }) |
||||
|
this.$refs.selectPopup.open({ |
||||
|
mode: 'radio', //radio checkbox 单选、多选 |
||||
|
dataList: getDataList(), //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
// selected: this.userForm.values, //已选中的数据 |
||||
|
// proxyConfig: { //组件内部代理请求数据配置 |
||||
|
// reqFun: this.reqGetList, //请求方法 |
||||
|
// localPaging: false //前端本地分页 |
||||
|
// }, |
||||
|
search: { |
||||
|
type: 'local', //local本地数据搜索 | remote请求接口 |
||||
|
}, |
||||
|
fields: { |
||||
|
label: 'name', |
||||
|
value: 'code' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
onConfirm(data) { |
||||
|
console.log(data.detail.value) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
select(mode, data) { |
||||
|
this.planCode = data.code |
||||
|
this.planName = data.name |
||||
|
console.log(mode) |
||||
|
console.log(data) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
selectMaterial(mode, data) { |
||||
|
this.materialName = data.name |
||||
|
console.log("selectPopupMaterial") |
||||
|
}, |
||||
|
reqGetList(data) { |
||||
|
// var data ={ |
||||
|
// pageIndex:1, |
||||
|
// pageSize:10, |
||||
|
// name:"" |
||||
|
// } |
||||
|
var test = simulationReqGetList({ |
||||
|
pageIndex: data.pageIndex, |
||||
|
pageSize: data.pageSize, |
||||
|
name: data.searchValue |
||||
|
}) |
||||
|
return test; |
||||
|
|
||||
|
}, |
||||
|
openScanPopup() { |
||||
|
this.$refs.scanPopup.openScanPopup(); |
||||
|
}, |
||||
|
|
||||
|
closeScanPopup() { |
||||
|
this.$refs.scanPopup.closeScanPopup(); |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style lang="scss"> |
||||
|
.example { |
||||
|
padding: 15px; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.segmented-control { |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
|
||||
|
.button-group { |
||||
|
margin-top: 15px; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
|
||||
|
.form-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.input { |
||||
|
padding: 10rpx; |
||||
|
height: 65rpx; |
||||
|
text-align: left; |
||||
|
margin: 5rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
outline: none; |
||||
|
border-radius: 10rpx; |
||||
|
border: 1rpx solid lightgrey; |
||||
|
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,2 @@ |
|||||
|
## 1.0.0（2023-11-15） |
||||
|
第一次发布 |
||||
@ -0,0 +1,206 @@ |
|||||
|
<template> |
||||
|
<view class="wz-select-input"> |
||||
|
<view class="select-input" @click="changePopup"> |
||||
|
<view class="content"> |
||||
|
<view v-if="isValueEmpty " class="value"> |
||||
|
{{showNames}} |
||||
|
</view> |
||||
|
<view v-else class="placeholder">{{placeholder}}</view> |
||||
|
</view> |
||||
|
<view :class="showPop ?'right-icon-rotate':'right-icon'"> |
||||
|
<uni-icons class="bottom-icon" color="#808080" type="bottom" size="22"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
<wz-select-popup ref="wzSelectPopup" @select="selectValue" @close="showPop=false" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
/** |
||||
|
* input弹层选择器 |
||||
|
* @property {String | Number | Array} value v-model绑定值 |
||||
|
* @property {String} placeholder 占位文字 |
||||
|
* |
||||
|
* @property {Object} popupConfig 弹出层配置 |
||||
|
* @property {String} popupConfig.mode 选择模式radio单选 | checkbox多选 默认是radio |
||||
|
* @property {String | Array} popupConfig.selected 已选中的value,单选传字符串，多选传数组 |
||||
|
* |
||||
|
* @property {Array} dataList 如果dataList传入了数组，则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
* |
||||
|
* @property {Object} popupConfig.proxyConfig 组件内部代理请求数据配置 |
||||
|
* @property {Function} proxyConfig.reqFun 请求数据的方法 |
||||
|
* @property {Boolean} proxyConfig.localPaging 是否本地分页 |
||||
|
* |
||||
|
* @property {Object} popupConfig.search //搜索相关参数 |
||||
|
* @property {String} search.type = local组件内部排序搜索 | remote请求接口，会把输入的搜索文字传入proxyConfig.reqFun |
||||
|
* |
||||
|
* @property {Object} popupConfig.page 分页的页码参数 |
||||
|
* @property {Number} page.pageIndex 当前页 |
||||
|
* @property {Number} page.pageSize 页大小 |
||||
|
* |
||||
|
* @property {Object} popupConfig.fields 传入选项数据的key value |
||||
|
* @property {String} fields.label 用于显示文字的key |
||||
|
* @property {String} fields.value 用于取值的key |
||||
|
*/ |
||||
|
export default { |
||||
|
name: 'wz-select-input', |
||||
|
props: { |
||||
|
value: { |
||||
|
type: [String, Number, Array], |
||||
|
default: '' |
||||
|
}, |
||||
|
//radio checkbox 单选、多选 |
||||
|
mode: { |
||||
|
type: String, |
||||
|
default: 'radio' |
||||
|
}, |
||||
|
//如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
dataList: { |
||||
|
default: null |
||||
|
}, |
||||
|
//组件内部代理请求数据配置 |
||||
|
proxyConfig: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { |
||||
|
reqFun: function() {}, //请求方法 |
||||
|
localPaging: false //前端本地分页,如果使用的是dataList默认是本地分页 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
//如果是组件内部代理请求会把page的值加入到请求参数里 |
||||
|
page: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { |
||||
|
pageIndex: 1, //当前页 |
||||
|
pageSize: 20 //页大小 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
//搜索的类型,local本地搜索, remote向服务器请求。只有使用proxyConfig.reqFun请求才能配置为remote |
||||
|
searchType: { |
||||
|
type: String, |
||||
|
default: 'local' |
||||
|
}, |
||||
|
//显示的key,value |
||||
|
fields: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { |
||||
|
label: 'name', |
||||
|
value: 'code' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
placeholder: { |
||||
|
type: String, |
||||
|
default: '请选择' |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
showPop: false, |
||||
|
dataForm: { |
||||
|
name: '', |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
isValueEmpty() { |
||||
|
if (this.mode === 'checkbox' && typeof this.dataForm.name == 'object') { |
||||
|
return this.dataForm.name && this.dataForm.name.length != 0 |
||||
|
} |
||||
|
const nameText = this.dataList ? this.value : this.dataForm.name |
||||
|
return nameText != '' && nameText != null && nameText != undefined |
||||
|
}, |
||||
|
showNames() { |
||||
|
if (this.dataList && this.dataList instanceof Array) { |
||||
|
if (this.mode == 'radio') { |
||||
|
const item = this.dataList.find(v => v[this.fields.value] == this.value) |
||||
|
return item ? item[this.fields.label] : this.dataForm.name |
||||
|
} else { |
||||
|
const items = this.dataList.filter(v => this.value.includes(v[this.fields.value])) |
||||
|
const names = items.map(v => v[this.fields.label]) |
||||
|
return names?.join('，') |
||||
|
} |
||||
|
} else if (this.dataForm.name instanceof Array) { |
||||
|
return this.dataForm.name.join('，') |
||||
|
} |
||||
|
return this.dataForm.name |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
selectValue(mode, data) { |
||||
|
if (mode == 'radio') { |
||||
|
this.dataForm.name = data[this.fields.label] |
||||
|
this.$emit('input', data[this.fields.value]) |
||||
|
} else { |
||||
|
const { |
||||
|
names, |
||||
|
values, |
||||
|
origin |
||||
|
} = data |
||||
|
this.dataForm.name = names |
||||
|
this.$emit('input', values) |
||||
|
} |
||||
|
this.$emit('select', mode, data) |
||||
|
}, |
||||
|
changePopup() { |
||||
|
this.$refs.wzSelectPopup.open({ |
||||
|
mode: this.mode, //radio checkbox 单选、多选 |
||||
|
selected: this.value, //已选中的 |
||||
|
dataList: this.dataList, //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
proxyConfig: this.proxyConfig, //组件内部代理请求数据配置 |
||||
|
page: this.page, //如果是组件内部代理请求会把page的值加入到请求参数里 |
||||
|
search: { //搜索的类型,local本地搜索, remote向服务器请求。只有使用proxyConfig.reqFun请求才能配置为remote |
||||
|
type: this.searchType, |
||||
|
}, |
||||
|
fields: this.fields |
||||
|
}) |
||||
|
this.showPop = true |
||||
|
}, |
||||
|
setName(data) { |
||||
|
this.dataForm.name = data |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.wz-select-input { |
||||
|
width: 100%; |
||||
|
|
||||
|
.select-input { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 8px; |
||||
|
border: 1px solid $uni-border-color; |
||||
|
border-radius: $uni-border-radius-base; |
||||
|
|
||||
|
.content { |
||||
|
flex: 1; |
||||
|
|
||||
|
.value { |
||||
|
color: $uni-text-color; |
||||
|
} |
||||
|
|
||||
|
.placeholder { |
||||
|
color: $uni-text-color-placeholder; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right-icon { |
||||
|
transition: all .3s; |
||||
|
} |
||||
|
|
||||
|
.right-icon-rotate { |
||||
|
@extend .right-icon; |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,82 @@ |
|||||
|
{ |
||||
|
"id": "wz-select-input", |
||||
|
"displayName": "wz-select-input", |
||||
|
"version": "1.0.0", |
||||
|
"description": "wz-select-input", |
||||
|
"keywords": [ |
||||
|
"wz-select-input" |
||||
|
], |
||||
|
"repository": "", |
||||
|
"engines": { |
||||
|
"HBuilderX": "^3.96" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"type": "component-vue", |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "插件不采集任何数据", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": ["wz-select-popup"], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y" |
||||
|
}, |
||||
|
"client": { |
||||
|
"Vue": { |
||||
|
"vue2": "y", |
||||
|
"vue3": "u" |
||||
|
}, |
||||
|
"App": { |
||||
|
"app-vue": "y", |
||||
|
"app-nvue": "u", |
||||
|
"app-uvue": "u" |
||||
|
}, |
||||
|
"H5-mobile": { |
||||
|
"Safari": "y", |
||||
|
"Android Browser": "y", |
||||
|
"微信浏览器(Android)": "y", |
||||
|
"QQ浏览器(Android)": "y" |
||||
|
}, |
||||
|
"H5-pc": { |
||||
|
"Chrome": "y", |
||||
|
"IE": "u", |
||||
|
"Edge": "y", |
||||
|
"Firefox": "y", |
||||
|
"Safari": "y" |
||||
|
}, |
||||
|
"小程序": { |
||||
|
"微信": "y", |
||||
|
"阿里": "u", |
||||
|
"百度": "u", |
||||
|
"字节跳动": "u", |
||||
|
"QQ": "u", |
||||
|
"钉钉": "u", |
||||
|
"快手": "u", |
||||
|
"飞书": "u", |
||||
|
"京东": "u" |
||||
|
}, |
||||
|
"快应用": { |
||||
|
"华为": "u", |
||||
|
"联盟": "u" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,133 @@ |
|||||
|
# wz-select-input |
||||
|
|
||||
|
## 示例 |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<view class="content"> |
||||
|
单选：（直接传入dataList） |
||||
|
<wz-select-input ref="radioSelectInput" v-model="dataForm.radio" :data-list="radioDataList" |
||||
|
@select="selectData"> |
||||
|
</wz-select-input> |
||||
|
|
||||
|
<view class="" style="margin-top: 16px;"> |
||||
|
多选：(模拟后端请求数据) |
||||
|
<wz-select-input ref="checkboxSelectInput" v-model="dataForm.checkbox" mode="checkbox" :proxyConfig="{ |
||||
|
reqFun: reqGetList, |
||||
|
localPaging: false |
||||
|
}" @select="selectData"> |
||||
|
</wz-select-input> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
simulationReqGetList, |
||||
|
getDataList |
||||
|
} from "@/common/mock.js" |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
radioDataList: [], |
||||
|
dataForm: { |
||||
|
radio: '', |
||||
|
checkbox: [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
dataForm: { |
||||
|
handler(newVal) { |
||||
|
console.log(newVal) |
||||
|
}, |
||||
|
deep: true |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
onReady() { |
||||
|
// this.dataForm.checkbox = ["0-1", "1-2", "3-4"] |
||||
|
|
||||
|
//多选模式下 如果是编辑表单的情况下需要手动设置name |
||||
|
// this.$refs.checkboxSelectInput.setName(["第1条数据", "第2条数据", "第4条数据"]) |
||||
|
}, |
||||
|
methods: { |
||||
|
selectData(mode, data) { |
||||
|
console.log(data) |
||||
|
}, |
||||
|
reqGetList(data) { |
||||
|
return simulationReqGetList({ |
||||
|
pageIndex: data.pageIndex, |
||||
|
pageSize: data.pageSize, |
||||
|
name: data.searchValue |
||||
|
}) |
||||
|
}, |
||||
|
getDataList() { |
||||
|
this.radioDataList = getDataList() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.content { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
</style> |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
## 属性props |
||||
|
|
||||
|
| 属性 | 类型 | 默认值 | 说明 | |
||||
|
| ----------- | --------------------- | --------------------------------------------- | ------------------------------------------------------------ | |
||||
|
| v-model | String\|Number\|Array | | 选中的value | |
||||
|
| mode | String | radio | radio单选\|checkbox多选 | |
||||
|
| dataList | Array\|null | null | 如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig | |
||||
|
| proxyConfig | Object | reqFun: function() {},<br/>localPaging: false | [proxyConfig](#proxyConfig的属性) | |
||||
|
| page | Object | pageIndex: 1, <br/>pageSize: 20 | [page](#page的属性) | |
||||
|
| fields | Object | label: 'name',<br/>value: 'code' | [fields](#fields的属性) | |
||||
|
| searchType | String | local | 搜索的类型,local本地搜索, remote向服务器请求。只有使用proxyConfig.reqFun请求才能配置为remote | |
||||
|
| placeholder | String | 请选择 | 未选择时的占位文字 | |
||||
|
|
||||
|
### proxyConfig的属性 |
||||
|
|
||||
|
| 属性 | 类型 | 默认值 | 说明 | |
||||
|
| ----------- | -------- | ------------- | ------------------------------------------------------------ | |
||||
|
| reqFun | Function | function() {} | 向后端发起请求的函数。({pageIndex,pageSize,searchValue})=>{} | |
||||
|
| localPaging | Boolean | false | 是否前端本地分页,如果使用的是dataList默认是本地分页 | |
||||
|
|
||||
|
### page的属性 |
||||
|
|
||||
|
| 属性 | 类型 | 默认值 | 说明 | |
||||
|
| --------- | ------ | ------ | ------ | |
||||
|
| pageIndex | Number | 1 | 当前页 | |
||||
|
| pageSize | Number | 20 | 页大小 | |
||||
|
|
||||
|
### fields的属性 |
||||
|
|
||||
|
| 属性 | 类型 | 默认值 | 说明 | |
||||
|
| ----- | ------ | ------ | ------------ | |
||||
|
| label | String | name | 显示的字段名 | |
||||
|
| value | String | code | 取值的字段名 | |
||||
|
|
||||
|
|
||||
|
|
||||
|
## 事件event |
||||
|
|
||||
|
| 名称 | 参数 | 说明 | |
||||
|
| ------ | --------------- | ------------------------------------------------------------ | |
||||
|
| select | (mode,data)=>{} | mode:radio\|checkbox<br/>mode等于radio时：(mode,{check,name,code})=>{}<br/>mode等于checkbox时：(mode,{names,values,origin})=>{} | |
||||
|
|
||||
|
|
||||
|
|
||||
|
## 方法methods |
||||
|
|
||||
|
| 名称 | 参数 | 返回值 | 说明 | |
||||
|
| ------- | ---- | ------ | ------------------------------------------------------------ | |
||||
|
| setName | [] | void | 多选模式下,如果是编辑表单的情况,需要手动设置name<br/>this.$refs.checkboxSelectInput.setName(["第1条数据", "第2条数据", "第4条数据"]) | |
||||
|
|
||||
@ -0,0 +1,8 @@ |
|||||
|
## 1.0.11（2023-11-15） |
||||
|
reqFun只允许传入Promise |
||||
|
## 1.0.10（2023-11-13） |
||||
|
去除默认值 |
||||
|
## 1.0.1（2023-11-13） |
||||
|
更新插件依赖 |
||||
|
## 1.0.0（2023-11-13） |
||||
|
第一次发布 |
||||
@ -0,0 +1,22 @@ |
|||||
|
export default { |
||||
|
mode: 'radio', //radio checkbox 单选、多选
|
||||
|
showType: 'text', //暂时不用 text image 纯文字、图文
|
||||
|
selected: '', //已选中的
|
||||
|
dataList: null, //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig
|
||||
|
proxyConfig: { //组件内部代理请求数据配置
|
||||
|
reqFun: Promise.resolve(), //请求方法
|
||||
|
localPaging: false //前端本地分页,如果使用的是dataList默认是本地分页
|
||||
|
}, |
||||
|
page: { //如果是组件内部代理请求会把page的值加入到请求参数里
|
||||
|
pageIndex: 1, //当前页
|
||||
|
pageSize: 20 //页大小
|
||||
|
}, |
||||
|
search: { |
||||
|
type: 'local', //搜索的类型,local本地搜索, remote向服务器请求。只有使用proxyConfig.reqFun请求才能配置为remote
|
||||
|
}, |
||||
|
fields: { //显示的key,value
|
||||
|
label: 'name', |
||||
|
value: 'code', |
||||
|
image: 'image', //暂时不用
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,74 @@ |
|||||
|
/**深度合并对象*/ |
||||
|
export const deepMerge = function(target = {}, source = {}) { |
||||
|
target = deepClone(target); //深度克隆
|
||||
|
if (typeof target !== 'object' || typeof source !== 'object') return false; //判断类型
|
||||
|
for (let prop in source) { |
||||
|
if (!source.hasOwnProperty(prop)) continue; //检测属性是否为对象的自有属性
|
||||
|
if (prop in target) { //prop 中是否有 target 属性
|
||||
|
if (typeof target[prop] !== 'object') { |
||||
|
target[prop] = source[prop]; |
||||
|
} else { |
||||
|
if (typeof source[prop] !== 'object') { |
||||
|
target[prop] = source[prop]; |
||||
|
} else { |
||||
|
if (target[prop].concat && source[prop].concat) { |
||||
|
target[prop] = target[prop].concat(source[prop]); //合并
|
||||
|
} else { |
||||
|
target[prop] = deepMerge(target[prop], source[prop]); //递归
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
target[prop] = source[prop]; |
||||
|
} |
||||
|
} |
||||
|
return target; |
||||
|
} |
||||
|
|
||||
|
const isArray = function(arr) { |
||||
|
return Object.prototype.toString.call(arr) === '[object Array]'; |
||||
|
} |
||||
|
|
||||
|
/**深度合并对象*/ |
||||
|
export const deepClone = function(obj) { |
||||
|
// 对常见的“非”值，直接返回原来值
|
||||
|
if ([null, undefined, NaN, false].includes(obj)) return obj; |
||||
|
if (typeof obj !== "object" && typeof obj !== 'function') { |
||||
|
//原始类型直接返回
|
||||
|
return obj; |
||||
|
} |
||||
|
let o = isArray(obj) ? [] : {}; |
||||
|
for (let i in obj) { |
||||
|
if (obj.hasOwnProperty(i)) { |
||||
|
o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i]; |
||||
|
} |
||||
|
} |
||||
|
return o; |
||||
|
}; |
||||
|
|
||||
|
let timeout = null |
||||
|
/** |
||||
|
* 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数 |
||||
|
* |
||||
|
* @param {Function} func 要执行的回调函数 |
||||
|
* @param {Number} wait 延时的时间 |
||||
|
* @param {Boolean} immediate 是否立即执行 |
||||
|
* @return null |
||||
|
*/ |
||||
|
export const debounce = function(func, wait = 500, immediate = false) { |
||||
|
// 清除定时器
|
||||
|
if (timeout !== null) clearTimeout(timeout) |
||||
|
// 立即执行，此类情况一般用不到
|
||||
|
if (immediate) { |
||||
|
const callNow = !timeout |
||||
|
timeout = setTimeout(() => { |
||||
|
timeout = null |
||||
|
}, wait) |
||||
|
if (callNow) typeof func === 'function' && func() |
||||
|
} else { |
||||
|
// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
|
||||
|
timeout = setTimeout(() => { |
||||
|
typeof func === 'function' && func() |
||||
|
}, wait) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,118 @@ |
|||||
|
<template> |
||||
|
<view class="wz-list"> |
||||
|
<view :class="item.check?'check-item':'list-item'" v-for="(item,index) in list" :key="index" |
||||
|
@click="$emit('checkList',item)"> |
||||
|
<!-- <uni-icons v-if="item.check" type="checkbox-filled" color="#007aff" size="24"></uni-icons> |
||||
|
<uni-icons v-else type="circle" color="#999" size="24"></uni-icons> --> |
||||
|
{{index+1}}. |
||||
|
<view class="list-item-text">{{item[fields.label]}}</view> |
||||
|
</view> |
||||
|
<view class="loadmore" @click="$emit('loadmore')"> |
||||
|
<view v-if="page.loading == 'loading'" class="icon"> |
||||
|
<uni-icons type="spinner-cycle" size="24"></uni-icons> |
||||
|
</view> |
||||
|
<view class="">{{loadmore[page.loading]}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'wz-list', |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
page: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { |
||||
|
loading: 'loading', //loading|loadmore|nomore |
||||
|
isEmpty: false |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
fields: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { |
||||
|
label: 'name', |
||||
|
value: 'code', |
||||
|
image: 'image' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loadmore: { |
||||
|
loading: '正在加载', |
||||
|
loadmore: '点击或上拉加载更多', |
||||
|
nomore: '没有更多了' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.wz-list { |
||||
|
@mixin wz-line ($line) { |
||||
|
overflow: hidden; |
||||
|
word-break: break-all; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; // 弹性伸缩盒 |
||||
|
-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式 |
||||
|
-webkit-line-clamp: $line; |
||||
|
} |
||||
|
|
||||
|
.list-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: $uni-text-color-grey; |
||||
|
padding: $uni-spacing-col-base; |
||||
|
margin-bottom: $uni-spacing-col-sm; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
.list-item-text { |
||||
|
@include wz-line(2); |
||||
|
margin-left: 4px; |
||||
|
margin-bottom: 1px |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.check-item { |
||||
|
@extend .list-item; |
||||
|
color: $uni-text-color; |
||||
|
} |
||||
|
|
||||
|
.loadmore { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: $uni-font-size-sm; |
||||
|
padding: 8px ; |
||||
|
|
||||
|
// @keyframes rotateInfinite { |
||||
|
// form { |
||||
|
// transform: rotate(0deg); |
||||
|
// } |
||||
|
|
||||
|
// to { |
||||
|
// transform: rotate(360deg); |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .icon { |
||||
|
// animation: rotateInfinite infinite 1s linear; |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,94 @@ |
|||||
|
<template> |
||||
|
<view class="wz-search"> |
||||
|
<view class="search-input"> |
||||
|
<uni-icons color="#808080" size="22" type="search"></uni-icons> |
||||
|
<view class="right"> |
||||
|
|
||||
|
<input v-model="searchVal" :placeholder="placeholder" @input="change"/> |
||||
|
</view> |
||||
|
<uni-icons v-if="value || value === 0 || value === '0'" color="#808080" size="22" type="clear" |
||||
|
@click="clear"> |
||||
|
</uni-icons> |
||||
|
</view> |
||||
|
<view class="search-button"> |
||||
|
<button class="button" @click="searchData">搜索</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'wz-search', |
||||
|
props: { |
||||
|
value : { |
||||
|
|
||||
|
} |
||||
|
, |
||||
|
placeholder: { |
||||
|
type: String, |
||||
|
default: '请输入搜索关键字' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
searchVal: '' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
change({ |
||||
|
detail |
||||
|
}) { |
||||
|
this.$emit('input', detail.value) |
||||
|
}, |
||||
|
clear() { |
||||
|
this.$emit('clear') |
||||
|
this.$emit('input', '') |
||||
|
}, |
||||
|
searchData() { |
||||
|
this.$emit('search', this.value) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.wz-search { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: $uni-font-size-base; |
||||
|
|
||||
|
.search-input { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 32px; |
||||
|
padding: 0 8px; |
||||
|
border: 1px solid $uni-border-color; |
||||
|
border-radius: 100px; |
||||
|
|
||||
|
.right { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
margin: 0 4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.search-button { |
||||
|
margin-left: 8px; |
||||
|
|
||||
|
.button { |
||||
|
padding: 0; |
||||
|
font-size: inherit; |
||||
|
background-color: transparent; |
||||
|
color: inherit; |
||||
|
width: 100%; |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
|
||||
|
&::after { |
||||
|
border: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,351 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<u-popup ref="popup" v-model="showPopup" border-radius="15" mode="center"> |
||||
|
<view class="select-popup-content" > |
||||
|
<view class="uni-flex center" style="padding: 20rpx; font-weight: bold; font-size: 34rpx;" > |
||||
|
{{title}} |
||||
|
</view> |
||||
|
<view class="popup-search" v-if="isShowSearch"> |
||||
|
<wz-search @input="input" @search="searchData('search')" @clear="searchData('clear')" /> |
||||
|
</view> |
||||
|
<scroll-view class="popup-scroll-y" :scroll-top="scroll.newTop" scroll-y |
||||
|
:style="{'--popup-scroll-height': scrollH}" @scrolltolower="scrolltolower" @scroll="viewScroll"> |
||||
|
<wz-list :list="dataList" :fields="popConfig.fields" :page="pageStatus" @checkList="checkList" |
||||
|
@loadmore="scrolltolower" /> |
||||
|
</scroll-view> |
||||
|
<view v-if="popConfig.mode =='checkbox'" class="footer-button"> |
||||
|
<view class="button-item"> |
||||
|
<button class="button" @click="close">取消</button> |
||||
|
</view> |
||||
|
<view class="button-item"> |
||||
|
<button class="button" type="primary" @click="checkboxConfirm">确定</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import wzSearch from "./wz-search.vue" |
||||
|
import wzList from "./wz-list.vue" |
||||
|
import { |
||||
|
deepMerge, |
||||
|
deepClone, |
||||
|
debounce |
||||
|
} from "./util/index.js" |
||||
|
import defaultConfig from "./util/defaultConfig.js" |
||||
|
let allDataList = null |
||||
|
/** |
||||
|
* 下拉选择弹窗 |
||||
|
* @function open 打开弹窗 |
||||
|
* @property {String} scrollH 滚动内容的高度，不包含搜索框和多选时的底部按钮栏。需要带单位 |
||||
|
* @property {String} popType = popup弹出方向默认bottom 请查看uni-popup文档 |
||||
|
*/ |
||||
|
export default { |
||||
|
name: "wz-select-popup", |
||||
|
components: { |
||||
|
wzSearch, |
||||
|
wzList |
||||
|
}, |
||||
|
props: { |
||||
|
scrollH: { |
||||
|
type: String, |
||||
|
default: '45vh' |
||||
|
}, |
||||
|
popType: { |
||||
|
type: String, |
||||
|
default: 'bottom' |
||||
|
}, |
||||
|
isShowSearch:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
title:{ |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dataList: [], |
||||
|
searchValue: '', |
||||
|
pageStatus: { |
||||
|
loading: '', //loading|loadmore|nomore |
||||
|
isEmpty: false |
||||
|
}, |
||||
|
scroll: { |
||||
|
oldTop: 0, |
||||
|
newTop: 0 |
||||
|
}, |
||||
|
popConfig: {}, |
||||
|
showPopup:false |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.popConfig = deepClone(defaultConfig) |
||||
|
}, |
||||
|
destroyed() { |
||||
|
allDataList = null |
||||
|
}, |
||||
|
methods: { |
||||
|
input(value){ |
||||
|
this.searchValue=value; |
||||
|
}, |
||||
|
viewScrollTop() { |
||||
|
// 解决view层不同步的问题 |
||||
|
this.scroll.newTop = this.scroll.oldTop |
||||
|
this.$nextTick(function() { |
||||
|
this.scroll.newTop = 0 |
||||
|
}); |
||||
|
}, |
||||
|
viewScroll(e) { |
||||
|
debounce(() => { |
||||
|
this.scroll.oldTop = e.detail.scrollTop |
||||
|
console.log("viewScroll") |
||||
|
}, 100) |
||||
|
}, |
||||
|
searchData(type) { |
||||
|
console.log("查找",this.searchValue) |
||||
|
const { |
||||
|
search, |
||||
|
fields, |
||||
|
proxyConfig |
||||
|
} = this.popConfig |
||||
|
this.pageStatus.loading == 'loading' |
||||
|
this.pageStatus.isEmpty = false |
||||
|
this.popConfig.page.pageIndex = 1 |
||||
|
this.dataList = [] |
||||
|
this.viewScrollTop() |
||||
|
if (search.type === 'local' && proxyConfig.localPaging) { |
||||
|
if (type === 'clear') { |
||||
|
this.listInit(allDataList) |
||||
|
return |
||||
|
} |
||||
|
console.log("查找",this.searchValue) |
||||
|
this.dataList = allDataList?.filter(v => v[fields.label].includes(this.searchValue)) |
||||
|
var le = this.dataList.length; |
||||
|
this.$forceUpdate() |
||||
|
console.log("数据",le) |
||||
|
} else { |
||||
|
this.proxyRequest() |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 打开弹窗选择器 |
||||
|
* @function |
||||
|
* @param {Object} configs 弹出层配置 |
||||
|
* @prmam {String} configs.mode 选择模式radio单选 | checkbox多选 默认是radio |
||||
|
* @param {String | Array} configs.selected 已选中的value,单选传字符串，多选传数组 |
||||
|
* |
||||
|
* @param {Array} dataList 如果dataList传入了数组，则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
* |
||||
|
* @param {Object} configs.proxyConfig 组件内部代理请求数据配置 |
||||
|
* @param {Function} proxyConfig.reqFun 请求数据的方法 |
||||
|
* @param {Boolean} proxyConfig.localPaging 是否本地分页 |
||||
|
* |
||||
|
* @param {Object} configs.search //搜索相关参数 |
||||
|
* @param {String} search.type = local组件内部排序搜索 | remote请求接口，会把输入的搜索文字传入proxyConfig.reqFun |
||||
|
* |
||||
|
* @param {Object} configs.page 分页的页码参数 |
||||
|
* @param {Number} page.pageIndex 当前页 |
||||
|
* @param {Number} page.pageSize 页大小 |
||||
|
* |
||||
|
* @param {Object} configs.fields 传入选项数据的key value |
||||
|
* @param {String} fields.label 用于显示文字的key |
||||
|
* @param {String} fields.value 用于取值的key |
||||
|
*/ |
||||
|
open(configs = {}) { |
||||
|
const { |
||||
|
dataList, |
||||
|
...config |
||||
|
} = configs || {} |
||||
|
|
||||
|
if (config) { |
||||
|
this.popConfig = deepMerge(this.popConfig, config) |
||||
|
} |
||||
|
|
||||
|
this.listInit(dataList) |
||||
|
this.showPopup =true; |
||||
|
}, |
||||
|
/**列表数据初始化*/ |
||||
|
listInit(dataList) { |
||||
|
this.pageStatus.loading = 'loading' |
||||
|
//如果dataList传入了数组，则不再调用proxyConfig.reqFun请求方法 |
||||
|
if (dataList && dataList instanceof Array) { |
||||
|
console.warn('直接使用传入的dataList') |
||||
|
allDataList = deepClone(dataList) |
||||
|
this.popConfig.proxyConfig.localPaging = true |
||||
|
this.getLocalPagingData() |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.popConfig.proxyConfig.reqFun instanceof Function) { |
||||
|
// if (Object.prototype.toString.call(this.popConfig.proxyConfig.reqFun) != '[object Promise]') { |
||||
|
// throw 'proxyConfig.reqFun需要return Promise.resolve(列表数据)' |
||||
|
// } |
||||
|
this.proxyRequest() |
||||
|
} |
||||
|
}, |
||||
|
/**组件代理请求*/ |
||||
|
proxyRequest() { |
||||
|
const { |
||||
|
proxyConfig, |
||||
|
page |
||||
|
} = this.popConfig |
||||
|
this.pageStatus.loading = 'loading' |
||||
|
proxyConfig.reqFun({ |
||||
|
...page, |
||||
|
searchValue: this.searchValue |
||||
|
}).then(list => { |
||||
|
|
||||
|
if (proxyConfig.localPaging) { //前端本地分页 |
||||
|
allDataList = list |
||||
|
this.getLocalPagingData() |
||||
|
return |
||||
|
} |
||||
|
this.pageStatus.loading = 'loadmore' |
||||
|
if (!list || list.length != page.pageSize) { |
||||
|
this.pageStatus.loading = 'nomore' |
||||
|
this.pageStatus.isEmpty = true |
||||
|
} |
||||
|
|
||||
|
this.handleSelected(list) |
||||
|
this.dataList = this.dataList.concat(list) |
||||
|
}) |
||||
|
}, |
||||
|
close() { |
||||
|
this.showPopup =false; |
||||
|
this.$refs.popup.close() |
||||
|
this.$emit('close') |
||||
|
setTimeout(() => { |
||||
|
allDataList = null |
||||
|
this.pageStatus.isEmpty = false |
||||
|
this.pageStatus.loading = 'loading' |
||||
|
this.popConfig = defaultConfig |
||||
|
this.dataList = [] |
||||
|
}, 500) |
||||
|
}, |
||||
|
/**上拉触底*/ |
||||
|
scrolltolower() { |
||||
|
console.log("scrolltolower") |
||||
|
if (!this.pageStatus.isEmpty && this.pageStatus.loading != 'loading') { |
||||
|
this.popConfig.page.pageIndex++ |
||||
|
if (this.popConfig.proxyConfig.localPaging) { |
||||
|
this.getLocalPagingData() |
||||
|
} else { |
||||
|
this.proxyRequest() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
/**前端本地分页*/ |
||||
|
getLocalPagingData() { |
||||
|
const { |
||||
|
pageIndex, |
||||
|
pageSize |
||||
|
} = this.popConfig.page |
||||
|
const list = allDataList.slice(pageSize * (pageIndex - 1), pageSize + (pageSize * (pageIndex - 1))) |
||||
|
this.pageStatus.loading = 'loadmore' |
||||
|
this.handleSelected(list) |
||||
|
this.dataList = this.dataList.concat(list) |
||||
|
if (!list || list.length != pageSize) { |
||||
|
this.pageStatus.loading = 'nomore' |
||||
|
this.pageStatus.isEmpty = true |
||||
|
} |
||||
|
}, |
||||
|
/**多选点击确定*/ |
||||
|
checkboxConfirm() { |
||||
|
const list = this.dataList.filter(v => v.check) |
||||
|
const data = { |
||||
|
names: [], |
||||
|
values: [] |
||||
|
} |
||||
|
const { |
||||
|
fields, |
||||
|
mode |
||||
|
} = this.popConfig |
||||
|
list.forEach(v => { |
||||
|
data.names.push(v[fields.label]) |
||||
|
data.values.push(v[fields.value]) |
||||
|
}) |
||||
|
this.$emit('select', mode, { |
||||
|
...data, |
||||
|
origin: list |
||||
|
}) |
||||
|
this.close() |
||||
|
}, |
||||
|
/**选择*/ |
||||
|
checkList(data, index) { |
||||
|
const { |
||||
|
mode, |
||||
|
fields |
||||
|
} = this.popConfig |
||||
|
if (mode == 'radio') { |
||||
|
this.dataList.forEach(v => { |
||||
|
v.check = v[fields.value] == data[fields.value] ? true : false |
||||
|
}) |
||||
|
this.$emit('select', mode, data) |
||||
|
this.close() |
||||
|
} else { |
||||
|
data.check = !data.check |
||||
|
} |
||||
|
}, |
||||
|
/**处理已选中的选项*/ |
||||
|
handleSelected(list) { |
||||
|
const { |
||||
|
selected, |
||||
|
fields |
||||
|
} = this.popConfig |
||||
|
list?.forEach(item => { |
||||
|
const valueCode = item[fields.value] |
||||
|
const isChecked = selected instanceof Array ? selected.includes(valueCode) : selected == |
||||
|
valueCode |
||||
|
item.check = isChecked ? true : false |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.select-popup-content { |
||||
|
background-color: #fff; |
||||
|
width: 80vw; |
||||
|
box-sizing: border-box; |
||||
|
.popup-search { |
||||
|
font-size: $uni-font-size-base; |
||||
|
padding: 4px $uni-spacing-row-base; |
||||
|
border-bottom: 1px solid $uni-border-color; |
||||
|
} |
||||
|
|
||||
|
.footer-button { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
|
||||
|
.button-item { |
||||
|
flex: 1; |
||||
|
padding: 4px 16px; |
||||
|
|
||||
|
.button { |
||||
|
width: 100%; |
||||
|
height: 36px; |
||||
|
line-height: 36px; |
||||
|
font-size: $uni-font-size-base; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popup-scroll-y { |
||||
|
height: var(--popup-scroll-height); |
||||
|
padding: $uni-spacing-col-sm $uni-spacing-col-base; |
||||
|
box-sizing: border-box; |
||||
|
background-color: $uni-bg-color-grey; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,82 @@ |
|||||
|
{ |
||||
|
"id": "wz-select-popup", |
||||
|
"displayName": "popup弹窗选择器", |
||||
|
"version": "1.0.11", |
||||
|
"description": "popup弹窗选择器支持单选，多选，组件内部代理请求，自定义label，value显示，分页加载，", |
||||
|
"keywords": [ |
||||
|
"wz-select-popup" |
||||
|
], |
||||
|
"repository": "", |
||||
|
"engines": { |
||||
|
"HBuilderX": "^3.96" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"type": "component-vue", |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "插件不采集任何数据", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": ["uni-icons", "uni-popup"], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y" |
||||
|
}, |
||||
|
"client": { |
||||
|
"Vue": { |
||||
|
"vue2": "y", |
||||
|
"vue3": "u" |
||||
|
}, |
||||
|
"App": { |
||||
|
"app-vue": "y", |
||||
|
"app-nvue": "u", |
||||
|
"app-uvue": "n" |
||||
|
}, |
||||
|
"H5-mobile": { |
||||
|
"Safari": "u", |
||||
|
"Android Browser": "u", |
||||
|
"微信浏览器(Android)": "y", |
||||
|
"QQ浏览器(Android)": "u" |
||||
|
}, |
||||
|
"H5-pc": { |
||||
|
"Chrome": "y", |
||||
|
"IE": "u", |
||||
|
"Edge": "y", |
||||
|
"Firefox": "u", |
||||
|
"Safari": "u" |
||||
|
}, |
||||
|
"小程序": { |
||||
|
"微信": "y", |
||||
|
"阿里": "u", |
||||
|
"百度": "u", |
||||
|
"字节跳动": "u", |
||||
|
"QQ": "u", |
||||
|
"钉钉": "u", |
||||
|
"快手": "u", |
||||
|
"飞书": "u", |
||||
|
"京东": "u" |
||||
|
}, |
||||
|
"快应用": { |
||||
|
"华为": "u", |
||||
|
"联盟": "u" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,132 @@ |
|||||
|
# wz-select-popup |
||||
|
|
||||
|
## 示例 |
||||
|
|
||||
|
```vue |
||||
|
<template> |
||||
|
<view> |
||||
|
<view class="" style="margin-bottom: 16px;"> |
||||
|
<view style="margin-bottom: 8px;">names:{{userForm.names}}</view> |
||||
|
<view style="margin-bottom: 8px;">values:{{userForm.values}}</view> |
||||
|
<view style="margin-bottom: 8px;">origin:{{userForm.origin}}</view> |
||||
|
</view> |
||||
|
<button @click="open">打开</button> |
||||
|
<wz-select-popup ref="wzSelectPopup" @select="selectCheckbox" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
simulationReqGetList, |
||||
|
getDataList |
||||
|
} from "@/common/mock.js" |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
userForm: { |
||||
|
names: [], |
||||
|
values: [], |
||||
|
origin:[] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
open() { |
||||
|
this.$refs.wzSelectPopup.open({ |
||||
|
mode: 'checkbox', //radio checkbox 单选、多选 |
||||
|
// dataList:[], //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
||||
|
selected: this.userForm.values, //已选中的数据 |
||||
|
proxyConfig: { //组件内部代理请求数据配置 |
||||
|
reqFun: this.reqGetList, //请求方法,在方法中请返回Promise.resolve([]) |
||||
|
localPaging: false //前端本地分页 |
||||
|
}, |
||||
|
search: { |
||||
|
type: 'local', //local本地数据搜索 | remote请求接口 |
||||
|
}, |
||||
|
fields: { |
||||
|
label: 'name', |
||||
|
value: 'code' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
selectCheckbox(mode, data) { |
||||
|
console.log(mode, data) |
||||
|
this.userForm.names = data.names |
||||
|
this.userForm.values = data.values |
||||
|
this.userForm.origin = data.origin |
||||
|
}, |
||||
|
reqGetList(data) { |
||||
|
return simulationReqGetList({ |
||||
|
pageIndex: data.pageIndex, |
||||
|
pageSize: data.pageSize, |
||||
|
name: data.searchValue |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
|
``` |
||||
|
|
||||
|
## 属性props |
||||
|
|
||||
|
| 属性 | 类型 | 默认值 | 说明 | |
||||
|
| ------- | ------ | ------ | ------------------------------------------------------------ | |
||||
|
| scrollH | String | 50vh | 滚动内容的高度，不包含搜索框和多选时的底部按钮栏。需要带单位 | |
||||
|
|
||||
|
|
||||
|
## 方法methods |
||||
|
|
||||
|
| 方法名 | 说明 | 参数 | |
||||
|
| ------ | -------- | ----------------------------- | |
||||
|
| open | 打开弹窗 | [configs](#open方法的configs) | |
||||
|
| close | 关闭弹窗 | | |
||||
|
|
||||
|
### open方法的configs |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | |
||||
|
| ----------- | ------------------------------------------------------------ | ------------- | -------------------------- | |
||||
|
| mode | 选择模式radio单选 ，checkbox多选 | String | radio | |
||||
|
| selected | 已选中的value, 单选传字符串，多选传数组 | String\|Array | [] | |
||||
|
| dataList | 传入了数组，则直接使用传入的数组渲染，无需再配置proxyConfig | Array | null | |
||||
|
| proxyConfig | 组件内部代理请求数据配置 | Object | [proxyConfig](#proxyConfig的属性) | |
||||
|
| search | 搜索配置 | Object | [search](#search的属性) | |
||||
|
| page | 分页配置，如果是组件内部代理请求会把page的值加入到proxyConfig.reqFun请求参数里 | Object | [page](#page的属性) | |
||||
|
| fields | 显示和取值的label,value | Object | [fields](#fields的属性) | |
||||
|
|
||||
|
#### proxyConfig的属性 |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | 返回值 | |
||||
|
| ----------- | --------------------------------------------------------- | ------- | ------------------- | --------------------------------------- | |
||||
|
| reqFun | 向服务器请求数据的Promise方法,会返回页码以及搜索框的value | Promise | Promise.resolve([]) | ({pageIndex, pageSize,searchValue})=>{} | |
||||
|
| localPaging | 是否本地分页 | Boolean | false | | |
||||
|
|
||||
|
#### search的属性 |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | |
||||
|
| ------ | ------------------------------------------------------------ | ------ | ------ | |
||||
|
| type | 搜索的类型,local本地搜索, remote向服务器请求。只有使用proxyConfig.reqFun请求才能配置为remote | String | local | |
||||
|
|
||||
|
#### page的属性 |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | |
||||
|
| --------- | ------ | ------ | ------ | |
||||
|
| pageIndex | 当前页 | Number | 1 | |
||||
|
| pageSize | 页大小 | Number | 20 | |
||||
|
|
||||
|
#### fields的属性 |
||||
|
|
||||
|
| 参数名 | 说明 | 类型 | 默认值 | |
||||
|
| ------ | ------------ | ------ | ------ | |
||||
|
| label | 显示的字段名 | String | name | |
||||
|
| value | 取值的字段名 | String | code | |
||||
|
|
||||
|
## 事件enevt |
||||
|
|
||||
|
| 名称 | 触发时机 | 返回值 | |
||||
|
| ------ | ------------------------------------------ | ------------------------------------------------------------ | |
||||
|
| select | 单选点击列表时触发，多选点击确定按钮时触发 | mode等于radio时：(mode, {check,name,code})=>{}<br/>mode等于checkbox时：(mode, {names,values,origin})=>{} | |
||||
|
| close | popup关闭 | void | |
||||
Loading…
Reference in new issue