IOT/SERVER/IotAdmin/template/v4/vue-view.go.template

{{$tableComment:=.TableComment}}
<script setup lang="ts" name="{{.BBusinessName}}">
import apis from "@a"
import message from "@@/utils/message"
import dayjs from "dayjs"

{{ range .Columns -}}
    {{- if ne .FkTableName "" }}
const {{.JsonField}}Options = ref<any[]>([])
    {{- else if  (ne .DictType "")  }}
    {{- else if or (eq .HtmlType "select") (eq .HtmlType "radio") (eq .HtmlType "checkbox")  }}
const {{.JsonField}}Options = computed(() => {
    return [
        { label: "请选择", value: "" },
        { label: "", value: "" }
    ]
})
    {{- end -}}
{{- end }}

const tableRef = ref()
const modalRef = ref()
const opts = reactive<any>({
    columns: [
        {{- range .Columns -}}
            {{$sort := eq .IsSort "1"}}
            {{- if (eq .IsPk "1") }}
        { field: "{{.JsonField}}", name: "{{.ColumnComment}}", width: 100, visible: false, isSort: {{ $sort }}, tooltip: true},
            {{- else if (eq .IsList "1") }}
                {{- if ne .DictType ""}}
        { field: "{{.JsonField}}", name: "{{.ColumnComment}}", width: 100, isSort: {{ $sort }}, visible: true},
                {{- else if eq .HtmlType "datetime"}}
        { field: "{{.JsonField}}", name: "{{.ColumnComment}}", width: 185, isSort: {{ $sort }}, visible: true},
                {{- else  }}
        { field: "{{.JsonField}}", name: "{{.ColumnComment}}", width: "auto", isSort: {{ $sort }}, visible: true},
                {{- end -}}
            {{- else if (eq .JsonField "createdAt") }}
        { field: "{{.JsonField}}", name: "{{.ColumnComment}}", width: 185, isSort: true, visible: true},
            {{- end -}}
        {{- end }}
        { field: "actions", name: `操作`, width: 150 }
    ],
    queryParams: {
        {{- range .Columns -}}
        {{-  if (eq .GoField "CreatedAt") }}
        dateRange:[]
        {{- else if (eq .IsQuery "1") }}
        {{-  if eq .HtmlType "datetime"}}
        dateRange{{.BJsonField}}: [],
            {{- else  }}
        {{.JsonField}}: undefined,
            {{- end -}}
        {{- end -}}
        {{- end }}
    },
    searchFormItems: [
    {{- range .Columns -}}
    {{-  if eq .GoField "CreatedAt"}}
        {
            field: "dateRange",
            label: "{{.ColumnComment}}",
            class: "w-100",
            component: "D",
            placeholder: "请选择{{.ColumnComment }}",
            props: {
                type: "daterange",
                valueFormat: "YYYY-MM-DD",
                rangeSeparator: "-",
                startPlaceholder: "开始日期",
                endPlaceholder: "结束日期"
            },
            listeners: {
                change: (v: any) => {
                    queryParams.value.dateRange = v
                }
            },
        },
    {{- else if (eq .IsQuery "1") -}}
    {{ $required := eq .IsRequired  "1" }}
        {{- if ne .FkTableName ""}}
        {
            field: "{{.JsonField}}",
            label: "{{.ColumnComment}}",
            class: "w-100",
            component: "VS",
            data: () => {{.JsonField}}Options.value,
            props: {
                {{- if eq .HtmlType "radio"}}
                type: "radio",
                {{- else if eq .HtmlType "checkbox"}}
                type: "checkbox",
                {{- else }}
                type: "select",
                {{- end }}
                clearable: true,
                placeholder: "请选择{{.ColumnComment }}",
                props:{
                    label:{{.FkLabelName}},
                    value:{{.FkLabelId}},
                }
            }
        },
        {{- else if ne .DictType ""}}
        {
            field: "{{.JsonField}}",
            label: "{{.ColumnComment}}",
            class: "w-100",
            component: "Dict",
            props: {
                {{-  if eq .HtmlType "radio"}}
                type: "radio",
                {{- else if eq .HtmlType "checkbox"}}
                type: "checkbox",
                {{- else }}
                type: "select",
                clearable: true,
                {{- end }}
                placeholder: "请选择{{.ColumnComment }}",
                dictType: "{{.DictType}}"
                {{- if or (eq .GoType "int") (eq .GoType "int64") }}
                valueIsNumber: true,
                {{- end }}
            }
        },

        {{- else if eq .HtmlType "datetime"}}
        {
            field: "dateRange{{.BJsonField}}",
            label: "{{.ColumnComment}}",
            class: "w-100",
            component: "D",
            placeholder: "请选择{{.ColumnComment }}",
            props: {
                type: "daterange",
                valueFormat: "YYYY-MM-DD",
                rangeSeparator: "-",
                startPlaceholder: "开始日期",
                endPlaceholder: "结束日期"
            },
            listeners: {
                change: (v: any) => {
                    queryParams.value.dateRange{{.BJsonField}} = v
                }
            },
        },
        {{- else if or (eq .HtmlType "select") (eq .HtmlType "radio")  (eq .HtmlType "checkbox") }}
        {
            field: "{{.JsonField}}",
            label: "{{.ColumnComment}}",
            class: "w-100",
            component: "VS",
            placeholder: "请选择{{.ColumnComment }}",
            data: () => {{.JsonField}}Options.value,
            props: {
                type: "{{.HtmlType}}",
                clearable: true,
                {{- if or (eq .GoType "int") (eq .GoType "int64") }}
                valueIsNumber: true,
                {{- end }}
            },
        },
        {{- else }}
        {
            field: "{{.JsonField}}",
            label: "{{.ColumnComment}}",
            class: "w-100",
            component: "I",
            listeners:{
                keyup: (e: any) => {
                    if (e.code == "Enter") {
                        handleQuery()
                    }
                }
            }
        },
        {{- end -}}
    {{- end -}}
    {{- end }}
    ] as any,
    permission: "{{.PackageName}}:{{.BusinessName}}",
    handleFuns: {},
    customBtns: [],
    tableListFun: apis.{{.PackageName}}.{{.BusinessName}}Api.list{{.BBusinessName}},
    getEntityFun: apis.{{.PackageName}}.{{.BusinessName}}Api.get{{.BBusinessName}},
    deleteEntityFun: apis.{{.PackageName}}.{{.BusinessName}}Api.del{{.BBusinessName}},
    formItems:[
    {{- range .Columns -}}
    {{- if (eq .IsInsert "1") -}}
    {{ $required := eq .IsRequired  "1" }}
    {{- if (.Pk) }}
    {{- else if or (eq .GoField "CreatedAt") (eq .GoField "UpdatedAt") (eq .GoField "DeletedAt") (eq .GoField "UpdateBy") (eq .GoField "CreateBy") -}}
    {{- else if ne .FkTableName ""}}
    {
        field: "{{.JsonField}}",
        label: "{{.ColumnComment}}",
        class: "w-100",
        required: {{$required}},
        component: "VS",
        data: () => {{.JsonField}}Options.value,
        props: {
            {{- if eq .HtmlType "radio"}}
            type: "radio",
            {{- else if eq .HtmlType "checkbox"}}
            type: "checkbox",
            {{- else }}
            type: "select",
            {{- end }}
            clearable: true,
            placeholder: "请选择{{.ColumnComment }}",
            props:{
                label:{{.FkLabelName}},
                value:{{.FkLabelId}},
            }
        }
    },
    {{- else if ne .DictType ""}}
    {
        field: "{{.JsonField}}",
        label: "{{.ColumnComment}}",
        class: "w-100",
        required: {{$required}},
        component: "Dict",
        props: {
            {{- if eq .HtmlType "radio"}}
            type: "radio",
            {{- else if eq .HtmlType "checkbox"}}
            type: "checkbox",
            {{- else }}
            type: "select",
            {{- end }}
            clearable: true,
            placeholder: "请选择{{.ColumnComment }}",
            dictType: "{{.DictType}}"
        }
    },
    {{- else if eq .HtmlType "datetime"}}
    {
        field: "{{.JsonField}}",
        label: "{{.ColumnComment}}",
        class: "w-100",
        required: {{$required}},
        component: "D",
        placeholder: "请选择{{.ColumnComment }}",
        props: {
            type: "date",
            valueFormat: "YYYY-MM-DD",
        },
    },
    {{- else if or (eq .HtmlType "select") (eq .HtmlType "radio")  (eq .HtmlType "checkbox") }}
    {
        field: "{{.JsonField}}",
        label: "{{.ColumnComment}}",
        class: "w-100",
        required: {{$required}},
        component: "VS",
        placeholder: "请选择{{.ColumnComment }}",
        data: () => {{.JsonField}}Options.value,
        props: {
            type: "{{.HtmlType}}",
            clearable: true,
            {{- if or (eq .GoType "int") (eq .GoType "int64") }}
            valueIsNumber: true,
            {{- end }}
        },
    },
    {{- else }}
    {
        field: "{{.JsonField}}",
        label: "{{.ColumnComment}}",
        class: "w-100",
        {{- if eq .HtmlType "file"}}
        component: "VU",
        {{- else if eq .HtmlType "textarea"}}
        component: "VE",
        {{- else }}
        component: "I",
        {{- end }}
        {{- if or (eq .GoType "int") (eq .GoType "int64") }}
        type: "number",
        {{- end }}
        required: {{ $required }}
    },
    {{- end -}}
    {{- end -}}
    {{- end }}

] as any,
    resetForm: () => {
        form.value = emptyFormData.value
    },
    emptyFormData: {
    {{- range .Columns -}}
    {{- if (eq .IsPk "1") }}
        {{.JsonField}}: undefined,
    {{- else if or (eq .GoField "CreatedAt") (eq .GoField "UpdatedAt") (eq .GoField "DeletedAt") (eq .GoField "UpdateBy") (eq .GoField "CreateBy") -}}
    {{- else if (eq .IsInsert "1") }}
        {{.JsonField}}: undefined,
    {{- end -}}
    {{- end }}
    }
})
const { queryParams, emptyFormData } = toRefs(opts)
const form = ref<any>(emptyFormData.value)

