yanfeng-bom-excel-mindmap/src/pages/excel/TableModal.vue

<template>
  <el-dialog title="推荐零件" width="800" v-model="open">
    <el-input
      class="mb-12px"
      v-model="part_name"
      placeholder="输入零件名模糊匹配"
    >
      <template #append>
        <el-button :icon="Search" @click="getData" />
      </template>
    </el-input>
    <el-table
      header-row-class-name="cus-table-header"
      :loading="loading"
      :data="dataSource"
      :max-height="400"
      @current-change="handleSelect"
      highlight-current-row
    >
      <el-table-column
        prop="part_type"
        label="自制/外购/支给（M/P/C）"
        width="200"
      />
      <el-table-column prop="part_attribute" label="零件属性" width="180" />
      <el-table-column prop="product_category" label="产品类别" width="180" />
      <el-table-column prop="manufacture_report" label="制造单元" width="180" />
      <el-table-column prop="manufacture_area" label="制造区域" width="180" />
      <el-table-column prop="erp_code" label="NK零件号" width="180" />
      <el-table-column prop="part_name" label="NK零件名称" width="180" />
      <el-table-column prop="process" label="制造工艺" width="180" />
      <el-table-column prop="material_grade" label="材料牌号" width="180" />
      <el-table-column prop="unit" label="计量单位" width="180" />
    </el-table>
    <template #footer>
      <div class="flex justify-between">
        <div>
          <span class="text-green text-12px"
            >当前选择(点击行选择)：{{ currentRow?.erp_code }}</span
          >
        </div>
        <div class="dialog-footer">
          <el-button @click="open = false">取消</el-button>
          <el-button type="primary" :disabled="!currentRow" @click="handleOk">
            确定
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref, defineExpose, defineEmits } from "vue";

export interface IRecomend {
  process: string;
  part_attribute: string;
  product_category: string;
  manufacture_report: number;
  manufacture_area: number;
  part_type: string;
  erp_code: string;
  part_name: string;
  material_grade: number;
  id: string;
  unit: string;
}

// const options = [
//   { label: "自制", value: "M" },
//   { label: "外购", value: "P" },
//   { label: "支给", value: "C" },
// ];

const emit = defineEmits(["ok"]);

const open = ref(false);
const part_name = ref("");
const part_type = ref("");
const dataSource = ref([]);
const loading = ref(false);
const currentRow = ref<IRecomend>();

const getData = () => {
  if (window.parent?.BpmTools?.program) {
    loading.value = true;
  }

  // 测试接口
  // fetch(`https://sl-yf-bommgr-admin-dev.shalu.com/api/module/Invoke`, {
  //   method: 'POST',
  //   headers: {
  //     Authorization: 'bpm_client_1425496253931720704',
  //     'content-type': 'application/json;charset=UTF-8',
  //   },
  //   body: JSON.stringify({
  //     interfaceCode: 'Common.getPartRecomendList',
  //     part_name: part_name.value,
  //   }),
  // })
  //   .then((res) => res.json())
  //   .then((res) => {
  //     console.log('res', res);
  //     dataSource.value = res?.result || [];
  //   });

  window.parent?.BpmTools?.program(
    {
      interfaceCode: "Common.getPartRecomendList",
      part_name: part_name.value,
      part_type: part_type.value,
    },
    (res: any) => {
      dataSource.value = res || [];
      loading.value = false;
    }
  );
};

const handleOk = () => {
  emit("ok", currentRow.value);
  open.value = false;
  currentRow.value = undefined;
};

const handleSelect = (val: IRecomend) => {
  currentRow.value = val;
};

defineExpose({
  open: (partName: string = "", partType = "") => {
    open.value = true;
    part_name.value = partName;
    part_type.value = partType;
    console.log('partName', partName, partType);
    getData();
  },
});
</script>

<style lang="less">
.cus-table-header {
  color: #666;
  .el-table__cell {
    background-color: #f5f5f5 !important;
  }
}
</style>