You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
4.9 KiB
178 lines
4.9 KiB
1 year ago
|
<template>
|
||
|
<view class="container">
|
||
|
<view class="subject">
|
||
|
<view>{{title}}</view>
|
||
|
<view class="options">
|
||
|
<u-button type="success" icon="plus" size="mini" @click="addRow"></u-button>
|
||
|
<u-button type="primary" icon="minus" size="mini" @click="removeRows"
|
||
|
:disabled="selectedIndexs.length == 0"></u-button>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="uni-mt-4">
|
||
|
<uni-table ref="table2" border stripe emptyText="暂未添加记录" type="selection" @selection-change="selectRowChange">
|
||
|
<uni-tr>
|
||
|
<uni-th width="120" align="center">物料名称</uni-th>
|
||
|
<uni-th width="80" align="center">规格</uni-th>
|
||
|
<uni-th width="100" align="center">数量</uni-th>
|
||
|
</uni-tr>
|
||
|
<uni-tr v-for="(item, index) in selectList" :key="index">
|
||
|
<uni-td width="120" align="center">{{item.name}}</uni-td>
|
||
|
<uni-td width="80" align="center">{{ item.spec }}</uni-td>
|
||
|
<uni-td width="100" align="center">
|
||
|
<u-input placeholder="数量" v-model="item.number" type="number" maxlength="3" @blur="formatNumber(item)"
|
||
|
:custom-style="checkNumber(item.number)">
|
||
|
<u-text :text="item.unit" slot="suffix" margin="0 3px 0 0"></u-text>
|
||
|
</u-input>
|
||
|
</uni-td>
|
||
|
</uni-tr>
|
||
|
</uni-table>
|
||
|
</view>
|
||
|
<!-- 物料选择弹框 -->
|
||
|
<u-popup :show="selectorShow" mode="center" @close="selectorShow = false" closeable>
|
||
|
<view class="select-box">
|
||
|
<uni-section title="选择物料" type="line">
|
||
|
<uni-data-select :localdata="selectRange" @change="changeRestore"></uni-data-select>
|
||
|
</uni-section>
|
||
|
</view>
|
||
|
</u-popup>
|
||
|
|
||
|
<u-toast ref="uToast"></u-toast>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
// model: {
|
||
|
// prop: 'formData',
|
||
|
// event: 'changeData',
|
||
|
// },
|
||
|
inject: ['checkData'],
|
||
|
props: {
|
||
|
// formData: {
|
||
|
// type: Number,
|
||
|
// require: false,
|
||
|
// default: 100
|
||
|
// }
|
||
|
name: {
|
||
|
type: String,
|
||
|
require: true,
|
||
|
},
|
||
|
picklist: {
|
||
|
type: Array,
|
||
|
require: false,
|
||
|
default: () => []
|
||
|
},
|
||
|
title: {
|
||
|
type: String,
|
||
|
require: false,
|
||
|
default: "上报记录",
|
||
|
},
|
||
|
},
|
||
|
options: {
|
||
|
styleIsolation: 'shared',
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
selectorShow: false,
|
||
|
datalist: [], // 物料数据
|
||
|
selectList: [], // 选中列表
|
||
|
selectedIndexs: [], // 已选中索引
|
||
|
}
|
||
|
},
|
||
|
created() {
|
||
|
// 深度克隆
|
||
|
this.datalist = uni.$u.deepClone(this.picklist);
|
||
|
},
|
||
|
computed: {
|
||
|
// 计算下拉选项
|
||
|
selectRange() {
|
||
|
return this.datalist.reduce((result, item) => {
|
||
|
let obj = {
|
||
|
value: item.id,
|
||
|
text: item.name,
|
||
|
disable: item.disable ? true : false
|
||
|
};
|
||
|
result.push(obj);
|
||
|
return result;
|
||
|
}, []);
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
// 输入框失去焦点事件
|
||
|
formatNumber(item) {
|
||
|
item.number = this.$base.filterNonNumeric(item.number + '');
|
||
|
},
|
||
|
// 检测输入数字有效性
|
||
|
checkNumber(val) {
|
||
|
this.checkData(this,val);
|
||
|
},
|
||
|
// 返库记录选中项发生变化时
|
||
|
selectRowChange(e) {
|
||
|
this.selectedIndexs = e.detail.index;
|
||
|
// console.log(this.selectedIndexs);
|
||
|
},
|
||
|
// 添加返库数据
|
||
|
addRow() {
|
||
|
this.selectorShow = true;
|
||
|
},
|
||
|
// 选中返库物料
|
||
|
changeRestore(val) {
|
||
|
let index = this.datalist.findIndex(item => item.id == val);
|
||
|
if (index != -1) {
|
||
|
let obj = Object.assign({}, this.datalist[index]);
|
||
|
obj.number = 1; // 返库数量默认为1
|
||
|
this.selectList.push(obj);
|
||
|
}
|
||
|
this.selectorShow = false;
|
||
|
},
|
||
|
// 删除返库数据
|
||
|
removeRows() {
|
||
|
this.$base.removeIndexesItems(this.selectedIndexs, this.selectList);
|
||
|
console.log(this.selectList);
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
selectList: {
|
||
|
handler(newVal, oldVal) {
|
||
|
console.log(newVal);
|
||
|
let restoreIds = newVal.map(v => v.id);
|
||
|
for (let index in this.datalist) {
|
||
|
let id = this.datalist[index].id;
|
||
|
// 赋予对象不存在的属性为响应式
|
||
|
this.$set(this.datalist[index], 'disable', restoreIds.includes(id) ? 1 : 0);
|
||
|
}
|
||
|
// 通知父组件更新表单字段
|
||
|
this.$emit('setFormItem', {name: this.name, value: newVal});
|
||
|
},
|
||
|
deep: true
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.subject {
|
||
|
margin: 10px 0;
|
||
|
@include flex-space-between(row);
|
||
|
|
||
|
.options {
|
||
|
@include flex-space-around(row);
|
||
|
|
||
|
::v-deep {
|
||
|
.u-button {
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
min-width: 30px;
|
||
|
margin-left: 5px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.select-box {
|
||
|
width: 300px;
|
||
|
max-height: 360px;
|
||
|
background-color: #f5f5f5;
|
||
|
}
|
||
|
</style>
|