产品选项

chenhj

13 小时以前 8a188440894cfd7d155084c453955c36be604c7a

产品选项

 src/api/basicData/product.js

@@ -56,3 +56,11 @@
        params: query
    })
}

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

 src/api/productionManagement/productStructure.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,18 @@
// äº§å“ç»“构页面接口
import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function queryList(id) {
  return request({
    url: "/productStructure/" + id,
    method: "get",
  });
}

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

 src/api/productionManagement/productionProcess.js

@@ -32,4 +32,12 @@
    method: 'put',
    data: data,
  })
}

// å·¥åºæŸ¥è¯¢
export function list() {
    return request({
        url: "/productProcess/list",
        method: "get",
    });
}

 src/views/productionManagement/productStructure/StructureEdit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,247 @@
<template>
  <el-dialog
      v-model="visible"
      title="Tips"
      width="500"
      :before-close="visible = false"
  >
    <el-form
        ref="form"
        :model="dataValue"
        label-width="80px"
    >
      <el-table :data="dataValue.dataList" style="width: 100%">
        <el-table-column prop="productName" label="产品" width="180" />
        <el-table-column prop="model" label="规格" width="180">
          <template #default="{ row, index }">
            <el-form-item
                :prop="`dataList.${index}.model`"
                :rules="[{ required: true, message: '请选择规格', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input
                  v-model="dataValue.dataList[index].model"
                  placeholder="请选择产品"
                  readonly
                  @focus="() => {
              dataValue.currentRowIndex = index
              showModel = true
            }"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="processName" label="消耗工序" width="180">
          <template #default="{ row, index }">
            <el-form-item
                :prop="`dataList.${index}.processId`"
                :rules="[{ required: true, message: '请选择消耗工序', trigger: 'change' }]"
                style="margin: 0"
            >
              <el-select
                  v-model="dataValue.dataList[index].processId"
                  placeholder="请选择"
                  filterable
                  clearable
                  style="width: 100%"
              >
                <el-option
                    v-for="item in dataValue.processOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="unitQuantity" label="单位产出所需数量">
          <template #default="{ row, index }">
            <el-form-item
                :prop="`dataList.${index}.unitQuantity`"
                :rules="[{ required: true, message: '请输入单位产出所需数量', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input-number
                  v-model="dataValue.dataList[index].unitQuantity"
                  :min="0"
                  :precision="2"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="demandedQuantity" label="需求总量">
          <template #default="{ row, index }">
            <el-form-item
                :prop="`dataList.${index}.demandedQuantity`"
                :rules="[{ required: true, message: '请输入需求总量', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input-number
                  v-model="dataValue.dataList[index].demandedQuantity"
                  :min="0"
                  :precision="2"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="unit" label="单位">
          <template #default="{ row, index }">
            <el-form-item
                :prop="`dataList.${index}.unit`"
                :rules="[{ required: true, message: '请输入单位', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input
                  v-model="dataValue.dataList[index].unit"
                  placeholder="请输入单位"
                  clearable
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="address" label="盘数（盘）">
          <template #default="{ row, index }">
            <el-form-item
                :prop="`dataList.${index}.address`"
                :rules="[{ required: true, message: '请输入盘数', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input-number
                  v-model="dataValue.dataList[index].address"
                  :min="0"
                  :precision="0"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="{ row, index }">
            <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="dataValue.dataList.splice(index, 1)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <product-select-dialog
        v-if="dataValue.showProductDialog"
        :model-value="dataValue.showProductDialog"
        @confirm="handleProduct"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" :loading="dataValue.loading" @click="submit">
          ç¡®è®¤
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {computed, defineComponent, onMounted, reactive, ref} from "vue";
import {queryList, add} from '@/api/productionManagement/productStructure.js'
import {list} from '@/api/productionManagement/productionProcess'
import {ElMessage} from "element-plus";


defineComponent({
  name: "StructureEdit",
})

const ProductSelectDialog = () => import('@/views/basicData/product/ProductSelectDialog.vue')
const from = ref()


const props = defineProps({
  showModel: {
    type: Boolean,
    default: false
  },
  productModelId: {
    type: Number,
    required: true
  }
})

const emits = defineEmits(['update:visible'])
const visible = computed({
  get() {
    return props.showModel
  },
  set(val) {
    emits('update:visible', val)
  }
})

const dataValue = reactive({
  dataList: [],
  productOptions: [],
  processOptions: [],
  showProductDialog: false,
  currentRowIndex: null,
  loading: false,
});

const fetchData = async () => {
  const {data} = await queryList(props.productModelId)
  dataValue.dataList = data
}

const fetchProcessOptions = async () => {
  const {data} = await list(props.productModelId)
  dataValue.processOptions = data
}

const handleProduct = (row) => {
  dataValue.showProductDialog = false
  dataValue.dataList[dataValue.currentRowIndex].speculativeTradingName = row.productName + '-' + row.model
  dataValue.dataList[dataValue.currentRowIndex].productModelId = row.id
}

const submit = () => {
  from.value.validate(valid => {
    dataValue.loading = true
    if (valid) {
      add({
        productModelId: props.productModelId,
        dataList: dataValue.dataList
      }).then(res => {
        ElMessage.success('保存成功')
        visible.value = false
        dataValue.loading = false
      })
    }
  }).finally(() => {
    dataValue.loading = false
  })
}

onMounted(() => {
  fetchData()
  fetchProcessOptions()
})


</script>

 src/views/productionManagement/productStructure/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,104 @@
<template>
  <div class="app-container">
    <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
    >
      <template #detail="{row}">
        <el-button
            type="primary"
            text
            @click="() =>{
              currentRowId = row.id;
              showEdit = true;
            }"
        >{{ row.productName }}
        </el-button>
      </template>
    </PIMTable>
    <StructureEdit v-if="showEdit" v-model:show-model="showEdit" :product-model-id="currentRowId"/>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {
  modelPage,
} from "@/api/basicData/product.js";

const StructureEdit = () => import('@/views/productionManagement/productStructure/StructureEdit.vue')

const tableColumn = ref([
  {
    label: "产品名称",
    prop: "productName",
    dataType: 'slot',
    slot: "detail"
  },
  {
    label: "规格型号",
    prop: "model",
  },
  {
    label: "单位",
    prop: "unit",
  }
]);
const tableData = ref([]);
const tableLoading = ref(false);
const showEdit = ref(false);
const selectedRows = ref([]);
const currentRowId = ref(0);
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});
const data = reactive({
  form: {
    productName: "",
  },
  rules: {
    productName: [{required: true, message: "请输入", trigger: "blur"}],
  },
  modelForm: {
    otherModel: '',
    model: "",
    unit: "",
    speculativeTradingName: [],
  },
});
const {form, rules} = toRefs(data);
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// æŸ¥è¯¢è§„格型号
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getModelList();
};
const getModelList = () => {
  tableLoading.value = true;
  modelPage({
    current: page.current,
    size: page.size,
  }).then((res) => {
    console.log("res", res);
    tableData.value = res.records;
    page.total = res.total;
    tableLoading.value = false;
  });
};
onMounted(() => {
  getModelList();
})
</script>