epx-frame 3.5.0-shpgy.1

package/src/frame/components/AttributeList.vue

@@ -0,0 +1,612 @@
+<template>
+  <div class="container">
+    <el-card class="attribute-list">
+      <div slot="header" class="clearfix">
+          <span>{{$t('field list')}}</span>
+          <el-button style="float: right; padding: 3px 0" type="text" icon="epx-icon-menu" @click="layout=layout==='list'? 'card': 'list'">{{layout==='list'? $t('card layout'): $t('list layout')}}</el-button>
+      </div>
+      <div class="attribute-operate">
+        <div class="button-group">
+          <el-button type="primary" @click="addAttribute()">{{$t('add')}}</el-button>
+          <el-button @click="removeEntity">{{$t('delete')}}</el-button>
+          <el-button @click="entityImport">{{$t('import')}}</el-button>
+          <el-button @click="entityExport">{{$t('export')}}</el-button>
+        </div>
+        <el-input class="search" v-model="searchKey" size="medium" suffix-icon="el-icon-search" :placeholder="$t('please enter your search content')" @change="search"></el-input>
+      </div>
+      <draggable
+        v-if="layout==='card'"
+        v-loading="loading"
+        class="card-list"
+        v-model="data"
+        tag="ul"
+        v-bind="dragOptions"
+        @start="drag = true"
+        @end="moveEnd"
+      >
+        <li :class="['card-item', { active:  form.ID===item.ID }]" v-for="item in data" :key="item.ID" @click="setAttribute(item)">
+          <p class="card-title">
+            <span class="attribute-title">{{item.LABEL}} </span>
+            <el-tag class="tag" size="small" v-if="item.IS_REQUIRED==='1'" type="danger">{{$t('required')}}</el-tag>
+            <el-tag class="tag" size="small" v-if="item.IS_KEY==='1'" type="success">{{$t('physics a primary key')}}</el-tag>
+            <el-tag class="tag" size="small" v-if="item.BUSI_KEY==='1'">{{$t('natrual key')}}</el-tag>
+            <el-tag class="tag" size="small" v-if="item.IS_LABEL==='1'" type="warning">{{$t('external label')}}</el-tag>
+          </p>
+          <p class="card-desc">
+            <span>{{$t('serial number')}}：{{item.NAME}}</span>
+            <span>{{$t('type')}}：{{item['DATA_TYPE#']}}</span>
+          </p>
+          <i class="delete-icon el-icon-close" @click="removeEntity({}, item)"></i>
+        </li>
+      </draggable>
+      <el-checkbox-group v-model="checkList" v-else>
+        <table class="table"  v-loading="loading">
+          <div class="tr th">
+            <div class="td"></div>
+            <div class="td"  @click.stop><el-checkbox label="all" @change="checkAll">{{''}}</el-checkbox></div>
+            <div class="td">{{$t('numerical order')}}</div>
+            <div class="td">{{$t('name')}}</div>
+            <div class="td">{{$t('serial number')}}</div>
+            <div class="td">{{$t('type')}}</div>
+            <div class="td">{{$t('association object')}}/{{$t('associated code table')}}</div>
+            <div class="td"></div>
+          </div>
+          <draggable
+            v-model="data"
+            tag="tbody"
+            v-bind="dragOptions"
+            @start="drag = true"
+            @end="moveEnd"
+          >
+            <div :class="['tr', {'active': form.ID===item.ID }]" v-for="(item, index) in data" :key="item.ID" @click="setAttribute(item)">
+              <div class="td handler-container">
+                <i class="handle el-icon-rank"></i>
+              </div>
+              <div class="td"><el-checkbox :label="item.ID">{{''}}</el-checkbox></div>
+              <div class="td">{{index + 1}}</div>
+              <div class="td">{{item.LABEL}}</div>
+              <div class="td">{{item.NAME}}</div>
+              <div class="td">{{item['DATA_TYPE#']}}</div>
+              <div class="td">
+                <template  v-if="['list', 'object', 'multiobject', 'user', 'dept'].includes(item.DATA_TYPE)">
+                  {{item.DATA_TYPE==='list'? item['CODE_KEY#'] : item['RELATED_ENTITY#']}}
+                </template>
+              </div>
+              <div class="tags td">
+                <el-tag size="medium" v-if="item.IS_REQUIRED==='1'" type="danger">{{$t('required')}}</el-tag>
+                <el-tag size="medium" v-if="item.IS_KEY==='1'" type="success">{{$t('physics a primary key')}}</el-tag>
+                <el-tag size="medium" v-if="item.BUSI_KEY==='1'">{{$t('natrual key')}}</el-tag>
+                <el-tag size="medium" v-if="item.IS_LABEL==='1'" type="warning">{{$t('external label')}}</el-tag>
+              </div>
+            </div>
+          </draggable>
+        </table>
+       </el-checkbox-group>
+    </el-card>
+    <el-card class="attribute-tabs" v-if="showAttribute">
+      <el-tabs v-model="activeTab">
+        <el-tab-pane :label="$t('basic information')" name="base">
+          <epx-attribute-table-form v-if="baseFields.length>0" class="form-content" ref="baseForm" :meta="$meta" :metaId="parentId" :fieldsConfigs="baseFields"  v-model="form" :column="1">
+            <template v-slot:default="{showLabel, fieldConfigs, metaId, ruleMetaId }">
+              <epx-table-form-item
+                v-if="fieldConfigs.attriName==='FORMAT1'"
+                :show-label="showLabel"
+                :label="fieldConfigs.attriLabel"
+                :metaId="metaId"
+                :ruleMetaId="ruleMetaId"
+                :fieldConfigs="fieldConfigs"
+                :rules="[{
+                  required: fieldConfigs.isRequired==='1' && fieldConfigs.state!=='SEARCH',
+                  message: `${fieldConfigs.attriLabel}不能为空`
+                }]"
+              >
+                <el-select></el-select>
+              </epx-table-form-item>
+              <epx-table-form-item
+                v-else
+                :show-label="showLabel"
+                :label="fieldConfigs.attriLabel"
+                :metaId="metaId"
+                :ruleMetaId="ruleMetaId"
+                :fieldConfigs="fieldConfigs"
+                :rules="[{
+                  required: fieldConfigs.isRequired==='1' && fieldConfigs.state!=='SEARCH',
+                  message: `${fieldConfigs.attriLabel}不能为空`
+                }]"
+              >
+              </epx-table-form-item>
+            </template>
+          </epx-attribute-table-form>
+           <div class="form-button__group">
+            <el-button size="medium" type="primary" :loading="httpRequest && !isContinue" @click="saveAttribute">{{$t('save')}}</el-button>
+            <el-button size="medium" type="primary" :loading="httpRequest && isContinue" @click="saveAttribute(true)">{{$t('save and continue')}}</el-button>
+            <el-button size="medium" @click="showAttribute=false">{{$t('cancel')}}</el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('style')" name="style">
+          <epx-table-form v-if="styleFields.length>0" class="form-content" ref="styleForm" :meta="$meta" :fieldsConfigs="styleFields" v-model="form" :column="1"></epx-table-form>
+           <div class="form-button__group">
+            <el-button size="medium" type="primary" :loading="httpRequest && !isContinue" @click="saveAttribute">{{$t('save')}}</el-button>
+            <el-button size="medium" type="primary" :loading="httpRequest && isContinue" @click="saveAttribute(true)">{{$t('save and continue')}}</el-button>
+            <el-button size="medium" @click="showAttribute=false">{{$t('cancel')}}</el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('higher')" name="third">
+          <epx-table-form v-if="advanceFields.length>0" class="form-content" ref="advanceForm" :meta="$meta" :ruleMetaId="$query.id" :fieldsConfigs="advanceFields" v-model="form" :column="1"></epx-table-form>
+           <div class="form-button__group">
+            <el-button size="medium" type="primary" :loading="httpRequest && !isContinue" @click="saveAttribute">{{$t('save')}}</el-button>
+            <el-button size="medium" type="primary" :loading="httpRequest && isContinue" @click="saveAttribute(true)">{{$t('save and continue')}}</el-button>
+            <el-button size="medium" @click="showAttribute=false">{{$t('cancel')}}</el-button>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="attribute-close" @click="showAttribute=false">
+        <i class="el-icon-close"></i>
+      </el-button>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import EntitySubList from '@/frame/packages/entity-sub-list'
+export default {
+  name: 'epx-attribute-list',
+  extends: EntitySubList,
+  queryParams: {
+    sort: 'ORDER_NUM'
+  },
+  relationId: 'attri',
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      drag: false,
+      activeTab: 'base',
+      baseFields: [],
+      styleFields: [],
+      advanceFields: [],
+      form: {},
+      defaultValue: {},
+      showAttribute: false,
+      searchKey: '',
+      checkList: [],
+      layout: 'list',
+      httpRequest: false,
+      isContinue: false
+    }
+  },
+  computed: {
+    dragOptions () {
+      return {
+        animation: 200,
+        group: 'description',
+        disabled: false,
+        ghostClass: 'ghost'
+      }
+    }
+  },
+  watch: {
+    checkList (v) {
+      const check = v.filter(item => item !== 'all')
+      if (check.length === this.data.length && !v.includes('all')) {
+        this.checkList.push('all')
+      }
+    },
+    'form.RELATED_ENTITY' (v) {
+      const controlIndex = this.advanceFields.findIndex(item => item.attriName === 'OBJECT_SCOPE')
+      if (controlIndex !== -1) {
+        this.advanceFields.splice(controlIndex, 1, { ...this.advanceFields[controlIndex], metaId: v, modeType: ['FIXED_VALUE', 'SYSTEM_VARIABLE', 'FIELD_VALUE', 'DYNAMIC_VALUE', 'DEFINED'] })
+      }
+    },
+    'form.RELY_ATTRI' (v) {
+      if (!v) {
+        // this.$set(this.form, 'OBJECT_SCOPE', null)
+        // this.$set(this.form, 'RELY_CONDITION', null)
+      }
+    },
+    'form.RELY_TYPE' (v) {
+      if (v === 'select' || v === 'value') {
+        this.$set(this.form, 'OBJECT_SCOPE', null)
+        this.$set(this.form, 'RELY_CONDITION', null)
+      } else if (v === 'scope') {
+        this.$set(this.form, 'RELY_CONDITION', null)
+      } else if (v === 'show') {
+        this.$set(this.form, 'OBJECT_SCOPE', null)
+      }
+    },
+    'form.IS_TREE' (v) {
+      if (!v) return
+      if (v === '1') {
+        this.$set(this.form, 'OBJECT_WAY', 'option')
+      } else {
+        this.$set(this.form, 'OBJECT_WAY', 'dialog')
+      }
+    }
+  },
+  methods: {
+    getAddFieldConfigs () {
+      const { baseFields = [], styleFields = [], advanceFields = [] } = this.$configs
+      this.$FieldFactory.createFields({
+        meta: this.$meta,
+        metaId: this.$metaId,
+        pageType: 'EDIT',
+        fields: [...baseFields, ...styleFields, ...advanceFields]
+      })
+        .then(data => {
+          // 设置范围设置对象
+          data.forEach(item => {
+            if (item.attriName === 'RELY_ATTRI') {
+              item.scopeParams = [
+                {
+                  field: 'ENTITY_ID',
+                  values: this.$query.id
+                }
+              ]
+            } else if (item.attriName === 'OBJECT_SCOPE') {
+              item.fieldValueMetaId = this.$query.id
+            }
+          })
+
+          this.baseFields = data.filter(item => baseFields.find(field => item.attriName === (field.attriName || field)))
+          this.styleFields = data.filter(item => styleFields.find(field => item.attriName === (field.attriName || field)))
+          this.advanceFields = data.filter(item => advanceFields.find(field => item.attriName === (field.attriName || field)))
+        })
+    },
+    getDefaultValue () {
+      this.$http.get({
+        action: 'getDefault',
+        entityId: 'FM_ATTRIBUTE'
+      })
+        .then(data => {
+          this.defaultValue = {
+            ...this.defaultValue,
+            ...data.data
+          }
+        })
+    },
+    setAttribute (item) {
+      this.$http.get({
+        entityId: this.$metaId,
+        id: item.ID
+      })
+        .then(data => {
+          this.form = { ...data.data }
+          this.showAttribute = false
+          this.$nextTick(() => {
+            this.showAttribute = true
+          })
+        })
+    },
+    addAttribute () {
+      this.getOrderNum()
+        .then(data => {
+          this.form = { ...this.defaultValue, ORDER_NUM: data.orderNum }
+          this.showAttribute = false
+          this.$nextTick(() => {
+            this.showAttribute = true
+          })
+        })
+    },
+    afterData (data) {
+      this.getAddFieldConfigs()
+    },
+    checkAll (flag) {
+      if (flag) {
+        const dataKeys = this.data.map(item => item[this.$metaKey])
+        this.checkList = ['all', ...dataKeys]
+      } else {
+        this.checkList = []
+      }
+    },
+    moveEnd (evt) {
+      this.drag = false
+      const { newIndex } = evt
+      const item = this.data[newIndex]
+      this.$http.save({
+        action: 'drogSort',
+        entityId: 'FM_ATTRIBUTE',
+        attributeId: item.ID,
+        orderNum: newIndex + 1
+      })
+    },
+    saveAttribute (con) {
+      // 获取数据
+      const formData = {}
+      let submitFlag = true
+      const forms = [
+        { form: this.$refs.baseForm, fieldConfigs: this.baseFields },
+        { form: this.$refs.styleForm, fieldConfigs: this.styleFields },
+        { form: this.$refs.advanceForm, fieldConfigs: this.advanceFields }
+      ]
+      forms.forEach(({ form, fieldConfigs }) => {
+        if (form) {
+          form.validate((valid, err) => {
+            if (!valid) {
+              for (const key in err) {
+                const errMessgae = err[key][0]
+                this.$message.error(errMessgae.message)
+                submitFlag = false
+                return
+              }
+            }
+          })
+          for (const field in form.model.data) {
+            if (!field.includes('#')) {
+              const formValue = form.model.data[field]
+              let submitValue = formValue
+              const fieldConfig = fieldConfigs.find(item => item.attriName === field) || {}
+              if (Array.isArray(formValue)) {
+                submitValue = formValue[formValue.length - 1]
+              }
+              formData[fieldConfig.name || `bean.${field}`] = submitValue || ''
+            }
+          }
+        }
+      })
+      if (!submitFlag) return
+      this.submitForm(formData, con)
+    },
+    search (key) {
+      this.searchKeyParams = {
+        keywordFields: 'NAME,LABEL',
+        keywordValue: this.searchKey
+      }
+    },
+    submitForm (formData, con) {
+      const params = {
+        action: formData['bean.ID'] ? 'update' : 'save',
+        entityId: this.$metaId,
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        [`bean.${this.linkAttrData}`]: this.parentId,
+        ...formData
+      }
+      if (this.httpRequest) return
+      this.isContinue = con === true
+      this.httpRequest = true
+      this.$http.save(params)
+        .then(data => {
+          this.$message.success(this.$t('save successfully'))
+          this.httpRequest = false
+
+          this.getData()
+          if (con === true) {
+            // 继续添加
+            this.addAttribute()
+          } else {
+            this.showAttribute = false
+            this.form = {}
+          }
+        })
+        .catch(err => {
+          this.httpRequest = false
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    },
+    removeEntity (config, row) {
+      let ids = ''
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      if (row) {
+        ids = [row[key]]
+      } else {
+        if (this.checkList.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        }
+        ids = this.checkList.filter(item => item !== 'all')
+      }
+
+      this.$confirm(this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: ids.join(',')
+          })
+            .then(() => {
+              this.$message.success(this.$t('deleted successfully'))
+              this.checkList = []
+              this.getData()
+            })
+            .catch(err => {
+              this.$message.error(err.message || this.$t('Delete failed'))
+            })
+        })
+        .catch(() => {})
+    },
+    getOrderNum () {
+      const { id: upparentId } = this.upPage.$query
+      const { id: parentId = upparentId } = this.$query
+      return this.$http.get({
+        action: 'getNextOrderNum',
+        entityId: 'FM_ATTRIBUTE',
+        parentId
+      })
+    },
+    entityExport () {
+      const { queryParams = {} } = this.$configs
+      const params = {
+        ...this.$formatParams(queryParams),
+        ...this.queryParams
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.$createPage({
+        metaId: this.$metaId,
+        component: 'export-page', // 默认模板 epx-export + component
+        flag: 'v_export',
+        selects: this.checkList.join(',').replaceAll('all,', ''),
+        total: this.total,
+        params,
+        field: this.listFields
+      })
+    }
+  },
+  created () {
+    this.getDefaultValue()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px 0;
+}
+.attribute-list {
+  flex: 1;
+  margin-right: 20px;
+  max-height: 100%;
+  overflow: auto;
+}
+.table {
+  width: 100%;
+  display: table;
+  font-size: 14px;
+}
+.tr {
+  display: table-row;
+  border-bottom: 1px solid #DCDFE6;
+  &:hover, &.active {
+    @include bg_color_primary(.2)
+  }
+}
+.td {
+  display: table-cell;
+  height: 50px;
+  line-height: 50px;
+  color: #666;
+}
+.th {
+  .td {
+    color: #333;
+    font-weight: 600;
+  }
+}
+.attribute-operate {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.search {
+  width: 200px;
+}
+.handler-container {
+  width: 20px;
+}
+.handle {
+  display: none;
+}
+.tr:hover {
+  .handle {
+    // display: inline;
+  }
+}
+.flip-list-move {
+  transition: transform 0.5s;
+}
+.no-move {
+  transition: transform 0s;
+}
+.ghost {
+  opacity: 0.5;
+  @include bg_color_primary(.2)
+}
+.tags {
+  &::v-deep {
+    .el-tag {
+      margin-right: 10px;
+    }
+  }
+}
+.tag {
+   margin-left: 10px;
+}
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.card-item {
+  width: calc(33% - 20px);
+  min-width: 310px;
+  margin: 10px;
+  box-sizing: border-box;
+  padding: 10px 16px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  line-height: 1;
+  cursor: pointer;
+  position: relative;
+  &:hover, &.active {
+    .delete-icon {
+      display: block;
+    }
+    @include bg_color_primary(.2);
+    @include border_color_primary;
+  }
+}
+.attribute-title {
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: bold;
+  position: relative;
+  bottom: -2px;
+}
+.card-desc {
+  margin-top: 10px;
+  span {
+    margin-right: 20px;
+    color: #444;
+  }
+}
+.delete-icon {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  font-size: 16px;
+  color: #666;
+  margin-top: -8px;
+  cursor: pointer;
+  display: none;
+}
+.attribute-tabs {
+  width: 426px;
+  overflow: auto;
+  position: relative;
+  &::v-deep {
+    .el-card__body {
+      padding: 0;
+      height: 100%;
+    }
+    .el-tabs {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .el-tabs__content {
+      flex: 1;
+      padding-bottom: 30px;
+      overflow: auto;
+    }
+  }
+}
+.attribute-close {
+  position: absolute;
+  top: -2px;
+  right: 10px;
+  font-size: 16px;
+}
+.form-button__group {
+  width: 100%;
+  text-align: center;
+  margin-top: 20px;
+}
+
+</style>

package/src/frame/components/Banner.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="banner">
+      <el-carousel height="150px">
+      <el-carousel-item v-for="item in 2" :key="item">
+        <!-- <img ref="img" class="img" src="@/assets/images/index/业务申报一站式办理.png" /> -->
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-banner'
+}
+</script>
+
+<style scoped>
+.banner {
+  margin-bottom: 20px;
+}
+.img {
+  width: 100%;
+  height: 100%;
+}
+</style>