krd-srm-vue/src/views/modules/srmSupplier/supplierShare.vue

<template>
  <div class="customer-css" >
    <!--  查询时间和产品  -->
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;" >
      <el-row>
        <el-col :span="24" style="">
          <el-form-item :label="'Material Family No:'">

            <el-input v-model="searchData.materialFamilyNo" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'Material Family Desc:'">
            <el-input v-model="searchData.materialFamilyDesc" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="' '" >
            <el-button class="customer-bun-min" type="primary" @click="getMainData" style="">Query</el-button>
            <el-button class="customer-bun-min" type="primary" @click="openModelData" style="">New Family</el-button>
            <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'Export'}}</el-button>

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :height="height"
      :data="mainDataList"
      border
      ref="mainTable"
      highlight-current-row
      @row-click="changeData"
      v-loading="dataListLoading"
      style="margin-top: 0px; width: 100%;">
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="220"
        :label="'Actions'">
        <template slot-scope="scope">
          <a class="customer-a"  @click="openUpModel(scope.row)">Edit |</a>
          <a class="customer-a"  @click="deleteFamily(scope.row)">Delete</a>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnArray1" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="Material Family" :close-on-click-modal="false" v-drag :visible.sync="addModelFlag" width="400px">
      <el-form  label-position="top"  style="margin-top: -5px;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="'Material Family No'" >
              <el-input v-model="addModelData.materialFamilyNo"  :disabled="addModelData.flag===1" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'Material Family Desc'" >
              <el-input v-model="addModelData.materialFamilyDesc"  ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-footer style="height:40px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="submitData()">Submit</el-button>
        <el-button type="primary" @click="addModelFlag=false">Cancel & Close</el-button>
      </el-footer>
    </el-dialog>

    <el-tabs v-model="activeName" style="margin-top: 0px; width: 99%;" @tab-click="tabClick" class="customer-tab" type="border-card">
      <el-tab-pane label="Approved Vendor List" name="vendorList" style="">
        <vendorList ref="vendorList"></vendorList>
      </el-tab-pane>
      <!-- <el-tab-pane label="Share" name="share" style="">
        <share ref="share"></share>
      </el-tab-pane> -->
    </el-tabs>

    <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>


  </div>
</template>

<script>
/*组件*/

