tm-table 1.0.14 → 1.0.83

package/README.md

@@ -0,0 +1,628 @@
+# TM Table
+
+一个功能强大的 Vue 表格组件，支持 Vue2 和 Vue3，基于 Element UI 二次封装。
+
+## ✨ 特性
+
+- 🚀 **双版本支持** - 同一套代码，同时支持 Vue2 和 Vue3
+- 🔍 **智能搜索** - 内置多种搜索组件，支持高级搜索功能
+- 📊 **灵活数据源** - 支持静态数据和异步函数加载
+- 🔧 **列管理** - 可自定义列显示/隐藏、排序、冻结
+- 📄 **分页器** - 内置完整分页功能
+- 🌈 **国际化** - 支持中英文切换
+- 🎨 **高度定制** - 丰富的插槽和配置选项
+
+## 📦 安装
+
+### 依赖
+
+Element UI/Element Plus、sortable.js
+
+### 安装包
+
+```bash
+npm install tm-table
+```
+
+## 🚀 快速开始
+
+### 引入方式
+
+#### 完整引入
+
+```javascript
+// Vue 2
+import Vue from "vue";
+import TmTable from "tm-table";
+import "tm-table/style";
+Vue.use(TmTable);
+
+// Vue 3
+import { createApp } from "vue";
+import TmTable from "tm-table/v3";
+import "tm-table/style";
+const app = createApp();
+app.use(TmTable);
+```
+
+#### 按需引入
+
+```javascript
+// Vue 2
+import { Table, Column } from "tm-table";
+
+// Vue 3
+import { Table, Column } from "tm-table/v3";
+```
+
+### 基础用法
+
+#### 静态数据表格
+
+```html
+<template>
+  <tm-table :data="tableData">
+    <tm-table-column prop="id" label="ID" width="80"></tm-table-column>
+    <tm-table-column prop="name" label="姓名" width="120"></tm-table-column>
+    <tm-table-column prop="email" label="邮箱"></tm-table-column>
+  </tm-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [
+          { id: 1, name: "张三", email: "zhang@example.com" },
+          { id: 2, name: "李四", email: "li@example.com" },
+        ],
+      };
+    },
+  };
+</script>
+```
+
+#### 异步数据表格
+
+```html
+<template>
+  <tm-table :data="loadData">
+    <tm-table-column prop="id" label="ID" width="80"></tm-table-column>
+    <tm-table-column prop="name" label="姓名" width="100"></tm-table-column>
+    <tm-table-column prop="email" label="邮箱"></tm-table-column>
+  </tm-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      async loadData({ paginationInfo, params }) {
+        // 模拟API调用
+        const response = await fetch(
+          `/api/users?page=${paginationInfo.current}&size=${paginationInfo.pageSize}`
+        );
+        const data = await response.json();
+
+        return {
+          list: data.list,
+          total: data.total,
+          current: data.current,
+          pageSize: data.pageSize,
+        };
+      },
+    },
+  };
+</script>
+```
+
+#### 插槽使用示例
+
+```html
+<tm-table :data="tableData" :search-columns="['custom']">
+  <!-- 自定义搜索组件 -->
+  <template #search-custom="{ searchForm }">
+    <el-input v-model="searchForm.custom" placeholder="自定义搜索" />
+  </template>
+
+  <!-- 菜单栏左侧按钮 -->
+  <template #menu-left>
+    <el-button type="primary">新增</el-button>
+    <el-button>导入</el-button>
+  </template>
+
+  <!-- 菜单栏右侧按钮 -->
+  <template #menu-right>
+    <el-button>导出</el-button>
+  </template>
+
+  <!-- 表格列 -->
+  <tm-table-column prop="name" label="姓名"></tm-table-column>
+</tm-table>
+
+<script>
+  export default {
+    data() {
+      return {
+        searchForm: {},
+        searchColumns: ["custom"],
+      };
+    },
+  };
+</script>
+```
+
+## 🔥 完整功能示例
+
+包含搜索、列配置、自适应高度等完整功能：
+
+```html
+<template>
+  <tm-table
+    :data="loadData"
+    :search-columns="searchColumns"
+    v-model:search-form="searchForm"
+    height="auto"
+    :calc-height="60"
+    table-key="user-list"
+    :column-setting-button="true"
+    :refresh-button="true"
+    @selection-change="handleSelectionChange"
+  >
+    <!-- 自定义搜索组件 -->
+    <template #search-custom="{ searchForm }">
+    <el-input v-model="searchForm.custom" placeholder="自定义搜索" />
+    </template>
+    <!-- 菜单栏按钮 -->
+    <template #menu-left>
+      <el-button type="primary" @click="handleAdd">新增</el-button>
+    </template>
+
+    <!-- 表格列定义 -->
+    <tm-table-column type="selection" width="55"></tm-table-column>
+    <tm-table-column prop="id" label="ID" width="80"></tm-table-column>
+    <tm-table-column prop="name" label="姓名" width="120"></tm-table-column>
+    <tm-table-column
+      prop="email"
+      label="邮箱"
+      min-width="150"
+    ></tm-table-column>
+    <tm-table-column
+      prop="department"
+      label="部门"
+      width="100"
+    ></tm-table-column>
+    <tm-table-column prop="status" label="状态" width="80">
+      <template #default="{ row }">
+        <el-tag :type="row.status === 'active' ? 'success' : 'info'">
+          {{ row.status === 'active' ? '启用' : '禁用' }}
+        </el-tag>
+      </template>
+    </tm-table-column>
+    <tm-table-column
+      prop="createTime"
+      label="创建时间"
+      width="160"
+    ></tm-table-column>
+    <tm-table-column label="操作" width="150" fixed="right" :visible="false">
+      <template #default="{ row }">
+        <el-button size="mini">编辑</el-button>
+        <el-button size="mini">删除</el-button>
+      </template>
+    </tm-table-column>
+  </tm-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        searchForm: {},
+        selectedRows: [],
+        searchColumns: [
+          {
+            type: "input",
+            label: "用户搜索",
+            fields: { value: "keyword", label: "keywordType" },
+            fieldOptions: [
+              { label: "姓名", value: "name" },
+              { label: "邮箱", value: "email" },
+            ],
+            placeholder: "请输入搜索关键词",
+            multiple: true,
+          },
+          "custom",
+          {
+            type: "select",
+            label: "部门",
+            fields: { value: "department" },
+            options: this.getDepartmentOptions,
+            placeholder: "请选择部门",
+          },
+          {
+            type: "select",
+            label: "状态",
+            fields: { value: "status" },
+            options: [
+              { label: "启用", value: "active" },
+              { label: "禁用", value: "inactive" },
+            ],
+          },
+          {
+            type: "date",
+            label: "创建时间",
+            fields: { start: "startTime", end: "endTime" },
+          },
+        ],
+      };
+    },
+    methods: {
+      // 异步加载数据
+      async loadData({ paginationInfo, params }) {
+        try {
+          const response = await this.$http.get("/api/users", {
+            params: {
+              page: paginationInfo.current,
+              size: paginationInfo.pageSize,
+              ...params,
+            },
+          });
+          return {
+            list: response.data.list,
+            total: response.data.total,
+            current: response.data.current,
+            pageSize: response.data.pageSize,
+          };
+        } catch (error) {
+          this.$message.error("数据加载失败");
+          return { list: [], total: 0 };
+        }
+      },
+
+      // 获取部门选项（异步）
+      async getDepartmentOptions() {
+        const response = await this.$http.get("/api/departments");
+        return response.data.map((item) => ({
+          label: item.name,
+          value: item.id,
+        }));
+      },
+
+      // 选择变化回调
+      handleSelectionChange(selection) {
+        this.selectedRows = selection;
+      },
+
+      // 新增用户
+      handleAdd() {
+        // 处理新增逻辑
+      },
+    },
+  };
+</script>
+```
+
+## 📋 API 文档
+
+### Table 属性
+
+| 参数                    | 说明                     | 类型               | 可选值 | 默认值    |
+| --------------------- | ---------------------- | ---------------- | --- | ------ |
+| data                  | 表格数据，可以是数组或异步函数        | Array / Function | —   | []     |
+| show-search           | 是否显示搜索区域               | Boolean          | —   | true   |
+| show-menu             | 是否显示菜单栏                | Boolean          | —   | true   |
+| show-pagination       | 是否显示分页器                | Boolean          | —   | true   |
+| height                | 表格高度，支持 'auto' 自适应     | String / Number  | —   | —      |
+| calc-height           | 自适应高度时需要减去的高度          | Number           | —   | 0      |
+| column-setting-button | 是否显示列配置按钮              | Boolean          | —   | true   |
+| refresh-button        | 是否显示刷新按钮               | Boolean          | —   | true   |
+| table-key             | 列配置的唯一标识               | String           | —   | 当前路由路径 |
+| first-load            | 初始化时是否请求数据             | Boolean          | —   | true   |
+| border                | 是否显示边框                 | Boolean          | —   | true   |
+| search-columns        | 搜索列配置，详见 SearchColumns | Array            | —   | []     |
+| search-form           | 搜索表单数据（支持 v-model）     | Object           | —   | {}     |
+
+### Table 事件
+
+| 事件名                | 说明         | 参数         |
+| ------------------ | ---------- | ---------- |
+| selection-change   | 选择项发生变化时触发 | selection  |
+| size-change        | 每页条数改变时触发  | size       |
+| current-change     | 当前页改变时触发   | current    |
+| update:search-form | 搜索表单更新时触发  | searchForm |
+
+### Table 方法
+
+| 方法名          | 说明              | 参数  |
+| ------------ | --------------- | --- |
+| loadData     | 手动触发数据加载        | —   |
+| refreshTable | 刷新表格布局          | —   |
+| reloadTable  | 重新加载表格（会触发重新渲染） | —   |
+
+### Table 插槽
+
+| 插槽名           | 说明                                     | 参数                  |
+| ------------- | -------------------------------------- | ------------------- |
+| search        | 自定义整个搜索区域                              | —                   |
+| menu-left     | 菜单栏左侧内容                                | —                   |
+| menu-right    | 菜单栏右侧内容                                | —                   |
+| search-{prop} | 自定义列搜索框内容，prop 为 searchColumns 中配置的插槽名 | { searchForm, col } |
+
+### Column 属性
+
+TmColumn 基于 el-table-column 封装，支持所有 el-table-column 的属性，额外增加：
+
+| 参数          | 说明                              | 类型      | 默认值  |
+| ----------- | ------------------------------- | ------- | ---- |
+| prop        | 必填，列配置基于该属性实现，同一table中，该值不可重复定义 | String  | —    |
+| visible     | 默认显示当前列                         | Boolean | true |
+| cancellable | 在列配置中，是否可取消                     | Boolean | true |
+
+其他属性参考 [Element UI Table Column](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes)
+
+## 🔍 搜索功能详解
+
+### SearchColumns 配置
+
+| 参数           | 说明                                                                                                                                                                                                                      | 类型      | 可选值                                                    | 默认值   |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------ | ----- |
+| type         | 搜索项表单类型                                                                                                                                                                                                                 | String  | input\|select\|cascader\|date\|radio\|checkbox\|switch | input |
+| label        | 表单左侧文案                                                                                                                                                                                                                  | String  | —                                                      | —     |
+| placeholder  | 输入框占位符                                                                                                                                                                                                                  | String  | —                                                      | —     |
+| fields       | 字段映射配置，当表单值发生改变时同步修改 search-form 绑定字段的值<br/>**无默认值**：`{ value: "valueField" }`<br/>**有默认值1**：`{ value: ["valueField", "默认值"] }`<br/>**有默认值2**：`{ value: { name: "value1", default: "默认值" } }`<br/>**注：默认值在表单初始化和重置时生效** | Object  | —                                                      | —     |
+| fieldOptions | 字段类型选项，格式：`[{label:"用户名", value:"userName"}]`                                                                                                                                                                           | Array   | —                                                      | []    |
+| options      | 选项配置，type 为 select\|cascader 时可用                                                                                                                                                                                        | Array   | —                                                      | []    |
+| multiple     | type 为 input 时表示精确搜索，为 select 或 cascader 时表示多选                                                                                                                                                                          | Boolean | —                                                      | false |
+| checkAll     | 全选功能，type 为 select 时有效                                                                                                                                                                                                  | Boolean | —                                                      | false |
+
+### 各类型搜索组件配置
+
+#### Input 输入框搜索
+
+```javascript
+{
+  type: 'input',
+  label: '名称搜索',
+  fields: {
+    value: 'name',        // 必需：值字段
+    label: 'nameType'     // 可选：字段类型
+  },
+  fieldOptions: [         // 可选：字段选择器选项
+    { label: '姓名', value: 'name' },
+    { label: '邮箱', value: 'email' }
+  ],
+  placeholder: '请输入搜索内容',
+  multiple: true          // 可选：是否支持批量精确搜索
+}
+```
+
+#### Select 下拉选择
+
+```javascript
+{
+  type: 'select',
+  label: '状态',
+  fields: { value: 'status' },
+  options: [              // 静态选项
+    { label: '启用', value: 'active' },
+    { label: '禁用', value: 'inactive' }
+  ],
+  // 或者异步选项
+  options: async () => {
+    const res = await fetch('/api/options');
+    return res.json();
+  },
+  multiple: true,         // 可选：是否多选
+  checkAll: true,         // 可选：是否显示全选
+  placeholder: '请选择状态'
+}
+```
+
+#### Date 日期选择
+
+```javascript
+{
+  type: 'date',
+  label: '日期范围',
+  fields: {
+    start: 'startDate',   // 开始日期字段
+    end: 'endDate'        // 结束日期字段
+  },
+  fieldOptions: [         // 可选：日期类型选择
+    { label: '创建时间', value: 'createTime' },
+    { label: '更新时间', value: 'updateTime' }
+  ],
+  startPlaceholder: '开始日期',
+  endPlaceholder: '结束日期'
+}
+```
+
+#### Cascader 级联选择
+
+```javascript
+{
+  type: 'cascader',
+  label: '地区',
+  fields: { value: 'region' },
+  options: [
+    {
+      value: 'beijing',
+      label: '北京',
+      children: [
+        { value: 'chaoyang', label: '朝阳区' },
+        { value: 'haidian', label: '海淀区' }
+      ]
+    }
+  ],
+  props: {                // Element UI cascader 属性
+    multiple: true,
+    checkStrictly: true
+  }
+}
+```
+
+#### 其他类型
+
+```javascript
+// 单选框
+{ type: 'radio', label: '性别', fields: { value: 'gender' }, options: [...] }
+
+// 多选框
+{ type: 'checkbox', label: '兴趣', fields: { value: 'interests' }, options: [...] }
+
+// 开关
+{
+  type: 'switch',
+  label: '是否启用',
+  fields: { value: 'enabled' },
+  activeText: '启用',
+  inactiveText: '禁用'
+}
+```
+
+### 自定义搜索组件
+
+使用字符串形式配置，然后通过插槽自定义：
+
+```html
+<tm-table :search-columns="['customSearch']">
+  <template #search-customSearch="{ searchForm }">
+    <el-input v-model="searchForm.custom" placeholder="自定义搜索" />
+  </template>
+</tm-table>
+```
+
+### 带搜索的完整示例
+
+```html
+<template>
+  <tm-table
+    :data="loadData"
+    :search-columns="searchColumns"
+    v-model:search-form="searchForm"
+  >
+    <tm-table-column prop="name" label="姓名"></tm-table-column>
+    <tm-table-column prop="department" label="部门"></tm-table-column>
+    <tm-table-column prop="createTime" label="创建时间"></tm-table-column>
+  </tm-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        searchForm: {},
+        searchColumns: [
+          {
+            type: "input",
+            label: "姓名搜索",
+            fields: { value: "name" },
+            placeholder: "请输入姓名",
+          },
+          {
+            type: "select",
+            label: "部门",
+            fields: { value: "department" },
+            options: [
+              { label: "技术部", value: "tech" },
+              { label: "产品部", value: "product" },
+            ],
+          },
+        ],
+      };
+    },
+  };
+</script>
+```
+
+## 🧩 其他组件
+
+### EllipsisText 省略文本
+
+用于显示可能过长的文本，支持省略和 tooltip。
+
+#### 基础用法
+
+```html
+<template>
+  <ellipsis-text
+    text="这是一段很长的文本，超出指定宽度时会显示省略号"
+    :width="200"
+    :copyable="true"
+  />
+</template>
+```
+
+#### EllipsisText 属性
+
+| 参数           | 说明           | 类型            | 默认值   |
+| ------------ | ------------ | ------------- | ----- |
+| text         | 要显示的文本       | String        | —     |
+| width        | 文本容器宽度       | String/Number | auto  |
+| max-width    | 文本最大宽度       | String/Number | 100%  |
+| lines        | 显示的行数        | Number        | 1     |
+| show-tooltip | 是否显示 tooltip | Boolean       | true  |
+| copyable     | 是否显示复制按钮     | Boolean       | false |
+
+## 🌍 国际化
+
+### 使用方法
+
+```javascript
+import { setLang } from "tm-table";
+
+// 设置语言
+setLang("en-US"); // 英文
+setLang("zh-CN"); // 中文（默认）
+```
+
+### 支持的语言
+
+- 中文（zh-CN）
+- 英文（en-US）
+
+## 📊 数据格式规范
+
+### 异步数据函数
+
+当 data 属性传入函数时，函数接收参数并返回指定格式：
+
+```javascript
+async function loadData({ paginationInfo, params }) {
+  // paginationInfo: { current: 1, pageSize: 20 }
+  // params: 搜索表单的数据
+
+  return {
+    list: [], // 数据列表（必需）
+    total: 0, // 总条数（必需）
+    current: 1, // 当前页（可选）
+    pageSize: 20, // 每页条数（可选）
+  };
+}
+```
+
+### 选项数据格式
+
+所有选择类组件的选项支持：
+
+```javascript
+// 静态数组
+options: [{ label: "显示文本", value: "值", disabled: false }];
+
+// 异步函数
+options: async () => {
+  const response = await fetch("/api/options");
+  return response.json();
+};
+```
+
+## 📝 更新日志
+
+### 1.0.82
+
+- 新增 Vue3 支持
+- 优化搜索组件
+- 修复已知问题
+
+## 📄 许可证
+
+MIT

