byte-sailing-mobile/src/views/product-material/material-library/add copy.vue

<template>
  <div class="form">
    <van-nav-bar title="物料库" left-text="返回" left-arrow @click-left="onClickLeft"> </van-nav-bar>
    <van-form @submit="onSubmit" label-align="top" style="margin-top: 20px; overflow-y: auto">
      <van-cell-group inset>
        <van-field
          v-model="formData.productClassifyName"
          is-link
          readonly
          label="物料分类"
          placeholder="请选择物料分类"
          @click="show = true"
          :rules="[{ required: true, message: '物料分类不能为空' }]"
          required />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader
            title="请选择物料分类"
            :options="classification"
            :field-names="fieldNames"
            @close="show = false"
            @change="onChange"
            @finish="onFinish" />
        </van-popup>
        <van-field
          v-model="formData.typeName"
          is-link
          readonly
          label="物料类型"
          placeholder="选择物料类型"
          @click="typeModal = true"
          :rules="[{ required: true, message: '物料类型不能为空' }]"
          required />
        <van-popup v-model:show="typeModal" round position="bottom">
          <van-picker :columns="typeList" @cancel="typeModal = false" @confirm="onConfirmType" />
        </van-popup>
        <van-field
          v-model="formData.name"
          name="物料名称"
          label="物料名称"
          placeholder="请填写物料名称"
          :rules="[{ required: true, message: '物料名称不能为空' }]"
          required />
        <van-field
          v-model="formData.spec"
          name="规格型号"
          label="规格型号"
          placeholder="请填写规格型号"
          :rules="[{ required: true, message: '规格型号不能为空' }]"
          required />
        <van-field
          v-model="formData.unitName"
          is-link
          readonly
          label="单位"
          placeholder="选择单位"
          @click="unitModal = true"
          :rules="[{ required: true, message: '单位不能为空' }]"
          required />
        <van-popup v-model:show="unitModal" round position="bottom">
          <van-picker :columns="unitList" @cancel="unitModal = false" @confirm="onConfirmUnit" />
        </van-popup>
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="9" :max-size="5 * 1024 * 1024" @oversize="onOversize" />
          </template>
        </van-field>
        <van-field v-model="formData.remark" rows="3" type="textarea" name="备注" label="备注" placeholder="请填写备注" />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { showSuccessToast, showToast } from "vant";
import { useRoute } from "vue-router";
import { getUserInfo } from '@/utils/auth';
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const show = ref(false);
const typeModal = ref(false);
const unitModal = ref(false);
const classification = ref([]);
const fieldNames = {
  text: "label",
  value: "id",
};
const typeList = ref([
  {
    text: "原料",
    value: "1",
  },
  {
    text: "辅料",
    value: "2",
  },
  {
    text: "配件",
    value: "3",
  },
  {
    text: "包材",
    value: "4",
  },
  {
    text: "其他",
    value: "5",
  },
]);
const unitList = ref([]);

