htui-yllkbz 1.2.53 → 1.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.2.53",
+  "version": "1.2.57",
   "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-13 17:54:04
+ * @LastEditTime: 2022-02-13 16:12:46
 -->
 <template>
   <div v-loading="state.loading"
@@ -104,12 +104,14 @@
                                    type="tag"></common-org-info>
                   <span v-else>--</span>
                 </template>
+                <!-- 处理基础数据 -->
                 <template v-else-if="item.type==='common'">
+
                   <div v-if="getPropByPath(row,item.key)"
                        is='common-datas-info-id'
-                       :user-id="item.commonType==='userId'?[getPropByPath(row,item.key)]:'[]'"
-                       :department-id="item.commonType==='departmentId'?[getPropByPath(row,item.key)]:'[]'"
-                       :role-id="item.commonType==='roleId'?[getPropByPath(row,item.key)]:'[]'"
+                       :user-id="item.commonType==='userId'?JSON.stringify([getPropByPath(row,item.key)]):'[]'"
+                       :department-id="item.commonType==='departmentId'?JSON.stringify([getPropByPath(row,item.key)]):'[]'"
+                       :role-id="item.commonType==='roleId'?JSON.stringify([getPropByPath(row,item.key)]):'[]'"
                        :base-data-id="item.commonType==='baseDataId'?getPropByPath(row,item.key):''"
                        :base-data-value="item.commonType==='baseDataValue'?getPropByPath(row,item.key):''"
                        :base-data-name="item.commonType==='baseDataName'?getPropByPath(row,item.key):''"
@@ -136,7 +138,7 @@
                   </div>
                   <span v-else>--</span>
                 </template>
-                <!-- 处理部门人员 -->
+                <!-- 处理布尔值显示 -->
                 <template v-else-if="item.type==='boolean'">
                   <el-tag :type="'success'"
                           :size="'small'"
@@ -145,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>
@@ -195,8 +207,10 @@
                :close-on-click-modal="true"
                width="400px"
                :center="true">
-      <div style='overflow:hidden;height:500px'>
-        <el-scrollbar style='height: 517px'>
+               <p slot="title"
+         style="font-weight:700;font-size:18px;float:left;margin:0">自定义列展示</p>
+      <div style='overflow:hidden;height:40vh;margin-top:12px'>
+        <el-scrollbar style='height: calc(40vh + 17px)'>
           <el-tree :data="columns"
                    ref="tree"
                    show-checkbox
@@ -216,18 +230,36 @@
             <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>
     </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>
 </template>
 <script lang='ts'>
 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;
