标识

yyb

昨天 0f5c5f11d13711db618ae2947bf35ed2effba8a2

 src/views/productionManagement/productionProcess/New.vue

@@ -2,38 +2,127 @@
  <div>
    <el-dialog
        v-model="isShow"
        title="新增工序"
        width="400"
        title="新增部件"
        width="760"
        @close="closeModal"
    >
      <el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
        <el-form-item
            label="工序名称："
            prop="name"
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item
            label="产品名称："
            prop="productId"
            :rules="[
                {
                required: true,
                message: '请输入工序名称',
                message: '请选择产品名称',
              },
              {
                max: 100,
                message: '最多100个字符',
              }
            ]">
          <el-input v-model="formState.name" />
        </el-form-item>
        <el-form-item label="工序编号" prop="no">
          <el-input v-model="formState.no"  />
        </el-form-item>
        <el-form-item label="工资定额" prop="salaryQuota">
          <el-input v-model="formState.salaryQuota" type="number" :step="0.001" />
        </el-form-item>
        <el-form-item label="是否质检" prop="isQuality">
          <el-switch v-model="formState.isQuality" :active-value="true" inactive-value="false"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formState.remark" type="textarea" />
        </el-form-item>
              <el-tree-select
            v-model="formState.productId"
            placeholder="请选择产品名称"
            clearable
            filterable
            check-strictly
            :data="productCategoryOptions"
            :render-after-expand="false"
            style="width: 100%"
            @change="handleProductChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
            label="产品规格："
            prop="productModelId"
            :rules="[
                {
                required: true,
                message: '请选择产品规格',
              },
            ]">
              <el-select v-model="formState.productModelId"
                     placeholder="请选择产品规格"
                     clearable
                     filterable
                     :disabled="!formState.productId"
                     style="width: 100%">
                <el-option v-for="item in modelOptions"
                       :key="item.id"
                       :label="item.model"
                       :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部件编号" prop="no">
              <el-input v-model="formState.no"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
            label="部件类型"
            prop="type"
            :rules="[
                {
                required: true,
                message: '请选择部件类型',
              }
            ]"
            >
              <el-select v-model="formState.type" placeholder="请选择部件类型">
                <el-option label="加工" :value="1" />
                <el-option label="刮板冷芯制作" :value="2" />
                <el-option label="管路组对" :value="3" />
                <el-option label="罐体连接及调试" :value="4" />
                <el-option label="测试打压" :value="5" />
                <el-option label="其他" :value="6" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
            label="计划工时(小时)"
            prop="salaryQuota"
            :rules="[
              { validator: validateNonNegativeSalaryQuota, trigger: ['blur', 'change'] }
            ]"
            >
              <el-input v-model="formState.salaryQuota" type="number" :step="0.001" :min="0">
                <template #append>小时</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划人员" prop="plannerId">
              <el-select
            v-model="formState.plannerId"
            placeholder="请选择计划人员"
            clearable
            filterable
            style="width: 100%"
            @change="handlePlannerChange"
              >
                <el-option
              v-for="item in plannerOptions"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否质检" prop="isQuality">
              <el-switch v-model="formState.isQuality" :active-value="true" inactive-value="false"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formState.remark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@@ -46,8 +135,10 @@
</template>

<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import { ref, computed, getCurrentInstance, onMounted } from "vue";
import {add} from "@/api/productionManagement/productionProcess.js";
import { modelListPage, productTreeList } from "@/api/basicData/product";
import { userListNoPageByTenantId } from "@/api/system/user.js";

const props = defineProps({
  visible: {
@@ -61,10 +152,18 @@
// 响应式数据（替代选项式的 data）
const formState = ref({
  name: '',
  productId: undefined,
  productModelId: undefined,
  type: undefined,
  remark: '',
  salaryQuota:  '',
  plannerId: undefined,
  plannerName: '',
  isQuality: false,
});
const productCategoryOptions = ref([]);
const modelOptions = ref([]);
const plannerOptions = ref([]);

const isShow = computed({
  get() {
@@ -76,6 +175,94 @@
});

let { proxy } = getCurrentInstance()

const validateNonNegativeSalaryQuota = (rule, value, callback) => {
  if (value === '' || value === null || value === undefined) {
    callback(new Error('请输入计划工时'));
    return;
  }
  const num = Number(value);
  if (Number.isNaN(num) || num < 0) {
    callback(new Error('计划工时不能小于0'));
    return;
  }
  callback();
};

const convertProductTree = list => {
  return (list || []).map(item => {
    const children = convertProductTree(item.children || item.childList || []);
    return {
      ...item,
      value: item.id,
      label: item.name || item.label,
      children,
      disabled: children.length > 0,
    };
  });
};

const findNodeById = (nodes, targetId) => {
  for (const node of nodes || []) {
    if (String(node.value) === String(targetId)) {
      return node;
    }
    if (node.children && node.children.length > 0) {
      const found = findNodeById(node.children, targetId);
      if (found) return found;
    }
  }
  return null;
};

const getProductCategoryOptions = async () => {
  try {
    const res = await productTreeList();
    const list = Array.isArray(res) ? res : res?.data || [];
    productCategoryOptions.value = convertProductTree(list);
  } catch (e) {
    productCategoryOptions.value = [];
  }
};

const getModelOptions = async productId => {
  if (!productId) {
    modelOptions.value = [];
    return;
  }
  try {
    const res = await modelListPage({
      id: productId,
      current: 1,
      size: 999,
    });
    const records = res?.records || res?.data?.records || [];
    modelOptions.value = records;
  } catch (e) {
    modelOptions.value = [];
  }
};

const getPlannerOptions = async () => {
  try {
    const res = await userListNoPageByTenantId();
    plannerOptions.value = res?.data || [];
  } catch (e) {
    plannerOptions.value = [];
  }
};

const handlePlannerChange = value => {
  const selectedUser = plannerOptions.value.find(item => String(item.userId) === String(value));
  formState.value.plannerName = selectedUser?.nickName || '';
};

const handleProductChange = async value => {
  const selectedNode = findNodeById(productCategoryOptions.value, value);
  formState.value.name = selectedNode?.label || '';
  formState.value.productModelId = undefined;
  await getModelOptions(value);
};

const closeModal = () => {
  isShow.value = false;
@@ -95,6 +282,11 @@
  })
};

onMounted(() => {
  getProductCategoryOptions();
  getPlannerOptions();
});

defineExpose({
  closeModal,
  handleSubmit,