|
|
@@ -0,0 +1,375 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted, computed, reactive } from "vue"
|
|
|
+import type { Header } from "@/components/Table/table-partials/models"
|
|
|
+import Rs from "@/core/services/RequestService"
|
|
|
+import type { VbFormItem } from "@/components/Forms/models"
|
|
|
+import { ElInput, ElRadio, ElSwitch } from "element-plus"
|
|
|
+import { dialog } from "@/core/utils/message"
|
|
|
+import "element-plus/es/components/input/style/css"
|
|
|
+import DySelectTree from "@/components/select/DySelectTree.vue"
|
|
|
+import DySelect from "@/components/select/DySelect.vue"
|
|
|
+import type { SelectOptionProp } from "@/components/select/DySelect.vue"
|
|
|
+
|
|
|
+const size = ref<any>("default")
|
|
|
+const modal = ref()
|
|
|
+const enabledStatusOption = reactive([
|
|
|
+ {
|
|
|
+ label: "启用",
|
|
|
+ value: 1,
|
|
|
+ key: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "禁用",
|
|
|
+ value: 0,
|
|
|
+ key: 0,
|
|
|
+ },
|
|
|
+])
|
|
|
+const userTypeOption = reactive([
|
|
|
+ {
|
|
|
+ label: "政府账户",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "企业账号",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+])
|
|
|
+const cols = ref([
|
|
|
+ {
|
|
|
+ name: "账号名",
|
|
|
+ field: "username",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "昵称",
|
|
|
+ field: "name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "手机号码",
|
|
|
+ field: "phone",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "所属企业",
|
|
|
+ field: "companyName",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "用户角色",
|
|
|
+ field: "roles",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "用户状态",
|
|
|
+ field: "enabled",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "操作",
|
|
|
+ field: "action",
|
|
|
+ minWidth: 300,
|
|
|
+ },
|
|
|
+])
|
|
|
+const currentPage = ref(1)
|
|
|
+const pageSize = ref(10)
|
|
|
+const total = ref(0)
|
|
|
+const result = ref<Array<any>>([])
|
|
|
+//const name = ref("")
|
|
|
+const user_type = ref(2)
|
|
|
+const username = ref("")
|
|
|
+const company_name = ref("")
|
|
|
+const loadData = () => {
|
|
|
+ result.value = []
|
|
|
+ Rs.post("/auth/users/getAll", {
|
|
|
+ data: {
|
|
|
+ currentPage: currentPage.value,
|
|
|
+ address: "",
|
|
|
+ city: "",
|
|
|
+ user_type: user_type.value,
|
|
|
+ enabled: "",
|
|
|
+ name: "",
|
|
|
+ username: username.value,
|
|
|
+ company_name: company_name.value,
|
|
|
+ pageSize: pageSize.value,
|
|
|
+ },
|
|
|
+ }).then((res: any) => {
|
|
|
+ result.value = res.data
|
|
|
+ total.value = res.total
|
|
|
+ })
|
|
|
+}
|
|
|
+const pageChange = (v: number) => {
|
|
|
+ currentPage.value = v
|
|
|
+ loadData()
|
|
|
+}
|
|
|
+const perPageChange = (v: number) => {
|
|
|
+ pageSize.value = v
|
|
|
+ currentPage.value = 1
|
|
|
+ loadData()
|
|
|
+}
|
|
|
+//const selectRolesOption = ref([])
|
|
|
+onMounted(() => {
|
|
|
+ loadData()
|
|
|
+})
|
|
|
+
|
|
|
+const contant = computed(() => {
|
|
|
+ return (
|
|
|
+ user_type.value == 1
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ field: "enterprise_id",
|
|
|
+ label: "所属机构",
|
|
|
+ required: false,
|
|
|
+ component: DySelectTree,
|
|
|
+ span: 24,
|
|
|
+ class: "w-100",
|
|
|
+ props: {
|
|
|
+ url: "sys/dict/getOrgList?type=1",
|
|
|
+ defaultExpandLevel: 1,
|
|
|
+ optionMap: { id: "value", label: "label", children: "children" },
|
|
|
+ method: "get",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ field: "enterprise_id",
|
|
|
+ label: "所属企业",
|
|
|
+ required: true,
|
|
|
+ component: DySelect,
|
|
|
+ span: 24,
|
|
|
+ class: "w-100",
|
|
|
+ props: {
|
|
|
+ url: "sys/dict/getCompanyList?type=0",
|
|
|
+ method: "get",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ ) as Array<VbFormItem>
|
|
|
+})
|
|
|
+const items = computed(() => {
|
|
|
+ const arr = [
|
|
|
+ {
|
|
|
+ field: "name",
|
|
|
+ label: "昵称",
|
|
|
+ required: true,
|
|
|
+ component: ElInput,
|
|
|
+ span: 24,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "phone",
|
|
|
+ label: "手机号",
|
|
|
+ required: true,
|
|
|
+ component: ElInput,
|
|
|
+ span: 24,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "username",
|
|
|
+ label: "账号名",
|
|
|
+ required: true,
|
|
|
+ component: ElInput,
|
|
|
+ span: 24,
|
|
|
+ },
|
|
|
+ ...contant.value,
|
|
|
+ {
|
|
|
+ field: "roleIds",
|
|
|
+ label: "账户角色",
|
|
|
+ required: true,
|
|
|
+ component: DySelect,
|
|
|
+ span: 24,
|
|
|
+ class: "w-100",
|
|
|
+ props: {
|
|
|
+ //staticOptions: selectRolesOption.value,
|
|
|
+ url: "auth/roles/getAll",
|
|
|
+ method: "post",
|
|
|
+ configs: { data: { desc: "", isPage: false, name: "", currentPage: 0, pageSize: 0 } },
|
|
|
+ multiple: true,
|
|
|
+ formatFunction: (v: any) => {
|
|
|
+ console.log("vvv", v)
|
|
|
+ const item = {} as SelectOptionProp
|
|
|
+ item.label = v.name
|
|
|
+ item.key = v.id
|
|
|
+ item.value = v.id
|
|
|
+ return item
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "enabled",
|
|
|
+ label: "是否启用",
|
|
|
+ required: true,
|
|
|
+ component: DySelect,
|
|
|
+ span: 24,
|
|
|
+ class: "w-100",
|
|
|
+ props: {
|
|
|
+ staticOptions: enabledStatusOption,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "user_type",
|
|
|
+ label: "用户类型",
|
|
|
+ required: true,
|
|
|
+ component: DySelect,
|
|
|
+ span: 24,
|
|
|
+ class: "w-100",
|
|
|
+ props: {
|
|
|
+ disabled: true,
|
|
|
+ staticOptions: userTypeOption,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ] as Array<VbFormItem>
|
|
|
+
|
|
|
+ if (opreationType.value == "U") {
|
|
|
+ arr.push({
|
|
|
+ field: "changPs",
|
|
|
+ label: "是否重置密码",
|
|
|
+ required: false,
|
|
|
+ span: 24,
|
|
|
+ component: ElSwitch,
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ arr.splice(3, 0, {
|
|
|
+ field: "password",
|
|
|
+ label: "密码",
|
|
|
+ required: true,
|
|
|
+ component: ElInput,
|
|
|
+ span: 24,
|
|
|
+ props: {
|
|
|
+ placeholder: "请输入密码",
|
|
|
+ showPassword: true,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+})
|
|
|
+const formData = ref<any>({
|
|
|
+ name: "",
|
|
|
+ username: "",
|
|
|
+ phone: "",
|
|
|
+ companyName: "",
|
|
|
+ roleIds: [],
|
|
|
+ enabled: 1,
|
|
|
+ user_type: 2,
|
|
|
+ sex: "1",
|
|
|
+ changPs: false,
|
|
|
+})
|
|
|
+//定义需要操作的类型
|
|
|
+const opreationType = ref<"A" | "U" | "D" | "BU">("A")
|
|
|
+const modalTitlePrefix = computed(() => {
|
|
|
+ return opreationType.value == "A" ? "新增" : opreationType.value == "U" || opreationType.value == "BU" ? "编辑" : ""
|
|
|
+})
|
|
|
+const add = () => {
|
|
|
+ opreationType.value = "A"
|
|
|
+ formData.value = Object.assign(
|
|
|
+ {},
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ username: "",
|
|
|
+ phone: "",
|
|
|
+ companyName: "",
|
|
|
+ roleIds: [],
|
|
|
+ enabled: 1,
|
|
|
+ user_type: user_type.value,
|
|
|
+ sex: "1",
|
|
|
+ changPs: false,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ modal.value.show()
|
|
|
+}
|
|
|
+const edit = (row: any) => {
|
|
|
+ opreationType.value = "U"
|
|
|
+
|
|
|
+ const enabled = row.enabled ? 1 : 0
|
|
|
+ const rids = row.roles.map((v: any) => {
|
|
|
+ return v.id
|
|
|
+ })
|
|
|
+ formData.value = Object.assign({}, { ...row }, { enabled: enabled, roleIds: rids, changPs: false })
|
|
|
+ modal.value.show()
|
|
|
+}
|
|
|
+
|
|
|
+const del = (row: any) => {
|
|
|
+ //删除用户
|
|
|
+ dialog.confirm("确认删除账户?", "提交确认", (isConfirmed: any) => {
|
|
|
+ if (isConfirmed.isConfirmed) {
|
|
|
+ Rs.post("/auth/users/del", { data: [row.id] }).then(() => {
|
|
|
+ loadData()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const onSave = () => {
|
|
|
+ const reqUrl = opreationType.value == "A" ? "/auth/users/register" : "/auth/users/update"
|
|
|
+ Rs.post(reqUrl, { data: formData.value }).then(() => {
|
|
|
+ loadData()
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <VbDataTable
|
|
|
+ ref="table"
|
|
|
+ :header="cols"
|
|
|
+ :data="result"
|
|
|
+ :total="total"
|
|
|
+ :currentPage="currentPage"
|
|
|
+ :has-checkbox="false"
|
|
|
+ @page-change="pageChange"
|
|
|
+ @on-items-per-page-change="perPageChange"
|
|
|
+ method="post"
|
|
|
+ >
|
|
|
+ <template v-slot:table-tool>
|
|
|
+ <el-form class="align-items-center" :inline="true">
|
|
|
+ <el-form-item class="mb-0 me-5 align-items-center" label="账号名称:">
|
|
|
+ <el-input class="" style="width: 180px" v-model="username" placeholder="请输入账号名称" :size="size" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="mb-0 me-5 align-items-center" label="企业名称:">
|
|
|
+ <el-input class="" style="width: 180px" v-model="company_name" placeholder="请输入企业名称" :size="size" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="mb-0 me-5 align-items-center" label="昵称:">
|
|
|
+ <el-input
|
|
|
+ class=""
|
|
|
+ style="width: 180px"
|
|
|
+ v-model="company_name"
|
|
|
+ placeholder="请输入企业/机构名称"
|
|
|
+ :size="size"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="mb-0 me-5 align-items-center" label="用户类型:">
|
|
|
+ <el-radio-group v-model="user_type" @change="loadData">
|
|
|
+ <el-radio :label="2" :size="size">企业用户</el-radio>
|
|
|
+ <el-radio :label="1" :size="size">政府用户</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="mb-0 me-0 align-items-center">
|
|
|
+ <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="loadData">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="mb-0 me-0 align-items-center">
|
|
|
+ <el-button class="ms-3 mt-0 btn btn-sm btn-info" @click="add">新增</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <div class="text-danger text-center">
|
|
|
+ <span class="table-action" @click="edit(row)">编辑</span>
|
|
|
+ <!-- <span class="table-action" @click="assignPermission(row)">权限分配</span> -->
|
|
|
+ <span class="table-action" @click="del(row)">删除</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #companyName_header>
|
|
|
+ {{ user_type == 1 ? "所属机构" : "所属企业" }}
|
|
|
+ </template>
|
|
|
+ <template #roles="{ row }">
|
|
|
+ <template v-for="(item, index) in row.roles" :key="index">
|
|
|
+ {{ item.name }}{{ index == row.roles.length - 1 ? "" : "," }}
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template #enabled="{ row }">
|
|
|
+ {{ row.enabled ? "启用" : "停用" }}
|
|
|
+ </template>
|
|
|
+ </VbDataTable>
|
|
|
+ <VbModal
|
|
|
+ v-model:modal="modal"
|
|
|
+ :form-data="formData"
|
|
|
+ :form-items="items"
|
|
|
+ backdrop="static"
|
|
|
+ :keyboard="false"
|
|
|
+ :title-prefix="modalTitlePrefix"
|
|
|
+ title="系统用户"
|
|
|
+ form-label-width="90"
|
|
|
+ modal-body-class="px-10"
|
|
|
+ @confirm="onSave"
|
|
|
+ ></VbModal>
|
|
|
+</template>
|
zhangwy