<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
            #foreach($column in $columns)
                #if($column.query)
                    #set($dictType=$column.dictType)
                    #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
                    #set($parentheseIndex=$column.columnComment.indexOf("（"))
                    #if($parentheseIndex != -1)
                        #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                    #else
                        #set($comment=$column.columnComment)
                    #end
                    #if($column.htmlType == "input")
                        <el-form-item label="${comment}" prop="${column.javaField}">
                            <el-input
                                    v-model="queryParams.${column.javaField}"
                                    placeholder="请输入${comment}"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                    #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
                        <el-form-item label="${comment}" prop="${column.javaField}">
                            <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
                                <el-option
                                        v-for="dict in dict.type.${dictType}"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
                        <el-form-item label="${comment}" prop="${column.javaField}">
                            <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
                                <el-option label="请选择字典生成" value=""/>
                            </el-select>
                        </el-form-item>
                    #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
                        <el-form-item label="${comment}" prop="${column.javaField}">
                            <el-date-picker clearable
                                            v-model="queryParams.${column.javaField}"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="请选择${comment}">
                            </el-date-picker>
                        </el-form-item>
                    #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
                        <el-form-item label="${comment}">
                            <el-date-picker
                                    v-model="daterange${AttrName}"
                                    style="width: 240px"
                                    value-format="yyyy-MM-dd"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                            ></el-date-picker>
                        </el-form-item>
                    #end
                #end
            #end
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        v-hasPermi="['${moduleName}:${businessName}:add']"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        plain
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['${moduleName}:${businessName}:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        plain
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                        v-hasPermi="['${moduleName}:${businessName}:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        plain
                        icon="Download"
                        @click="handleExport"
                        v-hasPermi="['${moduleName}:${businessName}:export']"
                >导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            #foreach($column in $columns)
                #set($javaField=$column.javaField)
                #set($parentheseIndex=$column.columnComment.indexOf("（"))
                #if($parentheseIndex != -1)
                    #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                #else
                    #set($comment=$column.columnComment)
                #end
                #if($column.pk)
                    <el-table-column label="${comment}" align="center" prop="${javaField}"/>
                #elseif($column.list && $column.htmlType == "datetime")
                    <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                #elseif($column.list && $column.htmlType == "imageUpload")
                    <el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
                        <template slot-scope="scope">
                            <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
                        </template>
                    </el-table-column>
                #elseif($column.list && "" != $column.dictType)
                    <el-table-column label="${comment}" align="center" prop="${javaField}">
                        <template slot-scope="scope">
                            #if($column.htmlType == "checkbox")
                                <dict-tag :options="dict.type.${column.dictType}"
                                          :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
                            #else
                                <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField}"/>
                            #end
                        </template>
                    </el-table-column>
                #elseif($column.list && "" != $javaField)
                    <el-table-column label="${comment}" align="center" prop="${javaField}"/>
                #end
            #end
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['${moduleName}:${businessName}:edit']"
                    >修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-hasPermi="['${moduleName}:${businessName}:remove']"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />

        <!-- 添加或修改${functionName}对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                #foreach($column in $columns)
                    #set($field=$column.javaField)
                    #if($column.insert && !$column.pk)
                        #if(($column.usableColumn) || (!$column.superColumn))
                            #set($parentheseIndex=$column.columnComment.indexOf("（"))
                            #if($parentheseIndex != -1)
                                #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                            #else
                                #set($comment=$column.columnComment)
                            #end
                            #set($dictType=$column.dictType)
                            #if($column.htmlType == "input")
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-input v-model="form.${field}" placeholder="请输入${comment}"/>
                                </el-form-item>
                            #elseif($column.htmlType == "imageUpload")
                                <el-form-item label="${comment}" prop="${field}">
                                    <image-upload v-model="form.${field}"/>
                                </el-form-item>
                            #elseif($column.htmlType == "fileUpload")
                                <el-form-item label="${comment}" prop="${field}">
                                    <file-upload v-model="form.${field}"/>
                                </el-form-item>
                            #elseif($column.htmlType == "editor")
                                <el-form-item label="${comment}">
                                    <editor v-model="form.${field}" :min-height="192"/>
                                </el-form-item>
                            #elseif($column.htmlType == "select" && "" != $dictType)
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-select v-model="form.${field}" placeholder="请选择${comment}">
                                        <el-option
                                                v-for="dict in dict.type.${dictType}"
                                                :key="dict.value"
                                                :label="dict.label"
                                            #if($column.javaType == "Integer" || $column.javaType == "Long")
                                                :value="parseInt(dict.value)"
                                            #else
                                                :value="dict.value"
                                            #end
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            #elseif($column.htmlType == "select" && $dictType)
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-select v-model="form.${field}" placeholder="请选择${comment}">
                                        <el-option label="请选择字典生成" value=""/>
                                    </el-select>
                                </el-form-item>
                            #elseif($column.htmlType == "checkbox" && "" != $dictType)
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-checkbox-group v-model="form.${field}">
                                        <el-checkbox
                                                v-for="dict in dict.type.${dictType}"
                                                :key="dict.value"
                                                :label="dict.value">
                                            {{dict.label}}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            #elseif($column.htmlType == "checkbox" && $dictType)
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-checkbox-group v-model="form.${field}">
                                        <el-checkbox>请选择字典生成</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            #elseif($column.htmlType == "radio" && "" != $dictType)
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-radio-group v-model="form.${field}">
                                        <el-radio
                                                v-for="dict in dict.type.${dictType}"
                                                :key="dict.value"
                                            #if($column.javaType == "Integer" || $column.javaType == "Long")
                                                :label="parseInt(dict.value)"
                                            #else
                                                :label="dict.value"
                                            #end
                                        >{{dict.label}}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            #elseif($column.htmlType == "radio" && $dictType)
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-radio-group v-model="form.${field}">
                                        <el-radio label="1">请选择字典生成</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            #elseif($column.htmlType == "datetime")
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-date-picker clearable
                                                    v-model="form.${field}"
                                                    type="date"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="请选择${comment}">
                                    </el-date-picker>
                                </el-form-item>
                            #elseif($column.htmlType == "textarea")
                                <el-form-item label="${comment}" prop="${field}">
                                    <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容"/>
                                </el-form-item>
                            #end
                        #end
                    #end
                #end
                #if($table.sub)
                    <el-divider content-position="center">${subTable.functionName}信息</el-divider>
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd${subClassName}">
                                添加
                            </el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="danger" icon="el-icon-delete" size="mini"
                                       @click="handleDelete${subClassName}">删除
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="${subclassName}List" :row-class-name="row${subClassName}Index"
                              @selection-change="handle${subClassName}SelectionChange" ref="${subclassName}">
                        <el-table-column type="selection" width="50" align="center"/>
                        <el-table-column label="序号" align="center" prop="index" width="50"/>
                        #foreach($column in $subTable.columns)
                            #set($javaField=$column.javaField)
                            #set($parentheseIndex=$column.columnComment.indexOf("（"))
                            #if($parentheseIndex != -1)
                                #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                            #else
                                #set($comment=$column.columnComment)
                            #end
                            #if($column.pk || $javaField == ${subTableFkclassName})
                            #elseif($column.list && $column.htmlType == "input")
                                <el-table-column label="$comment" prop="${javaField}" width="150">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.$javaField" placeholder="请输入$comment"/>
                                    </template>
                                </el-table-column>
                            #elseif($column.list && $column.htmlType == "datetime")
                                <el-table-column label="$comment" prop="${javaField}" width="240">
                                    <template slot-scope="scope">
                                        <el-date-picker clearable v-model="scope.row.$javaField" type="date"
                                                        value-format="yyyy-MM-dd" placeholder="请选择$comment"/>
                                    </template>
                                </el-table-column>
                            #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") &&
                                "" != $column.dictType)
                                <el-table-column label="$comment" prop="${javaField}" width="150">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
                                            <el-option
                                                    v-for="dict in dict.type.$column.dictType"
                                                    :key="dict.value"
                                                    :label="dict.label"
                                                    :value="dict.value"
                                            ></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                            #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") &&
                                "" == $column.dictType)
                                <el-table-column label="$comment" prop="${javaField}" width="150">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
                                            <el-option label="请选择字典生成" value=""/>
                                        </el-select>
                                    </template>
                                </el-table-column>
                            #end
                        #end
                    </el-table>
                #end
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        listPage${BusinessName},
        get${BusinessName},
        del${BusinessName},
        add${BusinessName},
        update${BusinessName}
    } from "@/api/${moduleName}/${businessName}";

    export default {
        name: "${BusinessName}",
        #if(${dicts} != '')
            dicts: [${dicts}],
        #end
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                #if($table.sub)
                    // 子表选中数据
                    checked${subClassName}: [],
                #end
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // ${functionName}表格数据
                    ${businessName}List: [],
                #if($table.sub)
                    // ${subTable.functionName}表格数据
                        ${subclassName}List: [],
                #end
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                #foreach ($column in $columns)
                    #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
                        #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
                        // $comment时间范围
                        daterange${AttrName}: [],
                    #end
                #end
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    #foreach ($column in $columns)
                        #if($column.query)
                                $column.javaField: null#if($foreach.count != $columns.size()),#end
                        #end
                    #end
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    #foreach ($column in $columns)
                        #if($column.required)
                            #set($parentheseIndex=$column.columnComment.indexOf("（"))
                            #if($parentheseIndex != -1)
                                #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                            #else
                                #set($comment=$column.columnComment)
                            #end
                                $column.javaField: [
                                {
                                    required: true, message: "$comment不能为空", trigger: #if($column.htmlType ==
                                    "select" || $column.htmlType == "radio")"change"#else"blur"#end }
                            ]#if($foreach.count != $columns.size()),#end
                        #end
                    #end
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询${functionName}列表 */
            getList() {
                this.loading = true;
                #foreach ($column in $columns)
                    #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
                        this.queryParams.params = {};
                        #break
                    #end
                #end
                #foreach ($column in $columns)
                    #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
                        #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
                        if (null != this.daterange${AttrName} && '' != this.daterange${AttrName}) {
                            this.queryParams.params["begin${AttrName}"] = this.daterange${AttrName}[0];
                            this.queryParams.params["end${AttrName}"] = this.daterange${AttrName}[1];
                        }
                    #end
                #end
                listPage${BusinessName}(this.queryParams).then(response => {
                    this.${businessName}List = response.data;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    #foreach ($column in $columns)
                        #if($column.htmlType == "checkbox")
                                $column.javaField: []#if($foreach.count != $columns.size()),#end
                        #else
                                $column.javaField: null#if($foreach.count != $columns.size()),#end
                        #end
                    #end
                };
                #if($table.sub)
                    this.${subclassName}List = [];
                #end
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                #foreach ($column in $columns)
                    #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
                        #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
                        this.daterange${AttrName} = [];
                    #end
                #end
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.${pkColumn.javaField})
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加${functionName}";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const ${pkColumn.javaField} = row.${pkColumn.javaField} || this.ids
                get${BusinessName}(${pkColumn.javaField}).then(response => {
                    this.form = response.data;
                    #foreach ($column in $columns)
                        #if($column.htmlType == "checkbox")
                            this.form.$column.javaField = this.form.${column.javaField}.split(",");
                        #end
                    #end
                    #if($table.sub)
                        this.${subclassName}List = response.data.${subclassName}List;
                    #end
                    this.open = true;
                    this.title = "修改${functionName}";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.#[[$]]
                #refs["form"].validate(valid => {
                    if (valid) {
                        #foreach($column in $columns)
                        #if($column.htmlType == "checkbox")
                        this.form.$column.javaField = this.form.$
                        {
                            column.javaField
                        }
                    .
                        join(",");
                        #end
                        #end
                        #if($table.sub)
                        this.form.$
                        {
                            subclassName
                        }
                        List = this.$
                        {
                            subclassName
                        }
                        List;
                        #end
                        if (this.form.${
                            pkColumn.javaField
                        }
                    !=
                        null
                    )
                        {
                            update$
                            {
                                BusinessName
                            }
                            (this.form).then(response => {
                                this.#[[$modal]]
                                #.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    else
                        {
                            add$
                            {
                                BusinessName
                            }
                            (this.form).then(response => {
                                this.#[[$modal]]
                                #.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ${pkColumn.javaField}s = row.$
                {
                    pkColumn.javaField
                }
            ||
                this.ids;
                this.#[[$modal]]
                #.confirm('是否确认删除${functionName}编号为"' + ${pkColumn.javaField}s + '"的数据项？').then(function () {
                    return del$
                    {
                        BusinessName
                    }
                    (${pkColumn.javaField}s);
                }).then(() => {
                    this.getList();
                    this.#[[$modal]]
                    #.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
    #if($table.sub)
    /** ${subTable.functionName}序号 */
    row$
    {
        subClassName
    }
    Index({row, rowIndex})
    {
        row.index = rowIndex + 1;
    }
    ,
    /** ${subTable.functionName}添加按钮操作 */
    handleAdd$
    {
        subClassName
    }
    ()
    {
        let obj = {};
        #foreach($column in $subTable.columns)
        #if($column.pk || $column.javaField == ${subTableFkclassName})
        #elseif($column.list && "" != $javaField)
        obj.$column.javaField = "";
        #end
        #end
        this.$
        {
            subclassName
        }
        List.push(obj);
    }
    ,
    /** ${subTable.functionName}删除按钮操作 */
    handleDelete$
    {
        subClassName
    }
    ()
    {
        if (this.checked${
            subClassName
        }
    .
        length == 0
    )
        {
            this.#[[$modal]]
            #.msgError("请先选择要删除的                        数据");
        }
    else
        {
            const List = this.List;
            const checked = this.checked;
            this.List = List.filter(function (item) {
                return checked.indexOf(item.index) == -1
            });
        }
    }
    ,
    /** 复选框选中数据 */
    handle$
    {
        subClassName
    }
    SelectionChange(selection)
    {
        this.checked$
        {
            subClassName
        }
        = selection.map(item => item.index)
    }
    ,
    #end
    /** 导出按钮操作 */
    handleExport()
    {
        this.download('${moduleName}/${businessName}/export', {
            ...this.queryParams
        }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
    }
    }
    }
    ;
</script>
