doway-coms 1.1.52 → 1.1.55

package/packages/BasePagination/src/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+      <Pagination
+        show-quick-jumper
+        :current="currentPage"
+        size="small"
+        show-size-changer
+        @showSizeChange="onShowSizeChange"
+        :total="totalRows"
+        :page-size-options="pageSizeOptions"
+        :defaultPageSize="pageSize"
+        style="margin-top: 10px;"
+        @change="onPageChange"
+        :show-total="total => `总共 ${totalRows} 条`"
+      />
+    </div>
+  </template>
+  <script>
+   import { Pagination } from 'ant-design-vue'
+  export default {
+    components: {
+        Pagination
+    },
+    name: 'BasePagination',
+    data() {
+      return {}
+    },
+    props: {
+      pageSizeOptions: {
+        type: Array,
+        default: function() {
+          return ['50', '100', '150', '200']
+        }
+      },
+      totalRows: {
+        type: Number,
+        default: function() {
+          return 0
+        }
+      },
+      currentPage: {
+        type: Number,
+        default: function() {
+          return 0
+        }
+      },
+      pageSize: {
+        type: Number,
+        default: function() {
+          return 0
+        }
+      }
+    },
+    watch: {},
+    created() {},
+    methods: {
+      onPageChange(current, pageSize) {
+        if (current === 0) {
+          current = 1
+        }
+        this.$emit('pageChange', current, pageSize)
+      },
+      onShowSizeChange(current, pageSize) {
+        if (current === 0) {
+          current = 1
+        }
+        this.$emit('pageSizeChange', current, pageSize)
+      }
+    }
+  }
+  </script>
+<style lang="less">
+@import  '../../styles/default.less';
+</style>

package/packages/BasePictureCard/index.js

@@ -0,0 +1,8 @@
+// 导入组件，组件必须声明 name
+import BasePictureCard from './src/index.vue';
+// 为组件提供 install 安装方法，供按需引入
+BasePictureCard.install = function(Vue) {
+    Vue.component(BasePictureCard.name, BasePictureCard);
+};
+// 默认导出组件
+export default BasePictureCard;

package/packages/BasePictureCard/src/index.vue

