sd-new-vue/src/views/group/order/draw-design/index.vue

<template>
  <el-card class="box-card">
    <byTable
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      :searchConfig="searchConfig"
      highlight-current-row
      :action-list="[
        {
          text: '快速登记打样',
          action: () => clickModal(),
        },
      ]"
      @get-list="getList"
      @clickReset="clickReset">
      <template #size="{ item }">
        <div>{{ item.length }} * {{ item.width }} * {{ item.height }}</div>
      </template>
    </byTable>

    <el-dialog title="快速登记打样" v-if="openDialog" v-model="openDialog" width="700">
      <el-form :model="formData.data" label-width="120px" :rules="rules" ref="submit">
        <el-form-item label="事业部:" prop="departmentId">
          <el-select v-model="formData.data.departmentId" placeholder="请选择事业部" style="width: 100%">
            <el-option v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单号:" prop="orderId">
          <el-select-v2
            v-model="formData.data.orderId"
            :options="productionOrder"
            placeholder="请选择订单号"
            style="width: 100%"
            filterable
            remote
            :loading="loadingSelect"
            :remote-method="remoteMethod" />
        </el-form-item>
        <el-form-item label="尺寸（cm）" required>
          <el-row>
            <el-col :span="8">
              <el-form-item label="" prop="length">
                <el-select v-model="formData.data.length" placeholder="请选择长" style="width: 100%">
                  <el-option label="183" :value="183" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" prop="width">
                <el-select v-model="formData.data.width" placeholder="请选择宽" style="width: 100%">
                  <el-option label="61" :value="61" />
                  <el-option label="68" :value="68" />
                  <el-option label="80" :value="80" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" prop="height">
                <el-select v-model="formData.data.height" placeholder="请选择高" style="width: 100%">
                  <el-option label="0.6" :value="0.6" />
                  <el-option label="0.8" :value="0.8" />
                  <el-option label="1.0" :value="1.0" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="是否新废垫:" prop="useNewBom">
          <el-select v-model="formData.data.useNewBom" placeholder="请选择是否新废垫" style="width: 100%">
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="定制加工类型:" prop="customProcessingType">
              <el-select v-model="formData.data.customProcessingType" placeholder="请选择定制加工类型" style="width: 100%">
                <el-option label="体位线" :value="10" />
                <el-option label="logo" :value="20" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加工次数:" prop="processingNum">
              <el-input-number
                onmousewheel="return false;"
                v-model="formData.data.processingNum"
                placeholder="加工次数"
                style="width: 100%"
                :controls="false"
                :min="0"
                :precision="0" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="openDialog = false" size="large">取 消</el-button>
        <el-button type="primary" @click="clickSubmit()" size="large" v-preReClick>确 定</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const departmentList = ref([]);
const sourceList = ref({
  data: [],
  pagination: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    orderCode: "",
    departmentId: "",
  },
});
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "orderCode",
      label: "订单号",
    },
    {
      type: "select",
      prop: "departmentId",
      data: departmentList.value,
      label: "事业部",
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "事业部",
        prop: "departmentName",
        width: 140,
      },
    },
    {
      attrs: {
        label: "订单号",
        prop: "orderCode",
        "min-width": 160,
      },
    },
    {
      attrs: {
        label: "废垫尺寸",
        slot: "size",
        width: 160,
      },
    },
    {
      attrs: {
        label: "是否新废垫",
        prop: "useNewBom",
      },
      render(val) {
        if (val == 1) {
          return "是";
        }
        return "否";
      },
    },
    {
      attrs: {
        label: "打样类型",
        prop: "customProcessingType",
      },
      render(val) {
        if (val == 10) {
          return "体位线";
        }
        return "logo";
      },
    },
    {
      attrs: {
        label: "废垫费用",
        prop: "unitPrice",
      },
    },
    {
      attrs: {
        label: "加工次数",
        prop: "processingNum",
      },
    },
    {
      attrs: {
        label: "加工费用",
        prop: "customProcessingFee",
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "operator",
        width: 140,
      },
    },
    {
      attrs: {
        label: "时间",
        prop: "createTime",
        width: 160,
      },
    },
  ];
});
const getDemandData = () => {
  proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      departmentList.value = departmentList.value.concat(
        res.rows.map((item) => {
          return {
            dictKey: item.id,
            dictValue: item.name,
          };
        })
      );
    }
  });
};
getDemandData();
const getList = (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/orderProofingRegistration/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const openDialog = ref(false);
const formData = reactive({
  data: {},
});
const rules = ref({
  departmentId: [{ required: true, message: "请选择事业部", trigger: "change" }],
  orderId: [{ required: true, message: "请选择订单", trigger: "change" }],
  length: [{ required: true, message: "请选择长", trigger: "change" }],
  width: [{ required: true, message: "请选择宽", trigger: "change" }],
  height: [{ required: true, message: "请选择高", trigger: "change" }],
  useNewBom: [{ required: true, message: "请选择是否新废垫", trigger: "change" }],
  customProcessingType: [{ required: true, message: "请选择定制加工类型", trigger: "change" }],
  processingNum: [{ required: true, message: "请输入加工次数", trigger: "blur" }],
});
const productionOrder = ref([]);
const loadingSelect = ref(false);
const remoteMethod = (query) => {
  if (query !== "") {
    loadingSelect.value = true;
    proxy.post("/orderInfo/getOrderSelectList", { pageNum: 1, pageSize: 200, code: query }).then(
      (res) => {
        if (res.rows && res.rows.length > 0) {
          productionOrder.value = res.rows.map((item) => {
            if (item.wlnCode) {
              return {
                value: item.id,
                label: item.code + " （" + item.wlnCode + "）",
              };
            } else {
              return {
                value: item.id,
                label: item.code,
              };
            }
          });
        } else {
          productionOrder.value = [];
        }
        loadingSelect.value = false;
      },
      (err) => {
        console.log(err);
        productionOrder.value = [];
        loadingSelect.value = false;
      }
    );
  } else {
    productionOrder.value = [];
  }
};
const clickModal = () => {
  formData.data = {};
  openDialog.value = true;
};
const priceList = ref({
  61: {
    0.6: 7.5,
    0.8: 8.5,
    1.0: 11.5,
  },
  68: {
    0.6: 8,
    0.8: 10,
    1.0: 13,
  },
  80: {
    0.6: 9,
    0.8: 12,
    1.0: 15,
  },
});
const clickSubmit = () => {
  proxy.$refs.submit.validate((valid) => {
    if (valid) {
      if (formData.data.useNewBom === 1) {
        formData.data.unitPrice = priceList.value[formData.data.width][formData.data.height];
      } else {
        formData.data.unitPrice = 0;
      }
      let price = 0;
      if (formData.data.customProcessingType == 10) {
        price = 1.5;
      } else {
        price = 0.5;
      }
      formData.data.customProcessingFee = Number(Math.round(price * formData.data.processingNum * 100) / 100);
      proxy.post("/orderProofingRegistration/add", formData.data).then(() => {
        ElMessage({ message: "提交成功", type: "success" });
        getList();
        openDialog.value = false;
      });
    }
  });
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>