n20-common-lib 1.1.10

package/src/components/FileUploadTable/index.vue

@@ -0,0 +1,456 @@
+<template>
+  <!-- 查看附件信息 -->
+  <div v-if="readonly" class="bd-t bd-l bd-r">
+    <div class="p-l p-r p-t-s p-b-s">
+      <div class="flex-box flex-v flex-lr">
+        <span>附件信息</span>
+        <el-button v-if="tableData.length" size="mini" plain @click="downRows"
+          >批量下载</el-button
+        >
+      </div>
+    </div>
+
+    <el-table
+      :data="tableData"
+      :row-key="keys.rowKey"
+      @selection-change="(selection) => (selectionList = selection)"
+    >
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="附件类型" :prop="keys.type">
+        <template slot-scope="{ row }">
+          {{ row[keys.type] | typeFiter(typeOptions) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="附件名称" :prop="keys.name" />
+      <el-table-column label="上传时间" :prop="keys.time" align="center" />
+      <el-table-column label="上传人" :prop="keys.user" />
+      <el-table-column label="操作" align="center" width="80">
+        <template slot-scope="{ row }">
+          <el-button
+            type="text"
+            icon="el-icon-view"
+            :disabled="seeTypes && !seeTypes.test(row[keys.url])"
+            @click="seeFile(row)"
+          />
+          <el-button
+            type="text"
+            icon="el-icon-download"
+            :disabled="!row[keys.url]"
+            @click="downFile(row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      class="p-a-0"
+      title="附件预览"
+      :visible.sync="visibleP"
+      top="2vh"
+      width="96%"
+    >
+      <template slot="title">
+        <span class="el-dialog__title m-r"> 附件预览 </span>
+        <span v-if="!previewSameOrg" style="color: #999"
+          >附件地址与本页面地址不同源，可能无法查看。<a
+            :href="previewUrl"
+            :download="previewName || previewUrl"
+            >下载</a
+          >
+        </span>
+      </template>
+      <div class="p-a" style="height: 82vh">
+        <object
+          :key="previewUrl"
+          :data="previewUrl"
+          style="width: 100%; height: 100%"
+        >
+          <div class="flex-column flex-c flex-v" style="height: 100%">
+            <i
+              class="el-icon-s-release"
+              style="font-size: 60px; color: #999"
+            ></i>
+            <span style="margin-top: 16px">
+              不支持在线预览，请
+              <a :href="previewUrl" :download="previewName || previewUrl"
+                >下载</a
+              >
+              到本地查看
+            </span>
+          </div>
+        </object>
+      </div>
+    </el-dialog>
+  </div>
+
+  <!-- 上传附件 -->
+  <div v-else class="bd-t bd-l bd-r">
+    <div class="p-l p-r p-t-s p-b-s">
+      <div class="flex-box flex-v flex-lr">
+        <span>附件信息</span>
+        <div>
+          <el-button type="primary" size="mini" @click="addRow">新增</el-button>
+          <el-button v-if="tableData.length" size="mini" plain @click="downRows"
+            >下载</el-button
+          >
+          <el-button
+            v-if="tableData.length"
+            type="danger"
+            plain
+            size="mini"
+            @click="deleteRows"
+            >删除</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-table
+      :data="tableData"
+      :row-key="keys.rowKey"
+      @selection-change="(selection) => (selectionList = selection)"
+    >
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="附件类型" min-width="160">
+        <template slot-scope="{ row }">
+          <el-select
+            v-model="row[keys.type]"
+            placeholder="请选择附件类型"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.type"
+              :value="item.type"
+              :label="item.label"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="附件名称" min-width="160">
+        <template slot-scope="{ row }">
+          <el-input v-model="row[keys.name]" />
+        </template>
+      </el-table-column>
+      <el-table-column label="附件上传" min-width="160">
+        <template slot-scope="{ row, $index }">
+          <cl-upload
+            :ref="'upload' + $index"
+            class="upload-table-up"
+            :file-name="row['_name'] || row[keys.name]"
+            :msg-type="null"
+            :show-clear="false"
+            :action="action"
+            :headers="headers"
+            :accept="row[keys.type] | acceptFilter(typeOptions, fileAccept)"
+            :size="row[keys.type] | sizeFilter(typeOptions, fileSize)"
+            :before-upload="(file) => beforeUploadFn(file, row)"
+            :on-progress="(event) => onProgressFn(event, row)"
+            :on-success="
+              (response, file, fileList) =>
+                onSuccessFn(response, file, fileList, row)
+            "
+            :on-error="
+              (err, file, fileList) => errorFn(err, file, fileList, row, $index)
+            "
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="上传时间"
+        :prop="keys.time"
+        width="140"
+        align="center"
+      />
+      <el-table-column label="上传人" :prop="keys.user" />
+      <el-table-column label="上传进度" width="220">
+        <template slot-scope="{ row, $index }">
+          <div v-if="row['_percent'] >= 0" class="flex-box flex-v">
+            <el-progress
+              class="upload-table-progress"
+              :percentage="row['_percent']"
+              :status="row['_status']"
+              style="width: 140px"
+            />
+            <el-button
+              v-if="row['_status'] === 'exception'"
+              type="text"
+              size="mini"
+              style="width: 60px"
+              @click="anewSubmitFn(row, $index)"
+              >重新上传</el-button
+            >
+            <el-button
+              v-else-if="row['_percent'] >= 0 && row['_percent'] < 100"
+              type="text"
+              size="mini"
+              style="width: 60px"
+              @click="abortFn(row, $index)"
+              >取消</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="80">
+        <template slot-scope="{ row }">
+          <el-button
+            type="text"
+            icon="el-icon-view"
+            :disabled="seeTypes && !seeTypes.test(row[keys.url])"
+            @click="seeFile(row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      class="p-a-0"
+      title="附件预览"
+      :visible.sync="visibleP"
+      top="2vh"
+      width="96%"
+    >
+      <template slot="title">
+        <span class="el-dialog__title m-r"> 附件预览 </span>
+        <span v-if="!previewSameOrg" style="color: #999"
+          >附件地址与本页面地址不同源，可能无法查看。<a
+            :href="previewUrl"
+            :download="previewName || previewUrl"
+            >下载</a
+          >
+        </span>
+      </template>
+      <div class="p-a" style="height: 82vh">
+        <object
+          :key="previewUrl"
+          :data="previewUrl"
+          style="width: 100%; height: 100%"
+        >
+          <div class="flex-column flex-c flex-v" style="height: 100%">
+            <i
+              class="el-icon-s-release"
+              style="font-size: 60px; color: #999"
+            ></i>
+            <span style="margin-top: 16px">
+              不支持在线预览，请
+              <a :href="previewUrl" :download="previewName || previewUrl"
+                >下载</a
+              >
+              到本地查看
+            </span>
+          </div>
+        </object>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+
+export default {
+  name: 'FileUploadTable',
+  filters: {
+    typeFiter(type, typeOptions) {
+      return typeOptions.find((c) => c.type === type)?.label || ''
+    },
+    acceptFilter(type, typeOptions, fileAccept) {
+      return typeOptions.find((c) => c.type === type)?.accept || fileAccept
+    },
+    sizeFilter(type, typeOptions, fileSize) {
+      return typeOptions.find((c) => c.type === type)?.size || fileSize
+    }
+  },
+  props: {
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    action: {
+      type: String,
+      default: '/bems/1.0/attach'
+    },
+    headers: {
+      type: Object,
+      default: undefined
+    },
+    seeTypes: {
+      type: RegExp,
+      default: () => /\.jpg|\.png|\.gif|\.pdf$/i
+    },
+    tableData: {
+      type: Array,
+      default: () => [
+        // {
+        //   id: 'n1',
+        //   type: '001',
+        //   name: '信贷合同-1',
+        //   time: '2021-9-29 11:39:10',
+        //   user: '张三'
+        // }
+      ]
+    },
+    dataPorp: {
+      type: Object,
+      default: () => ({
+        // fileAccept: undefined, // 可选文件类型 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+        // fileSize: undefined, // 文件大小
+        // typeOptions: [
+        //   // accept 覆盖fileAccept, size 覆盖fileSize
+        //   {
+        //     type: '001',
+        //     label: '信贷合同',
+        //     accept: 'image/*',
+        //     size: '100Kb'
+        //   },
+        //   {
+        //     type: '002',
+        //     label: '贴现合同'
+        //   },
+        //   {
+        //     type: '003',
+        //     label: '其他合同'
+        //   }
+        // ],
+        // keys: {
+        //   rowKey: 'id',
+        //   type: 'type', // 附件类型
+        //   name: 'name', // 附件名称
+        //   url: 'url', // 上传文件返回的文件地址
+        //   time: 'time', // 附件上传时间
+        //   user: 'user' // 附件上传人
+        // }
+      })
+    }
+  },
+  data() {
+    return {
+      selectionList: [],
+      fileAccept: this.dataPorp.fileAccept || undefined,
+      fileSize: this.dataPorp.fileSize || undefined,
+      typeOptions: this.dataPorp.typeOptions || [
+        {
+          type: '001',
+          label: '信贷合同'
+        },
+        {
+          type: '002',
+          label: '贴现合同'
+        },
+        {
+          type: '003',
+          label: '其他合同'
+        }
+      ],
+      keys: this.dataPorp.keys || {
+        rowKey: 'id',
+        type: 'type',
+        name: 'name',
+        url: 'url',
+        time: 'time',
+        user: 'user'
+      },
+
+      visibleP: false,
+      previewUrl: undefined,
+      previewName: undefined,
+      previewSameOrg: false
+    }
+  },
+  methods: {
+    addRow() {
+      this.$emit('add-row')
+    },
+    downRows() {
+      this.$emit('down-rows', this.selectionList)
+    },
+    deleteRows() {
+      this.$emit('delete-rows', this.selectionList)
+    },
+    getFileName(row) {
+      let url = row[this.keys.url]
+      if (url) {
+        let sameOrg = new RegExp('^' + window.location.origin).test(url)
+        let name = row[this.keys.name]
+          ? row[this.keys.name] + (url.match(/\.[^\.]*$/)?.[0] || '')
+          : ''
+        return {
+          url,
+          name,
+          sameOrg
+        }
+      } else {
+        return {}
+      }
+    },
+    downFile(row) {
+      let { url, name } = this.getFileName(row)
+      if (url) {
+        let aDom = document.createElement('a')
+        aDom.href = url
+        aDom.download = name
+        aDom.click()
+
+        this.$nextTick(() => {
+          aDom = undefined
+        })
+      }
+    },
+    seeFile(row) {
+      let { url, name, sameOrg } = this.getFileName(row)
+      if (url) {
+        this.previewSameOrg = sameOrg
+        this.previewUrl = url
+        this.previewName = name
+        this.visibleP = true
+      }
+    },
+    beforeUploadFn(file, row) {
+      this.$set(row, '_percent', 0)
+      this.$set(row, '_status', undefined)
+    },
+    onProgressFn({ percent }, row) {
+      this.$set(row, '_percent', percent <= 99 ? Math.round(percent) : 99)
+    },
+    onSuccessFn(response, file, fileList, row) {
+      this.$set(row, '_name', file.name)
+      this.$set(row, '_percent', 100)
+
+      row[this.keys.time] = dayjs().format('YYYY-MM-DD HH:mm:ss')
+
+      row[this.keys.url] = response.data
+      if (!row[this.keys.name]) {
+        row[this.keys.name] = file.name
+      }
+      this.$set(row, '_status', 'success')
+    },
+    errorFn(err, file, fileList, row, $index) {
+      this.$set(row, '_status', 'exception')
+
+      let clUpload = this.$refs['upload' + $index]
+      /* 重置文件状态,并加入文件队列 */
+      file.status = 'ready'
+      clUpload.fileList = [file]
+    },
+    abortFn(row, $index) {
+      this.$set(row, '_status', 'exception')
+
+      let clUpload = this.$refs['upload' + $index]
+      let elUpload = clUpload.$refs['upload']
+      let uploadFiles = elUpload.uploadFiles
+
+      /* 重置文件状态,并加入文件队列 */
+      let file = uploadFiles[uploadFiles.length - 1]
+      file.status = 'ready'
+      clUpload.fileList = [file]
+
+      elUpload.abort()
+    },
+    anewSubmitFn(row, $index) {
+      this.$set(row, '_status', 'success')
+
+      this.$refs['upload' + $index]?.$refs['upload']?.submit()
+    }
+  }
+}
+</script>

package/src/components/Filters/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-popover
+    :width="width"
+    placement="bottom-end"
+    title="筛选"
+    trigger="click"
+  >
+    <span slot="reference">
+      <el-button icon="cl-icon-iconfontshaixuan" plain onlyicon size="mini"
+    /></span>
+
+    <div class="cl-filter">
+      <slot></slot>
+      <div class="more" @click="showMore = !showMore">
+        <span>{{ showMore ? '收起' : '更多' }}条件</span
+        ><i :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+      </div>
+      <el-collapse-transition>
+        <div v-show="showMore">
+          <slot name="more"></slot>
+        </div>
+      </el-collapse-transition>
+    </div>
+    <div class="actions">
+      <slot name="actions">
+        <el-button size="mini" plain style="width: 76px" @click="clear">{{
+          clearText
+        }}</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          style="width: 76px"
+          @click="filter"
+          >{{ filterText }}</el-button
+        >
+      </slot>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'Filters',
+  props: {
+    clearText: {
+      type: String,
+      default: '清空已选'
+    },
+    filterText: {
+      type: String,
+      default: '筛选'
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: Number,
+      default: 380
+    }
+  },
+  data() {
+    return {
+      showMore: false
+    }
+  },
+  methods: {
+    clear() {
+      this.$emit('clear')
+    },
+    filter() {
+      this.$emit('filter')
+    }
+  }
+}
+</script>
+

package/src/components/FoldedPanel/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="cl-foldedpanel">
+    <div class="cl-foldedpanel-item" v-for="(item,index) in list" :key="index">
+     <div class="cl-foldedpanel-top">
+        <div class="cl-foldedpanel-left">
+          <span class="cl-foldedpanel-time">{{ item.time }}</span>
+          <i class=" el-icon-arrow-down" @click="show3 = !show3"></i>
+        </div>
+       <el-tag :type="val.type" size="mini" v-for="val in item.tag" :key="val.value">{{ val.value }}</el-tag>
+       <span>人民币：{{ item.money }}元</span>
+     </div>
+      <div class="cl-foldedpanel-bottom">
+        <span class="down"></span>
+        <el-collapse-transition>
+          <div v-show="show3">
+            <div>我是下面要展示的内容</div>
+          </div>
+        </el-collapse-transition>
+        <div class="cl-foldedpanel-long"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FoldedPanel",
+  data() {
+    return {
+      show3:false,
+      list: [
+        {
+          time: '2021-12-31',
+          tag: [
+            {value: '支取本金',type:'success'},
+            {value: '正常结束',type:''}
+          ],
+          money: '123,232,231,123:12'
+        },
+        {
+          time: '2021-12-31',
+          tag: [
+            {value: '支取本金',type:'success'},
+            {value: '正常结束',type:''}
+          ],
+          money: '123,232,231,123:12'
+        },
+        {
+          time: '2021-12-31',
+          tag: [
+            {value: '支取本金',type:'success'},
+            {value: '正常结束',type:''}
+          ],
+          money: '123,232,231,123:12'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/FooterBox/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div :style="style" class="cl-footer-box">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FooterBox',
+  props: {
+    style: {
+      type: Object,
+      default: () => {
+      }
+    }
+  }
+}
+</script>