mkm/TaskSystem-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增添加用户,优化用户详情页

Browse Source
This commit is contained in:
weipengfei 2023-10-11 14:36:56 +08:00
parent 3c12f41818
commit 82410a97a7
5 changed files with 884 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/consumer.ts
View File

@ -38,3 +38,18 @@ export function creatContact(params: any) {
export function sendMsgApi(params: any) {
return request.get({ url: "/contract.contract/postsms", params });
}
//公司下拉列表
export function getCompanyList(params: any) {
return request.get({ url: "/user.user/getCompanyList", params });
}
//角色下拉列表
export function getRolelist(params: any) {
return request.get({ url: "/user.userRole/getlist", params });
}
//创建用户
export function userAdd(params: any) {
return request.post({ url: "/user.user/add", params });
}

89
src/views/consumer/lists/detail.vue
View File

@ -217,50 +217,7 @@
</el-form-item>
</div>
<div>
<el-form-item label="行驶证" prop="car_card">
<el-upload
v-model="formData.qualification.car_card"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessCarA"
>
<img
v-if="formData.qualification.car_card"
:src="formData.qualification.car_card"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-upload
v-model="formData.qualification.car_card_b"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessCarB"
:before-upload="beforeAvatarUpload_two"
>
<img
v-if="formData.qualification.car_card_b"
:src="formData.qualification.car_card_b"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
<div>
<el-form-item label="银行卡号" prop="bank_account">
<el-form-item label="银行卡" prop="bank_account">
<el-upload
v-model="formData.qualification.bank_account"
:disabled="flag"
@ -303,6 +260,50 @@
</el-upload>
</el-form-item>
</div>
<div>
<el-form-item label="行驶证" prop="car_card">
<el-upload
v-model="formData.qualification.car_card"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessCarA"
>
<img
v-if="formData.qualification.car_card"
:src="formData.qualification.car_card"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-upload
v-model="formData.qualification.car_card_b"
:disabled="flag"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessCarB"
:before-upload="beforeAvatarUpload_two"
>
<img
v-if="formData.qualification.car_card_b"
:src="formData.qualification.car_card_b"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
</div>
<template v-if="disabledPartyA">
<el-col :span="24">

146
src/views/consumer/lists/dialog_index.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-form class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="公司名称" prop="company_name">
<el-input
class="w-[280px]"
v-model="queryParams.company_name"
clearable
placeholder="请输入公司名称"
/>
</el-form-item>
<el-form-item label="公司类型" prop="company_type">
<el-select
v-model="queryParams.company_type"
placeholder="公司类型"
clearable
@change="changeType"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in typeList"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<!-- <el-input
class="w-[280px]"
v-model="queryParams.company_type"
clearable
placeholder="请输入公司类型"
/> -->
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
<div class="mt-4">
<el-table :data="pager.lists" @cell-click="handleCurrentChange">
<el-table-column label="公司名称" property="company_name" />
<el-table-column label="公司类型" property="company_type">
<template #default="{ row }">
<span
>{{typeList.find((item: any)=>item.id==row.company_type).name}}</span
>
</template>
</el-table-column>
<el-table-column label="区县" property="area_name" />
<el-table-column label="乡镇" property="street_name" />
<el-table-column label="主联系人" property="master_name" />
<el-table-column label="联系方式" property="master_phone" />
</el-table>
</div>
<div class="flex mt-4 justify-end">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
</div>
</template>
<script lang="ts" setup name="companyLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import {
apiCompanyLists,
companyListTwo,
apiCompanyDelete,
getContractPartyACompanyTypeList,
} from "@/api/company";
import { dictDataLists } from "@/api/setting/dict";
import { defineEmits } from "vue";
// 当前类型
const props = defineProps({
type: {
type: Number,
default: 0,
},
companyTypeList: {
type: Array,
default: () => {
return [];
},
},
});
// 可选公司类型
const typeList = ref([]);
dictDataLists({
type_id: 6,
}).then((res) => {
typeList.value = res.lists;
});
// 查询条件
const queryParams = reactive({
level_two: "",
level_one: "",
company_name: "",
organization_code: "",
city: "",
area: "",
street: "",
company_type: "",
master_name: "",
master_position: "",
master_phone: "",
master_email: "",
other_contacts: "",
area_manager: "",
is_contract: "",
account: "",
password: "",
deposit: "",
deposit_time: "",
qualification: "",
status: "",
});
if (props.type) queryParams.company_type = props.type;
// 选中数据
const emits = defineEmits(["customEvent"]);
// 选中数据子父传递
const handleCurrentChange = (value: any) => {
emits("customEvent", value);
};
// 选择公司类型
const changeType = (e: any) => {
getLists();
};
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: companyListTwo,
params: queryParams,
});
getLists();
</script>

