htui-yllkbz 1.2.54 → 1.2.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.2.54",
+  "version": "1.2.58",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",
   "style": "lib/htui.css",

package/src/packages/HtTable/index.vue

@@ -5,7 +5,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-16 09:27:47
+ * @LastEditTime: 2022-02-14 11:07:24
 -->
 <template>
   <div v-loading="state.loading"
@@ -73,12 +73,12 @@
             {{(state.pageInfo.currentPage-1)*state.pageInfo.pageSize+(scope.$index+1)}}
           </template>
         </el-table-column>
-        <template v-for="item in showColumns">
+        <template v-for="(item,index) in state.showColumns">
           <el-table-column :label="item.title"
-                           :key='item.key'
+                           :key='`${item.key}_${index}`'
                            :fixed="item.fixed"
                            :align="item.align"
-                           v-if="!item.hide"
+                           v-if="!item.hide&&item.checked"
                            :resizable="item.resizable"
                            :header-align="item.headerAlign"
                            :column-key="item.columnKey"
@@ -104,6 +104,7 @@
                                    type="tag"></common-org-info>
                   <span v-else>--</span>
                 </template>
+                <!-- 处理基础数据 -->
                 <template v-else-if="item.type==='common'">
 
                   <div v-if="getPropByPath(row,item.key)"
@@ -137,7 +138,7 @@
                   </div>
                   <span v-else>--</span>
                 </template>
-                <!-- 处理部门人员 -->
+                <!-- 处理布尔值显示 -->
                 <template v-else-if="item.type==='boolean'">
                   <el-tag :type="'success'"
                           :size="'small'"
@@ -146,15 +147,25 @@
                           :size="'small'"
                           v-else>否</el-tag>
                 </template>
-                <!-- 处理部门人员 -->
+                <!-- 处理图片显示 -->
                 <template v-else-if="item.type==='img'">
-                  <span v-if="fileToken in getPropByPath(row,item.key).split(',')">
+                  <span v-if="getPropByPath(row,item.key)">
                     <el-image style="width: 38px; height: 38px;margin-right:5px"
+                              :key="fileToken"
+                              v-for="fileToken in getPropByPath(row,item.key).split(',')"
                               :src="'/files/api/filing/file/download/'+fileToken"
                               :preview-src-list="['/files/api/filing/file/download/'+fileToken]">
                     </el-image>
                   </span>
-
+                </template>
+                <!-- 处理附件显示 -->
+                <template v-else-if="item.type==='file'">
+                  <span v-if="getPropByPath(row,item.key)">
+                    <i class="el-icon-paperclip"
+                       @click="showFiles(getPropByPath(row,item.key))"
+                       style="color:var(--primary);cursor:pointer">{{getPropByPath(row,item.key).split(',').length}}</i>
+                  </span>
+                  <span v-else>--</span>
                 </template>
                 <!-- 其他 -->
                 <span v-else>{{getPropByPath(row,item.key)}}</span>
@@ -194,13 +205,15 @@
                title="属性设置"
                :append-to-body="true"
                :close-on-click-modal="true"
-               width="400px"
-               :center="true">
-      <div style='overflow:hidden;height:500px'>
-        <el-scrollbar style='height: 517px'>
-          <el-tree :data="columns"
+               width="400px">
+      <p slot="title"
+         style="font-weight:700;font-size:18px;float:left;margin:0">自定义列展示</p>
+      <div style='overflow:hidden;height:35vh;margin-top:12px'>
+        <el-scrollbar style='height: calc(35vh + 17px)'>
+          <el-tree :data="getAllColumns"
                    ref="tree"
                    show-checkbox
+                   :expand-on-click-node="false"
                    node-key="key"
                    :check-on-click-node="false"
                    @node-drag-start="handleDragStart"
@@ -209,7 +222,7 @@
                    @node-drag-over="handleDragOver"
                    @node-drag-end="handleDragEnd"
                    @node-drop="handleDrop"
-                   :default-checked-keys="state.showColumnKeys"
+                   :default-checked-keys="state.checkedColumnKeys"
                    @check-change="changeColumns"
                    :allow-drag="allowDrag"
                    draggable
@@ -217,10 +230,33 @@
             <span class="custom-tree-node"
                   slot-scope="{ node, data }">
               <slot :name="'header_'+data.key"
-                    :column="data">{{data.title}}</slot>
+                    :column="data">{{data.title}}<span style="color:#C0C4CC">{{data.property?`(${data.property})`:''}}</span></slot>
             </span>
           </el-tree>
         </el-scrollbar>
