pms-aomei/src/components/palletDialog.vue

<!-- 
    filename: palletDialog.vue
    author: liubin
    date: 2023-08-22 09:15:49
    description: 生成托盘弹窗
-->

<template>
  <el-dialog
    :visible.sync="visible"
    width="500px"
    v-bind="$attrs"
    @close="close"
    @closed="$emit('destroy')"
    custom-class="pms-dialog">
    <!-- :class="{ 'pms-dialog--rotate-down': startLeave }"> -->
    <span slot="title" class="dialog-title">生成托盘</span>

    <el-form ref="dataForm" :model="dataForm" size="small" style="padding: 16px" v-loading="formLoading">
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="订单号" prop="orderId" :rules="null">
            <el-select v-model="dataForm.orderId" filterable clearable placeholder="请选择订单号">
              <el-option v-for="o in orderList" :key="o.id" :label="o.code" :value="o.id">
                <div class="option-label">
                  <span>{{ o.code }}</span>
                  <span>{{ o.cate }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="ids.length > 0" :gutter="20">
        <el-col>
          <el-form-item label="尾托" prop="ids" :rules="null">
            <el-input disabled v-model="ids[0].orderCode" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="close">取消</el-button>
      <el-button size="small" type="primary" @click="handleConfirm">生成</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "PalletDialog",
  components: {},
  props: ["ids"],
  data() {
    return {
      visible: false,
      loading: false,
      orderList: [],
      dataForm: {
        orderId: null,
        ids: [],
      },
      formLoading: false,
    };
  },
  methods: {
    async init() {
      this.visible = true;
      this.loading = true;
      // 获取生产订单列表
      const { data: res } = await this.$http.post("/pms/order/listWithStock");
      if (res.code === 0) {
        this.orderList = res.data.map((item, index) => ({
          code: item.code, // 订单号
          cate: item.cate, // 订单子号
          id: item.id, // 订单 id
        }));
      }
      this.loading = false;
    },

    close() {
      this.visible = false;
    },

    async handleConfirm() {
      this.loading = true;
      const { data: res } = await this.$http.post("/pms/pallet/newPallet", this.dataForm);
      this.loading = false;
      if (res.code === 0) {
        this.$message.success("提交成功");
        this.$emit("refresh-list");
        this.close();
      }
    },

    // 清空输入数据
    clearDataForm() {
      this.dataForm = {
        orderId: null,
        ids: [],
      };
    },
  },
};
</script>

<style scoped>
.dialog-just-form >>> .dialog-title {
  color: #000;
}

.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>

<style>
.pms-dialog {
  box-shadow: 0 0 24px 8px rgba(0, 0, 0, 0.125);
  border-radius: 4px;
  transition: transform 1.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.pms-dialog .el-dialog__header {
  padding: 16px;
  border-bottom: 1px solid #eaeaea;
}

.pms-dialog .el-dialog__header .dialog-title {
  font-size: 1.2rem;
}

.pms-dialog .el-dialog__body {
  padding: 0;
  overflow-x: hidden;
}

.pms-dialog .el-dialog__footer {
  background: #fafafa;
  min-height: 3.2rem;
  padding: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-align: unset;
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px;
  align-items: center;
}

.option-label {
  display: flex;
  align-items: center;
}

.option-label > span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.option-label > span:first-child {
  width: 128px;
  margin-right: 8px;
}

/* .option-label > span:last-child {
} */
</style>