const getDict = () => {
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: getUserInfo().tenantId,
      dictCode: "unit",
    })
    .then((res) => {
      unitList.value = res.data.rows.map((item, index) => {
        return {
          text: item.dictValue,
          value: item.dictKey,
        }
      })
    })
}
getDict()
const formData = ref({
  id: null,
  definition: "2",
  productClassifyId: null,
  productClassifyName: null,
  code: null,
  customCode: null,
  type: null,
  typeName: null,
  name: null,
  spec: null,
  unit: null,
  remark: null,
  fileList: [],
});
const onConfirmType = ({ selectedOptions }) => {
  formData.value.type = selectedOptions[0].value;
  formData.value.typeName = selectedOptions[0].text;
  typeModal.value = false;
};
const onConfirmUnit = ({ selectedOptions }) => {
  formData.value.unit = selectedOptions[0].value;
  formData.value.unitName = selectedOptions[0].text;
  unitModal.value = false;
};
const onChange = ({ selectedOptions }) => {
  if (selectedOptions && selectedOptions.length > 0) {
    formData.value.productClassifyId = selectedOptions[selectedOptions.length - 1].id;
    formData.value.productClassifyName = selectedOptions[selectedOptions.length - 1].label;
  }
};
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  if (selectedOptions && selectedOptions.length > 0) {
    formData.value.productClassifyId = selectedOptions[selectedOptions.length - 1].id;
    formData.value.productClassifyName = selectedOptions[selectedOptions.length - 1].label;
  }
};
const fileList = ref([]);
const afterRead = (file) => {
  if (file && file.length > 0) {
    for (let i = 0; i < file.length; i++) {
      file[i].status = "uploading";
      file[i].message = "上传中...";
      proxy.post("/fileInfo/getSing", { fileName: file[i].file.name }).then(
        (res) => {
          let forms = new FormData();
          forms.append("file", file[i].file);
          proxy.post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", { ...res.data.uploadBody, file: forms.get("file") }).then(
            () => {
              file[i].id = res.data.id;
              file[i].url = res.data.fileUrl;
              file[i].fileName = res.data.fileName;
              delete file[i].status;
              delete file[i].message;
            },
            () => {
              file[i].status = "failed";
              file[i].message = "上传失败";
            }
          );
        },
        () => {
          file[i].status = "failed";
          file[i].message = "上传失败";
        }
      );
    }
  } else {
    file.status = "uploading";
    file.message = "上传中...";
    proxy.post("/fileInfo/getSing", { fileName: file.file.name }).then(
      (res) => {
        let forms = new FormData();
        forms.append("file", file.file);
        proxy.post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", { ...res.data.uploadBody, file: forms.get("file") }).then(
          () => {
            file.id = res.data.id;
            file.url = res.data.fileUrl;
            file.fileName = res.data.fileName;
            delete file.status;
            delete file.message;
          },
          () => {
            file.status = "failed";
            file.message = "上传失败";
          }
        );
      },
      () => {
        file.status = "failed";
        file.message = "上传失败";
      }
    );
  }
};
const onOversize = () => {
  showToast("文件大小不能超过 5MB");
};
const onClickLeft = () => history.back();
const onSubmit = () => {
  if (fileList.value && fileList.value.length > 0) {
    formData.value.fileList = fileList.value.map((item) => {
      return {
        id: item.id,
        fileName: item.fileName,
      };
    });
  } else {
    formData.value.fileList = [];
  }
  proxy.post("/productInfo/" + route.query.type, formData.value).then(() => {
    showSuccessToast("添加成功");
    setTimeout(() => {
      history.back();
    }, 500);
  });
};
const treeToList = (arr) => {
  let res = []; // 用于存储递归结果（扁平数据）
  // 递归函数
  let fn = (source) => {
    source.forEach((el) => {
      res.push(el);
      el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
    });
  };
  fn(arr);
  return res;
};
onMounted(() => {
  proxy.post("/productClassify/tree", { parentId: "", name: "", definition: "2" }).then((res) => {
    classification.value = res.data;
    let classList = treeToList(res.data);
    if (route.query.id) {
      proxy.post("/productInfo/detail", { id: route.query.id }).then((resDetail) => {
        formData.value.id = route.query.id;
        formData.value.productClassifyId = resDetail.data.productClassifyId;
        let data = classList.filter((item) => item.id === resDetail.data.productClassifyId);
        if (data && data.length > 0) {
          formData.value.productClassifyName = data[0].label;
        }
        formData.value.code = resDetail.data.code;
        formData.value.customCode = resDetail.data.customCode;
        formData.value.type = resDetail.data.type;
        let typeNameList = typeList.value.filter((item) => item.value == resDetail.data.type);
        if (typeNameList && typeNameList.length > 0) {
          formData.value.typeName = typeNameList[0].text;
        }
        formData.value.name = resDetail.data.name;
        formData.value.spec = resDetail.data.spec;
        formData.value.unitName = unitList.value.filter((item) => item.value == resDetail.data.unit)[0].text;
        formData.value.remark = resDetail.data.remark;
      });
      proxy.post("/fileInfo/getList", { businessIdList: [route.query.id] }).then((res) => {
        if (res.data[route.query.id] && res.data[route.query.id].length > 0) {
          formData.value.fileList = res.data[route.query.id];
          fileList.value = res.data[route.query.id].map((item) => {
            return {
              ...item,
              url: item.fileUrl,
            };
          });
        } else {
          formData.value.fileList = [];
          fileList.value = [];
        }
      });
    }
  });
});
</script>