htui-yllkbz 1.4.12 → 1.4.14

package/package.json

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

package/src/packages/HtTable/htTableColumn.vue

@@ -24,15 +24,17 @@
     :min-width="item.minWidth"
     :width="item.width"
   >
-    <template v-for="(child, childindex) in item.children">
+    <template v-if="item.children && item.children.length">
       <HtTableColumn
         :item="child"
+        v-for="(child, childindex) in item.children"
         @showFiles="(val) => $emit('showFiles', val)"
         :fromColumn="true"
         :key="`${child.key}_${childindex}_1`"
       ></HtTableColumn>
     </template>
     <template slot-scope="{ row, column, $index }">
+      {{ item.type }}
       <slot :name="item.key" :row="row" :column="column" :rowIndex="$index">
         <!-- 处理部门 -->
         <template v-if="item.type === 'org'">
@@ -207,12 +209,13 @@ 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({
+  name: 'HtTableColumn',
   components: {
     HtUploadFiles,
     HtShowBaseData,
@@ -233,8 +236,34 @@ export default class Index extends Vue {
   };
   /** 生命周期 */
   /** 方法 */
+  // getPropByPath(obj: any, path: string, strict = true) {
+  //   return getPropByPath(obj, path, strict);
+  // }
   getPropByPath(obj: any, path: string, strict = true) {
-    return getPropByPath(obj, path, strict);
+    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;
   }
   /** 监听 */
   /** 计算属性 */

package/src/packages/HtTable/index.ts

@@ -6,8 +6,8 @@
  * @LastEditors: hutao
  * @LastEditTime: 2023-04-09 10:42:47
  */
-// import HtTable from "./index.vue";
-import HtTable from "./table.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-09 10:33:03
+ * @LastEditTime: 2023-04-09 16:12:58
 -->
 <template>
   <div v-loading="state.loading" style="background:#fff">
@@ -22,7 +22,7 @@
         :stripe="stripe !== undefined ? stripe : true"
         :size="size || 'small'"
         :fit="fit"
-        :span-method="spanMethod"
+        :span-method="spanMethodCom"
         :header-row-style="
           headerRowStyle || { background: 'var(--primary-92)' }
         "
@@ -134,217 +134,11 @@
           </template>
         </el-table-column>
         <template v-for="(item, index) in state.showColumns">
-          <el-table-column
-            :label="item.title"
+          <HtTableColumn
             :key="`${item.key}_${index}`"
-            :fixed="item.fixed"
-            :align="item.align"
-            v-if="!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 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="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>
+            :item="item"
+            @showFiles="showFiles"
+          ></HtTableColumn>
         </template>
       </el-table>
     </article>
@@ -454,7 +248,9 @@ import HtUploadFiles from '@/packages/HtUploadFiles/index.vue';
 import HtShowBaseData from '@/packages/HtShowBaseData';
 import HtOrgInfo from '@/packages/HtOrgInfo';
 import HtSelectUnit from '@/packages/HtSelectUnit';
+import HtTableColumn from './htTableColumn.vue';
 import ElmentUI from 'element-ui';
+import { getSpanMethod } from './table-span-method';
 Vue.use(ElmentUI);
 interface State {
   pageInfo: PageInfoType;
@@ -484,6 +280,7 @@ interface State {
     HtShowBaseData,
     HtOrgInfo,
     HtSelectUnit,
+    HtTableColumn,
   },
 })
 export default class HtTable extends Vue {
@@ -547,6 +344,13 @@ export default class HtTable extends Vue {
   @Prop() headerCellStyle?: any;
   /** 是否可以拖动排序 */
   @Prop({ default: true }) draggable?: boolean;
+  @Prop() spanMethodProps?: {
+    /** 需要合并的key值--将指定的列的行进行合并 */
+    colRows?: string[];
+    /** 将指定的列进行合并时候 合并规则必须相同 */
+    sameColRows?: string[];
+    relateProps?: { [key: string]: string };
+  };
 
   /** 分页的所有额外信息通过此参数传递 */
   @Prop() pagination?: any;
@@ -668,33 +472,7 @@ export default class HtTable extends Vue {
   allowDrag(draggingNode: any) {
     return !draggingNode.data.disabled;
   }
-  /**  处理table里面根据字段获取对应的值 */
-  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;
-  }
   /** 现在自定义列弹窗 */
   showFilterModel() {
     this.state.visibleFilter = true;
@@ -815,6 +593,16 @@ export default class HtTable extends Vue {
       }
     }
   }
+  get spanMethodCom() {
+    return this.spanMethod
+      ? this.spanMethod
+      : getSpanMethod(
+          this.data,
+          this.spanMethodProps?.colRows || [],
+          this.spanMethodProps?.sameColRows || [],
+          this.spanMethodProps?.relateProps || {}
+        );
+  }
 }
 </script>
 <style lang="scss" scoped></style>

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

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2023-04-09 14:33:12
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-09 15:45:30
+ * @LastEditTime: 2023-04-09 16:12:06
  */
 /**  处理table里面根据字段获取对应的值 */
 export function getPropByPath(obj: any, path: string, strict = true) {

package/src/views/About.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-09 15:46:52
+ * @LastEditTime: 2023-04-09 16:48:04
 -->
 <template>
   <div>
@@ -47,7 +47,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HtTable from '@/packages/HtTable/table.vue';
+import HtTable from '@/packages/HtTable/index.vue';
 import HtCountDown from '@/packages/HtCountDown/index.vue';
 import HtSelectUser from '@/packages/HtSelectUser/index.vue';
 import HtSelectOrg from '@/packages/HtSelectOrg/index.vue';
@@ -134,6 +134,12 @@ export default class Index extends Vue {
         disabled: true,
         deafaultShow: true,
       },
+      {
+        title: 'selectable',
+        key: 'selectable',
+        width: '300px',
+        type: 'boolean',
+      },
       {
         title: '姓额外名',
         key: 'namey',