工艺路线项目页面

huminmin

昨天 303e0cb5fa6816dc10b77a284195d36b9e3787db

工艺路线项目页面

 src/api/basicData/productModel.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
import request from "@/utils/request.js";

export function productModelList(query) {
    return request({
        url: '/basic/product/pageModel',
        method: 'get',
        params: query
    })
}

 src/api/productionManagement/processRoute.js

@@ -1,4 +1,4 @@
// å·¥åºé¡µé¢æŽ¥å£
// å·¥è‰ºè·¯çº¿é¡µé¢æŽ¥å£
import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢

 src/api/productionManagement/processRouteItem.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
// å·¥è‰ºè·¯çº¿é¡¹ç›®é¡µé¢æŽ¥å£
import request from "@/utils/request";

// åˆ—表查询
export function findProcessRouteItemList(query) {
    return request({
        url: "/processRouteItem/list",
        method: "get",
        params: query,
    });
}

export function addOrUpdateProcessRouteItem(data) {
    return request({
        url: "/processRouteItem",
        method: "post",
        data: data,
    });
}

 src/api/productionManagement/productionProcess.js

@@ -10,6 +10,14 @@
  });
}

export function processList(query) {
  return request({
    url: "/productProcess/list",
    method: "get",
    params: query,
  });
}

