新增编辑同一张页面

<template>
  <el-main class="addOrder" v-loading="loadBox">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
      <el-form-item label="采购类型">
        <el-radio-group :disabled="canedit == false" @change="typeChange" v-model="radiotype">
          <el-radio label="0">市场自采</el-radio>
          <el-radio label="1">供应商采购</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="radiotype == 0" label="采购员" >
        <el-input :disabled="canedit == false" style="width: 260px" v-model="purchaserName" placeholder="请输入采购员"></el-input>
      </el-form-item>

      <el-form-item v-if="radiotype == 1" label="供应商" prop="supplierId" >
        <EnterpriseSearcher ref="childEnterpr" :onSelected="onCustomerSelected" />
      </el-form-item>

      <el-form-item label="计划交货日期" style="margin: 18px 0px">
        <el-date-picker
          :disabled="canedit == false"
          :clearable="false"
          @change="changeDate"
          v-model="estimatedtime"
          style="width: 260px"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <!-- purchaseAgreeDataList -->
      <el-form-item v-if="purchaseAgreeDataList.length > 0" label="采购协议" style="margin: 18px 0px" >

        <el-select :disabled="canedit == false" style="width: 260px" v-model="protocolId" placeholder="请选择" @change="itemClick">
          <el-option
            class="optionagree"
            v-for="item in purchaseAgreeDataList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            <div >{{ item.name }}</div>
            <span class="itemtime" style=" color: #8492a6; font-size: 12px">开始时间：{{ item.beginDate }}</span>
            <span class="itemtime" style=" color: #8492a6; font-size: 12px">结束时间：{{ item.endDate }}</span>
          </el-option>
        </el-select>

      </el-form-item>

      <el-form-item label="选择商品" class="w60b">
        <el-row class="eleowhead">
          <div class="eleowmain">
            <div class="elcolall">
              <el-select
                class="ml_10"
                value-key="piId"
                filterable
                v-model="selectValue"
                style="width: 280px"
                clearable
                reserve-keyword
                placeholder="输入商品名称"
                collapse-tags
                @change="optionsChange"
              >
                <el-option
                  v-for="(item, index) in optionsproduce"
                  :key="index"
                  :label="
                    item.piProductName +
                    '(' +
                    item.piLevel +
                    '、' +
                    item.piSpec +
                    ')'
                  "
                  :value="item"
                >
                </el-option>
              </el-select>

              <div class="eachitput">
                <span class="inputname">数量</span>
                <el-input v-model="estimatedPurchaseNum" placeholder="请输入内容" oninput="value=value.replace(/[^0-9.]/g,'')">
                  <template slot="append">{{ publicname }}</template>
                </el-input>
              </div>
              <div class="eachitput">
                <!-- xxxxxxxxxxxxxxxxxx wwwww -->
                <el-button @click="addnew" size="small" type="primary"
                  >添 加</el-button
                >
              </div>
            </div>
            <el-col :span="24">
              <el-table :data="tableData" style="width: 100%" show-summary :summary-method="getSummaries">
                <el-table-column label="品种" min-width="200" >
                  <template slot-scope="scope">
                    <GoodsItem :imageSrc="scope.row.piImageUrl"
                      :name="scope.row.piProductName"
                      :spec="scope.row.piSpec"
                      :netContent="scope.row.piNetContent"
                      :netContentUnit="scope.row.piNetContentUnit"
                      :level="scope.row.piLevel"/>
                  </template>
                </el-table-column>

                <el-table-column label="采购数量" width="160">
                  <template slot-scope="scope">
                    <el-input
                       @change="newval(scope.row)"
                      v-model="scope.row.estimatedPurchaseNum"
                      size="small"
                       v-input-number.decimal="{decimal:2,min:0}"
                    >
                      <template slot="append">{{ scope.row.piSpec }}</template>
                    </el-input>
                  </template>
                </el-table-column>

                <el-table-column label="单价" width="120" align="center">
                  <template slot-scope="scope">
                    <el-input
                      :disabled="Consensual == true"
                       @change="newval(scope.row)"
                      v-model="scope.row.unitPrice"
                      size="small"
                    >
                    </el-input>
                  </template>
                </el-table-column>

                <el-table-column label="小计" width="120" align="right">
                  <template slot-scope="scope">
                    <span>{{ scope.row.subtotal }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="备注">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.remark"
                      size="small"
                      style="margin-bottom: 3px"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="small"
                      type="danger"
                      @click="delTableRow(scope, scope.$index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          :disabled="canedit == false"
          class="w50b"
          type="textarea"
          v-model="ruleForm.remark"
        ></el-input>
      </el-form-item>
      <el-form-item class="pt-20">
        <el-button @click="goBack">返回</el-button>

        <el-button
          v-if="Consensual == false"
          type="success"
          @click="submitForm"
          :loading="loadBtn"
          >提 交</el-button
        >
        <el-button
          v-if="Consensual == true"
          type="success"
          @click="supplyForm"
          :loading="loadBtn"
          >提 交</el-button
        >
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>
import {Decimal} from 'decimal.js';
import { canTeenAnalysisI } from "../../service/api/config";
import EnterpriseSearcher from "@/components/business/EnterpriseSearcher";
import purchaseAgreementApi from "../../service/api/purchase-agreement-api";
import GoodsItem from "../../components/common/GoodsItem";
import { centToYuan, yuanToCent } from "../../utils/priceUtil";
export default {
  components: {
    EnterpriseSearcher,GoodsItem
  },
  data() {
    return {
      imgUrl: canTeenAnalysisI.imageURL,
      ruleForm: {
        remark: "",
      },
      radiotype: "0",
      loadedit: false,
      optionsproduce: [],
      selectValue: {},
      tableData: [],
      loadBtn: false,
      id: "",
      loadBox: false,
      eachPublicObj: {},
      estimatedPurchaseNum: "",
      publicname: "个",

      publicID: "",
      publicDetailInfo: {},
      EditJudge: false,
      publicpurchaserN: "",
      purchaserName: "",
      suppltrue: false,
      protocolList: [],
      protocolObj: {},
      estimatedtime: "",
      canedit: true,
      agreementList: [],
      headobj: {},
      Consensual:false,
      protocolId:"",
      purchaseAgreeDataList:[],
      oldTime:"",
    };
  },
  watch:{

    'agreementList':{
      deep:true,
      handler:function (newVal,oldVal) {
        if(newVal.length!=oldVal.length && this.tableData.length>0 && this.canedit == true){
          this.changeAgree(newVal,oldVal)
         
        }else{
          //  this.tableData=[];   
            this.purchaseAgreeDataList = newVal
            this.selectValue={}
          if(newVal.length>0){
            this.protocolId = newVal[0].id;
            this.agreeClick(newVal[0].id);
            this.Consensual=true;
          }else{
             this.Consensual=false;
          }
        }          
      }
    },
    'estimatedtime':{
      deep:true,
      handler:function (newt,oldt) {
                
      }
    },
  },
  computed: {
    totalNum() {
      let sum=0;
      for(let i =0; i < this.tableData.length; i++) {
        sum += Number(this.tableData[i].subtotal);
      }
        return sum.toFixed(2);
      },
  },
  created() {
    this.getProtocolList();

    if (this.$route.query.id) {
      this.publicID = this.$route.query.id;
      this.Detaileddata();
      this.EditJudge = true;
    }
    if(this.radiotype=='0'){
      this.getallProduct();
    }
   // this.getallProduct();
  },
  methods: {
    changeAgree(newVal,oldVal){
       this.$confirm('采购协议发生改变，如果有选中的商品将被清空', '是否继续', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.tableData=[];   
            this.purchaseAgreeDataList = newVal
            this.selectValue={}
          if(newVal.length>0){
            this.protocolId = newVal[0].id;
            this.agreeClick(newVal[0].id);
            this.Consensual=true;
          }else{
             this.Consensual=false;
          }
        }).catch((error) => {
          this.purchaseAgreeDataList = oldVal;
          if(oldVal.length==0){
            this.getallProduct()
            this.Consensual=false;
          }else{
            this.protocolId = oldVal[0].id;
            this.agreeClick(oldVal[0].id);
            this.Consensual=true;
          }          
        });
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index == 0) {
             sums[index] = "合计";
             return
          }
           if (index == 3) {
              sums[index] = this.totalNum ;
             return
          }     
        });
        return sums;
    },
    onCustomerSelected(customer) {
      this.protocolObj = customer;
    },
    typeChange(val) {
      this.selectValue = {};
      if (val == 0) {
        this.getallProduct()
        this.protocolObj = {};
        this.agreementList=[];
        this.purchaseAgreeDataList=[]
      }else{
        this.optionsproduce=[];
      }
      this.tableData=[]
    },
    changeDate(val){
      
      this.deliveryDate(val)
    },
    deliveryDate(value) {
      if (this.radiotype == 1) {
        purchaseAgreementApi
          .search({
            keyword: "",
            queryDate: value,
            pageIndex: 1,
            pageSize: 100,
          })
          .then((result) => {
            if(result.list.length>0){
              // this.Consensual=true;
              // this.protocolId = result.list[0].id;
              // this.agreeClick(result.list[0].id);
              // this.selectValue={}

            this.agreementList = result.list.map((item) => {
              let obj = {
                ...item,
                beginDate: this.$format( item.beginDate,"yyyy-MM-dd"),
                endDate: this.$format( item.endDate,"yyyy-MM-dd"),
              };
              return obj;
            });

            }else{
              this.Consensual=false;
              this.getallProduct()
              this.agreementList = [];
            }

          })
          .finally(() => {});
      }
    },

    newval(val) {
      val.subtotal = Decimal.mul(val.estimatedPurchaseNum, val.unitPrice).toFixed(2, Decimal.ROUND_DOWN);
      return this.tableData
    },
    itemClick(agreeID){
      this.tableData=[]
      this.agreeClick(agreeID)
    },
    agreeClick(agreeID) {
      this.protocolId = agreeID;
      purchaseAgreementApi.get(agreeID)
        .then((value) => {

          let reList = value.items.map((item) => {
            let obj = {
              piProductName: item.productInfo.piProductName,
              piLevel: item.productInfo.piLevel,
              piSpec: item.productInfo.piSpec,
              piImageUrl: item.productInfo.piImageUrl,
              piId: item.productInfo.piId,
              productDescription: item.productInfo.description,
              unitPrice: centToYuan(item.unitPrice),
              subtotal: 0,
            };
            return obj;
          });

          this.optionsproduce = reList;
        })
        .finally(() => {});
    },
    // 获取供应商列表数据
    getProtocolList() {
      this.$post(canTeenAnalysisI.customerPurchaseList, {
        ciSupplierName: "",
        ciSupplierLicenseNo: "",
        ciSupplierContact: "",
        ciSupplierPhone: "",
        page: 1,
        size: 100,
      }).then((res) => {
          if (res.code == 200) {
            this.protocolList = res.data.data;
          } else {
            this.$message(res.message);
          }
        })
        .catch((err) => {
          this.$message("请求服务器失败");
        });
    },
    // 供应商change
    protocolChange(val, type) {
      let obj = this.protocolList.find((ele) => {
        return ele.customerId == val;
      });
      if (obj) {
        this.protocolObj = obj;
      } else {
        this.protocolObj = {};
      }
      this.$forceUpdate();


      for (var item of this.protocolList) {
        if (item.customerId == val) {
        }
      }
    },

    // 商品change
    optionsChange(val) {
      for (var item of this.tableData) {
        if (item.piId == val.piId) {
          this.$message.error("不可以添加重复商品");
          this.selectValue = {};
          return false;
        }
      }
      this.eachPublicObj = val;
      this.publicname = val.piSpec;
    },
    // 查询商品
    getallProduct() {
      this.$post(canTeenAnalysisI.productListinfo).then((res) => {
        if (res.code == 200) {

          let resultsData = res.data.map((item) => {
            let obj = {
              ...item,
              unitPrice: "",
              subtotal: "",
            };
            return obj;
          });
          this.optionsproduce =resultsData;
        } else {
          this.$message(res.message);
        }
      });
    },
    //编辑页面开始获取详细的数据
    Detaileddata() {
      this.canedit = false;
      let that = this;
      this.$get(
        canTeenAnalysisI.PurchaseorderDetail + "/" + this.publicID
      ).then((res) => {
        if (res.code == 200) {
          this.publicDetailInfo = res.data;
          this.estimatedtime = this.$format(
            this.publicDetailInfo.planSupplyDate,
            "yyyy-MM-dd"
          );

          this.radiotype = this.publicDetailInfo.purchaseType + "";
          if (this.radiotype == "1") {
            setTimeout(() => {
              this.$refs.childEnterpr.childMethod(
                this.publicDetailInfo.supplierName
              );
            }, 500);
          } else {
            this.purchaserName = this.publicDetailInfo.purchaserName;
          }
          this.deliveryDate(this.estimatedtime)
          if(this.publicDetailInfo.purchaseAgreementId){
            this.agreeClick(this.publicDetailInfo.purchaseAgreementId)
          }
          this.ruleForm.remark = res.data.remark;
          this.tableData = res.data.itemList.map((item) => {
            that.$set(item, "piImageUrl", item.productImage);
            that.$set(item, "piProductName", item.productName);
            that.$set(item, "productDescription", item.productInfo.description );
            that.$set(item, "piSpec", item.productSpec);
            that.$set(item, "piId", item.productId);
            that.$set(item, "unitPrice", centToYuan(item.unitPrice));
            that.$set(item, "subtotal", this.itemTotal(item));

            return item;
          });
        } else {
          this.$message(res.message);
        }
      });
    },
    itemTotal(val){
      return  Decimal.mul(val.estimatedPurchaseNum, Number(val.unitPrice)).toFixed(2, Decimal.ROUND_DOWN);
    },
    //删除
    delTableRow(scope, num) {
      this.$message.success("删除成功");
      this.tableData.splice(num, 1);
    },
    delRow(id, index) {
      this.$delete(canTeenAnalysisI.RequestDelPurchas + id)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.tableData.splice(index, 1);
          } else {
            this.$message(res.message);
          }
        })
        .catch((err) => {
          this.$message("请求服务器失败");
        });
    },

    addnew() {
      if (JSON.stringify(this.selectValue) == "{}" || this.selectValue == "") {
        this.$message.error("请选择商品");
        return;
      }
      if (this.estimatedPurchaseNum == "") {
        this.$message.error("请输入数量");
        return;
      }
      var obj = {};
      obj = this.$clone(this.eachPublicObj);
      obj.estimatedPurchaseNum = this.estimatedPurchaseNum;
      obj.remark = "";
      obj.subtotal = (obj.estimatedPurchaseNum* obj.unitPrice).toFixed(2); 
      

      this.tableData.push(obj);
      this.estimatedPurchaseNum = "";
      this.selectValue = {};
    },

    // 协议提交的执行
    supplyForm() {
      var that = this;
      let arr = [];
      if (this.tableData.length == 0) {
        this.$message("请至少添加一个商品");
        return;
      }
      for (var i = 0; i < this.tableData.length; i++) {
        if (
          this.tableData[i].estimatedPurchaseNum == "" ||
          this.tableData[i].estimatedPurchaseNum == null ||
          this.tableData[i].estimatedPurchaseNum == 0
        ) {
          this.$message("请填写正确的商品数量");
          return;
          break;
        }
      }
      this.tableData.forEach((ele, ind) => {
        let objs = {
          productId: ele.piId,
          num: parseFloat(ele.estimatedPurchaseNum), //预计采购的数
          remark: ele.remark,
          unitPrice:ele.unitPrice*100
        };
        if (ele.id) {
          that.$set(objs, "id", ele.id);
        }
        arr.push(objs);
      });
      let obj = {
        planSupplyDate: this.estimatedtime,
        // purchaseType: this.radiotype,
        purchaseAgreementId:this.protocolId,
        remark: this.ruleForm.remark,
        supplierName: this.protocolObj.name,
        supplierId: this.protocolObj.id,
        itemList: arr,
      };
      let editobj = {};
      this.loadBtn = true;
      if (this.EditJudge == false) {
        //新增
        this.$post(canTeenAnalysisI.addAgreementPurchaseOrder, obj)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功");
              this.$router.push({
                path: "/SelfPurchaseorder/selfpurchaseList",
              });
            } else {
              this.$message(res.message);
            }
            this.loadBtn = false;
          })
          .catch((err) => {
            this.loadBtn = false;
            this.$message("请求服务器失败");
          });
      } else {

        //编辑
        that.$set(editobj, "id", this.publicDetailInfo.id);
        that.$set(editobj, "remark", this.ruleForm.remark);
        that.$set(editobj, "planSupplyDate", this.estimatedtime);
        that.$set(editobj, "itemList", arr);
        console.log(editobj)
        this.$put(canTeenAnalysisI.addAgreementPurchaseOrder, editobj)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("编辑成功");
              this.$router.push({
                path: "/SelfPurchaseorder/selfpurchaseList",
              });
            } else {
              this.$message(res.message);
            }
            this.loadBtn = false;
          })
          .catch((err) => {
            this.loadBtn = false;
            this.$message("请求服务器失败");
          });
      }
    },
    
    // 普通提交 cccccc
    submitForm() {
      let postobj = {};
      if (this.radiotype == 0) {
        postobj = {
          purchaserName: this.purchaserName,
          purchaserId: "",
        };
      } else {
        postobj = {
          supplierName: this.protocolObj.name,
          supplierId: this.protocolObj.id,
        };
      }

      var that = this;
      let arr = [],
      flag1 = true;
      if (this.tableData.length == 0) {
        this.$message("请至少添加一个商品");
        return;
      }
      for (var i = 0; i < this.tableData.length; i++) {
        if (
          this.tableData[i].unitPrice == "" ||
          this.tableData[i].unitPrice == null ||
          this.tableData[i].unitPrice == 0
        ) {
          this.$message("请填写正确的商品单价");
          return;
          break;
        }
      }
       for (var i = 0; i < this.tableData.length; i++) {
        if (
          this.tableData[i].estimatedPurchaseNum == "" ||
          this.tableData[i].estimatedPurchaseNum == null ||
          this.tableData[i].estimatedPurchaseNum == 0
        ) {
          this.$message("请填写正确的商品数量");
          return;
          break;
        }
      }
      this.tableData.forEach((ele, ind) => {
        let objs = {
          productId: ele.piId,
          num: parseFloat(ele.estimatedPurchaseNum), //预计采购的数
          remark: ele.remark,
          unitPrice:ele.unitPrice*100,
        };
        if (ele.productId) {
          that.$set(objs, "productId", ele.productId);
        }
        arr.push(objs);
      });
      let obj = {
        planSupplyDate: this.estimatedtime,
        purchaseType: Number(this.radiotype),
        remark: this.ruleForm.remark,
        itemList: arr,

      };
      var objnew = Object.assign(postobj, obj);
      let editobj = {};
      this.loadBtn = true;
      if (this.EditJudge == false) {
        //新增
        this.$post(canTeenAnalysisI.RequestPurchasenewly, objnew)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功");
              this.$router.push({
                path: "/SelfPurchaseorder/selfpurchaseList",
              });
            } else {
              this.$message(res.message);
            }
            this.loadBtn = false;
          })
          .catch((err) => {
            this.loadBtn = false;
            this.$message("请求服务器失败");
          });
      } else {
        //编辑
        that.$set(editobj, "id", this.publicDetailInfo.id);
        that.$set(editobj, "itemList", arr);
        console.log(editobj)
        this.$put(canTeenAnalysisI.RequestEditPurchase, editobj)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("编辑成功");
              this.$router.push({
                path: "/SelfPurchaseorder/selfpurchaseList",
              });
            } else {
              this.$message(res.message);
            }
            this.loadBtn = false;
          })
          .catch((err) => {
            this.loadBtn = false;
            this.$message("请求服务器失败");
          });
      }
    },

    // 返回
    goBack() {
      if (this.tableData.length > 0) {
        this.$confirm(
          "还有没有提交的数据。返回数据会丢失，确定返回吗?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.$router.push({
              path: "/SelfPurchaseorder/selfpurchaseList",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
        return;
      } else {
        this.$router.push({
          path: "/SelfPurchaseorder/selfpurchaseList",
        });
      }
    },
  },
};
</script>


