@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/views/client/SystemManager.vue

@@ -0,0 +1,998 @@
+<template>
+  <div class="box-card">
+        <div class="left-nav">
+          <div class="nav-item nav-title">系统目录</div>
+          <div class="input-search">
+              <el-input v-model="inputName" clearable placeholder="请输入系统名称" @change="getSystemList"></el-input>
+          </div>
+          <div class="left-nav-content">
+            <draggable v-bind="dragOptions" v-if="systemList.length>0"
+              v-model="systemList"
+              tag="ul"
+
+              @start="systemDrag = true"
+              @end="systemMoveEnd">
+
+            <div :title="item.NAME+item.VERSION" @click="scrollSystem(item)" class="nav-item system-nav-item" v-for="item in systemList" :key="item.ID">
+              <div class="system-item-left">
+                <!-- <i :class="[item.ICON || 'el-icon-s-platform']"></i> -->
+                <span class="system-nav-name">{{item.NAME}}</span>
+                <span class="system-item-version">{{item.VERSION}}</span>
+              </div>
+              <div class="operate">
+                <el-dropdown v-if="columnOperates.length>0" class="more-table-operates"  trigger="click">
+                  <span class="button-cursor system-setting" @click.stop>
+                    <i class="el-icon-setting"></i>
+                  </span>
+                  <template v-slot:dropdown><el-dropdown-menu>
+                    <template v-for="operates in columnOperates" :key="operates.text">
+                      <el-dropdown-item v-if="operates.handler!=='removeSystem' || (item['DEL_STATUS']!=='0' && (item.CODE!=='epxing-frame-manage' && item.CODE!=='epxing-frame') )  "  @click="$handler(operates,item)">{{operates.text}}</el-dropdown-item>
+                    </template>
+                  </el-dropdown-menu></template>
+                </el-dropdown>
+              </div>
+            </div>
+             </draggable>
+          </div>
+          <div class="add-btn" v-if="isClientManage">
+            <!-- <el-button style="width:100%" type="primary" @click="createSystem">创建系统</el-button> -->
+            <el-button style="width:100%" type="primary" @click="showImportSystemDialog=true">导入系统</el-button>
+          </div>
+        </div>
+        <div class="has-nav-container">
+          <div class="system-app-search">
+            <div class="app-input-search">
+                <div class="input-label">应用名称：</div>
+                <el-input style="width:208px" v-model="appName" @update:model-value="editAppName" @change="searchApp" clearable :placeholder="$t('hall.enter_application_name')"></el-input>
+            </div>
+            <div class="app-input-search">
+                <div class="input-label">应用类别：</div>
+                <div>
+                   <el-radio-group v-model="activeAppType" @update:model-value="searchApp">
+                    <el-radio-button v-for="option in appTypeOptions" :key="option.id" :label="option.code" :value="option.code" >{{option.name}}</el-radio-button>
+                  </el-radio-group>
+                </div>
+            </div>
+          </div>
+          <div ref="container" class="system-container">
+            <template v-if="systemList.length>0">
+              <template v-for="item in systemList" :key="item.ID">
+                <div v-show="(((appName||isEditSearchName)||activeAppType)&&draggleApp[item.ID].length>0)||(!((appName||isEditSearchName)||activeAppType))" :ref="item.ID" class="system-item">
+                    <div class="system-content">
+                      <div class="system-header">
+                        <div class="system-header-left">
+                          <i :class="[item.ICON || 'el-icon-s-platform']"></i>
+                          <span class="system-name">{{item.NAME}}</span>
+                          <span>版本：{{item.VERSION}}</span>
+                          <span class="delete-status" v-if="item['DEL_STATUS']">
+                            <span class="delete-system__text" v-if="item['DEL_STATUS']==='0'">
+                              <i class="el-icon-loading"></i>
+                              全力删除中，请耐心等待
+                            </span>
+                            <span v-else :style="{ color: 'red' }">{{item['DEL_STATUS#']}}</span>
+                          </span>
+                        </div>
+
+                      </div>
+                      <div class="system-apps">
+                          <!-- filter=".add-app" -->
+                        <draggable
+                          v-if="draggleApp[item.ID].length>0"
+                          class="system-list"
+                          tag="ul"
+                          filter=".add-app"
+                          v-model="draggleApp[item.ID]"
+                          group="description"
+                          ghostClass="ghost"
+                          :animation="300"
+                          @start="drag = true"
+                          @end="moveEnd(item,$event)"
+                          :move="onMove"
+                        >
+                        <!-- <div class="system-app-item" v-for="app in getApplication(item.SERVICE)" :key="app.id" @click="openApp(app.id)"> -->
+                        <div class="system-app-item" v-for="app in draggleApp[item.ID]" :key="app.id" @click="manageApp(item,app)">
+                            <el-tag v-if="app.status" class="system-app-status" size="small" :type="app.status!=='ON' ? 'danger': ''">{{app.status==='ON'? $t('activate') : $t('outage')}}</el-tag>
+                          <div class="system-app-img">
+                            <!-- <i :class="[app.ICON || 'el-icon-s-platform']"></i> -->
+                            <img :src="app.image? $util.getFileUrl(app.image) : require('@/assets/images/app.png')" />
+                          </div>
+                          <div :title="app.name" class="system-app-name">{{app.name}}</div>
+                          <el-dropdown trigger="click" @visible-change="show => (activeDropDown = show ? app.id : '')">
+                            <span @click.stop :class="['system-app-dropdown-link', { 'active': activeDropDown === app.id }]">
+                              <i class="el-icon-more"></i>
+                            </span>
+                            <template v-slot:dropdown><el-dropdown-menu>
+                              <el-dropdown-item v-if="item.systemAdmin==='true'" @click="appDelete(app)">{{$t('delete')}}</el-dropdown-item>
+                              <el-dropdown-item v-if="item.systemAdmin==='true'" @click="startApp(app)">{{app.status!=='ON'? $t('activate') : $t('outage')}}</el-dropdown-item>
+                              <el-dropdown-item v-if="item.systemAdmin==='true'" @click="appAccredit(item,app)">{{$t('accredit')}}</el-dropdown-item>
+                              <el-dropdown-item @click="copyLink(item,app)">{{$t('copylink')}}</el-dropdown-item>
+                              <el-dropdown-item @click="openApp(item,app)">打开应用</el-dropdown-item>
+                            </el-dropdown-menu></template>
+                          </el-dropdown>
+                        </div>
+                        <div v-if="item.systemAdmin==='true'" class="system-app-item add-app" @click="createApp(item)">
+                          <div class="add-app-icon"><i class="el-icon-plus"></i></div>
+                          <div>创建应用</div>
+                        </div>
+                        </draggable>
+                        <template v-else>
+                          <div v-if="item.systemAdmin==='true'" class="system-app-item add-app" @click="createApp(item)">
+                            <div class="add-app-icon"><i class="el-icon-plus"></i></div>
+                            <div>创建应用</div>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                </div>
+              </template>
+                <div v-show="!allSystemNotApp">
+                  <div class="no-data">
+                    <i class="epx-icon-color-kong"></i>
+                    <p>没有搜索到应用</p>
+                  </div>
+                </div>
+              </template>
+            <template v-else>
+              <div class="no-data">
+                <i class="epx-icon-color-kong"></i>
+                <p>暂无系统</p>
+              </div>
+            </template>
+          </div>
+        </div>
+        <el-dialog
+          title="导入系统"
+          v-model="showImportSystemDialog"
+          append-to-body
+          width="560px"
+        >
+        <epx-alert text="温馨提示：通过导入配置包的方式直接创建系统"></epx-alert>
+       <el-upload
+          class="epx-import__upload"
+          drag
+          :limit="1"
+          action=""
+          :http-request="upload"
+          :file-list="fileList"
+          >
+          <img src="@/assets/images/import.png" />
+          <div class="epx-import__upload-text el-upload__text">
+            <div ref="uploadBtn">{{$t('Drag the file here, or')}}<em>{{$t('Click on the upload')}}</em></div>
+            <!-- <div class="epx-import__upload-tip el-upload__tip " slot="tip">{{$t('Only Excel is supported. You can select fields below to generate data file templates')}}</div> -->
+          </div>
+          <template v-slot:file="{file}"><div class="epx-import__file">
+              <span>{{file.name }}</span>
+              <i>|</i>
+              <i class="el-icon-refresh " @click="reupload(file.ID,file.uid)"></i>
+              <i>|</i>
+              <i class="el-icon-delete epx-import__delete" @click="deleteFile(file)"></i>
+          </div></template>
+        </el-upload>
+          <div class="import-system-btn">
+            <el-button type="primary" :loading="loading" @click="importSystem">导入系统</el-button>
+          </div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import draggable from '@epxing/core/src/components/draggable'
+import { mapGetters } from 'vuex'
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-client-system-manager',
+  mixins: [component],
+  columnOperates: [
+    {
+      text: '进入配置中心',
+      handler: 'openSystemConfig'
+    },
+    {
+      text: '查看详情',
+      handler: 'goPage',
+      pageFlag: 'v_add',
+      params: {
+        name: '#[NAME]',
+        id: '#[ID]',
+        pageType: 'DETAIL'
+      }
+    },
+    {
+      text: '删除',
+      handler: 'removeSystem'
+    }
+  ],
+  data () {
+    return {
+      inputName: '',
+      systemList: [],
+      systemListData: [],
+      activeDropDown: '',
+      confirmDelete: false,
+      draggleApp: {},
+      dragOptions () {
+        return {
+          animation: 200,
+          group: 'description',
+          disabled: false,
+          ghostClass: 'ghost'
+        }
+      },
+      addSystemInfo: {},
+      appTypeOptions: [],
+      activeAppType: '',
+      appName: '',
+      allSystemNotApp: true,
+      systemDrag: false,
+      isEditSearchName: false,
+      showImportSystemDialog: false,
+      fileList: [],
+      loading: false
+    }
+  },
+  components: {
+    draggable
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById'
+    ]),
+    isClientManage () {
+      const { manageClientId = '' } = this.user
+      if (!manageClientId) return false
+      const clientList = manageClientId.split(',')
+      return clientList.includes(this.CLIENT)
+    },
+    columnOperates () {
+      const { columnOperates = [] } = this.$configs
+      if (!this.isClientManage) {
+        return []
+      } else {
+        return columnOperates
+      }
+    },
+    // appColumnOperates () {
+    //   const { appColumnOperates = [] } = this.$configs
+    //   if (!this.isClientManage) {
+    //     return [appColumnOperates[0]]
+    //   } else {
+    //     return appColumnOperates
+    //   }
+    // },
+    getApplication () {
+      return (application) => {
+        const app = JSON.parse(application || '[]')
+        return app
+      }
+    }
+  },
+  methods: {
+    editAppName (v) {
+      this.isEditSearchName = true
+    },
+    searchApp () {
+      this.isEditSearchName = false
+      // if (field === 'type') {
+      //   if (this.activeAppType === option.code) {
+      //     this.activeAppType = ''
+      //   } else {
+      //     this.activeAppType = option.code
+      //   }
+      // }
+      const arr = []
+      let showFlag = false
+      this.systemList.forEach(item => {
+        const apps = item.SERVICE ? JSON.parse(item.SERVICE) : []
+        const service = apps.filter(app => {
+          let flag = true
+          if (this.activeAppType && app.type !== this.activeAppType) {
+            flag = false
+          }
+          return app.name.includes(this.appName) && flag
+        })
+        if (!showFlag && (this.appName || this.activeAppType) && service.length > 0) {
+          showFlag = true
+        }
+        arr.push({ ...item, SERVICE: JSON.stringify(service) })
+      })
+      arr.forEach(item => {
+        this.draggleApp[item.ID] = item.SERVICE ? JSON.parse(item.SERVICE) : []
+      })
+      if (!(this.appName || this.activeAppType)) {
+        showFlag = true
+      }
+      // 搜索时，是否搜索到应用
+      this.allSystemNotApp = showFlag
+    },
+    scrollSystem (item) {
+      const container = this.$refs.container
+      const elem = this.$refs[item.ID][0]
+      container.scrollTop = elem.offsetTop - 80
+    },
+    manageApp (system, app) {
+      if (system.systemAdmin === 'true') {
+        const rootPath = this.$util.getRootPath()
+        const url = `${rootPath}/manage/${system['CLIENT|CODE']}/${system.CODE}/${app.code}`
+        this.$util.openWindow(url)
+      } else {
+        const url = `#app/${system['CLIENT|CODE']}/${system.CODE}/${app.code}`
+        this.$util.openWindow(url)
+      }
+    },
+    async openApp (system, app) {
+      const rootPath = this.$util.getRootPath()
+      let url = `${rootPath}/app/${system['CLIENT|CODE']}/${system.CODE}/${app.code}`
+      if (app.IS_SHORT_URL === '1') {
+        const shortUrl = await this.$http.get({
+          action: 'getShortUrl',
+          entityId: 'FM_URL_MAP',
+          url: url
+        }, {
+          domainContext: window.BASE_PROJECT_NAME,
+          client: window.BASE_CLIENT_ID,
+          system: window.BASE_SYSTEM_ID
+        })
+        url = `${rootPath}/s/${shortUrl}`
+      }
+      this.$util.openWindow(url)
+    },
+    // 创建应用
+    createApp (system) {
+      const { addAppPageId } = this.$configs
+      if (addAppPageId) {
+        this.addSystemInfo = { ...system }
+        const defaultValue = {}
+        defaultValue.CLIENT = system.CLIENT
+        defaultValue.SYSTEM = system.ID
+        const query = {
+          openType: '2',
+          pageType: 'ADD',
+          pageId: addAppPageId,
+          defaultValue: defaultValue,
+          callback: this.goSetting,
+          title: `${system.NAME}-创建应用`,
+          dialogWidth: '1082px',
+          createAi: this.appConfig['CLIENT|OPEN_AI'] === '1'
+        }
+        this.$createPage(query)
+      }
+    },
+    goSetting (v) {
+      const rootPath = this.$util.getRootPath()
+      const url = `${rootPath}/manage/${this.addSystemInfo['CLIENT|CODE']}/${this.addSystemInfo.CODE}/${v.CODE}`
+      this.$util.openWindow(url)
+      this.getSystemList()
+    },
+    // $refesh () {
+    //   this.getSystemList()
+    // },
+    // 删除app
+    appDelete (app) {
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: 'FM_SERVICE',
+            ids: app.id
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.getSystemList()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+    },
+    // 授权
+    appAccredit (system, app) {
+      const { appAccreditPageId } = this.$configs
+      if (appAccreditPageId) {
+        const query = {
+          systemId: system.ID,
+          serviceId: app.id,
+          pageId: appAccreditPageId,
+          systemName: system.NAME,
+          appName: app.name
+        }
+        this.$createPage(query)
+      }
+    },
+    // 启用/停用app
+    startApp (app) {
+      this.$http.update({
+        entityId: 'FM_SERVICE',
+        'bean.ID': app.id,
+        'bean.STATUS': app.status !== 'ON' ? 'ON' : 'OFF'
+      })
+        .then(() => {
+          this.$message.success(this.$t('handle a successful'))
+          this.getSystemList()
+        })
+    },
+    // 复制链接
+    async copyLink (system, app) {
+      const rootPath = this.$util.getRootPath()
+      let url = `${rootPath}/app/${system['CLIENT|CODE']}/${system.CODE}/${app.code}`
+      if (app.IS_SHORT_URL === '1') {
+        const shortUrl = await this.$http.get({
+          action: 'getShortUrl',
+          entityId: 'FM_URL_MAP',
+          url: url
+        }, {
+          domainContext: window.BASE_PROJECT_NAME,
+          client: window.BASE_CLIENT_ID,
+          system: window.BASE_SYSTEM_ID
+        })
+        url = `${rootPath}/s/${shortUrl}`
+      }
+      var input = document.createElement('input')
+      input.value = url
+      document.body.appendChild(input)
+      input.select()
+      document.execCommand('Copy')
+      document.body.removeChild(input)
+      this.$message.success(this.$t('copy success'))
+    },
+    // 创建系统
+    createSystem () {
+      const query = {
+        openType: '2',
+        title: '创建系统',
+        component: 'client-create-method',
+        dialogWidth: '720px',
+        dialogHeight: '440px'
+      }
+      this.$createPage(query)
+    },
+    // 设置
+    settingItem  (button, item) {
+      const query = {
+        flag: 'v_add',
+        component: 'entity-edit-page',
+        pageType: 'EDIT',
+        id: item.ID,
+        metaId: this.$metaId,
+        callback: this.getSystemList
+      }
+      this.$createPage(query)
+    },
+    // 复制
+    copyItem (button, item) {
+      const query = {
+        component: 'client-self-build-system',
+        metaId: 'FM_SYSTEM',
+        pageType: 'EDIT',
+        copyType: 'copy',
+        clientId: item.CLIENT,
+        id: item.ID
+      }
+      this.$createPage(query)
+    },
+    // 发布共享
+    publishShare (button, item) {
+      this.$confirm('确认共享？')
+        .then(() => {
+          this.$http.$post({
+            action: 'publish',
+            entityId: 'FM_APPLICATION_MARKET',
+            appId: item.ID
+          })
+            .then(() => {
+              this.$message.success('发布成功')
+            })
+            .catch(err => {
+              this.$message.error(err.message || '发布失败')
+            })
+        })
+    },
+    // 删除
+    removeItem  (button, item) {
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: item.ID
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.getSystemList()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+    },
+    changeConfirmDelete () {
+      setTimeout(() => {
+        const checkbox = this.$refs.checkbox.$el
+        const checkboxInput = checkbox.children[0]
+        if (this.confirmDelete) {
+          checkbox.className += ' is-checked'
+          checkboxInput.className += ' is-checked'
+        } else {
+          checkbox.className = checkbox.className.replace(' is-checked', '')
+          checkboxInput.className = checkboxInput.className.replace(' is-checked', '')
+        }
+      }, 200)
+    },
+    removeSystem (button, item) {
+      const that = this
+      that.confirmDelete = false
+      this.$confirm((
+        <div>
+          <span>该操作会删除系统内所有数据，删除后我们会为您备份系统数据，在一定时间内可进行删除系统恢复。备份数据需要一定时间，继续执行操作请勾选我已经知晓，确认删除。</span>
+          <br/>
+          <font color="red" style={{ marginRight: '4px' }}>*</font><el-checkbox ref="checkbox" v-model={that.confirmDelete} onClick={that.changeConfirmDelete.bind(that)}>我已知晓，确定删除</el-checkbox>
+        </div>
+      ), this.$t('hint'), {
+        customClass: 'el-message-box--500',
+        confirmButtonText: '删除',
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning',
+        beforeClose (action, instance, done) {
+          if (action === 'confirm' && !that.confirmDelete) {
+            this.$message.error('请先勾选我已经知晓，确认删除')
+          } else {
+            done()
+          }
+        }
+      }).then(() => {
+        if (that.confirmDelete) {
+          this.$http.$post({
+            action: 'delSys',
+            entityId: this.$metaId,
+            systemId: item.ID
+          })
+            .then(data => {
+              this.$message({
+                type: 'success',
+                message: '处理成功，正在为您删除'
+              })
+              this.getSystemList()
+            }).catch(err => {
+              this.$message.error(err.message)
+            })
+        }
+      })
+    },
+    dropdownHandler (e, id) {
+      e.stopPropagation()
+      this.activeDropDown = id
+    },
+    getSystemList () {
+      const scopeParams = [{ field: 'NAME', values: this.inputName, mode: 'like', lb: '(', rb: ')' }]
+      this.$http.list({
+        action: 'getSystemList',
+        entityId: this.$metaId,
+        'scope.CLIENT': this.CLIENT,
+        scopeParams: JSON.stringify(scopeParams),
+        columnFieldNames: 'ID#,CLIENT#,CLIENT|CODE,SYSTEM#,NAME#,CODE#,TYPE#,FIRST_PAGE#,SERVER_TAG#,BRIEF_INTRODUCTION#,DETAILS#,STATUS#,SERVICE,ICON,ICON_BG_COLOR,VERSION,DEL_STATUS#,systemAdmin'
+      })
+        .then(data => {
+          // this.systemList = data.entitys
+          this.systemListData = data.entitys
+          this.systemList = [...this.systemListData]
+          if (this.appName || this.activeAppType) {
+            this.searchApp()
+          } else {
+            this.systemList.forEach(item => {
+              this.draggleApp[item.ID] = item.SERVICE ? JSON.parse(item.SERVICE) : []
+            })
+          }
+        })
+    },
+    getManageService (id) {
+      return this.$http.get({
+        action: 'hasMangeService',
+        entityId: 'FM_USER',
+        querySystem: id || this.appConfig.ID
+      })
+    },
+    openSystemConfig (operate, system) {
+      // 打开应用
+      this.getManageService(system.ID)
+        .then(manageRight => {
+          const { systemServiceId } = manageRight || {}
+          if (systemServiceId) {
+            const { client: clientCode } = this.$route.params
+            const { 'CLIENT|CODE': client } = this.appConfig
+            const _token = this.$util.search('_token')
+            const token = this.$util.getToken(clientCode || client)
+            const rootPath = this.$util.getRootPath()
+            this.$util.openWindow(`${rootPath}/system/${system['CLIENT|CODE']}/${system.CODE}?_token=${_token || token || ''}`)
+          } else {
+            this.$message.error('没有权限访问')
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    onMove (e) {
+      if (!e.relatedContext.element) return false
+      return true
+    },
+    systemMoveEnd (evt) {
+      this.systemDrag = false
+      const str = this.systemList.reduce((str, item, index) => (str += (item.ID) + ':' + index + ','), '')
+      this.$http.$post({
+        action: 'moveList',
+        entityId: this.$metaId,
+        orderString: str
+      })
+        .then(() => {
+          this.getSystemList()
+        })
+    },
+    moveEnd (system, e) {
+      const sysId = system.ID
+
+      // 获取其父节点的所有子节点orderString
+      // const str = arr.map(item => item.id).join(',')
+      const str = this.draggleApp[sysId].reduce((str, item, index) => (str += item.id + ':' + index + ','), '')
+      this.drag = false
+      this.$http.$post({
+        action: 'moveList',
+        entityId: 'FM_SERVICE',
+        orderString: str
+      })
+        .then(() => {
+
+        })
+        .catch(err => {
+          this.$message.error(err.message || '拖拽排序失败')
+          this.getSystemList()
+        })
+    },
+    async getAppTypeCodes () {
+      let options = this.getCodeById('FM_SERVICE_TYPE')
+      if (!options) {
+        await this.$store.dispatch({
+          type: 'ADD_LIST',
+          key: 'FM_SERVICE_TYPE'
+        })
+          .then(data => {
+            options = data
+          })
+      }
+      this.appTypeOptions = [{ name: '全部', code: '', id: 'all' }, ...options]
+    },
+    upload ({ file }) {
+      this.fileList = [file]
+    },
+    reupload () {
+      this.fileList = []
+      this.$refs.uploadBtn.click()
+    },
+    deleteFile () {
+      this.fileList = []
+    },
+    importSystem () {
+      const file = this.fileList[0]
+      if (this.loading) return
+      if (!file) {
+        this.$message.error('请先上传文件')
+        return
+      }
+      this.loading = true
+      this.$http.$post({
+        action: 'exportInSystemAndUpgrade',
+        entityId: 'FM_SYSTEM',
+        file: file
+      }, {
+        requestType: 'formData'
+      })
+        .then(data => {
+          this.loading = false
+          // this.success = true
+          this.$message.success('导入成功')
+        })
+        .catch((err) => {
+          this.loading = false
+          this.$message.error(err.message)
+        })
+    }
+  },
+  created () {
+    this.getAppTypeCodes()
+    this.getSystemList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box-card{
+  height: 100%;
+  box-sizing: border-box;
+  // padding: 20px;
+  border: 0;
+  display: flex;
+}
+.input-search{
+  width: 208px;
+  padding: 12px 16px;
+  // display: flex;
+  // align-items: center;
+  // justify-content: space-between;
+}
+.keywords{
+    width: 89px;
+    font-size: var(--epx-font-size-base);
+    color: #555;
+    text-align: right;
+}
+.box-header{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+.left-nav{
+  width: 240px;
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-base);
+  margin-right: 20px;
+}
+.nav-title{
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  line-height: 24px;
+  text-align: left;
+  font-weight: bold;
+  border-bottom: 1px solid var(--epx-border);
+}
+.left-nav-content{
+  height: calc(100% - 174px);
+  box-sizing: border-box;
+  padding-bottom: 20px;
+  overflow: auto;
+}
+.add-btn{
+  width: 240px;
+  height: 56px;
+  box-sizing: border-box;
+  padding: 10px;
+  box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.15);
+}
+.nav-item{
+  height: 48px;
+  line-height: 48px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+}
+.system-nav-item{
+  cursor: move;
+  padding-right: 10px;
+  color: var(--epx-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // i{
+  //   @include font_color_primary;
+  //   margin-right: 6px;
+  // }
+}
+.system-item-left{
+  width: calc(100% - 25px);
+  display: flex;
+  align-items: center;
+}
+.operate{
+  width: 20px;
+  visibility: hidden;
+}
+.system-nav-name{
+  font-size: var(--epx-font-size-base);
+  cursor: pointer;
+  display: inline-block;
+  max-width: calc(100% - 46px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.system-item-version{
+  display: inline-block;
+  //width: 40px;
+  margin-left: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--epx-font-size-s);
+  color: var(--epx-text);
+}
+.system-nav-item:hover{
+  @include bg_color_primary(0.1);
+  .operate{
+    visibility: visible;
+  }
+}
+.has-nav-container{
+  width: calc(100% - 260px);
+  // display: flex;
+}
+.system-app-search{
+  display: flex;
+  padding: 20px 0;
+}
+.app-input-search{
+  display: flex;
+  align-items: center;
+  margin-right: 30px;
+}
+.input-label{
+  font-size: var(--epx-font-size-base);
+  color: #555;
+  text-align: right;
+}
+.option-app-type-item{
+  margin-right: 20px;
+  cursor: pointer;
+  color: var(--epx-text);
+}
+.active-add-type{
+  color: #0874e7;
+  background-color: rgba(8, 116, 231, 0.1);
+  padding: 3px 6px;
+  border-radius: var(--epx-radius-base);
+}
+.system-container{
+  height: calc(100% - 80px);
+  box-sizing: border-box;
+  // padding: 20px 20px 0 0;
+  padding-right: 20px;
+  overflow: auto;
+}
+.system-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.system-item{
+  // cursor: move;
+  box-sizing: border-box;
+  background: var(--epx-bg-card);
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+  margin-bottom: 20px;
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+}
+
+.system-content{
+  // display: flex;
+  // align-items: center;
+
+}
+.system-header{
+  box-sizing: border-box;
+  padding: 0 20px;
+  height: 48px;
+  background: linear-gradient( 180deg, #F7FBFF 0%, #E5EEF8 100%);
+  border-radius: 4px 4px 0px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  i{
+    font-size: 13px;
+    @include font_color_primary;
+    margin-right: 5px;
+  }
+}
+.system-header-left{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.system-name{
+  font-weight: bold;
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  margin-right: 6px;
+}
+.delete-status{
+  margin-left: 20px;
+}
+.system-apps{
+  padding: 20px 0 0 20px;
+}
+.system-app-item{
+  cursor: move;
+  width: 245px;
+  height: 130px;
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-base);
+  border: 1px solid var(--epx-border);
+  margin-right: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 10px;
+  position: relative;
+}
+.system-app-item:hover{
+  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
+}
+.system-app-name{
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-bottom: 6px;
+}
+.system-setting{
+  @include font_color_primary;
+}
+.button-cursor{
+  cursor: pointer;
+}
+.system-app-dropdown-link {
+  cursor: pointer;
+  font-size: var(--epx-font-size-l);
+  text-align: center;
+  overflow: hidden;
+  border: 0;
+  outline: none;
+  &.active {
+    @include font_color_primary;
+  }
+}
+.el-icon-more{
+  font-size: var(--epx-font-size-l);
+}
+.system-app-status{
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.system-app-img{
+  width: 40px;
+  height: 40px;
+  margin: 10px auto;
+  >img {
+    width: 100%;
+    height: 100%;
+  }
+  i{
+    font-size: 24px;
+    line-height: 56px;
+    color: #fff;
+  }
+}
+.add-app{
+  cursor: pointer;
+  border: 1px dotted var(--epx-border);
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  line-height: 24px;
+  text-align: center;
+  padding-top: 46px;
+  padding-bottom: 40px;
+}
+.add-app-icon i{
+  font-size: 28px;
+  margin-bottom: 12px;
+}
+.no-data {
+  margin-top: 100px;
+  text-align: center;
+  color: var(--epx-text-secondary);
+  line-height: 1.1;
+  >i {
+    font-size: 120px;
+  }
+}
+.delete-system__text {
+  i {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-l);
+  }
+}
+.import-system-btn {
+  text-align: center;
+  margin-top: 10px;
+}
+</style>