|
|
@@ -1,416 +1,657 @@
|
|
|
<style lang="scss" scoped>
|
|
|
- .app-list-content{
|
|
|
- min-width: 1000px;
|
|
|
+.app-list-content {
|
|
|
+ min-width: 1000px;
|
|
|
+}
|
|
|
+.left-box {
|
|
|
+ width: 30%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.content-box {
|
|
|
+ width: 5%;
|
|
|
+ height: 100%;
|
|
|
+ .switchover-box {
|
|
|
+ div {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #797979;
|
|
|
+ border: 1px solid #dadada;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 36px;
|
|
|
+ cursor: pointer; //小手
|
|
|
}
|
|
|
- .left-box{
|
|
|
- width: 30%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .content-box{
|
|
|
- width: 5%;
|
|
|
- height: 100%;
|
|
|
- .switchover-box{
|
|
|
- div{
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- margin-top: 20px;
|
|
|
- color: #797979;
|
|
|
- border: 1px solid #dadada;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 36px;
|
|
|
- cursor:pointer; //小手
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
+.right-box {
|
|
|
+ width: 65%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ width: calc(100% - 2px);
|
|
|
+ height: 40px;
|
|
|
+ /*border: 1px solid #eee;*/
|
|
|
+ border: 1px solid #dadada;
|
|
|
+}
|
|
|
+.center-box {
|
|
|
+ margin-top: 20px;
|
|
|
+ height: calc(100% - 64px);
|
|
|
+ .class-list {
|
|
|
+ width: 30%;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #dadada;
|
|
|
+ overflow: scroll;
|
|
|
+ div {
|
|
|
+ height: 40px;
|
|
|
+ cursor: pointer; //小手
|
|
|
+ &.active {
|
|
|
+ color: #ffffff;
|
|
|
+ background: #00ccff;
|
|
|
+ }
|
|
|
}
|
|
|
- .right-box{
|
|
|
- width: 65%;
|
|
|
- height: 100%;
|
|
|
+ & > .class_name {
|
|
|
+ background: #ccc;
|
|
|
}
|
|
|
- .title{
|
|
|
- width: calc(100% - 2px);
|
|
|
+ }
|
|
|
+ .item-box {
|
|
|
+ position: relative;
|
|
|
+ width: 65%;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #dadada;
|
|
|
+ padding: 0 10px;
|
|
|
+ .item-seek-box {
|
|
|
+ height: 80px;
|
|
|
+ border-bottom: 1px solid #dadada;
|
|
|
+ input {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 40px;
|
|
|
+ border: none;
|
|
|
+ background: #f1f2f6;
|
|
|
+ }
|
|
|
+ .item-seek-btn {
|
|
|
+ width: 100px;
|
|
|
height: 40px;
|
|
|
- /*border: 1px solid #eee;*/
|
|
|
- border: 1px solid #dadada;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #169bd5;
|
|
|
+ cursor: pointer; //小手
|
|
|
+ }
|
|
|
}
|
|
|
- .center-box{
|
|
|
- margin-top: 20px;
|
|
|
- height: calc(100% - 64px);
|
|
|
- .class-list{
|
|
|
- width: 30%;
|
|
|
- height: 100%;
|
|
|
- border: 1px solid #dadada;
|
|
|
- overflow: scroll;
|
|
|
- div{
|
|
|
- height: 40px;
|
|
|
- cursor:pointer; //小手
|
|
|
- &.active{
|
|
|
- color: #ffffff;
|
|
|
- background: #00ccff;
|
|
|
- }
|
|
|
- }
|
|
|
- &>.class_name{
|
|
|
- background: #ccc;
|
|
|
- }
|
|
|
- }
|
|
|
- .item-box{
|
|
|
- position: relative;
|
|
|
- width: 65%;
|
|
|
- height: 100%;
|
|
|
- border: 1px solid #dadada;
|
|
|
- padding: 0 10px;
|
|
|
- .item-seek-box{
|
|
|
- height: 80px;
|
|
|
- border-bottom: 1px solid #dadada;
|
|
|
- input{
|
|
|
- width: calc(100% - 60px);
|
|
|
- padding: 0 10px;
|
|
|
- height: 40px;
|
|
|
- border: none;
|
|
|
- background: #f1f2f6;
|
|
|
- }
|
|
|
- .item-seek-btn{
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- color: #ffffff;
|
|
|
- background: #169bd5;
|
|
|
- cursor:pointer; //小手
|
|
|
- }
|
|
|
- }
|
|
|
- .infinite-list-title{
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
- .infinite-list{
|
|
|
- height: calc(100% - 40px - 80px);
|
|
|
- .infinite-list-item{
|
|
|
- height: 60px;
|
|
|
- cursor:pointer; //小手
|
|
|
- span{
|
|
|
- margin: 0 10px;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item-menu-box{
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: calc(100% - 20px);
|
|
|
- height: 40px;
|
|
|
- padding: 0 10px;
|
|
|
- background: #f7f7f7;
|
|
|
- border-top: 1px solid #dadada;
|
|
|
- }
|
|
|
- }
|
|
|
- .unSlect{
|
|
|
- color: #b3b3b3;
|
|
|
- }
|
|
|
- .select{
|
|
|
- color: #169bd5;
|
|
|
+ .infinite-list-title {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .infinite-list {
|
|
|
+ height: calc(100% - 40px - 80px);
|
|
|
+ .infinite-list-item {
|
|
|
+ height: 60px;
|
|
|
+ cursor: pointer; //小手
|
|
|
+ span {
|
|
|
+ margin: 0 10px;
|
|
|
}
|
|
|
- .disbale{
|
|
|
- color: #eee;
|
|
|
- cursor:not-allowed;
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-menu-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 10px;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border-top: 1px solid #dadada;
|
|
|
}
|
|
|
+ }
|
|
|
+ .unSlect {
|
|
|
+ color: #b3b3b3;
|
|
|
+ }
|
|
|
+ .select {
|
|
|
+ color: #169bd5;
|
|
|
+ }
|
|
|
+ .disbale {
|
|
|
+ color: #eee;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
- <div class="flex-center-between app-list-content">
|
|
|
- <div class="left-box">
|
|
|
- <div class="flex-center-center title">平台花材</div>
|
|
|
- <div class="flex-center-between center-box">
|
|
|
- <div class="class-list">
|
|
|
- <div class="flex-center-center" v-for="(res, index) in leftClassList" :key="index" @click="classTabChange(res,index)" :class="{'class_name': leftTabCurrent == index}">{{res.name}}</div>
|
|
|
- </div>
|
|
|
- <div class="item-box">
|
|
|
- <div class="flex-center item-seek-box">
|
|
|
- <input type="text" placeholder="请输入花材名称，支持拼音首字母搜索">
|
|
|
- <div class="flex-center-center item-seek-btn">搜索</div>
|
|
|
- </div>
|
|
|
- <ul class="infinite-list" v-infinite-scroll="classIfyClick" style="overflow:auto">
|
|
|
- <li v-for="(value, index) in leftItemList" class="flex-center infinite-list-item" :key="index" @click="leftSelect(value, index)">
|
|
|
- <span class="el-icon-success disbale" v-if="value.select == 1"></span>
|
|
|
- <span class="el-icon-success" :class="value.Uselect ? 'select' : 'unSlect'" v-else></span>
|
|
|
- <span>{{ index + 1 }}</span>
|
|
|
- <img :src="value.cover" alt="">
|
|
|
- <span>{{value.name}}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="flex-center item-menu-box">
|
|
|
- <el-checkbox @change="allSelectItem" v-model="checkedAll">全选</el-checkbox>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="flex-center-between app-list-content">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="flex-center-center title">平台花材</div>
|
|
|
+ <div class="flex-center-between center-box">
|
|
|
+ <div class="class-list">
|
|
|
+ <div
|
|
|
+ class="flex-center-center"
|
|
|
+ v-for="(res, index) in leftClassList"
|
|
|
+ :key="index"
|
|
|
+ @click="classTabChange(res,index)"
|
|
|
+ :class="{'class_name': leftTabCurrent == index}"
|
|
|
+ >{{res.name}}</div>
|
|
|
</div>
|
|
|
- <div class="flex-center-center content-box">
|
|
|
- <div class="switchover-box">
|
|
|
- <!-- 向右移动 -->
|
|
|
- <div class="flex-center-center" @click="turnRight">→</div>
|
|
|
- <!-- 向左移动 -->
|
|
|
- <div class="flex-center-center" @click="turnLsft">←</div>
|
|
|
- </div>
|
|
|
+ <div class="item-box">
|
|
|
+ <div class="flex-center item-seek-box">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入花材名称，支持拼音首字母搜索"
|
|
|
+ >
|
|
|
+ <div class="flex-center-center item-seek-btn">搜索</div>
|
|
|
+ </div>
|
|
|
+ <ul
|
|
|
+ class="infinite-list"
|
|
|
+ v-infinite-scroll="classIfyClick"
|
|
|
+ style="overflow:auto"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(value, index) in leftItemList"
|
|
|
+ class="flex-center infinite-list-item"
|
|
|
+ :key="index"
|
|
|
+ @click="leftSelect(value, index)"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="el-icon-success disbale"
|
|
|
+ v-if="value.select == 1"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="el-icon-success"
|
|
|
+ :class="value.Uselect ? 'select' : 'unSlect'"
|
|
|
+ v-else
|
|
|
+ ></span>
|
|
|
+ <span>{{ index + 1 }}</span>
|
|
|
+ <img
|
|
|
+ :src="value.cover"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ <span>{{value.name}}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="flex-center item-menu-box">
|
|
|
+ <el-checkbox
|
|
|
+ @change="allSelectItem"
|
|
|
+ v-model="checkedAll"
|
|
|
+ >全选</el-checkbox>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="right-box">
|
|
|
- <div class="flex-center-center title">我的花材</div>
|
|
|
- <div class="flex-center-between center-box">
|
|
|
- <div class="item-box">
|
|
|
- <div class="flex-center infinite-list-title">
|
|
|
- <div style="width: 70px;text-align: center">选择</div>
|
|
|
- <div style="width: 70px;text-align: center">图片</div>
|
|
|
- <div style="width: 100px;text-align: center">名称</div>
|
|
|
- <div style="width: 100px;text-align: center">售价</div>
|
|
|
- <div style="width: 100px;text-align: center">初始库存</div>
|
|
|
- <div style="width: 100px;text-align: center">库存预警</div>
|
|
|
- </div>
|
|
|
- <ul class="infinite-list" v-infinite-scroll="rightScroll" style="height: calc(100% - 80px);overflow:auto">
|
|
|
- <li v-for="(item, index) in rightItemList" class="flex-center infinite-list-item" :key="index" @click="rightSelect(item, index)">
|
|
|
- <div style="width: 70px;text-align: center" >
|
|
|
- <span class="el-icon-success disbale" v-if="item.select"></span>
|
|
|
- <span class="el-icon-success" v-else :class="item.Uselect ? 'select' : 'unSlect'" ></span>
|
|
|
- </div>
|
|
|
- <div style="width: 70px;text-align: center">
|
|
|
- <img :src="item.cover" alt="">
|
|
|
- </div>
|
|
|
- <div style="width: 100px;text-align: center">
|
|
|
- <el-input style="width: 80px;" v-model="item.name" placeholder="请输入" :disabled="item.select"></el-input>
|
|
|
- </div>
|
|
|
- <div style="width: 100px;text-align: center">
|
|
|
- <el-input style="width: 80px" v-model="input" placeholder="请输入" :disabled="item.select"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center-center content-box">
|
|
|
+ <div class="switchover-box">
|
|
|
+ <!-- 向右移动 -->
|
|
|
+ <div
|
|
|
+ class="flex-center-center"
|
|
|
+ @click="turnRight"
|
|
|
+ >→</div>
|
|
|
+ <!-- 向左移动 -->
|
|
|
+ <div
|
|
|
+ class="flex-center-center"
|
|
|
+ @click="turnLsft"
|
|
|
+ >←</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="flex-center-center title">我的花材</div>
|
|
|
+ <div class="flex-center-between center-box">
|
|
|
+ <div class="item-box">
|
|
|
+ <div class="flex-center infinite-list-title">
|
|
|
+ <div style="width: 70px;text-align: center">选择</div>
|
|
|
+ <div style="width: 70px;text-align: center">图片</div>
|
|
|
+ <div style="width: 100px;text-align: center">名称</div>
|
|
|
+ <div style="width: 100px;text-align: center">售价</div>
|
|
|
+ <div style="width: 100px;text-align: center">初始库存</div>
|
|
|
+ <div style="width: 100px;text-align: center">库存预警</div>
|
|
|
+ </div>
|
|
|
+ <ul
|
|
|
+ class="infinite-list"
|
|
|
+ v-infinite-scroll="rightScroll"
|
|
|
+ style="height: calc(100% - 80px);overflow:auto"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in rightItemList"
|
|
|
+ class="flex-center infinite-list-item"
|
|
|
+ :key="index"
|
|
|
+ @click="rightSelect(item, index)"
|
|
|
+ >
|
|
|
+ <div style="width: 70px;text-align: center">
|
|
|
+ <span
|
|
|
+ class="el-icon-success disbale"
|
|
|
+ v-if="item.select"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="el-icon-success"
|
|
|
+ v-else
|
|
|
+ :class="item.Uselect ? 'select' : 'unSlect'"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 70px;text-align: center">
|
|
|
+ <img
|
|
|
+ :src="item.cover"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div style="width: 100px;text-align: center">
|
|
|
+ <el-input
|
|
|
+ style="width: 80px;"
|
|
|
+ v-model="item.uname"
|
|
|
+ placeholder="请输入"
|
|
|
+ :disabled="item.select"
|
|
|
+ @click.stop=""
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100px;text-align: center">
|
|
|
+ <el-input
|
|
|
+ style="width: 80px"
|
|
|
+ v-model="item.price"
|
|
|
+ placeholder="请输入"
|
|
|
+ :disabled="item.select"
|
|
|
+ @click.stop=""
|
|
|
+ ></el-input>
|
|
|
|
|
|
- </div>
|
|
|
- <div style="width: 100px;text-align: center">
|
|
|
- <el-input style="width: 80px" v-model="input" placeholder="请输入" :disabled="item.select"></el-input>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100px;text-align: center">
|
|
|
+ <el-input
|
|
|
+ style="width: 80px"
|
|
|
+ v-model="item.stock"
|
|
|
+ placeholder="请输入"
|
|
|
+ :disabled="item.select"
|
|
|
+ @click.stop=""
|
|
|
+ ></el-input>
|
|
|
|
|
|
- </div>
|
|
|
- <div style="width: 100px;text-align: center">
|
|
|
- <el-input style="width: 80px" v-model="item.stockWarning" placeholder="请输入" :disabled="item.select"></el-input>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100px;text-align: center">
|
|
|
+ <el-input
|
|
|
+ style="width: 80px"
|
|
|
+ v-model="item.stockWarning"
|
|
|
+ placeholder="请输入"
|
|
|
+ :disabled="item.select"
|
|
|
+ @click.stop=""
|
|
|
+ ></el-input>
|
|
|
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="flex-center item-menu-box">
|
|
|
- <div class="flex-center-center" style="width: 100px;height: 30px;color: #ffffff;background: #008ad3;border-radius: 5px">保存</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="class-list">
|
|
|
- <div class="flex-center-center " v-for="(res, index) in rightClassList" @click="rightTabClick(res, index)" :key="index" :class="{'class_name': rightTabCurrent == index}">{{res.name}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="flex-center item-menu-box">
|
|
|
+ <div
|
|
|
+ class="flex-center-center"
|
|
|
+ style="width: 100px;height: 30px;color: #ffffff;background: #008ad3;border-radius: 5px;cursor: pointer;"
|
|
|
+ @click="saveBtn"
|
|
|
+ >保存</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="class-list">
|
|
|
+ <div
|
|
|
+ class="flex-center-center "
|
|
|
+ v-for="(res, index) in rightClassList"
|
|
|
+ @click="rightTabClick(res, index)"
|
|
|
+ :key="index"
|
|
|
+ :class="{'class_name': rightTabCurrent == index}"
|
|
|
+ >{{res.name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import { mapGetters } from 'vuex';
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
|
|
|
- export default {
|
|
|
- name: 'item_add',
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- count: 0,
|
|
|
- input: 0,
|
|
|
- checked:false,
|
|
|
- checkedAll:false,
|
|
|
- leftClassList:[],
|
|
|
- leftTabCurrent: 0,
|
|
|
- ptClassName: '',
|
|
|
- ptClassId: '',
|
|
|
- leftItemList: [],
|
|
|
- pageNum: 1,
|
|
|
- maxPage: 0,
|
|
|
- rightClassList: [],
|
|
|
- rightTabCurrent: 0,
|
|
|
- ptRightName: '',
|
|
|
- ptRightId: '',
|
|
|
- pageNum1: 1,
|
|
|
- rightItemList: [],
|
|
|
- maxPage1: 0,
|
|
|
- };
|
|
|
+export default {
|
|
|
+ name: 'item_add',
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ count: 0,
|
|
|
+ input: 0,
|
|
|
+ checked: false,
|
|
|
+ checkedAll: false,
|
|
|
+ leftClassList: [],
|
|
|
+ leftTabCurrent: 0,
|
|
|
+ ptClassName: '',
|
|
|
+ ptClassId: '',
|
|
|
+ leftItemList: [],
|
|
|
+ pageNum: 1,
|
|
|
+ maxPage: 0,
|
|
|
+ rightClassList: [],
|
|
|
+ rightTabCurrent: 0,
|
|
|
+ ptRightName: '',
|
|
|
+ ptRightId: '',
|
|
|
+ pageNum1: 1,
|
|
|
+ rightItemList: [],
|
|
|
+ maxPage1: 0,
|
|
|
+ rightItemList2: [],
|
|
|
+ leftCheckedList: [],
|
|
|
+ rightCheckedList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getLeftList();
|
|
|
+ this.getRightLst()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ leftCheckedList () {
|
|
|
+ if (this.leftItemList.length === this.leftCheckedList.length) {
|
|
|
+ this.checkedAll = true
|
|
|
+ } else {
|
|
|
+ this.checkedAll = false
|
|
|
+ }
|
|
|
},
|
|
|
- mounted(){
|
|
|
- this.getLeftList();
|
|
|
- this.getRightLst()
|
|
|
+ // ptClassId() {
|
|
|
+ // this.getRightItemList()
|
|
|
+ // },
|
|
|
+ // ptRightId() {
|
|
|
+ // this.getItemList()
|
|
|
+ // }
|
|
|
+ // leftItemList: {
|
|
|
+ // handler (newVal) {
|
|
|
+ // newVal.forEach(item => {
|
|
|
+ // if (item.Uselect && item.select !== 1) {
|
|
|
+ // this.leftCheckedList.push(item)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // deep: true
|
|
|
+ // },
|
|
|
+ // leftItemList () {
|
|
|
+ // this.leftItemList.forEach(item => {
|
|
|
+ // if (item.Uselect && item.select !== 1) {
|
|
|
+ // this.leftCheckedList.push(item)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // deep: true
|
|
|
+
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // leftCheckedList () {
|
|
|
+ // let list = [];
|
|
|
+ // if (this.leftItemList) {
|
|
|
+ // this.leftItemList.forEach(item => {
|
|
|
+ // if (item.Uselect && item.select !== 1) {
|
|
|
+ // list.push(item)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // return list
|
|
|
+ // },
|
|
|
+ // rightCheckedList () {
|
|
|
+ // let list = [];
|
|
|
+ // if (this.rightItemList) {
|
|
|
+ // this.rightItemList.forEach(item => {
|
|
|
+ // if (item.Uselect) {
|
|
|
+ // list.push(item)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // return list
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getLeftList () {
|
|
|
+ this.$service.ghsItemClass.getAllClass().then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.leftClassList = res.list
|
|
|
+ this.ptClassName = res.list[0].name
|
|
|
+ this.ptClassId = res.list[0].id
|
|
|
+ this.getItemList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRightLst () {
|
|
|
+ this.$service.itemClass.getAllClass().then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.rightClassList = res.list
|
|
|
+ this.ptRightName = res.list[0].name
|
|
|
+ this.ptRightId = res.list[0].id
|
|
|
+ this.getRightItemList()
|
|
|
+ }).catch(err => { })
|
|
|
},
|
|
|
- watch: {
|
|
|
- leftCheckedList() {
|
|
|
- if(this.leftItemList.length === this.leftCheckedList.length) {
|
|
|
- this.checkedAll = true
|
|
|
+ getItemList () {
|
|
|
+ let data = {
|
|
|
+ page: this.pageNum,
|
|
|
+ pageSize: 10,
|
|
|
+ name: this.ptClassName,
|
|
|
+ classId: this.ptClassId
|
|
|
+ }
|
|
|
+ this.$service.ptItem.list(data).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ res.list.forEach(item => {
|
|
|
+ item.Uselect = false
|
|
|
+ item.flag = true
|
|
|
+ item.price = '0'
|
|
|
+ item.stockWarning = '0'
|
|
|
+ item.stock = '0'
|
|
|
+ item.uname = item.name
|
|
|
+ })
|
|
|
+ if (this.pageNum != 1) {
|
|
|
+ this.leftItemList = this.leftItemList.concat(res.list)
|
|
|
} else {
|
|
|
- this.checkedAll = false
|
|
|
+ this.leftItemList = res.list
|
|
|
}
|
|
|
- }
|
|
|
+ this.maxPage = res.moreData
|
|
|
+ }).catch(err => { })
|
|
|
},
|
|
|
- computed: {
|
|
|
- leftCheckedList() {
|
|
|
- let list = [];
|
|
|
- if(this.leftItemList) {
|
|
|
- this.leftItemList.forEach(item => {
|
|
|
- if(item.Uselect && item.select !== 1) {
|
|
|
- list.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- return list
|
|
|
- },
|
|
|
- rightCheckedList() {
|
|
|
- let list = [];
|
|
|
- if(this.rightItemList) {
|
|
|
- this.rightItemList.forEach(item => {
|
|
|
- if(item.Uselect) {
|
|
|
- list.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- return list
|
|
|
+ getRightItemList () {
|
|
|
+ let data = {
|
|
|
+ page: this.pageNum1,
|
|
|
+ pageSize: 10,
|
|
|
+ classId: this.ptRightId
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getLeftList(){
|
|
|
- this.$service.ghsItemClass.getAllClass().then(res => {
|
|
|
- console.log(res)
|
|
|
- this.leftClassList = res.list
|
|
|
- this.ptClassName = res.list[0].name
|
|
|
- this.ptClassId = res.list[0].id
|
|
|
- this.getItemList()
|
|
|
+ this.$service.item.list(data).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ res.list.forEach(item => {
|
|
|
+ item.select = true
|
|
|
+ item.uname = item.name
|
|
|
})
|
|
|
- },
|
|
|
- getRightLst() {
|
|
|
- this.$service.itemClass.getAllClass().then(res => {
|
|
|
- console.log(res)
|
|
|
- this.rightClassList = res.list
|
|
|
- this.ptRightName = res.list[0].name
|
|
|
- this.ptRightId = res.list[0].id
|
|
|
- this.getRightItemList()
|
|
|
- }).catch(err => {})
|
|
|
- },
|
|
|
- getItemList() {
|
|
|
- let data = {
|
|
|
- page: this.pageNum,
|
|
|
- pageSize: 10,
|
|
|
- name: this.ptClassName,
|
|
|
- classId: this.ptClassId
|
|
|
+ if (this.pageNum1 != 1) {
|
|
|
+ this.rightItemList = this.rightItemList.concat(res.list)
|
|
|
+ } else {
|
|
|
+ this.rightItemList = res.list
|
|
|
+ }
|
|
|
+ this.rightItemList2 = this.deepClone(this.rightItemList)
|
|
|
+ this.maxPage1 = res.moreData
|
|
|
+ }).catch(err => { })
|
|
|
+ },
|
|
|
+ allSelectItem (e) {
|
|
|
+ if (this.checkedAll) {
|
|
|
+ this.leftItemList.forEach(item => {
|
|
|
+ if (item.select != 1) {
|
|
|
+ item.Uselect = true
|
|
|
}
|
|
|
- this.$service.ptItem.list(data).then(res => {
|
|
|
- console.log(res)
|
|
|
- res.list.forEach(item => item.Uselect = false)
|
|
|
- if(this.pageNum != 1) {
|
|
|
- this.leftItemList = this.leftItemList.concat(res.list)
|
|
|
- } else {
|
|
|
- this.leftItemList = res.list
|
|
|
- }
|
|
|
- this.maxPage = res.moreData
|
|
|
- }).catch(err => {})
|
|
|
- },
|
|
|
- getRightItemList() {
|
|
|
- let data = {
|
|
|
- page: this.pageNum1,
|
|
|
- pageSize: 10,
|
|
|
- classId: this.ptRightId
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.leftItemList.forEach(item => {
|
|
|
+ if (item.select != 1) {
|
|
|
+ item.Uselect = false
|
|
|
}
|
|
|
- this.$service.item.list(data).then(res => {
|
|
|
- console.log(res)
|
|
|
- res.list.forEach(item => {item.select = true})
|
|
|
- if(this.pageNum1 != 1) {
|
|
|
- this.rightItemList = this.rightItemList.concat(res.list)
|
|
|
- } else {
|
|
|
- this.rightItemList = res.list
|
|
|
- }
|
|
|
- this.maxPage1 = res.moreData
|
|
|
- }).catch(err => {})
|
|
|
- },
|
|
|
- allSelectItem(e){
|
|
|
- if(this.checkedAll) {
|
|
|
- this.leftItemList.forEach(item => {
|
|
|
- if(item.select != 1) {
|
|
|
- item.Uselect = true
|
|
|
- }
|
|
|
- })
|
|
|
- } else{
|
|
|
- this.leftItemList.forEach(item => {
|
|
|
- if(item.select != 1) {
|
|
|
- item.Uselect = false
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- load () {
|
|
|
- this.count += 2
|
|
|
- },
|
|
|
- classTabChange(item,index) {
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ load () {
|
|
|
+ this.count += 2
|
|
|
+ },
|
|
|
+ classTabChange (item, index) {
|
|
|
+ if(this.rightItemList.length !== this.rightItemList2.length) {
|
|
|
+ this.$confirm('有选中的花材,是否继续切换', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
this.leftTabCurrent = index
|
|
|
- console.log(item)
|
|
|
this.ptClassName = item.name
|
|
|
this.ptClassId = item.id
|
|
|
- this.pageNum = 1
|
|
|
- this.getItemList()
|
|
|
- },
|
|
|
- classIfyClick() {
|
|
|
- this.pageNum++
|
|
|
- console.log(this.pageNum, this.maxPage)
|
|
|
- if(this.maxPage == 1) {
|
|
|
- this.getItemList()
|
|
|
- }
|
|
|
- },
|
|
|
- leftSelect(value, index) {
|
|
|
- if(value.select != 1) {
|
|
|
- this.leftItemList[index].Uselect = !this.leftItemList[index].Uselect
|
|
|
+ this.isSelect(item, index)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消切换'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.leftTabCurrent = index
|
|
|
+ this.ptClassName = item.name
|
|
|
+ this.ptClassId = item.id
|
|
|
+ this.isSelect(item, index)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ classIfyClick () {
|
|
|
+ this.pageNum++
|
|
|
+ console.log(this.pageNum, this.maxPage)
|
|
|
+ if (this.maxPage == 1) {
|
|
|
+ this.getItemList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ leftSelect (value, index) {
|
|
|
+ console.log(this.leftItemList, 'this.leftItemList')
|
|
|
+ this.leftCheckedList = []
|
|
|
+ if (value.select != 1) {
|
|
|
+ this.leftItemList[index].Uselect = !this.leftItemList[index].Uselect
|
|
|
+ }
|
|
|
+ this.leftItemList.forEach(item => {
|
|
|
+ if (item.Uselect && item.select !== 1) {
|
|
|
+ this.leftCheckedList.push(item)
|
|
|
}
|
|
|
- },
|
|
|
- rightSelect(item,index) {
|
|
|
- if(!item.select){
|
|
|
- this.rightItemList[index].Uselect = !this.rightItemList[index].Uselect
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rightSelect (item, index) {
|
|
|
+ this.rightCheckedList = []
|
|
|
+ if (!item.select) {
|
|
|
+ this.rightItemList[index].Uselect = !this.rightItemList[index].Uselect
|
|
|
+ }
|
|
|
+ this.rightItemList.forEach(item => {
|
|
|
+ if (item.Uselect) {
|
|
|
+ this.rightCheckedList.push(item)
|
|
|
}
|
|
|
-
|
|
|
- },
|
|
|
- rightTabClick(item, index) {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rightTabClick (item, index) {
|
|
|
+ if(this.rightItemList.length !== this.rightItemList2.length) {
|
|
|
+ this.$confirm('有选中的花材,是否继续切换', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
this.rightTabCurrent = index
|
|
|
this.ptRightName = item.name
|
|
|
this.ptRightId = item.id
|
|
|
- this.pageNum1 = 1
|
|
|
- this.getRightItemList()
|
|
|
- },
|
|
|
- rightScroll() {
|
|
|
- this.pageNum1++
|
|
|
- console.log(this.pageNum1, this.maxPage1)
|
|
|
- if(this.maxPage1 == 1) {
|
|
|
- this.getRightItemList()
|
|
|
+ this.isSelect()
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消切换'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.rightTabCurrent = index
|
|
|
+ this.ptRightName = item.name
|
|
|
+ this.ptRightId = item.id
|
|
|
+ this.isSelect()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 判断是否有选中
|
|
|
+ isSelect() {
|
|
|
+ console.log(this.rightItemList.length, this.rightItemList2.length)
|
|
|
+ this.pageNum = 1
|
|
|
+ this.pageNum1 = 1
|
|
|
+ this.getRightItemList()
|
|
|
+ this.getItemList()
|
|
|
+ },
|
|
|
+ rightScroll () {
|
|
|
+ this.pageNum1++
|
|
|
+ console.log(this.pageNum1, this.maxPage1)
|
|
|
+ if (this.maxPage1 == 1) {
|
|
|
+ this.getRightItemList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 向右移动
|
|
|
+ turnRight () {
|
|
|
+ if (this.leftCheckedList) {
|
|
|
+ let checkList = JSON.parse(JSON.stringify(this.leftCheckedList))
|
|
|
+ checkList.forEach(item => {
|
|
|
+ item.select = false
|
|
|
+ item.Uselect = false
|
|
|
+ let i = this.leftItemList.findIndex(val => val.id == item.id)
|
|
|
+ this.leftItemList.splice(i, 1)
|
|
|
+ })
|
|
|
+ this.rightItemList = [...checkList, ...this.rightItemList]
|
|
|
+ this.leftCheckedList = []
|
|
|
+ } else {
|
|
|
+ this.$message.warning('请先选择花材')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 向左移动
|
|
|
+ turnLsft () {
|
|
|
+ if (this.rightCheckedList.length !== 0) {
|
|
|
+ console.log(this.rightCheckedList)
|
|
|
+ let checkList = JSON.parse(JSON.stringify(this.rightCheckedList))
|
|
|
+ checkList.forEach((item, index) => {
|
|
|
+ item.select = 2
|
|
|
+ item.Uselect = false
|
|
|
+ // this.rightItemList.splice(item, 1);
|
|
|
+ let i = this.rightItemList.findIndex(val => val.id == item.id)
|
|
|
+ console.log(i)
|
|
|
+ this.rightItemList.splice(i, 1)
|
|
|
+ })
|
|
|
+ this.leftItemList = [...checkList, ...this.leftItemList]
|
|
|
+ this.rightCheckedList = []
|
|
|
+ } else {
|
|
|
+ this.$message.warning('请先选择花材')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深拷贝
|
|
|
+ deepClone (target) {
|
|
|
+ let result
|
|
|
+ if (typeof target === 'object') {
|
|
|
+ if (Array.isArray(target)) {
|
|
|
+ result = []
|
|
|
+ for (const i in target) {
|
|
|
+ result.push(this.deepClone(target[i]))
|
|
|
}
|
|
|
- },
|
|
|
- // 向右移动
|
|
|
- turnRight() {
|
|
|
- if(this.leftCheckedList.length !== 0) {
|
|
|
- console.log(this.leftCheckedList, this.rightItemList)
|
|
|
- let checkList = JSON.parse(JSON.stringify(this.leftCheckedList))
|
|
|
- checkList.forEach((item, index) => {
|
|
|
- item.select = false
|
|
|
- item.Uselect = false
|
|
|
- this.leftItemList.splice(item, 1);
|
|
|
- })
|
|
|
- this.rightItemList = [...checkList, ...this.rightItemList]
|
|
|
- this.leftCheckedList = []
|
|
|
- } else {
|
|
|
- this.$message.warning('请先选择花材')
|
|
|
- }
|
|
|
- },
|
|
|
- // 向左移动
|
|
|
- turnLsft() {
|
|
|
- if(this.rightCheckedList.length !== 0) {
|
|
|
- console.log(this.rightCheckedList)
|
|
|
- let checkList = JSON.parse(JSON.stringify(this.rightCheckedList))
|
|
|
- checkList.forEach((item, index) => {
|
|
|
- item.select = 2
|
|
|
- item.Uselect = false
|
|
|
- this.rightItemList.splice(item, 1);
|
|
|
- })
|
|
|
- this.leftItemList = [...checkList, ...this.leftItemList]
|
|
|
- this.rightCheckedList = []
|
|
|
+ } else if (target === null) {
|
|
|
+ result = null
|
|
|
+ } else if (target.constructor === RegExp) {
|
|
|
+ result = target
|
|
|
} else {
|
|
|
- this.$message.warning('请先选择花材')
|
|
|
+ result = {}
|
|
|
+ for (const i in target) {
|
|
|
+ result[i] = this.deepClone(target[i])
|
|
|
+ }
|
|
|
}
|
|
|
+ } else {
|
|
|
+ result = target
|
|
|
}
|
|
|
+ return result
|
|
|
},
|
|
|
- };
|
|
|
+ // 保存
|
|
|
+ saveBtn () {
|
|
|
+ let list = [],
|
|
|
+ num = 0,
|
|
|
+ param = [],
|
|
|
+ obj = {}
|
|
|
+ console.log(this.rightItemList2, this.rightItemList)
|
|
|
+ // this.rightItemList2.forEach(item => {
|
|
|
+ // this.rightItemList.forEach((value, index) => {
|
|
|
+ // if (item.id === value.id) {
|
|
|
+ // num++
|
|
|
+ // list = this.rightItemList.splice(index, 1)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ this.rightItemList.forEach(item => {
|
|
|
+ if(item.flag == true) {
|
|
|
+ list.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(list)
|
|
|
+ list.forEach(item => {
|
|
|
+ obj.itemId = item.id
|
|
|
+ obj.classId = this.ptRightId
|
|
|
+ obj.price = item.price
|
|
|
+ obj.stockWarning = item.stockWarning
|
|
|
+ obj.stock = item.stock
|
|
|
+ obj.name = item.uname
|
|
|
+ param.push(obj)
|
|
|
+ })
|
|
|
+ console.log(JSON.stringify(param))
|
|
|
+ this.$service.item.batchAdd({data: JSON.stringify(param)}).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.isSelect()
|
|
|
+ }).catch(err => {})
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
wangning