import {
  searchMaterialFamilyData,
} from '@/api/srm/srmSupplier.js'
import excel from "@/utils/excel-util.js";
import Chooselist from '@/views/modules/common/Chooselist_eam'
import vendorList from './com_supplierShare_supplierList'
import share from './com_supplierShare_share'
import {deleteMaterialFamily, saveOrUpdateFamily} from '../../../api/srm/srmSupplier'
export default {
  data() {
    return {
      functionId: this.$route.meta.menuId,
      height: 200,
      currentRow: {},
      searchData:{
        materialFamilyNo:'',
        materialFamilyDesc:'',
        delFlag:'N',
        site:this.$store.state.user.site,
      },
      addModelData:{
        flag:'',
        site:this.$store.state.user.site,
        materialFamilyNo:'',
        materialFamilyDesc:'',
        delFlag:'N',
      },
      tagNo:'',
      mainDataList:[],
      dataListLoading: false,
      activeName: 'vendorList',
      columnArray1: [
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811031Table1MaterialFamilyNo',
          tableId: "811031Table1",
          tableName: "物料分类信息",
          columnProp: "materialFamilyNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "Material Family No",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811031Table1MaterialFamilyDesc',
          tableId: "811031Table1",
          tableName: "物料分类信息",
          columnProp: "materialFamilyDesc",
          headerAlign: "center",
          align: "left",
          columnLabel: "Material Family Desc",
          columnWidth: '200',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
      ],
      addModelFlag:false,
      exportName: '物料分类信息'+this.dayjs().format('YYYYMMDDHHmmss'),
    }
  },
  /*组件*/
  components: {
    Chooselist,
    share,
    vendorList,
  },

  mounted() {
    this.$nextTick(() => {
      this.height = ( window.innerHeight - 210)/2;
    })
  },
  watch: {
    addModelData: {
      deep: true,
      handler: function (newV, oldV) {
        this.addModelData.materialFamilyNo = this.addModelData.materialFamilyNo.toUpperCase()
      }
    },
    searchData: {
      deep: true,
      handler: function (newV, oldV) {
        this.searchData.materialFamilyNo = this.searchData.materialFamilyNo.toUpperCase()
      }
    },
  },
  methods: {
    getBaseList(val, type) {
      this.tagNo = val
      this.$nextTick(() => {
        let strVal = ''
        if (val === 1100) {
          strVal = this.searchData.supplierNo
        }
        this.$refs.baseList.init(val, strVal)
      })
    },

    /* 列表方法的回调 */
    getBaseData(val) {
      if (this.tagNo === 1100) {
        this.searchData.supplierNo = val.supplier_no
      }
    },
    getMainData(){
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      searchMaterialFamilyData(this.searchData).then(({data}) => {
        if (data.code === 0) {
          this.mainDataList = data.rows
          //判断是否全部存在数据
          if (this.mainDataList.length > 0) {
            //设置选中行
            this.$refs.mainTable.setCurrentRow(this.mainDataList[0])
            this.changeData(this.mainDataList[0])

          }else {
            this.changeData(null)
          }
        }
        this.dataListLoading = false
      })
    },
    tabClick(tab, event){
      this.refreshCurrentTabTable()
    },
    changeData(row){
      this.currentRow=JSON.parse(JSON.stringify(row))
      this.refreshCurrentTabTable ();
    },
    refreshCurrentTabTable(){
      if(this.currentRow===''||this.currentRow===null){
        this.currentRow={site:'',supplierNo:''}
      }
      // if(this.activeName==='share'){
      //   this.refreshShareTable();
      // }
      if(this.activeName==='vendorList'){
        this.refreshVendorListTable();
      }
    },
    async exportExcel() {
      excel.exportTable({
        url: "/srmSupplierShare/searchMaterialFamilyData",
        columnMapping:  this.columnArray1,//可以直接用table，不需要的列就剔除
        mergeSetting: [],//需要合并的列
        params: this.searchData,
        fileName: this.exportName+".xlsx",
        rowFetcher: res => res.data,
        columnFormatter: [],
        dropColumns: [],//需要剔除的列，例如dropColumns: ["netWeight"]，即剔除净重列
      });
    },
    refreshVendorListTable(){
      let inData={
        site: this.currentRow.site,
        materialFamilyNo: this.currentRow.materialFamilyNo,
        materialFamilyDesc: this.currentRow.materialFamilyDesc,
        height:Number(this.height)
      }
      this.$refs.vendorList.init(inData)
    },
    refreshShareTable(){
      let inData={
        site: this.currentRow.site,
        materialFamilyNo: this.currentRow.materialFamilyNo,
        materialFamilyDesc: this.currentRow.materialFamilyDesc,
        height:Number(this.height)-30
      }
      this.$refs.share.init(inData)
    },
    openModelData(){
      this.addModelData={
        flag: 0,
        site: this.$store.state.user.site,
        materialFamilyNo: '',
        materialFamilyDesc: '',
        delFlag: 'N',
      }
      this.addModelFlag=true;
    },
    openUpModel(row){
      this.addModelData={
        flag: 1,
        site: row.site,
        materialFamilyNo: row.materialFamilyNo,
        materialFamilyDesc: row.materialFamilyDesc,
        delFlag: row.delFlag,
      }
      this.addModelFlag=true;
    },
    submitData(){
      saveOrUpdateFamily( this.addModelData).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.getMainData();
          this.addModelFlag=false
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    deleteFamily(row){
      this.$confirm('The data will be permanently deleted. Do you wish to proceed?', 'Prompt', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        deleteMaterialFamily( row).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg);
            this.getMainData();
            this.addModelFlag=false
          }else {
            this.$message.warning(data.msg);
          }
        }).catch((error)=>{
          this.$message.error(error);
        })
      })
    },
  },
  created() {
    //查询报表的类型
    this.getMainData();
  },


}
</script>

<!--当前页面的标签样式-->
<style scoped lang="scss">

/deep/ .customer-tab .el-tabs__content {
  padding: 5px !important;
}


</style>