pms-aomei/src/views/modules/pms/bomTechAndFiring/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"
    :destroy-on-close="false"
    :close-on-click-modal="false"
    width="'50%'">
    <!-- title  -->
    <div slot="title" class="dialog-title">
      <h1 class="">编辑</h1>
    </div>

    <!-- form  -->
    <el-form ref="dataForm" :model="dataForm" v-loading="loading">
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="配方号" prop="code" :rules="rules.code">
            <el-input v-model="dataForm.code" clearable disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="牌号" prop="name" :rules="rules.name">
            <el-input v-model="dataForm.name" clearable disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="工艺" prop="techId" :rules="rules.tech">
            <el-select v-model="dataForm.techId" filterable clearable>
              <el-option v-for="(tech, index) in techList" :key="tech.label" :label="tech.label" :value="tech.value">
                <div style="display: flex; align-items: center">
                  <span style="display: inline-block; width: 150px; overflow: hidden; text-overflow: ellipsis">
                    {{ tech.label }}
                  </span>
                  <span style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                    {{ tech.remark || "无" }}
                  </span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

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

<script>
export default {
  name: "BomTechAndFiringEdit",
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      dataForm: {
        id: null,
        code: null,
        name: null,
      },
      rules: {
        code: [],
        name: [],
        tech: [],
        // name: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
      },
      techList: [],
      btnLoading: false,
    };
  },
  computed: {},
  mounted() {
    this.getTechList().then(() => {
      this.dialogVisible = true;
    });
  },
  methods: {
    // 初始化
    init({ id, code, name, techId, bomId }) {
      this.$set(this.dataForm, "id", id);
      this.$set(this.dataForm, "code", code);
      this.$set(this.dataForm, "name", name);
      this.$set(this.dataForm, "techId", techId);
      this.$set(this.dataForm, "bomId", bomId);
    },
    // 获取工艺列表
    async getTechList() {
      const { data: res } = await this.$http.post("/pms/equipmentTech/pageView", {
        wsId: 3,
        bom: "",
        key: "",
        limit: 999,
        page: 1,
      });
      if (res.code == 0) {
        //console.log("res", res);
        this.techList = res.data.list.map((item) => {
          return {
            label: item.code,
            value: item.id,
            remark: item.remark,
          };
        });
      }
    },

    // 按钮事件
    handleBtnClick(type) {
      switch (type) {
        // case "保存":
        //   this.$refs.dataForm.validate((valid) => {
        //     if (valid) {
        //       this.$emit("emit-data", { type: "保存", data: this.dataForm });
        //     }
        //   });
        //   break;
        case "更新":
          this.$refs.dataForm.validate((valid) => {
            if (valid) {
              this.btnLoading = true;
              this.$http
                .put("/pms/bomTech", {
                  id: this.dataForm.id,
                  techId: this.dataForm.techId,
                  bomId: this.dataForm.bomId,
                })
                .then((res) => {
                  if (res.data.code == 0) {
                    this.$message.success("更新成功");
                    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>