yos_web/src/HDrpManagement/contractManage/components/itemClass/add.vue

<template>
  <div>
    <el-button size="small"  type="primary" icon="el-icon-plus" @click="onShow">添加</el-button>
    <el-drawer
        title="添加"
        :visible.sync="dialogProductVisible"
        append-to-body
        size="80%"
        :show-close="false"
        direction="rtl"
        @close="onColes">
      <div class="drawer__panel">
        <div style="display:flex;align-items:center;margin-bottom:10px">
          <span class="header-title">选择报价单：</span>
          <el-popover
              placement="bottom"
              width="700"
              trigger="click"
              v-model="priceShow"
              @show="priceList">
            <el-input
                style="width:300px;margin-bottom: 10px"
                placeholder="请输入内容"
                v-model="params2.content.where.condition"
                clearable
                @clear="priceList(params2.content.pageNumber = 1)"
                size="mini"
                @keyup.enter.native="priceList(params2.content.pageNumber = 1)">
              <i slot="prefix" class="el-icon-search" @click="priceList(params2.content.pageNumber = 1)"></i>
            </el-input>
            <el-table :data="priceData" @row-click="priceDataSelect" height="396px" size="mini">
              <el-table-column
                  label="状态"
                  width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.status?scope.row.status:'--' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  label="单号"
                  width="200">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.billno?scope.row.billno:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                  label="提交人"
              >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.submitby?scope.row.submitby:'--' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  label="提交时间"
              >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.submitdate?scope.row.submitdate:'--' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="container normal-panel" style="text-align:right">
              <el-pagination
                  background
                  small
                  @size-change="handleSizeChangePrice"
                  @current-change="handleCurrentChangePrice"
                  :page-sizes="[10,20,50,100]"
                  layout="total,sizes, prev, pager, next, jumper"
                  :current-page="currentPage2"
                  :total="total2">
              </el-pagination>
            </div>
            <el-input slot="reference"  :readonly="true"  v-model="billno" autocomplete="off" placeholder="请选择报价单" size="small" ></el-input>
          </el-popover>
<!--          <el-input readonly type="text" placeholder="选择报价单" style="width:200px" size="small"  v-model="billno" ></el-input>-->
        </div>
        <el-divider></el-divider>
        <div class="flex-between " style="margin-bottom: 10px">
          <uploadAllData
              style="display: inline-block !important;"
              :total="total"
              @handlePullApi="handlePullApi"
              @handleUploadApi="handleUploadApi"
              @onSuccess="onSuccess"
          ></uploadAllData>
          <el-button class="inline-16" type="primary" size="small" @click="itemClassSelect" :disabled="tableSelectData.length === 0 ">批量添加</el-button>
          <el-input size="small" style="width: 200px"  suffix-icon="el-icon-search" v-model="params.content.where.condition" placeholder="编号、类别名称、品牌" @keyup.enter.native="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" clearable></el-input>&nbsp;

        </div>
        <div class="produtMag-panel">
          <el-table
              ref="multipleTable"
              :data="list"
              style="width: 100%"
              height="calc(100vh - 370px)"
              :header-cell-style="{height:'50px',color:'#606266',fontWeight:'400'}"
              :cell-style="{height:'50px',color:'#666666',fontWeight:'400'}"
              @selection-change="selectionChange">
            <el-table-column
                type="selection"
                width="42"
                fixed>
            </el-table-column>
            <el-table-column
                prop="itemclassnum"
                label="类别编号"
                width="0">
            </el-table-column>
            <el-table-column
                prop="itemclassfullname"
                label="类别名称"
                width="0">
            </el-table-column>
            <el-table-column
                prop="brandname"
                label="品牌"
                width="0">
            </el-table-column>
<!--            <el-table-column
                label="品牌名称"
                width="180">
              <template slot-scope="scope">
                <p><span>{{scope.row.model}}</span>&nbsp;/&nbsp;<span>{{scope.row.spec}}</span></p>
              </template>
            </el-table-column>-->
<!--            <el-table-column
                prop="upitemclassname"
                label="上级类别"
                width="0">
            </el-table-column>-->
            <el-table-column
                prop="discountrate"
                label="折扣(%)"
                width="0">
              <template slot-scope="scope">
                <span>{{Math.round((scope.row.discountrate * 100)*100)/100}}</span>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="80">
              <template slot-scope="scope">
                <el-button type="text" @click="itemClass(scope.row)">添 加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <div style="float: left">已选:{{selectTotal}}个商品</div>
            <div style="margin-top:16px;text-align:right">
              <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="params.content.pageNumber"
                  :page-sizes="[20, 50, 100, 200]"
                  :page-size="100"
                  layout="total,sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onColes" class="normal-btn-width">取 消</el-button>
        <!--        <el-button size="small" type="primary" @click="onSubmit"  class="normal-btn-width">确 定</el-button>-->
      </div>
    </el-drawer>
  </div>
</template>

