fix 系统监控-go程序实时内存占用,代码生成-setup语法糖支持

This commit is contained in:
yxh 2024-07-19 18:08:40 +08:00
parent f10fa5ce75
commit 38f66c91de
8 changed files with 1418 additions and 1619 deletions

View File

@ -10,6 +10,7 @@ import (
"github.com/shirou/gopsutil/v3/host" "github.com/shirou/gopsutil/v3/host"
"github.com/shirou/gopsutil/v3/load" "github.com/shirou/gopsutil/v3/load"
"github.com/shirou/gopsutil/v3/mem" "github.com/shirou/gopsutil/v3/mem"
"github.com/shirou/gopsutil/v3/process"
"github.com/tiger1103/gfast/v3/api/v1/system" "github.com/tiger1103/gfast/v3/api/v1/system"
"github.com/tiger1103/gfast/v3/library/libUtils" "github.com/tiger1103/gfast/v3/library/libUtils"
"os" "os"
@ -62,12 +63,15 @@ func (c *sysMonitorController) List(ctx context.Context, req *system.MonitorSear
var goFree uint64 = 0 //go剩余的内存数 var goFree uint64 = 0 //go剩余的内存数
var goUsage float64 = 0 //使用率 var goUsage float64 = 0 //使用率
var gomem runtime.MemStats p, err := process.NewProcess(int32(os.Getpid()))
runtime.ReadMemStats(&gomem) if err == nil {
goUsed = gomem.Sys memInfo, err := p.MemoryInfo()
if err == nil {
goUsed = memInfo.RSS
goUsage = gconv.Float64(fmt.Sprintf("%.2f", gconv.Float64(goUsed)/gconv.Float64(memTotal)*100)) goUsage = gconv.Float64(fmt.Sprintf("%.2f", gconv.Float64(goUsed)/gconv.Float64(memTotal)*100))
}
}
sysComputerIp := "" //服务器IP sysComputerIp := "" //服务器IP
ip, err := libUtils.GetLocalIP() ip, err := libUtils.GetLocalIP()
if err == nil { if err == nil {
sysComputerIp = ip sysComputerIp = ip

View File

@ -192,7 +192,7 @@ func (s *sToolsGenTableColumn) InitColumnField(column *entity.ToolsGenTableColum
column.SortOrderList = column.SortOrderEdit column.SortOrderList = column.SortOrderEdit
column.SortOrderDetail = column.SortOrderEdit column.SortOrderDetail = column.SortOrderEdit
column.SortOrderQuery = column.SortOrderEdit column.SortOrderQuery = column.SortOrderEdit
column.ColSpan = 12 column.ColSpan = 1
column.RowSpan = 1 column.RowSpan = 1
column.IsRowStart = false column.IsRowStart = false
column.MinWidth = 150 column.MinWidth = 150

View File

@ -9,5 +9,5 @@ package consts
const ( const (
Logo = `CiAgIF9fX19fX19fX19fXyAgICAgICAgICAgX18gCiAgLyBfX19fLyBfX19fL19fXyBfX19fX18vIC9fCiAvIC8gX18vIC9fICAvIF9fIGAvIF9fXy8gX18vCi8gL18vIC8gX18vIC8gL18vIChfXyAgKSAvXyAgClxfX19fL18vICAgIFxfXyxfL19fX18vXF9fLyAg` Logo = `CiAgIF9fX19fX19fX19fXyAgICAgICAgICAgX18gCiAgLyBfX19fLyBfX19fL19fXyBfX19fX18vIC9fCiAvIC8gX18vIC9fICAvIF9fIGAvIF9fXy8gX18vCi8gL18vIC8gX18vIC8gL18vIChfXyAgKSAvXyAgClxfX19fL18vICAgIFxfXyxfL19fX18vXF9fLyAg`
Version = "3.2.27" Version = "3.2.28"
) )

View File

@ -10,70 +10,109 @@
<template #header> <template #header>
<h4>{{.table.TableComment}}详情</h4> <h4>{{.table.TableComment}}详情</h4>
</template> </template>
<el-form ref="formRef" :model="formData" label-width="100px"> <el-descriptions
{{ $hasRowEnd := true }} class="margin-top"
:column="3"
border
style="margin: 8px;"
>
{{range $index, $column := .table.DetailColumns}} {{range $index, $column := .table.DetailColumns}}
{{if and (eq $column.IsRowStart true) (ne $index 0)}}
{{ $hasRowEnd = true }}
</el-row>
{{end}}
{{if or (eq $column.IsRowStart true) (eq $index 0)}}
{{ $hasRowEnd = false }}
<el-row>
{{end}}
{{if eq $column.HtmlType "input" "textarea" "radio" "checkbox" "select" "selects" "treeSelect" "treeSelects"}} {{if eq $column.HtmlType "input" "textarea" "radio" "checkbox" "select" "selects" "treeSelect" "treeSelects"}}
<el-col :span="{{$column.ColSpan}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
{{if ne $column.LinkTableName ""}} {{if ne $column.LinkTableName ""}}
{{range $ti, $linkedTable := $.table.LinkedTables}} {{range $ti, $linkedTable := $.table.LinkedTables}}
{{if eq $column.LinkTableClass $linkedTable.ClassName}} {{if eq $column.LinkTableClass $linkedTable.ClassName}}
{{if eq $column.HtmlType "selects" "checkbox" "treeSelects"}} {{if eq $column.HtmlType "selects" "checkbox" "treeSelects"}}
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.linked{{$column.GoField}}?formData.linked{{$column.GoField}}.map((res:any)=>{return res.{{CaseCamelLower $column.LinkLabelName}}}).join(''):'' {{"}}"}}</el-form-item> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
{{"{{"}} formData.linked{{$column.GoField}}?formData.linked{{$column.GoField}}.map((res:any)=>{return res.{{CaseCamelLower $column.LinkLabelName}}}).join(''):'' {{"}}"}}
{{else}} {{else}}
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.linked{{$column.GoField}}?formData.linked{{$column.GoField}}.{{CaseCamelLower $column.LinkLabelName}}:'' {{"}}"}}</el-form-item> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
{{"{{"}} formData.linked{{$column.GoField}}?formData.linked{{$column.GoField}}.{{CaseCamelLower $column.LinkLabelName}}:'' {{"}}"}}
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
{{else if ne $column.DictType ""}} {{else if ne $column.DictType ""}}
{{if eq $column.HtmlType "checkbox" }} {{if eq $column.HtmlType "checkbox" }}
<el-form-item label="{{$column.ColumnComment}}"> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
<el-tag class="ml-2" type="success" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key"> <el-tag class="ml-2" type="success" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
{{"{{"}} proxy.getOptionValue(item, {{$column.HtmlField}}Options,'value','label') {{"}}"}} {{"{{"}} proxy.getOptionValue(item, {{$column.HtmlField}}Options,'value','label') {{"}}"}}
</el-tag> </el-tag>
</el-form-item>
{{else}} {{else}}
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.getOptionValue({{if eq $column.TsType "boolean"}}formData.{{$column.HtmlField}}?'1':'0'{{else}}formData.{{$column.HtmlField}}{{end}}, {{$column.HtmlField}}Options,'value','label') {{"}}"}}</el-form-item> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
{{"{{"}} proxy.getOptionValue({{if eq $column.TsType "boolean"}}formData.{{$column.HtmlField}}?'1':'0'{{else}}formData.{{$column.HtmlField}}{{end}}, {{$column.HtmlField}}Options,'value','label') {{"}}"}}
{{end}} {{end}}
{{else}} {{else}}
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.{{$column.HtmlField}} {{"}}"}}</el-form-item> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
{{"{{"}} formData.{{$column.HtmlField}} {{"}}"}}
{{end}} {{end}}
</el-col> </el-descriptions-item>
{{else if eq $column.HtmlType "date"}} {{else if eq $column.HtmlType "date"}}
<el-col :span="{{$column.ColSpan}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.parseTime(formData.{{$column.HtmlField}}, '{y}-{m}-{d}') {{"}}"}}</el-form-item> <template #label>
</el-col> <div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
{{"{{"}} proxy.parseTime(formData.{{$column.HtmlField}}, '{y}-{m}-{d}') {{"}}"}}
</el-descriptions-item>
{{else if eq $column.HtmlType "datetime"}} {{else if eq $column.HtmlType "datetime"}}
<el-col :span="{{$column.ColSpan}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.parseTime(formData.{{$column.HtmlField}}, '{y}-{m}-{d} {h}:{i}:{s}') {{"}}"}}</el-form-item> <template #label>
</el-col> <div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
{{"{{"}} proxy.parseTime(formData.{{$column.HtmlField}}, '{y}-{m}-{d} {h}:{i}:{s}') {{"}}"}}
</el-descriptions-item>
{{else if eq $column.HtmlType "richtext"}} {{else if eq $column.HtmlType "richtext"}}
<el-col :span="{{$column.ColSpan}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}"> <template #label>
<p v-html="formData.{{$column.HtmlField}}"></p> <div class="cell-item">
</el-form-item> {{$column.ColumnComment}}
</el-col> </div>
</template>
<div v-html="formData.{{$column.HtmlField}}"></div>
</el-descriptions-item>
{{else if eq $column.HtmlType "imagefile"}} {{else if eq $column.HtmlType "imagefile"}}
<el-col :span="{{$column.ColSpan}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}"> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
<el-image <el-image
style="width: 150px; height: 150px" style="width: 150px; height: 150px"
v-if="!proxy.isEmpty(formData.{{$column.HtmlField}})" v-if="!proxy.isEmpty(formData.{{$column.HtmlField}})"
:src="proxy.getUpFileUrl(formData.{{$column.HtmlField}})" :src="proxy.getUpFileUrl(formData.{{$column.HtmlField}})"
fit="contain"></el-image> fit="contain"></el-image>
</el-form-item> </el-descriptions-item>
</el-col>
{{else if eq $column.HtmlType "images"}} {{else if eq $column.HtmlType "images"}}
<el-col :span="{{$column.ColSpan}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}"> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
<div class="pic-block" v-for="(img,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key"> <div class="pic-block" v-for="(img,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
<el-image <el-image
style="width: 150px; height: 150px" style="width: 150px; height: 150px"
@ -81,38 +120,45 @@
:src="proxy.getUpFileUrl(img.url)" :src="proxy.getUpFileUrl(img.url)"
fit="contain"></el-image> fit="contain"></el-image>
</div> </div>
</el-form-item> </el-descriptions-item>
</el-col>
{{else if eq $column.HtmlType "file"}} {{else if eq $column.HtmlType "file"}}
<el-col :span="{{$column.ColSpan}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}"> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
<div class="file-block" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key"> <div class="file-block" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
<el-link type="primary" :underline="false" <el-link type="primary" :underline="false"
:href="proxy.getUpFileUrl(item.url)" target="_blank">{{"{{"}}item.name{{"}}"}}</el-link> :href="proxy.getUpFileUrl(item.url)" target="_blank">{{"{{"}}item.name{{"}}"}}</el-link>
</div> </div>
</el-form-item> </el-descriptions-item>
</el-col>
{{else if eq $column.HtmlType "files"}} {{else if eq $column.HtmlType "files"}}
<el-col :span="{{$column.ColSpan}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}"> <template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
<div class="file-block" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key"> <div class="file-block" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
<el-link type="primary" :underline="false" <el-link type="primary" :underline="false"
:href="proxy.getUpFileUrl(item.url)" target="_blank">{{"{{"}}item.name{{"}}"}}</el-link> :href="proxy.getUpFileUrl(item.url)" target="_blank">{{"{{"}}item.name{{"}}"}}</el-link>
</div> </div>
</el-form-item> </el-descriptions-item>
</el-col>
{{else if eq $column.HtmlType "keyValue"}} {{else if eq $column.HtmlType "keyValue"}}
<el-form-item label="{{$column.ColumnComment}}"> <el-descriptions-item :span="{{$column.ColSpan}}">
<template #label>
<div class="cell-item">
{{$column.ColumnComment}}
</div>
</template>
<el-tag class="ml-2" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key"> <el-tag class="ml-2" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
{{"{{"}} item.key {{"}}"}} : {{"{{"}} item.value {{"}}"}} {{"{{"}} item.key {{"}}"}} : {{"{{"}} item.value {{"}}"}}
</el-tag> </el-tag>
</el-form-item> </el-descriptions-item>
{{end}} {{end}}
{{end}} {{end}}
{{if not $hasRowEnd}} </el-descriptions>
</el-row>
{{end}}
</el-form>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
@ -139,7 +185,7 @@
{{end}} {{end}}
{{end}} {{end}}
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue'; import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus'; import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
{{/*去重处理*/}} {{/*去重处理*/}}
@ -175,25 +221,11 @@
{{.table.ClassName}}TableDataState, {{.table.ClassName}}TableDataState,
{{.table.ClassName}}EditState {{.table.ClassName}}EditState
} from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/model" } from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/model"
export default defineComponent({ defineOptions({ name: "{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail"})
name:"{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail",
{{$hascomponent := false}} {{$hascomponent := false}}
{{if or $imgsImp $tokenImp $fileImp}} {{if or $imgsImp $tokenImp $fileImp}}
{{$hascomponent = true}} {{$hascomponent = true}}
{{end}} {{end}}
{{if $hascomponent}}
components:{
{{if $editImp}}
GfUeditor,
{{end}}
{{if $imgsImp}}
uploadImg,
{{end}}
{{if $fileImp}}
uploadFile,
{{end}}
},
{{end}}
{{$hasProps := false}} {{$hasProps := false}}
{{if eq .table.TplCategory "tree"}} {{if eq .table.TplCategory "tree"}}
{{$hasProps = true}} {{$hasProps = true}}
@ -206,7 +238,7 @@
{{end}} {{end}}
{{end}} {{end}}
{{if $hasProps}} {{if $hasProps}}
props:{ const props = defineProps({
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}} {{if ne $column.DictType ""}}
{{$column.HtmlField}}Options:{ {{$column.HtmlField}}Options:{
@ -231,9 +263,9 @@
default:()=>[] default:()=>[]
}, },
{{end}} {{end}}
}, })
{{end}} {{end}}
setup(props,{emit}) {
{{if or $imgsImp $tokenImp $fileImp}} {{if or $imgsImp $tokenImp $fileImp}}
const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
{{end}} {{end}}
@ -289,6 +321,7 @@
{{end}} {{end}}
} }
}); });
const { isShowDialog,formData } = toRefs(state);
// 打开弹窗 // 打开弹窗
const openDialog = (row?: {{.table.ClassName}}InfoData) => { const openDialog = (row?: {{.table.ClassName}}InfoData) => {
resetForm(); resetForm();
@ -325,6 +358,9 @@
const closeDialog = () => { const closeDialog = () => {
state.isShowDialog = false; state.isShowDialog = false;
}; };
defineExpose({
openDialog,
});
// 取消 // 取消
const onCancel = () => { const onCancel = () => {
closeDialog(); closeDialog();
@ -423,50 +459,6 @@
return findV return findV
} }
{{end}} {{end}}
{{$setUpDataR:=true}}
return {
proxy,
openDialog,
closeDialog,
onCancel,
menuRef,
formRef,
{{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}}
{{if $column.IsCascade}}
{{/*级联处理*/}}
{{else}}
{{/*关联表处理*/}}
get{{$column.LinkTableClass}}Items{{$column.GoField}},
get{{$column.GoField}}Op,
{{end}}
{{else if eq $column.HtmlType "richtext"}}
//富文本编辑器{{$column.ColumnComment}}
set{{$column.GoField}}EditContent,
{{else if eq $column.HtmlType "imagefile"}}
//图片上传地址
imageUrl{{$column.GoField}},
//上传加载
upLoading{{$column.GoField}},
handleAvatarSuccess{{$column.GoField}},
beforeAvatarUpload{{$column.GoField}},
{{if $setUpDataR}}
setUpData,
{{$setUpDataR = false}}
{{end}}
{{else if eq $column.HtmlType "images"}}
setUpImgList{{$column.GoField}},
{{else if eq $column.HtmlType "file" "files"}}
setUpFileList{{$column.GoField}},
{{end}}
{{end}}
{{if or $imgsImp $tokenImp $fileImp}}
baseURL,
{{end}}
...toRefs(state),
};
}
})
</script> </script>
<style scoped> <style scoped>

