epx-frame 3.5.0-shpgy.1

package/src/frame/components/form/File.vue

@@ -0,0 +1,415 @@
+<template>
+  <div >
+    <van-field class="field" :label="$isMobile? attriLabel : ''">
+      <template slot="input">
+        <div v-if="editable">
+          <ul class="upload-list">
+            <li class="upload-item" v-if="fileName">
+              <span>{{ fileName }}</span>
+              <i class="el-icon-view view" @click="preview"></i>
+              <i class="el-icon-refresh reupload" @click="reupload"></i>
+              <i class="el-icon-delete delete" @click="deleteFile"></i>
+            </li>
+          </ul>
+          <el-upload ref="upload" class="upload" action="#" :show-file-list="false" :on-change="change">
+            <el-button
+              size="small"
+              plain
+              :style="{ display: fileName ? 'none' : '' }"
+              ref="uploadBtn"
+            >点击上传</el-button>
+          </el-upload>
+        </div>
+        <p v-else>
+          <a class="file" href="#" @click.prevent="preview">
+            {{
+             label
+            }}
+          </a>
+        </p>
+      </template>
+    </van-field>
+    <el-dialog
+      custom-class="dialog"
+      :visible.sync="dialogVisible"
+      :fullscreen="$isMobile || fullscreen"
+      :show-close="false"
+      :class="{fullsreenSty:fullscreen}"
+      width="60%"
+    >
+      <div class="dialog-title" slot="title">
+        <p class="fl">{{label}}</p>
+        <p class="fr" v-if="fileId">
+          <i v-if="type === 'img'" class="el-icon-refresh-right" @click="rotate += 90"></i>
+          <i v-if="showDownload" class="el-icon-download" @click="download"></i>
+          <i class="el-icon-full-screen" v-if="!$isMobile" @click="fullscreen = !fullscreen"></i>
+          <i class="el-icon-printer" v-if="!$isMobile" v-print="'#printcon'+fileId"></i>
+          <!-- <i class="el-icon-printer" @click="printContext"></i> -->
+          <i class="el-icon-close" @click="dialogVisible = false"></i>
+        </p>
+      </div>
+      <!-- <div ref="printcon"> -->
+      <div :id="'printcon'+fileId">
+        <img
+          v-if="type === 'img'"
+          class="preview-img"
+          :style="{ transform: `rotate(${rotate}deg)` }"
+          :src="Url"
+        />
+        <!-- <div v-else-if="type==='pdf'" style="width:100%;height:60vh;overflow:auto;">
+          <div v-for="i in numPages" :key="i">
+              <service-pdf :src="Url" :page='i' width="100%" height="100%"></service-pdf>
+          </div>
+        </div> -->
+        <el-card class="file-card" v-loading="loading"  shadow="never" :body-style="{ padding: '0px' }" v-else-if="type === 'pdf'">
+          <canvas v-for="page in numPages" :ref="'canvas' + page" :key="page"></canvas>
+          <!-- <canvas v-for="page in numPages" :id="'canvas' + page" :key="page"></canvas> -->
+        </el-card>
+        <!-- <div v-else style="width:100%;height:100%;">
+          <iframe :src="'http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc='+Url" frameborder="0" class="iframeSty"></iframe>
+        </div> -->
+        <div v-else style="width:100%;height:100%;">
+          <iframe :src="csUrl" frameborder="0" class="iframeSty"></iframe>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-form-file',
+  props: {
+    fieldConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    values: {
+      type: Object
+    }
+  },
+  components: {
+    // servicePdf: pdf
+  },
+  data () {
+    return {
+      fileName: this.label,
+      dialogVisible: false,
+      showDownload: true,
+      fullscreen: false,
+      rotate: 0,
+      fileInfo: {},
+      fileId: '',
+      fileType: '',
+      type: '',
+      pdfUrl: '',
+      Url: '',
+      width: 100,
+      pdfDoc: null,
+      numPages: 0,
+      loading: true,
+      csUrl: ''
+    }
+  },
+  computed: {
+    attriName () {
+      const { attriName } = this.fieldConfig
+      return attriName
+    },
+    attriLabel () {
+      const { attriLabel } = this.fieldConfig
+      return attriLabel
+    },
+    editable () {
+      const { state = 'DETAIL' } = this.fieldConfig
+      return state === 'ADD' || state === 'EDIT' || state === 'SEARCH'
+    },
+    photo () {
+      const value = this.value
+      return value
+        ? this.$util.getFileUrl(value)
+        : require('@/assets/images/staff.png')
+    },
+    value: {
+      get () {
+        const attriName = this.attriName
+        return this.values ? this.values[attriName] : this.formModel[attriName]
+      },
+      set (v) {
+        if (this.values) {
+          this.$emit('update-value', { [this.attriName]: v, [this.attriName + '#']: v.name })
+        }
+        this.$set(this.formModel, [this.attriName], v)
+        this.$set(this.formModel, [this.attriName + '#'], v.name)
+      }
+    },
+    label: {
+      get () {
+        const attriName = this.attriName + '#'
+        return this.values ? this.values[attriName] : this.formModel[attriName]
+      }
+    }
+  },
+  inject: {
+    formModel: {
+      default () {
+        const attriName = this.attriName
+        const defaultValue = {
+          [attriName]: ''
+        }
+        return defaultValue
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler (v) {
+        if (v) {
+          this.getFile(v)
+        }
+      },
+      immediate: true
+    },
+    label (v) {
+      if (v) {
+        this.fileName = v
+      }
+    }
+  },
+  methods: {
+    printContext () {
+      this.$print(this.$refs.printcon)
+    },
+    change (file) {
+      if (file) {
+        this.value = file.raw
+        this.fileName = file.name
+        this.fileType = file.raw.type
+        this.Url = URL.createObjectURL(file.raw)
+      }
+    },
+    preview () {
+      if (this.fileType.includes('image')) {
+        this.dialogVisible = true
+        this.type = 'img'
+      } else if (this.fileType.includes('pdf')) {
+        this.dialogVisible = true
+        this.type = 'pdf'
+        this.pdfjs.getDocument(this.pdfUrl).promise.then((pdf) => {
+          this.pdfDoc = pdf
+          this.numPages = this.pdfDoc.numPages
+          this.$nextTick(() => {
+            this.renderPage(1)
+          })
+        })
+      } else {
+        // this.dialogVisible = true
+        window.open(this.csUrl)
+      }
+    },
+    /*
+    * 渲染PDF文件
+    * */
+    renderPage (num) {
+      this.pdfDoc.getPage(num)
+        .then((page) => {
+          const canvas = this.$refs['canvas' + num][0]
+          // const canvas = document.getElementById('canvas' + num)
+          const ctx = canvas.getContext('2d')
+          // let dpr = window.devicePixelRatio || 1 // 设备像素比
+          // let bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 // 浏览器在渲染canvas之前会用几个像素来来存储画布信息,类似img
+          // let ratio = dpr / bsr
+          // const viewport = page.getViewport(1.5)//里面为对象
+          var viewport = page.getViewport({ scale: 1.5 })
+          const viewportElem = document.querySelector('meta[name=viewport]')
+          viewportElem.setAttribute('content', 'width=device-width')
+          canvas.width = viewport.width // 画布大小,默认值是width:300px,height:150px
+          canvas.height = viewport.height
+          canvas.style.width = '100%' // 画布的框架大小
+          const renderContext = {
+            canvasContext: ctx,
+            viewport: viewport
+          }
+          page.render(renderContext)
+          if (this.numPages > num) {
+            this.loading = false
+            this.renderPage(num + 1)
+          } else {
+            this.loading = false
+            // this.closeServerLoadingHandle()
+          }
+        })
+    },
+    reupload () {
+      this.$refs.uploadBtn.$el.click()
+    },
+    deleteFile () {
+      this.value = ''
+      this.fileName = ''
+    },
+    download () {
+      window.location.href = this.$util.getFileUrl(
+        this.value
+      )
+    },
+    getFile (id) {
+      if (!id) return
+      if (this.isRequest) return
+      this.isRequest = true
+      this.$http.get({
+        entityId: 'FM_FILE',
+        id
+      })
+        .then(data => {
+          this.isRequest = false
+          if (data && data.data) {
+            this.fileInfo = data.data
+            this.fileId = data.data.ID
+            this.fileType = data.data.TYPE
+            this.fileName = data.data.NAME
+            if (this.fileType.includes('image')) {
+              this.Url = this.$util.getFileUrl(id)
+            } else if (this.fileType.includes('pdf')) {
+              this.pdfUrl = this.$util.getFileUrl(id)
+            } else {
+              this.csUrl = this.$util.getFileUrl(id)
+            }
+          }
+        })
+    }
+  },
+  created () {
+    // 获取文件信息
+    import(/* webpackChunkName:"pdfjs" */'pdfjs-dist')
+      .then(pdf => {
+        this.pdfjs = pdf
+        pdf.disableWorker = true
+        pdf.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdf.version}/pdf.worker.js`
+      })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.file {
+  @include font_color_primary;
+}
+.upload-item {
+  font-size: 14px;
+  color: #333;
+  span {
+    margin-right: 16px;
+  }
+  i {
+    @include font_color_primary;
+    padding: 0 8px;
+    border-right: 1px solid #e3e3e3;
+    cursor: pointer;
+  }
+  .delete {
+    color: #ef1f2e;
+    border: none;
+  }
+}
+.upload {
+  display: flex;
+  &::v-deep {
+    .el-upload__tip {
+      margin-left: 12px;
+      margin-top: 0;
+    }
+    .el-button{
+      @include font_color_primary;
+      @include border_color_primary;
+    }
+  }
+}
+.dialog-title {
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 54px;
+  border-bottom: 1px solid #e3e3e3;
+  font-size: 16px;
+  p:last-child {
+    color: #666;
+  }
+  i {
+    font-size: 18px;
+    margin-left: 12px;
+    cursor: pointer;
+  }
+}
+.preview-img {
+  transition: all 0.5s;
+  transform: rotate(0);
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+}
+#printcon{
+  width: 100%;
+  height: 100%;
+}
+.file-card{
+  border: none;
+  width:100%;
+}
+.iframeSty{
+  width:100%;
+  height:100%;
+}
+@media screen and (min-width: 992px){
+  .field {
+    padding: 0;
+    line-height: inherit;
+    background: transparent;
+    &::after {
+      display: none;
+    }
+    &::v-deep {
+      .van-cell {
+        background: transparent;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.dialog {
+  .el-dialog__header {
+    padding: 0;
+  }
+  .el-dialog__body{
+    height: 65vh;
+  }
+  &.is-fullscreen .el-dialog__body{
+    height: calc(100% - 56px);
+    box-sizing: border-box;
+  }
+}
+
+// 去除之后PDF文档内容格式发送变化  空白页
+@page {
+  margin: 0;
+}
+@media print {
+  // html,body{
+  //   height: inherit;
+  // }
+  // .file-card{
+  //   // height:100% !important;
+  //   width: 100% !important;
+  // }
+  // .iframeSty{
+  //   // height:100% !important;
+  //   width: 100% !important;
+  // }
+  // #printcon {
+  //   width: 100% !important;
+  // }
+}
+</style>

package/src/frame/components/form/FormItem.vue

@@ -0,0 +1,128 @@
+<template>
+  <epx-form-hidden v-if="fieldConfig.state==='HIDDEN'" :fieldConfig="fieldConfig"></epx-form-hidden>
+  <el-col v-else :md="span" :span="mspan" :key="fieldConfig.attriName" :style="fieldConfig.style" >
+    <!-- <epx-form-field :fieldConfig="fieldConfig"  v-if="fieldConfig.dataType==='photo'"  /> -->
+    <el-form-item class="form-item"  :label="$isMobile || !showLabel?'': `${fieldConfig.attriLabel}：`" :prop="fieldConfig.attriName"
+     :rules="fieldConfig.isRequired==='1' && fieldConfig.state!=='SEARCH'?[
+        { required: true, message: `${fieldConfig.attriLabel}不能为空`},
+    ]: []">
+    <epx-form-field :fieldConfig="fieldConfig"  />
+      <slot name="field-item"></slot>
+    </el-form-item>
+     <!-- 注释说明 -->
+      <div class="notes" v-if="notes && (fieldConfig.state==='ADD' || fieldConfig.state==='EDIT')">
+        <span>{{notes}}</span>
+      </div>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'epx-form-item',
+  props: {
+    fieldConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    column: {
+      type: String,
+      default: '2'
+    },
+    type: {
+      type: String,
+      default: 'ADD'
+    },
+    search: {
+      type: Function
+    }
+  },
+  computed: {
+    span () {
+      const column = this.column === 'auto' ? 2 : this.column
+      const { dataType, state } = this.fieldConfig
+      if (((dataType === 'textarea' || dataType === 'bigtext') && state !== 'SEARCH') || dataType === 'file' || dataType === 'blob' || dataType === 'html') {
+        return 24
+      }
+      return 24 / column
+    },
+    mspan () {
+      const column = this.mcolumn === 'auto' ? 1 : this.mcolumn
+      return 24 / (column || 1)
+    },
+    notes () {
+      const { notes = '' } = this.fieldConfig.attribute || {}
+      return notes
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .form-item {
+    &::v-deep {
+      &.el-form-item {
+        display: flex;
+        margin: 8px 0;
+      }
+      .el-form-item__label {
+        flex-shrink: 0;
+        padding-right: 4px;
+        white-space: pre-wrap;
+      }
+      .el-form-item__content {
+        display: flex;
+        flex: 1;
+        // flex-wrap: wrap;
+        // overflow: hidden;
+        line-height: 36px;
+      }
+      .el-form-item__error{
+        top: 88%;
+      }
+      .el-input {
+        width: 220px;
+      }
+    }
+  }
+  .notes {
+    color: #c9cfd5;
+    white-space: pre-wrap;
+    line-height: 1.4;
+    margin-top: 8px;
+  }
+@media screen and(max-width: 992px){
+  .form-item {
+    display: flex;
+    &::v-deep {
+      &.el-form-item {
+        padding: 0;
+        margin: 0;
+      }
+      .van-field {
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          bottom: 0;
+          box-sizing: border-box;
+          padding: 0 16px;
+          width: calc(100% - 32px);
+          height: 1px;
+          background: #ebedf0;
+          transform: scaleY(0.5);
+        }
+      }
+      .el-input {
+        width: auto;
+        flex: 1;
+      }
+    }
+  }
+}
+</style>

package/src/frame/components/form/Hidden.vue

@@ -0,0 +1,77 @@
+
+<template>
+  <span></span>
+</template>
+<script>
+export default {
+  name: 'epx-form-hidden',
+  props: {
+    fieldConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  computed: {
+    attriName () {
+      const { attriName } = this.fieldConfig
+      return attriName
+    },
+    attriLabel () {
+      const { attriLabel } = this.fieldConfig
+      return attriLabel
+    },
+    editable () {
+      const { state = 'DETAIL' } = this.fieldConfig
+      return state === 'ADD' || state === 'EDIT' || state === 'SEARCH'
+    },
+    placeholder () {
+      const { placeholder = '请输入' } = this.fieldConfig
+      return placeholder
+    },
+    defaultValue () {
+      const { value } = this.fieldConfig
+      return value
+    },
+    value: {
+      get () {
+        const attriName = this.attriName
+        const fieldValue = this.fieldValue ? this.fieldValue : this.values ? this.values[attriName] : this.formModel[attriName]
+        return fieldValue || this.defaultValue
+      },
+      set (v) {
+        if (this.values) {
+          this.$emit('update-value', { [this.attriName]: v, [this.attriName + '#']: v })
+          this.$emit('update:values', { ...this.values, [this.attriName]: v, [this.attriName + '#']: v })
+        }
+        this.$emit('update:field', v)
+        this.$set(this.formModel, [this.attriName], v)
+        this.$set(this.formModel, [this.attriName + '#'], v)
+      }
+    }
+  },
+  inject: {
+    formModel: {
+      // 函数式组件取值不一样
+      default () {
+        const attriName = this.attriName
+        const defaultValue = {
+          [attriName]: ''
+        }
+        return defaultValue
+      }
+    },
+    search: {
+      default: () => null
+    }
+  },
+  created () {
+    if (this.defaultValue) this.value = this.defaultValue
+  }
+}
+</script>
+
+<style>
+
+</style>