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

package/src/views/client/AddForm.vue

@@ -0,0 +1,64 @@
+
+<script>
+import AddForm from '@epxing/components/src/add-form'
+export default {
+  name: 'epx-client-add-form',
+  extends: AddForm,
+  methods: {
+    getData () {
+      // 获取关联
+      const query = this.$query || (this.upPage ? this.updaPage.$query : {})
+      // const { id, defaultValue = {}, initData = {} } = query
+      const { defaultValue = {}, initData = {} } = query
+      const { link = '', queryParams = {} } = this.$configs
+      const params = {
+        entityId: this.$metaId,
+        // id: id
+        id: this.user.manageClientId
+      }
+      let linkArr = []
+      if (link) {
+        linkArr = link.split(',')
+      }
+      const { config = {} } = this.upPage.page || {}
+      const itemConfigs = config.itemConfigs || {}
+      const { id: compId } = this.$component
+      // 获取所有子集和配置
+      this.components.forEach(component => {
+        if (component.contentType === 'add-form-item') {
+          const itemConfig = itemConfigs[compId + '-' + component.id] || {}
+          const compConfig = { ...(component.configs || {}), ...itemConfig }
+          const { fields = [] } = compConfig
+          fields.forEach((field = '') => {
+            if ((field.attriName || field).includes('|')) {
+              const flag = (field.attriName || field).split('|')[0].toLowerCase()
+              if (!linkArr.includes(flag)) {
+                linkArr.push(flag)
+              }
+            }
+          })
+        }
+      })
+      // if (linkArr.length > 0) params.link = linkArr.join(',')
+      if (this.pageType === 'ADD') {
+        params.action = 'getDefault'
+        delete params.id
+      }
+
+      return this.$http.get({ ...params, ...queryParams })
+        .then(res => {
+          if (res.data) {
+            this.data = { ...initData, ...this.data, ...res.data }
+          }
+          if (defaultValue && this.pageType === 'ADD') {
+            this.data = { ...defaultValue, ...this.data }
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/views/client/AppMarket.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="container" :style="$component.style">
+    <div class="choose-market" v-if="$query.chooseMarket">
+      <span class="line">
+        <i class="el-icon-arrow-left" :style="{cursor: 'pointer'}" @click="backPage"></i>
+        第二步：选用第三方系统
+      </span>
+    </div>
+    <div class="search-container">
+      <epx-search-filter class="search" :fields="searchFields" :keywords="keywords" :showFilter="false" @search="search" @search-keyword="searchKeyWord"></epx-search-filter>
+    </div>
+    <div :class="$query.chooseMarket?'choose-market-system system-container':'system-container'">
+      <template v-if="systemList.length>0">
+        <div class="system-item" v-for="item in systemList" :key="item.ID" @click="clickSystem(item)">
+          <div class="system-item__header" :style="systemHeaderStyle(item)">
+            <i v-if="!item['SYSTEM|COVER']" class="system-item__icon el-icon-picture-outline"></i>
+          </div>
+          <div class="system-item__content">
+            <p class="system-item__title">{{item['SYSTEM|NAME']}}</p>
+            <p class="system-item__desc">{{item['SYSTEM|NOTE']}}</p>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="no-data">暂无数据~</div>
+      </template>
+      <el-dialog
+        v-model="viewComponentVisible"
+        width="960px"
+        class="dialog--noheader"
+      >
+        <div v-if="selectSystem">
+          <div class="system-view">
+            <div class="system-info">
+              <div class="system-info__icon" :style="{backgroundColor: selectSystem['SYSTEM|ICON_BG_COLOR']}">
+                <i :class="[selectSystem['SYSTEM|ICON'] || 'el-icon-s-platform']"></i>
+              </div>
+              <div class="system-info__content">
+                <p class="system-item__title">{{selectSystem['SYSTEM|NAME']}}</p>
+                <p class="system-item__desc">描述：{{selectSystem['SYSTEM|NOTE']}}</p>
+                <p class="system-item__desc">所属客户：{{selectSystem['SYSTEM|CLIENT#']}}</p>
+              </div>
+            </div>
+            <div class="system-btn">
+              <el-button type="primary" @click="copyItem(selectSystem)">选用此系统</el-button>
+            </div>
+          </div>
+          <el-carousel v-if="selectSystem['SYSTEM|PREVIEW_IMG']" class="system-carousel" height="460px" indicator-position="outside">
+            <el-carousel-item v-for="preview in systemPreviewList" :key="preview">
+              <div class="system-preview__img" :style="{backgroundImage: `url(${preview})`}"></div>
+            </el-carousel-item>
+          </el-carousel>
+          <div class="system-noimage" v-else>
+            <i class="epx-icon-color-kong"></i>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-client-app-market',
+  mixins: [component],
+  data () {
+    return {
+      systemList: [],
+      searchParams: {},
+      searchScopeParams: [],
+      client: '',
+      viewComponentVisible: false,
+      selectSystem: null,
+      searchKeyParams: {}
+    }
+  },
+  computed: {
+    searchFields () {
+      const { searchFields = [] } = this.$configs
+      return searchFields
+    },
+    keywords () {
+      const { keywords = [] } = this.$configs
+      return keywords
+    },
+    systemHeaderStyle () {
+      return system => {
+        const coverUrl = this.getFileUrl(system['SYSTEM|COVER'])
+        return system['SYSTEM|COVER'] ? { backgroundImage: `url(${coverUrl})` } : {}
+      }
+    },
+    systemPreviewList () {
+      const { 'SYSTEM|PREVIEW_IMG': previewImg = '' } = this.selectSystem || {}
+      return previewImg.split(',').map(item => this.getFileUrl(item))
+    }
+  },
+  methods: {
+    getFileUrl (id, client, flag = true) {
+      if (!id) return
+      if (id.includes('http')) return id
+      const { IP, BASE_PROJECT_NAME, BASE_CLIENT_ID } = window
+      const { CODE: clientCode = BASE_CLIENT_ID } = this.clientConfig
+      const { 'SYSTEM|DOMAIN|CONTEXT': domainContext } = this.appConfig
+      const projectName = domainContext || BASE_PROJECT_NAME
+      const baseUrl = IP ? `${IP}${projectName}/` : ''
+      const inter = `api/v1/frame/epxing-frame-manage/download?id=${id}`
+      let flieUrl = baseUrl + inter
+      // 与 utils/src/util.js 的 getFileUrl 同一处优先级问题：结尾 `|| ''` 被 `+` 抢先，
+      // 等价于 `(整串拼接) || ''`，而拼接恒为非空字符串 ⇒ 兜底从不生效，cookie 缺失时 URL 里
+      // 会出现字面量 `xsrf_token=undefined`。括号包住 $cookie.get 才是本意。
+      if (flag) flieUrl += '&token=' + (this.$util.getToken(clientCode) || '') + '&xsrf_token=' + (this.$cookie.get('xsrf_token') || '')
+      return flieUrl
+    },
+    clickSystem (system) {
+      this.viewComponentVisible = true
+      this.selectSystem = system
+    },
+    closeSystemDialog () {
+      this.viewComponentVisible = false
+      this.selectSystem = null
+    },
+    // 复制
+    copyItem (item) {
+      this.closeSystemDialog()
+      console.log(item)
+      const query = {
+        component: 'client-self-build-system',
+        metaId: 'FM_SYSTEM',
+        pageType: 'EDIT',
+        copyType: 'copy',
+        clientId: item['SYSTEM|CLIENT'],
+        NAME: item['SYSTEM|NAME'],
+        LOGO: item['SYSTEM|LOGO'],
+        CODE: item['SYSTEM|CODE'],
+        id: item.SYSTEM
+      }
+      this.$createPage(query)
+    },
+    viewDetail (id) {
+      const { detailPageId } = this.$configs
+      const query = {
+        flag: 'v_subadd',
+        component: 'entity-add-page',
+        pageType: 'DETAIL',
+        id,
+        metaId: 'FM_SYSTEM',
+        pageId: detailPageId
+        // metaId: this.$metaId
+      }
+      this.$createPage(query)
+    },
+    search (scopeParams, v) {
+      if (scopeParams) {
+        this.searchScopeParams = scopeParams
+      }
+      this.getSystemList()
+    },
+    searchKeyWord (searchKeyParams) {
+      this.searchKeyParams = searchKeyParams
+      this.getSystemList()
+    },
+    getSystemList () {
+      const { queryParams = {} } = this.$configs
+      const { INDUSTRY_TYPE } = this.clientConfig
+      const params = {
+        entityId: 'FM_APPLICATION_MARKET',
+        // 'scope.CLIENT': this.client
+        ...this.searchKeyParams,
+        ...this.$formatParams(queryParams),
+        link: 'system,system#client',
+        columnFieldNames: 'ID,STATUS#,SYSTEM,SYSTEM|ID#,SYSTEM|CLIENT#,SYSTEM|NAME#,SYSTEM|NOTE#,SYSTEM|PREVIEW_IMG#,SYSTEM|COVER#,SYSTEM|CODE,SYSTEM|LOGO,SYSTEM|ICON,SYSTEM|ICON_BG_COLOR'
+      }
+      let scopeParams = []
+      if (!INDUSTRY_TYPE || INDUSTRY_TYPE === 'universities') {
+        scopeParams = [
+          { lb: '(', field: 'SYSTEM|CLIENT|INDUSTRY_TYPE', mode: 'is_null', link: 'or' },
+          { field: 'SYSTEM|CLIENT|INDUSTRY_TYPE', values: 'universities', rb: ')' }
+        ]
+      } else {
+        scopeParams = [
+          { field: 'SYSTEM|CLIENT|INDUSTRY_TYPE', values: INDUSTRY_TYPE }
+        ]
+      }
+
+      if (this.searchScopeParams) {
+        scopeParams = [...scopeParams, ...this.searchScopeParams]
+      }
+      params.scopeParams = JSON.stringify(scopeParams)
+
+      this.$http.list({
+        ...params,
+        ...this.searchParams
+      })
+        .then(data => {
+          this.systemList = data.entitys
+        })
+    }
+  },
+  created () {
+    // this.client = this.$route.query.client
+    this.getSystemList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+    width: 100%;
+    height: 100%;
+}
+.choose-market{
+  padding: 18px 20px;
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  background-color: var(--epx-bg-card);
+  border-bottom: solid 1px var(--epx-border);
+}
+.line{
+    border-left: 4px solid #328ff0;
+    padding-left: 16px;
+}
+.search-container{
+  box-sizing: border-box;
+}
+
+.search-container{
+
+    :deep(.filter-content) {
+      background: none;
+    }
+    :deep(.mobile-filter-container) {
+      margin-bottom: 0;
+    }
+
+}
+.input-search{
+    height: 36px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 17px;
+}
+.keywords{
+    width: 110px;
+    font-size: var(--epx-font-size-base);
+    color: #555;
+    text-align: right;
+}
+.input-con{
+  width: 225px;
+  margin-left: 12px;
+}
+.filter-item {
+  display: flex;
+  align-items: flex-start;
+  color: var(--epx-text);
+}
+.filter-option-item {
+  padding: 0 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  &:hover, &.active {
+    @include font_color_primary;
+  }
+}
+.system-container{
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 66px;
+}
+.choose-market-system{
+  height: calc(100% - 220px);
+}
+.system-item{
+    box-sizing: border-box;
+    width: calc(33.3% - 20px);
+    margin: 10px;
+    background: var(--epx-bg-card);
+    font-size: var(--epx-font-size-base);
+    color: var(--epx-text);
+    cursor: pointer;
+    border-radius: var(--epx-radius-base);
+    overflow: hidden;
+    transition: all .5s;
+    &:hover {
+      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
+    }
+}
+
+.system-item__header {
+  width: 100%;
+  height: 200px;
+  background: #E2E4E8 no-repeat center;
+  background-size: cover ;
+  text-align: center;
+}
+.system-item__icon {
+  font-size: 48px;
+  line-height: 200px;
+  color: var(--epx-text-secondary);
+}
+.system-item__content {
+  padding: 10px 20px 20px;
+}
+
+.system-item__title {
+  font-size: 18px;
+  line-height: 1;
+  margin: 10px 0;
+  color: var(--epx-text);
+}
+.system-item__desc {
+  height: 40px;
+  line-height: 20px;
+  color: var(--epx-text);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.system-carousel {
+  margin-top: 20px;
+}
+
+.system-preview__img {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.system-noimage {
+  width: 100%;
+  height: 460px;
+  background: #F3F5FA;
+  text-align: center;
+  line-height: 460px;
+  margin-bottom: 10px;
+  >i {
+    font-size: 120px;
+  }
+}
+
+.system-view {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.system-info {
+  display: flex;
+}
+
+.system-info__icon{
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  margin-right: 24px;
+  text-align: center;
+  line-height: 56px;
+  flex-shrink: 0;
+  @include bg_color_primary;
+  i{
+    font-size: 24px;
+    color: #fff;
+    line-height: 56px;
+  }
+}
+
+.no-data{
+  text-align: center;
+  color:var(--epx-text);
+  padding-top: 20px;
+}
+</style>
+<style lang="scss">
+
+</style>

package/src/views/client/ClientIndex.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="container">
+    <el-card class="box-card no-last-box">
+        <template v-slot:header><div class="box-header">
+            <span>基础信息</span>
+        </div></template>
+        <div class="base-container">
+            <div v-for="item in baseList" :key="item.name" class="base-item">
+                <div class="base-num">{{item.num}}</div>
+                <div class="base-name">{{item.name}}</div>
+            </div>
+        </div>
+    </el-card>
+    <el-card class="box-card no-last-box">
+        <template v-slot:header><div class="box-header">
+            <span>应用系统管理</span>
+        </div></template>
+        <div>
+              <!-- 页面 -->
+            <ul class="application-list">
+                <li class="application-item" v-for="application in applicationList" :key="application.ID">
+                    <div class="application-module">
+                    <div class="module-inner">
+                        <i :class="['module-icon', application.ICON || 'el-icon-s-platform']"></i>
+                        <span class="module-text">{{application.NAME}}</span>
+                    </div>
+                    <div class="module-operates">
+                        <span @click="openDefaultApp(application)">打开</span>
+                        <span @click="openSettingPage(application)">配置</span>
+                        <el-dropdown>
+                        <span class="el-dropdown-link">
+                            <i class="el-icon-more" ></i>
+                        </span>
+                        <template v-slot:dropdown><el-dropdown-menu>
+                            <!-- <el-dropdown-item @click="openDefaultApp(application)">打开默认应用</el-dropdown-item> -->
+                            <el-dropdown-item @click="editApplication(application)">编辑</el-dropdown-item>
+                            <el-dropdown-item @click="deleteApplication(application)">删除</el-dropdown-item>
+                        </el-dropdown-menu></template>
+                        </el-dropdown>
+                    </div>
+                    </div>
+                </li>
+                <li class="application-item add-application" >
+                    <!-- <div class="module-add" @click="addApplication"> -->
+                    <div class="module-add">
+                    <div class="module-inner">
+                        <i :class="['module-icon', 'el-icon-circle-plus']"></i>
+                        <span class="module-text">添加应用</span>
+                    </div>
+                    <div class="module-operates-two">
+                        <span @click.stop="chooseApplication()">选用</span>
+                        <span @click.stop="addApplication()">创建</span>
+                    </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </el-card>
+    <el-card class="box-card">
+        <template v-slot:header><div class="box-header">
+            <span>全局设置</span>
+        </div></template>
+        <div class="global-container">
+            <div class="global-item">
+                <i class="el-icon-s-operation" style="color:#328ff0"></i>
+                <span>单位基本信息</span>
+            </div>
+            <div class="global-item">
+                <i class="el-icon-s-operation" style="color:#fe6f45"></i>
+                <span>数据源管理</span>
+            </div>
+        </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      baseList: [
+        {
+          name: '机构',
+          num: '56'
+        },
+        {
+          name: '岗位',
+          num: '56'
+        },
+        {
+          name: '用户',
+          num: '56'
+        }
+      ],
+      applicationList: [
+        {
+          ID: '23212',
+          NAME: '平台管理'
+        },
+        {
+          ID: '123455',
+          NAME: '招聘管理'
+        }
+      ]
+    }
+  },
+  methods: {
+    openDefaultApp () {
+
+    },
+    openSettingPage () {
+
+    },
+    editApplication () {
+
+    },
+    deleteApplication () {
+
+    },
+    chooseApplication () {
+
+    },
+    addApplication () {
+
+    }
+  },
+  created () {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+.no-last-box{
+    margin-bottom: 25px;
+}
+.box-header{
+    font-size: var(--epx-font-size-l);
+    color: var(--epx-text);
+}
+.base-container{
+    display: flex;
+}
+.base-item{
+    flex: 1;
+    height: 88px;
+    text-align: center;
+    border-right: 1px solid var(--epx-border);
+    color: var(--epx-text);
+    cursor: pointer;
+}
+.base-item:last-child{
+    border-right: none;
+}
+.base-num{
+    padding: 3px 0;
+    // margin-bottom: 11px;
+    font-size: 30px;
+}
+.base-name{
+    font-size: var(--epx-font-size-base);
+}
+.global-container{
+    display: flex;
+}
+.global-item{
+    width: 300px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding-left: 30px;
+    background-color: #f6f6f8;
+    border-radius: 6px;
+    margin-right: 30px;
+    cursor: pointer;
+    i{
+        font-size: 55px;
+        margin-right: 23px;
+    }
+}
+.application-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.application-item {
+  width: 16%;
+  min-width: 200px;
+  box-sizing: border-box;
+  height: 188px;
+//   padding:  20px;
+  margin-bottom: 20px;
+  position: relative;
+}
+.application-module {
+  position: absolute;
+  width: 180px;
+  left: 50%;
+  margin-left: -90px;
+  height: auto;
+  &:hover {
+    box-shadow: 1px 2px 5px rgba(21, 21, 21, 0.1);
+
+  }
+}
+.application-module:hover .module-operates {
+  display: flex;
+}
+.add-application {
+  cursor: pointer;
+  .application-module {
+    &:hover {
+      box-shadow: none;
+    }
+  }
+  .module-icon {
+    color: var(--epx-text-secondary);
+  }
+}
+.module-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+}
+.module-icon {
+  @include font_color_primary;
+  font-size: 86px;
+  line-height: 1;
+  margin-bottom: 16px;
+}
+.module-operates {
+  display: none;
+  width: 100%;
+  background-color: #f6f9fb;
+  &>span, .el-dropdown {
+    flex: 1;
+    line-height: 50px;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+.module-add:hover .module-operates-two {
+  display: flex;
+}
+.module-operates-two {
+  display: none;
+  width: 100%;
+  background-color: #f6f9fb;
+  &>span, .el-dropdown {
+    flex: 1;
+    line-height: 50px;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+</style>