erp_fans/src/components/process/SF/PersonalInvoice.vue

<template>
  <div style="width: 100%; padding: 0px 15px">
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom">
    </byForm>
  </div>
</template>

<script setup>
import byForm from "@/components/byForm/index";
import { useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
// 接收父组件的传值
const props = defineProps({
  queryData: Object,
});
const selectData = ref([]);
const userList = ref([]);
const deptData = ref([]);

const formData = reactive({
  data: {
    fileList: [],
  },
});
const formDom = ref(null);
const judgeStatus = () => {
  if (route.query.processType == 20 || route.query.processType == 10) {
    return true;
  }
  if (props.queryData.recordList && props.queryData.recordList.length > 0) {
    let data = props.queryData.recordList.filter(
      (item) => item.status === 2 && item.nodeType !== 1
    );
    if (data && data.length > 0) {
      return true;
    }
  }
  return false;
};
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  disabled: false,
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "基本信息",
      haveLine: false,
    },
    {
      type: "input",
      prop: "code",
      label: "流水号",
      placeholder: " ",
      itemWidth: 50,
      disabled: true,
    },
    {
      type: "select",
      prop: "createUser",
      label: "提交人",
      required: true,
      filterable: true,
      data: userList.value,
      itemWidth: 50,
      disabled: true,
    },
    {
      type: "date",
      prop: "applyTime",
      itemType: "date",
      label: "提交日期",
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "number",
      prop: "amount",
      label: "发票金额",
      precision: 2,
      min: 0,
      controls: false,
      itemWidth: 50,
    },
    //  {
    //   type: "input",
    //   prop: "amount",
    //   itemType: "text",
    //   label: "发票金额",
    //   itemWidth: 50,
    //   disabled: false,
    // },
    // {
    //   type: "treeSelect",
    //   prop: "companyId",
    //   label: "所属公司",
    //   data: proxy.useUserStore().allDict["tree_all_company_data"],
    //   propsTreeLabel: "deptName",
    //   propsTreeValue: "deptId",
    //   itemWidth: 50,
    //   fn: (val) => {},
    //   disabled: true,
    // },
    // {
    //   type: "treeSelect",
    //   prop: "deptId",
    //   label: "所属部门",
    //   data: deptData.value,
    //   propsTreeLabel: "deptName",
    //   propsTreeValue: "deptId",
    //   itemWidth: 50,
    //   disabled: true,
    // },
    // {
    //   type: "select",
    //   prop: "educationId",
    //   label: "学历",
    //   filterable: true,
    //   multiple: false,
    //   data: selectData.value,
    //   itemWidth: 50,
    //   fn: (val) => {
    //     let current = selectData.value.find((x) => x.value == val);
    //     if (current) {
    //       formData.data.amount = current.amount;
    //     }
    //   },
    // },
    {
      type: "upload",
      listType: "text",
      accept: "",
      prop: "fileList",
      label: "发票附件",
    },
    {
      type: "input",
      prop: "remark",
      itemType: "textarea",
      label: "摘要",
      itemWidth: 100,
      disabled: false,
    },
  ];
});

const rules = ref({
  applyTime: [{ required: true, message: "请选择提交日期", trigger: "change" }],
  companyId: [{ required: true, message: "请选择所属公司", trigger: "change" }],
  deptId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
  createUser: [{ required: true, message: "请选择提交人", trigger: "change" }],
  amount: [{ required: true, message: "请输入发票金额", trigger: "blur" }],
  fileList: [{ required: true, message: "请上传发票附件", trigger: "change" }],
  // remark: [{ required: true, message: "请输入摘要", trigger: "blur" }],
});
const isFormDetail = ref(false);
if (route.query && route.query.processType && route.query.processType == 20) {
  isFormDetail.value = true;
}
const getDeptData = () => {
  proxy
    .get(isFormDetail.value ? "/tenantUser/listAll" : "/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: proxy.useUserStore().user.tenantId,
      // companyId: proxy.useUserStore().user.companyId,
    })
    .then((res) => {
      userList.value = res.rows.map((item) => {
        return {
          label: item.nickName,
          value: item.userId,
        };
      });
    });

  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 9999,
      keyword: "",
      // ancestors: proxy.useUserStore().user.companyId,
      tenantId: proxy.useUserStore().user.tenantId,
      // type: 2,
    })
    .then((res) => {
      deptData.value = proxy.handleTree(res.data, "deptId");
    });
};
getDeptData();

const getDict = () => {
  proxy
    .post("/educationConfig/page", {
      pageNum: 1,
      pageSize: 999,
    })
    .then((res) => {
      selectData.value = res.rows.map((x) => ({
        ...x,
        label: x.name,
        value: x.id,
      }));
    });
};
getDict();

const handleSubmit = async (isStag = false) => {
  if (isStag) {
    return true;
  }
  let flag = await formDom.value.handleSubmit(() => {});
  if (flag) {
    return true;
  } else {
    setTimeout(() => {
      const errorDiv = document.getElementsByClassName("is-error");
      errorDiv[0].scrollIntoView();
    }, 0);
  }
  return flag;
};

const getFormData = () => {
  return proxy.deepClone(formData.data);
};
// 向父组件暴露
defineExpose({
  getFormData,
  handleSubmit,
});

const getAllData = (businessId) => {
  if (businessId) {
    proxy.post("/personalInvoice/detail", { id: businessId }).then((res) => {
      formData.data = res;
      proxy
        .post("/fileInfo/getList", { businessIdList: [businessId] })
        .then((fileObj) => {
          if (fileObj[businessId] && fileObj[businessId].length > 0) {
            formData.data.fileList = fileObj[businessId]
              .filter((x) => x.businessType == "0")
              .map((item) => {
                return {
                  ...item,
                  name: item.fileName,
                  url: item.fileUrl,
                };
              });
          } else {
            formData.data.fileList = [];
          }
        });
    });
  }
};

onMounted(() => {
  formOption.disabled = judgeStatus();
  formData.data.applyTime = proxy.parseTime(new Date());
  formData.data.companyId = proxy.useUserStore().user.companyId;
  formData.data.deptId = proxy.useUserStore().user.dept.deptId;
  formData.data.createUser = proxy.useUserStore().user.userId;
  if (route.query.businessId) {
    getAllData(route.query.businessId);
  }
  // 删除莫名多出的一个textarea
  nextTick(() => {
    setTimeout(() => {
      let dom = document.getElementsByTagName("textarea");
      if (dom && dom.length > 0) {
        for (let i = 0; i < dom.length; i++) {
          if (!dom[i].className) {
            dom[i].style.display = "none";
          }
        }
      }
    }, 100);
  });
});
</script>

<style lang="scss" scoped>
</style>