htui-yllkbz 1.4.9 → 1.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.4.9",
+  "version": "1.4.11",
   "port": "8082",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",

package/src/packages/HtTable/htTableColumn.vue

@@ -0,0 +1,242 @@
+<template>
+  <el-table-column
+    :label="item.title"
+    :fixed="item.fixed"
+    :align="item.align"
+    v-if="fromColumn ? !item.hide : !item.hide && item.checked"
+    :resizable="item.resizable"
+    :header-align="item.headerAlign"
+    :column-key="item.columnKey"
+    :class-name="item.className"
+    :prop="item.key"
+    :show-overflow-tooltip="
+      item.type === 'common' || item.type === 'org' || item.type === 'userId'
+        ? false
+        : item.showOverflowTooltip === false
+        ? false
+        : true
+    "
+    :sortable="item.sortable"
+    :sort-method="item.sortMethod"
+    :sort-orders="item.sortOrders"
+    :formatter="item.formatter"
+    :sort-by="item.sortBy"
+    :min-width="item.minWidth"
+    :width="item.width"
+  >
+    <template v-for="(child, childindex) in item.children">
+      <HtTableColumn
+        :item="child"
+        :fromColumn="true"
+        :key="`${child.key}_${childindex}_1`"
+      ></HtTableColumn>
+    </template>
+    <template slot-scope="{ row, column, $index }">
+      <slot :name="item.key" :row="row" :column="column" :rowIndex="$index">
+        <!-- 处理部门 -->
+        <template v-if="item.type === 'org'">
+          <HtOrgInfo
+            v-if="getPropByPath(row, item.key)"
+            :org-id="getPropByPath(row, item.key)"
+            type="tag"
+          ></HtOrgInfo>
+          <span v-else>--</span>
+        </template>
+        <!-- 处理基础数据 -->
+        <template v-else-if="item.type === 'common'">
+          <HtShowBaseData
+            v-if="getPropByPath(row, item.key)"
+            :hide-code="item.hideCode"
+            :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)
+                : ''
+            "
+            :base-data-info="true"
+          >
+          </HtShowBaseData>
+
+          <span v-else>--</span>
+        </template>
+        <!-- 处理部门人员 -->
+        <template v-else-if="item.type === 'userId'">
+          <HtShowBaseData
+            v-if="getPropByPath(row, item.key)"
+            :user-id="JSON.stringify(getPropByPath(row, item.key))"
+            :base-data-info="true"
+          >
+          </HtShowBaseData>
+
+          <span v-else>--</span>
+        </template>
+        <!-- 处理时间 yyyy-mm-dd HH:mm:ss -->
+        <template v-else-if="item.type === 'time'">
+          <div v-if="getPropByPath(row, item.key)" class="ht-column-cell">
+            <span v-if="!item.spread">
+              {{
+                getPropByPath(row, item.key)
+                  .replace('T', ' ')
+                  .slice(0, 19)
+              }}</span
+            >
+            <template v-else>
+              <p style="color:var(--primary);margin:0;padding:0">
+                {{ getPropByPath(row, item.key).slice(11, 19) }}
+              </p>
+              <p style="margin:0;padding:0">
+                {{
+                  getPropByPath(row, item.key)
+                    .replace('T', ' ')
+                    .slice(0, 10)
+                }}
+              </p>
+            </template>
+          </div>
+          <span v-else>--</span>
+        </template>
+        <!-- 处理日期 yyyy-mm-dd -->
+        <template v-else-if="item.type === 'date'">
+          <div v-if="getPropByPath(row, item.key)" class="ht-column-cell">
+            <span>
+              {{
+                getPropByPath(row, item.key)
+                  .replace('T', ' ')
+                  .slice(0, 10)
+              }}</span
+            >
+          </div>
+          <span v-else>--</span>
+        </template>
+        <!-- 处理布尔值显示 -->
+        <template v-else-if="item.type === 'boolean'">
+          <el-tag
+            :type="'success'"
+            :size="'small'"
+            v-if="getPropByPath(row, item.key)"
+            >是</el-tag
+          >
+          <el-tag type="danger" :size="'small'" v-else>否</el-tag>
+        </template>
+        <!-- 处理新资产的单位 -->
+        <template v-else-if="item.type === 'unit'">
+          <HtSelectUnit
+            :readonly="true"
+            :value="getPropByPath(row, item.key)"
+          ></HtSelectUnit>
+        </template>
+        <!-- 处理新资产的单位 -->
+        <template v-else-if="item.type === 'position'">
+          <HtSelectPosition
+            :readonly="true"
+            :value="getPropByPath(row, item.key)"
+          ></HtSelectPosition>
+        </template>
+        <!-- 处理图片显示 -->
+        <template v-else-if="item.type === 'img'">
+          <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="$emit('showFiles', getPropByPath(row, item.key))"
+              style="color:var(--primary);cursor:pointer"
+              >{{
+                Array.isArray(getPropByPath(row, item.key))
+                  ? getPropByPath(row, item.key).length
+                  : getPropByPath(row, item.key).split(',').length
+              }}</i
+            >
+          </span>
+          <span v-else>--</span>
+        </template>
+        <!-- 其他 -->
+        <span v-else>{{ getPropByPath(row, item.key) }}</span>
+      </slot>
+    </template>
+    <!-- 处理重定义table头相关信息 header_key -->
+    <template slot-scope="{ column, $index }" slot="header">
+      <slot :name="'header_' + item.key" :column="column" :$index="$index">{{
+        item.title
+      }}</slot>
+    </template>
+  </el-table-column>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Column } from '../type';
+import HtShowBaseData from '@/packages/HtShowBaseData';
+import HtOrgInfo from '@/packages/HtOrgInfo';
+import HtUploadFiles from '@/packages/HtUploadFiles/index.vue';
+import HtSelectUnit from '@/packages/HtSelectUnit';
+import { getPropByPath } from './table-span-method';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+}
+@Component({
+  components: {
+    HtUploadFiles,
+    HtShowBaseData,
+    HtOrgInfo,
+    HtSelectUnit,
+    HtTableColumn: () => import('./htTableColumn.vue'),
+    //  MenuItem: () => import('./menuItem.vue'),
+  },
+})
+export default class Index extends Vue {
+  /** 单个Column信息 */
+  @Prop() item!: Column;
+  /** 是否来自循环嵌套 */
+  @Prop() fromColumn!: boolean;
+  /** 数据 */
+  state: State = {
+    loading: false,
+  };
+  /** 生命周期 */
+  /** 方法 */
+  getPropByPath(obj: any, path: string, strict = true) {
+    return getPropByPath(obj, path, strict);
+  }
+  /** 监听 */
+  /** 计算属性 */
+}
+</script>
+<style lang="scss" scoped></style>