View File

@ -102,7 +102,7 @@
<el-radio <el-radio
v-for="dict in {{$column.HtmlField}}Options" v-for="dict in {{$column.HtmlField}}Options"
:key="dict.key" :key="dict.key"
:label="dict.key" :value="dict.key"
>{{ VueTag "{{" }}dict.value {{VueTag "}}"}}</el-radio> >{{ VueTag "{{" }}dict.value {{VueTag "}}"}}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -112,7 +112,7 @@
<el-radio <el-radio
v-for="dict in {{$column.HtmlField}}Options" v-for="dict in {{$column.HtmlField}}Options"
:key="dict.value" :key="dict.value"
:label="dict.value" :value="dict.value"
>{{ VueTag "{{" }}dict.label {{VueTag "}}"}}</el-radio> >{{ VueTag "{{" }}dict.label {{VueTag "}}"}}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -150,7 +150,7 @@
<el-checkbox <el-checkbox
v-for="dict in {{$column.HtmlField}}Options" v-for="dict in {{$column.HtmlField}}Options"
:key="dict.key" :key="dict.key"
:label="dict.key" :value="dict.key"
>{{ VueTag "{{" }}dict.value {{VueTag "}}"}}</el-checkbox> >{{ VueTag "{{" }}dict.value {{VueTag "}}"}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
@ -160,7 +160,7 @@
<el-checkbox <el-checkbox
v-for="dict in {{$column.HtmlField}}Options" v-for="dict in {{$column.HtmlField}}Options"
:key="dict.value" :key="dict.value"
:label="dict.value" :value="dict.value"
>{{ VueTag "{{" }}dict.label {{VueTag "}}"}}</el-checkbox> >{{ VueTag "{{" }}dict.label {{VueTag "}}"}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
@ -264,8 +264,8 @@
{{end}} {{end}}
{{end}} {{end}}
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue'; import { reactive, toRefs, ref,unref,getCurrentInstance } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus'; import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
{{/*去重处理*/}} {{/*去重处理*/}}
import { import {
@ -299,38 +299,25 @@ import {
{{.table.ClassName}}TableDataState, {{.table.ClassName}}TableDataState,
{{.table.ClassName}}EditState {{.table.ClassName}}EditState
} from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/model" } from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/model"
export default defineComponent({ defineOptions({ name: "{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit"})
name:"{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit", const emit = defineEmits(['{{$businessName}}List'])
{{$hascomponent := false}} {{$hascomponent := false}}
{{if or $imgsImp $tokenImp $fileImp}} {{if or $imgsImp $tokenImp $fileImp}}
{{$hascomponent = true}} {{$hascomponent = true}}
{{end}} {{end}}
{{if $hascomponent}} {{$hasProps := false}}
components:{ {{if eq .table.TplCategory "tree"}}
{{if $editImp}}
GfUeditor,
{{end}}
{{if $imgsImp}}
uploadImg,
{{end}}
{{if $fileImp}}
uploadFile,
{{end}}
},
{{end}}
{{$hasProps := false}}
{{if eq .table.TplCategory "tree"}}
{{$hasProps = true}} {{$hasProps = true}}
{{end}} {{end}}
{{if not $hasProps}} {{if not $hasProps}}
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if or (ne $column.DictType "") (ne $column.LinkTableName "") }} {{if or (ne $column.DictType "") (ne $column.LinkTableName "") }}
{{$hasProps = true}} {{$hasProps = true}}
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
{{if $hasProps}} {{if $hasProps}}
props:{ const props = defineProps({
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}} {{if ne $column.DictType ""}}
{{$column.HtmlField}}Options:{ {{$column.HtmlField}}Options:{
@ -355,24 +342,24 @@ export default defineComponent({
default:()=>[] default:()=>[]
}, },
{{end}} {{end}}
}, })
{{end}} {{end}}
setup(props,{emit}) {
{{if or $imgsImp $tokenImp $fileImp}} {{if or $imgsImp $tokenImp $fileImp}}
const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
{{end}} {{end}}
const {proxy} = <any>getCurrentInstance() const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null); const formRef = ref<HTMLElement | null>(null);
const menuRef = ref(); const menuRef = ref();
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if eq $column.HtmlType "imagefile"}} {{if eq $column.HtmlType "imagefile"}}
//图片上传地址 //图片上传地址
const imageUrl{{$column.GoField}} = ref('') const imageUrl{{$column.GoField}} = ref('')
//上传加载 //上传加载
const upLoading{{$column.GoField}} = ref(false) const upLoading{{$column.GoField}} = ref(false)
{{end}} {{end}}
{{end}} {{end}}
const state = reactive<{{.table.ClassName}}EditState>({ const state = reactive<{{.table.ClassName}}EditState>({
loading:false, loading:false,
isShowDialog: false, isShowDialog: false,
formData: { formData: {
@ -405,9 +392,10 @@ export default defineComponent({
{{end}} {{end}}
{{end}} {{end}}
} }
}); });
// 打开弹窗 const { loading,isShowDialog,formData,rules } = toRefs(state);
const openDialog = (row?: {{.table.ClassName}}InfoData) => { // 打开弹窗
const openDialog = (row?: {{.table.ClassName}}InfoData) => {
resetForm(); resetForm();
if(row) { if(row) {
get{{.table.ClassName}}(row.{{.table.PkColumn.HtmlField}}!).then((res:any)=>{ get{{.table.ClassName}}(row.{{.table.PkColumn.HtmlField}}!).then((res:any)=>{
@ -467,19 +455,22 @@ export default defineComponent({
{{end}} {{end}}
state.formData = data; state.formData = data;
}) })
} }
state.isShowDialog = true; state.isShowDialog = true;
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
state.isShowDialog = false; state.isShowDialog = false;
}; };
// 取消 defineExpose({
const onCancel = () => { openDialog,
});
// 取消
const onCancel = () => {
closeDialog(); closeDialog();
}; };
// 提交 // 提交
const onSubmit = () => { const onSubmit = () => {
const formWrap = unref(formRef) as any; const formWrap = unref(formRef) as any;
if (!formWrap) return; if (!formWrap) return;
formWrap.validate((valid: boolean) => { formWrap.validate((valid: boolean) => {
@ -506,8 +497,8 @@ export default defineComponent({
} }
} }
}); });
}; };
const resetForm = ()=>{ const resetForm = ()=>{
state.formData = { state.formData = {
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if eq $column.HtmlType "radio"}} {{if eq $column.HtmlType "radio"}}
@ -533,17 +524,17 @@ export default defineComponent({
imageUrl{{$column.GoField}}.value = '' imageUrl{{$column.GoField}}.value = ''
{{end}} {{end}}
{{end}} {{end}}
}; };
{{$setUpData:=true}} {{$setUpData:=true}}
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if eq $column.HtmlType "richtext"}} {{if eq $column.HtmlType "richtext"}}
//富文本编辑器{{$column.ColumnComment}} //富文本编辑器{{$column.ColumnComment}}
const set{{$column.GoField}}EditContent = (data:string) => { const set{{$column.GoField}}EditContent = (data:string) => {
state.formData.{{$column.HtmlField}} = data state.formData.{{$column.HtmlField}} = data
} }
{{else if eq $column.HtmlType "imagefile"}} {{else if eq $column.HtmlType "imagefile"}}
//单图上传{{$column.ColumnComment}} //单图上传{{$column.ColumnComment}}
const handleAvatarSuccess{{$column.GoField}}:UploadProps['onSuccess'] = (res, file) => { const handleAvatarSuccess{{$column.GoField}}:UploadProps['onSuccess'] = (res, file) => {
if (res.code === 0) { if (res.code === 0) {
imageUrl{{$column.GoField}}.value = URL.createObjectURL(file.raw!) imageUrl{{$column.GoField}}.value = URL.createObjectURL(file.raw!)
state.formData.{{$column.HtmlField}} = res.data.path state.formData.{{$column.HtmlField}} = res.data.path
@ -551,79 +542,39 @@ export default defineComponent({
ElMessage.error(res.msg) ElMessage.error(res.msg)
} }
upLoading{{$column.GoField}}.value = false upLoading{{$column.GoField}}.value = false
} }
const beforeAvatarUpload{{$column.GoField}} = () => { const beforeAvatarUpload{{$column.GoField}} = () => {
upLoading{{$column.GoField}}.value = true upLoading{{$column.GoField}}.value = true
return true return true
} }
{{if $setUpData}} {{if $setUpData}}
const setUpData = () => { const setUpData = () => {
return { token: getToken() } return { token: getToken() }
} }
{{$setUpData = false}} {{$setUpData = false}}
{{end}} {{end}}
{{else if eq $column.HtmlType "images"}} {{else if eq $column.HtmlType "images"}}
const setUpImgList{{$column.GoField}} = (data:any)=>{ const setUpImgList{{$column.GoField}} = (data:any)=>{
state.formData.{{$column.HtmlField}} = data state.formData.{{$column.HtmlField}} = data
} }
{{else if eq $column.HtmlType "file" "files"}} {{else if eq $column.HtmlType "file" "files"}}
const setUpFileList{{$column.GoField}} = (data:any)=>{ const setUpFileList{{$column.GoField}} = (data:any)=>{
state.formData.{{$column.HtmlField}} = data state.formData.{{$column.HtmlField}} = data
} }
{{else if eq $column.HtmlType "keyValue"}} {{else if eq $column.HtmlType "keyValue"}}
// 新增{{$column.ColumnComment}}行 // 新增{{$column.ColumnComment}}行
const onAddRow{{$column.GoField}} = () => { const onAddRow{{$column.GoField}} = () => {
state.formData.{{$column.HtmlField}}.push({ state.formData.{{$column.HtmlField}}.push({
key: '', key: '',
value: '', value: '',
}); });
}; };
// 删除{{$column.ColumnComment}}行 // 删除{{$column.ColumnComment}}行
const onDelRow{{$column.GoField}} = (k: number) => { const onDelRow{{$column.GoField}} = (k: number) => {
state.formData.{{$column.HtmlField}}.splice(k, 1); state.formData.{{$column.HtmlField}}.splice(k, 1);
}; };
{{end}} {{end}}
{{end}} {{end}}
{{$setUpDataR:=true}}
return {
proxy,
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
{{range $index, $column := .table.Columns}}
{{if eq $column.HtmlType "richtext"}}
//富文本编辑器{{$column.ColumnComment}}
set{{$column.GoField}}EditContent,
{{else if eq $column.HtmlType "imagefile"}}
//图片上传地址
imageUrl{{$column.GoField}},
//上传加载
upLoading{{$column.GoField}},
handleAvatarSuccess{{$column.GoField}},
beforeAvatarUpload{{$column.GoField}},
{{if $setUpDataR}}
setUpData,
{{$setUpDataR = false}}
{{end}}
{{else if eq $column.HtmlType "images"}}
setUpImgList{{$column.GoField}},
{{else if eq $column.HtmlType "file" "files"}}
setUpFileList{{$column.GoField}},
{{else if eq $column.HtmlType "keyValue"}}
onAddRow{{$column.GoField}},
onDelRow{{$column.GoField}},
{{end}}
{{end}}
{{if or $imgsImp $tokenImp $fileImp}}
baseURL,
{{end}}
...toRefs(state),
};
}
})
</script> </script>
<style scoped> <style scoped>

View File

@ -410,7 +410,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
{{$tokenImp := false}} {{$tokenImp := false}}
{{$imgsImp := false}} {{$imgsImp := false}}
@ -468,68 +468,59 @@ import {downLoadXml} from "/@/utils/zipdownload";
{{if .table.ExcelImp}} {{if .table.ExcelImp}}
import loadExcel from "/@/components/loadExcel/index.vue" import loadExcel from "/@/components/loadExcel/index.vue"
{{end}} {{end}}
export default defineComponent({ defineOptions({ name: "{{.apiVersion|replace "/" "_"|CaseCamelLower}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}List"})
name: "{{.apiVersion|replace "/" "_"|CaseCamelLower}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}List", const {proxy} = <any>getCurrentInstance()
components:{ const loading = ref(false)
{{if .table.ExcelImp}} const queryRef = ref()
loadExcel, const editRef = ref();
{{end}} const detailRef = ref();
{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit, {{if .table.ExcelImp}}
{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail const loadExcel{{.table.ClassName}}Ref = ref();
}, {{end}}
setup() { // 是否显示所有搜索选项
const {proxy} = <any>getCurrentInstance() const showAll = ref(false)
const loading = ref(false) // 非单个禁用
const queryRef = ref() const single = ref(true)
const editRef = ref(); // 非多个禁用
const detailRef = ref(); const multiple =ref(true)
{{if .table.ExcelImp}} const word = computed(()=>{
const loadExcel{{.table.ClassName}}Ref = ref();
{{end}}
// 是否显示所有搜索选项
const showAll = ref(false)
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple =ref(true)
const word = computed(()=>{
if(showAll.value === false) { if(showAll.value === false) {
//对文字进行处理 //对文字进行处理
return "展开搜索"; return "展开搜索";
} else { } else {
return "收起搜索"; return "收起搜索";
} }
}) })
// 字典选项数据 // 字典选项数据
{{$dictArr:=newArray}} {{$dictArr:=newArray}}
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if and (ne $column.DictType "") (ne (inArray $dictArr $column.DictType) true)}} {{if and (ne $column.DictType "") (ne (inArray $dictArr $column.DictType) true)}}
{{$dictArr = append $dictArr $column.DictType}} {{$dictArr = append $dictArr $column.DictType}}
{{end}} {{end}}
{{end}} {{end}}
const { const {
{{range $index, $column := $dictArr}} {{range $index, $column := $dictArr}}
{{$column}}, {{$column}},
{{end}} {{end}}
} = proxy.useDict( } = proxy.useDict(
{{range $index, $column := $dictArr}} {{range $index, $column := $dictArr}}
'{{$column}}', '{{$column}}',
{{end}} {{end}}
) )
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}} {{if ne $column.LinkTableName ""}}
{{if $column.IsCascade }} {{if $column.IsCascade }}
// {{$column.HtmlField}}QueryOptions关联表数据 // {{$column.HtmlField}}QueryOptions关联表数据
const {{$column.HtmlField}}QueryOptions = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}QueryOptions = ref<Array<ItemOptions>>([])
// {{$column.HtmlField}}FormOptions关联表数据 // {{$column.HtmlField}}FormOptions关联表数据
const {{$column.HtmlField}}FormOptions = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}FormOptions = ref<Array<ItemOptions>>([])
{{else}} {{else}}
// {{$column.HtmlField}}Options关联表数据 // {{$column.HtmlField}}Options关联表数据
const {{$column.HtmlField}}Options = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}Options = ref<Array<ItemOptions>>([])
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
const state = reactive<{{.table.ClassName}}TableDataState>({ const state = reactive<{{.table.ClassName}}TableDataState>({
{{.table.PkColumn.HtmlField}}s:[], {{.table.PkColumn.HtmlField}}s:[],
tableData: { tableData: {
data: [], data: [],
@ -547,20 +538,21 @@ export default defineComponent({
dateRange: [] dateRange: []
}, },
}, },
}); });
// 页面加载时 const { tableData } = toRefs(state);
onMounted(() => { // 页面加载时
onMounted(() => {
initTableData(); initTableData();
}); });
// 初始化表格数据 // 初始化表格数据
const initTableData = () => { const initTableData = () => {
{{if gt (len .table.LinkedTables) 0}} {{if gt (len .table.LinkedTables) 0}}
linkedData() linkedData()
{{end}} {{end}}
{{$businessName}}List() {{$businessName}}List()
}; };
{{if gt (len .table.LinkedTables) 0}} {{if gt (len .table.LinkedTables) 0}}
const linkedData = ()=>{ const linkedData = ()=>{
linkedDataSearch().then((res:any)=>{ linkedDataSearch().then((res:any)=>{
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}} {{if ne $column.LinkTableName ""}}
@ -577,16 +569,16 @@ export default defineComponent({
{{end}} {{end}}
{{end}} {{end}}
}) })
} }
{{end}} {{end}}
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => { const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
formEl.resetFields() formEl.resetFields()
{{$businessName}}List() {{$businessName}}List()
}; };
// 获取列表数据 // 获取列表数据
const {{$businessName}}List = ()=>{ const {{$businessName}}List = ()=>{
loading.value = true loading.value = true
list{{.table.ClassName}}(state.tableData.param).then((res:any)=>{ list{{.table.ClassName}}(state.tableData.param).then((res:any)=>{
let list = res.data.list??[]; let list = res.data.list??[];
@ -609,48 +601,48 @@ export default defineComponent({
state.tableData.total = res.data.total; state.tableData.total = res.data.total;
loading.value = false loading.value = false
}) })
}; };
const toggleSearch = () => { const toggleSearch = () => {
showAll.value = !showAll.value; showAll.value = !showAll.value;
} }
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}} {{if ne $column.DictType ""}}
{{if eq $column.HtmlType "checkbox"}} {{if eq $column.HtmlType "checkbox"}}
// {{$column.ColumnComment}}字典翻译 // {{$column.ColumnComment}}字典翻译
const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => { const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => {
let {{$column.HtmlField}} = row.{{$column.HtmlField}}.split(",") let {{$column.HtmlField}} = row.{{$column.HtmlField}}.split(",")
let data:Array<string> = []; let data:Array<string> = [];
{{$column.HtmlField}}.map(item=>{ {{$column.HtmlField}}.map(item=>{
data.push(proxy.selectDictLabel({{$column.DictType}}.value, item)) data.push(proxy.selectDictLabel({{$column.DictType}}.value, item))
}) })
return data.join(",") return data.join(",")
} }
{{else}} {{else}}
// {{$column.ColumnComment}}字典翻译 // {{$column.ColumnComment}}字典翻译
const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => { const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => {
return proxy.selectDictLabel({{$column.DictType}}.value, row.{{$column.HtmlField}}); return proxy.selectDictLabel({{$column.DictType}}.value, row.{{$column.HtmlField}});
} }
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
// 多选框选中数据 // 多选框选中数据
const handleSelectionChange = (selection:Array<{{.table.ClassName}}InfoData>) => { const handleSelectionChange = (selection:Array<{{.table.ClassName}}InfoData>) => {
state.{{.table.PkColumn.HtmlField}}s = selection.map(item => item.{{.table.PkColumn.HtmlField}}) state.{{.table.PkColumn.HtmlField}}s = selection.map(item => item.{{.table.PkColumn.HtmlField}})
single.value = selection.length!=1 single.value = selection.length!=1
multiple.value = !selection.length multiple.value = !selection.length
} }
const handleAdd = ()=>{ const handleAdd = ()=>{
editRef.value.openDialog() editRef.value.openDialog()
} }
const handleUpdate = (row: {{$.table.ClassName}}TableColumns) => { const handleUpdate = (row: {{$.table.ClassName}}TableColumns|null) => {
if(!row){ if(!row){
row = state.tableData.data.find((item:{{$.table.ClassName}}TableColumns)=>{ row = state.tableData.data.find((item:{{$.table.ClassName}}TableColumns)=>{
return item.{{.table.PkColumn.HtmlField}} ===state.{{.table.PkColumn.HtmlField}}s[0] return item.{{.table.PkColumn.HtmlField}} ===state.{{.table.PkColumn.HtmlField}}s[0]
}) as {{$.table.ClassName}}TableColumns }) as {{$.table.ClassName}}TableColumns
} }
editRef.value.openDialog(toRaw(row)); editRef.value.openDialog(toRaw(row));
}; };
const handleDelete = (row: {{$.table.ClassName}}TableColumns) => { const handleDelete = (row: {{$.table.ClassName}}TableColumns|null) => {
let msg = '你确定要删除所选数据?'; let msg = '你确定要删除所选数据?';
let {{.table.PkColumn.HtmlField}}:number[] = [] ; let {{.table.PkColumn.HtmlField}}:number[] = [] ;
if(row){ if(row){
@ -675,66 +667,21 @@ export default defineComponent({
}) })
}) })
.catch(() => {}); .catch(() => {});
} }
const handleView = (row:{{$.table.ClassName}}TableColumns)=>{ const handleView = (row:{{$.table.ClassName}}TableColumns)=>{
detailRef.value.openDialog(toRaw(row)); detailRef.value.openDialog(toRaw(row));
} }
{{if .table.ExcelPort }} {{if .table.ExcelPort }}
//导出excel //导出excel
const handleExport = ()=>{ const handleExport = ()=>{
downLoadXml('/{{.apiVersion}}/{{.modulePath}}/{{$businessName}}/export',state.tableData.param,'get') downLoadXml('/{{.apiVersion}}/{{.modulePath}}/{{$businessName}}/export',state.tableData.param,'get')
} }
{{end}} {{end}}
{{if .table.ExcelImp}} {{if .table.ExcelImp}}
const handleImport=()=>{ const handleImport=()=>{
loadExcel{{$.table.ClassName}}Ref.value.open() loadExcel{{$.table.ClassName}}Ref.value.open()
} }
{{end}} {{end}}
return {
proxy,
editRef,
detailRef,
showAll,
loading,
single,
multiple,
word,
queryRef,
resetQuery,
{{$businessName}}List,
toggleSearch,
{{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}}
{{$column.HtmlField}}Format,
{{$column.DictType}},
{{end}}
{{if ne $column.LinkTableName ""}}
{{if $column.IsCascade}}
//级联关联{{$column.LinkTableName}}表选项
{{else}}
//关联表数据选项
{{$column.HtmlField}}Options,
{{end}}
{{end}}
{{end}}
handleSelectionChange,
handleAdd,
handleUpdate,
handleDelete,
{{if eq .table.ShowDetail "true"}}
handleView,
{{end}}
{{if .table.ExcelPort }}
handleExport,
{{end}}
{{if .table.ExcelImp }}
handleImport,
loadExcel{{.table.ClassName}}Ref,
{{end}}
...toRefs(state),
}
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.colBlock { .colBlock {

View File

@ -285,7 +285,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
{{$tokenImp := false}} {{$tokenImp := false}}
{{$imgsImp := false}} {{$imgsImp := false}}
@ -339,63 +339,57 @@ import {
import {{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/edit.vue" import {{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/edit.vue"
import {{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/detail.vue" import {{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/detail.vue"
import _ from 'lodash' import _ from 'lodash'
export default defineComponent({ defineOptions({ name: "{{.apiVersion|replace "/" "_"|CaseCamelLower}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}List"})
name: "{{.apiVersion|replace "/" "_"|CaseCamelLower}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}List", const {proxy} = <any>getCurrentInstance()
components:{ const loading = ref(false)
{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit, const queryRef = ref()
{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail const editRef = ref();
}, const detailRef = ref();
setup() { // 是否显示所有搜索选项
const {proxy} = <any>getCurrentInstance() const showAll = ref(false)
const loading = ref(false) // 非单个禁用
const queryRef = ref() const single = ref(true)
const editRef = ref(); // 非多个禁用
const detailRef = ref(); const multiple =ref(true)
// 是否显示所有搜索选项 const word = computed(()=>{
const showAll = ref(false)
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple =ref(true)
const word = computed(()=>{
if(showAll.value === false) { if(showAll.value === false) {
//对文字进行处理 //对文字进行处理
return "展开搜索"; return "展开搜索";
} else { } else {
return "收起搜索"; return "收起搜索";
} }
}) })
// 字典选项数据 // 字典选项数据
{{$dictArr:=newArray}} {{$dictArr:=newArray}}
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if and (ne $column.DictType "") (ne (inArray $dictArr $column.DictType) true)}} {{if and (ne $column.DictType "") (ne (inArray $dictArr $column.DictType) true)}}
{{$dictArr = append $dictArr $column.DictType}} {{$dictArr = append $dictArr $column.DictType}}
{{end}} {{end}}
{{end}} {{end}}
const { const {
{{range $index, $column := $dictArr}} {{range $index, $column := $dictArr}}
{{$column}}, {{$column}},
{{end}} {{end}}
} = proxy.useDict( } = proxy.useDict(
{{range $index, $column := $dictArr}} {{range $index, $column := $dictArr}}
'{{$column}}', '{{$column}}',
{{end}} {{end}}
) )
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}} {{if ne $column.LinkTableName ""}}
{{if $column.IsCascade }} {{if $column.IsCascade }}
// {{$column.HtmlField}}QueryOptions关联表数据 // {{$column.HtmlField}}QueryOptions关联表数据
const {{$column.HtmlField}}QueryOptions = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}QueryOptions = ref<Array<ItemOptions>>([])
// {{$column.HtmlField}}FormOptions关联表数据 // {{$column.HtmlField}}FormOptions关联表数据
const {{$column.HtmlField}}FormOptions = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}FormOptions = ref<Array<ItemOptions>>([])
{{else}} {{else}}
// {{$column.HtmlField}}Options关联表数据 // {{$column.HtmlField}}Options关联表数据
const {{$column.HtmlField}}Options = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}Options = ref<Array<ItemOptions>>([])
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
const dataList = ref<Array<{{$.table.ClassName}}TableColumns>>([]) const dataList = ref<Array<{{$.table.ClassName}}TableColumns>>([])
const state = reactive<{{.table.ClassName}}TableDataState>({ const state = reactive<{{.table.ClassName}}TableDataState>({
{{.table.PkColumn.HtmlField}}s:[], {{.table.PkColumn.HtmlField}}s:[],
tableData: { tableData: {
data: [], data: [],
@ -413,20 +407,21 @@ export default defineComponent({
dateRange: [] dateRange: []
}, },
}, },
}); });
// 页面加载时 const { tableData } = toRefs(state);
onMounted(() => { // 页面加载时
onMounted(() => {
initTableData(); initTableData();
}); });
// 初始化表格数据 // 初始化表格数据
const initTableData = () => { const initTableData = () => {
{{if gt (len .table.LinkedTables) 0}} {{if gt (len .table.LinkedTables) 0}}
linkedData() linkedData()
{{end}} {{end}}
{{$businessName}}List() {{$businessName}}List()
}; };
{{if gt (len .table.LinkedTables) 0}} {{if gt (len .table.LinkedTables) 0}}
const linkedData = ()=>{ const linkedData = ()=>{
linkedDataSearch().then((res:any)=>{ linkedDataSearch().then((res:any)=>{
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}} {{if ne $column.LinkTableName ""}}
@ -443,16 +438,16 @@ export default defineComponent({
{{end}} {{end}}
{{end}} {{end}}
}) })
} }
{{end}} {{end}}
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => { const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
formEl.resetFields() formEl.resetFields()
{{$businessName}}List() {{$businessName}}List()
}; };
// 获取列表数据 // 获取列表数据
const {{$businessName}}List = ()=>{ const {{$businessName}}List = ()=>{
loading.value = true loading.value = true
list{{.table.ClassName}}(state.tableData.param).then((res:any)=>{ list{{.table.ClassName}}(state.tableData.param).then((res:any)=>{
let list = res.data.list??[]; let list = res.data.list??[];
@ -482,50 +477,50 @@ export default defineComponent({
loading.value = false loading.value = false
setVrData(list) setVrData(list)
}) })
}; };
const toggleSearch = () => { const toggleSearch = () => {
showAll.value = !showAll.value; showAll.value = !showAll.value;
} }
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}} {{if ne $column.DictType ""}}
{{if eq $column.HtmlType "checkbox"}} {{if eq $column.HtmlType "checkbox"}}
// {{$column.ColumnComment}}字典翻译 // {{$column.ColumnComment}}字典翻译
const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => { const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => {
let {{$column.HtmlField}} = row.{{$column.HtmlField}}.split(",") let {{$column.HtmlField}} = row.{{$column.HtmlField}}.split(",")
let data:Array<string> = []; let data:Array<string> = [];
{{$column.HtmlField}}.map(item=>{ {{$column.HtmlField}}.map(item=>{
data.push(proxy.selectDictLabel({{$column.DictType}}.value, item)) data.push(proxy.selectDictLabel({{$column.DictType}}.value, item))
}) })
return data.join(",") return data.join(",")
} }
{{else}} {{else}}
// {{$column.ColumnComment}}字典翻译 // {{$column.ColumnComment}}字典翻译
const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => { const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => {
return proxy.selectDictLabel({{$column.DictType}}.value, row.{{$column.HtmlField}}); return proxy.selectDictLabel({{$column.DictType}}.value, row.{{$column.HtmlField}});
} }
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
// 多选框选中数据 // 多选框选中数据
const handleSelectionChange = (selection:Array<{{.table.ClassName}}InfoData>) => { const handleSelectionChange = (selection:Array<{{.table.ClassName}}InfoData>) => {
state.{{.table.PkColumn.HtmlField}}s = selection.map(item => item.{{.table.PkColumn.HtmlField}}) state.{{.table.PkColumn.HtmlField}}s = selection.map(item => item.{{.table.PkColumn.HtmlField}})
single.value = selection.length!=1 single.value = selection.length!=1
multiple.value = !selection.length multiple.value = !selection.length
} }
const handleAdd = ()=>{ const handleAdd = ()=>{
editRef.value.openDialog() editRef.value.openDialog()
} }
const handleUpdate = (row: {{$.table.ClassName}}TableColumns) => { const handleUpdate = (row: {{$.table.ClassName}}TableColumns|null) => {
if(!row){ if(!row){
row = dataList.value.find((item:{{$.table.ClassName}}TableColumns)=>{ row = dataList.value.find((item:{{$.table.ClassName}}TableColumns)=>{
return item.{{.table.PkColumn.HtmlField}} ===state.{{.table.PkColumn.HtmlField}}s[0] return item.{{.table.PkColumn.HtmlField}} ===state.{{.table.PkColumn.HtmlField}}s[0]
}) as {{$.table.ClassName}}TableColumns }) as {{$.table.ClassName}}TableColumns
} }
editRef.value.openDialog(toRaw(row)); editRef.value.openDialog(toRaw(row));
}; };
const handleDelete = (row: {{$.table.ClassName}}TableColumns) => { const handleDelete = (row: {{$.table.ClassName}}TableColumns|null) => {
let msg = '你确定要删除所选数据?'; let msg = '你确定要删除所选数据?';
let {{.table.PkColumn.HtmlField}}:number[] = [] ; let {{.table.PkColumn.HtmlField}}:{{.table.PkColumn.TsType}}[] = [] ;
if(row){ if(row){
msg = `此操作将永久删除数据,是否继续?` msg = `此操作将永久删除数据,是否继续?`
{{.table.PkColumn.HtmlField}} = [row.{{.table.PkColumn.HtmlField}}] {{.table.PkColumn.HtmlField}} = [row.{{.table.PkColumn.HtmlField}}]
@ -548,28 +543,28 @@ export default defineComponent({
}) })
}) })
.catch(() => {}); .catch(() => {});
} }
const handleView = (row:{{$.table.ClassName}}TableColumns)=>{ const handleView = (row:{{$.table.ClassName}}TableColumns)=>{
detailRef.value.openDialog(toRaw(row)); detailRef.value.openDialog(toRaw(row));
} }
//======================================================================================================== //========================================================================================================
const columns = ref<Column[]>([]) const columns = ref<Column[]>([])
const treeData = ref<any[]>([]) const treeData = ref<any[]>([])
type SelectionCellProps = { type SelectionCellProps = {
value: boolean value: boolean
intermediate?: boolean intermediate?: boolean
onChange: (value: CheckboxValueType) => void onChange: (value: CheckboxValueType) => void
} }
const SelectionCell: FunctionalComponent<SelectionCellProps> = ({ const SelectionCell: FunctionalComponent<SelectionCellProps> = ({
value, value,
intermediate = false, intermediate = false,
onChange, onChange,
}) => { }) => {
return h(ElCheckbox,{modelValue:value,indeterminate:intermediate,onChange:onChange}) return h(ElCheckbox,{modelValue:value,indeterminate:intermediate,onChange:onChange})
} }
const setVrData = (list:{{$.table.ClassName}}TableColumns[])=>{ const setVrData = (list:{{$.table.ClassName}}TableColumns[])=>{
const _columns:any[] = [ const _columns:any[] = [
{key: 'selection',dataKey: '{{.table.PkColumn.HtmlField}}',title: ``,width:80, {key: 'selection',dataKey: '{{.table.PkColumn.HtmlField}}',title: ``,width:80,
{{if .table.PkColumn.IsFixed}}fixed: TableV2FixedDir.LEFT,{{end}} {{if .table.PkColumn.IsFixed}}fixed: TableV2FixedDir.LEFT,{{end}}
@ -723,67 +718,21 @@ export default defineComponent({
}) })
columns.value = _columns columns.value = _columns
treeData.value = list treeData.value = list
} }
//============================================================================================================= //=============================================================================================================
const expandColumnKey = '{{$firstColumn.HtmlField}}' const expandColumnKey = '{{$firstColumn.HtmlField}}'
const expandedRowKeys = ref<string[]>([]) const expandedRowKeys = ref<string[]>([])
const onRowExpanded = (exp: Parameters<RowExpandHandler<any>>[0]) => { const onRowExpanded = (exp: Parameters<RowExpandHandler<any>>[0]) => {
console.log('Expanded:', exp) console.log('Expanded:', exp)
} }
const onExpandedRowsChange = ( const onExpandedRowsChange = (
expandedKeys: Parameters<ExpandedRowsChangeHandler>[0] expandedKeys: Parameters<ExpandedRowsChangeHandler>[0]
) => { ) => {
console.log('expandedKeys:',expandedKeys) console.log('expandedKeys:',expandedKeys)
} }
return {
proxy,
editRef,
detailRef,
showAll,
loading,
single,
multiple,
word,
queryRef,
resetQuery,
{{$businessName}}List,
toggleSearch,
{{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}}
{{$column.HtmlField}}Format,
{{$column.DictType}},
{{end}}
{{if ne $column.LinkTableName ""}}
{{if $column.IsCascade}}
//级联关联{{$column.LinkTableName}}表选项
{{else}}
//关联表数据选项
{{$column.HtmlField}}Options,
//关联{{$column.LinkTableName}}表选项获取数据方法
{{end}}
{{end}}
{{end}}
handleSelectionChange,
handleAdd,
handleUpdate,
handleDelete,
{{if eq .table.ShowDetail "true"}}
handleView,
{{end}}
columns,
treeData,
expandedRowKeys,
onRowExpanded,
expandColumnKey,
onExpandedRowsChange,
...toRefs(state),
}
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.colBlock { .colBlock {

View File

@ -393,7 +393,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
{{$tokenImp := false}} {{$tokenImp := false}}
{{$imgsImp := false}} {{$imgsImp := false}}
@ -446,63 +446,57 @@ import {
import {{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/edit.vue" import {{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/edit.vue"
import {{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/detail.vue" import {{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/detail.vue"
import _ from 'lodash' import _ from 'lodash'
export default defineComponent({ defineOptions({ name: "{{.apiVersion|replace "/" "_"|CaseCamelLower}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}List"})
name: "{{.apiVersion|replace "/" "_"|CaseCamelLower}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}List", const {proxy} = <any>getCurrentInstance()
components:{ const loading = ref(false)
{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Edit, const queryRef = ref()
{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail const editRef = ref();
}, const detailRef = ref();
setup() { // 是否显示所有搜索选项
const {proxy} = <any>getCurrentInstance() const showAll = ref(false)
const loading = ref(false) // 非单个禁用
const queryRef = ref() const single = ref(true)
const editRef = ref(); // 非多个禁用
const detailRef = ref(); const multiple =ref(true)
// 是否显示所有搜索选项 const word = computed(()=>{
const showAll = ref(false)
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple =ref(true)
const word = computed(()=>{
if(showAll.value === false) { if(showAll.value === false) {
//对文字进行处理 //对文字进行处理
return "展开搜索"; return "展开搜索";
} else { } else {
return "收起搜索"; return "收起搜索";
} }
}) })
// 字典选项数据 // 字典选项数据
{{$dictArr:=newArray}} {{$dictArr:=newArray}}
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if and (ne $column.DictType "") (ne (inArray $dictArr $column.DictType) true)}} {{if and (ne $column.DictType "") (ne (inArray $dictArr $column.DictType) true)}}
{{$dictArr = append $dictArr $column.DictType}} {{$dictArr = append $dictArr $column.DictType}}
{{end}} {{end}}
{{end}} {{end}}
const { const {
{{range $index, $column := $dictArr}} {{range $index, $column := $dictArr}}
{{$column}}, {{$column}},
{{end}} {{end}}
} = proxy.useDict( } = proxy.useDict(
{{range $index, $column := $dictArr}} {{range $index, $column := $dictArr}}
'{{$column}}', '{{$column}}',
{{end}} {{end}}
) )
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}} {{if ne $column.LinkTableName ""}}
{{if $column.IsCascade }} {{if $column.IsCascade }}
// {{$column.HtmlField}}QueryOptions关联表数据 // {{$column.HtmlField}}QueryOptions关联表数据
const {{$column.HtmlField}}QueryOptions = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}QueryOptions = ref<Array<ItemOptions>>([])
// {{$column.HtmlField}}FormOptions关联表数据 // {{$column.HtmlField}}FormOptions关联表数据
const {{$column.HtmlField}}FormOptions = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}FormOptions = ref<Array<ItemOptions>>([])
{{else}} {{else}}
// {{$column.HtmlField}}Options关联表数据 // {{$column.HtmlField}}Options关联表数据
const {{$column.HtmlField}}Options = ref<Array<ItemOptions>>([]) const {{$column.HtmlField}}Options = ref<Array<ItemOptions>>([])
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
const dataList = ref<Array<{{$.table.ClassName}}TableColumns>>([]) const dataList = ref<Array<{{$.table.ClassName}}TableColumns>>([])
const state = reactive<{{.table.ClassName}}TableDataState>({ const state = reactive<{{.table.ClassName}}TableDataState>({
{{.table.PkColumn.HtmlField}}s:[], {{.table.PkColumn.HtmlField}}s:[],
tableData: { tableData: {
data: [], data: [],
@ -520,20 +514,21 @@ export default defineComponent({
dateRange: [] dateRange: []
}, },
}, },
}); });
// 页面加载时 const { tableData } = toRefs(state);
onMounted(() => { // 页面加载时
onMounted(() => {
initTableData(); initTableData();
}); });
// 初始化表格数据 // 初始化表格数据
const initTableData = () => { const initTableData = () => {
{{if gt (len .table.LinkedTables) 0}} {{if gt (len .table.LinkedTables) 0}}
linkedData() linkedData()
{{end}} {{end}}
{{$businessName}}List() {{$businessName}}List()
}; };
{{if gt (len .table.LinkedTables) 0}} {{if gt (len .table.LinkedTables) 0}}
const linkedData = ()=>{ const linkedData = ()=>{
linkedDataSearch().then((res:any)=>{ linkedDataSearch().then((res:any)=>{
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}} {{if ne $column.LinkTableName ""}}
@ -550,16 +545,16 @@ export default defineComponent({
{{end}} {{end}}
{{end}} {{end}}
}) })
} }
{{end}} {{end}}
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => { const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
formEl.resetFields() formEl.resetFields()
{{$businessName}}List() {{$businessName}}List()
}; };
// 获取列表数据 // 获取列表数据
const {{$businessName}}List = ()=>{ const {{$businessName}}List = ()=>{
loading.value = true loading.value = true
list{{.table.ClassName}}(state.tableData.param).then((res:any)=>{ list{{.table.ClassName}}(state.tableData.param).then((res:any)=>{
let list = res.data.list??[]; let list = res.data.list??[];
@ -583,48 +578,48 @@ export default defineComponent({
state.tableData.data = list; state.tableData.data = list;
loading.value = false loading.value = false
}) })
}; };
const toggleSearch = () => { const toggleSearch = () => {
showAll.value = !showAll.value; showAll.value = !showAll.value;
} }
{{range $index, $column := .table.Columns}} {{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}} {{if ne $column.DictType ""}}
{{if eq $column.HtmlType "checkbox"}} {{if eq $column.HtmlType "checkbox"}}
// {{$column.ColumnComment}}字典翻译 // {{$column.ColumnComment}}字典翻译
const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => { const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => {
let {{$column.HtmlField}} = row.{{$column.HtmlField}}.split(",") let {{$column.HtmlField}} = row.{{$column.HtmlField}}.split(",")
let data:Array<string> = []; let data:Array<string> = [];
{{$column.HtmlField}}.map(item=>{ {{$column.HtmlField}}.map(item=>{
data.push(proxy.selectDictLabel({{$column.DictType}}.value, item)) data.push(proxy.selectDictLabel({{$column.DictType}}.value, item))
}) })
return data.join(",") return data.join(",")
} }
{{else}} {{else}}
// {{$column.ColumnComment}}字典翻译 // {{$column.ColumnComment}}字典翻译
const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => { const {{$column.HtmlField}}Format = (row:{{$.table.ClassName}}TableColumns) => {
return proxy.selectDictLabel({{$column.DictType}}.value, row.{{$column.HtmlField}}); return proxy.selectDictLabel({{$column.DictType}}.value, row.{{$column.HtmlField}});
} }
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
// 多选框选中数据 // 多选框选中数据
const handleSelectionChange = (selection:Array<{{.table.ClassName}}InfoData>) => { const handleSelectionChange = (selection:Array<{{.table.ClassName}}InfoData>) => {
state.{{.table.PkColumn.HtmlField}}s = selection.map(item => item.{{.table.PkColumn.HtmlField}}) state.{{.table.PkColumn.HtmlField}}s = selection.map(item => item.{{.table.PkColumn.HtmlField}})
single.value = selection.length!=1 single.value = selection.length!=1
multiple.value = !selection.length multiple.value = !selection.length
} }
const handleAdd = ()=>{ const handleAdd = ()=>{
editRef.value.openDialog() editRef.value.openDialog()
} }
const handleUpdate = (row: {{$.table.ClassName}}TableColumns) => { const handleUpdate = (row: {{$.table.ClassName}}TableColumns) => {
if(!row){ if(!row){
row = dataList.value.find((item:{{$.table.ClassName}}TableColumns)=>{ row = dataList.value.find((item:{{$.table.ClassName}}TableColumns)=>{
return item.{{.table.PkColumn.HtmlField}} ===state.{{.table.PkColumn.HtmlField}}s[0] return item.{{.table.PkColumn.HtmlField}} ===state.{{.table.PkColumn.HtmlField}}s[0]
}) as {{$.table.ClassName}}TableColumns }) as {{$.table.ClassName}}TableColumns
} }
editRef.value.openDialog(toRaw(row)); editRef.value.openDialog(toRaw(row));
}; };
const handleDelete = (row: {{$.table.ClassName}}TableColumns) => { const handleDelete = (row: {{$.table.ClassName}}TableColumns) => {
let msg = '你确定要删除所选数据?'; let msg = '你确定要删除所选数据?';
let {{.table.PkColumn.HtmlField}}:number[] = [] ; let {{.table.PkColumn.HtmlField}}:number[] = [] ;
if(row){ if(row){
@ -649,49 +644,10 @@ export default defineComponent({
}) })
}) })
.catch(() => {}); .catch(() => {});
} }
const handleView = (row:{{$.table.ClassName}}TableColumns)=>{ const handleView = (row:{{$.table.ClassName}}TableColumns)=>{
detailRef.value.openDialog(toRaw(row)); detailRef.value.openDialog(toRaw(row));
} }
return {
proxy,
editRef,
detailRef,
showAll,
loading,
single,
multiple,
word,
queryRef,
resetQuery,
{{$businessName}}List,
toggleSearch,
{{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}}
{{$column.HtmlField}}Format,
{{$column.DictType}},
{{end}}
{{if ne $column.LinkTableName ""}}
{{if $column.IsCascade}}
//级联关联{{$column.LinkTableName}}表选项
{{else}}
//关联表数据选项
{{$column.HtmlField}}Options,
//关联{{$column.LinkTableName}}表选项获取数据方法
{{end}}
{{end}}
{{end}}
handleSelectionChange,
handleAdd,
handleUpdate,
handleDelete,
{{if eq .table.ShowDetail "true"}}
handleView,
{{end}}
...toRefs(state),
}
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.colBlock { .colBlock {