工艺路线页面

huminmin

11 小时以前 35a28e272e903359a326f629db7a69bf49eaf2bb

工艺路线页面

 src/api/basicData/productModel.js

ÎļþÒÑɾ³ý

 src/views/productionManagement/processRoute/Edit.vue

@@ -7,23 +7,36 @@
        @close="closeModal"
    >
      <el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
        <el-form-item
            label="工序名称："
            prop="name"
            :rules="[
                {
                required: true,
                message: '请输入工序名称',
              },
              {
                max: 100,
                message: '最多100个字符',
              }
            ]">
          <el-input v-model="formState.name" />
        <el-form-item label="产品大类：" prop="productId">
          <el-tree-select
              v-model="formState.productId"
              placeholder="请选择"
              clearable
              check-strictly
              @change="getModels"
              :data="productOptions"
              :render-after-expand="false"
              style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formState.remark" type="textarea" />

        <el-form-item label="规格型号：" prop="productModelId">
          <el-select
              v-model="formState.productModelId"
              placeholder="请选择"
              clearable
          >
            <el-option
                v-for="item in productModelsOptions"
                :key="item.id"
                :label="item.model"
                :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="description">
          <el-input v-model="formState.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
@@ -37,8 +50,9 @@
</template>

<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import {update} from "@/api/productionManagement/productionProcess.js";
import {ref, computed, getCurrentInstance, onMounted} from "vue";
import {update} from "@/api/productionManagement/processRoute.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";

const props = defineProps({
  visible: {
@@ -55,11 +69,7 @@
const emit = defineEmits(['update:visible', 'completed']);

// å“åº”式数据（替代选项式的 data）
const formState = ref({
  id: props.record.id,
  name: props.record.name,
  remark: props.record.remark,
});
const formState = ref({});

const isShow = computed({
  get() {
@@ -71,10 +81,61 @@
});

let { proxy } = getCurrentInstance()
const productModelsOptions = ref([])
const productOptions = ref([])

const closeModal = () => {
  isShow.value = false;
};

const setFormData = () => {
  formState.value = props.record
}

const getProductOptions = () => {
  productTreeList().then((res) => {
    productOptions.value = convertIdToValue(res);
  });
};
const getModels = (value) => {
  formState.value.productModelId = undefined;
  productModelsOptions.value = [];
  if (value) {
    modelList({ id: value }).then((res) => {
      productModelsOptions.value = res;
    });
  }
};

const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].value === productId) {
      return nodes[i].label; // æ‰¾åˆ°èŠ‚点，返回该节点的label
    }
    if (nodes[i].children && nodes[i].children.length > 0) {
      const foundNode = findNodeById(nodes[i].children, productId);
      if (foundNode) {
        return foundNode; // åœ¨å­èŠ‚点中找到，直接返回（已经是label字符串）
      }
    }
  }
  return null; // æ²¡æœ‰æ‰¾åˆ°èŠ‚点，返回null
};

function convertIdToValue(data) {
  return data.map((item) => {
    const { id, children, ...rest } = item;
    const newItem = {
      ...rest,
      value: id, // å°† id æ”¹ä¸º value
    };
    if (children && children.length > 0) {
      newItem.children = convertIdToValue(children);
    }

    return newItem;
  });
}

const handleSubmit = () => {
  proxy.$refs["formRef"].validate(valid => {
@@ -95,4 +156,13 @@
  handleSubmit,
  isShow,
});


onMounted(() => {
  getProductOptions()
  getModels(props.record.productId)
  nextTick(() => {
    setFormData()
  });
})
</script>

 src/views/productionManagement/processRoute/New.vue

@@ -7,24 +7,34 @@
        @close="closeModal"
    >
      <el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
        <el-form-item
            label="工序名称："
            prop="name"
            :rules="[
              {
                required: true,
                message: '请输入工序名称',
              },
              {
                max: 100,
                message: '最多100个字符',
              }
            ]">
          <el-select v-model="formState.productModelId" placeholder="选择零件" size="small">
            <el-option v-for="item in warehouse" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
        <el-form-item label="产品大类：" prop="productId">
          <el-tree-select
              v-model="formState.productId"
              placeholder="请选择"
              clearable
              check-strictly
              @change="getModels"
              :data="productOptions"
              :render-after-expand="false"
              style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="规格型号：" prop="productModelId">
          <el-select
              v-model="formState.productModelId"
              placeholder="请选择"
              clearable
          >
            <el-option
                v-for="item in productModelsOptions"
                :key="item.id"
                :label="item.model"
                :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="description">
          <el-input v-model="formState.description" type="textarea" />
        </el-form-item>
