order-ui-pc/src/views/sellOut/salesOrder/components/purchase-order-addedit-model.vue

<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="10vh"
    width="1040px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="closeModel"
  >
    <el-card style="margin-top: -20px" class="account">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form
            :model="ruleForm"
            :rules="rules"
            status-icon
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="采购供应商" prop="supplierNo">
                    <search-supplier
                      :disabled="isDisabled"
                      :value="ruleForm.supplierNo"
                      :placeholder="'请选择供应商'"
                      :is-detail="true"
                      :names="supplierName"
                      @searchChange="selectSupplier"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预计入库时间" prop="expecttime">
                    <el-date-picker
                      :disabled="isDisabled"
                      v-model="ruleForm.expecttime"
                      type="datetime"
                      style="width: 100%"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期"
                      :picker-options="pickerOptions"
                      @change="selectTime"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="实时金价" prop="now_god_price">
                    <el-input
                      placeholder="0"
                      disabled
                      v-model="ruleForm.now_god_price"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="采购数量" prop="good_num">
                    <el-input
                      placeholder="0"
                      disabled
                      v-model="ruleForm.good_num"
                      maxlength="100"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品重量" prop="weight">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.weight"
                      maxlength="100"
                    >
                      <template slot="append">g</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="工艺费" prop="teach_fee">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.teach_fee"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="包装费" prop="pakge_fee">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.pakge_fee"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="加标费" prop="mark_fee">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.mark_fee"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证书费" prop="cert_fee">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.cert_fee"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="物流费" prop="delivery_fee">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.delivery_fee"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开模费" prop="open_fee">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.open_fee"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="工差重量" prop="diff_weight">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.diff_weight"
                      maxlength="100"
                    >
                      <template slot="append">g</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="工差金额" prop="diff_fee">
                    <el-input
                      placeholder="0"
                      v-model="ruleForm.diff_fee"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="!isDisabled">
                  <el-form-item label="裸价" prop="nake_fee">
                    <el-input
                      v-model="ruleForm.nake_fee"
                      placeholder="0"
                      maxlength="100"
                    >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24"
                  ><el-form-item label="备注" prop="remark">
                    <el-input
                      :disabled="isDisabled"
                      type="textarea"
                      maxlength="250"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      v-model="ruleForm.remark"
                    /> </el-form-item
                ></el-col>
              </el-row>

              <el-col :span="19" class="gongshi">
                <el-row>
                  <el-col :span="24">
                    <span class="tuan chu">
                      <span>开模费</span>
                      <span>采购数量</span>
                    </span>
                    <span class="icon-span">+</span>
                    <span class="tuan cheng"
                      ><span class="name">商品重量(g)</span
                      ><span class="icon-span">×</span>
                      <span class="name">实时金价</span></span
                    >
                    <span class="icon-span">+</span>
                    <span class="tuan cheng">
                      <span class="name">工艺费</span
                      ><span class="icon-span">×</span>
                      <span class="name">商品重量(g)</span>
                    </span>
                    <span class="icon-span">+</span>
                    <span class="label">包装费</span
                    ><span class="icon-span">+</span>
                    <span class="label">裸价</span
                    ><span class="icon-span">+</span>
                    <span class="label">加标费</span
                    ><span class="icon-span">+</span>
                    <span class="label">证书费</span>
                    <span class="icon-span">+</span>
                    <span class="label">物流费</span
                    ><span class="icon-span">=</span>
                  </el-col>
                  <el-col :span="24">
                    <span class="label">参考商品单价：</span>
                    <span class="good_price">{{ good_price }}</span>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="5" style="text-align: right">
                <el-button type="primary" @click="submitForm">保 存 </el-button>
                <el-button @click="showModelThis = false">关 闭</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from "@/apis/service/purchaseIn/purchaseOrder/detail";