665
src/views/consumer/lists/edit.vue Normal file
View File

@ -0,0 +1,665 @@
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-page-header content="新增用户" @back="$router.back()" />
</el-card>
<el-card class="mt-4 !border-none" shadow="never">
<el-form
ref="formRef"
:model="formData"
:rules="rules"
label-width="84px"
>
<div style="font-size: 1.2rem; margin: 10px 0">基本信息创建</div>
<div class="headimg">
<el-upload
v-model="formData.avatar"
class="avatar-uploader-head"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessAvatar"
>
<img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</div>
<el-col class="pt-6 !border-none">
<el-row>
<el-col :span="11">
<el-form-item label="公司" prop="company_name">
<el-input
v-model="formData.company_name"
placeholder="请选择公司"
readonly
clearable
:style="{ width: '100%' }"
@click="showCompany = true"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="角色" prop="group_id">
<el-select
v-model="formData.group_id"
placeholder="请选择角色"
readonly
:style="{ width: '100%' }"
@change="formRef?.clearValidate(['group_id'])"
>
<el-option
v-for="(item, index) in roleList"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="姓名" prop="nickname">
<el-input
v-model="formData.nickname"
placeholder="请输入姓名"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="性别" prop="sex">
<el-select
v-model="formData.sex"
placeholder="请选择性别"
:style="{ width: '100%' }"
@change="formRef?.clearValidate(['sex'])"
>
<el-option label="男" :value="1" />
<el-option label="女" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="身份证号" prop="id_card">
<el-input
v-model="formData.id_card"
placeholder="请输入身份证号"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="联系电话" prop="account">
<el-input
v-model="formData.account"
placeholder="请输入联系电话"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="省" prop="province">
<el-select
v-model="formData.province_name"
placeholder="请选择省"
:disabled="flag"
clearable
@change="province_change"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.provinceOptions"
:key="index"
:label="item.province_name"
:value="item.province_code"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="市" prop="city">
<el-select
v-model="formData.city_name"
placeholder="请选择市"
clearable
:disabled="flag"
@change="city_change"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.cityOptions"
:key="index"
:label="item.city_name"
:value="item.city_code"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="区县" prop="area">
<el-select
v-model="formData.area_name"
placeholder="请选择区县"
:disabled="flag"
clearable
@change="area_change"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.areaOptions"
:key="index"
:label="item.area_name"
:value="item.area_code"
></el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="formData.street_name"
label="乡镇"
prop="street"
>
<el-select
v-model="formData.street_name"
placeholder="请选择乡镇"
:disabled="flag"
clearable
@change="street_change"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in datas.streetOptions"
:key="index"
:label="item.street_name"
:value="item.street_code"
></el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="formData.village_name"
label="村社"
prop="village"
>
<el-input
v-model="formData.village_name"
:disabled="flag"
placeholder="请输入村社"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
<el-form-item
v-if="formData.brigade_name"
label="小队"
prop="brigade"
>
<el-input
v-model="formData.brigade_name"
:disabled="flag"
placeholder="请输入小队"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</el-row>
</el-col>
<div style="font-size: 1.2rem; margin: 10px 0">资质信息</div>
<div style="display: flex; justify-content: space-between">
<div>
<el-form-item label="身份证" prop="qualification.id_card">
<el-upload
v-model="formData.qualification.id_card"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessIdA"
>
<img
v-if="formData.qualification.id_card"
:src="formData.qualification.id_card"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-upload
v-model="formData.qualification.id_card_b"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessIdB"
>
<img
v-if="formData.qualification.id_card_b"
:src="formData.qualification.id_card_b"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
<div>
<el-form-item label="银行卡" prop="qualification.bank_account">
<el-upload
v-model="formData.qualification.bank_account"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessBankA"
:before-upload="beforeAvatarUpload_three"
>
<img
v-if="formData.qualification.bank_account"
:src="formData.qualification.bank_account"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-upload
v-model="formData.qualification.bank_account_b"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessBankB"
:before-upload="beforeAvatarUpload_three"
>
<img
v-if="formData.qualification.bank_account_b"
:src="formData.qualification.bank_account_b"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
<div>
<el-form-item label="行驶证" prop="car_card">
<el-upload
v-model="formData.qualification.car_card"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessCarA"
>
<img
v-if="formData.qualification.car_card"
:src="formData.qualification.car_card"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<el-upload
v-model="formData.qualification.car_card_b"
class="avatar-uploader pl-3"
:data="{ cid: 1 }"
:headers="{ Token: userStore.token }"
:action="base_url + '/upload/image'"
:show-file-list="false"
:on-success="handleAvatarSuccessCarB"
:before-upload="beforeAvatarUpload_two"
>
<img
v-if="formData.qualification.car_card_b"
:src="formData.qualification.car_card_b"
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</div>
</div>
<el-button type="primary" @click="submit">创建</el-button>
</el-form>
</el-card>
<el-dialog v-model="showCompany">
<DialogIndex
:companyTypeList="datas.dictTypeLists"
:type="41"
@customEvent="customEvent"
></DialogIndex>
</el-dialog>
</div>
</template>
<script lang="ts" setup name="consumerDetail">
import {
type FormInstance,
type UploadProps,
ElMessage,
type UploadUserFile,
} from "element-plus";
import {
upContact,
userAdd,
getRolelist,
getCompanyList,
} from "@/api/consumer";
import {
apiCityList,
apiAreaList,
apiStreetList,
apiProvinceList,
} from "@/api/common";
import { dictDataLists } from "@/api/setting/dict";
import { isEmpty } from "@/utils/util";
import AccountAdjust from "../components/account-adjust.vue";
import useMultipleTabs from "@/hooks/useMultipleTabs";
import useUserStore from "@/stores/modules/user";
import feedback from "@/utils/feedback";
import DialogIndex from "./dialog_index.vue";
import { inject } from "vue";
const base_url: any = inject("base_url");
const { removeTab } = useMultipleTabs();
const router = useRouter();
const route = useRoute();
const flag = ref(true);
const formData = reactive({
id: "",
sex: "",
id_card: "",
nickname: "",
group_id: "",
company_id: "",
company_name: "",
province: "",
city: "",
area: "",
street: "",
village: "",
brigade: "",
province_name: "",
city_name: "",
area_name: "",
street_name: "",
village_name: "",
brigade_name: "",
address: "",
account: "",
qualification: {
id_card: "",
id_card_b: "",
car_card: "",
car_card_b: "",
bank_account: "",
bank_account_b: "",
},
avatar: "",
multipoint_login: 1,
});
const rules = ref({
company_name: [{ required: true, message: "请选择公司", trigger: "blur" }],
group_id: [{ required: true, message: "请选择角色", trigger: "blur" }],
nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
id_card: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
account: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
"qualification.bank_account": [
{ required: true, message: "请上传银行卡", trigger: "blur" },
],
"qualification.id_card": [
{ required: true, message: "请上传身份证", trigger: "blur" },
],
});
// 字典信息
const datas: any = reactive({
provinceOptions: [],
cityOptions: [],
areaOptions: [],
streetOptions: [],
dictTypeLists: [],
contract_type: [],
contract: [],
});
const showCompany = ref(false);
const customEvent = (e: any) => {
formData.company_id = e.id;
formData.company_name = e.company_name;
formData.province = e.province;
formData.city = e.city;
formData.area = e.area;
formData.street = e.street;
formData.village = e.village;
formData.brigade = e.brigade;
formData.province_name = e.province_name;
formData.city_name = e.city_name;
formData.area_name = e.area_name;
formData.street_name = e.street_name;
formData.village_name = e.village_name;
formData.brigade_name = e.brigade_name;
formRef.value?.clearValidate(["company_name"]);
showCompany.value = false;
};
// 角色列表
const roleList = ref([]);
getRolelist({}).then((res: any) => {
roleList.value = res;
});
const formRef = shallowRef<FormInstance>();
const isEdit = ref(false);
const userStore = useUserStore();
const fileList = ref<UploadUserFile[]>([]);
// 图片上传成功返回的url
const handleAvatarSuccessIdA: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.id_card = response.data.uri;
};
const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.avatar = response.data.uri;
};
const handleAvatarSuccessIdB: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.id_card_b = response.data.uri;
};
const handleAvatarSuccessCarA: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.car_card = response.data.uri;
};
const handleAvatarSuccessCarB: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.car_card_b = response.data.uri;
};
const beforeAvatarUpload_two: UploadProps["beforeUpload"] = (rawFile) => {
return true;
};
const handleAvatarSuccessBankA: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.bank_account = response.data.uri;
};
const handleAvatarSuccessBankB: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.qualification.bank_account_b = response.data.uri;
};
const handleAvatarSuccess_four: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
if (response.code == 0) {
ElMessage.error(response.msg);
return;
}
formData.file = response.data.uri;
upContact({ file: formData.file, id: route.query.mdoeid }).then((res) => [
(mode.value = false),
]);
};
const beforeAvatarUpload_three: UploadProps["beforeUpload"] = (rawFile) => {
return true;
};
//获取省份
function province_change(value: string) {
getCityList();
}
function city_change(value: string) {
getAreaList();
}
function area_change(value: string) {
getStreetList();
}
function street_change(value: string) {
formData.street = value;
}
const getProvinceList = async () => {
const data = await apiProvinceList({});
datas["provinceOptions"] = data;
};
const getCityList = async () => {
const data = await apiCityList({ city: formData.province });
datas["cityOptions"] = data;
};
const getAreaList = async () => {
const data = await apiAreaList({ area: formData.city });
datas["areaOptions"] = data;
};
const getStreetList = async () => {
const data = await apiStreetList({ street: formData.area });
datas["streetOptions"] = data;
};
getProvinceList();
// 创建用户
const submit = () => {
if (!formData.avatar) return ElMessage.error("请上传头像");
formRef.value?.validate((e) => {
if (e) {
if (!formData.qualification.id_card || !formData.qualification.id_card_b)
return ElMessage.error("请上传身份证信息");
if (
!formData.qualification.bank_account ||
!formData.qualification.bank_account_b
)
return ElMessage.error("请上传银行卡信息");
userAdd(formData).then(() => {
ElMessage.success("添加成功");
router.back();
});
}
});
};
</script>
<style lang="scss">
.headimg {
margin-top: 24px;
width: 115px;
height: 138px;
float: left;
overflow: hidden;
}
.avatar-uploader-head .el-upload {
width: 115px;
height: 138px;
background-color: #fff;
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload {
width: 9.9vw;
height: 6.3vw;
background-color: #fff;
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
</style>

13
src/views/consumer/lists/index.vue
View File

@ -25,6 +25,19 @@
:params="queryParams"
:page-size="pager.size"
/>
<el-button
v-perms="['user.user/edit']"
class="ml-2.5"
type="primary"
>
<router-link
:to="{
path: getRoutePath('user.user/edit'),
}"
>
创建
</router-link>
</el-button>
</el-form-item>
</el-form>
</el-card>