@@ -236,13 +268,18 @@ interface State {
   showColumnKeys: string[];
   /** 是否展示筛选框 */
   visibleFilter: boolean;
+  /** 是否展示附件 */
+  visibleFile: boolean;
   /** 当前拖动的数据 */
   currentColumn?: Column;
+  /** 附件ids */
+  files?: string;
 }
 @Component({
   name: "HtTable",
   components: {
     PageInfo,
+    HtUploadFiles,
   },
 })
 export default class HtTable extends Vue {
@@ -286,6 +323,7 @@ export default class HtTable extends Vue {
   @Prop() pagination?: any;
   state: State = {
     loading: false,
+    files: undefined,
     pageInfo: {
       currentPage: 1,
       pageSize: 10,
@@ -295,6 +333,7 @@ export default class HtTable extends Vue {
     showColumns: [],
     currentColumn: undefined,
     visibleFilter: false,
+    visibleFile: false,
     showColumnKeys: [],
   };
   created() {
@@ -320,6 +359,11 @@ export default class HtTable extends Vue {
       return arr;
     }, []);
   }
+  /** 展示附件信息 */
+  showFiles(val = "") {
+    this.state.files = val;
+    this.state.visibleFile = true;
+  }
   changeColumns(node: any, checked: boolean) {
     let { showColumnKeys } = this.state;
     if (checked) {

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
 }
 

package/src/packages/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-13 15:08:32
+ * @LastEditTime: 2022-02-10 10:33:52
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -69,13 +69,15 @@ export interface Column {
   hide?: boolean;
   /**  时间是否跨行展示 */
   spread?: boolean;
-  /** 通过type展示相应的数据  用户id|部门id|时间格式化|是否布尔值*/
-  type?: 'userId' | 'org' | 'time' | 'common' | 'boolean' | 'img';
+  /** 通过type展示相应的数据  用户id|部门id|时间格式化|是否布尔值|图片 |附件*/
+  type?: 'userId' | 'org' | 'time' | 'common' | 'boolean' | 'img' | 'file';
   /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  */
   commonType?: 'userId' | 'departmentId' | 'baseDataId' | 'roleId' | 'baseDataName' | 'baseDataValue';
   showOverflowTooltip?: boolean;
   /** 筛选时候是否禁用 */
   disabled?: boolean;
+   /** 自定义列时候展示额外信息 */
+  property?: string;
 }
 export interface PageInfoType {
   currentPage: number;

package/src/views/About.vue

@@ -4,13 +4,13 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-11 10:29:04
+ * @LastEditTime: 2022-02-13 16:11:09
 -->
 <template>
   <div>
 
-    <el-button type=""
-               @click="test">test</el-button>
+    <!-- <el-button type=""
+               @click="test">test</el-button> -->
     <!-- <ht-count-down :stopwatch="true"
                      :frequency="200"
                      :start="!state.start">
@@ -25,18 +25,14 @@
         </template>
       </ht-count-down> -->
 
-    <ht-md v-model="state.content"
-           :subfield="true"></ht-md>
+    <!-- <ht-md v-model="state.content"
+           :subfield="true"></ht-md> -->
     <div ref="ht-pdf">
       <HtTable :data="state.data"
                :height="200"
+               :showFilter="true"
                :columns="state.columns">
-        <div slot="sex"
-             slot-scope="{row}">{{row.sex?'男':'女'}}</div>
-        <div slot="age"
-             slot-scope="{row}">
-          <el-tag>{{row.age}}</el-tag>
-        </div>
+
         <div slot="header_name">测试名字</div>
       </HtTable>
     </div>
@@ -86,17 +82,17 @@ export default class Index extends Vue {
     data: [
       {
         name: "胡涛",
+        
         age: 12,
-        sex: 0,
+        sex: "e49961a4f385e5d341ce3a01ee674c90ea9e037b734228fe26753a01ee674c90,e49961a4f385e5d341ce3a01ee674c90ea9e037b734228fe26753a01ee674c90",
         id: 1,
-
-        test: { title: "测试" },
+        test: { title: "33476c23-9faa-22d3-3ee6-39f97d173566" },
         time: "2022-01-20T00:00:00+08:00",
       },
       {
         name: "胡涛",
         age: 12,
-        sex: 1,
+        sex: "e49961a4f385e5d341ce3a01ee674c90ea9e037b734228fe26753a01ee674c90",
         id: 2,
         test: { title: "测试" },
         time: "2022-01-20T00:00:00+08:00",
@@ -104,7 +100,7 @@ export default class Index extends Vue {
       {
         name: "胡涛",
         age: 12,
-        sex: 1,
+        sex: "tt",
         id: 3,
         test: { title: "测试" },
         time: "2022-01-20T00:00:00+08:00",
@@ -112,7 +108,7 @@ export default class Index extends Vue {
       {
         name: "胡涛",
         age: 12,
-        sex: 0,
+        sex: "tt",
         id: 4,
         test: { title: "测试" },
         time: "2022-01-20T00:00:00+08:00",
@@ -120,7 +116,7 @@ export default class Index extends Vue {
       {
         name: "胡涛",
         age: 12,
-        sex: 0,
+        sex: "tt",
         id: 41,
         test: { title: "测试" },
         time: "2022-01-20T00:00:00+08:00",
@@ -131,6 +127,7 @@ export default class Index extends Vue {
         title: "姓名",
         key: "test.title",
         width: "300px",
+        property: "base",
         disabled: true,
       },
       {
@@ -150,6 +147,7 @@ export default class Index extends Vue {
       {
         title: "性别",
         key: "sex",
+        type: "file",
       },
     ],
   };