摸鱼利器，磨刀不误砍柴工
解析swagger生成排序div
const p = {
absorbFarmers: {
type: "string",
description: "本年度累计吸纳农名工就业",
},
accumulatPaidFunds: {
type: "string",
description: "累计到位资金",
},
actualCompletionTime: {
type: "string",
format: "date-time",
description: "实际完工时间yyyy-MM-dd",
},
actualInvestmentCompletedWeek: {
type: "string",
description: "本周实际完成投资",
},
annualActualPayment: {
type: "string",
description: "年度实际支付",
},
annualActualReleasePlan: {
type: "string",
description: "年度实际下达计划(万元)",
},
annualPaymentRate: { type: "string", description: "年度支付率" },
approvedConstructPeriod: {
type: "string",
description: "批复工期",
},
aprActual: {
type: "string",
description: "4月实际完成投资(万元)",
},
aprPlan: { type: "string", description: "4月预计完成投资(万元)" },
augActual: {
type: "string",
description: "8月实际完成投资(万元)",
},
augPlan: { type: "string", description: "8月预计完成投资(万元)" },
belongCompany: { type: "string", description: "归属单位" },
belongRegion: { type: "string", description: "所在区域" },
capitalSource: { type: "string", description: "资金来源" },
completionAcceptance: {
type: "string",
description: "是否完成竣工验收或完工验收",
},
constructionUnit: { type: "string", description: "建设单位" },
coordination: { type: "string", description: "协调情况" },
cumulativeReleasePlan: {
type: "string",
description: "累计下达计划",
},
currentPlanCompleteInvestment: {
type: "string",
description: "年度计划投资",
},
decActual: {
type: "string",
description: "12月实际完成投资(万元)",
},
decPlan: {
type: "string",
description: "12月预计完成投资(万元)",
},
divisionWaterProjects: {
type: "string",
description: "水务项目划分",
},
endInvestmentCompletion: {
type: "string",
description: "截至目前投资完成率",
},
febActual: {
type: "string",
description: "2月实际完成投资(万元)",
},
febPlan: { type: "string", description: "2月预计完成投资(万元)" },
fillingTime: {
type: "string",
format: "date-time",
description: "填报时间yyyy-MM-dd",
},
fundsPaidYear: { type: "string", description: "本年度到位资金" },
headquartersConcert: {
type: "string",
description: "是否需要指挥部协调",
},
id: { type: "string", description: "数据id" },
industry: { type: "string", description: "项目所属行业" },
industryCode: { type: "string", description: "项目行业编码" },
investmentCompletedLastWeek: {
type: "string",
description: "截至上周完成投资",
},
investmentCompletionRate: {
type: "string",
description: "累计投资完成率",
},
investmentExpectedCompletedYear: {
type: "string",
description: "全年预计完成投资(万元)",
},
investmentPlannedCompletedWeek: {
type: "string",
description: "本周计划完成投资",
},
investmentTasksYear: {
type: "string",
description: "本年度投资任务",
},
janActual: {
type: "string",
description: "1月实际完成投资(万元)",
},
janPlan: { type: "string", description: "1月预计完成投资(万元)" },
julActual: {
type: "string",
description: "7月实际完成投资(万元)",
},
julPlan: { type: "string", description: "7月预计完成投资(万元)" },
junActual: {
type: "string",
description: "6月实际完成投资(万元)",
},
junPlan: { type: "string", description: "6月预计完成投资(万元)" },
leaderChargeNumber: {
type: "string",
description: "分管领导联系方式",
},
leaderInCharge: { type: "string", description: "分管领导" },
majorDemonstrationProject: {
type: "string",
description: "是否为重大示范项目",
},
marActual: {
type: "string",
description: "3月实际完成投资(万元)",
},
marPlan: { type: "string", description: "3月预计完成投资(万元)" },
mayActual: {
type: "string",
description: "5月实际完成投资(万元)",
},
mayPlan: { type: "string", description: "5月预计完成投资(万元)" },
newFillingCompany: {
type: "string",
description: "最新填报单位",
},
novActual: {
type: "string",
description: "11月实际完成投资(万元)",
},
novPlan: {
type: "string",
description: "11月预计完成投资(万元)",
},
octActual: {
type: "string",
description: "10月实际完成投资(万元)",
},
octPlan: {
type: "string",
description: "10月预计完成投资(万元)",
},
planCompletionTime: {
type: "string",
format: "date-time",
description: "计划完工时间yyyy-MM-dd",
},
progress: { type: "string", description: "项目进展情况" },
projectCategory: { type: "string", description: "项目类别" },
projectContact: { type: "string", description: "项目联系人" },
projectContactNumber: {
type: "string",
description: "项目联系人联系方式",
},
projectLeader: { type: "string", description: "项目负责人" },
projectLeaderNumber: {
type: "string",
description: "项目负责人联系方式",
},
projectName: { type: "string", description: "项目名称" },
projectType: { type: "string", description: "项目类型" },
putInStorage: { type: "string", description: "是否纳统" },
question: { type: "string", description: "存在问题" },
questionUnitsInvolved: {
type: "string",
description: "存在问题涉及的单位",
},
remark: { type: "string", description: "备注" },
sepActual: {
type: "string",
description: "9月实际完成投资(万元)",
},
sepPlan: { type: "string", description: "9月预计完成投资(万元)" },
storageCode: { type: "string", description: "项目纳统编码" },
suggestion: { type: "string", description: "解决建议" },
totalCompletedInvestment: {
type: "string",
description: "累计完成投资",
},
totalInvestment: { type: "string", description: "项目总投资" },
totalInvestmentOverYears: {
type: "string",
description: "历年累计投资",
},
totalWagesEmployees: {
type: "string",
description: "从(就)业人员工资总额",
},
totalWagesPaidRural: {
type: "string",
description: "发放农村劳动力工资总额",
},
urbanLeaders: { type: "string", description: "市区领导" },
urbanLeadersNumber: {
type: "string",
description: "市区领导联系方式",
},
whetherCompleteCalculation: {
type: "string",
description: "是否完成决算",
},
whetherSettlementCompleted: {
type: "string",
description: "是否完成结算",
},
workStartTime: {
type: "string",
format: "date-time",
description: "开工时间yyyy-MM-dd",
},
yiYuanProject: { type: "string", description: "是否为亿元项目" },
};
const inputs = [];
const columns = [];
const columns2 = [];
for (const name in p) {
if (
"createBy,createTime,deleteFlag,id,updateTime,updateBy"
.split(",")
.indexOf(name) !== -1
) {
continue;
}
const wid = Math.ceil(it.label.length * 18)
const dif = wid % 10 == 0 ? 0 : 10 - wid % 10
const width = wid + dif
columns.push({
label: p[name].description,
prop: name,
align: "center",
showOverflowTooltip: true,
width: width,
});
columns2.push(`
<div>${JSON.stringify({
label: p[name].description,
prop: name,
align: "center",
width: width,
showOverflowTooltip: true,
})}</div>
`);
if (p[name].type == "date-time") {
inputs.push(`
<el-form-item label="${p[name].description}" prop="${name}">
<el-date-picker
v-model="formData.${name}"
placeholder="${p[name].description}"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
clearable
:style="{ width: '100%' }"
></el-date-picker>
</el-form-item>
`);
} else if (p[name].type == "number") {
inputs.push(`
<el-form-item label="${p[name].description}" prop="${name}">
<el-input-number
v-model="formData.${name}"
placeholder="${p[name].description}"
clearable
:style="{ width: '100%' }"
:controls="false"
></el-input-number>
</el-form-item>
`);
} else {
inputs.push(`
<el-form-item label="${p[name].description}" prop="${name}">
<el-input
v-model="formData.${name}"
placeholder="${p[name].description}"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
`);
}
}
console.log(JSON.stringify(columns, null, 44));
console.log(columns2.join("\r\n"));
console.log(inputs.join("\r\n"));
把上面的结果生成表单
const p = [{ "label": "是否为亿元项目", "prop": "yiYuanProject", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "是否为重大示范项目", "prop": "majorDemonstrationProject", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "归属单位", "prop": "belongCompany", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "水务项目划分", "prop": "divisionWaterProjects", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目类型", "prop": "projectType", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目名称", "prop": "projectName", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "填报时间", "type":"date-time", "prop": "fillingTime", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "最新填报单位", "prop": "newFillingCompany", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "建设单位", "prop": "constructionUnit", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "所在区域", "prop": "belongRegion", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目所属行业", "prop": "industry", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目行业编码", "prop": "industryCode", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "是否纳统", "prop": "putInStorage", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目纳统编码", "prop": "storageCode", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目进展情况", "prop": "progress", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目总投资", "prop": "totalInvestment", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "资金来源", "prop": "capitalSource", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "本年度投资任务", "prop": "investmentTasksYear", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "年度计划投资", "prop": "currentPlanCompleteInvestment", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "截至上周完成投资", "prop": "investmentCompletedLastWeek", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "本周计划完成投资", "prop": "investmentPlannedCompletedWeek", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "本周实际完成投资", "prop": "actualInvestmentCompletedWeek", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "截至目前投资完成率", "prop": "endInvestmentCompletion", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "1月实际完成投资(万元)", "prop": "janActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "1月预计完成投资(万元)", "prop": "janPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "2月实际完成投资(万元)", "prop": "febActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "2月预计完成投资(万元)", "prop": "febPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "3月实际完成投资(万元)", "prop": "marActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "3月预计完成投资(万元)", "prop": "marPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "4月实际完成投资(万元)", "prop": "aprActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "4月预计完成投资(万元)", "prop": "aprPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "5月实际完成投资(万元)", "prop": "mayActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "5月预计完成投资(万元)", "prop": "mayPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "6月实际完成投资(万元)", "prop": "junActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "6月预计完成投资(万元)", "prop": "junPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "7月实际完成投资(万元)", "prop": "julActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "7月预计完成投资(万元)", "prop": "julPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "8月实际完成投资(万元)", "prop": "augActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "8月预计完成投资(万元)", "prop": "augPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "9月实际完成投资(万元)", "prop": "sepActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "9月预计完成投资(万元)", "prop": "sepPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "10月实际完成投资(万元)", "prop": "octActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "10月预计完成投资(万元)", "prop": "octPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "11月实际完成投资(万元)", "prop": "novActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "11月预计完成投资(万元)", "prop": "novPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "12月实际完成投资(万元)", "prop": "decActual", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "12月预计完成投资(万元)", "prop": "decPlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "全年预计完成投资(万元)", "prop": "investmentExpectedCompletedYear", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "年度实际下达计划(万元)", "prop": "annualActualReleasePlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "年度实际支付", "prop": "annualActualPayment", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "年度支付率", "prop": "annualPaymentRate", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "存在问题", "prop": "question", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "存在问题涉及的单位", "prop": "questionUnitsInvolved", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "协调情况", "prop": "coordination", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "是否需要指挥部协调", "prop": "headquartersConcert", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "解决建议", "prop": "suggestion", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目负责人", "prop": "projectLeader", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目负责人联系方式", "prop": "projectLeaderNumber", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目联系人", "prop": "projectContact", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目联系人联系方式", "prop": "projectContactNumber", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "分管领导", "prop": "leaderInCharge", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "分管领导联系方式", "prop": "leaderChargeNumber", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "市区领导", "prop": "urbanLeaders", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "市区领导联系方式", "prop": "urbanLeadersNumber", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "备注", "prop": "remark", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "项目类别", "prop": "projectCategory", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "开工时间", "type":"date-time", "prop": "workStartTime", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "批复工期", "prop": "approvedConstructPeriod", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "本年度累计吸纳农名工就业", "prop": "absorbFarmers", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "从(就)业人员工资总额", "prop": "totalWagesEmployees", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "发放农村劳动力工资总额", "prop": "totalWagesPaidRural", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "是否完成竣工验收或完工验收", "prop": "completionAcceptance", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "计划完工时间", "type":"date-time", "prop": "planCompletionTime", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "实际完工时间", "type":"date-time", "prop": "actualCompletionTime", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "是否完成结算", "prop": "whetherSettlementCompleted", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "是否完成决算", "prop": "whetherCompleteCalculation", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "累计到位资金", "prop": "accumulatPaidFunds", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "本年度到位资金", "prop": "fundsPaidYear", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "累计下达计划", "prop": "cumulativeReleasePlan", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "累计完成投资", "prop": "totalCompletedInvestment", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "累计投资完成率", "prop": "investmentCompletionRate", "align": "center", "width": 150, "showOverflowTooltip": true },
{ "label": "历年累计投资", "prop": "totalInvestmentOverYears", "align": "center", "width": 150, "showOverflowTooltip": true },
]
const inputs = []
p.forEach(col => {
if ('createBy,createTime,deleteFlag,id,updateTime,updateBy'.split(',').indexOf(col.prop) !== -1) {
return true
}
if (col.type && col.type == 'date-time') {
inputs.push(`
<el-form-item label="${col.label}" prop="${col.prop}">
<el-date-picker
v-model="formData.${col.prop}"
placeholder="${col.label}"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
clearable
:style="{ width: '100%' }"
></el-date-picker>
</el-form-item>
`)
} else if (col.type && col.type == 'number') {
inputs.push(`
<el-form-item label="${col.label}" prop="${col.prop}">
<el-input-number
v-model="formData.${col.prop}"
placeholder="${col.label}"
clearable
:style="{ width: '100%' }"
:controls="false"
></el-input-number>
</el-form-item>
`)
} else {
inputs.push(`
<el-form-item label="${col.label}" prop="${col.prop}">
<el-input
v-model="formData.${col.prop}"
placeholder="${col.label}"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
`)
}
})
console.log(inputs.join('\r\n'))
