htui-yllkbz 1.2.54 → 1.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.2.54",
+  "version": "1.2.55",
   "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-11 14:34:01
 -->
 <template>
   <div v-loading="state.loading"
@@ -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>
@@ -223,12 +234,30 @@
         </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">附件查看</p>
+      <el-divider></el-divider>
+      <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;
@@ -237,13 +266,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 {
@@ -287,6 +321,7 @@ export default class HtTable extends Vue {
   @Prop() pagination?: any;
   state: State = {
     loading: false,
+    files: undefined,
     pageInfo: {
       currentPage: 1,
       pageSize: 10,
@@ -296,6 +331,7 @@ export default class HtTable extends Vue {
     showColumns: [],
     currentColumn: undefined,
     visibleFilter: false,
+    visibleFile: false,
     showColumnKeys: [],
   };
   created() {
@@ -321,6 +357,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,8 +69,8 @@ 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;

package/src/views/About.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-16 09:30:07
+ * @LastEditTime: 2022-02-11 13:46:07
 -->
 <template>
   <div>
@@ -31,12 +31,7 @@
       <HtTable :data="state.data"
                :height="200"
                :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>
@@ -87,16 +82,15 @@ export default class Index extends Vue {
       {
         name: "胡涛",
         age: 12,
-        sex: 0,
+        sex: "e49961a4f385e5d341ce3a01ee674c90ea9e037b734228fe26753a01ee674c90,e49961a4f385e5d341ce3a01ee674c90ea9e037b734228fe26753a01ee674c90",
         id: 1,
-
         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 +98,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 +106,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 +114,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,7 +125,6 @@ export default class Index extends Vue {
         title: "姓名",
         key: "test.title",
         width: "300px",
-
         disabled: true,
       },
       {
@@ -151,6 +144,7 @@ export default class Index extends Vue {
       {
         title: "性别",
         key: "sex",
+        type: "file",
       },
     ],
   };