inl-ui 0.0.4 → 0.0.7

package/src/pageComponent/views/systemManager/authManager/roleManager/updateRoleDialog.tsx

@@ -1,207 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  PropType,
-  ref,
-  watch,
-  nextTick,
-  reactive,
-} from "vue";
-import useVModel from "@/pageComponent/hooks/useVModel";
-import { cloneDeep } from "lodash";
-import { getRequiredRule } from "@/pageComponent/utils/validation";
-import { transformMenuTree } from "@/pageComponent/utils/transform";
-
-import {
-  Modal,
-  Form,
-  FormItem,
-  Input,
-  Textarea,
-  Space,
-  Button,
-  Tree,
-  message,
-} from "ant-design-vue";
-import api from "@/pageComponent/api/auth/roleManager";
-
-const UpdateRoleDialog = defineComponent({
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    mode: {
-      type: String as PropType<"add" | "edit" | "view">,
-    },
-    record: {
-      type: Object,
-      default: () => ({}),
-    },
-    onRefresh: {
-      type: Function,
-    },
-  },
-  emits: ["update:visible"],
-  setup(props, { emit }) {
-    const isVisible = useVModel(props, "visible", emit);
-
-    // 树结构数据
-    const treeData = ref<any[]>([]);
-
-    // 选中的权限列表
-    const checkedPermissionList = ref([]);
-
-    /* ===== 初始化表单 ===== */
-    const formRef = ref();
-    const form = ref<any>({});
-    watch(isVisible, async (val) => {
-      // 等待record赋值 / 完全关闭
-      await nextTick();
-      checkedPermissionList.value = [];
-      // 打开对话框时复制表单 新建用户时不用
-      if (val) {
-        if (props.mode === "add") {
-          const { data } = await api.getRoleTree();
-          treeData.value = transformMenuTree(data);
-          return;
-        } else if (props.mode === "edit" || props.mode === "view") {
-          const { data } = await api.getRoleTreeEdit({
-            roleTypeId: props.record.roleTypeId,
-          });
-
-          treeData.value = transformMenuTree(data.roleMenuVoList);
-          checkedPermissionList.value = data.checkedMenuIds;
-        }
-        form.value = cloneDeep(props.record);
-
-        // state.treeData = sysMenuVoList.map((item) => {
-        //   return {};
-        // });
-      } else {
-        // 清空表单
-        formRef.value.resetFields();
-      }
-    });
-
-    /* 对话框标题 */
-    const modalTitle = computed(() => {
-      if (props.mode === "add") return "新建角色";
-      else if (props.mode === "edit") return "编辑角色";
-      return "查看角色";
-    });
-
-    /* 是否查看模式 */
-    const isView = computed(() => props.mode === "view");
-
-    const cancel = () => {
-      isVisible.value = false;
-    };
-
-    // 验证权限列表 至少选择一个权限
-    const validatePermission = async (rule: any, value: any) => {
-      if (checkedPermissionList.value.length) {
-        return true;
-      } else {
-        return new Error("请选择权限");
-      }
-    };
-
-    const handleCommit = async () => {
-      await formRef.value.validate();
-      const res = {
-        ...form.value,
-        checkedMenuIds: checkedPermissionList.value,
-      };
-      if (props.mode === "add") {
-        await api.insertRole(res);
-        message.success("添加成功");
-      } else if (props.mode === "edit") {
-        await api.insertRole(res);
-        message.success("修改成功");
-      }
-      props.onRefresh?.();
-      isVisible.value = false;
-    };
-
-    return () => (
-      <div class="update-role-dialog">
-        <Modal
-          title={modalTitle.value}
-          centered
-          v-model={[isVisible.value, "visible"]}
-        >
-          {{
-            default: () => (
-              <Form ref={formRef} labelCol={{ span: 4 }} model={form.value}>
-                <FormItem
-                  label="角色编码"
-                  name="roleCode"
-                  required
-                  rules={getRequiredRule("角色编码")}
-                >
-                  {isView.value ? (
-                    <span>{form.value.roleCode}</span>
-                  ) : (
-                    <Input v-model={[form.value.roleCode, "value"]} />
-                  )}
-                </FormItem>
-                <FormItem
-                  label="角色名称"
-                  name="roleTypeName"
-                  required
-                  rules={getRequiredRule("角色名称")}
-                >
-                  {isView.value ? (
-                    <span>{form.value.roleTypeName}</span>
-                  ) : (
-                    <Input v-model={[form.value.roleTypeName, "value"]} />
-                  )}
-                </FormItem>
-                <FormItem label="角色描述" name="roleDesc">
-                  {isView.value ? (
-                    <span>{form.value.roleDesc}</span>
-                  ) : (
-                    <Textarea v-model={[form.value.roleDesc, "value"]} />
-                  )}
-                </FormItem>
-                <FormItem
-                  name="abc"
-                  rules={{ validator: validatePermission }}
-                  label="角色权限"
-                >
-                  {treeData.value.length > 0 && (
-                    <Tree
-                      defaultExpandAll
-                      fieldNames={{
-                        key: "id",
-                        children: "subList",
-                        title: "name",
-                      }}
-                      disabled={isView.value}
-                      checkable
-                      tree-data={treeData.value}
-                      v-model={[checkedPermissionList.value, "checkedKeys"]}
-                    />
-                  )}
-                </FormItem>
-              </Form>
-            ),
-            footer: () => (
-              <Space>
-                <Button onClick={cancel}>关闭</Button>
-                {!isView.value && (
-                  <Button type="primary" onClick={handleCommit}>
-                    保存
-                  </Button>
-                )}
-              </Space>
-            ),
-          }}
-        </Modal>
-      </div>
-    );
-  },
-});
-
-export default UpdateRoleDialog;