+
+      </div>
+      <span slot="footer">
+        <el-button type="primary"
+                   @click="confirmSortAndshow">确定</el-button>
+        <el-button @click="state.visibleFilter=false">取消</el-button>
+      </span>
+    </el-dialog>
+    <!-- 附件详情弹框 -->
+    <el-dialog :visible.sync="state.visibleFile"
+               title="附件查看"
+               :append-to-body="true"
+               :close-on-click-modal="true"
+               width="400px"
+               :center="true">
+      <p slot="title"
+         style="font-weight:700;font-size:18px;float:left;margin:0">附件查看</p>
+
+      <div style='overflow:hidden;height:calc(30vh)'>
+        <el-scrollbar style='height: calc(100% + 17px)'>
+          <HtUploadFiles :disabled="true"
+                         v-model="state.files"></HtUploadFiles>
+        </el-scrollbar>
       </div>
     </el-dialog>
   </div>
@@ -229,21 +265,32 @@
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { Column, PageInfoType } from "@/packages/type";
 import PageInfo from "@/packages/PageInfo/index.vue";
+import HtUploadFiles from "@/packages/HtUploadFiles/index.vue";
 interface State {
   pageInfo: PageInfoType;
   loading: boolean;
   /** 展示出来的列表名 */
   showColumns: Column[];
+  /** 全部的列 */
+  allColumns: Column[];
+  /** 列表展示的列 */
   showColumnKeys: string[];
+  /** 自定义列表选中的列 */
+  checkedColumnKeys: string[];
   /** 是否展示筛选框 */
   visibleFilter: boolean;
+  /** 是否展示附件 */
+  visibleFile: boolean;
   /** 当前拖动的数据 */
   currentColumn?: Column;
+  /** 附件ids */
+  files?: string;
 }
 @Component({
   name: "HtTable",
   components: {
     PageInfo,
+    HtUploadFiles,
   },
 })
 export default class HtTable extends Vue {
@@ -281,12 +328,14 @@ export default class HtTable extends Vue {
   @Prop() emptyText?: string | number;
   @Prop() headerRowStyle?: any;
   @Prop() headerRowClassName?: any;
+  @Prop() headerCellClassName?: any;
   @Prop() headerCellStyle?: any;
 
   /** 分页的所有额外信息通过此参数传递 */
   @Prop() pagination?: any;
   state: State = {
     loading: false,
+    files: undefined,
     pageInfo: {
       currentPage: 1,
       pageSize: 10,
@@ -294,42 +343,65 @@ export default class HtTable extends Vue {
       totalCount: 0,
     },
     showColumns: [],
+    allColumns: [],
     currentColumn: undefined,
     visibleFilter: false,
+    visibleFile: false,
     showColumnKeys: [],
+    checkedColumnKeys: [],
   };
   created() {
     this.setPageInfo(this.pageInfo);
-    this.state.showColumns = this.columns;
+    //this.setColumns(this.columns);
     if (this.uuId) {
       //通过uuid获取缓存起来的header显示信息
-      const showKeys: string | null = window.localStorage.getItem(
+      //-todo
+      //---columns 要改变
+      //---showColumnKeys 要改变
+      //---排列顺序要改变 todo
+      const allColumns: string | null = window.localStorage.getItem(
         "table_" + this.uuId
       );
-      if (showKeys) {
-        this.state.showColumnKeys = JSON.parse(showKeys);
+      if (allColumns) {
+        this.state.allColumns = JSON.parse(allColumns);
+        this.state.showColumns = JSON.parse(allColumns);
+        this.getShowKeys(this.state.allColumns);
       } else {
-        this.creatInitColumnKey();
+        this.creatInitColumnKey(this.columns || []);
       }
     } else {
-      this.creatInitColumnKey();
+      this.creatInitColumnKey(this.columns || []);
     }
   }
-  creatInitColumnKey() {
-    this.state.showColumnKeys = this.columns.reduce((arr: string[], item) => {
-      arr.push(item.key);
-      return arr;
-    }, []);
+  /** 获取展示的keys值 */
+  getShowKeys(data: Column[]) {
+    const arr: string[] = [];
+    data.forEach((item) => {
+      if (item.checked) {
+        arr.push(item.key);
+      }
+    });
+    this.state.showColumnKeys = arr;
   }
-  changeColumns(node: any, checked: boolean) {
-    let { showColumnKeys } = this.state;
-    if (checked) {
-      showColumnKeys.push(node.key);
-    } else {
-      showColumnKeys = showColumnKeys.filter((item) => item !== node.key);
-    }
-    this.state.showColumnKeys = showColumnKeys;
+  /** 初始化columns */
+  creatInitColumnKey(columns: Column[]) {
+    this.state.allColumns = columns;
+    this.state.showColumns = columns;
+    this.state.allColumns.forEach((item) => {
+      item.checked = true;
+    });
+    this.getShowKeys(this.state.allColumns);
+    // this.state.showColumnKeys = this.columns.reduce((arr: string[], item) => {
+    //   arr.push(item.key);
+    //   return arr;
+    // }, []);
+  }
+  /** 展示附件信息 */
+  showFiles(val = "") {
+    this.state.files = val;
+    this.state.visibleFile = true;
   }
+
   handleDragStart(node: any) {
     this.state.currentColumn = node.data;
   }
@@ -343,7 +415,7 @@ export default class HtTable extends Vue {
     // console.log("tree drag over: ", dropNode.label);
   }
   handleDragEnd(draggingNode: any, dropNode: any, dropType: string) {
-    const { showColumns, currentColumn, showColumnKeys } = this.state;
+    const { showColumns, currentColumn, checkedColumnKeys } = this.state;
     // if ((dropType === "before" || dropType === "after") && currentColumn) {
     //   const data = showColumns.filter(
     //     (item) => item.key !== currentColumn?.key
@@ -353,11 +425,12 @@ export default class HtTable extends Vue {
     //     ? data.splice(index, 0, currentColumn)
     //     : data.splice(index + 1, 0, currentColumn);
     // console.log("tree drag end: ", currentColumn, showColumnKeys);
-    if (currentColumn && showColumnKeys.includes(currentColumn.key)) {
+    if (currentColumn && checkedColumnKeys.includes(currentColumn.key)) {
       setTimeout(() => {
         (this.$refs.tree as any).setChecked(currentColumn, true);
       }, 0);
     }
+    //console.log("handleDragEnd", this.columns);
 
     // }
   }
@@ -399,8 +472,46 @@ export default class HtTable extends Vue {
     // };
     return tempObj ? tempObj[keyArr[i]] : null;
   }
+  /** 现在自定义列弹窗 */
   showFilterModel() {
     this.state.visibleFilter = true;
+    this.state.checkedColumnKeys = this.state.showColumnKeys;
+    this.state.allColumns = JSON.parse(JSON.stringify(this.state.showColumns));
+  }
+  /** 自定义列表时候选中列 */
+  changeColumns(node: any, checked: boolean) {
+    let { checkedColumnKeys } = this.state;
+    if (checked) {
+      checkedColumnKeys.push(node.key);
+    } else {
+      checkedColumnKeys = checkedColumnKeys.filter((item) => item !== node.key);
+    }
+    this.state.checkedColumnKeys = checkedColumnKeys;
+  }
+  /** 自定义列排序的确定功能 */
+  confirmSortAndshow() {
+    this.state.loading = true;
+    this.state.showColumns = [];
+    const { allColumns, checkedColumnKeys } = this.state;
+    //对列表check复制
+    allColumns.forEach(
+      (item) => (item.checked = checkedColumnKeys.includes(item.key))
+    );
+    //将复选框选中行展示到列中 */
+    this.state.showColumnKeys = checkedColumnKeys;
+    //将列的顺序进行处理已经存储
+
+    if (this.uuId) {
+      window.localStorage.setItem(
+        "table_" + this.uuId,
+        JSON.stringify(allColumns)
+      );
+    }
+    this.state.showColumns = allColumns;
+    this.state.visibleFilter = false;
+    this.state.loading = false;
+    /** 自定义列回调 */
+    this.$emit("customColumn", allColumns);
   }
   /** 遍历循环展示row数据 */
   showValue(row: any, key: string) {
@@ -458,9 +569,47 @@ export default class HtTable extends Vue {
       };
     }
   }
+  get getAllColumns() {
+    const { allColumns } = this.state;
+    return allColumns.filter((item) => !item.hide);
+  }
   @Watch("columns")
   setColumns(columns?: Column[]) {
-    this.state.showColumns = columns || [];
+    const { showColumns } = this.state;
+    /** 当前所有key */
+    let allKeys: any = {};
+    /** 新来的所有key */
+    let newKeys: any = {};
+    showColumns.forEach((item) => {
+      allKeys = { ...allKeys, [item.key]: true };
+    });
+    columns?.forEach((item) => {
+      newKeys = { ...newKeys, [item.key]: true };
+    });
+    /** 查找出所有的当前不存在的key */
+    const newColumns = columns?.filter((item) => !allKeys[item.key]);
+    /** 查找出当前已有的key */
+    const successColumns = showColumns?.filter((item) => newKeys[item.key]);
+    const tempColumns: Column[] = [];
+    const lastColumn: Column[] = [];
+    successColumns.forEach((item, index) => {
+      /** 去除操作列 */
+      if (item.key !== "handel") {
+        tempColumns.push(item);
+      } else {
+        lastColumn.push(item);
+      }
+    });
+    newColumns?.forEach((item, index) => {
+      /** 去除操作列 */
+      if (item.key !== "handel") {
+        tempColumns.push(item);
+      } else {
+        lastColumn.push(item);
+      }
+    });
+    /** 去除多余并且添加新增的 */
+    this.creatInitColumnKey([...tempColumns, ...lastColumn]);
   }
 }
 </script>

package/src/packages/HtUploadFiles/index.ts

@@ -0,0 +1,14 @@
+/*
+ * @Descripttion:
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2022-02-11 14:26:45
+ */
+import HtUploadFiles from "./index.vue";
+(HtUploadFiles as any).install = function (Vue: any) {
+
+  Vue.component("HtUploadFiles", HtUploadFiles);
+};
+export default HtUploadFiles;

package/src/packages/HtUploadFiles/index.vue

@@ -0,0 +1,234 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-02-11 14:26:23
+ * @LastEditors: hutao
+ * @LastEditTime: 2022-02-11 14:36:54
+-->
+<!--
+ * @Descripttion: 附件列表  ------没有搞完
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-12-30 16:07:59
+ * @LastEditors: hutao
+ * @LastEditTime: 2022-02-10 15:11:11
+-->
+<template>
+  <div>
+    <el-upload class="ht-upload"
+               v-if="!disabled"
+               style="width:368px;height:108px"
+               :show-file-list="false"
+               :disabled="disabled"
+               :on-success="onSuccess"
+               :before-upload="beforeUpload"
+               drag
+               action="/files/api/filing/file/upload"
+               multiple>
+      <!-- <i class="el-icon-upload"></i> -->
+      <div style="margin-top:8px;font-size:12px;color:#999"
+           class="el-upload__text">拖动文件到此处，或<br /><em>点击上传</em></div>
+      <!-- <div class="el-upload__tip"
+                     slot="tip">只能上传jpg/png文件，且不超过5M</div> -->
+    </el-upload>
+    <ul class="ht-ul-upload">
+      <li :key="item.fileToken"
+          v-for=" (item,index) in state.filesInfo">
+        <a @click="downLoadFile(item)"><i class="le-icon el-icon-document"
+             style="margin-right:7px"></i>{{item.fileName}}</a>
+        <span>
+
+          <i v-if="!disabled"
+             class="el-icon  el-icon-circle-check"></i>
+          <i v-if="!disabled"
+             class="el-icon  el-icon-close"
+             @click="delItem(item,index)"
+             title="删除"></i>
+          <i class="el-icon  el-icon-download"
+             style="margin-right:24px"
+             @click="downLoadFile(item)"
+             title="下载"></i>
+        </span>
+
+      </li>
+    </ul>
+    <a :href="state.fileSrc"
+       target="_blank"
+       v-show="false"
+       ref="download1"></a>
+  </div>
+</template>
+<script lang='ts'>
+import { _axios } from "vue-kst-auth";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  fileSrc: string;
+  /** 图片地址 */
+  fileToken: string[];
+  dialogVisible: boolean;
+  /**   附件详情列表 */
+  filesInfo: CreateAttachmentDto[];
+}
+interface FileType {
+  fileName: string;
+  fileSize?: number;
+  fileToken?: string;
+  fileType?: string;
+}
+interface CreateAttachmentDto {
+  fileToken?: string | undefined;
+  fileName?: string | undefined;
+  fileSize?: number;
+  fileType?: string | undefined;
+  sortNum?: number;
+}
+@Component({
+  name: "HtUploadFiles",
+})
+export default class HtUploadFiles extends Vue {
+  @Prop() value!: string;
+  /* 是否只读 */
+  @Prop({ default: false }) readonly?: boolean;
+  /** 是否禁用 */
+  @Prop() disabled?: boolean;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    fileSrc: "",
+    fileToken: [],
+    filesInfo: [],
+    dialogVisible: false,
+  };
+  /** 生命周期 */
+  created() {
+    this.onValue(this.value);
+  }
+  /** 方法 */
+  /** 上传文件前验证 */
+
+  /** 附件上传之前的判断 */
+  beforeUpload(file: File) {
+    const isLt10MB = file.size / 1024 / 1024 < 5;
+    const arr = ["jpg", "png", "xlsx", "lsx", "doc", "pdf"];
+    const lastArr = file.name.split(".");
+    const type = lastArr[lastArr.length - 1];
+    if (!isLt10MB) {
+      this.$message.error("大小不能超过 5MB!");
+    }
+    if (arr.includes(type)) {
+      return true;
+    } else {
+      this.$notify.error(`只能上传${arr.toString()}格式文件`);
+      return false;
+    }
+  }
+  /**下载文件 */
+  downLoadFile(item: any) {
+    this.state.fileSrc = `/files/api/filing/file/download/${item.fileToken}`;
+    setTimeout(() => {
+      const adom: any = this.$refs.download1;
+      adom.click();
+    }, 100);
+  }
+  /** 附件上传成功 */
+  onSuccess(response: { fileToken: string }) {
+    console.log("response, file, fileList", response.fileToken);
+    //this.state.files.push(response.fileToken);
+    this.getFileInfo(response.fileToken);
+  }
+  /** 获取到的附件列表详情 */
+  getFileInfo(id: string) {
+    _axios.get("/files/api/filing/file/" + id).then((res) => {
+      this.state.filesInfo.push(res.data);
+    });
+  }
+  /** 删除附件列表 */
+  delItem(item: FileType, index: number) {
+    const { filesInfo } = this.state;
+    if (item.fileToken) {
+      filesInfo.splice(index, 1);
+      this.state.filesInfo = filesInfo;
+    }
+  }
+  /** 请求所有的附件信息 */
+  async getAllFileInfo() {
+    const { fileToken } = this.state;
+    //this.state.filesInfo = [];
+    for (let i = 0; i < fileToken.length; i++) {
+      if (
+        this.state.filesInfo.findIndex(
+          (item) => item.fileToken === fileToken[i]
+        ) < 0
+      ) {
+        await _axios
+          .get("/files/api/filing/file/" + fileToken[i])
+          .then((res) => {
+            this.state.filesInfo.push(res.data);
+          });
+      }
+    }
+  }
+  /** 监听 */
+  /** 计算属性 */
+  get fileList() {
+    return [];
+  }
+  @Watch("state.filesInfo")
+  onFileToken(val: CreateAttachmentDto[], old: string) {
+    const arr: string[] = [];
+    val.forEach((item) => {
+      if (item.fileToken) arr.push(item.fileToken);
+    });
+    this.$emit("input", arr.toString());
+  }
+  @Watch("value")
+  onValue(val: string) {
+    if (val) {
+      this.state.fileToken = val.split(",");
+      this.getAllFileInfo();
+    } else {
+      this.state.fileToken = [];
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.ht-ul-upload {
+  li {
+    width: 100%;
+    list-style: none;
+    height: 40px;
+    line-height: 40px;
+    padding: 0 8px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    a {
+      color: #606266;
+      font-size: 12px;
+    }
+    .el-icon-close {
+      display: none;
+    }
+    &:hover {
+      background: #eee;
+      a {
+        color: var(--primary);
+      }
+      .el-icon-close {
+        display: block;
+        line-height: 40px;
+      }
+      .el-icon-circle-check {
+        display: none;
+      }
+    }
+    .el-icon-circle-check {
+      color: var(--primary);
+    }
+  }
+}
+</style>

package/src/packages/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-04 09:47:12
+ * @LastEditTime: 2022-02-11 14:29:18
  */
 
 // 导入组件
@@ -18,10 +18,11 @@ import HtExport from './HtExport/index'
 import HtUpload from './HtUpload/index'
 import HtMd from './HtMd/index'
 import HtCountDown from './HtCountDown/index'
+import HtUploadFiles from './HtUploadFiles/index'
 
 
 // 存储组件列表
-const components = [HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown]
+const components = [HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles]
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue: any) {
   // 判断是否安装
@@ -37,6 +38,6 @@ export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
   // 以下是具体的组件列表
-  HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown
+  HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles
 }