yos_web/src/HDrpManagement/prodectFileData/components/add.vue

<template>
  <div>
    <el-button size="small" type="primary"  @click="onShow">{{$t(`新增关联商品`)}}</el-button>
    <el-drawer
        :title="$t(`新增关联商品`)"
        :visible.sync="drawer"
        :wrapperClosable="false"
        size="70%"
        @close="onClose"
        append-to-body
    >
      <div class="drawer__panel" style="margin-bottom: 0">
      <search class="inline-16" @searchActive="searchActive" :placeholder="placeholder"></search>
      <uploadAllData
        class="inline-16"
        :total="total"
        @handlePullApi="handlePullApi"
        @handleUploadApi="handleUploadApi"
        @onSuccess="onSuccess"
      ></uploadAllData>
      <div>
        <tablelayout :layout="tablecols" :data="productsList" :custom="true" :checkbox="true" height="calc(100vh - 292px)" @checkboxCallBack="checkboxCallBack">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'province'">
              <span>{{scope.column.data.province}} - {{scope.column.data.city}} - {{scope.column.data.county}}</span>
            </div>
            <div v-else-if="scope.column.columnname === 'isonsale'" :style="{color:scope.column.data[scope.column.columnname] === 1?tool.getStatusColor('上架',true):tool.getStatusColor('下架',true)}">
              <span>{{scope.column.data.isonsale ? $t('上架') : $t('下架')}}</span>
            </div>
            <p v-else-if="scope.column.columnname === 'status'">
              <span :style="tool.getStatusColor(scope.column.data[[scope.column.columnname]])">{{$t(scope.column.data[[scope.column.columnname]])}}</span>
            </p>
            <p v-else-if="scope.column.columnname === 'itemclass'">
              <span v-if="JSON.stringify(scope.column.data.itemclass) !== '[]' && scope.column.data.itemclass">
                 <span v-for="item in scope.column.data.itemclass" :key="item.index">
                   <el-tag style="margin-right: 10px;margin-top: 5px;margin-bottom: 5px" type="success">{{$t(item.itemclassfullname)}}</el-tag>
                </span>
              </span>
              <span v-else>
                --
              </span>
            </p>
            <div v-else-if="scope.column.columnname === 'nominalpressure'">
              {{tool.nominalPressureSet(scope.column.data.nominalpressure)}}
            </div>
            <div v-else>{{scope.column.columnname === 'operation' || scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname] : '--'}}</div>
          </template>

        </tablelayout>

      </div>
      <div>
        <div style="margin-top: 10px;float: left">{{$t(`已选`)}} {{selected}} {{$t(`个商品，共`)}} {{total}} {{$t(`个商品`)}}</div>
        <div  style="margin-top: 10px;text-align:right">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.content.pageNumber"
              :page-sizes="[20, 50, 100, 200]"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">{{$t(`取消`)}}</el-button>
        <el-button size="small" type="primary" @click="onSubmit"  class="normal-btn-width btn-primary">{{$t(`确定`)}}</el-button>
      </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import tablelayout from '@/components/table/index2'
import search from './search'
import uploadAllData from '@/components/uploadAllData/index'
export default {
  name: "add",
  props:["plm_technicalinfoid"],
  data(){
    return {
      drawer:false,
      add:false,
      placeholder:this.$t('商品名称'),
      form:{
        itemid:''
      },
      rules:{
        itemid: [
          { required: true, message: this.$t('档案名称不可为空'), trigger: 'blur' },
        ],
      },
      productsList:[],
      multipleSelection: [],
      tablecols:[],
      tableHieght:420,
      selected:0,
      total:0,
      currentPage:0,
      params:{
        "id": 20220923140602,
        "content": {
          "pageNumber":1,
          "pageSize":20,
          "where": {
            "condition": ""
          }
        }
      }
    }
  },
  components:{
    tablelayout,
    search,
    uploadAllData
  },
  mounted() {

  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).addProductTable.tablecols
  },
  methods: {
    onShow(){
      this.drawer = true
      this.productsData()
    },
    onClose(){
      this.drawer = false
      this.form.itemid=''
    },
    async productsData(){
      const res = await this.$api.requested(this.params)
      console.log(res)
      this.productsList = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    checkboxCallBack(val){
      console.log(val)
      this.multipleSelection = val;
      this.selected = val.length

    },
    /*拉取数据*/
    handlePullApi (pullApi) {
      pullApi.content = JSON.parse(JSON.stringify(this.params.content))
      pullApi.id = this.params.id
    },
    /*上传数据*/
    handleUploadApi (uploadApi,data) {
      uploadApi.id = 20220926102003
      let arr = data.map(e=>{
        return {
          plm_technicalinfo_itemid:0,
          itemid:e.itemid
        }
      })
      uploadApi.content = {
        "plm_technicalinfoid":this.plm_technicalinfoid,
        "iteminfos":arr
      }
    },
    async onSubmit(){
      console.log(this.multipleSelection)
      let arr = this.multipleSelection.map(e=>{
        return {
          plm_technicalinfo_itemid:0,
          itemid:e.itemid
        }
      })
      const res = await this.$api.requested({
        "id": "20220926102003",
        "version":1,
        "content": {
          "plm_technicalinfoid":this.plm_technicalinfoid,
          "iteminfos":arr
        }
      })
      this.tool.showMessage(res, () => {
        this.drawer = false
        this.$emit('addSuccess')
      })
    },
    onSuccess () {
      this.$emit('addSuccess')
      this.drawer = false
    },
    searchActive(data) {
      this.params.content.where.condition = data
      this.productsData()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.productsData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.productsData()
    },
  }
}
</script>

<style scoped>

</style>