kd-aiot-frontend-eom/src/views/contractManage/contractBook/components/inventoryTable.vue

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <ele-pro-table ref="table" :needPage="false" :columns="columns" :toolkit="[]" :datasource="form.datasource"
      cache-key="systemRoleTable17" class="time-form">
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <div class="headbox">
        <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="handlAdd">
          新增
        </el-button>
      <div class="pricebox">
        <span class="amount">总计：{{allPrice}}元</span>
        <span>优惠总金额：</span>
        <el-input v-model="discountTotalPrice" style="width:150px" placeholder="请输入" @input="discountInput" >
          <template slot="append">元</template></el-input>
      </div>
       
      </div>
      </template>
      <template v-slot:productName="{ row, $index }">
        <el-form-item style="margin-bottom: 20px;" :prop="'datasource.' + $index + '.productName'" :rules="{
          required: true,
          message: '请输入',
          trigger: 'change'
        }">
          <el-input v-model="row.productName" placeholder="请输入"  @click.native="handParent(row, $index)"></el-input>
        </el-form-item>
      </template>
      <template v-slot:productCode="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.productCode'" :rules="{
          required: true,
          message: '请输入',
          trigger: 'change'
        }">
          <el-input v-model="scope.row.productCode" disabled></el-input>
        </el-form-item>
      </template>
      <template v-slot:productCategoryName="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.productCategoryName'" :rules="{
          required: true,
          message: '请输入',
          trigger: 'change'
        }">
          <el-input v-model="scope.row.productCategoryName" disabled ></el-input>
        </el-form-item>
      </template>
      <template v-slot:totalCount="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.totalCount'" :rules="{
          required: true,
          pattern:numberReg,
          message: '请输入数字',
          trigger: 'blur'
        }">
          <el-input v-model="scope.row.totalCount" placeholder="请输入" @input="getTotalPrice"></el-input>
        </el-form-item>
      </template>
      <template v-slot:totalPrice="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.totalPrice'" >
          {{(scope.row.totalCount*scope.row.singlePrice||0).toFixed(2)}}元
        </el-form-item>
      </template>

      <template v-slot:productBrand="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.productBrand'">
            <el-input v-model="scope.row.productBrand" disabled></el-input>
        </el-form-item>
      </template>

      <template v-slot:modelType="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.modelType'" >
            <el-input v-model="scope.row.modelType" disabled ></el-input>
        </el-form-item>
      </template>
      <template v-slot:specification="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.specification'" >
            <el-input v-model="scope.row.specification" disabled></el-input>
        </el-form-item>
      </template>
      <template v-slot:deliveryDays="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.deliveryDays'" :rules="{
          pattern:numberReg,
          message: '请输入数字',
          trigger: 'blur'
        }">
            <el-input v-model="scope.row.deliveryDays" placeholder="请输入"></el-input>
        </el-form-item>
      </template>
      <template v-slot:guaranteePeriod="scope">
        <div class="period">
          <div class="borderleftnone">
        <el-form-item style="margin-bottom: 20px;" :prop="'datasource.' + scope.$index + '.guaranteePeriod'" :rules="{
          pattern:numberReg,
          message: '请输入数字',
          trigger: 'blur'
        }">
            <el-input v-model="scope.row.guaranteePeriod" placeholder="请输入"></el-input>
        </el-form-item>
      </div>
      <div class="borderrightnone">
        <DictSelection dictName="质保期单位" clearable v-model="scope.row.guaranteePeriodUnitCode">
                </DictSelection>
              </div>
      </div>
      </template>
      <!-- <template v-slot:guaranteePeriodUnitCode="scope"> </template> -->
      <template v-slot:measuringUnit="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.measuringUnit'">
            <el-input v-model="scope.row.measuringUnit" placeholder="请输入"></el-input>
        </el-form-item>
      </template>
      <template v-slot:remark="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.remark'">
            <el-input v-model="scope.row.remark" type="textarea" placeholder="请输入"></el-input>
        </el-form-item>
      </template>
      <template v-slot:singlePrice="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.singlePrice'" :rules="{
          required: true,
          pattern:numberReg,
          message: '请输入正确的单价',
          trigger: 'change'
        }">
            <el-input v-model="scope.row.singlePrice" placeholder="请输入" @input="getTotalPrice">
              <template slot="append">元</template>
            </el-input>
        </el-form-item>
      </template>
      <template v-slot:technicalAnswerName="{ row, $index }">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + $index + '.technicalAnswerName'">
            <el-input v-model="row.technicalAnswerName" placeholder="请输入" @click.native="handHead(row, $index)"></el-input>
        </el-form-item>
      </template>
      <template v-slot:technicalParams="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.technicalParams'" >
            <el-input type="textarea" v-model="scope.row.technicalParams" placeholder="请输入"></el-input>
        </el-form-item>
      </template>
      <template v-slot:technicalDrawings="scope">
        <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.technicalDrawings'" >
            <fileUpload
                  v-model="scope.row.technicalDrawings"
                  module="main"
                  :showLib="false"
                  :limit="5"
                />
        </el-form-item>
      </template>
     
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(row)">
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <product-list ref="productListRef" classType="1" @changeParent="changeParent"></product-list>
    <head-list ref="headRef"  @changeParent="changeAnswer"></head-list>
  </el-form>
