yos_web/src/template/addProduct/index.vue

<template>
  <div>
    <el-button size="small" type="primary" @click="onShow" >{{title}}</el-button>
    <el-drawer
        title="添加商品"
        :visible.sync="dialogFormVisible"
        size="90%"
        direction="rtl"
        :show-close="false"
        append-to-body
        @close="onClose">
      <div class="drawer__panel">
        <div class="flex-between">
          <el-select v-model="sa_brandid" placeholder="选择品牌" size="small"  clearable class="inline-24" @change="brandChange" :disabled="querySa_brandid > 0">
            <el-option
                v-for="item in options.brands"
                :key="item.sa_brandid"
                :label="item.brandname"
                :value="item.sa_brandid">
            </el-option>
          </el-select>
          <el-cascader
              placeholder="选择分类" size="small"
              v-model="itemclassid"
              :options="options.itemclass"
              :props="{ checkStrictly: true,children:'subdep',label:'itemclassname',value:'itemclassid' }"
              clearable @change="classChange"></el-cascader>
        </div>
        <div class="top-margin">
          <uploadAllData
              class="inline-16"
              :total="total"
              @handlePullApi="handlePullApi"
              @handleUploadApi="handleUploadApi"
              @onSuccess="onSuccess"
          ></uploadAllData>
          <el-button :disabled="items.length === 0" :type="items.length > 0?'primary':''" size="small" class="inline-24 bottom-margin" @click="batchAdd">添加选中商品</el-button>
          <el-input  style="width:200px;" placeholder="商品名称/编码/品号" :suffix-icon="params.content.where.condition?params.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="params.content.where.condition" @keyup.native.enter="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" size="small" class="input-with-select inline-24 layout_search__panel bottom-margin" clearable>
          </el-input>
          <el-select v-model="itemstandard" placeholder="选择标准" size="small" clearable class="inline-24 bottom-margin" @change="queryChange">
            <el-option
                v-for="item in options.itemstandards"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
            </el-option>
          </el-select>
          <el-select v-model="itemmaterial" placeholder="选择材质" size="small" clearable class="inline-24 bottom-margin" @change="queryChange">
            <el-option
                v-for="item in options.itemmaterials"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
            </el-option>
          </el-select>
          <el-input  style="width:200px;" placeholder="型号" :suffix-icon="params.content.where.model?params.content.where.model.length > 0?'':'':'el-icon-search'" v-model="params.content.where.model" @keyup.native.enter="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" size="small" class="bottom-margin input-with-select inline-24 layout_search__panel" clearable>
          </el-input>
          <el-input  style="width:200px;" placeholder="规格" :suffix-icon="params.content.where.spec?params.content.where.spec.length > 0?'':'':'el-icon-search'" v-model="params.content.where.spec" @keyup.native.enter="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" size="small" class="bottom-margin input-with-select inline-24 layout_search__panel" clearable>
          </el-input>
        </div>
        <div >
          <tableTemp :data="list" :layout="tablecolsAdd" :opwidth="200" :custom="true" height="calc(100vh - 370px)" @checkboxCallBack="checkboxCallBack" fixedName="operation">
            <template v-slot:customcol="scope">
              <p >{{scope.column.data[scope.column.columnname]}}</p>
            </template>
            <template v-slot:opreation="scope">
              <el-button type="text" size="mini" @click="addProduct(scope)">添 加</el-button>
            </template>
          </tableTemp>
          <div  class="container normal-panel" style="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>
    </el-drawer>
  </div>
</template>

<script>
import tableTemp from './table'
import uploadAllData from '@/components/uploadAllData/index'

export default {
  name: "index",
  props:["data","tradefield","discountrate","params","title","tablecolsAdd","sa_projectid","querySa_brandid"],
  components:{tableTemp,uploadAllData},
  data(){
    return {
      dialogFormVisible:false,
      sa_brandid:'',
      itemclassid:'',
      itemstandard:'',
      itemmaterial:'',
      list:[],
      total:0,
      options:{
        brands:[],
        itemclass:[],
        itemstandards:[],
        itemmaterials:[]
      },
      items:[]
    }
  },
  methods:{
    onShow(){
      this.dialogFormVisible = true
      this.$store.dispatch('optiontypeselect','itemstandards').then(res=>{
        this.options.itemstandards = res.data
      })
      this.$store.dispatch('optiontypeselect','itemmaterial').then(res=>{
        this.options.itemmaterials = res.data
      })
      this.querySa_brandid !== '' ?this.sa_brandid = this.querySa_brandid : this.sa_brandid = ''
      this.queryBrands()
      this.queryClass()
      this.listData()
    },
    /*可添加商品*/
    async listData(){
      console.log(this.tradefield,'领域')
      if (this.data){
        switch (this.data.type) {
          case '标准订单':
            this.params.id = 20221109153502
            break;
          case '项目订单':
            this.params.id = 20230103155002
            break;
          case '促销订单':
            this.params.id = 20230107182302
            break;
          case '工具订单':
            this.params.id = 20221109153502
            break;
          default:
            this.params.id = 20221109153502
            break;
        }
      }

      this.params.content.where.tradefield = this.tradefield
      const res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
    },
    /*获取品牌*/
    async queryBrands () {
      const res = await this.$api.requested({
        "id": "20220924163702",
        "content": {
          "pageSize":1000,
          "where":{
            "condition":""
          }
        }
      })
      this.options.brands = res.data
      console.log("获取品牌",res.data)
      this.sa_brandid = res.data[0].sa_brandid
      this.queryClass()
    },
    brandChange(){
      this.params.content.where.sa_brandid = this.sa_brandid
      this.listData()
      this.queryClass()
    },
    /*获取分类*/
    async queryClass () {
      const res = await this.$api.requested({
        "id":"20220922110403",
        "content":{
          "sa_brandid":this.sa_brandid !== '' ? this.sa_brandid : 0
        }
      })
      this.options.itemclass = res.data[0].ttemclass

    },
    classChange(){
      this.params.content.where.itemclassid = this.itemclassid[this.itemclassid.length -1]
      this.listData()
    },
    queryChange(){
      this.params.content.where.standards = this.itemstandard
      this.params.content.where.material = this.itemmaterial
      this.listData()
    },
    /*拉取数据*/
    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) {
      this.$emit('uploadData',uploadApi,data)
    },
    /*勾选*/
    checkboxCallBack(val){
      this.items = val
    },
    /*批量添加*/
    batchAdd(){
      console.log(this.items,'item')
      this.$emit('addSuccess',this.items)
    },
    /*添加商品*/
    addProduct(val){
      console.log(val,'添加商品')
      this.items = val
      this.$emit('addProduct',this.items.data)
    },
    onSuccess () {
      console.log('成功')
      this.listData()
    },
    onClose(){
      this.dialogFormVisible = false
      this.sa_brandid = ''
      this.itemclassid = ''
      this.itemstandard = ''
      this.itemmaterial = ''
      this.$emit("closeDrawer")
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
  },
  mounted() {
  },
  created() {

  }
}
</script>

<style scoped>
  .top-margin{
    margin-top: 20px;
  }
  .bottom-margin{
    margin-bottom: 20px;
  }
 /deep/ input::-webkit-input-placeholder {
    color: #58585d;
  }
  /deep/ input::-moz-input-placeholder {
    color: #58585d;
  }
  /deep/ input::-ms-input-placeholder {
    color: #58585d;
  }
</style>