operation-Backend/src/views/insuranceCompanyConfiguration/insuranceCompanyConfig.vue

<!-- 模板区域 -->
<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, 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 = () => {
  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>
<!-- 样式区域 -->