做的比较好的返利网站知乎,犀牛云做网站怎么样,wordpress运行php 404,网站设计与网页配色实例精讲1、后端关键字自动生成没有代码段提示#xff0c;原因是拉取的项目代码中没有.vscode文件夹#xff0c;复制一套至项目src同级即可 2、前端快速创建#xff0c;在Entity完成后就去快速创建中选数据结构#xff0c;这时没有对应的内容#xff0c;数据结构是和controller层a…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 refTable stylemax-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[]): Promiseany[] {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 :titletitle v-modelopen width80% append-to-bodyconsumableDetail v-modelopen refmyRefs /div slotfooter classdialog-footerel-button typeprimary clickHandleSelectedLists确 定/el-buttonel-button clickopen false取 消/el-button/div/cl-dialogcl-dialog title供给耗材 v-modelopenConsumables width80% append-to-bodyel-button classel-button el-button--primary clickhandleConsumableDetail选择耗材/el-buttonvendorConsumable v-modelopenConsumables refconsumablesRefs :vendorIdvendorId /div slotfooter classdialog-footer!-- el-button typeprimary clickHandleSelectedLists确 定/el-button --el-button clickopenConsumables 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、后续继续补充