<style>
.el-table .hidden-row {
  display: none;
}
.optionagree{
  height: 60px!important;
}
.optionagree div{
  line-height: 26px;
}
.optionagree span{
  display: block!important;
  line-height: 15px!important;
}
</style>


<style lang="less">
.activeclass{
  color: #67c23a!important;
}
.hehejiji span{
  display: inline-block;
  height: 30px;
}
.item-agree {
  cursor: pointer;
}
.eleowhead {
  border: 1px skyblue solid;
  padding: 10px 18px;
  border-radius: 3px;
  margin: 0;
  padding: 0;
  .eleowmain {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
}
.elcolall {
  display: flex;
  background-color: skyblue;
  box-sizing: border-box;
  padding: 10px 8px;
}
.eachitput {
  display: flex;
  margin-left: 10px;
  .inputname {
    display: inline-block;
    width: 40px;
    color: #606266;
  }
}

.libox {
  height: auto;
}
.libox.selected {
  .mr_10 {
    color: #409eff;
    font-weight: 700;
  }
}
.addOrder {
  padding-right: 0;
  width: calc(100% - 20px);
  .w_100 {
    width: 100px;
  }
  .ml_10 {
    margin-left: 10px;
  }
  .color_606266 {
    color: #606266;
  }
  .w50b {
    width: 50%;
    min-width: 500px;
  }
  .w60b {
    width: 100%;
    min-width: 650px;
    margin-bottom: 20px;
  }
  .head {
    overflow: hidden;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    min-width: 650px;
    .title {
      display: inline-block;
      line-height: 30px;
      font-size: 17px;
      padding-left: 9px;
    }
  }
}
</style>