#!/bin/python
#coding: utf-8
# +-------------------------------------------------------------------
# | version:1.5
# +-------------------------------------------------------------------
# | django-vue-lyadmin 专业版
# +-------------------------------------------------------------------
# | Author: lybbn
# +-------------------------------------------------------------------
# | QQ: 1042594286
# +-------------------------------------------------------------------
# | EditDate: 2024-05-03
# +-------------------------------------------------------------------

# ------------------------------
# 代码生成-- index.vue 前端页面
# ------------------------------
import json
from django.template import Template,Context
from utils.common import ast_convert

def lyGenerateIndexVue(object,VueIndexName):
    #导出
    canExport = False
    #外键筛选处理
    ForeignKeyList = []
    #表单默认字段
    formData = {}
    column = object['column']
    other_config = object.get('other_config',{})
    #日期范围过滤处理
    date_range_filter_list = []
    #范围输入过滤处理
    input_range_filter_list = []
    input_range_form_type = ['input','number']
    for c in column:
        defaultValue = c.get('default',None)
        field_name = c['field_name']
        foreign_key = c['foreign_key']
        field_type = c['field_type']
        can_export = c.get('can_export',False)
        can_search = c.get('can_search',False)
        form_type = c['form_type']
        if can_search and c['search_type'] == 'range' and form_type in ['time','date']:
            search_data = '%sTimers'%field_name
            search_data_beginAt = '%s_beginAt'%field_name
            search_data_endAt = '%s_endAt'%field_name
            search_data_funcion = '%sTimeChange'%field_name
            search_range_type = form_type
            if form_type == 'date':
                search_format = 'yyyy-MM-dd'
                search_item = f"""<el-date-picker style="width:350px" v-model="{search_data}" type="daterange" @change="{search_data_funcion}" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>"""
            else:
                search_format = 'yyyy-MM-dd hh:mm:ss'
                search_item = f"""<el-date-picker style="width:350px" v-model="{search_data}" type="datetimerange" @change="{search_data_funcion}" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>"""
            d_f_data = {
                'search_data':search_data,
                'search_data_beginAt':search_data_beginAt,
                'search_data_endAt':search_data_endAt,
                'search_item':search_item,
                'search_range_type':search_range_type,
                'search_data_funcion':search_data_funcion,
                'search_format':search_format
            }
            date_range_filter_list.append(d_f_data)
            c['date_range_filter_list'] = d_f_data
        elif can_search and c['search_type'] == 'range' and form_type in input_range_form_type:
            search_data = '%sDatas'%field_name
            search_data_min = '%s_min'%field_name
            search_data_max = '%s_max'%field_name
            search_data_funcion = '%sDatasChange'%field_name
            search_range_type = form_type
            search_item = f"""<ly-input-range v-model="{search_data}" @onchange="{search_data_funcion}"></ly-input-range>"""
            d_f_data = {
                'search_data':search_data,
                'search_data_min':search_data_min,
                'search_data_max':search_data_max,
                'search_item':search_item,
                'search_range_type':search_range_type,
                'search_data_funcion':search_data_funcion,
            }
            input_range_filter_list.append(d_f_data)
            c['input_range_filter_list'] = d_f_data
        
        if can_export:
            canExport = True
        if c['can_edit']:
            #处理数字型默认值的问题
            if field_type in ['SmallIntegerField','PositiveIntegerField','PositiveSmallIntegerField','DecimalField','FloatField','BigIntegerField']:
                if not defaultValue:
                    if defaultValue == 0:
                        pass
                    else:
                        defaultValue = None
        if form_type in ['checkbox'] or field_type in ['ManyToManyField']:
            if not defaultValue:
                defaultValue = []
            else:
                defaultValue = ast_convert(defaultValue)
        formData[field_name] = defaultValue
        if field_type == 'ForeignKey' or field_type == 'ManyToManyField' or field_type == 'OneToOneField':
            f_class_name = foreign_key['class_name']
            f_value = foreign_key['value']
            f_label = foreign_key['label']
            f_api_path = foreign_key['api_path']
            if f_class_name and f_value and f_label and f_api_path:
                const_cl = 'params'
                gname_data = "%sLyAudoCodeAPIList"%field_name
                gname = "%sLyAudoCodeAPI"%field_name
                gname_function = "%sLyAudoCodeAPIFunction"%field_name
                gname_params = '{url: `%s`,%s}'%(f_api_path,const_cl)
                import_data = f"""const {gname} = {const_cl} => ajaxGet({gname_params})"""
                s_data = {
                    'name':gname,
                    'data':gname_data,
                    'import':import_data,
                    'function':gname_function,
                    'value':f_value,
                    'label':f_label
                }
                ForeignKeyList.append(s_data)
                c['ForeignKeyList'] = s_data
    object['column'] = column
    formData = json.dumps(formData)

    apps_code = """<template>
    <div :class="{'ly-is-full':isFull}">
        <div class="tableSelect" ref="tableSelect">
            <el-form :model="formInline">{% for c in object.column %}{% if c.can_search and c.dic_type and c.form_type == 'select' %}
                <el-form-item label="{{c.verbose_name}}：">
                    <el-select v-model="formInline.{{c.field_name}}" clearable filterable placeholder="请选择{{c.verbose_name}}" style="width:180px;" @change="search">
                        <el-option
                            v-for="item in dictStore.data['{{c.dic_type}}']"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>{% elif c.can_search and c.search_type == 'range' and  c.form_type == 'date'%}
                <el-form-item label="{{c.verbose_name}}：">
                    {{c.date_range_filter_list.search_item|safe}}
                </el-form-item>{% elif c.can_search and c.search_type == 'range' and  c.form_type == 'time'%}
                <el-form-item label="{{c.verbose_name}}：">
                    {{c.date_range_filter_list.search_item|safe}}
                </el-form-item>{% elif c.can_search and c.form_type == 'date'%}
                <el-form-item label="{{c.verbose_name}}：">
                    <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="formInline.{{c.field_name}}" type="date" clearable placeholder="请选择" @change="search" style="width:220px"></el-date-picker>
                </el-form-item>{% elif c.can_search and c.form_type == 'time'%}
                <el-form-item label="{{c.verbose_name}}：">
                    <el-date-picker format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" v-model="formInline.{{c.field_name}}" type="datetime" clearable placeholder="请选择" @change="search" style="width:220px"></el-date-picker>
                </el-form-item>{% elif c.can_search and c.search_type == 'range' and c.form_type in input_range_form_type %}
                <el-form-item label="{{c.verbose_name}}：">
                    {{c.input_range_filter_list.search_item|safe}}
                </el-form-item>{% elif c.can_search and c.dic_type %}
                <el-form-item label="{{c.verbose_name}}：">
                    <el-select v-model="formInline.{{c.field_name}}" clearable filterable placeholder="请选择{{c.verbose_name}}" style="width:180px;" @change="search">
                        <el-option
                            v-for="item in dictStore.data['{{c.dic_type}}']"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>{% elif c.can_search %}
                <el-form-item label="{{c.verbose_name}}：">
                    <el-input v-model="formInline.{{c.field_name}}" maxlength="100" clearable placeholder="请输入{{c.verbose_name}}" @change="search" style="width:180px"></el-input>
                </el-form-item>{% endif %}{% endfor %}
                <el-form-item label="创建时间：" v-if="{{other_config.create_datetime_filter|lower}}">
                    <el-date-picker
                        style="width:350px"
                        v-model="timers"
                        type="datetimerange"
                        @change="timeChange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="" v-show="hasPermission(this.$route.name,'Search')"><el-button  @click="search" type="primary" icon="Search">查询</el-button></el-form-item>
                <el-form-item label=""><el-button  @click="handleEdit('','reset')" icon="Refresh">重置</el-button></el-form-item>
                <el-form-item label="" v-show="hasPermission(this.$route.name,'Create')"><el-button type="primary" icon="Plus" @click="handelAdd" >新增</el-button></el-form-item>
                <el-form-item label="" v-if="hasPermission(this.$route.name,'Delete') && {{other_config.mutiple_delete|lower}}"><el-button @click="handleDelete" type="danger" :disabled="multiple" icon="Delete" >删除</el-button></el-form-item>
                <el-form-item label="" v-if="hasPermission(this.$route.name,'Export') && {{canExport|lower}}"><el-button type="primary" @click="exportDataBackend" :disabled="loadingPage" icon="Download">导出</el-button></el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table  :height="tableHeight" border :data="tableData" ref="tableref" v-loading="loadingPage" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="60" align="center"></el-table-column>
                <el-table-column type="index" width="60" align="center" label="序号">
                    <template #default="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>{% for c in object.column %}{% if c.list_display_custom %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}">
                    <template #default="scope">
                        {{c.list_display_custom | safe}}
                    </template>
                </el-table-column>{% elif c.field_type == 'ForeignKey' or c.field_type == 'OneToOneField' or c.field_type == 'ManyToManyField' %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}">
                    <template #default="scope">
                        <span>{% templatetag openvariable %} scope.row.{{c.field_name}}_lyautocode_name {% templatetag closevariable %}</span>
                    </template>
                </el-table-column>{% elif c.form_type == 'picture-single' %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}">
                    <template #default="scope">
                        <el-image preview-teleported :src="scope.row.{{c.field_name}}" style="width: 30px;height:30px" :preview-src-list="[scope.row.{{c.field_name}}]" v-if="scope.row.{{c.field_name}}"></el-image>
                    </template>
                </el-table-column>{% elif c.form_type == 'picture-upload' %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}">
                    <template #default="scope">
                        <el-image v-for="(item,index) in scope.row.{{c.field_name}}.split(',')" v-bind:key="index" preview-teleported :src="item" style="width: 30px;height:30px;margin-right: 5px;" :preview-src-list="[item]" v-if="scope.row.{{c.field_name}}"></el-image>
                    </template>
                </el-table-column>{% elif c.form_type == 'file-upload' %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}">
                    <template #default="scope">
                        <span>{% templatetag openvariable %} !!scope.row.{{c.field_name}}?scope.row.{{c.field_name}}.split(',').length:0 {% templatetag closevariable %}个</span>
                    </template>
                </el-table-column>{% elif c.field_type == 'BooleanField' and c.dic_type %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}">
                    <template #default="scope">
                        <span v-for="(item,index) in dictStore.data['{{c.dic_type}}']">
                            <el-tag  v-if="scope.row.{{c.field_name}} && !!JSON.parse(item.value)"  type="success">{% templatetag openvariable %} item.label {% templatetag closevariable %}</el-tag>
                            <el-tag  v-else-if="!scope.row.{{c.field_name}} && !(!!JSON.parse(item.value))"  type="danger">{% templatetag openvariable %} item.label {% templatetag closevariable %}</el-tag>
                        </span>
                    </template>
                </el-table-column>{% elif c.dic_type and c.form_type == 'checkbox' %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}">
                    <template #default="scope">
                        <span v-for="(item,index) in dictStore.data['{{c.dic_type}}']">
                            <span v-for="(item1,index1) in scope.row.{{c.field_name}}">
                                <span v-if="item1 == item.value">{% templatetag openvariable %} item.label {% templatetag closevariable %}<span v-if="index1<scope.row.{{c.field_name}}.length-1">|</span></span>
                            </span>
                        </span>
                    </template>
                </el-table-column>{% elif c.dic_type %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}">
                    <template #default="scope">
                        <span v-for="(item,index) in dictStore.data['{{c.dic_type}}']">
                            <span  v-if="scope.row.{{c.field_name}} == item.value" >{% templatetag openvariable %} item.label {% templatetag closevariable %}</span>
                        </span>
                    </template>
                </el-table-column>{% else %}
                <el-table-column min-width="{{c.width}}" prop="{{c.field_name}}" label="{{c.verbose_name}}" v-if="{{c.can_list | lower}}"></el-table-column>{% endif %}{% endfor %}
                <el-table-column min-width="150" prop="create_datetime" label="创建时间"></el-table-column>
                <el-table-column label="操作" fixed="right" width="180">
                    <template #header>
                        <div style="display: flex;justify-content: space-between;align-items: center;">
                            <div>操作</div>
                            <div @click="setFull">
                                <el-tooltip content="全屏" placement="bottom">
                                    <el-icon ><full-screen /></el-icon>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                    <template #default="scope">
                        <span class="table-operate-btn" @click="handleEdit(scope.row,'detail')" v-show="hasPermission(this.$route.name,'Retrieve')">详情</span>
                        <span class="table-operate-btn" @click="handleEdit(scope.row,'edit')" v-show="hasPermission(this.$route.name,'Update')">编辑</span>
                        <span class="table-operate-btn" @click="handleEdit(scope.row,'delete')" v-show="hasPermission(this.$route.name,'Delete')">删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <ly-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" :top="dialogTop" :fullscreen="fullscreen" :before-close="handleDialogClose">
            <el-form :model="formData" :rules="rules" ref="rulesForm" :disabled="formDisabled" :label-position="formLabelPosition" :label-width="formLabelWidth">
                <el-row :gutter="20">{% for c in object.column %}
                    <el-col :span="{{c.form_span}}?{{c.form_span}}:24">
                        <el-form-item label="{{c.verbose_name}}" prop="{{c.field_name}}" v-if="{{c.can_edit | lower}}">{% if c.form_type == 'password' %}
                            <el-input v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" clearable show-password style="width: 100%;" placeholder="请输入{{c.verbose_name}}" />{% elif c.form_type == 'textarea' %}
                            <el-input v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" :rows="3" type="textarea" style="width: 100%;" placeholder="请输入{{c.verbose_name}}" />{% elif c.form_type == 'input' %}
                            <el-input v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" style="width: 100%;" placeholder="请输入{{c.verbose_name}}"/>{% elif c.form_type == 'number' %}
                            <el-input-number v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})"  :min="0" :max="999999" style="width: 100%;" />{% elif c.form_type == 'switch' %}
                            <el-switch v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" active-color="#13ce66" inactive-color="#ff4949"></el-switch>{% elif c.field_type == 'ForeignKey' and ForeignKeyList|length > 0 %}
                            <el-select v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" clearable filterable placeholder="请选择{{c.verbose_name}}" style="width: 100%;">
                                <el-option
                                    v-for="item in {{c.ForeignKeyList.data}}"
                                    :key="item.id"
                                    :label="item.{{c.ForeignKeyList.label}}"
                                    :value="item.{{c.ForeignKeyList.value}}" />
                            </el-select>{% elif c.field_type == 'OneToOneField' and ForeignKeyList|length > 0 %}
                            <el-select v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" clearable filterable placeholder="请选择{{c.verbose_name}}" style="width: 100%;">
                                <el-option
                                    v-for="item in {{c.ForeignKeyList.data}}"
                                    :key="item.id"
                                    :label="item.{{c.ForeignKeyList.label}}"
                                    :value="item.{{c.ForeignKeyList.value}}" />
                            </el-select>{% elif c.field_type == 'ManyToManyField' and ForeignKeyList|length > 0 %}
                            <el-select v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" multiple clearable filterable placeholder="请选择{{c.verbose_name}}" style="width: 100%;">
                                <el-option
                                    v-for="item in {{c.ForeignKeyList.data}}"
                                    :key="item.id"
                                    :label="item.{{c.ForeignKeyList.label}}"
                                    :value="item.{{c.ForeignKeyList.value}}" />
                            </el-select>{% elif c.form_type == 'select' %}
                            <el-select v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" clearable filterable placeholder="请选择{{c.verbose_name}}" style="width: 100%;">
                                <el-option
                                    v-for="item in dictStore.data['{{c.dic_type}}']"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="convertStrNum(formData.{{c.field_name}},item.value)" />
                            </el-select>{% elif c.form_type == 'radio' %}
                            <el-radio-group v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})">
                                <el-radio :value="convertStrNum(formData.{{c.field_name}},rditem.value)" v-for="(rditem,rdindex) in dictStore.data['{{c.dic_type}}']">{% templatetag openvariable %} rditem.label {% templatetag closevariable %}</el-radio>
                            </el-radio-group>{% elif c.form_type == 'checkbox' %}
                            <el-checkbox-group v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})">
                                <el-checkbox v-for="option in dictStore.data['{{c.dic_type}}']" :value="convertStrNum(formData.{{c.field_name}},option.value)" >{% templatetag openvariable %} option.label {% templatetag closevariable %}</el-checkbox>
                            </el-checkbox-group>{% elif c.form_type == 'date' %}
                            <el-date-picker type="date" v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" clearable format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择{{c.verbose_name}}" style="width: 100%;">
                            </el-date-picker>{% elif c.form_type == 'date-range' %}
                            <el-date-picker type="daterange" v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" clearable format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                placeholder="请选择{{c.verbose_name}}" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>{% elif c.form_type == 'time' %}
                            <el-date-picker type="datetime" v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" clearable format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择{{c.verbose_name}}">
                            </el-date-picker>{% elif c.form_type == 'time-range' %}
                            <el-date-picker type="datetimerange" v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" clearable
                                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                                start-placeholder="开始时间" range-separator="至"
                                end-placeholder="结束时间">
                            </el-date-picker>{% elif c.form_type == 'picture-single' %}
                            <ly-public-pictrue-single-upload v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" :round="false" :cropper="false"
                                title="" :show-file-list="true" :width="148" :height="148"
                                icon="plus" :compress="1" :aspect-ratio="NaN" :max-size="10">
                            </ly-public-pictrue-single-upload>{% elif c.form_type == 'picture-upload' %}
                            <ly-public-pictrue-multiple-upload v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})"
                                :multiple="true" :draggable="true" :limit="10" tip="" :show-file-list="true"
                                :max-size="50">
                            </ly-public-pictrue-multiple-upload>{% elif c.form_type == 'file-upload' %}
                            <ly-public-file-multiple-upload v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})"
                                :multiple="true" :drag="true" :limit="10" tip="" :show-file-list="true"
                                :max-size="200" icon="plus" button-type="primary">
                                <el-icon class="el-icon--upload" v-if="true"><upload-filled /></el-icon>
                                <div class="el-upload__text" v-if="true">
                                拖拽文件到这 或 <em>点击上传</em>
                                </div>
                            </ly-public-file-multiple-upload>{% elif c.form_type == 'rich-text' %}
                            <div style="width:100%">
                                <ly-public-teditor v-model="formData.{{c.field_name}}" :disabled="isFormItemEditDisabled({{c.edit_disabled | lower}})" placeholder="请输入内容" :height="300"></ly-public-teditor>
                            </div>{% endif %}
                        </el-form-item>
                    </el-col>{% endfor %}
                </el-row>
            </el-form>
            <template v-slot:footer>
                <el-button @click="handleDialogClose">取消</el-button>
                <el-button @click="handleDialogSubmit" type="primary" :loading="dialogLoadingSave" v-if="dialogTitle!='详情'">确定</el-button>
            </template>
        </ly-dialog>
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>

    import {ajaxGet,ajaxPost,ajaxDelete,ajaxPut,ajaxPatch,ajaxDownloadExcel} from '@/api/request'
    // 列表
    const lyAutoCodeList = params => ajaxGet({url: `autocode/{{object.class_name}}/`,params})
    // 新增
    const lyAutoCodeAdd = params => ajaxPost({url: `autocode/{{object.class_name}}/`,params})
    // 编辑
    const lyAutoCodeEdit = params => ajaxPut({url: `autocode/{{object.class_name}}/`,params})
    // 删除
    const lyAutoCodeDelete = params => ajaxDelete({url: `autocode/{{object.class_name}}/`,params})
    // 导出
    const lyAutoCodeExport = params => ajaxDownloadExcel({url: `autocode/{{object.class_name}}/export/`,params}){% for f in ForeignKeyList %}
    {{f.import|safe}}{% endfor %}
    
    import {useDictStore} from "@/store/dict";
    
    import Pagination from "@/components/Pagination";
    import {dateFormats,getTableHeight,deepClone} from "@/utils/util";
    import LyDialog from "@/components/dialog/dialog";
    export default {
        name: "{{VueIndexName}}",
        components: {LyDialog, Pagination},
        setup(){
            const dictStore = useDictStore()
            return { dictStore }
        },
        data(){
            return{
                isFull:false,
                tableHeight:500,
                loadingPage:false,
                // 选项框选中数组
                ids: [],
                // 选项框非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                formInline:{
                    page: 1,
                    limit: 10,
                },
                pageparm: {
                    page: 1,
                    limit: 10,
                    total: 0
                },
                timers:[],
                tableData:[],
                //弹窗
                dialogVisible:false,
                dialogTitle:"",
                dialogLoadingSave:false,
                fullscreen:{{other_config.dialogFullscreen|lower}},
                dialogWidth:"{{other_config.dialogWidth}}",
                dialogTop:"{{other_config.dialogTop}}",
                formDisabled:false,
                formLabelPosition:"{{other_config.formLabelPosition}}",
                formLabelWidth:"{{other_config.formLabelWidth}}",
                formData:{{formData|safe}},
                rules:{{% for c in object.column %}{% if c.form_type == 'select' and  not c.nullable %}
                    {{c.field_name}}: [{ required: true, message: "{{c.verbose_name}}不能为空",trigger: 'change'}],{% elif not c.nullable %}
                    {{c.field_name}}: [{ required: true, message: "{{c.verbose_name}}不能为空",trigger: 'blur'}],{% endif %}{% endfor %}
                },{% for f in ForeignKeyList %}
                {{f.data}}:[],{% endfor %}{% for d in date_range_filter_list %}
                {{d.search_data}}:[],{% endfor %}{% for d in input_range_filter_list %}
                {{d.search_data}}:[],{% endfor %}
            }
        },
        methods:{
            // 表格序列号
            getIndex($index) {
                // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
                return (this.pageparm.page-1)*this.pageparm.limit + $index +1
            },
            setFull(){
                this.isFull=!this.isFull
                window.dispatchEvent(new Event('resize'))
            },
            //多选项框被选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id);
                this.single = selection.length !== 1;
                this.multiple = !selection.length;
            },
            /** 批量删除按钮操作 */
            handleDelete(row) {
                const ids = this.ids;
                let vm = this
                vm.$confirm('是否确认删除选中的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return lyAutoCodeDelete({id:ids}).then(res=>{
                        if(res.code == 2000) {
                            vm.$message.success(res.msg)
                            vm.getData()
                        } else {
                            vm.$message.warning(res.msg)
                        }
                    })
                })
            },
            convertStrNum(model,value){
                if(model === "" || model === null || model === undefined){
                    return value
                }
                else if(Object.prototype.toString.call(model)=== "[object String]"){
                    return value.toString()
                }
                else if(Object.prototype.toString.call(model) === "[object Number]"){
                    return value*1
                }else{
                    return value
                }
            },
            //判断单个组件编辑时是否禁用disabled参数为bool值
            isFormItemEditDisabled(disabled = false){
                if(disabled == "" || disabled == null || disabled == undefined){
                    return false
                }else if((disabled == true || disabled == 'True') && this.dialogTitle==='编辑'){
                    return true
                }
                return false
            },
            handelAdd() {
                this.dialogTitle = "添加"
                this.dialogVisible = true{% for f in ForeignKeyList %}
                this.{{f.function}}(){% endfor %}
            },
            handleDialogClose(){
                this.dialogTitle =""
                this.dialogVisible = false
                this.dialogLoadingSave = false
                this.formDisabled = false
                this.formData = {{formData|safe}}
            },
            handleDialogSubmit(){
                this.$refs['rulesForm'].validate((obj)=>{
                    if(obj) {
                        this.dialogLoadingSave=true
                        let param = {
                            ...this.formData
                        }{% for c in object.column %}{% if c.form_type == 'checkbox' %}
                        param['{{c.field_name}}'] = JSON.stringify(param['{{c.field_name}}']){% endif %}{% endfor %}
                        if(this.dialogTitle=="编辑"){
                            lyAutoCodeEdit(param).then(res=>{
                                this.dialogLoadingSave=false
                                if(res.code ==2000) {
                                    this.$message.success(res.msg)
                                    this.handleDialogClose()
                                    this.getData()
                                } else {
                                    this.$message.warning(res.msg)
                                }
                            })
                        }else{
                            lyAutoCodeAdd(param).then(res=>{
                                this.dialogLoadingSave=false
                                if(res.code ==2000) {
                                    this.$message.success(res.msg)
                                    this.handleDialogClose()
                                    this.getData()
                                } else {
                                    this.$message.warning(res.msg)
                                }
                            })
                        }

                    }
                })
                this.dialogLoadingSave=false
            },
            handleEdit(row,flag) {
                if(flag=='edit') {
                    this.dialogTitle = "编辑"
                    this.dialogVisible = true
                    this.formData = deepClone(row){% for f in ForeignKeyList %}
                    this.{{f.function}}(){% endfor %}
                }
                else if(flag=='delete') {
                    let vm = this
                    vm.$confirm('您确定要删除选中的数据吗？','警告',{
                        closeOnClickModal:false,
                        type: "warning"
                    }).then(res=>{
                        lyAutoCodeDelete({id:row.id}).then(res=>{
                            if(res.code == 2000) {
                                vm.$message.success(res.msg)
                                vm.search()
                            } else {
                                vm.$message.warning(res.msg)
                            }
                        })
                    }).catch(()=>{

                    })
                }else if(flag=='detail'){
                    this.dialogTitle = "详情"
                    this.dialogVisible = true
                    this.formDisabled = true
                    this.formData = deepClone(row){% for f in ForeignKeyList %}
                    this.{{f.function}}(){% endfor %}
                }else if(flag=="reset"){
                    this.formInline = {
                        page:1,
                        limit: 10
                    }
                    this.pageparm={
                        page: 1,
                        limit: 10,
                        total: 0
                    }
                    this.timers = []{% for d in date_range_filter_list %}
                    this.{{d.search_data}}=[]{% endfor %}{% for d in input_range_filter_list %}
                    this.{{d.search_data}}=[]{% endfor %}
                    this.getData()
                }
            },
            /**
             * 从URL里下载文件
            */
            // 下载文件
            downloadFileURL(url) {
                var a =document.createElement("a")
                var event = new MouseEvent('click')
                a.href = url
                a.target = "_blank"
                a.dispatchEvent(event)
            },
            //excel文件流下载
            downloadExcelBlob(res) {
                let fileName = new Date().getTime() +".xlsx"
                let dispositionStr = res.headers["content-disposition"];
                if (dispositionStr == null || dispositionStr === "") {

                }else{
                    // 获取文件名
                    let dispositionArr = dispositionStr.split(";");
                    fileName = decodeURIComponent(dispositionArr[1]);
                    fileName = fileName.split("=")[1];
                }
                const blob = new Blob([res.data], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });
                let href = window.URL.createObjectURL(blob); //下载链接
                let link = document.createElement("a")
                link.href = href
                link.download = fileName //下载后文件名
                document.body.appendChild(link);
                link.click(); //点击下载
                document.body.removeChild(link); //下载完成移除元素
                window.URL.revokeObjectURL(href);  //释放blob对象
                this.$message.success('导出成功')
            },
            //导出
            exportDataBackend() {
                let params = {}
                if(this.ids.length>0){
                    params = {
                        ids:this.ids,
                    }
                }
                this.loadingPage = true
                lyAutoCodeExport(params).then(res => {
                    this.loadingPage = false
                    this.downloadExcelBlob(res)
                })
            },
            callFather(parm) {
                this.formInline.page = parm.page
                this.formInline.limit = parm.limit
                this.getData()
            },
            search() {
                this.formInline.page = 1
                this.formInline.limit = 10
                this.getData()
            },
            //获取列表
            async getData() {
                this.loadingPage = true
                lyAutoCodeList(this.formInline).then(res => {
                     this.loadingPage = false
                     if(res.code ==2000) {
                         this.tableData = res.data.data
                         this.pageparm.page = res.data.page;
                         this.pageparm.limit = res.data.limit;
                         this.pageparm.total = res.data.total;
                     }
                })
            },
            timeChange(val){
                if (val) {
                    this.formInline.beginAt=dateFormats(val[0],'yyyy-MM-dd hh:mm:ss');
                    this.formInline.endAt=dateFormats(val[1],'yyyy-MM-dd hh:mm:ss');
                } else {
                    this.formInline.beginAt = null
                    this.formInline.endAt = null
                }
                this.search()
            },{% for d in date_range_filter_list %}
            {{d.search_data_funcion}}(val) {
                if (val) {
                    this.formInline.{{d.search_data_beginAt}}=dateFormats(val[0],'{{d.search_format}}');
                    this.formInline.{{d.search_data_endAt}}=dateFormats(val[1],'{{d.search_format}}');
                } else {
                    this.formInline.{{d.search_data_beginAt}} = null
                    this.formInline.{{d.search_data_endAt}} = null
                }
                this.search()
            },{% endfor %}{% for d in input_range_filter_list %}
            {{d.search_data_funcion}}(val) {
                if (val) {
                    this.formInline.{{d.search_data_min}}=val[0];
                    this.formInline.{{d.search_data_max}}=val[1];
                } else {
                    this.formInline.{{d.search_data_min}} = null
                    this.formInline.{{d.search_data_max}} = null
                }
                this.search()
            },{% endfor %}
            // 计算搜索栏的高度
            listenResize() {
                this.$nextTick(() => {
                    this.getTheTableHeight()
                })
            },
            getTheTableHeight(){
                let tabSelectHeight = this.$refs.tableSelect?this.$refs.tableSelect.offsetHeight:0
                tabSelectHeight = this.isFull?tabSelectHeight - 110:tabSelectHeight
                this.tableHeight =  getTableHeight(tabSelectHeight)
            },{% for f in ForeignKeyList %}
            {{f.function}}() {
                {{f.name}}({page:1,limit:999}).then(res => {
                    if(res.code ==2000) {
                        this.{{f.data}} = res.data.data
                    }
                })
            },{% endfor %}

        },
        created() {
            this.getData()
        },
        mounted() {
            // 监听页面宽度变化搜索框的高度
            window.addEventListener('resize', this.listenResize);
            this.$nextTick(() => {
                this.getTheTableHeight()
            })
        },

        unmounted() {
            // 页面销毁，去掉监听事件
            window.removeEventListener("resize", this.listenResize);
        },

    }
</script>

<style lang="scss" scoped>

</style>
"""
    context = Context({'object': object,'VueIndexName':VueIndexName,'ForeignKeyList':ForeignKeyList,'formData':formData,'canExport':canExport,'other_config':other_config,'date_range_filter_list':date_range_filter_list,'input_range_filter_list':input_range_filter_list,'input_range_form_type':input_range_form_type})
    return Template(apps_code).render(context)