byte-sailing-mobile/src/views/JXSK/mes/receive/add.vue

<template>
  <div class="form" style="padding-bottom: 60px">
    <van-nav-bar
      :title="$t('receive.name')"
      :left-text="$t('common.back')"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <testForm
      v-model="formData.data"
      :formOption="formOption"
      :formConfig="formConfig"
      :rules="rules"
      @onSubmit="onSubmit"
      @otherBtnClick="otherBtnClick"
      ref="formDom"
    >
    </testForm>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { showSuccessToast, showFailToast } from "vant";
import { useRoute } from "vue-router";
import testForm from "@/components/testForm/index.vue";
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const formDom = ref(null);
const formData = reactive({
  data: {
    list: [],
  },
});
const rules = {
  warehouseName: [{ required: true, message: proxy.t('receive.warehouseNameCanNotBeEmpty') }],
  productName: [{ required: true, message: proxy.t('receive.itemNameCanNotBeEmpty') }],
  quantity: [{ required: true, message: proxy.t('receive.warehousingQuantityCanNotBeEmpty') }],
};
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  submitBtnText: proxy.t('receive.confirmReceipt'),
  otherBtn: true,
  otherBtnText:  proxy.t('receive.return'),
  btnConfig: {
    isNeed: false,
    prop: "list",
    plain: true,
    listTitle: "",
    listConfig: [],
    clickFn: () => {},
  },
});
const formConfig = reactive([
  {
    type: "input",
    itemType: "text",
    label: proxy.t('receive.productName'),
    prop: "productName",
    readonly: true,
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('receive.productSN'),
    prop: "productSn",
    readonly: true,
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('receive.previousProcess'),
    prop: "productionProcessesName",
    readonly: true,
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('receive.circulationInto'),
    prop: "circulationUserName",
    readonly: true,
  },
]);

const onClickLeft = () => history.back();
const onSubmit = () => {
  proxy.post("/productionTaskDetail/receive", { id: formData.data.id }).then(
    (res) => {
      setTimeout(() => {
        showSuccessToast(proxy.t('common.operationSuccessful'));
        proxy.$router.push("/main/jxskReceive");
      }, 500);
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
const otherBtnClick = () => {
  proxy.post("/productionTaskDetail/rejection", { id: formData.data.id }).then(
    (res) => {
      setTimeout(() => {
        showSuccessToast(proxy.t('common.operationSuccessful'));
        proxy.$router.push("/main/jxskReceive");
      }, 500);
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
const getDetails = () => {
  proxy.post("/productionTask/detail", { id: route.query.id }).then(
    (res) => {
      console.log(res, "ada");
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
onMounted(() => {
  if (route.query.id) {
    formData.data = { ...route.query };
  }
});
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  padding: 5px 10px 0 10px;
  justify-content: space-between;
  align-items: center;
  .title {
    flex: 1;
  }
  .delete {
    width: 20px;
    cursor: pointer;
    text-align: center;
  }
}
</style>