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就不设置type
color: 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、后续继续补充