package/src/pageComponent/views/systemManager/authManager/userManager/index.tsx

@@ -1,255 +0,0 @@
-import { defineComponent, reactive, h, resolveComponent, ref } from "vue";
-import useTableList from "@/pageComponent/hooks/useTableList";
-import api from "@/pageComponent/api/auth/userManager";
-
-import {
-  Table,
-  Form,
-  FormItem,
-  Input,
-  Button,
-  Space,
-  Modal,
-  message,
-} from "ant-design-vue";
-import UpdateUserDialog from "./updateUserDialog";
-import UserProfileDialog from "./userProfileDialog";
-
-interface FormState {
-  userName: string;
-}
-
-const column = [
-  {
-    title: "用户名",
-    dataIndex: "userName",
-    key: "userName",
-  },
-  {
-    title: "所属角色",
-    dataIndex: "roleTypeNames",
-    key: "roleTypeNames",
-  },
-  {
-    title: "员工姓名",
-    dataIndex: "employeeName",
-    key: "employeeName",
-    slots: { customRender: "employeeName" },
-  },
-  {
-    title: "电话",
-    dataIndex: "phone",
-    key: "phone",
-  },
-  {
-    title: "创建人",
-    dataIndex: "createUser",
-    key: "createUser",
-  },
-  {
-    title: "创建时间",
-    dataIndex: "createTime",
-    key: "createTime",
-  },
-  {
-    title: "操作",
-    key: "action",
-    slots: { customRender: "action" },
-  },
-];
-
-export default defineComponent({
-  setup() {
-    const formState = reactive<FormState>({
-      userName: "",
-    });
-
-    /* 调用hook 初始化查询一次 */
-    const { currPage, handlePageChange, isLoading, refresh, tableList, total } =
-      useTableList(
-        () =>
-          api.getUserList({
-            keyWord: formState.userName,
-            pageNum: currPage.value,
-            pageSize: 10,
-          }),
-        "userJsons"
-      );
-    refresh();
-
-    const handleSubmit = () => {
-      refresh();
-    };
-
-    /* ===== 新增用户 ===== */
-    const isAddDialogShow = ref(false);
-    const handleAddClick = () => (isAddDialogShow.value = true);
-
-    /* ==== 查看用户 ===== */
-    const isViewDialogShow = ref(false);
-    const viewUserRecord = ref({});
-    const handleView = async (row: any) => {
-      const { data } = await api.detail({ userId: row.id });
-      viewUserRecord.value = {
-        ...data,
-        employeeName: row.employeeName,
-        employeeId: row.employeeId,
-        roleIds: row.roleIds,
-      };
-      isViewDialogShow.value = true;
-    };
-
-    /* ===== 编辑用户 ===== */
-    const isEditDialogShow = ref(false);
-    const editUserRecord = ref({});
-    const handleEditClick = async (row: any) => {
-      const { data } = await api.detail({ userId: row.id });
-      editUserRecord.value = {
-        ...data,
-        employeeName: row.employeeName,
-        employeeId: row.employeeId,
-        roleIds: row.roleIds,
-      };
-      isEditDialogShow.value = true;
-    };
-
-    /* ===== 展示用户详情 ===== */
-    const isDescDialogShow = ref(false);
-    const descUserRecord = ref({});
-    const handleDecs = (e: MouseEvent, row: any) => {
-      e.preventDefault();
-      isDescDialogShow.value = true;
-      descUserRecord.value = row;
-    };
-
-    /* 删除用户 */
-    const handleDeleteUser = (record: any) => {
-      Modal.confirm({
-        title: "删除用户",
-        content: `确定删除用户“${record.userName}”?`,
-        async onOk() {
-          await api.deleteUserById(record.userId);
-          message.success("删除成功");
-          refresh();
-        },
-      });
-    };
-
-    return () => (
-      <div class="userManager">
-        <Form
-          v-model={formState}
-          name="basic"
-          layout="inline"
-          class="searchLine"
-          onSubmit={handleSubmit}
-        >
-          <div>
-            <FormItem label="用户名称">
-              <Input
-                placeholder="请输入用户名称"
-                allowClear
-                v-model={[formState.userName, "value"]}
-              />
-            </FormItem>
-
-            <FormItem>
-              <Button
-                type="primary"
-                html-type="submit"
-                v-slots={{
-                  icon: () => h(resolveComponent("SearchOutlined")),
-                }}
-              >
-                搜索
-              </Button>
-            </FormItem>
-          </div>
-
-          <FormItem>
-            <Button
-              type="primary"
-              v-slots={{
-                icon: () => h(resolveComponent("PlusOutlined")),
-              }}
-              onClick={handleAddClick}
-            >
-              新建用户
-            </Button>
-          </FormItem>
-        </Form>
-
-        <Table
-          dataSource={tableList.value}
-          columns={column}
-          size="middle"
-          loading={isLoading.value}
-          pagination={{
-            pageSize: 10,
-            current: currPage.value,
-            "onUpdate:current": handlePageChange,
-            total: total.value,
-          }}
-          v-slots={{
-            employeeName: ({ record }: any) => {
-              return (
-                <a onClick={(e) => handleDecs(e, record)}>
-                  {record.employeeName}
-                </a>
-              );
-            },
-            action: ({ record }: any) => {
-              return (
-                <>
-                  <Button type="link" onClick={() => handleView(record)}>
-                    查看
-                  </Button>
-                  {record.editFlg && (
-                    <Button
-                      type="link"
-                      onClick={() => handleEditClick(record)}
-                      style="margin: 0 10px"
-                    >
-                      编辑
-                    </Button>
-                  )}
-                  {record.deleteFlg && (
-                    <Button
-                      type="link"
-                      danger
-                      onClick={() => handleDeleteUser(record)}
-                    >
-                      删除
-                    </Button>
-                  )}
-                </>
-              );
-            },
-          }}
-        />
-
-        {/* 对话框 */}
-        <UpdateUserDialog
-          mode="add"
-          v-model={[isAddDialogShow.value, "visible"]}
-          onRefresh={refresh}
-        />
-        <UpdateUserDialog
-          mode="edit"
-          v-model={[isEditDialogShow.value, "visible"]}
-          record={editUserRecord.value}
-          onRefresh={refresh}
-        />
-        <UpdateUserDialog
-          mode="view"
-          v-model={[isViewDialogShow.value, "visible"]}
-          record={viewUserRecord.value}
-        />
-        <UserProfileDialog
-          record={descUserRecord.value}
-          v-model={[isDescDialogShow.value, "visible"]}
-        />
-      </div>
-    );
-  },
-});