</template>
<script>
import { emailReg, phoneReg,numberReg } from 'ele-admin';
import productList from './product-list.vue'
import dictMixins from '@/mixins/dictMixins';
import store from '@/store';
import fileUpload from '@/components/upload/fileUpload';
import headList from '@/views/saleManage/businessOpportunity/components/headList.vue'
export default {
  mixins: [dictMixins],
  components: {
    productList,
    fileUpload,
    headList
    },
  data() {
    const defaultForm = {
      key: null,
      endTime: '',
      isFirst: 0,
      name: '',
      startTime: '',
      workHour: '',
      technicalDrawings:[]
    };
    return {
      discountTotalPrice:0.00,
      allPrice:0.00,
      numberReg,
      defaultForm,
      form: {
        datasource: []
      },
      rules: {},
      columns: [
        {
          width: 45,
          type: 'index',
          columnKey: 'index',
          align: 'center',
          fixed: 'left'
        },
        {
          width: 200,
          prop: 'productName',
          label: '名称',
          slot: 'productName'
        },
        {
          width: 120,
          prop: 'productCode',
          label: '编码',
          slot: 'productCode'
        },
        {
          width: 200,
          prop: 'productCategoryName',
          label: '类型',
          slot: 'productCategoryName'
        },
        {
          width: 160,
          prop: 'productBrand',
          label: '牌号',
          slot: 'productBrand'
        },
        {
          width: 120,
          prop: 'modelType',
          label: '型号',
          slot: 'modelType'
        },
        {
          width: 120,
          prop: 'specification',
          label: '规格',
          slot: 'specification'
        },
       
        {
          width: 160,
          prop: 'singlePrice',
          label: '单价',
          slot: 'singlePrice'
        },
        {
          width: 80,
          prop: 'totalCount',
          label: '数量',
          slot: 'totalCount'
        },
        {
          width: 80,
          prop: 'measuringUnit',
          label: '计量单位',
          slot: 'measuringUnit'
        },
        {
          width: 120,
          prop: 'totalPrice',
          label: '合计',
          slot: 'totalPrice'
        },
        {
          width: 80,
          prop: 'deliveryDays',
          label: '交期(天)',
          slot: 'deliveryDays'
        },
        {
          width: 200,
          prop: 'guaranteePeriod',
          label: '质保期',
          slot: 'guaranteePeriod'
        },
        // {
        //   width: 120,
        //   prop: 'guaranteePeriodUnitCode',
        //   label: '',
        //   slot: 'guaranteePeriodUnitCode'
        // },
         {
          width: 130,
          prop: 'technicalAnswerName',
          label: '技术答疑人',
          slot: 'technicalAnswerName'
        },
        {
          width: 220,
          prop: 'technicalParams',
          label: '技术参数',
          slot: 'technicalParams'
        },
        {
          width:240,
          prop: 'technicalDrawings',
          label: '技术图纸',
          slot: 'technicalDrawings'
        },
        {
          width: 220,
          prop: 'remark',
          label: '备注',
          slot: 'remark'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 120,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed:'right',
          showOverflowTooltip: true
        }
      ],
    };
  },
  computed: {
    canHandl() {
      return this.form.datasource.length;
    },
   
  },
  methods: {
      // 返回列表数据
      getTableValue(){
        let comitDatasource=this.form.datasource
        if(comitDatasource.length===0) return []
        comitDatasource.forEach(v=>{
          v.totalPrice=(v.totalCount*v.singlePrice)?.toFixed(2)||0
          v.guaranteePeriodUnitName=this.getDictValue('质保期单位', v.guaranteePeriodUnitCode)
          v.technicalDrawings=v.technicalDrawings?v.technicalDrawings:null
        })
         return comitDatasource
      },
      getPrice(){
        return [this.allPrice,this.discountTotalPrice]
      },
    //计算总金额
    getTotalPrice(){
   if(this.form.datasource.length){
    let datasource=this.form.datasource,sum=0
    datasource.forEach(r=>{
      if(r.singlePrice&&r.totalCount){
        sum+=r.singlePrice*r.totalCount
      }
    })
    let allsum=sum.toFixed(2)
    this.allPrice=allsum
    this.discountTotalPrice=allsum
    this.$store.commit('concact/setDiscountAmount',allsum);
    return allsum
   }else{
   this.allPrice=0.00
   this.discountTotalPrice=0.00
   return 0.00
   }
    },
    //更新优惠总金额
    discountInput(val){
      this.$store.commit('concact/setDiscountAmount',val);
    },
      //修改回显
      putTableValue(data){
        if(data&&data?.length){
            this.form.datasource=data
            this.getTotalPrice()
        }
      },
    //选择产品
    handParent(row,index) {
      let item={
          id:row.productCode
        }
        this.$refs.productListRef.open(item,index)
      },
//选择技术人回调
changeAnswer(obj,idx) {
        this.$set( this.form.datasource[idx], 'technicalAnswerId',  obj.id)
        this.$set(this.form.datasource[idx], 'technicalAnswerName',  obj.name)
      },
      handHead(row,index){
        let item={
          id:row.technicalAnswerId
        }
        this.$refs.headRef.open(item,index)
      },
      //选择产品回调
      changeParent(obj,idx) {
        console.log(obj,'33333')

        this.$set(this.form.datasource[idx], 'categoryName', obj.name)
        this.$set(this.form.datasource[idx], 'productCategoryId',  obj.categoryLevelId)
        this.$set(this.form.datasource[idx], 'productBrand',  obj.brandNum)
        this.$set(this.form.datasource[idx], 'productCategoryName',  obj.categoryLevelPath)
        this.$set(this.form.datasource[idx], 'productCode',  obj.code)
        this.$set(this.form.datasource[idx], 'productName',  obj.name)
        this.$set(this.form.datasource[idx], 'modelType',  obj.modelType)
        this.$set(this.form.datasource[idx], 'measuringUnit',  obj.measuringUnit)
        this.$set(this.form.datasource[idx], 'specification',  obj.specification)
        


      },
    remove(row) {
      let index = this.form.datasource.findIndex((n) => n.key == row.key);
      if (index !== -1) {
        this.form.datasource.splice(index, 1);
        this.setSort();
      }
    },
    // 清空表格
    restTable() {
      this.form.datasource = [];
    },
    // 重新排序
    setSort() {
      this.form.datasource.forEach((n, index) => {
        n.key = index + 1;
      });
    },
    // 添加
    handlAdd() {
      let item = JSON.parse(JSON.stringify(this.defaultForm));
      item.key = this.form.datasource.length + 1;
      this.form.datasource.push(item);
    },

    validateForm (callback) {
        //开始表单校验
        this.$refs.form.validate((valid) => {
          callback(valid);
        });
      },
 
  }
};
</script>
<style lang="scss" scoped>
.headbox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .amount{
    font-size: 14px;
    font-weight: bold;
    padding-right: 30px;
  }
}
.time-form .el-form-item {
  margin-bottom: 0 !important;
}

::v-deep .period{
display: flex;
.borderleftnone{
  .el-input--medium .el-input__inner{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.borderrightnone{
  .el-input--medium .el-input__inner{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
 
}

::v-deep .time-form tbody > tr:hover>td {
  background-color: transparent !important;
}
::v-deep .time-form .el-table tr{
  background-color: #ffffff;
}

.pricebox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
}
</style>