accout-ui/src/views/InvoiceSales/invoiceApply/goodChangeDialog.vue

<template>
  <el-dialog
    v-loading="loading"
    title="设置发票商品信息"
    :center="true"
    align="left"
    top="7vh"
    width="840px"
    :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)"
    append-to-body
    @close="closeModel"
  >
    <el-card>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        size="mini"
        :rules="rulesThis"
        label-width="95px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品编号" prop="goodNo">
              <p>{{ ruleForm.goodNo }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品单价" prop="goodNo">
              <p>{{ ruleForm.price }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品单位" prop="unit">
              <el-input v-model="ruleForm.unit" maxlength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商品名称">
          <p>{{ ruleForm.goodname }}</p>
        </el-form-item>

        <el-form-item label="开票商品名" prop="remark">
          <el-input v-model="ruleForm.remark" maxlength="200"></el-input>
        </el-form-item>
        <el-row v-if="isDetail === '003'">
          <el-col :span="6" class="fl-col">
            <el-form-item label="总量">
              <p>{{ ruleForm.num }}</p>
            </el-form-item>
            <el-tag size="medium" class="fl-tag">数量</el-tag>
          </el-col>
          <el-col :span="6" style="width: 165px">
            <el-form-item label="已核销" label-width="55px">
              <p>{{ ruleForm.inv_num }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="width: 165px">
            <el-form-item label="未核销" label-width="55px">
              <p>{{ ruleForm.over_num }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="width: 231px">
            <el-form-item label="此次核销" prop="good_num" label-width="80px">
              <el-input-number
                step-strictly
                size="mini"
                controls-position="right"
                style="width: 100%"
                class="notAnniu"
                :disabled="isDetail !== '003'"
                v-model="ruleForm.good_num"
                :precision="0"
                :step="1"
                :min="0"
                :max="ruleForm.over_num"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="fl-col">
            <el-form-item label="总量">
              <p>{{ ruleForm.total }}</p>
            </el-form-item>
            <el-tag size="medium" class="fl-tag">金额</el-tag>
          </el-col>
          <el-col :span="6" style="width: 165px">
            <el-form-item label="已核销" label-width="55px">
              <p>{{ ruleForm.ainv_fee }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="width: 165px">
            <el-form-item label="未核销" label-width="55px">
              <p>{{ ruleForm.winv_fee }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="width: 231px">
            <el-form-item label="此次核销" label-width="80px" prop="total_fee">
              <el-input-number
                step-strictly
                size="mini"
                controls-position="right"
                style="width: 100%"
                class="notAnniu"
                :disabled="isDetail !== '003'"
                v-model="ruleForm.total_fee"
                :precision="2"
                :step="0.01"
                :min="0"
                :max="ruleForm.winv_fee"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" 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-card>
  </el-dialog>
</template>

<script>
export default {
  props: ["showModel", "item", "isDetail", "index"],
  data() {
    return {
      loading: false,
      showModelThis: this.showModel,
      ruleForm: {
        goodNo: "",
        goodname: "", // 账号
        remark: "",
        unit: "",
        num: "",
        inv_num: "",
        over_num: "",
        good_num: "",
        total: "",
        ainv_fee: "",
        winv_fee: "",
        total_fee: "",
      },
      rulesThis: this.rules,
      rules: {
        remark: [
          {
            required: true,
            message: "请输入开票商品名",
            trigger: "blur",
          },
        ],
        good_num: [
          {
            required: true,
            message: "请输入此次核销数量",
            trigger: "blur",
          },
        ],
        unit: [
          {
            required: true,
            message: "请输入商品单价",
            trigger: "blur",
          },
        ],
        total_fee: [
          {
            required: true,
            message: "请输入开票商品名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    // icon(val) {
    //   if (val) {
    //     this.showModelThis = false
    //     this.$emit('setVal', val)
    //   }
    // },
    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;
      console.log(this.item);
      await this.resetForm();
      this.rulesThis = this.rules;
      console.log(this.item);
      this.ruleForm = Object.assign({}, this.item);
      this.loading = false;
    },
    async resetForm() {
      // 重置
      await this.$nextTick((sitem) => {
        console.log(sitem);
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.ruleForm = {
            goodNo: "",
            goodname: "", // 账号
            remark: "",
            num: "",
            inv_num: "",
            over_num: "",
            good_num: "",
            total: "",
            unit:"",
            ainv_fee: "",
            winv_fee: "",
            total_fee: "",
          };
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.ruleForm.remark = this.ruleForm.remark.replace(/\s*/g, "");
          if (this.ruleForm.remark === "") {
            this.$message.error("开票商品名不能未空!");
            return;
          }
          if (this.isDetail === "003") {
            if (this.ruleForm.good_num === 0) {
              this.$message.error("核销数量不能为0!");
              return;
            }
            if (
              this.ruleForm.total_fee === 0 ||
              this.ruleForm.total_fee === 0.0 ||
              this.ruleForm.total_fee === 0.0
            ) {
              this.$message.error("核销金额不能为0!");
              return;
            }
          }
          this.showModelThis = false;
          this.$emit("refresh", this.ruleForm);
          // console.log("this.icon");
          // console.log(this.icon);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style></style>