|
|
@@ -0,0 +1,319 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <DialogCom
|
|
|
+ @closed="onClose"
|
|
|
+ title="关联账号"
|
|
|
+ :visible.sync="isShow"
|
|
|
+ width="1300px"
|
|
|
+ >
|
|
|
+ <div class="page-body">
|
|
|
+ <el-descriptions size="medium" border>
|
|
|
+ <template #title>
|
|
|
+ <h3 class="title">
|
|
|
+ <i class="el-icon-collection-tag"></i>
|
|
|
+ 基础信息
|
|
|
+ </h3>
|
|
|
+ </template>
|
|
|
+ <el-descriptions-item v-for="v in dataInfo" :label="v.label" :key="v.key">{{ v.value }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="角色">{{ roleName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="性别">{{ sex }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="状态">{{ status }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <!-- <div class="info-box"> -->
|
|
|
+ <h3 class="title">
|
|
|
+ <i class="el-icon-collection-tag"></i>
|
|
|
+ 关联人员列表
|
|
|
+ </h3>
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <el-button
|
|
|
+ @click="openSelect"
|
|
|
+ ><span class="requiredlabel">选择关联人员</span></el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="deleteSelected"
|
|
|
+ >批量删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ height="300px"
|
|
|
+ border
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="subUserOrgName"
|
|
|
+ label="机构名称"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="subUserName"
|
|
|
+ label="名称"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="subUserRoleNames"
|
|
|
+ label="角色名称"
|
|
|
+ width="300px"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template v-slot="{ row }">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ @click="removeRow(row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- </div> -->
|
|
|
+ <div slot="footer" class="dialog-footer" style="margin-top: 10px">
|
|
|
+ <el-button type="primary" @click="onSubmit">确定</el-button>
|
|
|
+ <el-button @click="onClose">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </DialogCom>
|
|
|
+ <UserSelector
|
|
|
+ ref="UserSelector"
|
|
|
+ @select="onUserSelect"
|
|
|
+ :customTreeRequest="deptTreeWithSameTypeUp"
|
|
|
+ :otherPrap="searchUserPrap"
|
|
|
+ ></UserSelector>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getUser,updateUserMapper,getUserMapper } from "@/api/system/user";
|
|
|
+import UserSelector from "@/components/userSelector/index.vue";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+import { deptTreeWithSameTypeUp } from "@/api/system/org.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ dicts: ['administrative_level','sys_yes_no','sys_highest_education', "sys_work_type", "sys_duties", "sys_education_type", 'sys_department_type', 'post_no_pass', 'current_position','department_name'],
|
|
|
+ fillter: {},
|
|
|
+ components: {UserSelector},
|
|
|
+ props: [],
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShow:false,
|
|
|
+ userId:null,
|
|
|
+ tableData:[],
|
|
|
+ selectedRows:[],
|
|
|
+ searchUserPrap:{ source:0},
|
|
|
+
|
|
|
+ //基础信息key
|
|
|
+ infoKeys: [
|
|
|
+ { label: '用户名称', key: 'username' },
|
|
|
+ { label: '用户昵称', key: 'name' },
|
|
|
+ { label: '工号', key: 'jobNumber' },
|
|
|
+ // {label:'部门',key:'orgName'},
|
|
|
+ { label: '手机', key: 'phone' },
|
|
|
+ // {label:'性别',key:'gender'},
|
|
|
+ // {label:'状态',key:'isLock'},
|
|
|
+ { label: '机构', key: 'orgName' },
|
|
|
+ ],
|
|
|
+ dataInfo: [],
|
|
|
+ // 机构树选项
|
|
|
+ deptList: undefined,
|
|
|
+ // 遮罩层
|
|
|
+ orgloading: true,
|
|
|
+ // 选中数组
|
|
|
+ orgids: [],
|
|
|
+ // 选中数组
|
|
|
+ Bankids: [],
|
|
|
+ // 非单个停用
|
|
|
+ single: true,
|
|
|
+ // 非多个停用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ deptTreeWithSameTypeUp,
|
|
|
+ handleChange(value) {
|
|
|
+ },
|
|
|
+ async show(id, other = {}) {
|
|
|
+ this.userId=id;
|
|
|
+ this.tableData=[];
|
|
|
+ await this.getInfo(id, other);
|
|
|
+ this.isShow = true;
|
|
|
+ },
|
|
|
+ getInfo(userId) {
|
|
|
+ getUser(userId).then((data) => {
|
|
|
+ if (!data.data) return;
|
|
|
+ let res = data.data;
|
|
|
+ this.dataInfo = this.infoKeys.map((v, i) => {
|
|
|
+ v.value = res[v.key];
|
|
|
+ return v
|
|
|
+ })
|
|
|
+ this.roleName = data.roleName;
|
|
|
+ this.sex = data.sex;
|
|
|
+ this.status = data.status;
|
|
|
+ });
|
|
|
+ getUserMapper(userId).then((data) => {
|
|
|
+ if (!data.data) return;
|
|
|
+ this.tableData=data.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openSelect() {
|
|
|
+ this.$refs.UserSelector.show();
|
|
|
+ },
|
|
|
+ onUserSelect(selectList) {
|
|
|
+ if (!selectList || selectList.length === 0) {
|
|
|
+ this.$message.warning("请选择要关联的人员");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.tableData == null) {
|
|
|
+ this.tableData = [];
|
|
|
+ }
|
|
|
+ let selectedUserOrgIds = selectList.map((i) => i.orgId);
|
|
|
+ // Array.from(new Set(arr))
|
|
|
+ let temp=selectedUserOrgIds.filter(function (item, index, arr) {
|
|
|
+ //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
|
|
|
+ return selectedUserOrgIds.indexOf(item, 0) === index;
|
|
|
+ });
|
|
|
+ if(temp.length<selectedUserOrgIds.length)
|
|
|
+ {
|
|
|
+ this.$message.warning("一个机构下人只能关联一个自建账号,多选时只会选中该机构下的第一个的账号，其他账号将会被忽略");
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.tableData = this.tableData.filter((d) => selectedIds.includes(d.id));
|
|
|
+
|
|
|
+ // 一个机构下人只能关联一个自建账号
|
|
|
+ for (let i = 0; i < selectList.length; i++) {
|
|
|
+ let item = selectList[i];
|
|
|
+ let exist = this.tableData.find((d) => d.subUserId == item.id);
|
|
|
+ let orgExist = this.tableData.find((d) => d.subUserOrgId == item.orgId);
|
|
|
+ console.log(this.orgId, "this.orgId");
|
|
|
+ if (!exist && !orgExist) {
|
|
|
+ let tem = {
|
|
|
+ masterUserId:this.userId,
|
|
|
+ subUserId: item.id,
|
|
|
+ subUserName: item.name,
|
|
|
+ subUserOrgId: item.orgId,
|
|
|
+ subUserOrgName: item.orgName,
|
|
|
+ subUserAccount: item.userName,
|
|
|
+ subUserRoleNames: item.roleNames,
|
|
|
+ };
|
|
|
+ this.tableData.push(tem);
|
|
|
+ // console.log(tem,"tem")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听行选中事件，将选中的行数据存入 selectedRows 数组中
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ // console.log(selection, "selection");
|
|
|
+ this.selectedRows = selection;
|
|
|
+ },
|
|
|
+ deleteSelected() {
|
|
|
+ // 在这里执行批量删除操作，使用 this.selectedRows 数组中的数据
|
|
|
+ console.log("删除选中的数据:", this.selectedRows);
|
|
|
+ // 从数据数组中移除选中的行数据
|
|
|
+ this.tableData = this.tableData.filter(
|
|
|
+ (row) => !this.selectedRows.includes(row)
|
|
|
+ );
|
|
|
+ // 清空选中的行数据
|
|
|
+ this.selectedRows = [];
|
|
|
+ },
|
|
|
+ removeRow(row) {
|
|
|
+ this.$modal
|
|
|
+ .confirm("是否确认删除？")
|
|
|
+ .then(function () {})
|
|
|
+ .then(() => {
|
|
|
+ this.tableData = this.tableData.filter((item) => item !== row);
|
|
|
+ this.$modal.msgSuccess("删除成功");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ this.tableData.map((item) => item.subUserId);
|
|
|
+ let data = {
|
|
|
+ masterUserId: this.userId,
|
|
|
+ mapperUserIds: this.tableData && this.tableData.length>0 ? this.tableData.map((item) => item.subUserId):[]
|
|
|
+ }
|
|
|
+ updateUserMapper(data).then((response) => {
|
|
|
+ this.$modal.msgSuccess("关联成功");
|
|
|
+ this.onClose();
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ onClose()
|
|
|
+ {
|
|
|
+ this.userId=null;
|
|
|
+ this.tableData=[];
|
|
|
+ this.isShow=false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.user-extend{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: left;
|
|
|
+ color: #008CD6ff;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ padding-left: 8px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.info-box {
|
|
|
+ margin: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.demo-form-inline {}
|
|
|
+
|
|
|
+.dialog-footer {}
|
|
|
+
|
|
|
+.container {}
|
|
|
+
|
|
|
+.image-container {
|
|
|
+ display: inline-block;
|
|
|
+ width: 200px;
|
|
|
+ margin-right: 20px;
|
|
|
+ /* 设置与下一个div的水平间距 */
|
|
|
+}
|
|
|
+
|
|
|
+.zoom-image {
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.zoom-image:hover {
|
|
|
+ transform: scale(1.02);
|
|
|
+}
|
|
|
+
|
|
|
+.border-color-change {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ transition: border-color 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.border-color-change:hover {
|
|
|
+ border-color: #1ea8e9;
|
|
|
+ /* 您可以将此颜色更改为所需的颜色 */
|
|
|
+}
|
|
|
+</style>
|
zhulu