jxst-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"
    >
      <template #productRemark>
        <div style="width: 100%">
          {{ formData.data.productRemark }}
        </div>
      </template>
      <template #fileTwo>
        <div
          style="width: 100%"
          v-if="
            formData.data.fileListTwo && formData.data.fileListTwo.length > 0
          "
        >
          <span
            v-for="item in formData.data.fileListTwo"
            :key="item.id"
            @click="onPreviewFile(item)"
            style="margin-right: 10px; cursor: pointer; color: #409eff"
          >
            {{ item.name }}
          </span>
        </div>
        <div v-else>无</div>
      </template>
      <template #fileThree>
        <div
          style="width: 100%"
          v-if="
            formData.data.fileListThree &&
            formData.data.fileListThree.length > 0
          "
        >
          <span
            v-for="item in formData.data.fileListThree"
            :key="item.id"
            @click="onPreviewFile(item)"
            style="margin-right: 10px; cursor: pointer; color: #409eff"
          >
            {{ item.name }}
          </span>
        </div>
        <div v-else>无</div>
      </template>
    </testForm>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { showSuccessToast, showFailToast } from "vant";
import { showConfirmDialog } 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: false,
  otherBtnText: "退回前道工序",
  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: "规格型号",
    prop: "productSpec",
    readonly: true,
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t("receive.productSN"),
    prop: "productSn",
    readonly: true,
  },
  {
    type: "slot",
    itemType: "textarea",
    label: "产品备注",
    slotName: "productRemark",
    readonly: true,
  },
  {
    type: "input",
    itemType: "text",
    label: "当前工序",
    prop: "productionProcessesName",
    readonly: true,
  },

  {
    type: "slot",
    label: "生产工序资料",
    slotName: "fileTwo",
  },
  {
    type: "slot",
    label: "工单附件",
    slotName: "fileThree",
  },
  {
    type: "upload",
    label: "完工拍摄",
    prop: "fileList",
    showUpload: false,
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t("receive.previousProcess"),
    prop: "previousProcessesName",
    readonly: true,
  },
  {
    type: "input",
    itemType: "text",
    label: "流转人",
    prop: "circulationUserName",
    readonly: true,
  },
]);

const onClickLeft = () => history.back();
const onSubmit = () => {
  proxy
    .post("/productionTaskDetail/haveTaskCount", {
      productionProcessesId: formData.data.productionProcessesId,
    })
    .then((res) => {
      if (res.data && Number(res.data) > 0) {
        showConfirmDialog({
          title: "提示",
          message: "你当前还有进行中的任务尚未提交，确认接收新任务吗？",
        })
          .then(() => {
            showConfirmDialog({
              title: "提示",
              message: "你当前还有进行中的任务尚未提交，确认接收新任务吗？",
            })
              .then(() => {
                submitApi();
              })
              .catch(() => {
                return;
              });
          })
          .catch(() => {
            return;
          });
      } else {
        submitApi();
      }
    });
};
const submitApi = () => {
  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("/productionTaskDetail/detail", { id: route.query.id }).then(
    (res) => {
      if (
        res.data.productionTaskDetailRecordList &&
        res.data.productionTaskDetailRecordList.length > 0
      ) {
        let id = res.data.previousProcessesRecordId;
        proxy
          .post("/fileInfo/getList", { businessIdList: [id] })
          .then((res) => {
            if (res.data[id] && res.data[id].length > 0) {
              formData.data.fileList = res.data[id].map((item) => {
                return {
                  raw: item,
                  name: item.fileName,
                  url: item.fileUrl,
                };
              });
            }
          });
      }

      proxy
        .post("/fileInfo/getList", {
          businessIdList: [res.data.productionProcessesId],
        })
        .then((resOne) => {
          if (
            resOne.data[res.data.productionProcessesId] &&
            resOne.data[res.data.productionProcessesId].length > 0
          ) {
            formData.data.fileListTwo = resOne.data[
              res.data.productionProcessesId
            ].map((item) => {
              return {
                raw: item,
                name: item.fileName,
                url: item.fileUrl,
              };
            });
          }
        });

      proxy
        .post("/fileInfo/getList", {
          businessIdList: [res.data.workOrderId],
          fileType: 1,
        })
        .then((resOne) => {
          if (
            resOne.data[res.data.workOrderId] &&
            resOne.data[res.data.workOrderId].length > 0
          ) {
            formData.data.fileListThree = resOne.data[res.data.workOrderId].map(
              (item) => {
                return {
                  raw: item,
                  name: item.fileName,
                  url: item.fileUrl,
                };
              }
            );
          }
        });
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
onMounted(() => {
  if (route.query.id) {
    formData.data = { ...route.query };
    getDetails();
    if (
      !formData.data.previousProcessesId ||
      formData.data.previousProcessesId == -1
    ) {
      formOption.otherBtn = false;
    }
  }
});

const onPreviewFile = (item) => {
  uni.postMessage({
    data: {
      type: "file",
      url: item.url,
      name: item.name,
    },
  });
};
</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>