UA 产品详情修改 添加其他附件预览 软件下载等

he wei

2022-08-31 035490b94bebf03b285ebc62ecb1991ad9acceec

UA 产品详情修改 添加其他附件预览 软件下载等

 src/pages/components/filesTable.vue

New file
@@ -0,0 +1,148 @@
<template>
  <div class="" :style="{width: width + 'px'}">
    <a-table
      ref="aTable"
      size="small"
      :scroll="{ y }"
      bordered
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      rowKey="subCode"
    >
      <template slot="action" slot-scope="text, record">
        <div v-if="record.url">
          <a @click="view(record)">预览</a>
          <a-divider type="vertical"></a-divider>
          <a @click="downloadLog(record)">下载</a>
        </div>
      </template>
    </a-table>
    <a-modal :width="600" :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="imgUrl" />
    </a-modal>
  </div>
</template>

<script>
import getWebUrl from "@/assets/js/tools/getWebUrl";
import { dwgReview } from "@/pages/workplace/apis";
import { downloadLog } from "@/pages/system/logs/apis";
export default {
  name: "",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    width: {
      type: Number,
      default: 600
    }
  },
  data() {
    const columns = [
      {
        title: "文件名称",
        dataIndex: "fileName",
        align: "center",
        width: 200,
      },
      {
        title: "文件类型",
        dataIndex: "fileType",
        align: "center",
        width: 100,
      },
      {
        title: "操作",
        dataIndex: "operation",
        key: "operation",
        align: "center",
        width: 100,
        scopedSlots: { customRender: "action" },
      },
    ];
    return {
      columns,
      y: 500,
      imgUrl: '',
      previewVisible: false,
      webUrl: getWebUrl(),
    };
  },
  methods: {
    handleClick() {
      this.$emit("success", this.list);
    },
    view(obj) {
      switch(obj.fileType) {
        // 图片
        case 'bmp':
        case 'jpg':
        case 'jpeg':
        case 'png':
          this.imgUrl = this.webUrl + obj.url;
          this.previewVisible = true;
          break;
        case 'pdf':
          window.open(this.webUrl + obj.url);
          break;
        case 'dwg':
          this.dwgReview(obj.url);
          break;
      }
    },
    handleCancel() {
      this.previewVisible = false;
    },
    dwgReview(url) {
      dwgReview(url)
        .then((res) => {
          let { code, data, msg }= res.data;
          if (code && data) {
            window.open(this.webUrl + data);
          } else {
            this.$message.error(msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    downloadLog(record) {
      const { parentModel, subModel, url } = record;
      const url1 = this.webUrl + url;
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url1;
      // link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      downloadLog(parentModel, subModel);
    },
  },
  computed: {
    dataSource() {
      let reg = /(.*\\+)*(.*)$/;
      return this.list.map((item) => {
        let fileName = item.match(reg)[2];
        let arr = fileName.split('.');
        let fileType = arr.length ? arr[arr.length - 1].toLowerCase() : '';
        return {
          fileName,
          fileType,
          url: item
        };
      });
    },
  },
  mounted() {},
};
</script>

<style scoped>
</style>

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

@@ -1,7 +1,12 @@
<template>
  <a-layout class="main">
    <a-layout-sider width="260">
      <list class="list" :list="versionList" @select="selectChanged"></list>
      <list
        class="list"
        :list="versionList"
        @select="selectChanged"
        @diff="diff"
      ></list>
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
@@ -38,7 +43,10 @@
                  :expandRowByClick="true"
                  :row-key="(record, index) => record.subCode + '_' + index"
                  :rowClassName="
                    (record) => (record.children && record.children.length ? 'is-replace' : '')
                    (record) =>
                      record.children && record.children.length
                        ? 'is-replace'
                        : ''
                  "
                >
                  <template slot="pictureUrl" slot-scope="text">
@@ -65,12 +73,31 @@
      <a-layout-footer>
        <a-card>
          <template v-if="dataSource.length">
            <a-popover title="" v-if="otherDoc.length">
              <files-table slot="content" :list="otherDoc"></files-table>
              <a-button type="primary">其他附件</a-button>
            </a-popover>
            <a-button type="primary" v-if="downloadFlag" @click="zipDownload"
              >bom下载</a-button
            >
            <!-- <a-button type="primary" v-if="downloadFlag" @click="showSoftwareDownload"
            <a-button
              type="primary"
              v-if="downloadFlag && softwareList.length"
              @click="showSoftwareDownload"
              >软件下载</a-button
            > -->
            >
            <a-button
              type="primary"
              v-if="!currentVersion.enabled"
              @click="showSoftwareDownload"
              >激活版本</a-button
            >
            <a-button
              type="primary"
              v-if="currentVersion.enabled"
              @click="showSoftwareDownload"
              >锁定版本</a-button
            >
          </template>
        </a-card>
      </a-layout-footer>
@@ -79,21 +106,34 @@
    <a-modal
      :visible="softwareDownloadShow"
      :footer="null"
      :width="500"
      :width="600"
      title="软件下载"
      :destroyOnClose="true"
      :maskClosable="false"
      @cancel="softwareDownloadCancel"
    >
      <div>
TODO
      </div>
      <a-table
        ref="aTable"
        size="small"
        :scroll="{ y: 300 }"
        bordered
        :columns="softwareColumns"
        :data-source="softwareList"
        :pagination="false"
        :expandRowByClick="true"
        :row-key="(record, index) => index"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="downloadLog(record)">下载</a>
        </template>
      </a-table>
    </a-modal>
  </a-layout>
</template>

<script>
import ImageView from "@/pages/components/ImageView";
import FilesTable from "@/pages/components/filesTable";
import List from "./list";
import getWebUrl from "@/assets/js/tools/getWebUrl";
import { getVersions, zipDownload, getBomHistoryAndMaterial } from "./apis";
@@ -237,11 +277,35 @@
        },
      ],
      dataSource: [],
      otherDoc: [],
      softwareList: [],
      softwareColumns: [
        {
          title: "软件名称",
          dataIndex: "softwareName",
          align: "center",
          // width: 180,
        },
        {
          title: "上传时间",
          dataIndex: "submitTime",
          align: "center",
          width: 180,
        },
        {
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: 100,
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
  components: {
    List,
    ImageView,
    FilesTable,
  },
  computed: {
    ...mapGetters("account", ["downloadFlag"]),
@@ -282,6 +346,17 @@
        if (code && data) {
          list = data2;
        }
        list.push({
          id: -33,
          parentCode: "0950000019",
          parentName: "单体锂电池维护仪",
          parentModel: "LIFG-0530CT",
          notes: null,
          customCode: "",
          createTime: "2021-08-29 13:53:06",
          version: 2,
          enabled: 0,
        });
        this.versionList = list;
      });
    },
@@ -298,27 +373,25 @@
      } = this;
      this.spinning = true;
      getBomHistoryAndMaterial(id, version).then((res) => {
        res = res.data;
        let { code, data, data2, data3, data4 } = res.data;
        // console.log(res, '909009')
        let list = [];
        let softwareList = [];
        let otherDoc = [];
        this.spinning = false;
        if (res.code && res.data) {
          list = res.data2.map((v) => {
            if (v.materials.length) {
        if (code && data) {
          list = data2.map((v) => {
            if (v.materials && v.materials.length) {
              v.children = v.materials;
            }
            return v;
          });
          // if (!info.parentModel) {
          //   const obj = list[0];
          //   debugger;
          //   info.parentModel = obj.parentModel;
          //   info.parentName = obj.parentName;
          //   info.parentCode = obj.parentCode;
          //   info.customCode = obj.customCode;
          // }
          softwareList = data3;
          otherDoc = data4;
        }
        this.dataSource = list;
        this.softwareList = softwareList;
        this.otherDoc = otherDoc;
        if (-1 == this.update) {
          this.update = Math.random();
        }
@@ -342,8 +415,8 @@
        });
    },
    downloadLog(record) {
      const { parentModel, subModel, dwgUrl } = record;
      const url = this.webUrl + dwgUrl;
      const { parentModel, subModel, dwgUrl, softwareUrl } = record;
      const url = softwareUrl ? this.webUrl + softwareUrl : this.webUrl + dwgUrl;
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
@@ -356,7 +429,7 @@
    zipDownload() {
      // const { parentModel, currentVersion } = this;
      const {
        currentVersion: { id, version }
        currentVersion: { id, version },
      } = this;
      zipDownload(id, version).then((res) => {
        // console.log(res, "===========");
@@ -381,12 +454,15 @@
    resize() {
      this.update = Math.random();
    },
    showSoftwareDownload () {
    showSoftwareDownload() {
      this.softwareDownloadShow = true;
    },
    softwareDownloadCancel () {
    softwareDownloadCancel() {
      this.softwareDownloadShow = false;
    }
    },
    diff(data) {
      console.log("比较两个版本", data);
    },
  },
  mounted() {
    this.getVersions();
@@ -484,8 +560,8 @@
  /deep/.ant-table-row-level-1 > td {
    background: #ff8ea2;
  }
   /deep/.ant-table-row-level-1.ant-table-row-level-1.ant-table-row-hover > td,
   /deep/.ant-table-row-level-1.ant-table-row-level-1:hover > td {
  /deep/.ant-table-row-level-1.ant-table-row-level-1.ant-table-row-hover > td,
  /deep/.ant-table-row-level-1.ant-table-row-level-1:hover > td {
    background: #ffbcc9;
  }
}

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

@@ -4,14 +4,23 @@
      <a-card class="main">
        <!-- <a-input v-model="keyword" placeholder="输入关键字过滤" /> -->
        <!-- 列表 -->
        <a-button type="primary" :disabled="selectedKeys.length != 2" @click="diff"
          >比较差异</a-button
        >
        <div class="contain">
          <div
            :class="['item', {'selected': currentV == item.id}]"
            :class="['item', { selected: currentV == item.id }]"
            v-for="(item, idx) in list"
            :key="'item_' + idx"
            @click="selectHandle(item)"
          >
            <div class="">{{item.createTime}}</div>
            <span :class="['status', { actived: item.enabled }]"></span>
            <div class="version">{{ item.createTime }}</div>
            <a-checkbox
              @click.stop
              :checked="item.selected"
              @change="(value) => checkChange(value, item)"
            ></a-checkbox>
          </div>
        </div>
      </a-card>
@@ -47,12 +56,13 @@
      if (n.length) {
        this.selectHandle(this.list[0]);
      }
    }
    },
  },
  data() {
    return {
      // keyword: '',
      currentV: '-1'
      currentV: "-1",
      selectedKeys: [],
    };
  },
  components: {},
@@ -61,10 +71,30 @@
      this.currentV = item.id;
      this.$emit("select", item);
    },
    checkChange(value, item) {
      const {
        target: { checked },
      } = value;
      // console.log(value, checked, item);
      if (checked) {
        this.selectedKeys.push(item.id);
        if (this.selectedKeys.length > 2) {
          this.selectedKeys.shift();
        }
      } else {
        let idx = this.selectedKeys.indexOf(item.id);
        this.selectedKeys.splice(idx, 1);
      }
      this.list.forEach((v) => {
        v.selected = this.selectedKeys.some((val) => val == v.id);
      });
    },
    diff() {
      this.$emit("diff", this.selectedKeys);
    },
  },

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

@@ -99,11 +129,9 @@
  box-shadow: 0px 4px 5px -2px #000;
  padding: 6px 0;
  border-radius: 4px;
  span {
    display: inline-block;
    width: 5em;
    text-align: right;
  }
  display: flex;
  flex-direction: row;
  align-items: center;
  & + .item {
    margin-top: 4px;
  }
@@ -115,7 +143,21 @@
  &.selected {
    transform: scale(0.98, 0.9);
    box-shadow: 0px 2px 5px -2px #000;
    color: #13C2C2;
    font-weight: bold;
  }
  .version {
    flex: 1;
  }
  .status {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #aaa;
    border-radius: 50%;
    &.actived {
      background: #00ff79;
    }
  }
}
</style>

 src/theme/antd/index.less

@@ -1,4 +1,8 @@
@import "ant-time-picker";
@import "ant-message";
@import "ant-table";
@import "ant-menu";
@import "ant-menu";

.ant-popover {
  z-index: 930;
}