|
|
@@ -0,0 +1,506 @@
|
|
|
+<!-- 模板区域 -->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <PageMain class="vh100">
|
|
|
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
+ <el-form-item label="保险公司">
|
|
|
+ <el-input v-model="formInline.name" placeholder="输入保险公司查找" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="companyQuery">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="companyAdd">
|
|
|
+ <template #icon>
|
|
|
+ <el-icon>
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ 添加保险公司</el-button>
|
|
|
+ <div :style="{ height: tableHeight, marginTop: '20px' }">
|
|
|
+ <el-auto-resizer>
|
|
|
+ <template #default="{ height, width }">
|
|
|
+ <el-table-v2 :columns="columns" :data="tabledata" :width="width" :height="height" v-loading="loading"
|
|
|
+ ref="multipleTableRef" :expand-column-key="expandColumnKey" header-class="header-class">
|
|
|
+ <template #cell="scope">
|
|
|
+ <div v-if="scope.column.key == 'option'" class="flex j-s a-c">
|
|
|
+ <el-button type="primary" link @click="addSubsidiary(scope.rowData)"
|
|
|
+ v-auth="'organizationlist.edit'"> 添加子公司
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown placement="bottom-start">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ 更 多
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <Auth :value="'organizationlist.delete'">
|
|
|
+ <el-dropdown-item @click="companyEdit(scope.rowData)">编辑</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="companyDel(scope.rowData)">删除</el-dropdown-item>
|
|
|
+ </Auth>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-v2>
|
|
|
+ </template>
|
|
|
+ </el-auto-resizer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </PageMain>
|
|
|
+ <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" @close="close">
|
|
|
+ <ElRow :gutter="20">
|
|
|
+ <el-form :model="cpmpanyform" :inline="true" label-width="120px" :rules="cpmpanyformRules" label-position="top"
|
|
|
+ ref="FormRef" style="width: 100%;" :size="fromSize">
|
|
|
+ <ElCol :md="24" :lg="12" v-if="dialogType == 'subsidiaryadd' || dialogType == 'subsidiaryedit'">
|
|
|
+ <el-form-item label="上级保险公司">
|
|
|
+ <el-input v-model="cpmpanyform.parentName" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12">
|
|
|
+ <el-form-item label="保险公司名称" prop="name">
|
|
|
+ <el-input v-model="cpmpanyform.name" placeholder="请输入保险公司名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12">
|
|
|
+ <el-form-item label="简称" prop="nameSimple">
|
|
|
+ <el-input v-model="cpmpanyform.nameSimple" placeholder="请输入简称" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="dialogType == 'add' || dialogType == 'edit'">
|
|
|
+ <el-form-item label="类型" prop="type">
|
|
|
+ <el-select v-model="cpmpanyform.type" placeholder="请选择类型" style="width: 100%;" clearable filterable>
|
|
|
+ <el-option label="渠道" :value="0" />
|
|
|
+ <el-option label="财险" :value="1" />
|
|
|
+ <el-option label="寿险" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="dialogType == 'add' || dialogType == 'edit'">
|
|
|
+ <el-form-item label="编码" prop="code">
|
|
|
+ <el-input v-model="cpmpanyform.code" placeholder="输入4位code编码" show-word-limit maxlength="4" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="dialogType == 'subsidiaryadd'">
|
|
|
+ <el-form-item label="地区">
|
|
|
+ <el-cascader v-model="provinceoptions" style="width: 100%;" filterable clearable :options="areaOptions"
|
|
|
+ :props="props" @change="provinceChange" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12">
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input v-model="cpmpanyform.remark" placeholder="输入备注" type="textarea" maxlength="500"
|
|
|
+ show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="dialogType == 'add' || dialogType == 'edit'">
|
|
|
+ <el-form-item label="logo">
|
|
|
+ <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="sysIconupload"
|
|
|
+ ref="upload1" :limit="1" :class="{ disabled: uploadDisabled }" :on-remove="handleRemove">
|
|
|
+ <img v-if="sysIconList.url" :src="sysIconList.url" class="avatar" style="width: 100%;height: 100%;" />
|
|
|
+ <el-icon v-else class="avatar-uploader-icon">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ </el-form>
|
|
|
+ </ElRow>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="saveInfo(FormRef)">
|
|
|
+ 保存
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<!-- 行为区域 -->
|
|
|
+<script lang='tsx' setup>
|
|
|
+import api from '@/api';
|
|
|
+import { ElTag, ElMessage } from 'element-plus'
|
|
|
+import ImagePreview from '@/components/ImagePreview/index.vue';
|
|
|
+import { FormRules, FormInstance, UploadFile, ComponentSize, ElMessageBox } from 'element-plus';
|
|
|
+
|
|
|
+interface Column {
|
|
|
+ key?: string,
|
|
|
+ dataKey?: string,
|
|
|
+ title: string,
|
|
|
+ width: number,
|
|
|
+ class?: string,
|
|
|
+ cellRenderer?: any
|
|
|
+ align?: "left" | "center" | "right"; // align 是可选的,且只能是这三个值之一
|
|
|
+}
|
|
|
+// 检索
|
|
|
+const formInline = reactive({
|
|
|
+ name: '',
|
|
|
+})
|
|
|
+//
|
|
|
+const cpmpanyform = reactive({
|
|
|
+ code: "",//编码
|
|
|
+ companyCode: "",
|
|
|
+ name: "",//名称
|
|
|
+ parentId: '0',
|
|
|
+ parentName: '',
|
|
|
+ nameSimple: '',//简称
|
|
|
+ remark: "",//备注
|
|
|
+ type: "",//类型
|
|
|
+ logo: "",//图片id
|
|
|
+ id: '',
|
|
|
+})
|
|
|
+const validateCode = (rule: any, value: any, callback: any) => {
|
|
|
+ // 定义正则表达式,例如:只允许字母、数字,长度在4到10个字符之间
|
|
|
+ const codeRegex = /^[A-Z0-9]+$/i;
|
|
|
+ // 判断是否为空
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error('请输入code编码'));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证是否符合正则表达式
|
|
|
+ if (!codeRegex.test(value)) {
|
|
|
+ return callback(new Error('code编码格式不正确,仅支持4位字母或数字'));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证通过
|
|
|
+ callback();
|
|
|
+};
|
|
|
+const cpmpanyformRules = ref<FormRules>({
|
|
|
+ code: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入code编码' },
|
|
|
+ { min: 4, max: 4, message: '仅支持4位字母或数字', trigger: 'blur' },
|
|
|
+
|
|
|
+ { validator: validateCode, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ name: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入保险公司名称' },
|
|
|
+ { min: 8, max: 50, message: '请输入8-50个字符', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ nameSimple: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入简称' },
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择类型' },
|
|
|
+ ],
|
|
|
+ logo: [
|
|
|
+ { required: true, trigger: 'change', message: '请上传图片' },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const sysIconList = reactive({
|
|
|
+ url: "",
|
|
|
+})
|
|
|
+const props = {
|
|
|
+ expandTrigger: 'hover' as const,
|
|
|
+ value: 'areaCode',
|
|
|
+ label: 'areaCname',
|
|
|
+ children: 'child',
|
|
|
+ checkStrictly: true,
|
|
|
+
|
|
|
+}
|
|
|
+const FormRef = ref<FormInstance>()
|
|
|
+const provinceoptions = ref()//省市区回显数据
|
|
|
+const areaOptions = ref()//省市区数据
|
|
|
+const dialogTitle = ref('添加保险公司')//弹窗title
|
|
|
+const dialogType = ref('add')//弹窗title add | edit | subsidiaryadd | subsidiaryedit
|
|
|
+const fromSize = ref<ComponentSize>('large')//表单大小
|
|
|
+const loading = ref(false)
|
|
|
+const uploadDisabled = ref(false)//图片回显去掉上传按键
|
|
|
+const tableHeight = ref(''); // 初始化表格高度
|
|
|
+const multipleTableRef = ref();
|
|
|
+const tabledata = ref([]);//树形数据
|
|
|
+const dialogVisible = ref(false);//弹窗开关
|
|
|
+const expandColumnKey = 'name'//标记可展开列
|
|
|
+const columns: Column[] = [
|
|
|
+ {
|
|
|
+ key: 'downloadUrl', dataKey: "downloadUrl", title: "logo", width: 100, align: "center",
|
|
|
+ cellRenderer: ({ cellData: logo }: any) => {
|
|
|
+ if (logo) {
|
|
|
+ return <ImagePreview src={logo} width='40px' height='40px'></ImagePreview>;
|
|
|
+ } else {
|
|
|
+ return "-";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ { key: 'name', dataKey: "name", title: "保险公司名称", width: 500, },
|
|
|
+ { key: 'companyCode', dataKey: "companyCode", title: "保险公司代码", width: 200, align: "center" },
|
|
|
+ { key: 'nameSimple', dataKey: "nameSimple", title: "简称", width: 200, align: "center" },
|
|
|
+ {
|
|
|
+ key: 'type', dataKey: "type", title: "类型", width: 200, align: "center", cellRenderer: ({ cellData: type }: any) => {
|
|
|
+ if (type == 1) {
|
|
|
+ return <ElTag>财险</ElTag>;
|
|
|
+ } else if (type == 0) {
|
|
|
+ return <ElTag>渠道</ElTag>;
|
|
|
+ } else {
|
|
|
+ return <ElTag>{type}</ElTag>;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option',
|
|
|
+ title: "操作",
|
|
|
+ width: 250,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ const tableElement = multipleTableRef.value?.$el as HTMLElement;
|
|
|
+ if (tableElement) {
|
|
|
+ const offsetTop = tableElement.offsetTop; // 获取 offsetTop
|
|
|
+ let height = window.innerHeight;
|
|
|
+ tableHeight.value = height - offsetTop - 270 + "px";
|
|
|
+ }
|
|
|
+ }, 10);
|
|
|
+})
|
|
|
+onBeforeMount(() => {
|
|
|
+ findTree();//保险公司树结构查询
|
|
|
+ queryTreeQuery();//获取区划数据
|
|
|
+})
|
|
|
+const findTree = () => {
|
|
|
+ loading.value = true;
|
|
|
+ api.company.findTree({ name: formInline.name }).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ tabledata.value = res.data;
|
|
|
+ loading.value = false;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: res.msg,
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+const companyQuery = () => {
|
|
|
+ findTree();
|
|
|
+}
|
|
|
+//
|
|
|
+const companyAdd = () => {
|
|
|
+ dialogVisible.value = true;
|
|
|
+ dialogTitle.value = '添加保险公司';
|
|
|
+ dialogType.value = 'add';
|
|
|
+}
|
|
|
+//添加子公司
|
|
|
+const addSubsidiary = (column: any) => {
|
|
|
+ dialogTitle.value = '添加子公司';
|
|
|
+ dialogType.value = 'subsidiaryadd';
|
|
|
+ dialogVisible.value = true;
|
|
|
+ cpmpanyform.parentName = column.name;
|
|
|
+ cpmpanyform.parentId = column.id;
|
|
|
+ cpmpanyform.code = column.code;
|
|
|
+
|
|
|
+}
|
|
|
+//删除
|
|
|
+const companyDel = (column: any) => {
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ '保险公司删除后不可恢复,请谨慎操作',
|
|
|
+ '确定删除保险公司?',
|
|
|
+ {
|
|
|
+ confirmButtonText: '确定删除',
|
|
|
+ type: 'warning',
|
|
|
+ center: true,
|
|
|
+ confirmButtonClass: 'el-button--danger',
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ api.company.CompanyDel(column.id).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ findTree();
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg,
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ })
|
|
|
+
|
|
|
+}
|
|
|
+// 编辑
|
|
|
+const companyEdit = (column: any) => {
|
|
|
+ if (column.parentId == '0') {
|
|
|
+ dialogType.value = 'edit';
|
|
|
+ dialogTitle.value = '编辑';
|
|
|
+ dialogVisible.value = true;
|
|
|
+ cpmpanyform.id = column.id;
|
|
|
+ cpmpanyform.code = column.code;
|
|
|
+ cpmpanyform.companyCode = column.companyCode;
|
|
|
+ cpmpanyform.name = column.name;
|
|
|
+ cpmpanyform.parentId = column.parentId;
|
|
|
+ cpmpanyform.nameSimple = column.nameSimple;
|
|
|
+ cpmpanyform.remark = column.remark;
|
|
|
+ cpmpanyform.type = column.type;
|
|
|
+ cpmpanyform.logo = column.logo;
|
|
|
+ sysIconList.url = column.downloadUrl;
|
|
|
+ } else {
|
|
|
+ dialogType.value = 'subsidiaryedit';
|
|
|
+ dialogTitle.value = '编辑';
|
|
|
+ dialogVisible.value = true;
|
|
|
+ cpmpanyform.id = column.id;
|
|
|
+ cpmpanyform.code = column.code;
|
|
|
+ cpmpanyform.companyCode = column.companyCode;
|
|
|
+ cpmpanyform.name = column.name;
|
|
|
+ cpmpanyform.nameSimple = column.nameSimple;
|
|
|
+ cpmpanyform.parentId = column.parentId;
|
|
|
+ cpmpanyform.parentName = column.parentName;
|
|
|
+ cpmpanyform.remark = column.remark;
|
|
|
+ sysIconList.url = column.downloadUrl;
|
|
|
+ }
|
|
|
+
|
|
|
+ // (Object.keys(cpmpanyform) as (keyof typeof cpmpanyform)[]).forEach((key) => {
|
|
|
+ // if (key in column) {
|
|
|
+ // cpmpanyform[key] = column[key] as any;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+//获取区划数据
|
|
|
+const queryTreeQuery = () => {
|
|
|
+ api.dept.queryTree().then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ areaOptions.value = res.data;
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg,
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+const provinceChange = (value: any) => {
|
|
|
+ cpmpanyform.companyCode = cpmpanyform.code + '1' + value[value.length - 1];
|
|
|
+}
|
|
|
+const saveInfo = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (dialogType.value == 'add') {
|
|
|
+ cpmpanyform.companyCode = cpmpanyform.code + '1000000';
|
|
|
+ api.company.saveInsCompany({ ...cpmpanyform }).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ dialogVisible.value = false;
|
|
|
+ findTree();
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg,
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (dialogType.value == 'subsidiaryadd') {
|
|
|
+ api.company.saveInsCompany({ ...cpmpanyform }).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ dialogVisible.value = false;
|
|
|
+ findTree();
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg,
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ api.company.editInsCompany({ ...cpmpanyform }).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ dialogVisible.value = false;
|
|
|
+ findTree();
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg,
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: '信息不完整',
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+const sysIconupload = (file: any) => {
|
|
|
+ let files = file.raw;
|
|
|
+ const params = new FormData(); // 声明formData数据类型
|
|
|
+ params.append("file", files);
|
|
|
+ api.toolApi.fileupload(params).then((res: any) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ cpmpanyform.logo = res.data.id;
|
|
|
+ uploadDisabled.value = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const handleRemove = (file: UploadFile) => {
|
|
|
+ sysIconList.url = '';
|
|
|
+ uploadDisabled.value = false;
|
|
|
+
|
|
|
+}
|
|
|
+const close = () => {
|
|
|
+ cpmpanyform.code = '';
|
|
|
+ cpmpanyform.name = '';
|
|
|
+ cpmpanyform.parentId = '0';
|
|
|
+ cpmpanyform.parentName = '';
|
|
|
+ cpmpanyform.nameSimple = '';
|
|
|
+ cpmpanyform.remark = '';
|
|
|
+ cpmpanyform.type = '';
|
|
|
+ cpmpanyform.logo = '';
|
|
|
+ provinceoptions.value = [];
|
|
|
+ sysIconList.url = '';
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+:deep(.header-class .el-table-v2__header-cell) {
|
|
|
+ padding: 10px 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+ background-color: #eef1f6;
|
|
|
+ border-bottom: 1px solid #eef1f6;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table-v2__header-row) {
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #eef1f6;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table-v2__row) {
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table-v2__expand-icon) {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table-v2__cell-text) {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-dropdown-link) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 15px;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.disabled :deep(.el-upload--picture-card) {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<!-- 样式区域 -->
|