xianniu-ui 0.1.4 → 0.1.6

package/packages/table/main.vue

@@ -1,28 +1,57 @@
 <template>
   <div class="xn-table-box">
     <div class="xn-table-box-tools" :class="{ 'is-border': !border }">
-      <slot name="tools">
-        <el-button-group>
+      <div class="flex justify-content-between align-items-center">
+        <div class="fz-12" :class="{'pb-10':selection}">
+          <template v-if="selection">
+            <span>已选择 {{ selectedData.length }} 项</span>
+            <el-button
+              type="text"
+              v-show="selectedData.length"
+              class="ml-5"
+              size="mini"
+              @click="clearSelection"
+              >取消</el-button
+            >
+          </template>
+        </div>
+        <div :class="{'pb-10': $slots.tools || tools.length}" class=" flex justify-content-between align-items-center">
+          <slot name="tools">
+            <!-- <el-button-group> -->
+            <div>
+              <el-tooltip
+                v-for="(item, idx) in tools"
+                :key="idx"
+                :content="item.label"
+                placement="bottom"
+                effect="dark"
+              >
+                <el-button
+                  size="mini"
+                  type="primary"
+                  plain
+                  :icon="item.icon"
+                  @click="handleToolsItem(item, idx)"
+                >
+                  {{ item.label }}
+                </el-button>
+              </el-tooltip>
+            </div>
+            <!-- </el-button-group> -->
+          </slot>
           <el-tooltip
-            v-for="(item, idx) in tools"
-            :key="idx"
-            :content="item.label"
+            class="ml-10"
+            content="刷新"
             placement="bottom"
             effect="dark"
           >
             <el-button
+              v-if="showRefresh"
               size="mini"
-              :icon="item.icon"
-              @click="handleToolsItem(item, idx)"
-            >
-            {{item.label}}
-            </el-button>
-          </el-tooltip>
-          <el-tooltip content="刷新列表" placement="bottom" effect="dark">
-            <el-button
-              size="mini"
+              type="primary"
               @click="$emit('on-refresh')"
               icon="el-icon-refresh"
+              plain
             ></el-button>
           </el-tooltip>
           <el-popover
@@ -30,6 +59,7 @@
             popper-class="xn-table-box-tools__pop"
             class="ml-10"
             trigger="hover"
+            :hidden="!showColumn"
           >
             <el-scrollbar
               class="xn-table-box-tools__coll"
@@ -45,27 +75,16 @@
               </div>
             </el-scrollbar>
             <el-button
+              plain
               size="mini"
+              type="primary"
               icon="el-icon-setting"
               slot="reference"
             ></el-button>
           </el-popover>
-        </el-button-group>
-      </slot>
+        </div>
+      </div>
     </div>
-    <!-- <el-button
-      circle
-      size="mini"
-      @click="$emit('on-export')"
-      icon="el-icon-files"
-    ></el-button>
-    <el-button
-      circle
-      size="mini"
-      @click="$emit('on-refresh')"
-      icon="el-icon-refresh"
-    ></el-button> -->
-
     <el-table
       ref="table"
       :data="data"
@@ -74,6 +93,8 @@
       :border="border"
       :stripe="stripe"
       @row-click="singleElection"
+      @selection-change="selectionChange"
+      :class="{ 'disabled-all-selection': radio }"
     >
       <el-table-column
         v-if="selection && data.length"
@@ -82,7 +103,7 @@
         width="50px"
         align="center"
       ></el-table-column>
-      <el-table-column v-bind="$attrs" v-if="radio" width="50px" align="center">
+      <el-table-column v-bind="$attrs" v-if="radio" width="60px" align="center">
         <template slot-scope="{ row }">
           <el-radio v-model="radioSelected" :label="row.id">&nbsp;</el-radio>
         </template>
@@ -105,11 +126,11 @@
       </slot>
     </el-table>
 
-    <template v-if="!$utils.isEmpty(pageConfig)">
+    <template v-if="!$utils.isEmpty(page)">
       <xn-page