package/dist/vue2/tm-table.css

@@ -0,0 +1 @@
+@charset "UTF-8";.advanced-select[data-v-062139ab]{display:flex;max-width:305px}.advanced-select.hasField .select[data-v-062139ab]{width:206px;position:relative}.advanced-select.hasField .select[data-v-062139ab]:hover{z-index:1!important}.advanced-select.hasField[data-v-062139ab] .select--v2 .el-input__inner,.advanced-select.hasField[data-v-062139ab] .select--v3 .el-select__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.advanced-select .field-select[data-v-062139ab]{margin-right:-1px;width:100px;position:relative}.advanced-select .field-select[data-v-062139ab]:hover{z-index:1!important}.advanced-select[data-v-062139ab] .field-select--v2 .el-input__inner,.advanced-select[data-v-062139ab] .field-select--v3 .el-select__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.advanced-select .select[data-v-062139ab]{width:200px;flex-shrink:0}.advanced-select .select[data-v-062139ab] .el-tag--info{max-width:52%}.check-all-option[data-v-062139ab]{margin-top:-6px;padding:6px 20px;border-bottom:1px solid #ebeef5;cursor:default;position:sticky;top:0;z-index:1;background-color:#fff}.tm-icon[data-v-1c30ca93]{font-size:inherit;display:inline-block;height:1em;justify-content:center;line-height:1;position:relative;width:1em;fill:currentColor;color:inherit}.el-button .tm-icon{vertical-align:top}.el-table__row:hover .ellipsis-text-container .toolbar{display:flex;align-items:center;gap:2px}.el-table__row:hover .ellipsis-text-container .toolbar.multiline{display:block}.el-table__row:hover .ellipsis-text-container .toolbar .icon-item{flex-shrink:0}.el-table__row:hover .ellipsis-text-container .toolbar .icon-item:hover{color:var(--color-primary)!important}.ellipsis-text-container[data-v-b0e14655]{display:inline-flex;vertical-align:top}.ellipsis-text-container .toolbar[data-v-b0e14655]{display:none;max-width:30px}.ellipsis-text-container .toolbar .icon-item[data-v-b0e14655]{cursor:pointer;margin-left:2px}.ellipsis-text-container .toolbar .icon-item[data-v-b0e14655]:hover{opacity:.8}.ellipsis-text-container:hover .toolbar[data-v-b0e14655]{display:flex;align-items:center;gap:2px}.ellipsis-text-container:hover .toolbar.multiline[data-v-b0e14655]{display:block}.ellipsis-text-container:hover .toolbar .icon-item[data-v-b0e14655]:hover{color:var(--color-primary)!important}.tm-advanced-input[data-v-96a2075d]{display:flex;align-items:center}.tm-advanced-input .left-select[data-v-96a2075d]{margin-right:-1px}.tm-advanced-input.tm-advanced-input--v2[data-v-96a2075d] .left-select.el-select{margin-right:-1px;position:relative;z-index:2}.tm-advanced-input.tm-advanced-input--v2[data-v-96a2075d] .left-select.el-select .el-input__inner{transition:0s;border-top-right-radius:0;border-bottom-right-radius:0}.tm-advanced-input.tm-advanced-input--v2[data-v-96a2075d] .right-input.el-input{position:relative;z-index:1}.tm-advanced-input.tm-advanced-input--v2[data-v-96a2075d] .right-input.el-input:focus-within,.tm-advanced-input.tm-advanced-input--v2[data-v-96a2075d] .right-input.el-input:hover,.tm-advanced-input.tm-advanced-input--v2[data-v-96a2075d] .right-input.el-input:focus{z-index:3}.tm-advanced-input.tm-advanced-input--v2[data-v-96a2075d] .right-input.el-input.has-label .el-input__inner{transition:0s;border-top-left-radius:0;border-bottom-left-radius:0}.tm-advanced-input.tm-advanced-input--v3[data-v-96a2075d] .left-select.el-select .el-select__wrapper{border-top-right-radius:0;border-bottom-right-radius:0;position:relative;z-index:2;transition:0s}.tm-advanced-input.tm-advanced-input--v3[data-v-96a2075d] .right-input.el-input .el-input__wrapper{position:relative;z-index:1;transition:0s}.tm-advanced-input.tm-advanced-input--v3[data-v-96a2075d] .right-input.el-input .el-input__wrapper:focus-within,.tm-advanced-input.tm-advanced-input--v3[data-v-96a2075d] .right-input.el-input .el-input__wrapper:hover,.tm-advanced-input.tm-advanced-input--v3[data-v-96a2075d] .right-input.el-input .el-input__wrapper:focus{z-index:3}.tm-advanced-input.tm-advanced-input--v3[data-v-96a2075d] .right-input.el-input.has-label .el-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.popover-content .popover-title[data-v-96a2075d]{font-weight:700;margin-bottom:5px}.popover-content .popover-subtitle[data-v-96a2075d]{font-size:12px;color:#909399;margin-top:0;margin-bottom:10px}.popover-content .popover-footer[data-v-96a2075d]{margin-top:10px;text-align:right}.tm-advanced-input--v3 .input-label[data-v-96a2075d]{border-right:none;color:var(--el-input-text-color, var(--el-text-color-regular))}.tm-advanced-input--v2 .input-label[data-v-96a2075d]{border-right:none;color:#606266}.input-label[data-v-96a2075d]{height:100%;flex-shrink:0;width:100px;font-size:12px;box-sizing:border-box;display:flex;align-items:center;line-height:12px;border-right:none;border-top-left-radius:4px;border-bottom-left-radius:4px;justify-content:flex-end;padding-right:4px}.tm-date-picker--v2[data-v-3cd3ede3]{display:flex;align-items:center}.tm-date-picker--v2[data-v-3cd3ede3] .el-select{margin-right:-1px;z-index:1}.tm-date-picker--v2[data-v-3cd3ede3] .el-select .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0;transition:0s}.tm-date-picker--v2[data-v-3cd3ede3] .el-date-editor.el-input__inner{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.tm-date-picker--v2[data-v-3cd3ede3] .el-date-editor{transition:0s}.tm-date-picker--v2[data-v-3cd3ede3] .el-date-editor.is-active,.tm-date-picker--v2[data-v-3cd3ede3] .el-date-editor:hover{z-index:2}.tm-date-picker--v3[data-v-3cd3ede3] .el-select{margin-right:-1px}.tm-date-picker--v3[data-v-3cd3ede3] .el-select .el-select__wrapper{border-top-right-radius:0;border-bottom-right-radius:0;position:relative;z-index:2;transition:0s}.tm-date-picker--v3[data-v-3cd3ede3] .el-date-editor{position:relative;border-top-left-radius:0!important;border-bottom-left-radius:0!important;z-index:1;transition:0s}.tm-date-picker--v3[data-v-3cd3ede3] .el-date-editor.focus-within,.tm-date-picker--v3[data-v-3cd3ede3] .el-date-editor.focus,.tm-date-picker--v3[data-v-3cd3ede3] .el-date-editor.is-active,.tm-date-picker--v3[data-v-3cd3ede3] .el-date-editor:hover{z-index:2}.tm-cascader--v2 .el-input--mini input{height:28px!important}.tm-cascader--v2 .el-cascader__tags .el-tag{margin:4px 0 4px 6px}.tm-cascader--v2 .el-cascader__tags .el-tag:first-child{max-width:90px}.tm-cascader--v2 .el-cascader__tags .el-tag:nth-child(2){max-width:48px}.tm-cascader--v2 .el-cascader__tags input{font-size:12px!important}.tm-cascader--v2 .el-cascader__tags .el-cascader__search-input{min-width:16px}.tm-cascader--v3 .el-cascader__tags{font-size:12px;flex-wrap:nowrap;align-items:center}.tm-cascader--v3 .el-cascader__tags .el-tag{padding:0 4px}.tm-cascader--v3 .el-cascader__tags .el-tag:first-child{max-width:90px}.tm-cascader--v3 .el-cascader__tags .el-tag:nth-child(2){max-width:48px}.tm-cascader--v3 .el-cascader__tags .el-cascader__search-input{min-width:16px}.el-cascader__collapse-tags{max-height:400px;max-width:400px;margin:0 -11px;padding:0 11px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:4px}[data-v-61fed13d] .el-radio-button__inner{font-weight:400}.tm-radio[data-v-61fed13d]{width:200px;display:flex;width:100%}.tm-radio.wide-mode[data-v-61fed13d]{width:305px}.tm-radio--v2[data-v-61fed13d] .el-radio-group .el-radio-button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tm-radio--v2[data-v-61fed13d] .el-radio-group .el-radio-button .el-radio-button__inner{padding:7px 5px;width:100%;display:inline-block;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;text-align:center}.tm-radio--v3[data-v-61fed13d] .el-radio-group .el-radio-button .el-radio-button__inner{width:100%}.tm-checkbox[data-v-b44866b1]{width:200px;display:flex;flex-direction:column}.tm-checkbox.wide-mode[data-v-b44866b1]{width:305px}.tm-checkbox--v2[data-v-b44866b1] .el-checkbox-group{display:flex;width:100%}.tm-checkbox--v2[data-v-b44866b1] .el-checkbox-group .el-checkbox-button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tm-checkbox--v2[data-v-b44866b1] .el-checkbox-group .el-checkbox-button .el-checkbox-button__inner{padding:7px 5px;width:100%;display:inline-block;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;text-align:center}.tm-checkbox--v3[data-v-b44866b1] .el-checkbox-group .el-checkbox-button .el-checkbox-button__inner{width:100%}.tm-switch[data-v-9e7a342f]{display:flex;align-items:center}.tm-switch.narrow-container[data-v-9e7a342f]{width:95px}.tm-switch.medium-container[data-v-9e7a342f]{width:200px}.tm-switch.wide-container[data-v-9e7a342f]{width:305px}.tm-switch[data-v-9e7a342f] .el-switch .el-switch__core{flex-shrink:0}.table-search[data-v-572f884b]{--el-font-size-base: 12px}.table-search[data-v-572f884b] .el-select__wrapper,.table-search[data-v-572f884b] .el-switch__label{font-size:var(--el-font-size-base);font-weight:400}.table-search[data-v-572f884b] .el-radio-button__inner,.table-search[data-v-572f884b] .el-checkbox-button__inner{padding:9px 10px}.table-search[data-v-572f884b]{margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:center}.table-search .search-content[data-v-572f884b]{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.table-search .search-actions[data-v-572f884b]{display:flex}.table-search .search-error-message[data-v-572f884b]{color:#f56c6c;font-size:12px;margin:5px 0}.table-search--v2 .search-form-item[data-v-572f884b]{height:28px}.table-search--v3 .search-form-item[data-v-572f884b]{height:24px}.tm-pagination[data-v-4dbdf6e7]{padding:10px 0;text-align:right;display:flex;flex-direction:row-reverse}.tm-table-menu[data-v-579dd2c3]{display:flex;justify-content:space-between;margin-bottom:10px}.tm-table-menu .left[data-v-579dd2c3]{flex:1;margin-right:10px;display:flex;flex-wrap:wrap;gap:4px 0}.tm-table-menu .right[data-v-579dd2c3]{flex-shrink:0}.column-config-popover{padding:0!important}.title[data-v-f3445124]{display:flex;align-items:center;font-weight:700;color:#000;height:32px;padding-left:10px;padding-top:10px}.container[data-v-f3445124]{height:500px;width:100%;display:flex;flex-direction:column}.container .main-container[data-v-f3445124]{display:flex;flex:1;overflow:hidden;border-bottom:1px solid #dcdfe9}.container .main-container .left-content[data-v-f3445124]{flex:2;border-right:1px solid #dcdfe9;display:flex;flex-direction:column}.container .main-container .left-content .option-list[data-v-f3445124]{flex:1;overflow-y:auto}.container .main-container .right-content[data-v-f3445124]{flex:1;overflow-y:auto;display:flex;flex-direction:column;overflow:hidden}.container .main-container .right-content .search-box[data-v-f3445124]{display:flex;align-items:center;height:33px;border-bottom:1px solid #dcdfe9;box-sizing:border-box}.container .main-container .right-content .search-box[data-v-f3445124] .el-input__inner{box-shadow:none;border:none}.container .main-container .right-content .search-box[data-v-f3445124] .el-input__wrapper{box-shadow:none}.container .main-container .right-content .sort-list[data-v-f3445124]{flex:1;overflow-y:auto}.container .main-container .right-content .sort-list .sort-item-wrapper[data-v-f3445124]{position:relative;transition:background-color .2s}.container .main-container .right-content .sort-list .sort-item-wrapper[data-v-f3445124]:hover{background-color:#e0eeff}.container .main-container .right-content .sort-list .sort-item-wrapper:hover .delete-button[data-v-f3445124],.container .main-container .right-content .sort-list .sort-item-wrapper:hover .top-button[data-v-f3445124],.container .main-container .right-content .sort-list .sort-item-wrapper:hover .left-fixed-btn[data-v-f3445124]:not(.active-fixed),.container .main-container .right-content .sort-list .sort-item-wrapper:hover .right-fixed-btn[data-v-f3445124]:not(.active-fixed){display:inline-block!important}.container .main-container .right-content .sort-list .sort-item-wrapper.no-drop-zone[data-v-f3445124]{position:relative}.container .main-container .right-content .sort-list .sort-item-wrapper.no-drop-zone[data-v-f3445124]:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ff00001a;border:1px dashed #f56c6c;pointer-events:none}.container .main-container .right-content .sort-list .sort-item-wrapper.frozen[data-v-f3445124]:hover,.container .main-container .right-content .sort-list .sort-item-wrapper.frozenRight[data-v-f3445124]:hover{background-color:#e0eeff}.container .main-container .right-content .sort-list .sort-item[data-v-f3445124]{display:flex;align-items:center;width:100%;height:32px;box-sizing:border-box;padding:0 8px;transition:.2s;-webkit-user-select:none;user-select:none}.container .main-container .right-content .sort-list .sort-item .row-title[data-v-f3445124]{cursor:grab;flex:1;margin-right:8px;display:flex;align-items:center;gap:4px}.container .main-container .right-content .sort-list .sort-item .operation-btns[data-v-f3445124]{display:flex;align-items:center}.container .main-container .right-content .sort-list .sort-item .operation-btns .iconfont-button[data-v-f3445124]{margin-left:3px;padding:0}.container .main-container .right-content .sort-list .sort-item .operation-btns .delete-button[data-v-f3445124],.container .main-container .right-content .sort-list .sort-item .operation-btns .top-button[data-v-f3445124],.container .main-container .right-content .sort-list .sort-item .operation-btns .left-fixed-btn[data-v-f3445124]:not(.active-fixed),.container .main-container .right-content .sort-list .sort-item .operation-btns .right-fixed-btn[data-v-f3445124]:not(.active-fixed){display:none}.container .main-container .right-content .sort-list .sort-item .operation-btns .left-fixed-btn.active-fixed[data-v-f3445124],.container .main-container .right-content .sort-list .sort-item .operation-btns .right-fixed-btn.active-fixed[data-v-f3445124]{display:inline-block;color:var(--el-color-primary)}.container .main-container .right-content .sort-list .sort-item .operation-btns .iconfont[data-v-f3445124]{color:#aaa;font-size:14px}.container .main-container .right-content .sort-list .sort-item .operation-btns .iconfont[data-v-f3445124]:hover{color:var(--el-color-primary)}.container .main-container .right-content .sort-list .sort-item .operation-btns .left-fixed-btn .el-icon-position[data-v-f3445124]{transform:rotate(-90deg)}.container .main-container .right-content .sort-list .sort-item .operation-btns .left-fixed-btn:hover .el-icon-position[data-v-f3445124]{color:var(--el-color-primary)}.container .main-container .right-content .sort-list .sort-item .operation-btns .right-fixed-btn .el-icon-position[data-v-f3445124]{transform:rotate(90deg)}.container .main-container .right-content .sort-list .sort-item .operation-btns .right-fixed-btn:hover .el-icon-position[data-v-f3445124]{color:var(--el-color-primary)}.container .footer[data-v-f3445124]{padding:10px;box-sizing:border-box;display:flex;justify-content:space-between}.el-checkbox[data-v-f3445124]{white-space:wrap;min-height:14px;height:auto;margin-top:10px;margin-left:10px;font-weight:400}.el-checkbox[data-v-f3445124] .el-checkbox__label{width:70px;vertical-align:top}.blue-background-class[data-v-f3445124]{background-color:#e0eeff!important;box-shadow:0 2px 8px #0000001a;z-index:1000}.sortable-drag[data-v-f3445124]{opacity:.9;background-color:#e0eeff!important;box-shadow:0 2px 8px #0000001a}.tips[data-v-f3445124]{color:#999;line-height:16px;font-size:12px;padding:8px}.tips span[data-v-f3445124],.tips span span[data-v-f3445124]{color:#999}.icon-item[data-v-16643222]{cursor:pointer}.icon-item[data-v-16643222]:hover{opacity:.6}.tm-ellipsis-text[data-v-16643222]{position:relative;overflow:hidden}.tm-ellipsis-text .tm-ellipsis-text-wrapper[data-v-16643222]{width:100%}.tm-ellipsis-text .tm-ellipsis-text-wrapper .tm-ellipsis-line[data-v-16643222]{line-height:inherit;word-break:break-all;white-space:normal}.tm-ellipsis-text .tm-ellipsis-text-wrapper .tm-ellipsis-last-line[data-v-16643222]{display:flex;align-items:center;line-height:inherit}.tm-ellipsis-text .tm-ellipsis-text-wrapper .tm-ellipsis-last-line .tm-ellipsis-text-part[data-v-16643222]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.tm-ellipsis-text .tm-ellipsis-text-wrapper .tm-ellipsis-last-line .tm-ellipsis-toolbar-part[data-v-16643222]{flex-shrink:0;margin-left:4px;display:flex;align-items:center;line-height:inherit;font-size:inherit}.tm-ellipsis-measure[data-v-16643222]{position:absolute;left:-9999px;top:-9999px;visibility:hidden;pointer-events:none;z-index:-1}