erp_fans/src/components/process/SF/MedicalAndsocialSecurity.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: {
    applyItem: [],
    costBearing: "按照法定比例",
    deductionMethod: "从工资中扣除",
  },
});
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: "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: "applyItem",
      label: "申请项目",
      filterable: true,
      multiple: true,
      data: [
        {
          label: "医保",
          value: "医保",
        },
        {
          label: "社保",
          value: "社保",
        },
      ],
      itemWidth: 50,
      fn: (val) => {},
    },
    {
      type: "date",
      prop: "entryTime",
      itemType: "date",
      label: "入职日期",
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "date",
      prop: "regularTime",
      itemType: "date",
      label: "转正日期",
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "input",
      prop: "costBearing",
      itemType: "text",
      label: "费用承担",
      itemWidth: 50,
      disabled: true,
    },
    {
      type: "input",
      prop: "deductionMethod",
      itemType: "text",
      label: "抵扣方式",
      itemWidth: 50,
      disabled: true,
    },
    {
      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" }],
  applyItem: [{ required: true, message: "请选择申请项目", trigger: "change" }],
  entryTime: [{ required: true, message: "请选择入职日期", trigger: "change" }],
  regularTime: [
    { required: true, message: "请选择转正日期", trigger: "change" },
  ],
  fileList: [
    { required: true, message: "请上传学历证明附件", trigger: "change" },
  ],
});
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) {
    formData.data.applyItem = formData.data.applyItem.join(",");
    return true;
  }
  let flag = await formDom.value.handleSubmit(() => {});
  if (flag) {
    formData.data.applyItem = formData.data.applyItem.join(",");
    return true;
  } else {
    setTimeout(() => {
      const errorDiv = document.getElementsByClassName("is-error");
      errorDiv[0].scrollIntoView();
    }, 0);
  }
  return flag;
};

const dataRollback = () => {
  formData.data.applyItem = formData.data.applyItem.split(",");
};

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

const getAllData = (businessId) => {
  if (businessId) {
    proxy.post("/medicalInsurance/detail", { id: businessId }).then((res) => {
      if (res.applyItem) {
        res.applyItem = res.applyItem.split(",");
      } else {
        res.applyItem = [];
      }
      formData.data = res;
    });
  }
};

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>