export function add(data) {
  return request({
    url: "/productProcess",

 src/views/basicData/product/ProductSelectDialog.vue

@@ -37,8 +37,10 @@
        :data="tableData"
        height="420"
        highlight-current-row
        @current-change="onCurrentChange"
        row-key="id"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="#" width="60"/>
      <el-table-column prop="productName" label="产品大类" min-width="160"/>
      <el-table-column prop="model" label="型号名称" min-width="200"/>
@@ -60,7 +62,7 @@

    <template #footer>
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :disabled="!selectedRow" @click="onConfirm">
      <el-button type="primary" :disabled="multipleSelection.length === 0" @click="onConfirm">
        ç¡®å®š
      </el-button>
    </template>
@@ -70,7 +72,7 @@
<script setup lang="ts">
import {computed, onMounted, reactive, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import {list} from '@/api/basicData/productModel'
import {productModelList} from '@/api/basicData/productModel'

export type ProductRow = {
  id: number;
@@ -83,10 +85,7 @@
  modelValue: boolean;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
  (e: "confirm", row: ProductRow): void; // æŠŠæ•´è¡Œæ•°æ®è¿”给父组件
}>();
const emit = defineEmits(['update:modelValue', 'confirm']);

const visible = computed({
  get: () => props.modelValue,
@@ -106,14 +105,14 @@
const loading = ref(false);
const tableData = ref<ProductRow[]>([]);
const total = ref(0);
const selectedRow = ref<ProductRow | null>(null);
const multipleSelection = ref<ProductRow[]>([])

function close() {
  visible.value = false;
}

function onCurrentChange(row: ProductRow | null) {
  selectedRow.value = row;
const handleSelectionChange = (val: ProductRow[]) => {
  multipleSelection.value = val
}

function onSearch() {
@@ -133,25 +132,25 @@
}

function onConfirm() {
  if (!selectedRow.value) {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请选择一条产品");
    return;
  }
  emit("confirm", selectedRow.value);
  emit("confirm", multipleSelection.value);
  close();
}

async function loadData() {
  loading.value = true;
  try {
    selectedRow.value = null; // ç¿»é¡µ/搜索后清空选择更符合预期
    const res = await list({
    multipleSelection.value = []; // ç¿»é¡µ/搜索后清空选择更符合预期
    const res = await productModelList({
      productName: query.productName.trim(),
      model: query.model.trim(),
      pageNum: page.pageNum,
      pageSize: page.pageSize,
    });
    tableData.value = res.list;
    tableData.value = res.records;
    total.value = res.total;
  } finally {
    loading.value = false;

 src/views/productionManagement/processRoute/ItemsForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,209 @@
<template>
  <div>
    <el-dialog
        v-model="isShow"
        title="工艺路线项目"
        width="800"
        @close="closeModal"
    >
      <el-button type="primary" @click="isShowProductSelectDialog = true" class="mb5">选择产品</el-button>
      <el-table
          ref="multipleTable"
          v-loading="tableLoading"
          border
          :data="routeItems"
          :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
          row-key="id"
          tooltip-effect="dark"
          class="lims-table"
      >
        <el-table-column align="center" label="序号" type="index" width="60" />

        <el-table-column v-for="(item, index) in tableColumn" :key="index" :label="item.label" :width="item.width" show-overflow-tooltip>
          <template #default="scope" v-if="item.dataType === 'action'">
            <el-button
                v-for="(op, opIndex) in item.operation"
                :key="opIndex"
                :type="op.type"
                :link="op.link"
                size="small"
                @click="op.clickFun(scope.row)"
            >
              {{ op.name }}
            </el-button>
          </template>

          <template #default="scope" v-else>
            <template v-if="item.prop === 'processId'">
              <el-select v-model="scope.row[item.prop]" style="width: 100%">
                <el-option
                    v-for="process in processOptions"
                    :key="process.id"
                    :label="process.name"
                    :value="process.id"
                />
              </el-select>
            </template>
            <template v-else>
              {{ scope.row[item.prop] }}
            </template>
          </template>

        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="closeModal">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <ProductSelectDialog v-if="isShowProductSelectDialog" v-model:model-value="isShowProductSelectDialog" @confirm="handelSelectProducts" />
</template>

<script setup>
import {ref, computed, getCurrentInstance, onMounted} from "vue";
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
import {findProcessRouteItemList, addOrUpdateProcessRouteItem} from "@/api/productionManagement/processRouteItem.js";
import { processList } from "@/api/productionManagement/productionProcess.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  record: {
    type: Object,
    required: true,
  }
});

const emit = defineEmits(['update:visible', 'completed']);

const processOptions = ref([]);

const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});

const tableColumn = ref([
  {
    label: "产品名称",
    prop: "productName",
  },
  {
    label: "规格名称",
    prop: "model",
  },
  {
    label: "单位",
    prop: "unit",
  },
  {
    label: "工序名称",
    prop: "processId",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    operation: [
      {
        name: "删除",
        type: "danger",
        link: true,
        clickFun: (row) => {
          const index = routeItems.value.indexOf(row);
          if (index !== -1) {
            routeItems.value.splice(index, 1);
          }
        }
      },
    ]
  }
])

const tableLoading = ref(false);

const isShowProductSelectDialog = ref(false)
const routeItems = ref([])

let { proxy } = getCurrentInstance()

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

const handelSelectProducts = (products) => {
  const data = products.map(({ id, ...product }) => ({
    ...product,
    productModelId: id,
    routeId: props.record.id
  }));

  routeItems.value.push(...data);
}

const findProcessRouteItems = () => {
  tableLoading.value = true;

  findProcessRouteItemList({routeId: props.record.id}).then(res => {
    tableLoading.value = false;
    routeItems.value = res.data.map(item => ({
      ...item,
      processId: item.processId === 0 ? undefined : item.processId
    }))
  }).catch(err => {
    tableLoading.value = false;
  })
};

const findProcessList = () => {
  processList({}).then(res => {
    processOptions.value = res.data
  })
}

const handleSubmit = () => {
  if (routeItems.value.length === 0) {
    proxy.$modal.msgError("请添加路线项目");
    return;
  }

  // æ˜¯å¦æœ‰æœªé€‰æ‹©çš„工序
  const hasUnselectedProcess = routeItems.value.some(item => !item.processId);
  if (hasUnselectedProcess) {
    proxy.$modal.msgError("请选择工序");
    return;
  }

  addOrUpdateProcessRouteItem({routeId: props.record.id, processRouteItem: routeItems.value}).then(res => {
    // å…³é—­æ¨¡æ€æ¡†
    isShow.value = false;
    // å‘ŠçŸ¥çˆ¶ç»„件已完成
    emit('completed');
    proxy.$modal.msgSuccess("提交成功");
  })
};


defineExpose({
  closeModal,
  handleSubmit,
  isShow,
});

onMounted(() => {
  findProcessRouteItems()
  findProcessList()
})
</script>

 src/views/productionManagement/processRoute/index.vue

@@ -2,8 +2,8 @@
    <div class="app-container">
        <div class="search_form">
            <el-form :model="searchForm" :inline="true">
                <el-form-item label="零件名称:">
                    <el-input v-model="searchForm.speculativeTradingName" placeholder="请输入" clearable prefix-icon="Search"
                <el-form-item label="规格名称:">
                    <el-input v-model="searchForm.model" placeholder="请输入" clearable prefix-icon="Search"
                                        style="width: 200px;"
                                        @change="handleQuery" />
                </el-form-item>
@@ -27,7 +27,7 @@
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total"
            ></PIMTable>
            />
        </div>
        <new-process
      v-if="isShowNewModal"
@@ -41,6 +41,14 @@
      :record="record"
      @completed="getList"
    />

    <route-item-form
        v-if="isShowItemModal"
        v-model:visible="isShowItemModal"
        :record="record"
        @completed="getList"
    />
    RouteItemForm
    </div>
</template>

@@ -48,6 +56,7 @@
import {onMounted, ref} from "vue";
import NewProcess from "@/views/productionManagement/processRoute/New.vue";
import EditProcess from "@/views/productionManagement/processRoute/Edit.vue";
import RouteItemForm from "@/views/productionManagement/processRoute/ItemsForm.vue";
import {listPage, del} from "@/api/productionManagement/processRoute.js";

const data = reactive({
@@ -73,17 +82,17 @@
    width: 280,
    operation: [
      {
        name: "详情",
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          showEditModal(row);
        }
      },
      {
        name: "编辑",
        name: "路线项目",
        type: "text",
        clickFun: (row) => {
          showEditModal(row);
          showItemModal(row);
        }
      }
    ]
@@ -94,6 +103,7 @@
const tableLoading = ref(false);
const isShowNewModal = ref(false);
const isShowEditModal = ref(false);
const isShowItemModal = ref(false);
const record = ref({});
const page = reactive({
    current: 1,
@@ -143,6 +153,11 @@
  record.value = row
};

const showItemModal = (row) => {
  isShowItemModal.value = true
  record.value = row
};

// åˆ é™¤
function handleDelete() {
  const ids = selectedRows.value.map((item) => item.id);