fans-mobile/src/views/MES/productionOrder/details.vue

<template>
  <div class="form">
    <van-nav-bar :title="'生产订单详情'" :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" 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: {},
});
const rules = {
  contractId: [
    {
      required: true,
      message: proxy.t("claim.contractCanNotBeEmpty"),
    },
  ],
  money: [
    {
      required: true,
      message: proxy.t("claim.relatedAmountCanNotBeEmpty"),
    },
  ],
};
const formOption = reactive({
  readonly: true, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  submitBtnText: proxy.t("common.submit"),
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: false,
    listTitle: "产品生产进度",
    prop: "produceOrderDetailList",
    plain: true,
    listConfig: [
      {
        type: "input",
        itemType: "text",
        label: "产品编码",
        prop: "productCode",
      },
      {
        type: "input",
        itemType: "text",
        label: "产品名称",
        prop: "productName",
      },
      {
        type: "input",
        itemType: "text",
        label: "产品数量",
        prop: "quantity",
      },
      {
        type: "input",
        itemType: "text",
        label: "完成数量",
        prop: "finishQuantity",
      },
    ],
    clickFn: () => {},
  },
});
const statusData = ref([
  {
    label: "未开始",
    value: "0",
  },
  {
    label: "进行中",
    value: "1",
  },
  {
    label: "已完成",
    value: "2",
  },
]);
const contractProdTag = ref([]);
const getDict = () => {
  proxy.getDictOne(["contract_prod_tag"]).then((res) => {
    contractProdTag.value = res["contract_prod_tag"].data.map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
    formData.data.produceStatusName = proxy.dictValueLabel(
      formData.data.produceStatus,
      statusData.value
    );
    if (formData.data.prodTag) {
      formData.data.prodTagName = "";
      formData.data.prodTags = formData.data.prodTag.split(",");
      if (formData.data.prodTags && formData.data.prodTags.length > 0) {
        formData.data.prodTags.map((x, index) => {
          formData.data.prodTagName +=
            " " + proxy.dictValueLabel(x, contractProdTag.value);
        });
      }
    }
  });
};

const formConfig = reactive([
  {
    type: "input",
    label: "生产公司",
    prop: "companyName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "订单号",
    prop: "code",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "下单时间",
    prop: "createTime",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "交期",
    prop: "deliveryPeriod",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "投产时间",
    prop: "produceTime",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "生产状态",
    prop: "produceStatusName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "生产指示",
    prop: "prodTagName",
    itemType: "text",
    readonly: true,
  },
]);
const onClickLeft = () => history.back();
onMounted(() => {
  if (route.query && route.query.data) {
    formData.data = JSON.parse(route.query.data);
    getDict();
  }
});
</script>
<style lang="scss" scoped>
</style>