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

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

      <template #commodity>
        <div style="width: 100%">
          <el-button type="primary" plain @click="openProduct = true" style="margin-bottom: 16px" v-if="!judgeStatus()">
            选择物料
          </el-button>
          <el-table :data="formData.data.subscribeDetailList" style="width: 100%; ">
            <el-table-column prop="productCode" label="物料编码" width="130" />
            <el-table-column prop="productName" label="物料名称" min-width="130" />
            <el-table-column label="尺寸 cm*cm*cm" width="180">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productUnit" label="单位" width="100" :formatter="(row) => dictKeyValue(row.productUnit, materialUnit)" />
            <el-table-column label="申购数量" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'subscribeDetailList.' + $index + '.count'" :rules="rules.count" :inline-message="true"
                                class="margin-b-0 wid100">
                    <el-input-number onmousewheel="return false;" v-model="row.count" placeholder="请输入" style="width: 100%" :precision="0"
                                     :controls="false" :min="0" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'subscribeDetailList.' + $index + '.remark'" :rules="rules.remark" :inline-message="true"
                                class="margin-b-0 wid100">
                    <el-input onmousewheel="return false;" v-model="row.remark" placeholder="请输入" style="width: 100%" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center" fixed="right" v-if="!judgeStatus()">
              <template #default="{ $index }">
                <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </byForm>
    <el-dialog v-if="openProduct" v-model="openProduct" title="选择物料" width="90%" append-to-body>
      <SelectMaterial @selectMaterial="selectMaterial"></SelectMaterial>
    </el-dialog>
  </div>
</template>

<script setup>
import byForm from "@/components/byForm/index";
import SelectMaterial from "@/components/product/SelectMaterial.vue";
import { useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
// 接收父组件的传值
const props = defineProps({
  queryData: Object,
});
const openProduct = ref(false);
const materialUnit = computed(
  () => proxy.useUserStore().allDict["material_unit"]
);
const formData = reactive({
  data: {
    subscribeDetailList: [],
  },
});
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: "deptName",
    //   label: "申购部门",
    //   itemWidth: 25,
    //   disabled: true,
    // },
    {
      type: "input",
      prop: "subcribeName",
      label: "申购人",
      itemWidth: 33.33,
      disabled: true,
    },
    {
      type: "treeSelect",
      prop: "companyId",
      label: "业务公司",
      data: proxy.useUserStore().allDict["tree_company_data"],
      propsTreeLabel: "deptName",
      propsTreeValue: "deptId",
      itemWidth: 33.33,
    },
    {
      type: "date",
      prop: "subcribeTime",
      itemType: "date",
      label: "申时间",
      itemWidth: 33.33,
      disabled: false,
    },
    {
      type: "input",
      prop: "subcribeContent",
      itemType: "textarea",
      label: "申购说明",
      itemWidth: 100,
      disabled: false,
    },
    {
      type: "title",
      title: "申购明细",
      haveLine: true,
    },
    {
      type: "slot",
      slotName: "commodity",
      label: "",
    },
  ];
});

const rules = ref({
  deptName: [{ required: true, message: "请输入申购部门", trigger: "blur" }],
  subcribeName: [
    { required: true, message: "请输入申购人名称", trigger: "blur" },
  ],
  subcribeTime: [
    { required: true, message: "请选择申购时间", trigger: "change" },
  ],
  count: [{ required: true, message: "请输入申购数量", trigger: "blur" }],
  companyId: [{ required: true, message: "请选择业务公司", trigger: "change" }],
});

const selectMaterial = (row) => {
  let flag = formData.data.subscribeDetailList.some(
    (x) => x.productId == row.id
  );
  if (!flag) {
    formData.data.subscribeDetailList.push({
      productId: row.id,
      productCode: row.customCode,
      productName: row.name,
      productUnit: row.unit,
      productLength: row["length"],
      productWidth: row.width,
      productHeight: row.height,
      count: null,
      remark: "",
    });
    proxy.msgTip("选择成功");
  } else {
    proxy.msgTip("该物料已选择", 2);
  }
};

const handleRemove = (index) => {
  formData.data.subscribeDetailList.splice(index, 1);
};

const handleSubmit = async () => {
  let flag = await formDom.value.handleSubmit(() => {});
  if (flag) {
    if (
      formData.data.subscribeDetailList &&
      formData.data.subscribeDetailList.length > 0
    ) {
      return true;
    } else {
      proxy.msgTip("请添加申购明细", 2);
      return false;
    }
  } 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("/subscribe/detail", { id: businessId }).then((res) => {
      formData.data = res;
    });
  }
};
onMounted(() => {
  formOption.disabled = judgeStatus();
  formData.data.subcribeTime = proxy.parseTime(new Date());
  formData.data.deptName = proxy.useUserStore().user.dept.deptName;
  formData.data.deptId = proxy.useUserStore().user.dept.deptId;
  formData.data.subcribeName = proxy.useUserStore().user.nickName;
  if (route.query.businessId && route.query.processType) {
    getAllData(route.query.businessId);
  }
});
</script>

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