Fix:代码生成的模板中使用了四个空格进行缩进,导至生成的vue文件过不了eslint的语法检测

pull/112/MERGE
yzp 2023-04-11 13:58:20 +08:00 committed by 小诺
parent d889c4dc0f
commit 2bf63d0933
2 changed files with 427 additions and 427 deletions

View File

@ -1,176 +1,176 @@
<template> <template>
<xn-form-container <xn-form-container
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(configList[i].needTableId) { %> <% if(configList[i].needTableId) { %>
:title="formData.${configList[i].fieldNameCamelCase} ? '编辑${functionName}' : '增加${functionName}'" :title="formData.${configList[i].fieldNameCamelCase} ? '编辑${functionName}' : '增加${functionName}'"
<% } %> <% } %>
<% } %> <% } %>
:width="700" :width="700"
:visible="visible" :visible="visible"
:destroy-on-close="true" :destroy-on-close="true"
@close="onClose" @close="onClose"
> >
<a-form ref="formRef" :model="formData" :rules="formRules" layout="${formLayout}"> <a-form ref="formRef" :model="formData" :rules="formRules" layout="${formLayout}">
<% if(gridWhether) { %> <% if(gridWhether) { %>
<a-row :gutter="16"> <a-row :gutter="16">
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].whetherAddUpdate) { %> <% if(!configList[i].needTableId && configList[i].whetherAddUpdate) { %>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<% if(configList[i].effectType == 'input') { %> <% if(configList[i].effectType == 'input') { %>
<a-input v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" allow-clear /> <a-input v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" allow-clear />
<% } else if (configList[i].effectType == 'textarea') {%> <% } else if (configList[i].effectType == 'textarea') {%>
<a-textarea v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" :auto-size="{ minRows: 3, maxRows: 5 }" /> <a-textarea v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" :auto-size="{ minRows: 3, maxRows: 5 }" />
<% } else if (configList[i].effectType == 'select') {%> <% } else if (configList[i].effectType == 'select') {%>
<a-select v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" /> <a-select v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
<% } else if (configList[i].effectType == 'radio') {%> <% } else if (configList[i].effectType == 'radio') {%>
<a-radio-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" /> <a-radio-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
<% } else if (configList[i].effectType == 'checkbox') {%> <% } else if (configList[i].effectType == 'checkbox') {%>
<a-checkbox-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" /> <a-checkbox-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
<% } else if (configList[i].effectType == 'datepicker') {%> <% } else if (configList[i].effectType == 'datepicker') {%>
<a-date-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" /> <a-date-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" />
<% } else if (configList[i].effectType == 'timepicker') {%> <% } else if (configList[i].effectType == 'timepicker') {%>
<a-time-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" /> <a-time-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" />
<% } else if (configList[i].effectType == 'inputNumber') {%> <% } else if (configList[i].effectType == 'inputNumber') {%>
<a-input-number v-model:value="formData.${configList[i].fieldNameCamelCase}" :min="1" :max="10000" style="width: 100%" /> <a-input-number v-model:value="formData.${configList[i].fieldNameCamelCase}" :min="1" :max="10000" style="width: 100%" />
<% } else if (configList[i].effectType == 'slider') {%> <% } else if (configList[i].effectType == 'slider') {%>
<a-slider v-model:value="formData.${configList[i].fieldNameCamelCase}" :max="1000" style="width: 100%" /> <a-slider v-model:value="formData.${configList[i].fieldNameCamelCase}" :max="1000" style="width: 100%" />
<% } %> <% } %>
</a-form-item> </a-form-item>
</a-col> </a-col>
<% } %> <% } %>
<% } %> <% } %>
</a-row> </a-row>
<% } else { %> <% } else { %>
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].whetherAddUpdate) { %> <% if(!configList[i].needTableId && configList[i].whetherAddUpdate) { %>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<% if(configList[i].effectType == 'input') { %> <% if(configList[i].effectType == 'input') { %>
<a-input v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" allow-clear /> <a-input v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" allow-clear />
<% } else if (configList[i].effectType == 'textarea') {%> <% } else if (configList[i].effectType == 'textarea') {%>
<a-textarea v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" :auto-size="{ minRows: 3, maxRows: 5 }" /> <a-textarea v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" :auto-size="{ minRows: 3, maxRows: 5 }" />
<% } else if (configList[i].effectType == 'select') {%> <% } else if (configList[i].effectType == 'select') {%>
<a-select v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" /> <a-select v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
<% } else if (configList[i].effectType == 'radio') {%> <% } else if (configList[i].effectType == 'radio') {%>
<a-radio-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" /> <a-radio-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
<% } else if (configList[i].effectType == 'checkbox') {%> <% } else if (configList[i].effectType == 'checkbox') {%>
<a-checkbox-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" /> <a-checkbox-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
<% } else if (configList[i].effectType == 'datepicker') {%> <% } else if (configList[i].effectType == 'datepicker') {%>
<a-date-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" /> <a-date-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" />
<% } else if (configList[i].effectType == 'timepicker') {%> <% } else if (configList[i].effectType == 'timepicker') {%>
<a-time-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" /> <a-time-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" />
<% } else if (configList[i].effectType == 'inputNumber') {%> <% } else if (configList[i].effectType == 'inputNumber') {%>
<a-input-number v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" :min="1" :max="10000" style="width: 100%" /> <a-input-number v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" :min="1" :max="10000" style="width: 100%" />
<% } else if (configList[i].effectType == 'slider') {%> <% } else if (configList[i].effectType == 'slider') {%>
<a-slider v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请滑动${configList[i].fieldRemark}" :max="1000" style="width: 100%" /> <a-slider v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请滑动${configList[i].fieldRemark}" :max="1000" style="width: 100%" />
<% } %> <% } %>
</a-form-item> </a-form-item>
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
</a-form> </a-form>
<template #footer> <template #footer>
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button> <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button> <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
</template> </template>
</xn-form-container> </xn-form-container>
</template> </template>
<script setup name="${classNameFirstLower}Form"> <script setup name="${classNameFirstLower}Form">
<% <%
var iptTool = 0; var iptTool = 0;
for(var i = 0; i < configList.~size; i++) { for(var i = 0; i < configList.~size; i++) {
if(!configList[i].needTableId) { if(!configList[i].needTableId) {
if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {
iptTool++; iptTool++;
} }
} }
} }
%> %>
<% if(iptTool > 0) { %> <% if(iptTool > 0) { %>
import tool from '@/utils/tool' import tool from '@/utils/tool'
<% } %> <% } %>
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import ${classNameFirstLower}Api from '@/api/${moduleName}/${classNameFirstLower}Api' import ${classNameFirstLower}Api from '@/api/${moduleName}/${classNameFirstLower}Api'
// 抽屉状态 // 抽屉状态
const visible = ref(false) const visible = ref(false)
const emit = defineEmits({ successful: null }) const emit = defineEmits({ successful: null })
const formRef = ref() const formRef = ref()
// 表单数据 // 表单数据
const formData = ref({}) const formData = ref({})
const submitLoading = ref(false) const submitLoading = ref(false)
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId) { %> <% if(!configList[i].needTableId) { %>
<% if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { %> <% if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { %>
const ${configList[i].fieldNameCamelCase}Options = ref([]) const ${configList[i].fieldNameCamelCase}Options = ref([])
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
// 打开抽屉 // 打开抽屉
const onOpen = (record) => { const onOpen = (record) => {
visible.value = true visible.value = true
if (record) { if (record) {
let recordData = cloneDeep(record) let recordData = cloneDeep(record)
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].whetherAddUpdate && configList[i].effectType == 'checkbox') { %> <% if(!configList[i].needTableId && configList[i].whetherAddUpdate && configList[i].effectType == 'checkbox') { %>
recordData.${configList[i].fieldNameCamelCase} = JSON.parse(recordData.${configList[i].fieldNameCamelCase}) recordData.${configList[i].fieldNameCamelCase} = JSON.parse(recordData.${configList[i].fieldNameCamelCase})
<% } %> <% } %>
<% } %> <% } %>
formData.value = Object.assign({}, recordData) formData.value = Object.assign({}, recordData)
} }
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId) { %> <% if(!configList[i].needTableId) { %>
<% if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { %> <% if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { %>
${configList[i].fieldNameCamelCase}Options.value = tool.dictList('${configList[i].dictTypeCode}') ${configList[i].fieldNameCamelCase}Options.value = tool.dictList('${configList[i].dictTypeCode}')
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
} }
// 关闭抽屉 // 关闭抽屉
const onClose = () => { const onClose = () => {
formRef.value.resetFields() formRef.value.resetFields()
formData.value = {} formData.value = {}
visible.value = false visible.value = false
} }
// 默认要校验的 // 默认要校验的
const formRules = { const formRules = {
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId) { %> <% if(!configList[i].needTableId) { %>
<% if(configList[i].required) { %> <% if(configList[i].required) { %>
${configList[i].fieldNameCamelCase}: [required('请输入${configList[i].fieldRemark}')], ${configList[i].fieldNameCamelCase}: [required('请输入${configList[i].fieldRemark}')],
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
} }
// 验证并提交数据 // 验证并提交数据
const onSubmit = () => { const onSubmit = () => {
formRef.value.validate().then(() => { formRef.value.validate().then(() => {
submitLoading.value = true submitLoading.value = true
const formDataParam = cloneDeep(formData.value) const formDataParam = cloneDeep(formData.value)
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(configList[i].whetherAddUpdate && configList[i].effectType == 'checkbox') { %> <% if(configList[i].whetherAddUpdate && configList[i].effectType == 'checkbox') { %>
formDataParam.${configList[i].fieldNameCamelCase} = JSON.stringify(formDataParam.${configList[i].fieldNameCamelCase}) formDataParam.${configList[i].fieldNameCamelCase} = JSON.stringify(formDataParam.${configList[i].fieldNameCamelCase})
<% } %> <% } %>
<% } %> <% } %>
${classNameFirstLower}Api ${classNameFirstLower}Api
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(configList[i].needTableId) { %> <% if(configList[i].needTableId) { %>
.${classNameFirstLower}SubmitForm(formDataParam, !formDataParam.${configList[i].fieldNameCamelCase}) .${classNameFirstLower}SubmitForm(formDataParam, !formDataParam.${configList[i].fieldNameCamelCase})
<% } %> <% } %>
<% } %> <% } %>
.then(() => { .then(() => {
onClose() onClose()
emit('successful') emit('successful')
}) })
.finally(() => { .finally(() => {
submitLoading.value = false submitLoading.value = false
}) })
}) })
} }
// 抛出函数 // 抛出函数
defineExpose({ defineExpose({
onOpen onOpen
}) })
</script> </script>

View File

@ -1,262 +1,262 @@
<template> <template>
<% <%
var searchCount = 0; var searchCount = 0;
var row = 0; var row = 0;
%> %>
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].needPage) { searchCount ++; }%> <% if(!configList[i].needTableId && configList[i].needPage) { searchCount ++; }%>
<% } %> <% } %>
<a-card :bordered="false"> <a-card :bordered="false">
<% if (searchCount > 0) { %> <% if (searchCount > 0) { %>
<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form"> <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
<a-row :gutter="24"> <a-row :gutter="24">
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].needPage) { row ++; %> <% if(!configList[i].needTableId && configList[i].needPage) { row ++; %>
<% if(row <= 3) { %> <% if(row <= 3) { %>
<a-col :span="6"> <a-col :span="6">
<% if(configList[i].effectType == 'input' || configList[i].effectType == 'textarea') { %> <% if(configList[i].effectType == 'input' || configList[i].effectType == 'textarea') { %>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-input v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" /> <a-input v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" />
</a-form-item> </a-form-item>
<% } else if (configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {%> <% } else if (configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {%>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-select v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" /> <a-select v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
</a-form-item> </a-form-item>
<% } else if (configList[i].effectType == 'inputNumber' || configList[i].effectType == 'slider') {%> <% } else if (configList[i].effectType == 'inputNumber' || configList[i].effectType == 'slider') {%>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-input-number v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" style="width: 100%" /> <a-input-number v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" style="width: 100%" />
</a-form-item> </a-form-item>
<% } else if (configList[i].effectType == 'datepicker') {%> <% } else if (configList[i].effectType == 'datepicker') {%>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-range-picker v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time /> <a-range-picker v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time />
</a-form-item> </a-form-item>
<% } else {%> <% } else {%>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-input v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" /> <a-input v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" />
</a-form-item> </a-form-item>
<% } %> <% } %>
</a-col> </a-col>
<% } else { %> <% } else { %>
<a-col :span="6" v-show="advanced"> <a-col :span="6" v-show="advanced">
<% if(configList[i].effectType == 'input' || configList[i].effectType == 'textarea') { %> <% if(configList[i].effectType == 'input' || configList[i].effectType == 'textarea') { %>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-input v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" /> <a-input v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" />
</a-form-item> </a-form-item>
<% } else if (configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {%> <% } else if (configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {%>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-select v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" /> <a-select v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
</a-form-item> </a-form-item>
<% } else if (configList[i].effectType == 'inputNumber' || configList[i].effectType == 'slider') {%> <% } else if (configList[i].effectType == 'inputNumber' || configList[i].effectType == 'slider') {%>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-input-number v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" style="width: 100%" /> <a-input-number v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" style="width: 100%" />
</a-form-item> </a-form-item>
<% } else if (configList[i].effectType == 'datepicker') {%> <% } else if (configList[i].effectType == 'datepicker') {%>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-range-picker v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" show-time /> <a-range-picker v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" show-time />
</a-form-item> </a-form-item>
<% } else {%> <% } else {%>
<a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}"> <a-form-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<a-input v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" /> <a-input v-model:value="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" />
</a-form-item> </a-form-item>
<% } %> <% } %>
</a-col> </a-col>
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
<a-col :span="6"> <a-col :span="6">
<a-button type="primary" @click="table.refresh(true)">查询</a-button> <a-button type="primary" @click="table.refresh(true)">查询</a-button>
<a-button style="margin: 0 8px" @click="reset">重置</a-button> <a-button style="margin: 0 8px" @click="reset">重置</a-button>
<% if(searchCount > 3) { %> <% if(searchCount > 3) { %>
<a @click="toggleAdvanced" style="margin-left: 8px"> <a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }} {{ advanced ? '收起' : '展开' }}
<component :is="advanced ? 'up-outlined' : 'down-outlined'"/> <component :is="advanced ? 'up-outlined' : 'down-outlined'"/>
</a> </a>
<% }%> <% }%>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
<% } %> <% } %>
<s-table <s-table
ref="table" ref="table"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:alert="options.alert.show" :alert="options.alert.show"
bordered bordered
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(configList[i].needTableId) { %> <% if(configList[i].needTableId) { %>
:row-key="(record) => record.${configList[i].fieldNameCamelCase}" :row-key="(record) => record.${configList[i].fieldNameCamelCase}"
<% } %> <% } %>
<% } %> <% } %>
:tool-config="toolConfig" :tool-config="toolConfig"
:row-selection="options.rowSelection" :row-selection="options.rowSelection"
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('${classNameFirstLower}Add')"> <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('${classNameFirstLower}Add')">
<template #icon><plus-outlined /></template> <template #icon><plus-outlined /></template>
新增 新增
</a-button> </a-button>
<xn-batch-delete <xn-batch-delete
v-if="hasPerm('${classNameFirstLower}BatchDelete')" v-if="hasPerm('${classNameFirstLower}BatchDelete')"
:selectedRowKeys="selectedRowKeys" :selectedRowKeys="selectedRowKeys"
@batchDelete="deleteBatch${className}" @batchDelete="deleteBatch${className}"
/> />
</a-space> </a-space>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].whetherTable) { %> <% if(!configList[i].needTableId && configList[i].whetherTable) { %>
<% if (configList[i].effectType == 'select' || configList[i].effectType == 'radio') { %> <% if (configList[i].effectType == 'select' || configList[i].effectType == 'radio') { %>
<template v-if="column.dataIndex === '${configList[i].fieldNameCamelCase}'"> <template v-if="column.dataIndex === '${configList[i].fieldNameCamelCase}'">
{{ $TOOL.dictTypeData('${configList[i].dictTypeCode}', record.${configList[i].fieldNameCamelCase}) }} {{ $TOOL.dictTypeData('${configList[i].dictTypeCode}', record.${configList[i].fieldNameCamelCase}) }}
</template> </template>
<% } else if (configList[i].effectType == 'checkbox') { %> <% } else if (configList[i].effectType == 'checkbox') { %>
<template v-if="column.dataIndex === '${configList[i].fieldNameCamelCase}'"> <template v-if="column.dataIndex === '${configList[i].fieldNameCamelCase}'">
<a-tag v-for="textValue in JSON.parse(record.${configList[i].fieldNameCamelCase})" :key="textValue" color="green">{{ $TOOL.dictTypeData('${configList[i].dictTypeCode}', textValue) }}</a-tag> <a-tag v-for="textValue in JSON.parse(record.${configList[i].fieldNameCamelCase})" :key="textValue" color="green">{{ $TOOL.dictTypeData('${configList[i].dictTypeCode}', textValue) }}</a-tag>
</template> </template>
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
<template v-if="column.dataIndex === 'action'"> <template v-if="column.dataIndex === 'action'">
<a-space> <a-space>
<a @click="formRef.onOpen(record)" v-if="hasPerm('${classNameFirstLower}Edit')">编辑</a> <a @click="formRef.onOpen(record)" v-if="hasPerm('${classNameFirstLower}Edit')">编辑</a>
<a-divider type="vertical" v-if="hasPerm(['${classNameFirstLower}Edit', '${classNameFirstLower}Delete'], 'and')" /> <a-divider type="vertical" v-if="hasPerm(['${classNameFirstLower}Edit', '${classNameFirstLower}Delete'], 'and')" />
<a-popconfirm title="确定要删除吗?" @confirm="delete${className}(record)"> <a-popconfirm title="确定要删除吗?" @confirm="delete${className}(record)">
<a-button type="link" danger size="small" v-if="hasPerm('${classNameFirstLower}Delete')">删除</a-button> <a-button type="link" danger size="small" v-if="hasPerm('${classNameFirstLower}Delete')">删除</a-button>
</a-popconfirm> </a-popconfirm>
</a-space> </a-space>
</template> </template>
</template> </template>
</s-table> </s-table>
</a-card> </a-card>
<Form ref="formRef" @successful="table.refresh(true)" /> <Form ref="formRef" @successful="table.refresh(true)" />
</template> </template>
<script setup name="${busName}"> <script setup name="${busName}">
<% <%
var iptTool = 0; var iptTool = 0;
if (searchCount > 0) { if (searchCount > 0) {
for(var i = 0; i < configList.~size; i++) { for(var i = 0; i < configList.~size; i++) {
if(!configList[i].needTableId) { if(!configList[i].needTableId) {
if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {
iptTool++; iptTool++;
} }
} }
} }
} }
%> %>
<% if(iptTool > 0) { %> <% if(iptTool > 0) { %>
import tool from '@/utils/tool' import tool from '@/utils/tool'
<% } %> <% } %>
import Form from './form.vue' import Form from './form.vue'
import ${classNameFirstLower}Api from '@/api/${moduleName}/${classNameFirstLower}Api' import ${classNameFirstLower}Api from '@/api/${moduleName}/${classNameFirstLower}Api'
<% if (searchCount > 0) { %> <% if (searchCount > 0) { %>
let searchFormState = reactive({}) let searchFormState = reactive({})
const searchFormRef = ref() const searchFormRef = ref()
<% } %> <% } %>
const table = ref() const table = ref()
const formRef = ref() const formRef = ref()
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false } const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
<% if(searchCount > 3) { %> <% if(searchCount > 3) { %>
// 查询区域显示更多控制 // 查询区域显示更多控制
const advanced = ref(false) const advanced = ref(false)
const toggleAdvanced = () => { const toggleAdvanced = () => {
advanced.value = !advanced.value advanced.value = !advanced.value
} }
<% } %> <% } %>
const columns = [ const columns = [
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].whetherTable) { %> <% if(!configList[i].needTableId && configList[i].whetherTable) { %>
{ {
title: '${configList[i].fieldRemark}', title: '${configList[i].fieldRemark}',
dataIndex: '${configList[i].fieldNameCamelCase}'<% if(configList[i].whetherRetract) { %>,<% } %> dataIndex: '${configList[i].fieldNameCamelCase}'<% if(configList[i].whetherRetract) { %>,<% } %>
<% if(configList[i].whetherRetract) { %> <% if(configList[i].whetherRetract) { %>
ellipsis: true ellipsis: true
<% } %> <% } %>
}, },
<% } %> <% } %>
<% } %> <% } %>
] ]
// 操作栏通过权限判断是否显示 // 操作栏通过权限判断是否显示
if (hasPerm(['${classNameFirstLower}Edit', '${classNameFirstLower}Delete'])) { if (hasPerm(['${classNameFirstLower}Edit', '${classNameFirstLower}Delete'])) {
columns.push({ columns.push({
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
align: 'center', align: 'center',
width: '150px' width: '150px'
}) })
} }
const selectedRowKeys = ref([]) const selectedRowKeys = ref([])
// 列表选择配置 // 列表选择配置
const options = { const options = {
// columns数字类型字段加入 needTotal: true 可以勾选自动算账 // columns数字类型字段加入 needTotal: true 可以勾选自动算账
alert: { alert: {
show: true, show: true,
clear: () => { clear: () => {
selectedRowKeys.value = ref([]) selectedRowKeys.value = ref([])
} }
}, },
rowSelection: { rowSelection: {
onChange: (selectedRowKey, selectedRows) => { onChange: (selectedRowKey, selectedRows) => {
selectedRowKeys.value = selectedRowKey selectedRowKeys.value = selectedRowKey
} }
} }
} }
const loadData = (parameter) => { const loadData = (parameter) => {
<% if (searchCount > 0) { %> <% if (searchCount > 0) { %>
const searchFormParam = JSON.parse(JSON.stringify(searchFormState)) const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].needPage) { %> <% if(!configList[i].needTableId && configList[i].needPage) { %>
<% if (configList[i].effectType == 'datepicker') {%> <% if (configList[i].effectType == 'datepicker') {%>
// ${configList[i].fieldNameCamelCase}范围查询条件重载 // ${configList[i].fieldNameCamelCase}范围查询条件重载
if (searchFormParam.${configList[i].fieldNameCamelCase}) { if (searchFormParam.${configList[i].fieldNameCamelCase}) {
searchFormParam.start${configList[i].fieldNameCamelCaseFirstUpper} = searchFormParam.${configList[i].fieldNameCamelCase}[0] searchFormParam.start${configList[i].fieldNameCamelCaseFirstUpper} = searchFormParam.${configList[i].fieldNameCamelCase}[0]
searchFormParam.end${configList[i].fieldNameCamelCaseFirstUpper} = searchFormParam.${configList[i].fieldNameCamelCase}[1] searchFormParam.end${configList[i].fieldNameCamelCaseFirstUpper} = searchFormParam.${configList[i].fieldNameCamelCase}[1]
delete searchFormParam.${configList[i].fieldNameCamelCase} delete searchFormParam.${configList[i].fieldNameCamelCase}
} }
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
return ${classNameFirstLower}Api.${classNameFirstLower}Page(Object.assign(parameter, searchFormParam)).then((data) => { return ${classNameFirstLower}Api.${classNameFirstLower}Page(Object.assign(parameter, searchFormParam)).then((data) => {
<% } else { %> <% } else { %>
return ${classNameFirstLower}Api.${classNameFirstLower}Page(parameter).then((data) => { return ${classNameFirstLower}Api.${classNameFirstLower}Page(parameter).then((data) => {
<% } %> <% } %>
return data return data
}) })
} }
// 重置 // 重置
const reset = () => { const reset = () => {
searchFormRef.value.resetFields() searchFormRef.value.resetFields()
table.value.refresh(true) table.value.refresh(true)
} }
// 删除 // 删除
const delete${className} = (record) => { const delete${className} = (record) => {
let params = [ let params = [
{ {
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(configList[i].needTableId) { %> <% if(configList[i].needTableId) { %>
${configList[i].fieldNameCamelCase}: record.${configList[i].fieldNameCamelCase} ${configList[i].fieldNameCamelCase}: record.${configList[i].fieldNameCamelCase}
<% } %> <% } %>
<% } %> <% } %>
} }
] ]
${classNameFirstLower}Api.${classNameFirstLower}Delete(params).then(() => { ${classNameFirstLower}Api.${classNameFirstLower}Delete(params).then(() => {
table.value.refresh(true) table.value.refresh(true)
}) })
} }
// 批量删除 // 批量删除
const deleteBatch${className} = (params) => { const deleteBatch${className} = (params) => {
${classNameFirstLower}Api.${classNameFirstLower}Delete(params).then(() => { ${classNameFirstLower}Api.${classNameFirstLower}Delete(params).then(() => {
table.value.clearRefreshSelected() table.value.clearRefreshSelected()
}) })
} }
<% if (searchCount > 0) { %> <% if (searchCount > 0) { %>
<% for(var i = 0; i < configList.~size; i++) { %> <% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].needPage) { %> <% if(!configList[i].needTableId && configList[i].needPage) { %>
<% if (configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { %> <% if (configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { %>
const ${configList[i].fieldNameCamelCase}Options = tool.dictList('${configList[i].dictTypeCode}') const ${configList[i].fieldNameCamelCase}Options = tool.dictList('${configList[i].dictTypeCode}')
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
</script> </script>