sc_startup/src/renderer/components/StartUpPage/SoftwareStartup.vue

<template>
  <div class="software-startup software-wrap" v-loading="loading" element-loading-text="正在获取本地数据中，请稍候...">
    <div class="software-left border-right border-top">
      <div class="local-software">
        <div class="software media p-3" v-for="product in productlist" :key="product.id" :class="[products.id === product.id ? 'active' : '']">
          <img class="mr-2" :src="product.src" width="25" height="25" :alt="product.title">
          <div class="media-body">
            <div class="mt-0 mb-1"><router-link :to="{ name: 'software-startup-detail', params: { productid: product.id } }">{{ product.title }}</router-link></div>
          </div>
        </div>
      </div>
      <div class="software-left-bottom border-top">
        <div class="d-flex bd-highlight">
          <div class="p-2 flex-fill bd-highlight">
            <el-button style="width:100%;" type="primary" class="btn btn-primary btn-blue btn-sm" @click="openlist('software-list')">下载软件</el-button>
          </div>
          <div class="p-2 flex-fill bd-highlight">
            <el-dropdown placement="top" trigger="click" style="width:100%;" @command="clickbtn">
              <el-button type="primary" style="width:100%;" class="btn btn-primary btn-blue btn-sm">
                添加软件<i class="el-icon-arrow-up el-icon--right"></i>
              </el-button>
              <el-dropdown-menu class="command-menu" slot="dropdown">
                <el-dropdown-item class="command-item" command="auto">自动获取</el-dropdown-item>
                <el-dropdown-item class="command-item" command="manual">手动添加</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <software-startup-detail ref="startupDetail"></software-startup-detail>
  </div>
</template>

<script>
  import mixin from '../mixin'
  import SoftwareStartupDetail from './SoftwareStartupDetail'
  export default {
    mixins: [mixin],
    components: { SoftwareStartupDetail },
    data () {
      return {
        activeName: 'first',
        productlist: '',
        products: '',
        loading: false
      }
    },
    created () {
      this.fetchData()
      let self = this
      this.$electron.ipcRenderer.on('successUpdate', (event, msg) => {
        try {
          self.loading = false
          let num = msg.num
          let delnum = msg.delnum
          this.$electron.ipcRenderer.send('testUsb')
          if (num !== 0 && delnum !== 0) {
            self.$message({
              message: `新增了 ${num} 个纵横软件`,
              type: 'success'
            })
            setTimeout(function () {
              self.$message({
                message: `移除了 ${delnum} 个纵横软件`,
                type: 'error'
              })
            }, 2000)
          } else {
            if (delnum !== 0) {
              self.$message({
                message: `移除了 ${delnum} 个纵横软件`,
                type: 'error'
              })
            }

            if (num !== 0) {
              self.$message({
                message: `新增了 ${num} 个纵横软件`,
                type: 'success'
              })
            }
            if (num === 0 && delnum === 0) {
              self.$message.info('更新没有获取到新的纵横软件')
            }
          }
          let id = msg.id
          // 如果不跳转出本产品，则让downlist 每次都执行更新一遍
          if (self.$route.params.productid === id) {
            self.fetchData()
            if (self.$refs.startupDetail !== undefined) {
              self.$refs.startupDetail.fetchData()
            }
          } else {
            self.$router.push({
              name: 'software-startup-detail',
              params: {productid: id}
            })
          }
        } catch (err) {
          console.log(err)
        }
      })

      this.$electron.ipcRenderer.on('failedUpdate', (event, msg) => {
        try {
          self.loading = false
          self.$message.info('你的电脑还没安装过纵横软件')
          console.log(msg.error)
          let id = msg.id
          this.$electron.ipcRenderer.send('testUsb')
          if (self.$route.params.productid === id && msg.error !== 200) {
            self.fetchData()
            if (self.$refs.startupDetail !== undefined) {
              self.$refs.startupDetail.fetchData()
            }
          } else {
            self.$router.push({
              name: 'software-startup-detail',
              params: { productid: id }
            })
          }
        } catch (err) {
          console.log(err)
        }
      })

      this.$electron.ipcRenderer.on('failedDirectory', (event, result) => {
        self.loading = false
        if (result.msg !== '') {
          self.$message({
            message: result.msg,
            type: 'error'
          })
        }
      })
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },
    methods: {
      fetchData () {
        let pid = this.$route.params.productid === undefined ? this.$db.read().get('sc_productData').last().value().id : this.$route.params.productid
        this.products = this.$db.read().get('sc_productData').getById(pid).value()
        this.productlist = this.$db.read().get('sc_productData').filter({ isshow: true }).orderBy('addtime', 'desc').value()
      },
      openlist (index) {
        this.$router.push({
          name: index
        })
      },
      clickbtn (command) {
        this.loading = true
        if (command === 'auto') {
          this.$electron.ipcRenderer.send('updateInstall')
        } else {
          this.$electron.ipcRenderer.send('file-select')
        }
      }
    }
  }
</script>

<style>
  .software-left {
    position: absolute;
    width: 250px;
    top: 59px;
    bottom: 0;
    left: 0;
  }
  .border-right {
    border-right: 1px solid #dee2e6!important;
  }
  .border-top {
    border-top: 1px solid #dee2e6!important;
  }
  .local-software {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 50px;
    /* background: #f9f9f9; */
    background-color: rgba(254,250,249,0.3);
    overflow-y: auto;
  }
  .software-left-bottom {
    background-color: rgba(251,231,216,0.5);
    z-index: 999;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
  }
  .local-install {
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    width: 648px;
    overflow-y: auto;
  }
  .software.active {
    background: #fdf5f2;
    border-left: 3px solid #ff6501;
  }
  .software.active a {
    color: #333;
  }
  .software a {
    text-decoration: none;
  }
  .d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
  }
  .flex-fill {
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important;
  }
  .software-content {
    height: 337px;
    overflow-y: auto;
    padding-right: 15px;
  }
  .details {
    padding: 15px 0;
    border-bottom: 1px dotted #ccc;
  }
  .details:hover{
    border-bottom:1px solid #ff6501;
  }
  .w-25 {
    width: 25%!important;
  }
  .w-50 {
    width: 50%!important;
  }
  .d-inline-block {
    display: inline-block!important;
  }
  .command-menu {
    padding: .5rem 0 !important;
    color: #212529 !important;
    border-radius: .25rem !important;
    margin: .125rem 0 0 !important;
    font-size: 1rem !important;
  }
  .command-item {
    font-size: 1rem !important;
  }
  .el-popper[x-placement^=top] {
    margin-bottom: 5px!important;
  }
</style>