pms-aomei/src/views/modules/pms/blenderBatch/components/edit.vue

<!-- 
    filename: edit.vue
    author: liubin
    date: 2023-07-19 09:00:04
    description: 
-->

<template>
  <el-dialog
    class="dialog-just-form"
    :visible="dialogVisible"
    @close="handleClose"
    :close-on-click-modal="false"
    width="'50%'">
    <!-- title  -->
    <div slot="title" class="dialog-title">
      <h1 class="">{{ dataForm.id ? "编辑" : "新增" }}</h1>
    </div>

    <!-- form  -->
    <el-form ref="dataForm" :model="dataForm" :rules="rules" v-loading="loading || detailLoading">
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="批次重量" prop="batchSize">
            <el-input v-model="dataForm.batchSize" clearable placeholder="请输入批次重量"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="dataForm.id">
          <el-form-item label="牌号" prop="bomName">
            <el-input v-model="dataForm.bomName" clearable placeholder="请输入牌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="dataForm.id">
          <el-form-item label="版本号" prop="techId">
            <el-select
              v-model="dataForm.bomVersion"
              filterable
              clearable
              placeholder="请选择版本"
              @change="handleBomVersionChange">
              <el-option v-for="(bom, index) in bomList" :key="bom.label" :label="bom.label" :value="bom.value">
                <div style="display: flex; align-items: center">
                  <!-- <span style="display: inline-block; width: 150px; overflow: hidden; text-overflow: ellipsis"> -->
                  {{ bom.label }}
                  <!-- </span> -->
                  <!-- <span style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                    {{ bom.remark || "无" }}
                  </span> -->
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- footer  -->
    <div slot="footer">
      <el-button v-if="!dataForm.id" type="primary" @click="handleBtnClick('保存')" :loading="btnLoading">
        保存
      </el-button>
      <el-button v-else type="primary" @click="handleBtnClick('更新')" :loading="btnLoading">更新</el-button>
      <el-button @click="handleBtnClick('取消')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "BlenderBatchAndBomEdit",
  components: {},
  props: {
    blenderOrderId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      detailLoading: false,
      dataForm: {
        id: null,
        batchSize: null,
        bomName: null,
        bomVersion: null,
      },
      rules: {
        batchSize: [
          { required: true, message: "批次重量不能为空", trigger: "blur" },
          { type: "number", message: "批次重量必须为数字", trigger: "blur", transform: (value) => Number(value) },
        ],
      },
      bomList: [],
      bomId: null,
      btnLoading: false,
    };
  },
  watch: {
    blenderOrderId: {
      handler(val) {
        // console.log("blenderOrderId changed", val);
      },
      immediate: true,
    },
  },
  methods: {
    // 初始化
    init(id) {
      this.dataForm.id = id;
      this.getBomList(id);
      this.getDetail(id);
      this.dialogVisible = true;
    },
    // 获取详情
    async getDetail(id) {
      if (!id) return;
      this.detailLoading = true;
      const {
        data: { data: batch },
      } = await this.$http.get(`/pms/blenderBatch/${id}`);
      this.dataForm.batchSize = batch.batchSize;
      this.dataForm.bomName = batch.bomName;
      this.dataForm.bomVersion = batch.bomVersion;
      this.bomId = batch.bomId;
      this.detailLoading = false;
    },
    // 获取工艺列表
    async getBomList(id) {
      if (!id) return;
      this.loading = true;
      const { data: res } = await this.$http.post("/pms/blenderBatch/getBoms", {
        id,
        blenderOrderId: this.blenderOrderId,
      });
      this.loading = false;
      if (res.code == 0) {
        this.bomList = res.data.list.map((item) => {
          return {
            label: item.version,
            value: item.version,
            id: item.id,
            brand: item.code,
          };
        });
      }
    },

    // 改变version
    handleBomVersionChange(version) {
      const bom = this.bomList.find((item) => item.value == version);
      this.bomId = bom.id;
    },

    // 按钮事件
    handleBtnClick(type) {
      switch (type) {
        case "保存":
        case "更新":
          this.$refs.dataForm.validate((valid) => {
            if (valid) {
              this.btnLoading = true;
              this.$http[type == "保存" ? "post" : "put"](
                "/pms/blenderBatch",
                type == "保存"
                  ? {
                      batchSize: this.dataForm.batchSize,
                      blenderOrderId: this.blenderOrderId,
                    }
                  : {
                      id: this.dataForm.id,
                      blenderOrderId: this.blenderOrderId,
                      batchSize: this.dataForm.batchSize,
                      bomId: this.bomId,
                    }
              ).then((res) => {
                if (res.data.code == 0) {
                  this.$message.success(type + "成功");
                  this.handleClose(true);
                } else {
                  this.$message.error(res.data.msg);
                }
                this.btnLoading = false;
              });
            }
          });
          break;
        case "取消":
          this.handleClose();
          break;
        default:
          break;
      }
    },

    handleClose(refresh = false) {
      this.dialogVisible = false;
      setTimeout(() => {
        this.$emit("destroy", refresh);
      }, 500);
    },
  },
};
</script>

<style scoped>
.dialog-just-form >>> .el-dialog__body {
  /* padding-top: 16px !important;
  padding-bottom: 16px !important; */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.el-select,
.el-cascader,
.el-date-editor {
  width: 100% !important;
}

.dialog-just-form >>> .el-dialog__header {
  padding: 10px 20px 10px;
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
}
</style>