/** 修改按钮操作 */
function handleUpdate(row: any) {
    tableRef.value.defaultHandleFuns.handleUpdate("", row)
}
/** 删除按钮操作 */
function handleDelete(rows: any[]) {
    tableRef.value.defaultHandleFuns.handleDelete("", rows)
}
/** 提交按钮 */
function submitForm() {
    if (form.value.{{.PkJsonField}} != undefined) {
        apis.{{.PackageName}}.{{.BusinessName}}Api.update{{.BBusinessName}}(form.value).then(() => {
            message.msgSuccess("修改成功")
            handleQuery()
        })
    } else {
        apis.{{.PackageName}}.{{.BusinessName}}Api.add{{.BBusinessName}}(form.value).then(() => {
            message.msgSuccess("新增成功")
            handleQuery()
        })
    }
}
/** 查询按钮 */
function handleQuery() {
    {{- range .Columns -}}
    {{- if ( eq .GoField "CreatedAt")}}
    addDateRange(queryParams.value, queryParams.value.dateRange)
    {{- else if and (eq .IsQuery "1") (eq .HtmlType "datetime")}}
    addDateRange(queryParams.value, queryParams.value.dateRange{{.BJsonField}})
    {{- end -}}
    {{- end }}
    tableRef.value?.search()
}
/** 查询重置按钮 */
function resetQuery() {
    {{- range .Columns -}}
    {{- if ( eq .GoField "CreatedAt")}}
    queryParams.value.dateRange = []
    addDateRange(queryParams.value, queryParams.value.dateRange)
    {{- else if and (eq .IsQuery "1") (eq .HtmlType "datetime")}}
    queryParams.value.dateRange{{.BJsonField}} = []
    addDateRange(queryParams.value, queryParams.value.dateRange{{.BJsonField}})
    {{- end -}}
    {{- end }}
}

