|
@@ -24,21 +24,16 @@
|
|
|
</el-form>
|
|
|
</template>
|
|
|
</ProTable>
|
|
|
- <UserDrawer ref="drawerRef" />
|
|
|
- <ImportExcel ref="dialogRef" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="tsx" name="useProTable">
|
|
|
+<script setup lang="ts" name="useProTable">
|
|
|
import { ref, reactive } from "vue";
|
|
|
import { User } from "@/api/interface";
|
|
|
-import { useAuthButtons } from "@/hooks/useAuthButtons";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import ProTable from "@/components/ProTable/index.vue";
|
|
|
-import ImportExcel from "@/components/ImportExcel/index.vue";
|
|
|
-import UserDrawer from "@/views/proTable/components/UserDrawer.vue";
|
|
|
-import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
|
|
|
-import { getUserList, getUserStatus, getUserGender } from "@/api/modules/user";
|
|
|
+import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
|
|
+import { getUserList } from "@/api/modules/user";
|
|
|
|
|
|
// ProTable 实例
|
|
|
const proTable = ref<ProTableInstance>();
|
|
@@ -69,8 +64,7 @@ const resetQuery = () => {
|
|
|
queryParams.value.pageNum = 1;
|
|
|
};
|
|
|
|
|
|
-// 如果你想在请求之前对当前请求参数做一些操作,可以自定义如下函数:params 为当前所有的请求参数(包括分页),最后返回请求列表接口
|
|
|
-// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
|
|
+// 翻页
|
|
|
const getTableList = (params: any) => {
|
|
|
let newParams = JSON.parse(JSON.stringify(params));
|
|
|
newParams.createTime && (newParams.startTime = newParams.createTime[0]);
|
|
@@ -79,92 +73,16 @@ const getTableList = (params: any) => {
|
|
|
return getUserList(newParams);
|
|
|
};
|
|
|
|
|
|
-// 页面按钮权限(按钮权限既可以使用 hooks,也可以直接使用 v-auth 指令,指令适合直接绑定在按钮上,hooks 适合根据按钮权限显示不同的内容)
|
|
|
-const { BUTTONS } = useAuthButtons();
|
|
|
-
|
|
|
-// 自定义渲染表头(使用tsx语法)
|
|
|
-const headerRender = (scope: HeaderRenderScope<User.ResUserList>) => {
|
|
|
- return (
|
|
|
- <el-button type="primary" onClick={() => ElMessage.success("我是通过 tsx 语法渲染的表头")}>
|
|
|
- {scope.column.label}
|
|
|
- </el-button>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
// 表格配置项
|
|
|
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
|
|
- { type: "selection", fixed: "left", width: 70 },
|
|
|
- { type: "sort", label: "Sort", width: 80 },
|
|
|
- { type: "expand", label: "Expand", width: 85 },
|
|
|
- { prop: "username", label: "用户姓名" },
|
|
|
- {
|
|
|
- prop: "gender",
|
|
|
- label: "性别",
|
|
|
- // 字典数据(本地数据)
|
|
|
- // enum: genderType,
|
|
|
- // 字典请求不带参数
|
|
|
- enum: getUserGender,
|
|
|
- // 字典请求携带参数
|
|
|
- // enum: () => getUserGender({ id: 1 }),
|
|
|
- search: { el: "select", props: { filterable: true } },
|
|
|
- fieldNames: { label: "genderLabel", value: "genderValue" }
|
|
|
- },
|
|
|
- {
|
|
|
- prop: "user.detail.age",
|
|
|
- label: "年龄",
|
|
|
- search: {
|
|
|
- // 自定义 search 显示内容
|
|
|
- render: ({ searchParam }) => {
|
|
|
- return (
|
|
|
- <div class="flx-center">
|
|
|
- <el-input vModel_trim={searchParam.minAge} placeholder="最小年龄" />
|
|
|
- <span class="mr10 ml10">-</span>
|
|
|
- <el-input vModel_trim={searchParam.maxAge} placeholder="最大年龄" />
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ { prop: "username", label: "站号" },
|
|
|
+ { prop: "gender", label: "性别" },
|
|
|
+ { prop: "user.detail.age", label: "年龄" },
|
|
|
{ prop: "idCard", label: "身份证号", search: { el: "input" } },
|
|
|
{ prop: "email", label: "邮箱" },
|
|
|
{ prop: "address", label: "居住地址" },
|
|
|
- {
|
|
|
- prop: "status",
|
|
|
- label: "用户状态",
|
|
|
- enum: getUserStatus,
|
|
|
- search: { el: "tree-select", props: { filterable: true } },
|
|
|
- fieldNames: { label: "userLabel", value: "userStatus" },
|
|
|
- render: scope => {
|
|
|
- return (
|
|
|
- <>
|
|
|
- {BUTTONS.value.status ? (
|
|
|
- <el-switch
|
|
|
- model-value={scope.row.status}
|
|
|
- active-text={scope.row.status ? "启用" : "禁用"}
|
|
|
- active-value={1}
|
|
|
- inactive-value={0}
|
|
|
- onClick={() => changeStatus(scope.row)}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- <el-tag type={scope.row.status ? "success" : "danger"}>{scope.row.status ? "启用" : "禁用"}</el-tag>
|
|
|
- )}
|
|
|
- </>
|
|
|
- );
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- prop: "createTime",
|
|
|
- label: "创建时间",
|
|
|
- headerRender,
|
|
|
- width: 180,
|
|
|
- search: {
|
|
|
- el: "date-picker",
|
|
|
- span: 2,
|
|
|
- props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
|
|
|
- defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"]
|
|
|
- }
|
|
|
- },
|
|
|
- { prop: "operation", label: "操作", fixed: "right", width: 330 }
|
|
|
+ { prop: "status", label: "用户状态" },
|
|
|
+ { prop: "createTime", label: "创建时间", width: 180 }
|
|
|
]);
|
|
|
|
|
|
// 表格拖拽排序
|