charging_pile/generator/target/classes/vue/index-tree.vue.vm

223 lines
8.0 KiB
Plaintext

<template>
<div class="index-tree">
<el-card class="!border-none mb-4" shadow="never">
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
#foreach ($column in $columns)
#if($column.isQuery==1)
#if($column.htmlType=="datetime")
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
<daterange-picker
v-model:startTime="queryParams.createTimeStart"
v-model:endTime="queryParams.createTimeEnd"
/>
</el-form-item>
#elseif($column.htmlType=="select" || $column.htmlType == "radio")
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
<el-select
v-model="queryParams.${column.javaField}"
class="w-56"
clearable
>
#if($column.dictType=="")
<el-option label="请选择字典生成" value="" />
#else
<el-option label="全部" value="" />
<el-option
v-for="(item, index) in dictData.${column.dictType}"
:key="index"
:label="item.name"
:value="item.value"
/>
#end
</el-select>
</el-form-item>
#elseif($column.htmlType=="input")
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
<el-input class="w-56" v-model="queryParams.${column.javaField}" />
</el-form-item>
#end
#end
#end
<el-form-item>
<el-button type="primary" @click="getLists">查询</el-button>
<el-button @click="getLists">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none" shadow="never">
<div>
<el-button v-perms="['${moduleName}:add']" type="primary" @click="handleAdd()">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
<el-button @click="handleExpand"> 展开/折叠 </el-button>
</div>
<el-table
v-loading="loading"
ref="tableRef"
class="mt-4"
size="large"
:data="lists"
row-key="${table.treePrimary}"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
#foreach ($column in $columns)
#if($column.isList)
#if($column.dictType!="" && ($column.htmlType=="select" || $column.htmlType=="radio" || $column.htmlType=="checkbox"))
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100">
<template #default="{ row }">
<dict-value :options="dictData.${column.dictType}" :value="row.${column.javaField}" />
</template>
</el-table-column>
#elseif($column.htmlType=="imageUpload")
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100">
<template #default="{ row }">
<image-contain
:width="40"
:height="40"
:src="row.${column.javaField}"
:preview-src-list="[row.${column.javaField}]"
preview-teleported
hide-on-click-modal
/>
</template>
</el-table-column>
#else
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100" />
#end
#end
#end
<el-table-column label="操作" width="160" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['${moduleName}:add']"
type="primary"
link
@click="handleAdd(row.${table.treePrimary})"
>
新增
</el-button>
<el-button
v-perms="['${moduleName}:edit']"
type="primary"
link
@click="handleEdit(row)"
>
编辑
</el-button>
<el-button
v-perms="['${moduleName}:del']"
type="danger"
link
@click="handleDelete(row.${primaryKey})"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<edit-popup
v-if="showEdit"
ref="editRef"
#if($dictFields.size()>=1)
:dict-data="dictData"
#end
@success="getLists"
@close="showEdit = false"
/>
</div>
</template>
<script lang="ts" setup>
import { ${moduleName}Delete, ${moduleName}Lists } from '@/api/${moduleName}'
import EditPopup from './edit.vue'
import feedback from '@/utils/feedback'
#if($dictFields.size()>=1)
import { useDictData } from '@/hooks/useDictOptions'
#end
import type { ElTable } from 'element-plus'
const tableRef = shallowRef<InstanceType<typeof ElTable>>()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
let isExpand = false
const showEdit = ref(false)
const loading = ref(false)
const lists = ref<any[]>([])
const queryParams = reactive({
#foreach ($column in $columns)
#if($column.isQuery)
#if($column.htmlType=="datetime")
${column.javaField}Start: '',
${column.javaField}End: '',
#else
${column.javaField}: '',
#end
#end
#end
})
const getLists = async () => {
loading.value = true
try {
const data = await ${moduleName}Lists(queryParams)
lists.value = data
loading.value = false
} catch (error) {
loading.value = false
}
}
#if($dictFields.size()>=1)
#set($dictSize = $dictFields.size() - 1)
const { dictData } = useDictData<{
#foreach ($dict in $dictFields)
${dict}: any[]
#end
}>([#foreach ($dict in $dictFields)'${dict}'#if($dictFields[$dictSize] != ${dict}),#end#end])
#end
const handleAdd = async (${table.treePrimary}?: number) => {
showEdit.value = true
await nextTick()
if (${table.treePrimary}) {
editRef.value?.setFormData({
${table.treeParent}: ${table.treePrimary}
})
}
editRef.value?.open('add')
}
const handleEdit = async (data: any) => {
showEdit.value = true
await nextTick()
editRef.value?.open('edit')
editRef.value?.getDetail(data)
}
const handleDelete = async (${primaryKey}: number) => {
await feedback.confirm('确定要删除?')
await ${moduleName}Delete({ ${primaryKey} })
feedback.msgSuccess('删除成功')
getLists()
}
const handleExpand = () => {
isExpand = !isExpand
toggleExpand(lists.value, isExpand)
}
const toggleExpand = (children: any[], unfold = true) => {
for (const key in children) {
tableRef.value?.toggleRowExpansion(children[key], unfold)
if (children[key].children) {
toggleExpand(children[key].children!, unfold)
}
}
}
getLists()
</script>