ckt-leble-vue/src/views/modules/part/manufacturer/linkedManufacturer.vue

<script>
import dayjs from 'dayjs'
import {
  removeExternalPartManufacturer,
  saveExternalPartManufacturer, updateExternalPartManufacturer
} from '../../../../api/part/externalPartManufacturer'
import Manufacturer from '../../manufacturer/manufacturerInformation.vue'
import {
  manufacturerInformationSearch,
  queryManufacturerInformation
} from '../../../../api/manufacturer/manufacturerInformation'

let manufacturer = {
  manufacturerNo: "",
  manufacturerName: "",
  newManufacturerNo:"",
}
export default {
  name: 'linkedManufacturer',
  components: {Manufacturer},
  props:{
    dataList:{
      type:Array,
      default:()=>[],
    },
    part:{
      type:Object,
      default:()=>{},
    },
    height:{
      type:Number,
      default:350,
    },
    columnList:{
      type:Array,
      default:()=>[],
    },
    visible:{
      type:Boolean,
      default:true,
    }
  },
  data(){
    return{
      manufacturerVisible:false,
      saveVisible: false,
      saveManufacturer:{
        ...manufacturer,
      },
      manufacturerRules:{
        manufacturerNo: [{ required: true, message: 'Please input Manufacturer No', trigger: ['blur','change']}],
        manufacturerName: [{ required: true, message: 'Please input Manufacturer Name', trigger: ['blur','change']}],
        newManufacturerNo: [{ required: true, message: 'Please input Manufacturer Name', trigger: ['blur','change']}],
      },
    }
  },
  watch:{
    "saveManufacturer.manufacturerNo"(newVal,oldVal){
      this.saveManufacturer.manufacturerNo = newVal.toUpperCase();
    },
    "saveManufacturer.newManufacturerNo"(newVal,oldVal){
      this.saveManufacturer.newManufacturerNo = newVal.toUpperCase();
    }
  },
  methods:{
    manufacturerRowClick(row){
      if (this.saveManufacturer.site){
        this.saveManufacturer.newManufacturerNo = row.manufacturerNo
      }else {
        this.saveManufacturer.manufacturerNo = row.manufacturerNo
      }
      this.saveManufacturer.manufacturerName = row.manufacturerName
      this.manufacturerVisible = false
    },
    saveExternalPartManufacturer(){
      this.$refs.saveForm.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.saveManufacturer,
            partNo: this.part.partNo,
            site: this.part.site,
            createBy: this.$store.state.user.name,
            createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          }
          saveExternalPartManufacturer(params).then(({data})=>{
            if (data && data.code === 0){
              this.$emit('refresh')
              this.saveVisible = false
              this.$message.success(data.msg)
            }else {
              this.$message.warning(data.msg)
            }
          }).catch((error)=>{
            this.$message.error(error)
          })
        }else {
          for (let i = 0; i < Object.keys(obj).length; i++) {
            this.$message.warning(obj[Object.keys(obj)[i]][0].message)
            break
          }
        }
      })
    },
    removeExternalPartManufacturer(row){
      removeExternalPartManufacturer(row).then(({data})=>{
        if (data && data.code === 0){
          this.$emit('refresh')
          this.saveVisible = false
          this.$message.success(data.msg)
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    closeSavePartManufacturer(){
      this.saveManufacturer = {
        ...manufacturer,
      }
      this.$refs.saveForm.resetFields()
    },
    handleUpdate(row){
      this.saveManufacturer = {
        ...row,
        newManufacturerNo: row.manufacturerNo,
      }
      this.saveVisible = true
    },
    updateExternalPartManufacturer(){
      this.$refs.saveForm.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.saveManufacturer,
            updateBy: this.$store.state.user.name,
            updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          }
          updateExternalPartManufacturer(params).then(({data})=>{
            if (data && data.code === 0){
              this.$emit('refresh')
              this.saveVisible = false
              this.$message.success(data.msg)
            }else {
              this.$message.warning(data.msg)
            }
          }).catch((error)=>{
            this.$message.error(error)
          })
        }else {
          for (let i = 0; i < Object.keys(obj).length; i++) {
            this.$message.warning(obj[Object.keys(obj)[i]][0].message)
            break
          }
        }
      })
    },
    changeManufacturerNo(val){
      let params = {
        site:this.$store.state.user.site,
        manufacturerNo: val,
      }
      queryManufacturerInformation(params).then(({data})=>{
        if (data && data.code === 0){
          if (data.rows.length === 1){
            this.saveManufacturer.manufacturerName = data.rows[0].manufacturerName
          }else {
            this.saveManufacturer.manufacturerName = ""
          }
        }
      })
    }
  }
}
</script>

<template>
  <div>
    <div v-if="visible">
      <el-button type="primary" @click="saveVisible=true">New Manufacturer</el-button>
    </div>
    <el-table :data="dataList" style="width: 100%;margin-top: 5px" :height="height" border>
      <el-table-column
        v-if="visible"
        header-align="center"
        align="center"
        width="100"
        fixed="left"
        label="Actions">
        <template slot-scope="scope">
          <el-link style="cursor:pointer;" @click="handleUpdate(scope.row)">Edit</el-link>
          <el-link style="cursor:pointer;" @click="removeExternalPartManufacturer(scope.row)">Delete</el-link>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :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 v-drag :close-on-click-modal="false" :title="`Linked Manufacturer`" width="400px" @close="closeSavePartManufacturer" :visible.sync="saveVisible">
      <el-form :model="saveManufacturer" label-position="top" ref="saveForm" :rules="manufacturerRules" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="Part No">
              <el-input v-model="part.partNo" readonly disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="Part Description">
              <el-input v-model="part.partDesc" readonly disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="saveManufacturer.site">
            <el-form-item label="Manufacturer No" :show-message="false" prop="newManufacturerNo">
              <span slot="label" style="cursor:pointer;" @click="manufacturerVisible=true"><a herf="#">Manufacturer No</a></span>
              <el-input v-model="saveManufacturer.newManufacturerNo" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-else>
            <el-form-item label="Manufacturer No" :show-message="false" prop="manufacturerNo">
              <span slot="label" style="cursor:pointer;" @click="manufacturerVisible=true"><a herf="#">Manufacturer No</a></span>
              <el-input v-model="saveManufacturer.manufacturerNo" @change="changeManufacturerNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Manufacturer Name" :show-message="false" prop="manufacturerName">
              <el-input v-model="saveManufacturer.manufacturerName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="saveManufacturer.site" @click="updateExternalPartManufacturer">Save</el-button>
        <el-button type="primary" v-else @click="saveExternalPartManufacturer">Save</el-button>
        <el-button @click="saveVisible=false">Cancel</el-button>
      </div>
    </el-dialog>

    <el-dialog v-drag title="Linked Manufacturer" :visible.sync="manufacturerVisible">
      <manufacturer v-if="manufacturerVisible" @rowClick="manufacturerRowClick" :component-height="300" :is-component="true"></manufacturer>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>