cooladmin使用整理
1、后端关键字自动生成没有代码段提示，原因是拉取的项目代码中没有.vscode文件夹，复制一套至项目src同级即可
2、前端快速创建，在Entity完成后就去快速创建中选数据结构，这时没有对应的内容，数据结构是和controller层admin下的文件对应的，也就是说有几个接口文件就可以创建几个前端页面。
3、前端详情编辑页面中的内容可以使用折叠卡片，在item中使用cl-form-card组件，为其添加children数组，children中正常写各个组件和字段就可以。
4、前端列表页刷新数据分页展示数据参数设置，添加参数也可以在这里设置
const Crud = useCrud({service: service.purchase.orderComparePrices},(app) => {app.refresh({ size: 5 });}
);//其他参数
const Crud = useCrud({service: service.purchase.comparePricesInfo},(app) => {app.refresh({ size: 5, comparePricesId: props.comparePricesId });}
);5、设置分页为5，列表展示五行信息，列表高度为0不展示内容，修改table样式
<cl-table ref="Table" style="max-height: 722px;" />6、前端获取浏览器cookie
import { storage } from "/@/cool/utils";
const username = storage.get("username") || "";//用户名7、获取数组字典用于页面展示
import { useCool } from "/@/cool";
const { service } = useCool();//供应商启用状态数据字典选项
export async function getDictOps(dictName: string[]): Promise<any[]> {const types = new Array([dictName]);try {const res = await service.dict.info.data({ types: types });const status = res[dictName].map((item: any) => ({...item,label: item.name,// type: getType(item.value, dictName[0]),//为标签设置颜色，如果设置了type，会将颜色设置覆盖掉，使用color就不设置typecolor: getColor(item.value, dictName[0]),}));return status;} catch (error) {console.error('Error fetching dictionary operations:', error);throw error;}
}//设置选项标签类型：success、danger、warning、error
function getType(value: string, dictName: string): string {switch (dictName) {//耗材启用状态case 'status':return value === 1 ? "success" : "danger";//供应商启用状态case 'vendorStatus':return value === 'Y' ? "success" : "danger";//供应商等级选项case 'vendorLevelOps':switch (value) {case 0:return "success";//优质供应商case 1:return "info";//正常case 2:return "info";//重点关注case 3:return "danger";//劣质供应商case 4:return "warning";//黑名单default:return "info";}//比价拟用采纳状态case 'pricesInfoIsProposed':return value === 1 ? "success" : "danger";// //订单状态选项case 'PIOrderStateOps':return info;//订单验收状态case 'PIOrderResultOps':switch (value) {case 0:return "info";//未验收case 1:return "info";//通过case 2:return "danger";//不通过default:return "info";}default:return "info";}
}function getColor(value: string, dictName: string): string {switch (dictName) {//耗材启用状态case 'status':return value === 1 ? "#67c23a" : "#f56c6c";//供应商启用状态case 'vendorStatus':return value === 'Y' ? "#67c23a" : "#f56c6c";//供应商等级选项case 'vendorLevelOps':switch (value) {case 0:return "#FF007F";//优质供应商case 1:return "#00BFFF";//正常case 2:return "#67c23a";//重点关注case 3:return "#8B0000";//劣质供应商case 4:return "#404040";//黑名单default:return "#00BFFF";}//比价拟用采纳状态case 'pricesInfoIsProposed':return value === 1 ? "#67c23a" : "#f56c6c";// //订单状态选项case 'PIOrderStateOps':switch (value) {case 0:return "#FFA500";//待确认case 1:return "#00BFFF";//已发货case 2:return "#67c23a";//已收货default:return "#FFA500";}// //订单验收状态case 'PIOrderResultOps':switch (value) {case 0:return "#FFD700";//未验收case 1:return "#67c23a";//通过case 2:return "#f56c6c";//不通过default:return "#FFD700";}default:return '#FFFF00';}
}8、列表页面table设置单元格按钮并编写事件
const Table = useTable({columns: [{ type: "selection" },// { label: "询价比价主表ID", prop: "comparePricesId" },{ label: "订单编码", prop: "code" },{ label: "订单标题", prop: "title", showOverflowTooltip: true },//状态：待确认（0）、已发货（1）、已收货（2）{ label: "订单状态", prop: "state", dict: orderStateOptions, width: "90px" },{ label: "创建者", prop: "createBy" },//采购明细{label: "采购明细",type: "op",buttons: [{label: "查看",type: "primary",onClick: (row) => {//采购计划列表comparePricesId.value = row.scope.row.comparePricesId;openPlanInfos.value = true;}},],width: "100px"},{ label: "验收人员", prop: "inspectorName", width: "90px" },{ label: "验收内容", prop: "acceptanceContent", showOverflowTooltip: true },//验收结果状态：未验收（0）、通过（1）、不通过（2）{ label: "验收结果状态", prop: "resultState", dict: resultStateOptions, },{ label: "通过/不通过原因", prop: "reason", showOverflowTooltip: true },// { label: "更新者", prop: "updateBy" },{ label: "创建时间", prop: "createTime" },// { label: "更新时间", prop: "updateTime" },{ type: "op", buttons: ["info", "edit", "delete"], width: "225px" }]
});9、应用其他页面作为子组件，引用写法
<cl-dialog :title=title v-model="open" width="80%" append-to-body><consumableDetail v-model="open" ref="myRefs" /><div slot="footer" class="dialog-footer"><el-button type="primary" @click="HandleSelectedLists">确 定</el-button><el-button @click="open = false">取 消</el-button></div></cl-dialog><cl-dialog title="供给耗材" v-model="openConsumables" width="80%" append-to-body><el-button class="el-button el-button--primary" @click="handleConsumableDetail">选择耗材</el-button><vendorConsumable v-model="openConsumables" ref="consumablesRefs" :vendorId="vendorId" /><div slot="footer" class="dialog-footer"><!-- <el-button type="primary" @click="HandleSelectedLists">确 定</el-button> --><el-button @click="openConsumables = false">取 消</el-button></div></cl-dialog>import consumableDetail from "/@/modules/purchase/views/consumableDetail.vue";
import vendorConsumable from "/@/modules/purchase/views/vendorConsumable.vue";10、详情编辑页面打开前逻辑处理
// cl-upsert
const Upsert = useUpsert({onOpen() {if (Upsert.value.mode == "add") {Upsert.value.form.vendorCode = "V" + nowDate();Upsert.value.form.createBy = storage.get("username") || "";}if (Upsert.value.mode == "update") {Upsert.value.form.updateBy = storage.get("username") || "";}},
});11、列表单元格文本过长展示省略号和鼠标悬浮title，在列设置showOverflowTooltip: true
{ label: "供应商名称", prop: "vendorName", width: "100px", showOverflowTooltip: true },12、详情页面lable标签过长换行，并设置向右对齐。在label值中需要换行的位置加上\n换行符，然后添加样式如下：
label: "供应商\n英文名称",.el-form-item__label {white-space: pre-line;/*保留换行符*//* white-space: pre-wrap; */text-align: right;/*向右对齐*/word-wrap: break-word;line-height: 100%;align-items: center;/*上下居中*/
}13、组件间传值，父传子：
父组件传值，
<!-- 选择比价供应商弹窗 --><cl-dialog title="供应商" v-model="open" width="80%" append-to-body><comparePricesInfoVendor v-model="open" ref="myRefs" :consumableDetailId="consumableDetailId" /><div slot="footer" class="dialog-footer"><el-button type="primary" @click="HandleSelectedLists">确 定</el-button><el-button @click="open = false">取 消</el-button></div></cl-dialog>子组件从父组件拿值
// 声明接收props
const props = defineProps(['consumableDetailId']);console.log('Child props:', props.consumableDetailId);14、组件间传值，子传父：
子组件中暴露
// 暴露给父组件的值
const toFatherValue = ref<string>("我是要暴露给父组件的值");
// 暴露给父组件的方法
//在子组件中定义change方法
const change = () => {// alert(222);return selectedLists.value;
};// 暴露方法和属性给父组件
defineExpose({ change });父组件使用子组件，添加ref，后续通过ref使用子组件的值或调用方法。
<!-- 选择采购计划弹窗 --><cl-dialog title="采购计划" v-model="open" width="80%" append-to-body @close="closeComparePricesPlanHandle"><comparePricesPlan v-model="open" ref="myRefs" /><div slot="footer" class="dialog-footer"><el-button type="primary" @click="HandleSelectedLists">确 定</el-button><el-button @click="open = false">取 消</el-button></div></cl-dialog>//获取绑定的ref
const myRefs = ref();//获取选择数据
const data = myRefs.value.change();15、获取表格多选框选中的数据：添加事件获取数据
<cl-row><!-- 数据表格 --><cl-table ref="Table" style="max-height: 722px;" @selection-change="handleSelectionChange" /></cl-row>function handleSelectionChange(val) {console.log(val);selectedLists.value = val;
}16、页面弹窗
<!-- 选择采购计划弹窗 --><cl-dialog title="采购计划" v-model="open" width="80%" append-to-body @close="closeComparePricesPlanHandle"><comparePricesPlan v-model="open" ref="myRefs" /><div slot="footer" class="dialog-footer"><el-button type="primary" @click="HandleSelectedLists">确 定</el-button><el-button @click="open = false">取 消</el-button></div></cl-dialog>//选择采购计划弹窗
const open = ref(false);17、在新增对话框后增加一个对话框用来选择需要的数据，如果不点列表对话框的确定，关闭上层对话框也同时关闭新增编辑的对话框：绑定close事件将Upsert组件关闭
<cl-dialog title="采购计划" v-model="open" width="80%"append-to-body @close="closeComparePricesPlanHandle">//closeComparePricesPlanHandle
function closeComparePricesPlanHandle() {//关闭新增窗口// close();Upsert.value?.close();
}18、完成一些数据操作或者页面操作更新页面数据，参数根据情况添加也可以是空{}
//刷新列表页面
Crud.value?.refresh({ size: 5, comparePricesId: props.comparePricesId });19、页面渲染前的数据准备与赋值，onMounted()方法的引入和使用
import { reactive, computed, ref, onMounted } from "vue";onMounted(() => {//获取数据字典选项fetchStatusInfo();
});20、获取数据字典数据，调用数据字典查询接口的参数是字符串数组
pricesInfoIsProposed.value = await getDictOps(["pricesInfoIsProposed"]);//供应商启用状态数据字典选项
export async function getDictOps(dictName: string[]): Promise<any[]> {const types = new Array([dictName]);try {const res = await service.dict.info.data({ types: types });const status = res[dictName].map((item: any) => ({...item,label: item.name,// type: getType(item.value, dictName[0]),color: getColor(item.value, dictName[0]),}));return status;} catch (error) {console.error('Error fetching dictionary operations:', error);throw error;}
}21、使用后台接口服务的引入
import { useCool } from "/@/cool";
const { service } = useCool();//调用接口
await service.dict.info.data({ types: types });22、使用ref引入
import { reactive, computed, ref, onMounted } from "vue";const statusInfoOption = ref([]);23、表单组件的写法
{label: "供应商编码",prop: "vendorCode",span: 8,required: true,component: { name: "el-input", props: { disabled: true } }},{label: "供应商电话",prop: "tel",span: 8,required: true,component: { name: "el-input", props: { clearable: true, type: "number" } }},{label: "供应商简介",prop: "vendorDes",required: false,component: { name: "el-input", props: { clearable: true, type: "textarea", rows: 4 } }},{label: "供应商等级",prop: "vendorLevel",span: 8,required: true,component: {name: "el-select",props: { clearable: true },options: vendorLevelOptions}},{label: "是否启用",prop: "enableFlag",value: `Y`,span: 8,required: false,flex: false,component: {name: "cl-switch",//滑动按钮props: {clearable: true,activeValue: `Y`,inactiveValue: `N`,inactiveColor: "#ff4949"}}},24、table列表数据添加最后一行总计，效果如图：
开启总计末行 show-summary
总计计算方法：:summary-method="getSummaries"
<cl-row><!-- 数据表格 --><cl-table ref="Table" style="max-height: 722px;" show-summary :summary-method="getSummaries" /></cl-row>function getSummaries(param) {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '总计';return;}let proName = column.property;if (proName === 'number' || proName === 'budget') {const values = data.map(item => Number(item[column.property]));sums[index] = values.reduce((prev, curr) => {const value = Number(curr);if (!isNaN(value)) {return prev + curr;} else {return prev;}}, 0);switch (proName) {case 'number':sums[index] += Table.value.data[0]['specification'];break;case 'budget':sums[index] = sums[index].toFixed(2);sums[index] += '元';break;}}// const values = data.map(item => Number(item[column.property]));// if (!values.every(value => isNaN(value))) {// sums[index] = values.reduce((prev, curr) => {// const value = Number(curr);// if (!isNaN(value)) {// return prev + curr;// } else {// return prev;// }// }, 0);// sums[index] += ' 元';// } else {// sums[index] = '';// }});return sums;
}后续继续补充