恢复用户列表功能

This commit is contained in:
gxwebsoft
2024-05-17 06:04:56 +08:00
parent ec629c4540
commit fc7752cb18
73 changed files with 10390 additions and 657 deletions

View File

@@ -0,0 +1,298 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
width="60%"
:visible="visible"
:maxable="maxable"
:title="isUpdate ? '企业详情' : '添加企业'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<div style="background-color: #f3f3f3; padding: 8px">
<a-card title="基本信息">
<a-form
:label-col="
styleResponsive
? { lg: 2, md: 6, sm: 4, xs: 24 }
: { flex: '100px' }
"
:wrapper-col="styleResponsive ? { offset: 1 } : { offset: 1 }"
style="margin-top: 20px"
>
<a-form-item labelAlign="right" label="企业logo">
<ele-image-upload
v-model:value="logo"
disabled
:accept="'image/*'"
:item-style="{ width: '50px', height: '50px' }"
:limit="1"
@upload="onUpload"
@remove="onClose"
/>
</a-form-item>
<a-form-item label="企业简称">
<a-space size="middle">
<span>{{ form.shortName }}</span>
</a-space>
</a-form-item>
<a-form-item label="企业全称">
<a-space size="middle">
<span>{{ form.companyName }}</span>
<a-tag color="green" v-if="form.authentication">已认证</a-tag>
<a-tag color="orange" v-else>未认证</a-tag>
</a-space>
<!-- <div class="position-right">-->
<!-- <a-button>前往认证</a-button>-->
<!-- </div>-->
</a-form-item>
<a-form-item label="主体类型">
<a-tag v-if="form.companyType === 0">个人</a-tag>
<a-tag v-if="form.companyType === 10" color="">企业</a-tag>
</a-form-item>
<a-divider style="padding-bottom: 20px" />
<a-form-item label="所属地区">
<a-space size="middle">
<span>{{ form.province }} {{ form.city }} {{ form.region }}</span>
</a-space>
</a-form-item>
<a-form-item label="企业地址">
<a-space size="middle">
<span>{{ form.address }}</span>
</a-space>
</a-form-item>
<a-form-item label="联系电话">
<a-space size="middle">
<span>{{ form.phone }}</span>
</a-space>
</a-form-item>
<a-form-item label="企业域名">
<a-space size="middle">
<span>{{ form.domain }}</span>
</a-space>
</a-form-item>
<a-divider style="padding-bottom: 20px" />
<a-form-item label="企业成员">
<span>{{ form.users }}个成员</span>
</a-form-item>
<a-form-item label="企业部门">
<span>{{ form.departments }}</span>
<span>个部门</span>
</a-form-item>
<a-form-item label="人数上限">
<span>{{ form.users }}/{{ form.members }}</span>
<!-- <a-button type="link" v-if="form.authentication === false">-->
<!-- 去认证扩容-->
<!-- </a-button>-->
</a-form-item>
<a-form-item label="存储空间">
{{ getFileSize(form.storage) }}/{{ getFileSize(form.storageMax) }}
</a-form-item>
<a-divider style="padding-bottom: 20px" />
<a-form-item label="行业类型">
<a-space size="middle">
<span>{{ form.industryParent }} {{ form.industryChild }}</span>
</a-space>
</a-form-item>
<a-form-item label="应用版本">
<span v-if="form.version === 10">体验版试用期1个月</span>
<span v-if="form.version === 20">正式版</span>
<!-- <div class="position-right">-->
<!-- <a-button>前往升级</a-button>-->
<!-- </div>-->
</a-form-item>
<a-form-item label="到期时间">
<span>{{ form.expirationTime }}</span>
</a-form-item>
<a-form-item label="创建时间">
<span>{{ form.createTime }}</span>
</a-form-item>
<a-divider style="padding-bottom: 20px" />
<a-form-item label="企业ID">
<span>{{ form.tenantId }}</span>
</a-form-item>
<a-form-item label="企业号">
<span>{{ form.tenantCode }}</span>
</a-form-item>
<a-form-item
label="注销"
extra="注销后,当前应用的数据将会销毁,且不可恢复,请谨慎操作"
>
<a-button>注销</a-button>
</a-form-item>
</a-form>
</a-card>
</div>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { addCompany, updateCompany } from '@/api/oa/company';
import { Company } from '@/api/oa/company/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { getFileSize } from '@/utils/common';
import { FormInstance } from 'ant-design-vue/es/form';
import { FILE_SERVER } from '@/config/setting';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Company | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
const logo = ref<any>([]);
const formRef = ref<FormInstance | null>(null);
// 表单信息
const form = reactive<Company>({
companyId: undefined,
companyName: '',
shortName: '',
companyType: undefined,
companyLogo: '',
domain: '',
phone: '',
invoiceHeader: '',
startTime: '',
expirationTime: '',
version: '',
members: undefined,
storage: '',
storageMax: '',
industryParent: '',
industryChild: '',
departments: undefined,
country: '',
province: '',
city: '',
region: '',
address: '',
longitude: '',
latitude: '',
comments: '',
authentication: '',
status: '',
userId: '',
users: '',
tenantId: undefined,
tenantCode: '',
createTime: ''
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
name: [
{
required: true,
type: 'string',
message: '请输入企业名称',
trigger: 'blur'
}
],
model: [
{
required: true,
type: 'string',
message: '请输入企业型号',
trigger: 'blur'
}
],
factoryNo: [
{
required: true,
type: 'string',
message: '请输入出厂编号',
trigger: 'blur'
}
]
});
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updateCompany : addCompany;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
if (props.data.companyLogo) {
logo.value = [];
logo.value.push({
uid: 1,
url: FILE_SERVER + props.data.companyLogo,
status: ''
});
}
assignObject(form, props.data);
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less"></style>
<style lang="less">
.position-right {
position: absolute;
right: 0;
top: 0;
}
</style>