ckt-leble-vue/src/views/modules/part/customer/linkedCustomer.vue

<script>
import CustomerInfo from '../../customer/info.vue'
import {
  getExternalPartCustomerList,
  removeExternalPartCustomer,
  saveExternalPartCustomer, updateExternalPartCustomer
} from '../../../../api/part/externalPartCustomer'
import dayjs from 'dayjs'

let customer = {
  customerNo: "",
  customerName: "",
  newCustomerNo:"",
}
export default {
  name: 'linkedCustomer',
  components: {CustomerInfo},
  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{
      customerVisible:false,
      saveVisible: false,
      saveCustomer:{
        ...customer,
      },
      customerRules:{
        customerNo: [{ required: true, message: 'Please input Customer No', trigger: ['blur','change']}],
        customerName: [{ required: true, message: 'Please input Customer Name', trigger: ['blur','change']}],
        newCustomerNo: [{ required: true, message: 'Please input Customer Name', trigger: ['blur','change']}],
      },
    }
  },
  watch:{
    "saveCustomer.customerNo"(newVal,oldVal){
      this.saveCustomer.customerNo = newVal.toUpperCase();
    },
    "saveCustomer.newCustomerNo"(newVal,oldVal){
      this.saveCustomer.newCustomerNo = newVal.toUpperCase();
    }
  },
  methods:{
    customerRowClick(row){
      if (this.saveCustomer.site){
        this.saveCustomer.newCustomerNo = row.customerNo
      }else {
        this.saveCustomer.customerNo = row.customerNo
      }
      this.saveCustomer.customerName = row.customerName
      this.customerVisible = false
    },
    saveExternalPartCustomer(){
      this.$refs.saveForm.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.saveCustomer,
            partNo: this.part.partNo,
            site: this.part.site,
            createBy: this.$store.state.user.name,
            createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          }
          saveExternalPartCustomer(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
          }
        }
      })
    },
    removeExternalPartCustomer(row){
      removeExternalPartCustomer(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)
      })
    },
    closeSavePartCustomer(){
      this.saveCustomer = {
        ...customer,
      }
      this.$refs.saveForm.resetFields()
    },
    handleUpdate(row){
      this.saveCustomer = {
        ...row,
        newCustomerNo: row.customerNo,
      }
      this.saveVisible = true
    },
    updateExternalPartCustomer(){
      this.$refs.saveForm.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.saveCustomer,
            updateBy: this.$store.state.user.name,
            updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          }
          updateExternalPartCustomer(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
          }
        }
      })
    }
  }
}
</script>

<template>
<div>
  <div v-if="visible">
    <el-button type="primary" @click="saveVisible=true">New Customer</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="removeExternalPartCustomer(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 :title="`Linked Customer`" :close-on-click-modal="false" width="400px" @close="closeSavePartCustomer" :visible.sync="saveVisible">
    <el-form :model="saveCustomer" label-position="top" ref="saveForm" :rules="customerRules" 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="saveCustomer.site">
          <el-form-item label="Customer No" :show-message="false" prop="newCustomerNo">
            <span slot="label" style="cursor:pointer;" @click="customerVisible=true"><a herf="#">Customer No</a></span>
            <el-input v-model="saveCustomer.newCustomerNo" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-else>
          <el-form-item label="Customer No" :show-message="false" prop="customerNo">
            <span slot="label" style="cursor:pointer;" @click="customerVisible=true"><a herf="#">Customer No</a></span>
            <el-input v-model="saveCustomer.customerNo" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Customer Name" :show-message="false" prop="customerName">
            <el-input v-model="saveCustomer.customerName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="saveCustomer.site" @click="updateExternalPartCustomer">Save</el-button>
      <el-button type="primary" v-else @click="saveExternalPartCustomer">Save</el-button>
      <el-button @click="saveVisible=false">Cancel</el-button>
    </div>
  </el-dialog>

  <el-dialog title="Select Customer" :close-on-click-modal="false" :visible.sync="customerVisible">
    <customer-info @rowClick="customerRowClick" v-if="customerVisible" :of-components="true" :height="300"></customer-info>
  </el-dialog>
</div>
</template>

<style scoped>

</style>