-        :total="pageConfig.total"
-        :page.sync="pageConfig.pageNum"
-        :limit.sync="pageConfig.pageSize"
+        :total="page.total"
+        :pageNum.sync="page.pageNum"
+        :pageSize.sync="page.pageSize"
         @pagination="getList"
         layout="total, prev, pager, next, jumper"
       ></xn-page>
@@ -142,23 +163,25 @@ export default {
     stripe: Boolean,
     selection: Boolean,
     radio: Boolean,
-
     showPage: Boolean,
+    showRefresh: Boolean,
     pageLayout: {
       type: String,
       default: "total, prev, pager, next, jumper",
     },
-    pageConfig: {
+    page: {
       type: Object,
       default: () => {},
     },
-    index: Boolean,
+    index: { type: Boolean, default: true },
+    showColumn: Boolean,
     expand: Boolean,
     isTools: Boolean,
   },
   data() {
     return {
       radioSelected: "",
+      selectedData: [],
     };
   },
   computed: {},
@@ -172,7 +195,6 @@ export default {
     getList(val) {
       this.$emit("on-page", val);
     },
-
     singleElection(val) {
       if (!this.radio) return;
       this.radioSelected = val.id;
@@ -185,7 +207,20 @@ export default {
     handleChangeToolshow(item) {
       item.checked = item.checked === true ? false : true;
       this.$refs.table.doLayout();
-      console.log(this.$root);
+    },
+    selectionChange(val) {
+      this.selectedData = val;
+      this.$emit("selection-change", val);
+      // this.$refs.table.get
+    },
+    toggleRowSelection(row, status) {
+      this.$refs.table.toggleRowSelection(row, status);
+    },
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
+    doLayout() {
+      this.$refs.table.doLayout();
     },
   },
 };

package/packages/upload/main.vue

@@ -6,6 +6,7 @@
     }"
     class="xn-upload xn-upload-main"
     action="###"
+    :limit="limit"
     :list-type="listType"
     v-bind="$attrs"
     :file-list.sync="fileList"
@@ -20,41 +21,37 @@
     <template v-if="listType === 'picture-card'">
       <div slot="trigger" class="upload-limit">
         <i class="el-icon el-icon-plus" />
-        <span
-          ><em>{{ fileList.length }}</em
-          >/<em>{{ limit }}</em>
-        </span>
       </div>
     </template>
     <template v-else>
       <slot>
-        <el-button icon="el-icon-upload">编辑</el-button>
+        <el-button icon="el-icon-upload" :disabled="$attrs.disabled">上传</el-button>
       </slot>
     </template>
     <div
       slot="file"
       slot-scope="{ file }"
       class="xn-upload--slot"
-      :class="{ 'upload-slot-idcard': listType === 'idcard' }"
+      v-if="listType === 'picture-card'"
     >
       <uploadPop :file="file" @on-download="handleDownload(file)"></uploadPop>
-      <template v-if="isImage(file)">
-        <el-image
-          class="el-upload-list__item-thumbnail"
-          :src="file.url"
-          fit="cover"
-          :lazy="true"
-        />
-      </template>
-      <template v-else>
-        <div class="xn-upload-list__item--file">
-          <div class="annex">
-            <i class="el-icon el-icon-folder" />
-            <span class="label">附件</span>
+        <template v-if="$utils.isImg(file)">
+          <el-image
+            class="el-upload-list__item-thumbnail"
+            :src="file.url"
+            fit="cover"
+            :lazy="true"
+          />
+        </template>
+        <template v-else>
+          <div class="xn-upload-list__item-file">
+            <div class="annex">
+              <i class="el-icon el-icon-folder" />
+              <span class="label">附件</span>
+            </div>
+            <div class="file-name">{{ file.name }}</div>
           </div>
-          <div class="file-name">{{ file.accessoryName }}</div>
-        </div>
-      </template>
+        </template>
       <div v-if="file.status === 'uploading'" class="process">
         <el-progress
           :status="file.percentage === 100 ? 'success' : null"
@@ -65,21 +62,21 @@
       </div>
       <span class="el-upload-list__item-actions">
         <span
-          v-if="isImage(file)"
+          v-if="$utils.isImg(file)"
           class="el-upload-list__item-preview"
           @click="handlePictureCardPreview(file)"
         >
           <i class="fz-16 el-icon-zoom-in" />
         </span>
         <span
-          class="el-upload-list__item-delete icon"
+          class="el-upload-list__item-delete icon ml-5"
           @click="handleDownload(file, fileList)"
         >
           <i class="fz-16 el-icon-download" />
         </span>
         <span
           v-if="!$attrs.disabled && !preview"
-          class="el-upload-list__item-delete icon"
+          class="el-upload-list__item-delete icon ml-5"
           @click="handleRemove(file, fileList)"
         >
           <i class="fz-16 el-icon-delete" />
@@ -103,7 +100,7 @@ import axios from "axios";
 import uploadPop from "./upload-pop.vue";
 export default {
   name: "XnUpload",
-  inheritAttrs: true,
+  inheritAttrs: false,
   components: {
     uploadPop,
     ElImageViewer,
@@ -180,11 +177,6 @@ export default {
         return Math.floor(num);
       };
     },
-    isImage() {
-      return (file) => {
-        return file.imgFlag;
-      };
-    },
   },
   watch: {
     fileList: {
@@ -200,7 +192,6 @@ export default {
     },
   },
   created() {
-    console.log(this.$attrs);
   },
   beforeDestroy() {
     this.$emit("update:fileList", []);
@@ -224,7 +215,7 @@ export default {
       if (compress) {
         size = compress;
       } else {
-        size = file.size > _maxSize ? _maxSize / 1024 : file.size
+        size = file.size > _maxSize ? _maxSize / 1024 : file.size;
       }
       return new Promise((resolve) => {
         imageConversion["compressAccurately"](file, size).then((result) => {
@@ -246,22 +237,23 @@ export default {
     },
     async onHttpUpload(file) {
       const formData = new FormData();
-      let result = null;
-      if (this.$utils.isImg(file.file.name)) {
-        result = await this.handleCompress(file.file);
-        var newFile = new window.File([result], file.file.name, {
-          type: file.file.type,
-        });
-      }
-      const _file = result ? newFile : file.file;
+      // let result = null;
+      // if (this.$utils.isImg(file.file.name)) {
+      //   result = await this.handleCompress(file.file);
+      //   var newFile = new window.File([result], file.file.name, {
+      //     type: file.file.type,
+      //   });
+      // }
+      const _file = file.file;
       formData.append("file", _file);
 
       axios({
         method: "post",
-        url: this.$XN.uploadUrl || '',
+        url: this.$XN.uploadUrl || "",
         data: formData,
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
+          xnToken: this.$storage.get("xnToken"),
         },
         onUploadProgress(progress) {
           const _progress = Math.round(
@@ -271,11 +263,10 @@ export default {
         },
       })
         .then((res) => {
-          const { accessoryName, accessorySize, ext, imgFlag, url } =
-            res.data.data;
+          const { name, size, ext, imgFlag, url } = res.data.data;
           var obj = {};
-          obj.accessoryName = accessoryName;
-          obj.accessorySize = accessorySize;
+          obj.name = name;
+          obj.size = size;
           obj.ext = ext;
           obj.imgFlag = imgFlag;
           obj.url = url;
@@ -303,7 +294,7 @@ export default {
     },
 
     onExceed() {
-      this.$message.warning(`上传总数限制为【${this.limit}】个，请删除后上传`);
+      this.$message.warning(`上传总数不能超过【${this.limit}】个`);
     },
     handlePictureCardPreview(file) {
       this.isShowImageView = true;
@@ -335,7 +326,6 @@ export default {
         });
       }
       this.$emit("update:fileList", fileList);
-      //   this.$emit('on-change', fileList.map(item => item.url).join(','))
     },
     closeViewer() {
       this.isShowImageView = false;

package/packages/upload/upload-pop.vue

@@ -2,12 +2,12 @@
   <el-popover width="300" trigger="hover">
     <el-form label-width="80px" size="mini">
       <el-form-item label="文件名">
-        <div :title="file.accessoryName" class="tip-filename">
-          {{ file.accessoryName }}
+        <div :title="file.name" class="tip-filename">
+          {{ file.name }}
         </div>
       </el-form-item>
       <el-form-item label="文件大小">
-        {{ $format.bytesToSize(file.accessorySize) }}
+        {{ $format.bytesToSize(file.size) }}
       </el-form-item>
       <el-form-item label="文件格式">
         {{ file.ext }}

package/src/index.js

@@ -30,7 +30,6 @@ const components = [
 const version = require('../package.json').version
 
 const install = function (Vue) {
-    console.log(Vue.prototype);
     if (install.installed) return
     if (!Vue.prototype.$ELEMENT) throw new Error('缺失 element-ui，请进行安装')
     install.installed = true
@@ -39,7 +38,7 @@ const install = function (Vue) {
     })
 
     Vue.prototype.$XN = {
-        uploadUrl: ''
+        uploadUrl: 'https://gateway.dev.xianniu.cn/file-server/oss/uploadFile'
     }
     Vue.prototype.$utils = Utils.$utils
     Vue.prototype.$reg = Utils.$reg

package/src/utils/utils.js

@@ -18,12 +18,14 @@ const isEmpty = function (val) {
 /**
  * 判断是否是图片格式
  */
-const isImg = (filePath) => {
-  if (typeof filePath !== 'string' || !filePath) return
+const isImg = (file) => {
+  const { url } = file
+  if (typeof url !== 'string' || !url) return
   var strFilter = '.jpeg|.gif|.jpg|.png|.bmp|.pic|.svg|'
-  if (filePath.indexOf('.') > -1) {
-    var p = filePath.lastIndexOf('.')
-    var strPostfix = filePath.substring(p, filePath.length) + '|'
+  if (file.imgFlag) return true
+  if (url.indexOf('.') > -1) {
+    var p = url.lastIndexOf('.')
+    var strPostfix = url.substring(p, url.length) + '|'
     strPostfix = strPostfix.toLowerCase()
     if (strFilter.indexOf(strPostfix) > -1) {
       return true
@@ -66,7 +68,7 @@ const download = (params = { name: '', url: '' }) => {
   const { url, name } = _params
   var x = new XMLHttpRequest()
   x.open('GET', url, true)
-  x.responseType = 'blob'
+  // x.responseType = 'blob'
   x.onload = function () {
     // 会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
     var url = window.URL.createObjectURL(x.response)

package/packages/dialog/!main.vue

@@ -1,90 +0,0 @@
-<template>
-  <el-dialog
-    :visible.sync="dialogVisible"
-    v-bind="$attrs"
-    v-on="$listeners"
-    :before-close="onBeforeClose"
-    :width="$attrs.width ? $attrs.width : _width"
-  >
-    <slot />
-    <span slot="footer" class="text-right">
-      <slot name="footer">
-        <el-button @click="onClose">取消</el-button>
-        <el-button
-          v-if="$attrs['show-confirm']"
-          type="primary"
-          @click="onConfirm"
-          >{{ $attrs["confirm-text"] || "提交" }}</el-button
-        >
-      </slot>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: "XnDialog",
-  inheritAttrs: false,
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    beforeClose: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  created() {
-    console.log(this);
-  },
-  computed: {
-    _width() {
-      const arr = [
-        { label: "mini", value: "320px" },
-        { label: "small", value: "560px" },
-        { label: "medium", value: "720px" },
-        { label: "large", value: "960px" },
-      ];
-
-      var width = "";
-      arr.forEach((item) => {
-        if (item.label === this.$attrs.size || this.size) {
-          width = item.value;
-        }
-      });
-      return width;
-    },
-    dialogVisible: {
-      get() {
-        return this.show;
-      },
-      set(val) {
-        console.log('val: ', val);
-        this.$emit("on-visible", val);
-      },
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    onClose() {
-      this.$emit("update:show", false);
-    },
-    onBeforeClose(){
-      if(this.beforeClose && typeof beforeClose === 'function'){
-        return this.beforeClose()
-      }else{
-        return this.onClose()
-      }
-    },
-    onConfirm() {
-      this.$emit("on-confirm");
-    },
-  },
-};
-</script>
-
-<style>
-</style>