JNBusiness/ruoyi-ui/src/views/redBook/productSelect.vue

<template>
  <div class="app-container">
    <el-form label-width="100px">
      <el-row style="letter-spacing: 3px;" :gutter="5">
        <el-col :span="12">
          <el-card id="scroll" class="box-card scrollable" :style="{'overflow': 'auto','max-height': scrollableHeight,'height': scrollableHeight}">
            <el-form-item label="目录:">
              <el-button class="block" size="mini" :type="selectedModelTag==item.name_0?'warning':'primary'" plain @click="selModelTag(item)" v-for="(item, index) in modelList" :key="index">{{item.name_0}}</el-button>
            </el-form-item>
            <el-form-item label="备注:" v-if="showRemarkList">
              <div v-for="(item, index) in remarkList" :key="index" style="line-height: 25px">
                {{index+1}}、{{item.remark_0}}
              </div>
            </el-form-item>
            <el-form-item label="型号:" v-if="showXinghList">
              <el-button class="block" size="mini" :type="selectedXinghTag==item.name_0?'warning':'primary'" plain @click="selXinghTag(item)" v-for="(item, index) in xinghList" :key="index">{{item.name_0}}</el-button>
            </el-form-item>
            <el-form-item label="子类:" v-if="showZlList">
              <el-button class="block" size="mini" :type="selectedZlTag==item.name_0?'warning':'primary'" plain @click="selZlTag(item)" v-for="(item, index) in zlList" :key="index">{{item.name_0}}</el-button>
            </el-form-item>
            <el-form-item label="衍生型号:" v-if="showYsxhList">
              <el-button class="block" size="mini" :type="selectedYsxhTag==item.name_0?'warning':'primary'" plain @click="selYsxhTag(item)" v-for="(item, index) in ysxhList" :key="index">{{item.name_0}}</el-button>
            </el-form-item>
            <el-form-item label="截面:" v-if="showJmList">
              <el-button class="block" size="mini" :type="selectedJmTag==item.section?'warning':'primary'" plain @click="selJmTag(item)" v-for="(item, index) in jmList" :key="index">{{item.section}}</el-button>
            </el-form-item>

            <el-table width="100%" v-loading="searchResultLoading" ref="searchResultTable" :data="searchResultPagedData" @row-dblclick="handleRowDblclick">
              <el-table-column label="uid" align="center" prop="uid_0" v-if="false"/>
              <el-table-column label="型号" align="center" prop="name_0" width="280"/>
              <el-table-column label="电压" align="center" prop="voltage" width="120"/>
              <el-table-column label="红本价(元)" align="center" prop="price" width="120"/>
              <el-table-column label="单位" align="center" prop="stu"/>
            </el-table>
            <pagination
              v-show="searchResultTotal>0"
              :total="searchResultTotal"
              :page.sync="searchResultCurrentPage"
              :limit.sync="searchResultPageSize"
              @size-change="handleSearchResultSizeChange"
              @current-change="handleSearchResultCurrentChange"
            />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card id="scroll" class="box-card scrollable" :style="{'overflow': 'auto','max-height': scrollableHeight,'height': scrollableHeight}">
            <span>批量调折扣率:
              <el-input-number v-model="perc" size="small" controls-position="right" :min="0" :max="6" :step="0.5"></el-input-number>%
              <el-input-number v-model="perc2" size="small" controls-position="right" :min="0" :max="6" :step="0.5"></el-input-number>%
            </span>
            <el-table width="100%;" style="margin-top:5px" ref="selectedResultTable" :data="selectedResultData">
              <el-table-column fixed="left" label="操作" align="center" width="60" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleDeleteClick(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
              <el-table-column label="uid" align="center" prop="uid_0" v-if="false"/>
              <el-table-column label="型号" align="center" prop="name_0" width="180"/>
              <el-table-column label="电压" align="center" prop="voltage" width="120"/>
              <el-table-column label="红本价(元)" align="center" prop="price" width="100"/>
              <el-table-column label="单位" align="center" prop="stu" width="80"/>
              <el-table-column label="一次折扣" align="center" prop="percent" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.percent"/>
                </template>
              </el-table-column>
              <el-table-column label="二次折扣" align="center" prop="percent2" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.percent2"/>
                </template>
              </el-table-column>
              <el-table-column label="单价" align="center" prop="setPrice" width="100"/>
              <el-table-column label="数量调整" align="center" prop="count" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.count"/>
                </template>
              </el-table-column>
              <el-table-column label="总价" align="center" prop="allPrice" width="100"/>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<style>
  .block {
    margin: 5px;
    display: inline-block;
  }
  /*卡片内容滚动条设置*/
  .scrollable::-webkit-scrollbar {
    display: none; /* 对于Webkit浏览器 */
  }

</style>
<script>
  import {toDecimal, productList,productRemarkList,productXinghList,judgeparent,productZlList,productYsxhListCheck,productYsxhList,productJmListCheck,productJmList,searchData} from "@/api/redBook/redBook";

  export default {
        name: "productSelect",
        data() {
          return {
            //内容高度
            scrollableHeight:null,
            //选中的目录tag
            selectedModelTag:"",
            selectedModelUid:"",
            //选中的型号tag
            selectedXinghTag:"",
            selectedXinghUid:"",
            //选中的子类tag
            selectedZlTag:"",
            selectedZlUid:"",
            //选中的衍生型号tag
            selectedYsxhTag:"",
            selectedYsxhUid:"",
            //选中的截面tag
            selectedJmTag:"",

            //目录
            modelList: [],
            //备注信息
            showRemarkList: false,
            remarkList: [],
            //型号
            showXinghList: false,
            xinghList: [],
            //子类
            showZlList: false,
            ZlList: [],
            //衍生型号
            showYsxhList: false,
            ysxhList: [],
            //截面
            showJmList: false,
            jmList: [],

            /**==============查询结果========================= */
            // 遮罩层
            searchResultLoading: false,
            // 查询结果数据
            searchResultTotal: 0,
            searchResultCurrentPage: 1,
            searchResultPageSize: 10,
            searchResultData: [],

            //已选择的数据
            selectedResultData: [],

            //折扣率 初始值
            perc: 0,
            perc2: 0
          }
        },
        created() {
          this.productList();
        },
        mounted(){
          /*设置内容高度*/
          this.scrollableHeight = (window.innerHeight - 130) + 'px';
        },
        methods: {
          //目录选择
          selModelTag(item){
            this.showRemarkList = false,
            this.remarkList = [],

            this.selectedXinghTag = '';
            this.showXinghList = false,
            this.xinghList = [],

            this.selectedZlTag = '';
            this.showZlList = false,
            this.ZlList = [],

            this.selectedYsxhTag = '';
            this.showYsxhList = false,
            this.ysxhList = [],

            this.selectedJmTag = '';
            this.showJmList = false,
            this.jmList = [],

            this.searchResultCurrentPage = 1,
            this.searchResultPageSize = 10,
            this.searchResultData = [],

            this.selectedModelTag = item.name_0;
            console.log(this.selectedModelTag)
            //显示备注信息
            this.productRemarkList(item.uid_0)
            //显示型号
            this.productXinghList(item.uid_0)
          },
          //获取目录
          productList(){
            productList().then(response => {
              console.log(response)
              this.modelList = response;
            });
          },
          //获取备注信息
          productRemarkList(sid){
            this.params = {uid_0:sid}
            productRemarkList(this.params).then(response => {
              this.remarkList = response;
              this.showRemarkList = this.remarkList.length>0?true:false
            });
          },
          //获取型号
          productXinghList(sid){
            this.params = {uid_0:sid}
            productXinghList(this.params).then(response => {
              this.xinghList = response;
              this.showXinghList = this.xinghList.length>0?true:false
            });
          },
          //型号选择
          selXinghTag(item){
            this.selectedZlTag = '';
            this.showZlList = false,
            this.ZlList = [],

            this.selectedYsxhTag = '';
            this.showYsxhList = false,
            this.ysxhList = [],

            this.selectedJmTag = '';
            this.showJmList = false,
            this.jmList = [],

            this.searchResultCurrentPage = 1,
            this.searchResultPageSize = 10,
            this.searchResultData = [],

            this.selectedXinghTag = item.name_0;
            console.log(this.selectedXinghTag)
            //判断是否为父节点，如果有说明下面还有子类显示，如果没有则直接显示衍生型号
            this.judgeparent(item)
          },
          //判断是否为父节点，如果有说明下面还有子类显示，如果没有则直接显示衍生型号
          judgeparent(item){
            this.params = {uid_0:item.uid_0}
            judgeparent(this.params).then(response => {
              if(response){//存在子类
                this.productZlList(item.uid_0)
              }else{//判断是否存在衍生型号
                this.productYsxhListCheck(item.uid_0,item.name_0)
              }
            });
          },
          //获取子类
          productZlList(sid){
            this.params = {uid_0:sid}
            productZlList(this.params).then(response => {
              this.zlList = response;
              this.showZlList = this.zlList.length>0?true:false
            });
          },
          //判断是否存在衍生型号
          productYsxhListCheck(sid,name){
            this.params = {uid_0:sid}
            productYsxhListCheck(this.params).then(response => {
              if(response){//存在衍生型号
                this.productYsxhList(sid,name)
              }else{
                this.selectedYsxhUid = sid;
                this.selectedYsxhTag = name;
                //检查是否存在截面
                this.productJmListCheck(sid,name)
              }
            });
          },
          //获取衍生型号
          productYsxhList(sid,name){
            this.params = {uid_0:sid,name_0:name}
            productYsxhList(this.params).then(response => {
              this.ysxhList = response;
              this.showYsxhList = this.ysxhList.length>0?true:false
            });
          },

          //子类选择
          selZlTag(item){
            this.selectedYsxhTag = '';
            this.showYsxhList = false,
            this.ysxhList = [],

            this.selectedJmTag = '';
            this.showJmList = false,
            this.jmList = [],

            this.searchResultCurrentPage = 1,
            this.searchResultPageSize = 10,
            this.searchResultData = [],

            this.selectedZlTag = item.name_0;
            console.log(this.selectedZlTag)

            this.productYsxhListCheck(item.uid_0,item.name_0)
          },

          //衍生型号选择
          selYsxhTag(item){
            this.selectedJmTag = '';
            this.selectedYsxhUid = item.uid_0;
            this.showJmList = false,
            this.jmList = [],

            this.searchResultCurrentPage = 1,
            this.searchResultPageSize = 10,
            this.searchResultData = [],

            this.selectedYsxhTag = item.name_0;
            console.log(this.selectedYsxhTag)
            this.productJmListCheck(item.uid_0,item.name_0)
          },
          //判断是否存在截面
          productJmListCheck(sid,name){
            this.params = {uid_0:sid}
            productJmListCheck(this.params).then(response => {
              if(response){//存在截面
                this.productJmList(sid,name)
              }else{
                //输出结果
                console.log("结果表格输出")
                //TODO 直接输出结果表格
              }
            });
          },
          //获取截面
          productJmList(sid,name){
            this.params = {uid_0:sid,name_0:name}
            productJmList(this.params).then(response => {
              this.jmList = response;
              this.showJmList = this.jmList.length>0?true:false
            });
          },
          //截面选择
          selJmTag(item){
            this.selectedJmTag = item.section;
            console.log(this.selectedYsxhTag)
            console.log(this.selectedYsxhUid)

            this.searchResultCurrentPage = 1,
            this.searchResultPageSize = 10,
            this.searchResultData = [],

            this.searchResultLoading = true;
            this.searchData(this.selectedYsxhUid,item.section)
          },

          //查询数据
          searchData(sid,section){
            this.params = {uid_0:sid,section:section,name_0:this.selectedYsxhTag}
            searchData(this.params).then(response => {
              console.log(response)
              this.searchResultData = response;
              this.searchResultTotal = this.searchResultData.length;
              this.searchResultCurrentPage = 1;
              this.searchResultLoading = false;
            });
          },
          //双击事件
          handleRowDblclick(row, event, column){
            const price = row.price;
            const percent = '1';
            const percent2 = '1';
            const count = '1';
            row.percent = percent;
            row.percent2 = percent2;
            row.setPrice = price;
            row.count = count;
            const allPrice = toDecimal(count*price);
            row.allPrice = allPrice;
            this.selectedResultData.push(row)
          },

          //删除已选数据
          handleDeleteClick(index){
            this.selectedResultData.splice(index, 1)
          },

          /** 切换每页显示条数 */
          handleSearchResultSizeChange(val) {
            this.bankCodePageSize = val;
            this.bankCodeCurrentPage = 1;
          },
          /** 页码选择 */
          handleSearchResultCurrentChange(val) {
            this.bankCodeCurrentPage = val;
          },
        },
        updated(){
          // 监听数据变化时，滚动条保持在底部
          let div = document.getElementById("scroll")
          div.scrollTop = div.scrollHeight
        },
        computed: {
          // 计算出当前页的查询结果数据列表
          searchResultPagedData() {
            console.log(this.searchResultData)
            const startIndex = (this.searchResultCurrentPage - 1) * this.searchResultPageSize;
            const endIndex = startIndex + this.searchResultPageSize;
            return this.searchResultData.slice(startIndex, endIndex);
          },
        },
    }
</script>

<style scoped>

</style>