demo/demo-web-ui/src/views/mobileterminal/mobileterminal.vue

<template>
  <div class="app-container">
    <!-- Start 列表页面 -->
    <div v-show="viewState == 1">
      <button-bar view-title="安瑞移动门户" :version="version" :time="time" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
      <div class="main-content">
        <div class="" style="margin-top: 10px">
          <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;" row-key="appName" :tree-props="{children: 'mobileMenuList'}">
            <el-table-column prop="appName" label="插件名称" align="center"/>
            <el-table-column label="版本号/应用分类" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.versionName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="更新时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.modifyTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" v-show="scope.row.appSid !== null && scope.row.appSid !== undefined && scope.row.appSid !== ''" @click="handleAddAdhibition(scope.row)">新增应用</el-button>
                <el-button type="primary" size="small" v-show="scope.row.appSid !== null && scope.row.appSid !== undefined && scope.row.appSid !== ''" @click="hanglePlugin(scope.row)">更新插件</el-button>
                <el-button type="primary" size="small" v-show="scope.row.appSid == null || scope.row.appSid == undefined || scope.row.appSid == ''" @click="handleUpdateAdhibition(scope.row)">修改</el-button>
                <el-button type="danger" size="small" v-show="scope.row.appSid == null || scope.row.appSid == undefined || scope.row.appSid == ''" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column label="应用路由" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sourceAction }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <plugin v-show="viewState == 2" ref="divPlugin" @doback="resetState" @reloadlist="getList"/>
    <updatePlugin v-show="viewState == 3" ref="divUpdatePlugin" @doback="resetState" @reloadlist="getList"/>
    <adhibition v-show="viewState == 4 || viewState == 5" ref="divAdhibition" @doback="resetState" @reloadlist="getList"/>
    <frame v-show="viewState == 6" ref="divFrame" @doback="resetState" @reloadlist="getList"/>
  </div>
</template>

<script>
import { pageList, deleteMenu } from '@/api/system/mobileterminal/mobileterminal'
import ButtonBar from '@/components/ButtonBar'
import plugin from './plugin'
import updatePlugin from './updatePlugin'
import adhibition from './adhibition'
import frame from './frame'

export default {
  name: 'mobileterminal',
  components: {
    ButtonBar,
    plugin,
    updatePlugin,
    adhibition,
    frame
  },
  data() {
    return {
      btndisabled: false,
      btnList: [
        {
          type: 'primary',
          size: 'small',
          icon: 'plus',
          btnKey: 'toAdd',
          btnLabel: '新增插件'
        },
        {
          type: 'primary',
          size: 'small',
          icon: 'edit',
          btnKey: 'toEdit',
          btnLabel: '更新框架'
        },
        {
          type: 'info',
          size: 'small',
          icon: 'cross',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }
      ],
      isSearchShow: false,
      searchxianshitit: '显示查询条件',
      viewState: 1,
      // 查询条件 -----------
      tableKey: 0,
      version: '',
      time: '',
      list: [],
      sids: [],
      FormLoading: false,
      listLoading: false,
      rules: {}
    }
  },
  created() {
    // 加载列表
    this.getList()
  },
  mounted() {
    this.$refs['btnbar'].setButtonList(this.btnList)
  },
  methods: {
    // 搜索条件效果
    clicksearchShow() {
      this.isSearchShow = !this.isSearchShow
      if (this.isSearchShow) {
        this.searchxianshitit = '隐藏查询条件'
      } else {
        this.searchxianshitit = '显示查询条件'
      }
    },
    btnHandle(btnKey) {
      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
      switch (btnKey) {
        case 'toAdd':
          this.toAdd()
          break
        case 'toEdit':
          this.toEdit()
          break
        case 'doDel':
          this.doDel()
          break
        case 'doClose':
          this.doClose()
          break
        default:
          break
      }
    },
    // 查询列表信息
    getList() {
      this.listLoading = true
      pageList().then((response) => {
        console.log('列表查询结果：', response)
        this.listLoading = false
        if (response.success) {
          this.list = response.data.list
          this.version = response.data.appVersionVo.versionName
          this.time = response.data.appVersionVo.modifyTime
        } else {
          this.list = []
        }
      })
    },
    toAdd() {
      this.viewState = 2
      this.$refs['divPlugin'].showAdd()
    },
    toEdit() {
      this.viewState = 6
      this.$refs['divFrame'].showAdd()
    },
    hanglePlugin(row) {
      this.viewState = 3
      this.$refs['divUpdatePlugin'].showEdit(row)
    },
    handleAddAdhibition(row) {
      this.viewState = 4
      this.$refs['divAdhibition'].showAdd(row)
    },
    handleUpdateAdhibition(row) {
      this.viewState = 5
      this.$refs['divAdhibition'].showEdit(row)
    },
    handleDelete(row) {
      const tip = '请确认是否删除该应用?'
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       deleteMenu({ sid: row.sid }).then((resp) => {
          if (resp.success) {
            this.$message({ type: 'success', message: resp.msg, showClose: true })
            this.getList()
          }
        }).catch(e => {
        })
      }).catch(() => {
      })
    },
    resetState() {
      this.viewState = 1
    },
    doClose() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
</style>