@@ -0,0 +1,580 @@
+<template>
+  <div style="display: inline-block">
+    <div class="file-card">
+      <div
+        class="attach-wrapper"
+        v-for="internalRow in internalRows.filter(
+          x => x.sysRowState != 'delete'
+        )"
+        :key="internalRow.attach.fileName"
+      >
+        <template v-if="internalRow.sysRowState !== sysRowState.delete">
+          <div class="attach" v-if="internalRow.attach.content === 'image'">
+            <img
+              @click="attachFileClick(internalRow.attach)"
+              :style="{ width: width, height: height, lineHeight: height }"
+              style="
+                border: 1px solid #ccc;
+                border-radius: 6px;
+                overflow: hidden;
+                margin: 0;
+                padding: 0;
+              "
+              :src="
+                `${internalServiceUrl}/GetAttachFile/${internalRow.attach.id}?accessToken=${$store.getters.token}`
+              "
+            />
+            <i
+              class="el-icon-error attach-delete"
+              v-if="edit === true"
+              @click="removeAttach(internalRow.attach)"
+            ></i>
+            <i
+              class="el-icon-download attach-download"
+              @click="downloadAttach(internalRow.attach)"
+            ></i>
+            <i
+              class="el-icon-view attach-view"
+              @click="viewAttach(internalRow.attach)"
+            ></i>
+            <VxeCheckbox
+              class="attach-circle"
+              v-model="internalRow.isDefault"
+              @change="circleAttach(internalRow.attach, internalRow)"
+              :disabled="formState == 'view'"
+            ></VxeCheckbox>
+          </div>
+          <div class="attach" v-else>
+            <img
+              @click="attachFileClick(internalRow.attach)"
+              class="o_image"
+              :data-mimetype="internalRow.attach.contentType"
+            />
+            <i
+              class="el-icon-error attach-delete"
+              v-if="edit === true"
+              @click="removeAttach(internalRow.attach)"
+            ></i>
+            <i
+              class="el-icon-download attach-download"
+              @click="downloadAttach(internalRow.attach)"
+            ></i>
+            <i
+              class="el-icon-view attach-view"
+              @click="viewAttach(internalRow.attach)"
+            ></i>
+            <VxeCheckbox
+              class="attach-circle"
+              v-model="internalRow.isDefault"
+              @change="circleAttach(internalRow.attach, internalRow)"
+              :disabled="formState == 'view'"
+            ></VxeCheckbox>
+          </div>
+          <div
+            :style="{ width: width }"
+            :title="internalRow.attach.name"
+            style="
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            "
+          >
+            {{ internalRow.attach.name }}
+          </div>
+        </template>
+      </div>
+      <a-upload
+        class="avatar-uploader"
+        :headers="uploadHeaders"
+        :action="uploadData.picAction"
+        :data="uploadData"
+        v-if="edit === true"
+        :on-success="handleAvatarSuccess"
+        :show-file-list="false"
+        :before-upload="beforeAvatarUpload"
+      >
+        <div
+          style="border: 1px solid #d9d9d9; border-radius: 6px"
+          :style="{ width: width, height: height, lineHeight: height }"
+        >
+          <i
+            class="el-icon-plus avatar-uploader-icon"
+            style="text-align: center"
+            :style="{ width: width, height: height, lineHeight: height }"
+          ></i>
+        </div>
+      </a-upload>
+      <div v-if="edit !== true && showEmptyText && internalRows.length === 0">
+        没有附件信息哦，请编辑添加附件信息
+      </div>
+    </div>
+    <VxeModal
+      v-model="dialogVisible"
+      show-zoom
+      transfer
+      resize
+      destroy-on-close
+      :fullscreen="isFullscreen || dialogViewType == 'application/pdf'"
+    >
+      <!-- 添加普通图片全屏属性控制 -->
+      <template #title>
+        <div
+          v-if="dialogViewType !== 'application/pdf'"
+          style="text-align: right; margin-right: 15px; padding-top: 5px"
+        >
+          <!-- 全屏 -->
+          <i
+            v-if="!isFullscreen"
+            class="el-icon-full-screen"
+            style="font-size: 19px; margin-right: 10px"
+            @click="screenClick"
+          ></i>
+          <!-- 取消全屏 -->
+          <i
+            v-else
+            class="el-icon-connection"
+            style="font-size: 19px; margin-right: 10px"
+            @click="narrowClick"
+          ></i>
+        </div>
+      </template>
+      <!-- pdf -->
+      <embed
+        v-if="dialogViewType == 'application/pdf'"
+        :src="dialogImageUrl"
+        :type="dialogViewType"
+        width="100%"
+        height="100%"
+      />
+      <!-- 普通图片 -->
+      <img width="90%" height="auto" :src="dialogImageUrl" v-else />
+    </VxeModal>
+  </div>
+</template>
+
+<script>
+import { notification,Upload } from 'ant-design-vue'
+import { sysRowState } from '../../utils/enum'
+import { getToken } from '../../utils/auth'
+import { Checkbox,Modal } from 'vxe-table'
+import store from '../../utils/store'
+import {attachGetAttachUrlApi,attachSearchApi} from '../../utils/api'
+
+export default {
+  name: 'BasePictureCard',
+  components:{
+      'VxeCheckbox':Checkbox,
+      'a-upload':Upload,
+      'VxeModal':Modal
+  },
+  data() {
+    return {
+      demo1: '',
+      demo2: '',
+      internalServiceUrl: '',
+      downFilePath: '',
+      downFileName: '',
+      isShowPdf: false,
+      pdfData: null,
+      internalUrls: [],
+      internalRows: [],
+      picName: [],
+      // internalUrl: '',
+      dialogImageUrl: '',
+      dialogViewType: '',
+      sysRowState: sysRowState,
+      dialogVisible: false,
+      uploadData: {
+        picType: '',
+        picAction: '',
+        resId: ''
+      },
+      uploadHeaders: {
+        Authorization: `Bearer ${getToken()}`
+      },
+      isFullscreen: false
+    }
+  },
+  props: {
+    showEmptyText: {
+      type: Boolean,
+      default: true
+    },
+    picType: {
+      type: String,
+      default: 'cust'
+    },
+    value: {
+      type: String
+    },
+    resId: {
+      type: String
+    },
+    dataName: {
+      type: String
+    },
+    edit: {
+      // 列信息
+      type: Boolean
+    },
+    limitSize: {
+      // 限制上传大小
+      type: Number,
+      default: 5
+    },
+    limitType: {
+      // 限制上传类型
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    formRow: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    width: {
+      type: String,
+      default: '100px'
+    },
+    height: {
+      type: String,
+      default: '100px'
+    },
+    rows: {
+      // 表格数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    cols: {
+      // 表格列信息
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    formState: {
+      // 表格列信息
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    rows: {
+      handler: function(newVal) {
+        this.getAttachInfo(newVal)
+      },
+      deep: true
+    },
+    resId: {
+      handler: function(newVal) {
+        this.uploadData.resId = newVal
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    this.internalServiceUrl = attachGetAttachUrlApi()
+    this.uploadData.picType = this.picType
+    this.uploadData.resId = this.resId
+    this.uploadData.picAction = this.internalServiceUrl + '/UploadAttach'
+    this.getAttachInfo(this.rows)
+  },
+  methods: {
+    getCurrentToken(){
+        return store.getters.token
+    },
+    /**
+     * 获取附件信息
+     */
+    getAttachInfo(newRows) {
+      let attachIds = []
+      for (let i = 0; i < newRows.length; i++) {
+        if (newRows[i].attach) {
+          continue
+        }
+        attachIds.push(newRows[i].attachId)
+        newRows[i].attach = {
+          fileName: '',
+          contentType: '',
+          content: '',
+          name: '',
+          id: newRows[i].attachId
+        }
+      }
+      if (attachIds.length == 0) {
+        this.internalRows = newRows
+        return
+      }
+      let postData = {
+        fields: 'id,fileName,contentType,name,content,isDefault',
+        begin: 1,
+        size: 0,
+        exp: 'id in ('
+      }
+      for (let i = 0; i < attachIds.length; i++) {
+        postData.exp = postData.exp + attachIds[i] + ','
+      }
+      let vm = this
+      postData.exp = postData.exp.substr(0, postData.exp.length - 1) + ')'
+      attachSearchApi(postData)
+        .then(responseData => {
+          for (let i = 0; i < responseData.content.length; i++) {
+            for (let x = 0; x < newRows.length; x++) {
+              if (responseData.content[i].id === newRows[x].attachId) {
+                newRows[x].attach.fileName = responseData.content[i].fileName
+                newRows[x].attach.name = responseData.content[i].name
+                newRows[x].attach.content = responseData.content[i].content
+                newRows[x].attach.contentType =
+                  responseData.content[i].contentType
+                // newRows[x].attach.isDefault = false
+                break
+              }
+            }
+          }
+          vm.internalRows = newRows
+        })
+        .catch(() => {})
+    },
+    attachFileClick(attachFile) {},
+    handleAvatarSuccess(res, file, fileList) {
+      let addRow = {
+        attachId: res.content.id,
+        sysRowState: sysRowState.add,
+        attach: res.content
+      }
+      let tempField
+      for (let i = 0; i < this.cols.length; i++) {
+        // 赋值关联字段数据
+        let tempValue = addRow
+        tempField = this.cols[i].field
+        if (this.cols[i].isAuto) {
+          tempValue[tempField] = this.$store.getters.newId() + ''
+          continue
+        }
+        if (
+          this.cols[i].controlType === 'text' &&
+          this.cols[i].linkValueField !== null &&
+          this.cols[i].linkValueField !== '' &&
+          this.cols[i].linkValueField !== undefined
+        ) {
+          tempValue[tempField] = this.formRow[this.cols[i].linkValueField]
+        }
+      }
+      this.internalRows.push(addRow)
+      // this.$emit('add', this.dataName, res.data)
+    },
+    beforeAvatarUpload(file) {
+      // const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
+      if (file.size / 1024 / 1024 > this.limitSize) {
+        notification.error({
+          message: '错误',
+          description: '上传图片大小不能超过 ' + this.limitSize + 'MB!'
+        })
+      }
+      if (this.limitType.length > 0 && !this.limitType[file.type]) {
+        notification.error({
+          message: '错误',
+          description: '上传附件格式错误!'
+        })
+      }
+      return true
+    },
+    handleRemove(file, fileList) {
+      // this.dialogVisible =  !this.dialogVisible
+      // alert(this.dialogVisible)
+      this.internalUrls = fileList
+      this.$emit('remove', this.dataName, file.response.data)
+      // this.$emit('remove', this.dataName, file.response.data)
+    },
+    circleAttach(attachFile, internalRow) {
+      let vm = this
+      //  if(internalRow.isDefault == true){
+      this.internalRows.forEach(element => {
+        if (element.id !== internalRow.id) {
+          element.isDefault = false
+        }
+      })
+      //  }
+    },
+    removeAttach(attachFile) {
+     
+      for (let i = 0; i < this.internalRows.length; i++) {
+        if (this.internalRows[i].attachId === attachFile.id) {
+          if (this.internalRows[i].sysRowState === sysRowState.add) {
+            this.internalRows.splice(i, 1)
+          } else {
+            this.$set(this.internalRows[i], 'sysRowState', sysRowState.delete)
+          }
+          break
+        }
+      }
+      this.$emit('remove', attachFile.id)
+    },
+    downloadAttach(attachFile) {
+      window.open(this.internalServiceUrl + '/DownAttachFile/' + attachFile.id)
+    },
+    /**
+     * 查看附件
+     */
+    viewAttach(attachFile) {
+      if (attachFile.contentType === 'application/pdf') {
+        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`
+        this.dialogViewType = attachFile.contentType
+        this.dialogVisible = true
+      } else if (attachFile.content === 'image') {
+        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`
+        this.dialogViewType = attachFile.contentType
+        this.dialogVisible = true
+      }
+    },
+    closePdf() {
+      this.isShowPdf = false
+    },
+    // 放大
+    screenClick() {
+      this.isFullscreen = true
+    },
+    // 局部展示
+    narrowClick() {
+      this.isFullscreen = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-card {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0 0 5px 5px;
+
+  .attach-wrapper {
+    .attach {
+      position: relative;
+      margin-right: 5px;
+
+      .attach-delete {
+        position: absolute;
+        top: -2px;
+        right: -4px;
+        opacity: 0;
+        font-size: 20px;
+        background-color: red;
+      }
+
+      .attach-delete:hover {
+        cursor: pointer;
+      }
+
+      .attach-download {
+        position: absolute;
+        bottom: 10px;
+        left: 4px;
+        opacity: 0;
+        font-size: 18px;
+        font-weight: bolder;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        border-color: transparent;
+        //background-color: rgb(255, 1, 1);
+        color: #000;
+      }
+
+      .attach-download:hover {
+        cursor: pointer;
+        color: rgb(189, 8, 8);
+      }
+
+      .attach-view {
+        position: absolute;
+        bottom: 10px;
+        right: 4px;
+        opacity: 0;
+        font-size: 18px;
+        font-weight: bolder;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        border-color: transparent;
+        //background-color: #666;
+        color: #000;
+      }
+
+      .attach-circle {
+        position: absolute;
+        // bottom: 10px;
+        top: 2px;
+        left: 4px;
+        opacity: 0;
+      }
+
+      .attach-view:hover {
+        cursor: pointer;
+        color: rgb(189, 8, 8);
+      }
+    }
+
+    .attach:hover > .attach-delete {
+      opacity: 0.8;
+    }
+
+    .attach:hover > .attach-download {
+      opacity: 0.7;
+    }
+
+    .attach:hover > .attach-view {
+      opacity: 0.7;
+    }
+
+    .attach:hover > .attach-circle {
+      opacity: 0.9;
+    }
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px solid #d9d9d9;
+
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  // width: 178px;
+  // height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  // width: 178px;
+  // height: 178px;
+  display: block;
+}
+
+.el-upload-list__item is-success {
+  float: left;
+}
+
+.el-icon-connection:hover {
+  color: white;
+  cursor: pointer;
+}
+
+.el-icon-full-screen:hover {
+  color: white;
+  cursor: pointer;
+}
+</style>

package/packages/BasePulldown/index.js

@@ -0,0 +1,8 @@
+// 导入组件，组件必须声明 name
+import BasePulldown from './src/index.vue';
+// 为组件提供 install 安装方法，供按需引入
+BasePulldown.install = function(Vue) {
+    Vue.component(BasePulldown.name, BasePulldown);
+};
+// 默认导出组件
+export default BasePulldown;