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

package/src/base/ClientSystemList.vue

@@ -0,0 +1,435 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import EntityList from '@epxing/components/src/entity-list'
+// 通用空状态。原来这里直接写死 `epx-entity-card-list__null-data` —— 那是 EntityList 的 BEM 类，
+// 本文件是 <style scoped> 且从不定义它，纯属借用别人的样式。
+import EpxEmpty from '@epxing/components/src/empty/Empty.vue'
+import { captureRef } from '@epxing/core/src/capture-ref'
+export default {
+  name: 'epx-base-client-system-list',
+  extends: EntityList,
+  data () {
+    return {
+      showImportSystemDialog: false,
+      fileList: [],
+      importLoading: false,
+      confirmDelete: false
+    }
+  },
+  columnOperates: [
+    {
+      text: '进入配置中心',
+      handler: 'openSystemConfig',
+      showCondition: [
+        {
+          field: 'SYSTEM_TYPE',
+          mode: 'not_equal',
+          values: 'out'
+        }
+      ]
+    },
+    {
+      text: '系统详情',
+      handler: 'systemDetail'
+    },
+    {
+      text: '删除',
+      handler: 'removeSystem',
+      showCondition: [
+        {
+          lb: '',
+          field: 'CODE',
+          mode: 'not_equal',
+          values: 'epxing-frame',
+          rb: '',
+          linkLabel: '',
+          'values#': ''
+        }
+      ]
+    }
+  ],
+  methods: {
+    systemDetail (config, item) {
+      const { detailPage: metaPageId } = this.$meta
+      const { detailPageFlag, detailPageId, addPageFlag, detailPage, detailFlag: configDetailFlag, openMode, detailPageParams = {} } = this.$configs
+      const { params: detailParams = {}, pageId, openMode: detailOpenMode = openMode, detailFlag = configDetailFlag } = config
+      if (!detailFlag) return
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      const _params = { ...detailPageParams, ...detailParams }
+      if (!item) {
+        if (this.selection.length > 1) {
+          this.$message.error(this.$t('Do not select multiple records'))
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        }
+        item = this.selection[0]
+      }
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      const formatParams = this.$formatParams(_params, item)
+      const query = {
+        metaId: this.$metaId,
+        flag: detailPageFlag || addPageFlag,
+        component: detailPage,
+        pageId: pageId || detailPageId || metaPageId,
+        pageType: this.readonly ? 'READONLY' : 'DETAIL',
+        id: item[key],
+        openType: detailOpenMode,
+        ...formatParams
+      }
+      if (this.$isMobile) delete query.openType
+      this.$createPage({
+        ...query
+      })
+    },
+    viewEntity (config, item) {
+      if (item.SYSTEM_TYPE === 'out') {
+        this.systemDetail(config, item)
+      } else {
+        this.openSystemConfig(config, item)
+      }
+    },
+    renderCardList () {
+      const { pageFlag, column = 3 } = this.$configs
+      return (
+        <div class="epx-entity-card-list__content">
+          <el-checkbox-group class="card-checkbox-group" v-model={this.selectionIds}>
+            <draggable
+              class="epx-entity-card-list__list "
+              tag="ul"
+              list={this.data}
+              ghost-class="ghost"
+              onEnd={this.moveList}
+            >
+              {
+                !this.loading && this.data.length === 0 ? (
+                  <EpxEmpty />
+                )
+                  : this.data.map(item => (
+                    <div class={{ 'out-system': item.SYSTEM_TYPE === 'out' }} style={{ 'flex-basis': (1 / column).toFixed(4) * 100 + '%', overflow: 'hidden' }}>{this.renderVerticalItem(item)}</div>
+                  ))
+              }
+            </draggable>
+          </el-checkbox-group>
+          {/* 空状态 */}
+          {
+            pageFlag && (
+              <div class="epx-entity-list__pagination epx-entity-list__pagination--card">
+                <el-pagination
+                  currentPage={this.currentPage}
+                  pageSizes={[5, 10, 15, 20, 30, 50, 100, 200]}
+                  pageSize={this.pageSize}
+                  layout="prev, pager, next, jumper, sizes,total"
+                  total={this.total}
+                  onSizeChange={this.sizeChange}
+                  onCurrentChange={this.currentChange}
+                >
+                </el-pagination>
+              </div>
+            )
+          }
+        </div>
+      )
+    },
+    moveList () {
+      let { orderFields = [], order_field: orderField = [] } = this.$configs
+      if (orderFields && orderFields.length > 0) {
+        orderField = orderFields.map(item => item.attriName || item)
+      }
+      const str = this.data.reduce((str, item, index) => (str += (item[this.$metaKey]) + ':' + index + ','), '')
+      this.$http.$post({
+        action: 'moveList',
+        entityId: this.$metaId,
+        beforeOrderString: this.beforeOrderString,
+        orderString: str,
+        orderAtrriName: orderField.join(',')
+      })
+        .then(() => {
+          this.reloadData()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.reloadData()
+        })
+    },
+    getManageService (id) {
+      return this.$http.get({
+        action: 'hasMangeService',
+        entityId: 'FM_USER',
+        querySystem: id || this.appConfig.ID
+      })
+    },
+    changeConfirmDelete () {
+      setTimeout(() => {
+        const checkbox = this.$refs.delCheckbox.$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="delCheckbox" 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.reloadData()
+            }).catch(err => {
+              this.$message.error(err.message)
+            })
+        }
+      })
+    },
+    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)
+        })
+    },
+    upload ({ file }) {
+      this.fileList = [file]
+    },
+    reupload () {
+      this.fileList = []
+      this.$refs.uploadBtn.click()
+    },
+    deleteFile () {
+      this.fileList = []
+    },
+    importSystem () {
+      const file = this.fileList[0]
+      if (this.importLoading) return
+      if (!file) {
+        this.$message.error('请先上传文件')
+        return
+      }
+      this.importLoading = true
+      this.$http.$post({
+        action: 'exportInSystemAndUpgrade',
+        entityId: 'FM_SYSTEM',
+        file: file
+      }, {
+        requestType: 'formData'
+      })
+        .then(data => {
+          this.importLoading = false
+          this.fileList = []
+          // this.success = true
+          this.$message.success('导入成功')
+          this.reloadData()
+        })
+        .catch((err) => {
+          this.importLoading = false
+          this.$message.error(err.message)
+        })
+    },
+    renderImportDialog () {
+      return (
+        <el-dialog
+          title="导入系统"
+          modelValue={this.showImportSystemDialog}
+          onUpdate:modelValue={(v) => { this.showImportSystemDialog = v }}
+          append-to-body
+          destroy-on-close
+          width="560px"
+        >
+          <epx-alert text="温馨提示：通过导入配置包的方式直接创建系统"></epx-alert>
+          <el-upload
+            class="epx-import__upload"
+            drag
+            limit={1}
+            action=""
+            http-request={this.upload}
+            file-list={this.fileList}
+            v-slots={{
+              file: ({ file }) => {
+                return (
+                  <div class="epx-import__file">
+                    <span>{file.name }</span>
+                    <i>|</i>
+                    <i class="el-icon-refresh " onClick={this.reupload.bind(this, file.ID, file.uid)}></i>
+                    <i>|</i>
+                    <i class="el-icon-delete epx-import__delete" onClick={this.deleteFile.bind(this, file)}></i>
+                  </div>
+                )
+              }
+            }}
+          >
+            <img src={require('@/assets/images/import.png')} />
+            <div class="epx-import__upload-text el-upload__text">
+              <div ref={captureRef(this, 'uploadBtn')}>{this.$t('Drag the file here, or')}<em>{this.$t('Click on the upload')}</em></div>
+            </div>
+
+          </el-upload>
+          <div class="import-system-btn">
+            <el-button type="primary" loading={this.importLoading} onClick={this.importSystem}>导入系统</el-button>
+          </div>
+        </el-dialog>
+      )
+    },
+    openImportSystemDialog () {
+      this.showImportSystemDialog = true
+    },
+    renderCardColumnOperates (item) {
+      if (this.readonly) return null
+      const { columnOperateType = 'text', operateColumnShowType = 'always' } = this.$configs
+      const showColumnOperates = this.getShowColumnOperates(item)
+      const foldColumnOperates = this.getFoldColumnOperates(showColumnOperates)
+      const unfoldColumnOperates = this.getUnFoldColumnOperates(showColumnOperates)
+      return (
+        <div class={['epx-entity-card-list__item-operates', 'epx-entity-card-list__item-operates--' + columnOperateType, 'epx-entity-card-list__item-operates--' + operateColumnShowType]} onClick={e => e.stopPropagation()}>
+          {
+            unfoldColumnOperates.map(operate => {
+              if (operate.operateType === 'dropdown') {
+                return (
+                  <el-dropdown trigger="click" class="epx-entity-card-list__column-dropdown" v-slots={{
+                    dropdown: () => (<el-dropdown-menu>
+                      {
+                        (operate.operates || []).map(dropdownItem => (
+                          <el-dropdown-item key={dropdownItem.key} onClick={() => this.$handler(dropdownItem, item)}>{dropdownItem.text}</el-dropdown-item>
+                        ))
+                      }
+                    </el-dropdown-menu>)
+                  }}>
+                    <el-button type="primary" link size="default" key={operate.text} >
+                      { operate.icon && <i class={['epx-entity-list__operate-icon', operate.icon]}></i>}
+                      {operate.text}
+                      <i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+
+                  </el-dropdown>
+                )
+              }
+              return (
+                <el-button
+                  class="epx-entity-card-list__column-operate"
+                  key={operate.text}
+                  type={columnOperateType === 'text' ? 'text' : operate.ui }
+                  size="default"
+                  onClick={() => this.$handler(operate, item)}
+                >
+                  { operate.iconCls && <i class={operate.iconCls}></i>}
+                  {operate.text}
+                </el-button>
+              )
+            })
+          }
+          {
+            foldColumnOperates.length > 0 && (
+              <el-dropdown class="epx-entity-card-list__column-operate" trigger="click" style={{ paddingRight: 0 }} onVisibleChange={(show) => (this.activeDropDown = show ? item[this.$metaKey] : '')} v-slots={{
+                dropdown: () => (<el-dropdown-menu>
+                  {
+                    foldColumnOperates.map(operate => {
+                      return (
+                        <el-dropdown-item key={operate.text} onClick={() => this.$handler(operate, item)} icon={operate.iconCls}>
+                          {operate.text}
+                        </el-dropdown-item>
+                      )
+                    })
+                  }
+                </el-dropdown-menu>)
+              }}>
+                <span class={['epx-entity-list__dropdown-link--card', { 'is-active': this.activeDropDown === item[this.$metaKey] }]}>
+                  {
+                    columnOperateType === 'text' ? <i class="el-icon-setting"></i> : (
+                      <el-button size="default">
+                        <i class="el-icon-setting"></i>
+                      </el-button>
+                    )
+                  }
+                </span>
+
+              </el-dropdown>
+            )
+          }
+        </div>
+      )
+    }
+  },
+  mounted () {
+    this.renderComponents.push(this.renderImportDialog)
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.import-system-btn {
+  text-align: center;
+  margin-top: 10px;
+}
+.out-system {
+
+    :deep(.epx-entity-card-list__item-container) {
+      position: relative;
+      overflow: hidden;
+      &::after {
+        position: absolute;
+        top: 8px;
+        right: -14px;
+        font-size: 10px;
+        width: 60px;
+        text-align: center;
+        display: block;
+        content: '外部';
+        color: #EB6600;
+        background: #FFE8CA;
+        transform: rotate(45deg);
+      }
+    }
+
+}
+</style>