package/src/packages/HtTable/index.ts

@@ -4,9 +4,10 @@
  * @Author: hutao
  * @Date: 2021-11-15 15:00:57
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-19 14:10:11
+ * @LastEditTime: 2023-04-09 10:42:47
  */
-import HtTable from "./index.vue";
+// import HtTable from "./index.vue";
+import HtTable from "./table.vue";
 (HtTable as any).install = function (Vue: any) {
 
   Vue.component("HtTable", HtTable);

package/src/packages/HtTable/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-04 09:59:39
+ * @LastEditTime: 2023-04-09 10:33:03
 -->
 <template>
   <div v-loading="state.loading" style="background:#fff">
@@ -230,7 +230,7 @@
 
                   <span v-else>--</span>
                 </template>
-                <!-- 处理时间 -->
+                <!-- 处理时间 yyyy-mm-dd HH:mm:ss -->
                 <template v-else-if="item.type === 'time'">
                   <div
                     v-if="getPropByPath(row, item.key)"
@@ -258,6 +258,22 @@
                   </div>
                   <span v-else>--</span>
                 </template>
+                <!-- 处理日期 yyyy-mm-dd -->
+                <template v-else-if="item.type === 'date'">
+                  <div
+                    v-if="getPropByPath(row, item.key)"
+                    class="ht-column-cell"
+                  >
+                    <span>
+                      {{
+                        getPropByPath(row, item.key)
+                          .replace('T', ' ')
+                          .slice(0, 10)
+                      }}</span
+                    >
+                  </div>
+                  <span v-else>--</span>
+                </template>
                 <!-- 处理布尔值显示 -->
                 <template v-else-if="item.type === 'boolean'">
                   <el-tag

package/src/packages/HtTable/table-span-method.ts

@@ -0,0 +1,135 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2023-04-09 14:33:12
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-09 15:45:30
+ */
+/**  处理table里面根据字段获取对应的值 */
+export function getPropByPath(obj: any, path: string, strict = true) {
+  let tempObj = obj;
+  path = path.replace(/\[(\w+)\]/g, '.$1');
+  path = path.replace(/^\./, '');
+
+  const keyArr = path.split('.');
+  let i = 0;
+  for (let len = keyArr.length; i < len - 1; ++i) {
+    if (!tempObj && !strict) break;
+    const key = keyArr[i];
+    if (key in tempObj) {
+      tempObj = tempObj[key];
+    } else {
+      if (strict) {
+        throw new Error(`table中${path}字段发生错误,请检查`);
+      }
+      break;
+    }
+  }
+  // return {
+  //   o: tempObj,
+  //   k: keyArr[i],
+  //   v: tempObj ? tempObj[keyArr[i]] : null,
+  // };
+  return tempObj ? tempObj[keyArr[i]] : null;
+}
+/**
+ * 合并相同数据，导出合并行所需的方法(只适合el-table)
+ * @param {Array} dataArray el-table表数据源
+ * @param {Array} mergeRowProp 合并行的列prop
+ * @param {Array} sameRuleRowProp 相同合并规则行的列prop
+ * @param {Object} connentProp 某个字段的合并基于其余字段的key是否相同
+ */
+export function getSpanMethod(dataArray: any[], mergeRowProp: string[], sameRuleRowProp: string[], connentProp: any) {
+
+  /**
+   * 要合并行的数据
+   */
+  const rowspanNumObject: any = {};
+
+  //初始化 rowspanNumObject
+  mergeRowProp.map(item => {
+    rowspanNumObject[item] = new Array(dataArray.length).fill(1, 0, 1).fill(0, 1);
+    rowspanNumObject[`${item}-index`] = 0;
+  });
+  function isConnent(strArr: string[], num: number) {
+    let isConnn = true;
+    for (let i = 0; i < strArr.length; i++) {
+      if (getPropByPath(dataArray[num], strArr[i]) !== getPropByPath(dataArray[num - 1], strArr[i])) {
+        isConnn = false
+      }
+    }
+    return isConnn
+  }
+  //计算相关的合并信息
+  for (let i = 1; i < dataArray.length; i++) {
+    mergeRowProp.map(key => {
+      const index = rowspanNumObject[`${key}-index`];
+
+      // if (dataArray[i][key] === dataArray[i - 1][key]) {
+      //   rowspanNumObject[key][index]++;
+      // } else {
+      //   rowspanNumObject[`${key}-index`] = i;
+      //   rowspanNumObject[key][i] = 1;
+      // }
+      if (getPropByPath(dataArray[i], key) === getPropByPath(dataArray[i - 1], key)) {
+        const connetKey = connentProp[key] as any;
+
+        if (connetKey) {
+          const connetKeyArr = connetKey.split(",");
+          if (isConnent(connetKeyArr, i)) {
+            rowspanNumObject[key][index]++;
+          }
+          // if (getPropByPath(dataArray[i], connetKey) === getPropByPath(dataArray[i - 1], connetKey)) {
+
+          // }
+          else {
+            rowspanNumObject[`${key}-index`] = i;
+            rowspanNumObject[key][i] = 1;
+          }
+
+        }
+        else {
+          rowspanNumObject[key][index]++;
+        }
+
+      } else {
+        rowspanNumObject[`${key}-index`] = i;
+        rowspanNumObject[key][i] = 1;
+      }
+
+    });
+  }
+
+  /**
+   * 添加同规则合并行的数据
+   */
+  if (sameRuleRowProp !== undefined) {
+    const k = Object.keys(rowspanNumObject).filter(key => {
+      if (!key.includes('index')) {
+        return key
+      }
+    })[0]
+    for (const prop of sameRuleRowProp) {
+      rowspanNumObject[prop] = rowspanNumObject[k]
+      rowspanNumObject[`${prop}-index`] = rowspanNumObject[`${k}-index`]
+      mergeRowProp.push(prop)
+    }
+  }
+
+  /**
+   * 导出合并方法
+   */
+  const spanMethod = function ({ row, column, rowIndex, columnIndex }: any) {
+    // const colData = getPropByPath(row, column['property'])
+    if (mergeRowProp.includes(column['property'])) {
+      const rowspan = rowspanNumObject[column['property']][rowIndex];
+      if (rowspan > 0) {
+        return { rowspan: rowspan, colspan: 1 }
+      }
+      return { rowspan: 0, colspan: 0 }
+    }
+    return { rowspan: 1, colspan: 1 }
+  };
+  return spanMethod;
+}