epx-frame 3.5.0-shpgy.1

package/src/frame/views/client/StandardProduct.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="container">
+    <div class="search-container">
+      <epx-search-filter :fields="searchFields" :showFilter="false" @search="search"></epx-search-filter>
+      <div class="create-btn">
+      <el-button type="text" @click="createProduct">+创建产品</el-button>
+      </div>
+    </div>
+    <div class="system-container">
+      <template v-if="systemList.length>0">
+        <div class="system-item" v-for="item in systemList" :key="item.ID">
+            <div class="left-container">
+              <div class="left-img">
+                <i class="el-icon-s-platform"></i>
+              </div>
+              <div class="left-conent">
+                <div class="line-one">{{item.NAME}} <span :class="['one-right',item.STATUS==='1'?'yishangxian':item.STATUS==='3'?'shenhezhong':'weitijiao']">{{item['STATUS#']}}</span> </div>
+                <div class="line-two">{{item['SERVER_TAG#']}}</div>
+                <div class="line-three">
+                  {{item['BRIEF_INTRODUCTION#']}}
+                </div>
+              </div>
+              <div></div>
+            </div>
+            <div class="operate">
+              <!-- <el-button type="primary" class="ope-edit" @click="goPage(item.ID,'EDIT')">编辑</el-button>
+              <el-button @click="goPage(item.ID,'DETAIL')">详情</el-button> -->
+              <el-dropdown v-if="columnOperates.length>0" class="more-table-operates"  trigger="click" @click.native="dropdownHandler($event,item.ID)">
+                <span :class="['el-dropdown-link',{'active': activeDropDown===item.ID}]">
+                  <i class="el-icon-more"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <template v-for="operates in columnOperates">
+                    <el-dropdown-item :key="operates.text"  @click.native="$handler(operates,item)">{{operates.text}}</el-dropdown-item>
+                  </template>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="no-data">暂无数据~</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-client-stand-product',
+  mixins: [component],
+  data () {
+    return {
+      systemList: [],
+      searchParams: {},
+      searchScopeParams: [],
+      client: '',
+      system: '',
+      activeDropDown: ''
+    }
+  },
+  computed: {
+    searchFields () {
+      const { searchFields = [] } = this.$configs
+      return searchFields
+    },
+    keywords () {
+      const { keywords = [] } = this.$configs
+      return keywords
+    },
+    columnOperates () {
+      const { columnOperates = [] } = this.$configs
+      return columnOperates
+    }
+  },
+  methods: {
+    dropdownHandler (e, id) {
+      e.stopPropagation()
+      this.activeDropDown = id
+    },
+    createProduct () {
+      const query = {
+        flag: 'v_subadd',
+        component: 'sub-add',
+        pageType: 'ADD',
+        metaId: this.$metaId,
+        fieldConfigs: { SYSTEM: { value: this.system, state: 'HIDDEN' }, CLIENT: { value: this.client, state: 'HIDDEN' } },
+        // defaultValue: { CLIENT: this.client, SYSTEM: this.system },
+        callback: this.getSystemList
+      }
+      this.$createPage(query)
+    },
+    editItem (button, item) {
+      const query = {
+        flag: 'v_subadd',
+        component: 'sub-add',
+        pageType: 'EDIT',
+        id: item.ID,
+        metaId: this.$metaId,
+        callback: this.getSystemList
+      }
+      this.$createPage(query)
+    },
+    detailItem (button, item) {
+      const query = {
+        flag: 'v_subadd',
+        component: 'sub-add',
+        pageType: 'DETAIL',
+        id: item.ID,
+        metaId: this.$metaId
+      }
+      this.$createPage(query)
+    },
+    removeItem (button, item) {
+      this.$confirm('确认删除？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: item.ID
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.getSystemList()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+    },
+    // goPage (id, pageType) {
+    //   const query = {
+    //     flag: 'v_subadd',
+    //     component: 'sub-add',
+    //     pageType,
+    //     id,
+    //     metaId: this.$metaId
+    //   }
+    //   if (pageType === 'EDIT') {
+    //     query.callback = this.getSystemList
+    //   }
+    //   this.$createPage(query)
+    // },
+    search (scopeParams) {
+      if (scopeParams) {
+        this.searchScopeParams = scopeParams
+      }
+      this.getSystemList()
+    },
+    getSystemList () {
+      const { queryParams = {} } = this.$configs
+      const params = {
+        entityId: this.$metaId,
+        // 'scope.CLIENT': this.client,
+        ...this.$formatParams(queryParams),
+        columnFieldNames: 'NAME,SERVER_TAG#,BRIEF_INTRODUCTION#,DETAILS,STATUS#'
+      }
+      if (this.searchScopeParams) {
+        params.scopeParams = JSON.stringify(this.searchScopeParams)
+      }
+      this.$http.list({
+        ...params,
+        ...this.searchParams
+      })
+        .then(data => {
+          this.systemList = data.entitys
+        })
+    }
+  },
+  created () {
+    this.client = this.user.manageClientId
+    this.system = this.appConfig.SYSTEM
+    this.getSystemList()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+    width: 100%;
+    height: 100%;
+}
+.search-container{
+  box-sizing: border-box;
+  // height: 128px;
+  background-color: #fefefe;
+  // box-shadow: 0px 0px 8px 0px rgba(56, 63, 98, 0.17);
+  border-bottom: solid 1px #e3e3e3;
+  // margin-bottom: 22px;
+  padding: 22px 22px 0;
+}
+.search-container::v-deep .mobile-filter-container{
+  margin-bottom: 0;
+}
+.create-btn{
+  padding-left: 18px;
+  margin-bottom: 10px;
+}
+.input-search{
+    height: 36px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 17px;
+}
+.keywords{
+    width: 110px;
+    font-size: 14px;
+    color: #555;
+    text-align: right;
+}
+.input-con{
+  width: 225px;
+  margin-left: 12px;
+}
+.filter-item {
+  display: flex;
+  align-items: flex-start;
+  color: #333333;
+}
+.filter-option-item {
+  padding: 0 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  &.active {
+    @include font_color_primary;
+  }
+  // &:hover, &.active {
+  //   @include font_color_primary;
+  // }
+}
+.system-container{
+  // max-height: calc(100vh - 360px);
+  min-height: 66px;
+  // overflow: auto;
+  background-color: #fefefe;
+  // box-shadow: 0px 0px 8px 0px rgba(56, 63, 98, 0.17);
+  // border: solid 1px #e3e3e3;
+}
+.system-item{
+    box-sizing: border-box;
+    height: 150px;
+    border-bottom: 1px solid #e3e3e3;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 23px 50px 30px 26px;
+    font-size: 14px;
+    color: #666;
+}
+.system-item:hover{
+    background-color: #f9f8f8;
+}
+.left-container{
+  display: flex;
+  align-items: center;
+}
+.left-img{
+  width: 86px;
+  height: 86px;
+  line-height: 86px;
+  margin-right: 36px;
+  i{
+    font-size: 86px;
+    @include font_color_primary;
+  }
+}
+.line-one{
+  font-size: 16px;
+  color: #333;
+}
+.line-two{
+  font-size: 14px;
+  color: #666;
+  margin: 16px 0;
+}
+.line-three{
+  font-size: 14px;
+  color: #666;
+}
+.one-right{
+  margin-left: 38px;
+}
+.yishangxian{
+  color: #96bc78;
+}
+.weitijiao{
+  color: #999;
+}
+.shenhezhong{
+  color: #3591f0;
+}
+.operate{
+  display: flex;
+  flex-direction: column;
+}
+.ope-edit{
+  margin-bottom: 13px;
+}
+.operate .el-button{
+    margin-left: 0;
+}
+.no-data{
+  text-align: center;
+  color:#333;
+  padding-top: 20px;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  text-align: center;
+  line-height: 30px;
+  overflow: hidden;
+  border: 0;
+  outline: none;
+  margin-left: 6px;
+  &.active {
+    @include bg_color_primary( 0.1);
+  }
+}
+.el-icon-more{
+  font-size: 20px;
+}
+</style>

package/src/frame/views/client/SystemList.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="system-manage">
+    <p class="system-title">请选择要配置的系统</p>
+    <ul class="app-card__list">
+      <li class="app-card__item" v-for="system in systemList" :key="system.ID" @click="openSystemConfig(system)">
+        <span class="app-card__prefix" :style="{backgroundColor: system.COLOR}">
+          <i :class="['app-card__icon fa', system.ICON || 'el-icon-menu']"></i>
+        </span>
+        <span class="app-card__name">{{system.NAME}}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-client-system-list',
+  data () {
+    return {
+      systemList: [],
+      configModule: null,
+      manageRight: {}
+    }
+  },
+  methods: {
+    getManageService (id) {
+      return this.$http.get({
+        action: 'hasMangeService',
+        entityId: 'FM_USER',
+        querySystem: id || this.appConfig.ID
+      })
+    },
+    getConfigModule () {
+      const { moduleId } = this.$tab
+      let { roleId, role } = this.$route.params
+      if (!roleId) {
+        const { roles = {} } = this.user
+        const currentRole = Object.entries(roles).find(([key, item]) => item.CODE === role) || []
+        roleId = currentRole[0]
+      }
+
+      this.$http.getMenuData({
+        action: 'getMenuTreeData',
+        moduleId: moduleId,
+        roleId
+      })
+        .then(data => {
+          this.configModule = data[0]
+        })
+    },
+    openSystemConfig (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.$cookie.get((clientCode || client) + '-token')
+            window.open(`#/system/${system['CLIENT|CODE']}/${system.CODE}?_token=${token || ''}`)
+          } else {
+            this.$message.error('没有权限访问')
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+
+      // if (this.configModule) {
+      //   this.$createPage({
+      //     pageId: this.configModule.MAIN_PAGE,
+      //     moduleId: this.configModule.ID,
+      //     SYSTEM: system.ID,
+      //     CLIENT: this.user.client,
+      //     // openType: '1',
+      //     name: this.configModule.NAME,
+      //     title: this.configModule.NAME
+      //   })
+      // }
+    }
+  },
+  created () {
+    this.$http.list({
+      entityId: 'FM_SYSTEM',
+      link: 'client',
+      'scope.CLIENT': this.user.client
+    })
+      .then(data => {
+        this.systemList = data.entitys
+        this.getConfigModule()
+      })
+    this.getManageService()
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.system-manage {
+  background: #fff;
+}
+.system-title {
+  font-size: 18px;
+  line-height: 40px;
+  padding: 0 24px;
+}
+.app-card__list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 12px;
+  min-height: 100px;
+}
+.app-card__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 12px;
+  width: calc(25% - 24px);
+  height: 100px;
+  box-sizing: border-box;
+  padding: 20px;
+  background: #f8f8f8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  &:hover {
+    .app-card__suffix {
+      display: block;
+    }
+  }
+}
+.app-card__prefix {
+  display: inline-block;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  @include bg_color_primary;
+  margin-right: 16px;
+  text-align: center;
+}
+.app-card__icon {
+  display: inline;
+  font-size: 24px;
+  color: #fff;
+  line-height: 56px;
+}
+.app-card__suffix {
+  display: none;
+  position: absolute;
+  right: 12px;
+  >i {
+    font-size: 16px;
+    color: #999
+  }
+  .app-card__suffix--select {
+    font-size: 20px;
+    color: #F2970E;
+  }
+}
+</style>