UA 产品BOM对比‘

he wei

2023-02-08 d662fa6f95e8eda21d3419d930630411d2534720

UA 产品BOM对比‘

 src/pages/resourceManage/product/details/details.vue

@@ -20,14 +20,14 @@
    <a-layout class="main-content">
      <a-layout-header>
        <a-card size="small">
          <a-descriptions :column="4" title="">
          <a-descriptions :column="7" title="">
            <a-descriptions-item label="产品编号">{{
              parentCode
            }}</a-descriptions-item>
            <a-descriptions-item label="产品型号">{{
            <a-descriptions-item label="产品型号" :span="2">{{
              parentModel
            }}</a-descriptions-item>
            <a-descriptions-item label="产品名称">{{
            <a-descriptions-item label="产品名称" :span="2">{{
              parentName
            }}</a-descriptions-item>
            <a-descriptions-item label="定制单号" :span="2">{{

 src/pages/resourceManage/product/list.vue

@@ -39,6 +39,9 @@
                <a-button v-if="canUploadBom" type="primary" @click="uploadBom"
                  >新增</a-button
                >
                <a-button type="primary" @click="prodDiff"
                  >产品比较</a-button
                >
              </a-space>
            </template>
            <template slot="isNormal" slot-scope="{ record }">
@@ -1112,6 +1115,9 @@
    logCancel() {
      this.logVisible = false;
    },
    prodDiff() {
      this.$router.push('/resource/product-diff');
    }
  },
  watch: {
    update(n) {

 src/pages/resourceManage/product/prodDiff.vue

New file
@@ -0,0 +1,125 @@
<template>
  <div class="main">
    <div class="contain">
      <!-- 产品1 -->
      <prod-item
        class="item"
        ref="item1"
        title="产品1"
        :disabled-list="disabledList1"
        @change="(data) => prodChange(1, data)"
      ></prod-item>
      <!-- 产品2 -->
      <prod-item
        class="item"
        ref="item2"
        title="产品2"
        :disabled-list="disabledList2"
        @change="(data) => prodChange(2, data)"
      ></prod-item>
    </div>
    <!-- 比较差异 -->
    <div class="footer">
      <a-button type="primary" @click="diff">比较差异</a-button>
    </div>
    <!-- 差异 -->
    <a-modal
      :visible="diffShow"
      :footer="null"
      :width="860"
      title="差异"
      :destroyOnClose="true"
      :maskClosable="false"
      @cancel="diffCancel"
    >
      <diff-list :list="diffData"></diff-list>
    </a-modal>
  </div>
</template>

<script>
import ProdItem from "./prodItem.vue";
import DiffList from "@/pages/components/diffList";
import { compare } from "./details/apis";
export default {
  name: "",

  data() {
    return {
      diffShow: false,
      diffData: [],
      disabledList1: [],
      disabledList2: [],
    };
  },
  components: { ProdItem, DiffList },
  methods: {
    prodChange(idx, data) {
      // console.log(idx, data);
      switch (idx) {
        case 1:
          this.disabledList2 = [data];
          break;
        case 2:
          this.disabledList1 = [data];
          break;
      }
    },
    diff() {
      let selectedKey1 = this.$refs.item1.selectedKey;
      let selectedKey2 = this.$refs.item2.selectedKey;
      if (!selectedKey1 || !selectedKey2) {
        this.$message.error("请选择要比较的产品和版本");
        return false;
      }
      compare(selectedKey1, selectedKey2).then((res) => {
        const { code, data, data2, data3 } = res.data;
        if (code) {
          this.diffData = {
            addList: data2.map((v) => v.materialObj),
            delList: data3.map((v) => v.materialObj),
            updateList: data,
          };

          this.diffShow = true;
        } else {
          this.$message.error("比较差异失败");
        }
      });
    },
    diffCancel() {
      this.diffShow = false;
    },
  },

  mounted() {},
};
</script>

<style scoped lang="less">
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .contain {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: #fff;
    margin-bottom: 20px;
    .item {
      width: 40%;
      max-width: 460px;
      & ~ .item {
        margin-left: 40px;
      }
    }
  }
  .footer {
    background: #fff;
    padding: 20px;
  }
}
</style>

 src/pages/resourceManage/product/prodItem.vue

New file
@@ -0,0 +1,204 @@
<template>
  <div class="main">
    <div class="title">{{ title }}</div>
    <!-- 产品列表 -->
    <a-select
      class="select"
      v-model="id"
      placeholder="请选择要比较的产品"
      show-search
      :filter-option="filterOption"
      @change="prodChange"
    >
      <a-select-option
        v-for="(prod, idx) in prodList"
        :key="'prod_' + idx"
        :value="prod.id"
        :disabled="prod.disabled"
        >{{ prod.label }}</a-select-option
      >
    </a-select>
    <!-- 版本列表 -->
    <div class="contain">
      <div class="inner">
        <div
          class="item"
          v-for="(item, idx) in versionList"
          :key="'item_' + idx"
        >
          <label class="label">
            <input
              type="radio"
              :checked="item.enabled"
              @change="(value) => checkChange(value, item)"
              :name="'item_' + _uid"
            />
            <span :class="['version', { actived: item.enabled }]">{{
              item.versionTime
            }}</span>
          </label>
          <!-- <a-checkbox
            @click.stop
            :checked="item.selected"
            @change="(value) => checkChange(value, item)"
          ></a-checkbox> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFkProduct } from "../product/apis";
import { getVersions } from "../product/details/apis";
export default {
  name: "",
  props: {
    // 禁用的产品列表
    disabledList: {
      type: Array,
      default() {
        return [];
      },
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      parentCode: "",
      customCode: "",
      id: undefined,
      selectedKey: "",
      prodList: [],
      versionList: [],
    };
  },
  watch: {
    disabledList(n) {
      this.prodList.forEach((v) => {
        v.disabled = this.disabledList.some((val) => val == v.id);
      });
    },
  },
  components: {},
  methods: {
    // 获取产品列表
    getProdList() {
      getFkProduct()
        .then((res) => {
          let { code, data, data2 } = res.data;
          let prodList = [];
          if (code && data) {
            prodList = data2.map((v) => {
              let label = v.customCode
                ? `${v.parentCode} ${v.parentName} (${v.customCode})`
                : `${v.parentCode} ${v.parentName}`;
              return {
                ...v,
                disabled: false,
                label,
              };
            });
          }
          this.prodList = prodList;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    prodChange(id) {
      // console.log(id);
      // 产品选中 发出事件 通知另一产品要禁用此产品
      this.$emit("change", id);
      // 产品选中 产品的版本选中状态要重置
      let prod = this.prodList.filter((v) => v.id == id)[0];
      this.parentCode = prod.parentCode;
      this.customCode = prod.customCode;
      this.getVersions();
    },
    checkChange(value, item) {
      const {
        target: { checked },
      } = value;
      // console.log(value, checked, item);
      if (checked) {
        this.selectedKey = item.id;
      }
      // this.versionList.forEach((v) => {
      //   v.selected = this.selectedKey == v.id;
      // });
    },
    getVersions() {
      const { parentCode, customCode } = this;
      getVersions(parentCode, customCode).then((res) => {
        const { code, data, data2 } = res.data;
        let list = [];
        this.selectedKey = "";
        if (code && data) {
          data2.forEach((v) => {
            if (v.enabled) {
              this.selectedKey = v.id;
            }
          });
          list = data2;
        }
        this.versionList = list;
      });
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) != -1;
    }
  },

  mounted() {
    this.getProdList();
  },
};
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  padding: 10px;
  background: #fafafa;
  display: flex;
  .title {
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
  }
}
.contain {
  margin-top: 10px;
  flex: 1;
  position: relative;
  .inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    .item {
      font-weight: 700;
      color: #666;
    }
  }
}
.label {
  display: flex;
  align-items: center;
  .version {
    margin-left: 10px;
    &.actived {
      color: #13c2c2;
    }
  }
}
.select {
  width: 100%;
}
</style>

 src/router/config.js

@@ -80,6 +80,15 @@
              component: () => import('@/pages/resourceManage/product/details'),
            },
            {
              path: 'product-diff',
              name: '产品差异',
              meta: {
                invisible: true,
                highlight: '/resource/product'
              },
              component: () => import('@/pages/resourceManage/product/prodDiff'),
            },
            {
              path: 'software',
              name: '软件中心',
              component: () => import('@/pages/resourceManage/software'),