feat: 绑定用户接口

This commit is contained in:
JiangQiming 2023-01-30 17:30:12 +08:00
parent c1adddbb3b
commit 9a82577e9c
1 changed files with 176 additions and 109 deletions

View File

@ -1,103 +1,125 @@
<template> <template>
<a-modal <div>
v-model:visible="_vis" <a-modal
title="同步用户" v-model:visible="_vis"
:footer="null" title="同步用户"
@cancel="_vis = false" :footer="null"
width="80%" @cancel="_vis = false"
> width="80%"
<a-row :gutter="10"> >
<a-col :span="4"> <a-row :gutter="10">
<a-input <a-col :span="4">
v-model:value="deptName" <a-input
@keyup.enter="getDepartment" v-model:value="deptName"
allowClear @keyup.enter="getDepartment"
placeholder="请输入部门名称" allowClear
style="margin-bottom: 8px" placeholder="请输入部门名称"
> style="margin-bottom: 8px"
<template #addonAfter> >
<AIcon <template #addonAfter>
type="SearchOutlined"
style="cursor: pointer"
@click="getDepartment"
/>
</template>
</a-input>
<a-tree
:tree-data="deptTreeData"
:fieldNames="{ title: 'name', key: 'id' }"
:selectedKeys="[deptId]"
@select="onTreeSelect"
>
</a-tree>
<a-empty v-if="!deptTreeData.length" />
</a-col>
<a-col :span="20">
<JTable
ref="tableRef"
:columns="columns"
:dataSource="dataSource"
:loading="tableLoading"
model="table"
>
<template #headerTitle>
<a-button type="primary" @click="handleAutoBind">
自动绑定
</a-button>
</template>
<template #status="slotProps">
<a-space>
<a-badge
:status="slotProps.status.value"
:text="slotProps.status.text"
></a-badge>
<AIcon <AIcon
v-if="slotProps.status.value === 'error'" type="SearchOutlined"
type="ExclamationCircleOutlined" style="cursor: pointer"
style="color: #1d39c4; cursor: pointer" @click="getDepartment"
@click="handleError(slotProps.errorStack)"
/> />
</a-space> </template>
</template> </a-input>
<template #action="slotProps"> <a-tree
<a-space :size="16"> :tree-data="deptTreeData"
<a-tooltip :fieldNames="{ title: 'name', key: 'id' }"
v-for="i in getActions(slotProps, 'table')" :selectedKeys="[deptId]"
:key="i.key" @select="onTreeSelect"
v-bind="i.tooltip" >
> </a-tree>
<a-popconfirm <a-empty v-if="!deptTreeData.length" />
v-if="i.popConfirm" </a-col>
v-bind="i.popConfirm" <a-col :span="20">
:disabled="i.disabled" <JTable
ref="tableRef"
:columns="columns"
:dataSource="dataSource"
:loading="tableLoading"
model="table"
>
<template #headerTitle>
<a-button type="primary" @click="handleAutoBind">
自动绑定
</a-button>
</template>
<template #status="slotProps">
<a-space>
<a-badge
:status="slotProps.status.value"
:text="slotProps.status.text"
></a-badge>
</a-space>
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip
v-for="i in getActions(slotProps, 'table')"
:key="i.key"
v-bind="i.tooltip"
> >
<a-button <a-popconfirm
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled" :disabled="i.disabled"
>
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0" style="padding: 0"
type="link" type="link"
><AIcon :type="i.icon" v-else
/></a-button> @click="
</a-popconfirm> i.onClick && i.onClick(slotProps)
<a-button "
style="padding: 0" >
type="link" <a-button
v-else :disabled="i.disabled"
@click="i.onClick && i.onClick(slotProps)" style="padding: 0"
> type="link"
<a-button ><AIcon :type="i.icon"
:disabled="i.disabled" /></a-button>
style="padding: 0" </a-button>
type="link" </a-tooltip>
><AIcon :type="i.icon" </a-space>
/></a-button> </template>
</a-button> </JTable>
</a-tooltip> </a-col>
</a-space> </a-row>
</template> </a-modal>
</JTable>
</a-col> <!-- 绑定用户 -->
</a-row> <a-modal
</a-modal> v-model:visible="bindVis"
title="绑定用户"
:maskClosable="false"
:confirm-loading="confirmLoading"
@cancel="handleCancel"
@ok="handleBindSubmit"
>
<a-form layout="vertical">
<a-form-item label="用户" v-bind="validateInfos.userId">
<a-select
v-model:value="formData.userId"
:options="allUserList"
allowClear
show-search
option-filter-prop="children"
:filter-option="filterOption"
placeholder="请选择用户"
/>
</a-form-item>
</a-form>
</a-modal>
</div>
</template> </template>
<script setup lang="ts" name="SyncUser"> <script setup lang="ts" name="SyncUser">
@ -106,6 +128,9 @@ import { PropType } from 'vue';
import moment from 'moment'; import moment from 'moment';
import { Modal, message } from 'ant-design-vue'; import { Modal, message } from 'ant-design-vue';
import type { ActionsType } from '@/components/Table/index.vue'; import type { ActionsType } from '@/components/Table/index.vue';
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;
type Emits = { type Emits = {
(e: 'update:visible', data: boolean): void; (e: 'update:visible', data: boolean): void;
@ -220,8 +245,7 @@ const getActions = (
}, },
icon: 'EditOutlined', icon: 'EditOutlined',
onClick: () => { onClick: () => {
// visible.value = true; handleBind(data);
// current.value = data;
}, },
}, },
{ {
@ -344,7 +368,17 @@ watch(
* 绑定用户 * 绑定用户
*/ */
const bindVis = ref(false); const bindVis = ref(false);
const formData = ref({}); const confirmLoading = ref(false);
const formData = ref({ userId: '' });
const formRules = ref({
userId: [{ required: true, message: '请选择用户', trigger: 'change' }],
});
const { resetFields, validate, validateInfos, clearValidate } = useForm(
formData.value,
formRules.value,
);
const handleBind = (row: any) => { const handleBind = (row: any) => {
bindVis.value = true; bindVis.value = true;
formData.value = row; formData.value = row;
@ -352,22 +386,55 @@ const handleBind = (row: any) => {
}; };
/** /**
* 查看错误信息 * 绑定用户, 用户下拉筛选
*/ */
const handleError = (e: any) => { const filterOption = (input: string, option: any) => {
Modal.info({ return (
title: '错误信息', option.componentOptions.children[0].text
content: JSON.stringify(e), .toLowerCase()
.indexOf(input.toLowerCase()) >= 0
);
};
/**
* 绑定提交
*/
const handleBindSubmit = () => {
validate().then(async () => {
const params = {
// providerName: formData.value.thirdPartyUserName,
// thirdPartyUserId: formData.value.thirdPartyUserId,
userId: formData.value.userId,
};
confirmLoading.value = true;
if (props.data.type === 'dingTalk') {
configApi
.dingTalkBindUser([params], props.data.id)
.then(() => {
message.success('操作成功');
bindVis.value = false;
getTableData();
})
.finally(() => {
confirmLoading.value = false;
});
} else if (props.data.type === 'weixin') {
configApi
.weChatBindUser([params], props.data.id)
.then(() => {
message.success('操作成功');
bindVis.value = false;
getTableData();
})
.finally(() => {
confirmLoading.value = false;
});
}
}); });
}; };
/** const handleCancel = () => {
* 查看详情 bindVis.value = false;
*/ resetFields()
const handleDetail = (e: any) => {
Modal.info({
title: '详情信息',
content: JSON.stringify(e),
});
}; };
</script> </script>