client-mazu/src/pages/checkerManage/terminalConfig.vue

<template>
  <div class="form-wrap">
    <div
      class="tableBox"
      style="margin-top:30px">
      <div class="block-title">
        设备配置/更新
        <el-button
          type="primary"
          @click="activeName ==='配置文件'?openConfigDialog('add'): openApkDialog('add')"
        >
          {{ activeName ==='配置文件'?'新增配置': '新增apk' }}
        </el-button>

        <el-tabs v-model="activeName">
          <el-tab-pane
            label="配置文件"
            name="配置文件">
            <span slot="label">
              配置文件
            <!-- <Tip msg="仅包含窗口的门票销售数据，不包含线上门票的销售数据。"></Tip> -->
            </span>
            <el-table
              border
              stripe
              ref="multipleTable"
              tooltip-effect="dark"
              v-loading="loading"
              :data="configData">
              <el-table-column
                prop="id"
                label="编号"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="download_suffix"
                label="文件名"
              >
              </el-table-column>
              <el-table-column
                prop="download_url"
                label="下载地址"
              >
              </el-table-column>
              <el-table-column
                prop="update_time"
                label="更新时间"
              >
                <template slot-scope="scope">
                  {{ scope.row.update_time | formatTime }}
                </template>
              </el-table-column>

              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    size="small"
                    @click="downloadFile(scope.row)"
                  >
                    下载
                  </el-link>
                  <el-link
                    type="primary"
                    size="small"
                    @click="openConfigDialog('edit',scope.row)"
                  >
                    更新
                  </el-link>
                  <el-link
                    type="primary"
                    size="small"
                    @click="deleteConfig(scope.row.id)"
                  >
                    删除
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page.sync="form.pageNum"
              :page-size="form.pageSize"
              layout="total, prev, pager, next"
              @current-change="getConfigList"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane
            label="apk更新"
            name="apk更新">
            <span slot="label">
              apk更新
            <!-- <Tip msg="仅包含窗口的门票销售数据，不包含线上门票的销售数据。"></Tip> -->
            </span>
            <el-table
              border
              stripe
              ref="multipleTable"
              tooltip-effect="dark"
              v-loading="loading"
              :data="apkData">
              <el-table-column
                prop="id"
                label="编号"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="download_suffix"
                label="文件名"
              >
              </el-table-column>
              <el-table-column
                prop="version_name"
                label="版本名"
              >
              </el-table-column>
              <el-table-column
                prop="download_url"
                label="下载地址"
              >
              </el-table-column>
              <el-table-column
                prop="update_time"
                label="更新时间"
              >
                <template slot-scope="scope">
                  {{ scope.row.update_time | formatTime }}
                </template>
              </el-table-column>

              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    size="small"
                    @click="downloadFile(scope.row)"
                  >
                    下载
                  </el-link>
                  <el-link
                    type="primary"
                    size="small"
                    @click="openApkDialog('edit',scope.row)"
                  >
                    更新
                  </el-link>
                  <el-link
                    type="primary"
                    size="small"
                    @click="deleteConfig(scope.row.id)"
                  >
                    删除
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page.sync="form1.pageNum"
              :page-size="form1.pageSize"
              layout="total, prev, pager, next"
              @current-change="getApkList"
              :total="total1">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 配置弹框 -->
    <ElDialog
      :title="dialogType === 'add' ? '新增配置' : '编辑配置'"
      width="1000px"
      v-model="configDialogVisible"
    >
      <ConfigSetting
        @update="getConfigList"
        :config-info="configInfo"
        :dialog-type="dialogType"></ConfigSetting>
    </ElDialog>
    <!-- Apk弹窗 -->
    <DialogEdit
      @update="getApkList"
      ref="dialog"></DialogEdit>
  </div>
</template>

<script>
import ConfigSetting from './terminalConfig/ConfigSetting.vue'
import { deleteTicketInventory } from '@/api/ticketInventory'
import { getTerminalConfigList, deleteTerminalConfig } from '@/api/terminalConfig'
import ElDialog from '@/components/Dialog'
import DialogEdit from './terminalConfig/DialogEdit'

export default {
  components: {
    ElDialog,
    ConfigSetting,
    DialogEdit
  },
  data () {
    return {
      configDialogVisible: false,
      configInfo: null,
      dialogType: '', // 编辑or新增
      form: {
        type: 'CONFIG_FILE',
        pageNum: 1,
        pageSize: 10
      },
      form1: {
        type: 'APK_FILE',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      total1: 0,
      apkData: [],
      configData: [],
      loading: false,
      activeName: '配置文件'
    }
  },
  computed: {
    userId () {
      return this.$store.state.user.id
    }
  },
  created () {
    this.getConfigList()
  },
  methods: {
    // 打开配置弹窗
    openConfigDialog (type, item) {
      this.configInfo = item
      this.configDialogVisible = true
      this.dialogType = type
    },

    // 打开Apk配置弹窗
    openApkDialog (type, item) {
      this.$refs.dialog.show(type, item)
    },

    // 更新列表
    updateList () {
      this.activeName === '配置文件' ? this.getConfigList() : this.getApkList()
    },
    // 删除设备
    deleteConfig (id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTerminalConfig(id).then(() => {
          this.$message.success('删除成功')
          this.updateList()
        })
      })
    },

    // 下载
    downloadFile (data) {
      if (!data.download_url) {
        this.$message.error('暂无下载地址')
        return
      }
      let url = ''
      if (this.transformUrl) {
        const urlObj = new URL(data.download_url)
        const localObj = new URL(this.$localStore.get('serverUrl'))
        urlObj.hostname = localObj.hostname
        urlObj.protocol = localObj.protocol
        urlObj.port = localObj.port || '80'
        url = urlObj.href
      } else {
        url = data.download_url
      }
      const Store = require('electron-store')
      const localStore = new Store()
      const serverUrl = localStore.get('serverUrl') // 服务器地址
      const newUrl = serverUrl + url.split('.cn')[1]
      window.location.href = newUrl
      // require('electron').ipcRenderer.send('download', newUrl)
    },
    getApkList () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form1))
      getTerminalConfigList(params).then(res => {
        this.apkData = res.list
        this.total1 = res.total
      }).finally(() => {
        this.loading = false
      })
    },

    //   获取配置列表
    getConfigList () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form))
      getTerminalConfigList(params).then(res => {
        this.configData = res.list
        console.log('我更新了')
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleDelete (id) {
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTicketInventory(id).then(res => {
          this.$message.success('删除成功')
          this.getConfigList()
        })
      }).catch(() => {})
    }
  },
  watch: {
    activeName (val) {
      if (val === 'apk更新') {
        this.getApkList()
      } else {
        this.getConfigList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  .el-input,.el-select,.el-date-editor,.el-date-editor.el-input,.el-input-number {
    width: 300px;
  }
}

</style>