yos_web/src/template/addProduct/index.vue

<template>
  <div>
    <el-button size="small" type="primary" @click="onShow" >{{$t(title)}}</el-button>
    <el-drawer
        :title="$t(`添加商品`)"
        :visible.sync="dialogFormVisible"
        size="90%"
        direction="rtl"
        :show-close="false"
        append-to-body
        @close="onClose">
      <div class="drawer__panel" style="padding-bottom: 36px;">
        <div class="flex-between">
          <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">{{$t(`添加选中商品`)}}</el-button>
          <el-input  style="width:200px;" :placeholder="$t(`商品名称/编码/品号`)" :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-input  style="width:200px;" :placeholder="$t(`型号`)" :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="$t(`规格`)" :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>
          <slot name="optionSystem"></slot>
        </div>
        <selectClass ref="class" @clickAreaBase="clickAreaBase" @brandChange="brandChange" @onClassChange="onClassChange" @Search="Search" @clearSearch="clearSearch" @clickField="clickField" :default="true"></selectClass>
        <div style="width: 100%;border-bottom: 1px solid #ebeef5;margin-bottom: 10px;"></div>
        <div >
          <tableTemp ref="tableTemp" :data="list" :layout="tablecolsAdd" :opwidth="200" :custom="true" height="calc(100vh - 370px)" @checkboxCallBack="checkboxCallBack" fixedName="operation">
            <template v-slot:customcol="scope">
              <p v-if="scope.column.columnname === 'cover'">
                <previewImage v-if="scope.column.data.attinfos[0]" class="image" :image="scope.column.data.attinfos[0]" :list="scope.column.data.attinfos" :deletebtn="false"></previewImage>
              </p>
              <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
            </template>
            <template v-slot:opreation="scope">
              <el-button type="text" size="mini" @click="addProduct(scope)">{{$t(`添 加`)}}</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'
import previewImage from '@/components/previewImage/index'
import selectClass from '@/SDrpManagement/ProductGroup/modules/Select2.vue'
export default {
  name: "index",
  props:["data","tradefield","discountrate","params","title","tablecolsAdd","sa_projectid","querySa_brandid","typeName"],
  components:{tableTemp,uploadAllData,previewImage,selectClass},
  provide () {
    return {
      sys_enterpriseid:() => ''
    }
  },
  data(){
    return {
      dialogFormVisible:false,
      sa_brandid:'',
      itemclassid:'',
      itemstandard:'',
      itemmaterial:'',
      list:[],
      total:0,
      options:{
        brands:[],
        itemclass:[],
        itemstandards:[],
        itemmaterials:[]
      },
      items:[]
    }
  },
  methods:{
    onShow(){
      this.dialogFormVisible = true
      // this.params = {
      //   "id": 20221124093602,
      //   "content": {
      //     "sa_contractid": this.$route.query.id,
      //     "pageNumber": 1,
      //     "pageSize": 100,
      //     "where": {
      //       "condition": "",
      //       "istool": 0
      //     }
      //   },
      // }
      this.listData(this.params.content.pageNumber = 1)
    },
    /*可添加商品*/
    async listData(){
      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;
        }
      }
      if (this.typeName === '居间'){
        this.params.id = 20221124093602
      }
      console.log(this.params.id);

      this.params.content.where.tradefield = this.tradefield
      const res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
      this.$refs.tableTemp.$refs.table.doLayout()
    },
    /*获取品牌*/
    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()
    },
    /*获取分类*/
    async queryClass () {
      const res = await this.$api.requested({
        "id":"20220922110403",
        "content":{
          "sa_brandid":this.sa_brandid !== '' ? this.sa_brandid : 0
        }
      })
      let arr = []
      function converTree(node) {
        var elNode = {
          isdeep:node["isdeep"],
          ishide:node["ishide"],
          istool:node["istool"],
          itemclassfullname:node["itemclassfullname"],
          itemclassfullnum:node["itemclassfullnum"],
          itemclassid:node["itemclassid"],
          itemclassname:node["itemclassname"],
          itemclassnum:node["itemclassnum"],
          num:node["num"],
          parentid:node["parentid"],
          rowindex:node["rowindex"],
          subdep:[]
        }
        if (node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.subdep.push(converTree(node.subdep[index]));
          }
        }else {
          elNode = {
            isdeep:node["isdeep"],
            ishide:node["ishide"],
            istool:node["istool"],
            itemclassfullname:node["itemclassfullname"],
            itemclassfullnum:node["itemclassfullnum"],
            itemclassid:node["itemclassid"],
            itemclassname:node["itemclassname"],
            itemclassnum:node["itemclassnum"],
            num:node["num"],
            parentid:node["parentid"],
            rowindex:node["rowindex"],
          }
        }
        return elNode;
      }
      // this.options.itemclass = arr
      res.data[0].ttemclass.forEach(e=>{
        arr.push(converTree(e))
      });

      this.options.itemclass = arr
      return arr
    },
    brandChange(id){

      this.params.content.where.sa_brandid = this.params.id == 20221021171802 || this.params.id == 20221020164903 || this.params.id == 20221124093602 || this.params.id == 20220923112503 ? id[0] : id
      this.$refs.class.clickClass(false)
      // this.listData(this.params.content.pageNumber = 1)
    },
    onClassChange (n) {
      this.params.content.where.itemclassid = n.itemclassid
      this.listData(this.params.content.pageNumber = 1)
    },
    clickField (item) {
      this.params.content.where.tradefield = item.tradefield
      this.listData(this.params.content.pageNumber = 1)
    },
    clickAreaBase (item) {
      this.params.content.where.standards = item
      this.listData(this.params.content.pageNumber = 1)
    },
    Search(data) {
      this.params.content.where.condition = data
      this.params.content.pageNumber = 1
      this.listData(this.params.content.pageNumber = 1)
    },
    clearSearch() {
      this.params.content.where.condition = ''
      this.params.content.pageNumber = 1
      this.listData(this.params.content.pageNumber = 1)
    },
    classChange(){
      this.params.content.where.itemclassid = this.itemclassid[this.itemclassid.length -1]
      this.listData(this.params.content.pageNumber = 1)
    },
    queryChange(){
      this.params.content.where.standards = this.itemstandard
      this.params.content.where.material = this.itemmaterial
      this.listData(this.params.content.pageNumber = 1)
    },
    /*拉取数据*/
    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(this.params.content.pageNumber = 1)
    },
    onClose(){
      this.dialogFormVisible = false
      this.$refs.class.value= "",
      this.$refs.class.brands= []
      this.$refs.class.ields= []
      this.$refs.class.itemclass= []
      this.$refs.class.activeClass= {}
      this.$refs.class.field_act= ""
      this.$refs.class.tradefield= ""
      this.$refs.class.brand_act= 0
      this.$refs.class.class_act= ""
      this.$refs.class.areaBases= []
      this.$refs.class.areaBase= ""
      this.$refs.class.queryClass();
      this.$refs.class.queryAgentiInfo();
      this.$refs.class.queryBrands();
      this.$refs.class.queryAreaBase();

      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>
  .image{
  height: 38px;
  width: 38px;
  margin-top:0;
  }
  .top-margin{
    margin-top: 20px;
  }
  .bottom-margin{
    margin-bottom: 10px;
  }
 /deep/ input::-webkit-input-placeholder {
    color: #58585d;
  }
  /deep/ input::-moz-input-placeholder {
    color: #58585d;
  }
  /deep/ input::-ms-input-placeholder {
    color: #58585d;
  }
</style>