@@ -41,7 +51,8 @@

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

const props = defineProps({
  visible: {
@@ -54,8 +65,9 @@

// å“åº”式数据（替代选项式的 data）
const formState = ref({
  name: '',
  remark: '',
  productId: undefined,
  productModelId: undefined,
  description: '',
});

const isShow = computed({
@@ -67,13 +79,62 @@
  },
});

const productModels = ref([])
const productModelsOptions = ref([])
const productOptions = ref([])

let { proxy } = getCurrentInstance()

const closeModal = () => {
  isShow.value = false;
};

const getProductOptions = () => {
  productTreeList().then((res) => {
    productOptions.value = convertIdToValue(res);
  });
};
const getModels = (value) => {
  formState.value.productId = undefined;
  formState.value.productModelId = undefined;
  productModelsOptions.value = [];

  if (value) {
    formState.value.productId = findNodeById(productOptions.value, value) || undefined;
    modelList({ id: value }).then((res) => {
      productModelsOptions.value = res;
    });
  }
};

const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].value === productId) {
      return nodes[i].label; // æ‰¾åˆ°èŠ‚点，返回该节点的label
    }
    if (nodes[i].children && nodes[i].children.length > 0) {
      const foundNode = findNodeById(nodes[i].children, productId);
      if (foundNode) {
        return foundNode; // åœ¨å­èŠ‚点中找到，直接返回（已经是label字符串）
      }
    }
  }
  return null; // æ²¡æœ‰æ‰¾åˆ°èŠ‚点，返回null
};

function convertIdToValue(data) {
  return data.map((item) => {
    const { id, children, ...rest } = item;
    const newItem = {
      ...rest,
      value: id, // å°† id æ”¹ä¸º value
    };
    if (children && children.length > 0) {
      newItem.children = convertIdToValue(children);
    }

    return newItem;
  });
}

const handleSubmit = () => {
  proxy.$refs["formRef"].validate(valid => {
@@ -89,9 +150,6 @@
  })
};

const findProductModelOptions = () => {

}

defineExpose({
  closeModal,
@@ -100,6 +158,6 @@
});

onMounted(() => {
  findProductModelOptions()
  getProductOptions()
})
</script>

 src/views/productionManagement/processRoute/index.vue

@@ -52,15 +52,14 @@

const data = reactive({
    searchForm: {
        name: "",
        no: "",
    model: "",
    },
});
const { searchForm } = toRefs(data);
const tableColumn = ref([
    {
        label: "零件名称",
        prop: "speculativeTradingName",
        label: "规格名称",
        prop: "model",
    },
    {
        label: "描述",
@@ -73,6 +72,13 @@
    fixed: "right",
    width: 280,
    operation: [
      {
        name: "详情",
        type: "text",
        clickFun: (row) => {
          showEditModal(row);
        }
      },
      {
        name: "编辑",
        type: "text",
@@ -139,18 +145,17 @@

// åˆ é™¤
function handleDelete() {
  // const no = selectedRows.value.map((item) => item.no);
  // const ids = selectedRows.value.map((item) => item.id);
  // proxy.$modal
  //     .confirm('是否确认删除工序编号为"' + no + '"的数据项？')
  //     .then(function () {
  //       return del(ids);
  //     })
  //     .then(() => {
  //       getList();
  //       proxy.$modal.msgSuccess("删除成功");
  //     })
  //     .catch(() => {});
  const ids = selectedRows.value.map((item) => item.id);
  proxy.$modal
      .confirm('是否确认删除已勾选的数据项？')
      .then(function () {
        return del(ids);
      })
      .then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
}

onMounted(() => {