import resToken from "@/mixins/resToken";
import rules from "./rules";
export default {
  name: "Account",
  props: ["showModel", "id", "sitem"],
  mixins: [resToken],
  data() {
    return {
      roleList: [],
      loading: false,
      title: "修改采购反馈",
      organizeList: [],
      showModelThis: this.showModel,
      rulesThis: this.rules,
      supplierName: "",
      good_price: "0",
      lasttime: "",
      ruleForm: {
        nake_fee: "", //裸价
        wsm_code: "", //仓库
        supplier_code: "", //供应商
        supplierNo: [], //采购供应商编码
        good_num: "",
        expecttime: "",
        weight: "",
        now_god_price: "",
        teach_fee: "",
        pakge_fee: "",
        mark_fee: "",
        cert_fee: "",
        delivery_fee: "",
        open_fee: "",
        diff_weight: "",
        diff_fee: "",
        remark: "",
      },
      rules: rules,
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },

    async initForm() {
      this.loading = true;
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },
    // 选择供应商
    selectSupplier(e) {
      if (e && e.id) {
        this.ruleForm.supplierNo = [e.code];
      } else {
        this.ruleForm.supplierNo = [];
        this.ruleForm.stock_code = [];
      }
      this.$refs.ruleForm.validateField("supplierNo ");
    },
    //初始化表单
    async resetForm() {
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          const {
            good_price,
            nake_fee,
            wsm_code,
            supplierNo,
            weight,
            now_god_price,
            teach_fee,
            pakge_fee,
            mark_fee,
            cert_fee,
            delivery_fee,
            open_fee,
            diff_weight,
            diff_fee,
            remark,
            good_num,
            supplier_name,
            lasttime,
          } = this.sitem;
          this.good_price = good_price || "0";
          this.supplierName = supplier_name;
          this.lasttime = lasttime || "";
          this.ruleForm = {
            cgdNo: this.id,
            nake_fee: nake_fee || "0", //裸价
            wsm_code: wsm_code || "", //仓库
            cgder_id: "",
            supplierNo: supplierNo ? [supplierNo] : [], //采购供应商
            good_num: good_num || "0",
            expecttime: lasttime || "", //预计入库时间
            weight: weight ? parseInt(weight + "") + "" : "0", //贵金属重量
            now_god_price: now_god_price || "10", //实时金价
            teach_fee: teach_fee || "0", //工艺费
            pakge_fee: pakge_fee || "0", //包装费
            mark_fee: mark_fee || "0", //加标费
            cert_fee: cert_fee || "0", //证书费
            delivery_fee: delivery_fee || "0", //物流费
            open_fee: open_fee || "0", //开模费
            diff_weight: diff_weight ? parseInt(diff_weight + "") + "" : "0", //工差重量
            diff_fee: diff_fee || "0", //工差金额
            remark: remark,
            good_price: "",
          };
        }
      });
    },
    // 保存更改
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const item = JSON.parse(JSON.stringify(this.ruleForm));
          item.supplierNo = item.supplierNo.toString();

          console.log(item);

          const res = await asyncRequest.update(item);
          this.loading = false;
          if (res && res.code === 0) {
            this.$notify.success({
              title: "添加成功",
              message: "",
            });
            this.showModelThis = false;
            this.$emit("refresh"); //抛出事件给详情页。
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

   <style lang="scss" scoped>
.account {
  .gongshi {
    span {
      vertical-align: top;
      display: inline-block;
      color: #000;
    }
    .icon-span {
      padding: 0 5px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      color: #606266;
      display: inline-block;
      // vertical-align: top;
      // display: inline-block;
    }
    .label {
      height: 40px;
      line-height: 40px;
    }
    .tuan {
      &.chu {
        width: 60px;
        height: 40px;
        display: inline-block;
        span {
          width: 60px;
          display: inline-block;
          line-height: 20px;
          text-align: center;
          font-size: 12px;
          height: 20px;
          &:last-child {
            border-top: 1px solid #606266;
          }
        }
      }
      &.cheng {
        .name {
          height: 40px;
          line-height: 40px;
        }
        .icon-span {
          line-height: 40px;
          font-size: 16px;
          padding: 0 1px;
        }
      }
    }
  }
}
</style>