
<template>
  <div class="page">
    <el-dialog title="产品BOM" :visible.sync="bomDialog.visible" width="40%">
      <el-form
        :model="bomForm"
        label-width="120px"
        :rules="bomRules"
        ref="bomForm"
      >
        <el-form-item label="BOM类型" prop="useType">
          <el-select v-model="bomForm.useType" placeholder="请选择BOM类型">
            <el-option
              v-for="($label, $value) in tableData.dict.useType"
              :key="$value"
              :label="$label"
              :value="$value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="BOM版本">
          <el-input v-model="bomForm.version" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="bomForm.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bomDialog.visible = false">取 消</el-button>

        <el-button
          type="primary"
          :disabled="(submitButtonDisabled = false)"
          @click="submitBomForm"
          >保 存</el-button
        >
      </span>
    </el-dialog>

    <LayoutTable :data="tableData" :config="tableConfig" notDel />
  </div>
</template>

<script>
import table from "@/assets/mixins/table";

export default {
  mixins: [table],
  methods: {
    submit(row) {
      this.tableData.loading = true;
      this.$post("/materia/bom/version/submitVersion", {
        id: row.id,
      })
        .then((res) => {
          if (res && res.code && res.code == 1) {
            this.$message.success("版本提交成功！");
            this.tableData.loading = false;
            this.getData();
          }
        })
        .catch((error) => {
          this.$message.error("版本提交失败！");
        });
    },
    doCreateOpen(row) {
      this.initForm();
      this.bomForm.version = row.verCode;

      this.bomForm.materiaId = row.materiaId;

      this.bomForm.materiaCode = row.materiaCode;

      this.bomForm.bomCode = row.bomCode;

      this.bomForm.productVersionId = row.id;

      //通过bomCode获取bomTreeId

      this.$post("/materia/bom/tree/list", {
        "query.code": row.bomCode,
      }).then(({ data }) => {
        this.bomForm.bomTreeId = data.result[0].id;
          this.bomForm.materiaId = data.result[0].materiaId;

        this.bomDialog.visible = true;
      });
    },

    // 提交bom表单
    submitBomForm(ref) {
      const el = this.$refs.bomForm;
      el.validate((valid) => {
        if (!valid) return;
        this.submitButtonDisabled = true;

        let bomCode=this.bomForm.bomCode;
        let productVersionId=this.bomForm.productVersionId;

        this.$post("/materia/bom/save", {
          entity: this.bomForm,
        })
          .then((res) => {
            if (res && res.code && res.code == 1) {
              this.$post("/materia/bom/version/updateBom", {
                productVersionId: productVersionId,
                bomId: res.data.id,
              })
                .then((res) => {
                  if (res && res.code && res.code == 1) {
                    this.$message.success(
                      "产品BOM创建成功！创建产品树路径:" + bomCode
                    );
                  }
                })
                .catch((error) => {
                  this.$message.error(error);
                });

              this.initForm();

              //修改更新bomid

              this.bomDialog.visible = false;
            }
          })
          .catch((error) => {
            this.submitButtonDisabled = false;
            this.$message.error(error.message);
          });
      });
    },

    initForm() {
      this.bomForm = {
        id: null,
        materiaId: "",
        materiaCode: "",
        materiaName: "",
        parentId: "",
        version: "",
        status: "401",
        useType: "",
        remark: "",
        bomTreeId: "",
        bomCode: "",
      };

      this.$post("/materia/bom/tree/add", {});
    },
  },
  data() {
    return {
      submitButtonDisabled: false,
      bomForm: {},
      bomDialog: {
        visible: false,
        innerVisible: false,
      },
      bomRules: {
        selfCode: [
          {
            required: true,
            message: "请输入BOM短代码",
            trigger: "blur",
          },
          { max: 10, message: "短代码最大长度10个字符", trigger: "blur" },
        ],
        materiaName: [
          {
            required: true,
            message: "请选择物料",
            trigger: "blur",
          },
        ],
        useType: [
          {
            required: true,
            message: "请选择BOM类型",
            trigger: "blur",
          },
        ],
      },
      config: {
        search: [
          {
            name: "materiaCode",
            type: "text",
            label: "物料代码",
            fuzzy: true,
          },
          {
            name: "verCode",
            type: "text",
            label: "版本编码",
            fuzzy: true,
          },
          {
            name: "publishStatus",
            type: "select",
            label: "发布状态",
          },
        ],
        columns: [
          {
            prop: "materiaCode",
            label: "物料代码",
          },

          {
            prop: "verCode",
            label: "版本编码",
          },

          {
            prop: "publishDesc",
            label: "发布描述",
          },

          {
            prop: "publishUser",
            label: "版本发布人",
          },

          {
            prop: "publishStatus",
            label: "发布状态",
            formatter: this.formatter,
          },

          {
            prop: "publishTime",
            label: "预计发布时间",
            width: 140,
            formatter: this.formatterDateOnly,
          },

          {
            label: "操作",
            width: 320,
            formatter: (row) => {
              return (
                <el-row>
                  <span> </span>

                  {row.publishStatus == 0 || row.publishStatus == 3 ? (
                    <Confirm
                      message="确定要提交当前版本？"
                      onConfirm={() => this.submit(row)}
                    >
                      <el-button round size="mini">
                        提交
                      </el-button>
                    </Confirm>
                  ) : (
                    ""
                  )}
                  <span> </span>

                  {row.publishStatus == 1 ? (
                    <el-button
                      round
                      size="mini"
                      onClick={() => {
                        this.doCreateOpen(row);
                      }}
                    >
                      创建bom
                    </el-button>
                  ) : (
                    ""
                  )}
                  <span> </span>

                  {row.publishStatus == 0 || row.publishStatus == 3 ? (
                    <el-button
                      round
                      size="mini"
                      onClick={() => {
                        this.toEdit(row);
                      }}
                    >
                      编辑
                    </el-button>
                  ) : (
                    ""
                  )}
                  <span> </span>
                  {row.publishStatus == 0 ? (
                    <Confirm
                      message="确定要删除当前版本？"
                      onConfirm={() => this.toDel(row)}
                    >
                      <el-button round size="mini">
                        删除
                      </el-button>
                    </Confirm>
                  ) : (
                    ""
                  )}
                  <span> </span>
                </el-row>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
