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、后续继续补充