【优化】移动端代码生成器模板调整

pull/228/head
王鹏 2024-07-20 00:28:25 +08:00
parent 9f06cf96c6
commit b2da2975f4
7 changed files with 220 additions and 265 deletions

View File

@ -557,24 +557,26 @@ public class GenBasicServiceImpl extends ServiceImpl<GenBasicMapper, GenBasic> i
List<GenBasicPreviewResult.GenBasicCodeResult> genBasicCodeMobileResultList = CollectionUtil.newArrayList(); List<GenBasicPreviewResult.GenBasicCodeResult> genBasicCodeMobileResultList = CollectionUtil.newArrayList();
GEN_MOBILE_FILE_LIST.forEach(fileJsonObject -> { GEN_MOBILE_FILE_LIST.forEach(fileJsonObject -> {
String fileTemplateName = fileJsonObject.getStr("name"); String fileTemplateName = fileJsonObject.getStr("name");
String fileTemplatePath = "";
if (!"page.json.btl".equals(fileTemplateName)){
fileTemplatePath = fileJsonObject.getStr("path") + File.separator + genBasic.getModuleName();
}
GenBasicPreviewResult.GenBasicCodeResult genBasicCodeMobileResult = new GenBasicPreviewResult.GenBasicCodeResult(); GenBasicPreviewResult.GenBasicCodeResult genBasicCodeMobileResult = new GenBasicPreviewResult.GenBasicCodeResult();
Template templateMobile = groupTemplateMobile.getTemplate(fileTemplateName); Template templateMobile = groupTemplateMobile.getTemplate(fileTemplateName);
templateMobile.binding(bindingJsonObject); templateMobile.binding(bindingJsonObject);
String resultName = StrUtil.removeSuffix(fileTemplateName, ".btl"); String resultName = StrUtil.removeSuffix(fileTemplateName, ".btl");
if("Api.js.btl".equalsIgnoreCase(fileTemplateName)) { if("Api.js.btl".equalsIgnoreCase(fileTemplateName)) {
resultName = StrUtil.lowerFirst(genBasic.getClassName()) + resultName; resultName = StrUtil.toSymbolCase(genBasic.getClassName() + resultName, '-');
genBasicCodeMobileResult.setCodeFileName(resultName); genBasicCodeMobileResult.setCodeFileName(resultName);
genBasicCodeMobileResult.setCodeFileWithPathName(genMobileBasicPath + fileTemplatePath + File.separator + resultName); genBasicCodeMobileResult.setCodeFileWithPathName(genMobileBasicPath + fileJsonObject.getStr("path") + File.separator + genBasic.getModuleName() + File.separator + resultName);
} else if("page.json.btl".equals(fileTemplateName)) { } else if("page.json.btl".equals(fileTemplateName)) {
genBasicCodeMobileResult.setCodeFileName(resultName); genBasicCodeMobileResult.setCodeFileName(resultName);
genBasicCodeMobileResult.setCodeFileWithPathName(genMobileBasicPath + fileTemplatePath + File.separator + resultName); genBasicCodeMobileResult.setCodeFileWithPathName(genMobileBasicPath + File.separator + resultName);
} else if ("route.js.btl".equals(fileTemplateName)) {
resultName = StrUtil.toSymbolCase(genBasic.getClassName(), '-') + ".js";
genBasicCodeMobileResult.setCodeFileName(resultName);
genBasicCodeMobileResult.setCodeFileWithPathName(genMobileBasicPath + fileJsonObject.getStr("path") + File.separator + resultName);
} else { } else {
genBasicCodeMobileResult.setCodeFileName(resultName); genBasicCodeMobileResult.setCodeFileName(resultName);
genBasicCodeMobileResult.setCodeFileWithPathName(genMobileBasicPath + fileTemplatePath + File.separator + genBasic.getBusName() + File.separator + resultName); genBasicCodeMobileResult.setCodeFileWithPathName(genMobileBasicPath + fileJsonObject.getStr("path") + File.separator + genBasic.getModuleName() + File.separator + genBasic.getBusName() + File.separator + resultName);
} }
genBasicCodeMobileResult.setCodeFileContent(templateMobile.render()); genBasicCodeMobileResult.setCodeFileContent(templateMobile.render());
genBasicCodeMobileResultList.add(genBasicCodeMobileResult); genBasicCodeMobileResultList.add(genBasicCodeMobileResult);
@ -620,6 +622,8 @@ public class GenBasicServiceImpl extends ServiceImpl<GenBasicMapper, GenBasic> i
bindingJsonObject.set("className", genBasic.getClassName()); bindingJsonObject.set("className", genBasic.getClassName());
// 类首字母小写名 // 类首字母小写名
bindingJsonObject.set("classNameFirstLower", StrUtil.lowerFirst(genBasic.getClassName())); bindingJsonObject.set("classNameFirstLower", StrUtil.lowerFirst(genBasic.getClassName()));
// 类小写且以横线分割
bindingJsonObject.set("classNameLowerKebab", StrUtil.toSymbolCase(genBasic.getClassName(), '-'));
// 主键名 // 主键名
bindingJsonObject.set("dbTableKey", genBasic.getDbTableKey()); bindingJsonObject.set("dbTableKey", genBasic.getDbTableKey());
// 主键Java类型 // 主键Java类型

View File

@ -1,34 +1,36 @@
import request from '@/utils/request' import request from '@/utils/request'
// 获取${functionName}分页 export default {
export function ${classNameFirstLower}Page(data) { // 获取${functionName}分页
return request({ ${classNameFirstLower}Page(data) {
url: '/${moduleName}/${busName}/page', return request({
method: 'get', url: '/${moduleName}/${busName}/page',
data: data method: 'GET',
}) data: data
} })
// 提交${functionName}表单 add为false时为编辑默认为新增 },
export function ${classNameFirstLower}SubmitForm(data, add = true) { // 提交${functionName}表单 add为false时为编辑默认为新增
return request({ ${classNameFirstLower}SubmitForm(data, add = true) {
url: '/${moduleName}/${busName}/'+ (add ? 'add' : 'edit'), return request({
method: 'post', url: '/${moduleName}/${busName}/'+ (add ? 'add' : 'edit'),
data: data method: 'POST',
}) data: data
} })
// 删除${functionName} },
export function ${classNameFirstLower}Delete(data) { // 删除${functionName}
return request({ ${classNameFirstLower}Delete(data) {
url: '/${moduleName}/${busName}/delete', return request({
method: 'post', url: '/${moduleName}/${busName}/delete',
data: data method: 'POST',
}) data: data
} })
// 获取${functionName}详情 },
export function ${classNameFirstLower}Detail(data) { // 获取${functionName}详情
return request({ ${classNameFirstLower}Detail(data) {
url: '/${moduleName}/${busName}/detail', return request({
method: 'get', url: '/${moduleName}/${busName}/detail',
data: data method: 'GET',
}) data: data
})
},
} }

View File

@ -1,92 +1,81 @@
<template> <template>
<view class="container snowy-shadow"> <view class="snowy-form">
<uv-form ref="formRef" :model="formData" :rules="rules" label-position="top" labelWidth="auto" :labelStyle="{marginBottom: '25rpx', fontSize: '27rpx', color: '#606266'}"> <uni-forms ref="formRef" :model="formData" label-position="top" :rules="rules" validate-trigger="blur" labelWidth="auto">
<% 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].fieldNameCamelCase != 'tenantId') { %> <% if(!configList[i].needTableId && configList[i].whetherAddUpdate && configList[i].fieldNameCamelCase != 'tenantId') { %>
<% if(configList[i].effectType == 'input') { %> <% if(configList[i].effectType == 'input') { %>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}" :rules="[{ required: ${configList[i].required}, errorMessage: '请输入${configList[i].fieldRemark}' }]">
<uv-input v-model="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></uv-input> <uni-easyinput v-model="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></uni-easyinput>
</uv-form-item> </uni-forms-item>
<% } else if (configList[i].effectType == 'textarea') {%> <% } else if (configList[i].effectType == 'textarea') {%>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}" :rules="[{ required: ${configList[i].required}, errorMessage: '请输入${configList[i].fieldRemark}' }]">
<uv-textarea v-model="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></uv-textarea> <uni-easyinput type="textarea" v-model="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></uni-easyinput>
</uv-form-item> </uni-forms-item>
<% } else if (configList[i].effectType == 'select') {%> <% } else if (configList[i].effectType == 'select') {%>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}" :rules="[{ required: ${configList[i].required}, errorMessage: '请输入${configList[i].fieldRemark}' }]">
<snowy-sel-picker :map="{key: 'value', label: 'text'}" v-model="formData.${configList[i].fieldNameCamelCase}" :rangeData="${configList[i].fieldNameCamelCase}Options" placeholder="请选择${configList[i].fieldRemark}"></snowy-sel-picker> <snowy-sel-picker :map="{key: 'value', label: 'text'}" v-model="formData.${configList[i].fieldNameCamelCase}" @getOptData="get${configList[i].fieldNameCamelCaseFirstUpper}Options" placeholder="请选择${configList[i].fieldRemark}"></snowy-sel-picker>
</uv-form-item> </uni-forms-item>
<% } else if (configList[i].effectType == 'radio') {%> <% } else if (configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {%>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}" :rules="[{ required: ${configList[i].required}, errorMessage: '请选择${configList[i].fieldRemark}' }]">
<uv-radio-group v-model="formData.${configList[i].fieldNameCamelCase}"> <uni-data-checkbox :multiple="${configList[i].effectType == 'checkbox'?true:false}" :map="{key: 'value', label: 'text'}" v-model="formData.${configList[i].fieldNameCamelCase}" :rangeData="${configList[i].fieldNameCamelCase}Options" placeholder="请选择${configList[i].fieldRemark}"> </uni-data-checkbox>
<uv-radio :customStyle="{marginRight: '50rpx'}" v-for="(item, index) in ${configList[i].fieldNameCamelCase}Options" :key="index" :name="item.value" :label="item.text"></uv-radio> </uni-forms-item>
</uv-radio-group> <% } else if (configList[i].effectType == 'datepicker' || configList[i].effectType == 'timepicker') {%>
</uv-form-item> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}" :rules="[{ required: ${configList[i].required}, errorMessage: '请选择${configList[i].fieldRemark}' }]">
<% } else if (configList[i].effectType == 'checkbox') {%> <uni-datetime-picker type=${configList[i].effectType == 'timepicker'?'datetime':'date'} v-model="formData.${configList[i].fieldNameCamelCase}" > </uni-datetime-picker>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}"> </uni-forms-item>
<uv-checkbox-group v-model="formData.${configList[i].fieldNameCamelCase}">
<uv-checkbox :customStyle="{marginRight: '50rpx'}" v-for="(item, index) in ${configList[i].fieldNameCamelCase}Options" :key="index" :name="item.value" :label="item.text"></uv-checkbox>
</uv-checkbox-group>
</uv-form-item>
<% } else if (configList[i].effectType == 'datepicker') {%>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}">
<snowy-calendar v-model="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></snowy-calendar>
</uv-form-item>
<% } else if (configList[i].effectType == 'timepicker') {%>
<% } else if (configList[i].effectType == 'inputNumber') {%> <% } else if (configList[i].effectType == 'inputNumber') {%>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}" :rules="[{ required: ${configList[i].required}, errorMessage: '请输入${configList[i].fieldRemark}' }]">
<uv-number-box v-model="formData.${configList[i].fieldNameCamelCase}" :min="1" :max="100"></uv-number-box> <uni-number-box v-model="formData.${configList[i].fieldNameCamelCase}" :min="1" :max="100"></uni-number-box>
</uv-form-item> </uni-forms-item>
<% } else if (configList[i].effectType == 'slider') {%> <% } else if (configList[i].effectType == 'slider') {%>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}" :required="${configList[i].required}" :rules="[{ required: ${configList[i].required}, errorMessage: '请输入${configList[i].fieldRemark}' }]">
<slider :value="formData.${configList[i].fieldNameCamelCase}" :min="1" :max="100" :step="1" @change="(e)=>{formData.${configList[i].fieldNameCamelCase} = e.detail.value}"></slider> <slider :value="formData.${configList[i].fieldNameCamelCase}" :min="1" :max="100" :step="1" @change="(e)=>{formData.${configList[i].fieldNameCamelCase} = e.detail.value}"></slider>
</uv-form-item> </uni-forms-item>
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
</uv-form> </uni-forms>
<tui-button margin="50rpx 0" :preventClick="true" :shadow="true" @click="submit">提交</tui-button> <tui-button margin="50rpx 0" :preventClick="true" :shadow="true" @click="submit">提交</tui-button>
</view> </view>
</template> </template>
<script setup name="${classNameFirstLower}Form"> <script setup name="${classNameFirstLower}Form">
<%
var iptTool = 0;
for(var i = 0; i < configList.~size; i++) {
if(!configList[i].needTableId) {
if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {
iptTool++;
}
}
}
%>
import { onLoad } from "@dcloudio/uni-app" import { onLoad } from "@dcloudio/uni-app"
import { ${classNameFirstLower}Detail, ${classNameFirstLower}SubmitForm } from '@/api/${moduleName}/${classNameFirstLower}Api' import ${classNameFirstLower}Api from '@/api/${moduleName}/${classNameLowerKebab}-api'
import { reactive, ref, getCurrentInstance } from "vue" import { reactive, ref, getCurrentInstance } from "vue"
import CallbackState from "@/enum/callback-state"
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const formRef = ref() const formRef = ref()
const formData = ref({ const formData = ref({})
<% for(var i = 0; i < configList.~size; i++) { %> // 常用正则规则大全https://any86.github.io/any-rule/
<% if(!configList[i].needTableId && configList[i].whetherAddUpdate && configList[i].fieldNameCamelCase != 'tenantId') { %>
${configList[i].fieldNameCamelCase}: '',
<% } %>
<% } %>
})
// https://www.uvui.cn/components/form.html
// 去pages/biz/user/form.vue中寻找示例 // 去pages/biz/user/form.vue中寻找示例
const rules = reactive({ const rules = reactive({
<% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].whetherAddUpdate && configList[i].fieldNameCamelCase != 'tenantId' && configList[i].required) { %>
${configList[i].fieldNameCamelCase}: [{
type: 'string',
required: true,
message: '请输入${configList[i].fieldRemark}',
trigger: ['blur', 'change']
}],
<% } %>
<% } %>
}) })
<% 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 == 'radio' || configList[i].effectType == 'checkbox') { %>
const ${configList[i].fieldNameCamelCase}Options = ref([]) const ${configList[i].fieldNameCamelCase}Options = ref([])
<% } %> <% } %>
<% if(configList[i].effectType == 'select') { %>
const get${configList[i].fieldNameCamelCaseFirstUpper}Options = (param, callback) => callback({ state: CallbackState.SUCCESS, data: uni.$snowy.tool.dictList('${configList[i].dictTypeCode}') })
<% } %>
<% } %> <% } %>
<% } %> <% } %>
onLoad((option) => { onLoad((option) => {
<% 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 == 'radio' || configList[i].effectType == 'checkbox') { %>
${configList[i].fieldNameCamelCase}Options.value = uni.$snowy.tool.dictList('${configList[i].dictTypeCode}') ${configList[i].fieldNameCamelCase}Options.value = uni.$snowy.tool.dictList('${configList[i].dictTypeCode}')
<% } %> <% } %>
<% } %> <% } %>
@ -94,17 +83,17 @@
if(!option.id){ if(!option.id){
return return
} }
${classNameFirstLower}Detail({ ${classNameFirstLower}Api.${classNameFirstLower}Detail({
id: option.id id: option.id
}).then(res => { }).then(data => {
formData.value = res?.data formData.value = data
}) })
}) })
const submit = () => { const submit = () => {
formRef.value.validate().then(res => { formRef.value.validate().then(res => {
${classNameFirstLower}SubmitForm(formData.value, !formData.value.id).then(respond => { ${classNameFirstLower}Api.${classNameFirstLower}SubmitForm(formData.value, !formData.value.id).then(data => {
uni.$emit('formBack', { uni.$emit('formBack', {
data: respond.data data: data
}) })
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
@ -114,8 +103,4 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container {
margin: 80rpx 0 0;
padding: 30rpx;
}
</style> </style>

View File

@ -6,98 +6,82 @@
<% 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 ++; }%>
<% } %> <% } %>
<% if (searchCount > 0) { %> <view>
<% for(var i = 0; i < configList.~size; i++) { %> <z-paging ref="dataPagingRef" :fixed="true" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic" @virtualListChange="virtualListChange" @query="loadData" :auto="true">
<% if(!configList[i].needTableId && configList[i].needPage) { row ++; %> <template #top>
<% if(row <= 1) { %> <% if (searchCount > 0) { %>
<snowy-search placeholder="请输入${configList[i].fieldRemark}" v-model="searchFormState.${configList[i].fieldNameCamelCase}" @confirm="loadData(true)" @clear="loadData(true)" :enableSenior="true" @seniorSearch="$refs.searchRef.open()"></snowy-search> <% for(var i = 0; i < configList.~size; i++) { %>
<% } %> <% if(!configList[i].needTableId && configList[i].needPage) { row ++; %>
<% } %> <% if(row <= 1) { %>
<% } %> <view class="snowy-z-paging-item">
<search ref="searchRef" :searchFormState="searchFormState" @confirm="loadData(true)"></search> <snowy-search placeholder="请输入${configList[i].fieldRemark}" v-model="searchFormData.${configList[i].fieldNameCamelCase}" @confirm="$refs.dataPagingRef.reload()" @clear="$refs.dataPagingRef.reload()" :seniorEnable="true" @seniorSearch="$refs.searchRef.open()"></snowy-search>
<% } %> </view>
<view class="${busName}-list"> <% } %>
<view class="item" v-for="(item, index) in ${classNameFirstLower}Data" :key="index" :index="index" @tap="moreTapItem(item, index)"> <% } %>
<% for(var i = 0; i < configList.~size; i++) { %> <% } %>
<% if(!configList[i].needTableId && configList[i].whetherTable && configList[i].fieldNameCamelCase != 'tenantId') { %> <search ref="searchRef" :searchFormData="searchFormData" @confirm="$refs.dataPagingRef.reload()"></search>
<uv-row customStyle="margin-bottom: 15rpx"> <% } %>
<uv-col :span="1"> </template>
<uv-icon size="18" name="tags-fill" color="#5677fc"></uv-icon> <view class="snowy-shadow snowy-z-paging-item snowy-padding snowy-hover" v-for="(item, index) in ${classNameFirstLower}Data" :key="index" @tap="moreTapItem(item, index)">
</uv-col> <% for(var i = 0; i < configList.~size; i++) { %>
<uv-col :span="5"> <% if(!configList[i].needTableId && configList[i].whetherTable && configList[i].fieldNameCamelCase != 'tenantId') { %>
<view class="item-left">${configList[i].fieldRemark}</view> <uni-row class="item-uni-row">
</uv-col> <uni-col :span="2">
<uv-col :span="6" textAlign="right"> <uni-icons size="18" type="paperclip" color="#5677fc"></uni-icons>
<view class="item-right snowy-bold snowy-ellipsis"> {{ item.${configList[i].fieldNameCamelCase} }} </view> </uni-col>
</uv-col> <uni-col :span="10">
</uv-row> <view class="snowy-sub-title">${configList[i].fieldRemark}</view>
<% } %> </uni-col>
<% } %> <uni-col :span="12">
</view> <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.${configList[i].fieldNameCamelCase} }} </view>
</uni-col>
</uni-row>
<% } %>
<% } %>
</view>
</z-paging>
<snowy-float-btn v-if="$snowy.hasPerm('mobile${className}Add')" @click="add"></snowy-float-btn>
<more ref="moreRef" @handleOk="loadData(true)"></more>
</view> </view>
<snowy-empty :fixed="true" v-show="$xeu.isEmpty(${classNameFirstLower}Data)" />
<snowy-float-btn v-if="$snowy.hasPerm('mobile${className}Add')" @click="add"></snowy-float-btn>
<more ref="moreRef" @handleOk="loadData(true)"></more>
</template> </template>
<script setup name="${busName}"> <script setup name="${busName}">
<% if (searchCount > 0) { %> <% if (searchCount > 0) { %>
import search from './search.vue' import search from './search.vue'
<% } %> <% } %>
import { ${classNameFirstLower}Page } from '@/api/${moduleName}/${classNameFirstLower}Api' import ${classNameFirstLower}Api from '@/api/${moduleName}/${classNameLowerKebab}-api'
import more from './more.vue' import more from './more.vue'
import { onLoad, onShow, onReady, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app" import { onLoad, onShow, onReady, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
import { reactive, ref, getCurrentInstance } from "vue" import { reactive, ref, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const searchFormState = reactive({ const dataPagingRef = ref()
<% if (searchCount > 0) { %> const searchFormData = ref({})
<% for(var i = 0; i < configList.~size; i++) { %>
<% if(!configList[i].needTableId && configList[i].needPage) { %>
${configList[i].fieldNameCamelCase}: '',
<% } %>
<% } %>
<% } %>
})
const parameter = reactive({
current: 1,
size: 10
})
const ${classNameFirstLower}Data = ref([]) const ${classNameFirstLower}Data = ref([])
const loadData = (isReset) => { const virtualListChange = (vList) => {
if (isReset) { ${classNameFirstLower}Data.value = vList
parameter.current = 1 }
${classNameFirstLower}Data.value = [] const loadData = async (pageNo, pageSize) => {
} const parameter = {
Object.assign(parameter, searchFormState) current: pageNo,
${classNameFirstLower}Page(parameter).then(res => { size: pageSize
if (uni.$xeu.isEmpty(res?.data?.records)){ }
return Object.assign(parameter, searchFormData.value)
} const data = await ${classNameFirstLower}Api.${classNameFirstLower}Page(parameter)
${classNameFirstLower}Data.value = ${classNameFirstLower}Data.value.concat(res.data.records) dataPagingRef.value.complete(data?.records)
parameter.current++
}).finally(()=>{
uni.stopPullDownRefresh()
})
} }
loadData(true)
onShow(() => { onShow(() => {
uni.$once('formBack', (data) => { uni.$once('formBack', (data) => {
loadData(true) nextTick(() => {
}) dataPagingRef.value.reload()
}) })
// 下拉刷新 })
onPullDownRefresh(() => {
loadData(true)
})
// 上拉加载
onReachBottom(() => {
loadData()
}) })
// 新增 // 新增
const add = () => { const add = () => {
uni.navigateTo({ uni.navigateTo({
url: '/pages/${moduleName}/${busName}/form' url: '/pages/${moduleName}/${busName}/form'
}) })
} }
// 更多操作 // 更多操作
const moreRef = ref() const moreRef = ref()
@ -107,22 +91,9 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.${busName}-list {} @import '@/static/scss/index.scss';
.item { ::v-deep .uni-row {
background: #ffffff; @extend .snowy-flex-v-center;
margin: 20rpx 0; padding: 5rpx;
padding: 25rpx;
box-shadow: 0 1px 2px #ccc;
border-radius: 15rpx;
.item-left {
color: #999;
font-size: 26rpx;
}
.item-right {
font-size: 26rpx;
}
}
.item:hover {
box-shadow: 1upx 5upx 5upx #5677fc;
} }
</style> </style>

View File

@ -1,23 +1,22 @@
<template> <template>
<uv-popup ref="popRef" mode="bottom" bg-color="null" z-index="99"> <uni-popup ref="popRef" type="bottom" background-color="transparent" maskBackgroundColor="rgba(0, 0, 0, 0.6)">
<view class="container"> <tui-list-view unlined="all" background-color="transparent">
<tui-list-view unlined="all" background-color="transparent"> <tui-list-cell v-if="$snowy.hasPerm('mobile${className}Edit')" :hover="true" :arrow="false" @click="edit" :radius="10" >
<tui-list-cell v-if="$snowy.hasPerm('mobile${className}Edit')" :hover="true" :arrow="false" @click="edit" :radius="10" > <view class="snowy-text-center"> 编辑 </view>
<view class="item"> 编辑 </view> </tui-list-cell>
</tui-list-cell> <tui-list-cell v-if="$snowy.hasPerm('mobile${className}Delete')" :hover="true" :arrow="false" @click="del" :radius="10" :margin-top="2">
<tui-list-cell v-if="$snowy.hasPerm('mobile${className}Delete')" :hover="true" :arrow="false" @click="del" :radius="10" :margin-top="2"> <view class="snowy-text-center"> 刪除 </view>
<view class="item"> 刪除 </view> </tui-list-cell>
</tui-list-cell> <tui-list-cell :hover="true" :arrow="false" @click="cancel" :margin-top="10" :radius="10">
<tui-list-cell :hover="true" :arrow="false" @click="cancel" :margin-top="10" :radius="10"> <view class="snowy-text-center"> 取消 </view>
<view class="item"> 取消 </view> </tui-list-cell>
</tui-list-cell> </tui-list-view>
</tui-list-view> </uni-popup>
</view>
</uv-popup>
</template> </template>
<script setup name="${classNameFirstLower}More"> <script setup name="${classNameFirstLower}More">
import { ${classNameFirstLower}Delete } from '@/api/${moduleName}/${classNameFirstLower}Api' import ${classNameFirstLower}Api from '@/api/${moduleName}/${classNameLowerKebab}-api'
import { reactive, ref, getCurrentInstance } from "vue" import { reactive, ref, getCurrentInstance } from "vue"
const emits = defineEmits(['handleOk']) const emits = defineEmits(['handleOk'])
const popRef = ref() const popRef = ref()
const record = ref({}) const record = ref({})
@ -30,33 +29,26 @@
uni.navigateTo({ uni.navigateTo({
url: '/pages/${moduleName}/${busName}/form?id=' + record.value.id url: '/pages/${moduleName}/${busName}/form?id=' + record.value.id
}) })
popupRef.value.close() popRef.value.close()
} }
// 删除 // 删除
const del = () => { const del = () => {
uni.$snowy.modal.confirm(`确定要删除吗?`).then(() => { uni.$snowy.modal.confirm(`确定要删除吗?`).then(() => {
${classNameFirstLower}Delete([{ ${classNameFirstLower}Api.${classNameFirstLower}Delete([{
id: record.value.id id: record.value.id
}]).then(res => { }]).then(data => {
emits('handleOk') emits('handleOk')
popupRef.value.close() popRef.value.close()
}) })
}) })
} }
// 取消 // 取消
const cancel = () => { const cancel = () => {
popupRef.value.close() popRef.value.close()
} }
defineExpose({ defineExpose({
open open
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container {
padding: 5upx;
background-color: transparent;
.item {
text-align: center;
}
}
</style> </style>

View File

@ -5,7 +5,7 @@
"path": "pages/${moduleName}/${busName}/index", "path": "pages/${moduleName}/${busName}/index",
"style": { "style": {
"navigationBarTitleText": "${functionName}管理", "navigationBarTitleText": "${functionName}管理",
"enablePullDownRefresh": true, "enablePullDownRefresh": false,
//#ifdef H5 //#ifdef H5
"navigationStyle": "custom" "navigationStyle": "custom"
//#endif //#endif
@ -29,7 +29,7 @@
"path": "index", "path": "index",
"style": { "style": {
"navigationBarTitleText": "${functionName}管理", "navigationBarTitleText": "${functionName}管理",
"enablePullDownRefresh": true, "enablePullDownRefresh": false,
//#ifdef H5 //#ifdef H5
"navigationStyle": "custom" "navigationStyle": "custom"
//#endif //#endif

View File

@ -6,48 +6,56 @@
<% 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 ++; }%>
<% } %> <% } %>
<uv-popup ref="popRef" mode="bottom" bg-color="null" z-index="99"> <uni-popup ref="popRef" type="bottom" background-color="transparent" maskBackgroundColor="rgba(0, 0, 0, 0.6)">
<view class="container"> <view class="snowy-shadow snowy-padding">
<view class="close"> <view class="snowy-flex-end">
<icon type="clear" :size="20" color="#5677fc" @click="close"></icon> <icon type="clear" :size="20" color="#5677fc" @click="close"></icon>
</view> </view>
<% if (searchCount > 0) { %> <% if (searchCount > 0) { %>
<uv-form ref="formRef" :model="searchFormState" label-position="top" labelWidth="auto" :labelStyle="{marginBottom: '25rpx', fontSize: '27rpx', color: '#606266'}"> <uni-forms ref="formRef" :model="searchFormData" label-position="top" labelWidth="auto">
<% 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 == 'input' || configList[i].effectType == 'textarea') { %> <% if(configList[i].effectType == 'input' || configList[i].effectType == 'textarea') { %>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<uv-input v-model="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></uv-input> <uni-easyinput v-model="searchFormData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></uni-easyinput>
</uv-form-item> </uni-forms-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') {%>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<snowy-sel-picker :map="{key: 'value', label: 'text'}" v-model="searchFormState.${configList[i].fieldNameCamelCase}" :rangeData="${configList[i].fieldNameCamelCase}Options" placeholder="请选择${configList[i].fieldRemark}"></snowy-sel-picker> <snowy-sel-picker :map="{key: 'value', label: 'text'}" v-model="searchFormData.${configList[i].fieldNameCamelCase}" :rangeData="${configList[i].fieldNameCamelCase}Options" placeholder="请选择${configList[i].fieldRemark}"></snowy-sel-picker>
</uv-form-item> </uni-forms-item>
<% } else if (configList[i].effectType == 'inputNumber' || configList[i].effectType == 'slider') {%>
<uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<uni-number-box v-model="searchFormData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"/>
</uni-forms-item>
<% } else if (configList[i].effectType == 'datepicker') {%>
<uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<uni-datetime-picker v-model="searchFormData.${configList[i].fieldNameCamelCase}" type="datetimerange"/>
</uni-forms-item>
<% } else {%> <% } else {%>
<uv-form-item label="${configList[i].fieldRemark}" prop="${configList[i].fieldNameCamelCase}"> <uni-forms-item label="${configList[i].fieldRemark}" name="${configList[i].fieldNameCamelCase}">
<uv-input v-model="searchFormState.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></uv-input> <uni-easyinput v-model="searchFormData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}"></uni-easyinput>
</uv-form-item> </uni-forms-item>
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
</uv-form> </uni-forms>
<% } %> <% } %>
<uv-row :gutter="10"> <uni-row :gutter="10">
<uv-col :span="6"> <uni-col :span="12">
<tui-button height="90rpx" type="gray" @click="reset">重置</tui-button> <tui-button height="90rpx" type="gray" @click="reset">重置</tui-button>
</uv-col> </uni-col>
<uv-col :span="6"> <uni-col :span="12">
<tui-button height="90rpx" type="primary" @click="confirm">确认</tui-button> <tui-button height="90rpx" type="primary" @click="confirm">确认</tui-button>
</uv-col> </uni-col>
</uv-row> </uni-row>
</view> </view>
</uv-popup> </uni-popup>
</template> </template>
<script setup name="${classNameFirstLower}Search"> <script setup name="${classNameFirstLower}Search">
import { ref } from "vue" import { ref } from "vue"
const emits = defineEmits(['reset', 'confirm']) const emits = defineEmits(['reset', 'confirm'])
const props = defineProps({ const props = defineProps({
searchFormState: { searchFormData: {
type: Object, type: Object,
required: true required: true
}, },
@ -61,7 +69,10 @@
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
// 弹出ref
const popRef = ref() const popRef = ref()
// 打开
const open = () => { const open = () => {
popRef.value.open() popRef.value.open()
} }
@ -69,31 +80,21 @@
// 重置数据 // 重置数据
<% 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) { %>
props.searchFormState.${configList[i].fieldNameCamelCase} = '' props.searchFormData.${configList[i].fieldNameCamelCase} = ''
<% } %> <% } %>
<% } %> <% } %>
emits('reset', props.searchFormState) emits('reset', props.searchFormData)
} }
const confirm = () => { const confirm = () => {
popRef.value.close() popRef.value.close()
emits('confirm', props.searchFormState) emits('confirm', props.searchFormData)
} }
const close = () => { const close = () => {
popRef.value.close() popRef.value.close()
} }
defineExpose({ defineExpose({
open open
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container {
margin: 5rpx;
border-radius: 10rpx;
padding: 20rpx;
background-color: white;
.close {
display: flex;
justify-content: flex-end;
}
}
</style> </style>