<script>
import uploadAllData from '@/components/uploadAllData/index'
export default {
  name: "add",
  components:{uploadAllData},
  props:["data"],
  data(){
    return {
      dialogProductVisible:false,
      tablecols:[],
      list:[],
      total:0,
      currentPage:0,
      total2:0,
      currentPage2:0,
      tableSelectData:[],
      selectData:[],
      selectTotal:0,
      priceShow:false,
      priceData:[],
      billno:'',
      params:{
        "id": 20230219202203,
        "content": {
          "sa_contractid": this.$route.query.id,
          "sa_quotedpriceid":'',
          "pageNumber": 1,
          "pageSize": 100,
          "where": {
            "condition": ""
          }
        },
      },
      params2: {
        "id": 20221222151302,
        "content": {
          "sa_projectid": '',
          "pageNumber": 1,
          "pageSize": 20,
          "nocache":true,
          "where": {
            "condition": ""
          }
        },
      },
      timer:0
    }
  },
  methods:{
    onShow(){
      this.dialogProductVisible = true
     /* this.listData()*/
      /*this.priceList()*/
    },
    async listData(){
      const res = await this.$api.requested(this.params)
      this.list = res.data

      this.total = res.total
    },
    debounce (fn, wait) {
      let that = this
      return function () {
        if (that.timer !== null) clearTimeout(that.timer)
        that.timer = setTimeout(fn, wait)
      }
    },
    async itemClassSelect(){
      let checkItem = []
      this.selectData.forEach((item,index)=>{
        checkItem[index] = item.itemclassid
      })
      const res = await this.$api.requested({
        "id": 20230223201103,
        "content": {
          "sa_contractid": this.$route.query.id,
          "itemclassids":checkItem
        },
      })
      if (!res.data){
        this.batchSelect()
      }else {
        this.checkItems()
      }
    },
    batchSelect(){
      this.debounce(this.onSubmit,300)()
    },
    async onSubmit(){
      const res = await this.$api.requested({
        "id": 20221124110202,
        "content": {
          "sa_contractid":this.$route.query.id,     //sat_notice_classid<=0时 为新增
          "items":this.selectData
        }
      })
      this.tool.showMessage(res,()=>{
        this.$emit('itemClassAdd')
        this.listData()
        this.selectListData()
      })

    },

    async itemClass(data){
      const res = await this.$api.requested({
        "id": 20230223201103,
        "content": {
          "sa_contractid": this.$route.query.id,
          "itemclassids":[data.itemclassid]
        },
      })

      if (!res.data){

        this.onSelect(data)
      }else {
        this.checkItem(data)
      }
    },

    onSelect(val){

      this.tableSelectData = []
      this.tableSelectData[0] = val
      let obj = this.tableSelectData.map(e=>{
        return {
          "sa_contract_itemsaleclassid":0,
          "itemclassid":e.itemclassid,
          "discountrate":e.discountrate
        }
      })
      this.selectData = obj
      /*this.$nextTick(()=>{
        this.onSubmit()
      })*/

      this.debounce(this.onSubmit,300)()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.productData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.productData()
    },
    selectionChange(val){
      this.tableSelectData = []
      this.tableSelectData = val

      let obj = this.tableSelectData.map(e=>{
        return {
          "sa_contract_itemsaleclassid":0,
          "itemclassid":e.itemclassid,
          "discountrate":e.discountrate
        }
      })
      this.selectData = obj

    },
    onColes(){
      this.params2.content.where.condition = ''
      this.params.content.where.condition = ''
      this.$emit('closeDrawer')
    },
    /*已选产品数据*/
    async selectListData(){
      const res = await this.$api.requested({
        "id": 20221124135602,
        "content": {
          "sa_contractid":this.$route.query.id     //sat_notice_classid<=0时 为新增
        }
      })

      this.selectTotal = res.total

    },
    async priceList(){

      this.params2.content.sa_projectid = this.data.sa_projectid
      const res = await this.$api.requested(this.params2)
      this.priceData = res.data
      this.total2 = res.total
    },
    handleSizeChangePrice(val) {
      // console.log(`每页 ${val} 条`);
      this.params2.content.pageSize = val
    },
    handleCurrentChangePrice(val) {
      // console.log(`当前页: ${val}`);
      this.params2.content.pageNumber = val
    },
    priceDataSelect(row){
      this.billno = row.billno
      this.priceShow = false
      this.params.content.sa_quotedpriceid = row.sa_quotedpriceid
      this.listData()
      this.selectListData()
    },
    checkItems() {
      this.$confirm('类别已存在, 是否更新最新折扣?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal:false,
        type: 'warning'
      }).then(() => {
        this.batchSelect()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        });
      });
    },
    checkItem(data) {
      this.$confirm('类别已存在, 是否更新最新折扣?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal:false,
        type: 'warning'
      }).then(() => {
        this.onSelect(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        });
      });
    },
    /*拉取数据*/
    handlePullApi (pullApi) {
      pullApi.content = JSON.parse(JSON.stringify(this.params.content))
      pullApi.id = this.params.id
      /*pullApi.content.sa_projectid = this.$route.query.id*/
    },
    /*上传数据*/
    handleUploadApi (uploadApi,data) {
      uploadApi.id = 20221124110202
      uploadApi.content = {
        "sa_contractid": this.$route.query.id, //订单ID
        "items": data.map(e=>{
          return {
            "sa_contract_itemsaleclassid":0,
            "itemclassid":e.itemclassid,
            "discountrate":e.discountrate
          }
        })
      }
      this.listData()
    },
    onSuccess () {
      this.listData()
    },
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>