|
|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <view class="app-content">
|
|
|
+ <view class="tree-page">
|
|
|
+ <view class="top-wrap">
|
|
|
+ <view class="formula-row">
|
|
|
+ <view class="count-box">{{ totalNum }}</view>
|
|
|
+ <text class="symbol">x</text>
|
|
|
+ <input
|
|
|
+ class="price-input"
|
|
|
+ v-model="price"
|
|
|
+ type="digit"
|
|
|
+ placeholder="单价"
|
|
|
+ placeholder-style="color:#000000"
|
|
|
+ @focus="price = ''"
|
|
|
+ />
|
|
|
+ <text class="amount">{{ totalAmount }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="stock-row">
|
|
|
+ <text>{{ filledNum }}筛</text>
|
|
|
+ <button class="admin-button-com middle blue add-row-btn" @click="addRow">新增一行</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <scroll-view scroll-y class="content-scroll">
|
|
|
+ <view class="tree-grid">
|
|
|
+ <view v-for="(row, rowIndex) in rowList" :key="rowIndex" class="grid-row">
|
|
|
+ <text class="row-index">{{ rowIndex + 1 }}</text>
|
|
|
+ <view v-for="cell in row" :key="cell.index" class="grid-cell">
|
|
|
+ <text class="cell-index">{{ cell.index }}</text>
|
|
|
+ <input
|
|
|
+ class="num-input"
|
|
|
+ :value="numList[cell.index]"
|
|
|
+ type="number"
|
|
|
+ @input="handleNumInput(cell.index, $event)"
|
|
|
+ @focus="handleInputFocus(cell.index)"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="delete-row-btn" @click="deleteRow(rowIndex)">删除</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <view class="app-footer footer-button">
|
|
|
+ <button class="admin-button-com big blue" @click="clearTree">清除全部</button>
|
|
|
+ <button class="admin-button-com big blue footer-btn" @click="goBack">返回</button>
|
|
|
+ <button class="admin-button-com big blue footer-btn" @click="confirmTree">保存</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "tree",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ price: "",
|
|
|
+ numList: {},
|
|
|
+ cellCount: 15,
|
|
|
+ stock: 0,
|
|
|
+ unitName: "个"
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ totalNum() {
|
|
|
+ let total = 0;
|
|
|
+ Object.keys(this.numList).forEach((key) => {
|
|
|
+ let num = Number(this.numList[key]);
|
|
|
+ if (!isNaN(num) && num > 0) {
|
|
|
+ total += num;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return parseFloat(total.toFixed(0));
|
|
|
+ },
|
|
|
+ filledNum() {
|
|
|
+ let total = 0;
|
|
|
+ Object.keys(this.numList).forEach((key) => {
|
|
|
+ let num = Number(this.numList[key]);
|
|
|
+ if (!isNaN(num) && num > 0) {
|
|
|
+ total += 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return total;
|
|
|
+ },
|
|
|
+ totalAmount() {
|
|
|
+ let price = Number(this.price);
|
|
|
+ if (isNaN(price) || price <= 0 || this.totalNum <= 0) {
|
|
|
+ return "0";
|
|
|
+ }
|
|
|
+ return parseFloat((this.totalNum * price).toFixed(2));
|
|
|
+ },
|
|
|
+ rowList() {
|
|
|
+ let rows = [];
|
|
|
+ for (let i = 1; i <= this.cellCount; i += 5) {
|
|
|
+ let row = [];
|
|
|
+ for (let j = i; j < i + 5 && j <= this.cellCount; j++) {
|
|
|
+ row.push({ index: j });
|
|
|
+ }
|
|
|
+ rows.push(row);
|
|
|
+ }
|
|
|
+ return rows;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.price = this.option.price ? this.option.price : "";
|
|
|
+ this.stock = this.option.stock ? Number(this.option.stock) : 0;
|
|
|
+ this.unitName = this.option.smallUnit ? this.option.smallUnit : "个";
|
|
|
+ this.initSaveInfo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ },
|
|
|
+ getStorageKey() {
|
|
|
+ return "tree" + this.option.customId;
|
|
|
+ },
|
|
|
+ getPtItemId() {
|
|
|
+ return this.option.ptItemId ? this.option.ptItemId : 0;
|
|
|
+ },
|
|
|
+ initSaveInfo() {
|
|
|
+ let saveInfo = uni.getStorageSync(this.getStorageKey());
|
|
|
+ let ptItemId = this.getPtItemId();
|
|
|
+ if (this.$util.isEmpty(saveInfo)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ saveInfo.forEach((item) => {
|
|
|
+ if (item.ptItemId == ptItemId) {
|
|
|
+ if (!this.$util.isEmpty(item.price)) {
|
|
|
+ this.price = item.price;
|
|
|
+ }
|
|
|
+ let list = item.list ? item.list : [];
|
|
|
+ list.forEach((hasItem) => {
|
|
|
+ this.$set(this.numList, hasItem.index, hasItem.num);
|
|
|
+ if (Number(hasItem.index) > this.cellCount) {
|
|
|
+ this.cellCount = Math.ceil(Number(hasItem.index) / 5) * 5;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleInputFocus(index) {
|
|
|
+ this.$set(this.numList, index, "");
|
|
|
+ },
|
|
|
+ handleNumInput(index, event) {
|
|
|
+ this.$set(this.numList, index, event.detail.value);
|
|
|
+ },
|
|
|
+ addRow() {
|
|
|
+ this.cellCount += 5;
|
|
|
+ },
|
|
|
+ deleteRow(rowIndex) {
|
|
|
+ let startIndex = rowIndex * 5 + 1;
|
|
|
+ let endIndex = startIndex + 4;
|
|
|
+ if (this.cellCount <= 5) {
|
|
|
+ for (let i = startIndex; i <= endIndex; i++) {
|
|
|
+ this.$delete(this.numList, i);
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let newNumList = {};
|
|
|
+ Object.keys(this.numList).forEach((key) => {
|
|
|
+ let index = Number(key);
|
|
|
+ if (index < startIndex) {
|
|
|
+ newNumList[index] = this.numList[key];
|
|
|
+ }
|
|
|
+ if (index > endIndex) {
|
|
|
+ newNumList[index - 5] = this.numList[key];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.numList = newNumList;
|
|
|
+ this.cellCount -= 5;
|
|
|
+ },
|
|
|
+ clearTree() {
|
|
|
+ this.$util.confirmModal({ content: "确认全部清除？" }, () => {
|
|
|
+ this.confirmClearTree();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirmClearTree() {
|
|
|
+ let saveInfo = uni.getStorageSync(this.getStorageKey());
|
|
|
+ let ptItemId = this.getPtItemId();
|
|
|
+ if (!this.$util.isEmpty(saveInfo)) {
|
|
|
+ for (let i = saveInfo.length - 1; i >= 0; i--) {
|
|
|
+ if (saveInfo[i].ptItemId == ptItemId) {
|
|
|
+ saveInfo.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ uni.setStorageSync(this.getStorageKey(), saveInfo);
|
|
|
+ }
|
|
|
+ this.numList = {};
|
|
|
+ //返回上一页带参数
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ let prevPage = pages[pages.length - 2];
|
|
|
+ //修改上一页data里面的treeData
|
|
|
+ prevPage.$vm.treeData = { price: null, stock: 0, hasUpdate: 1, cancel: 1 };
|
|
|
+ uni.navigateBack({});
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ //返回上一页带参数
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ let prevPage = pages[pages.length - 2];
|
|
|
+ //修改上一页data里面的treeData
|
|
|
+ prevPage.$vm.treeData = { price: this.price, stock: 0, hasUpdate: 0, cancel: 0 };
|
|
|
+ uni.navigateBack({});
|
|
|
+ },
|
|
|
+ confirmTree() {
|
|
|
+ if (this.$util.isMoney(this.price) == false) {
|
|
|
+ this.$msg("请填写单价");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (this.totalNum <= 0) {
|
|
|
+ this.$msg("请填写数量");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (this.totalNum > this.stock) {
|
|
|
+ this.$msg("数量超过总库存");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ let arr = [];
|
|
|
+ Object.keys(this.numList).forEach((index) => {
|
|
|
+ let num = this.numList[index];
|
|
|
+ if (!this.$util.isEmpty(num) && Number(num) > 0) {
|
|
|
+ arr.push({ index: Number(index), num: num });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.saveTreeInfo(arr);
|
|
|
+ //返回上一页带参数
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ let prevPage = pages[pages.length - 2];
|
|
|
+ //修改上一页data里面的treeData
|
|
|
+ prevPage.$vm.treeData = { price: this.price, stock: this.totalNum, hasUpdate: 1, cancel: 0 };
|
|
|
+ uni.navigateBack({});
|
|
|
+ },
|
|
|
+ saveTreeInfo(list) {
|
|
|
+ let saveInfo = uni.getStorageSync(this.getStorageKey());
|
|
|
+ let ptItemId = this.getPtItemId();
|
|
|
+ if (!this.$util.isEmpty(saveInfo)) {
|
|
|
+ let getIndex = -1;
|
|
|
+ saveInfo.forEach((treeItem, treeIndex) => {
|
|
|
+ if (treeItem.ptItemId == ptItemId) {
|
|
|
+ getIndex = treeIndex;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (getIndex > -1) {
|
|
|
+ saveInfo[getIndex].list = list;
|
|
|
+ saveInfo[getIndex].price = this.price;
|
|
|
+ } else {
|
|
|
+ saveInfo.push({ ptItemId: ptItemId, price: this.price, list: list });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ saveInfo = [{ ptItemId: ptItemId, price: this.price, list: list }];
|
|
|
+ }
|
|
|
+ uni.setStorageSync(this.getStorageKey(), saveInfo);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tree-page {
|
|
|
+ height: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.top-wrap {
|
|
|
+ padding: 20upx 26upx 0;
|
|
|
+ border-bottom: 1upx solid #d8d8d8;
|
|
|
+}
|
|
|
+.formula-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 70upx;
|
|
|
+}
|
|
|
+.count-box,
|
|
|
+.price-input {
|
|
|
+ width: 238upx;
|
|
|
+ height: 58upx;
|
|
|
+ line-height: 58upx;
|
|
|
+ border: 1upx solid #b7b7b7;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.count-box {
|
|
|
+ color: #666666;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.symbol {
|
|
|
+ margin: 0 36upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.amount {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.stock-row {
|
|
|
+ height: 78upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.add-row-btn {
|
|
|
+ min-width: 145upx;
|
|
|
+ height: 66upx;
|
|
|
+ line-height: 66upx;
|
|
|
+ padding: 0 18upx;
|
|
|
+}
|
|
|
+.content-scroll {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+}
|
|
|
+.tree-grid {
|
|
|
+ padding: 16upx 8upx 150upx;
|
|
|
+}
|
|
|
+.grid-row {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ padding-left: 36upx;
|
|
|
+ margin-top: 18upx;
|
|
|
+}
|
|
|
+.grid-row:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+}
|
|
|
+.row-index {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 48upx;
|
|
|
+ width: 28upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #006dff;
|
|
|
+}
|
|
|
+.grid-cell {
|
|
|
+ width: 104upx;
|
|
|
+ margin-left: 16upx;
|
|
|
+}
|
|
|
+.grid-cell:first-of-type {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+.cell-index {
|
|
|
+ display: block;
|
|
|
+ height: 30upx;
|
|
|
+ line-height: 30upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #b6b6b6;
|
|
|
+}
|
|
|
+.num-input {
|
|
|
+ width: 104upx;
|
|
|
+ height: 70upx;
|
|
|
+ line-height: 70upx;
|
|
|
+ margin-top: 8upx;
|
|
|
+ border: 1upx solid #b7b7b7;
|
|
|
+ background: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 25upx;
|
|
|
+ color: #000000;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.delete-row-btn {
|
|
|
+ width: 60upx;
|
|
|
+ height: 70upx;
|
|
|
+ line-height: 70upx;
|
|
|
+ margin-top: 38upx;
|
|
|
+ margin-left: 12upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #ff4d4f;
|
|
|
+ border-radius: 6upx;
|
|
|
+}
|
|
|
+.footer-button {
|
|
|
+ height: 120upx;
|
|
|
+ padding: 0 64upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.footer-btn {
|
|
|
+ margin-left: 58upx;
|
|
|
+}
|
|
|
+</style>
|