function init(){
    {{ range .Columns -}}
    {{- if ne .FkTableName "" -}}
    apis.{{.FkTableNamePackage}}.{{.FkTableNameBusiness}}Api.list{{.BFkTableNameBusiness}}({pageSize:10000,pageIndex:1}).then((res)=>{
        {{.JsonField}}Options.value = res.data.rows
    })
    {{- end -}}
    {{- end }}
}

onMounted(init)

</script>

<template>
    <div class="app-container">
        <VbDataTable
            ref="tableRef"
            :handle-perm="opts.permission"
            :handle-funs="opts.handleFuns"
            :search-form-items="opts.searchFormItems"
            :columns="opts.columns"
            :custom-btns="opts.customBtns"
            :remote-fun="opts.tableListFun"
            :get-entity-fun="opts.getEntityFun"
            :delete-entity-fun="opts.deleteEntityFun"
            {{- range .Columns -}}
                {{-  if (eq .JsonField "createdAt") }}
            sortField="createdAt"
            sort-order="desc"
                {{- end -}}
            {{- end }}
            :modal="modalRef"
            :reset-form-fun="opts.resetForm"
            v-model:form-data="form"
            :query-params="queryParams"
            :check-multiple="true"
            :has-checkbox="true"
            :reset-search-form-fun="resetQuery"
            :custom-search-fun="handleQuery">
            {{ range .Columns -}}
            {{- if (eq .IsList "1") -}}
                {{- if (ne .FkTableName "") -}}
            <template #{{.JsonField}}="{ row }">
                <vb-tag :value="row.{{.JsonField}}" :data="{{.JsonField}}Options"></vb-tag>
            </template>
                {{- else if (ne .DictType "") -}}
            <template #{{.JsonField}}="{ row }">
                    {{- if or (eq .GoType "int") (eq .GoType "int64")}}
                <DictTag valueIsNumber :value="row.{{.JsonField}}" type="{{.DictType}}"></DictTag>
                    {{- else }}
                <DictTag :value="row.{{.JsonField}}" type="{{.DictType}}"></DictTag>
                    {{- end}}
            </template>
                {{- else if (eq .HtmlType "datetime") -}}
            <template #{{.JsonField}}="{ row }">
                <span>{{"{{"}} {{"dayjs"}}(row.{{.JsonField}}).format("YYYY-MM-DD HH:mm:ss") {{"}}"}}</span>
            </template>
                {{- else if  or (eq .HtmlType "select") (eq .HtmlType "radio")  (eq .HtmlType "checkbox") -}}
            <template #{{.JsonField}}="{ row }">
                    {{- if or (eq .GoType "int") (eq .GoType "int64")}}
                <vb-tag valueIsNumber :value="row.{{.JsonField}}" :data="{{.JsonField}}Options"></vb-tag>
                    {{- else }}
                <vb-tag :value="row.{{.JsonField}}" :data="[]"></vb-tag>
                    {{- end}}
            </template>
                {{- end}}
            {{- else if (eq .JsonField "createdAt") }}
            <template #{{.JsonField}}="{ row }">
                <span>{{"{{"}} {{"dayjs"}}(row.{{.JsonField}}).format("YYYY-MM-DD HH:mm:ss") {{"}}"}}</span>
            </template>
            {{- end -}}
            {{- end }}
            <template #actions="{ row }">
                <vb-tooltip content="修改" placement="top">
                    <el-button
                            link
                            type="primary"
                            @click="handleUpdate(row)"
                            v-hasPermission="'{{.PackageName}}:{{.BusinessName}}:edit'">
                        <template #icon>
                            <VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
                        </template>
                    </el-button>
                </vb-tooltip>
                <vb-tooltip content="删除" placement="top">
                    <el-button
                            link
                            type="primary"
                            @click="handleDelete([row])"
                            v-hasPermission="'{{.PackageName}}:{{.BusinessName}}:remove'">
                        <template #icon>
                            <VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
                        </template>
                    </el-button>
                </vb-tooltip>
            </template>
        </VbDataTable>
        <VbModal
            v-model:modal="modalRef"
            :title="opts.modalTitle"
            :form-items="opts.formItems as any"
            :form-data="form"
            @confirm="submitForm"
            append-to-body></VbModal>
    </div>
</template>