<!-- 标准代码管理页面 -->
<template>
    <div class="dict-page">
        <div class="page-title clear-float pl-15 pr-15">
            <div class="float-left">
                <span class="page-title-text">{{$t('systemDict.dict')}}</span>
            </div>
            <div class="float-right page-refresh">
                <TableColumnConfig :colList="tableConfig.fieldList"
                                   @change="tableColumnChange">
                </TableColumnConfig>
                <span class="pointer">
                    <svg-icon @click="getDictItemList" icon-class="refresh"></svg-icon>
                    <span @click="getDictItemList" class="ml-10">{{$t('systemDict.refresh')}}</span>
                </span>
            </div>
        </div>
        <div class="tool-pack clear-float pl-15 pr-15">
            <Search searchCode="SYS_DICT"
                    @search="searchClick"
                    @reset="resetClick">
            </Search>
            <div class="float-left">
                <el-button v-if="Authority.checkedAuthority('/system/dict/addDict')" :disabled="httping" size="mini" type="primary" @click="newClick">{{$t('systemDict.new')}}</el-button>
            </div>
        </div>
        <div class="general-list-main-pack pl-15 pr-15">
             <Table :tableConfig="tableConfig"
                @onPageSizeChange="handleSizeChange"
                @onCurrentPageChange="handleCurrentChange"
                @onSortChange="onSortChange">
                <template slot="dictType">
                    <el-table-column :label="$t('systemDict.category')"
                        prop="dictType"
                        :sortable="true"
                        min-width="140"
                        show-overflow-tooltip>
                         <template slot-scope="scope">
                        <span style="display: inline-block;vertical-align: middle;" v-if="scope.row.dictType === 'CUSTOM'">自定义字典</span>
                        <span style="display: inline-block;vertical-align: middle;" v-else>系统字典</span>
                    </template>
                    </el-table-column>
                </template>
                <template slot="enable">
                    <el-table-column :label="$t('systemDict.status')"
                        prop="enable"
                        :sortable="true"
                        min-width="120"
                        show-overflow-tooltip>
                         <template slot-scope="scope">
                        <el-switch
                            v-if="Authority.checkedAuthority('/system/dict/usingDict')"
                            v-model="scope.row.enable"
                            @change="changeDictStatus(scope.row)"
                            active-text=""
                            inactive-text="">
                        </el-switch>
                        <el-button
                            v-if="scope.row.enable === true"
                            type="text">正常
                        </el-button>
                        <el-button
                            v-if="scope.row.enable === false"
                            type="text">停用
                        </el-button>
                    </template>
                    </el-table-column>
                </template>
                <template slot="operationColumn">
                    <el-table-column :label="$t('systemDict.operation')"
                        align="left"
                        fixed="right"
                        width="55">
                         <template slot-scope="scope">
                        <el-button
                            v-if="Authority.checkedAuthority('/system/dict/editDict')"
                            :disabled="httping"
                            type="text"
                            @click="editClick($event, scope.row)">{{$t('systemDict.edit')}}
                        </el-button>
                    </template>
                    </el-table-column>
                </template>
            </Table>
            <!-- <el-table
                :data="dictItemList"
                :height="tableHeight"
                stripe
                border
                tooltip-effect="dark"
                row-key="id"
                style="width: 100%">
                <el-table-column
                    :label="$t('systemDict.classify')">
                    <template slot-scope="scope">
                        <span v-if="scope.row.code === null || scope.row.code === ''">暂无</span>
                        <span v-else>{{scope.row.code}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="$t('systemDict.name')">
                    <template slot-scope="scope">
                        <span v-if="scope.row.name === null || scope.row.name === ''">暂无</span>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="dictType"
                    :label="$t('systemDict.category')">
                    <template slot-scope="scope">
                        <span style="display: inline-block;vertical-align: middle;" v-if="scope.row.dictType === 'CUSTOM'">自定义字典</span>
                        <span style="display: inline-block;vertical-align: middle;" v-else>系统字典</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="100"
                    :label="$t('systemDict.status')">
                    <template slot-scope="scope">
                        <el-switch
                            v-if="Authority.checkedAuthority('/system/dict/usingDict')"
                            v-model="scope.row.enable"
                            @change="changeDictStatus(scope.row)"
                            active-text=""
                            inactive-text="">
                        </el-switch>
                        <el-button
                            v-if="scope.row.enable === true"
                            type="text">正常
                        </el-button>
                        <el-button
                            v-if="scope.row.enable === false"
                            type="text">停用
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    :label="$t('systemDict.operation')"
                    width="55">
                    <template slot-scope="scope">
                        <el-button
                            v-if="Authority.checkedAuthority('/system/dict/editDict')"
                            :disabled="httping"
                            type="text"
                            @click="editClick($event, scope.row)">{{$t('systemDict.edit')}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table> -->
            <!-- 分页区域 -->
            <!-- <div class="pagination-pack">
                <el-pagination
                    background
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="pageSize"
                    layout="prev, pager, next, sizes, jumper"
                    :total="total">
                </el-pagination>
            </div> -->
        </div>
        <!--新增代码弹框-->
        <el-dialog
            :title="$t('systemDict.new')"
            v-drag-dialog
            :visible.sync="newDialogVisible"
            width="500px">
            <div>
                <el-form
                    :model="addDictItemFormData"
                    :rules="dictItemRules"
                    ref="addDictItemFormData"
                    :label-position="labelPosition"
                    label-width="100px">
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item label="字典编码" prop="code" :required="true">
                                <el-input
                                    size="small"
                                    type="text"
                                    :maxlength="50"
                                    v-model.trim="addDictItemFormData.code"
                                    placeholder="请输入字典编码"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('systemDict.name')" prop="name" :required="true">
                                <el-input
                                    size="small"
                                    type="text"
                                    :maxlength="100"
                                    v-model.trim="addDictItemFormData.name"
                                    :placeholder="$t('systemDict.tipName')"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item :label="$t('systemDict.category')" prop="dictType" :required="true">
                                <el-select
                                    style="width: 100%;"
                                    disabled
                                    v-model="addDictItemFormData.dictType"
                                    size="small" :placeholder="$t('systemDict.tipCode')">
                                    <el-option label="自定义字典" value="CUSTOM"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('systemDict.status')" prop="enable" :required="true">
                                <el-switch
                                    v-model="addDictItemFormData.enable"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                                <span style="margin-left: 5px" v-if="addDictItemFormData.enable === true">启用</span>
                                <span style="margin-left: 5px;" v-if="addDictItemFormData.enable === false">停用</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="httping" disabled icon="el-icon-loading" size="mini" type="primary">{{$t('systemDict.saveing')}}</el-button>
                <el-button v-if="!httping" size="mini" type="primary" @click="newSaveClick('addDictItemFormData')">确 认</el-button>
                <el-button :disabled="httping" size="mini" @click="newCancelClick('addDictItemFormData')">取 消</el-button>
            </span>
        </el-dialog>

        <!--编辑代码弹框-->
        <el-dialog
            top="10vh"
            :title="$t('systemDict.edit')"
            v-drag-dialog
            :visible.sync="editDialogVisible"
            width="750px">
            <div>
                <el-form
                    :model="editDictItemFormData"
                    :rules="dictItemRules"
                    :label-position="labelPosition"
                    ref="editDictItemFormData"
                    label-width="100px">
                    <div class="look-title">
                        字典维护<span></span>
                    </div>
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item label="字典编码" prop="code" :required="true">
                                <el-input
                                    size="small"
                                    type="text"
                                    :maxlength="50"
                                    v-model.trim="editDictItemFormData.code"
                                    placeholder="请输入字典编码"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('systemDict.name')" prop="name" :required="true">
                                <el-input
                                    size="small"
                                    type="text"
                                    :maxlength="100"
                                    v-model.trim="editDictItemFormData.name"
                                    :placeholder="$t('systemDict.tipName')"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item :label="$t('systemDict.category')" prop="dictType" :required="true">
                                <el-select
                                    style="width: 100%;"
                                    disabled
                                    v-model="editDictItemFormData.dictType"
                                    size="small" :placeholder="$t('systemDict.tipCode')">
                                    <el-option label="自定义字典" value="CUSTOM"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('systemDict.status')" prop="enable" :required="true">
                                <el-switch
                                    v-if="Authority.checkedAuthority('/system/dict/usingDict')"
                                    v-model="editDictItemFormData.enable"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                                <span style="margin-left: 5px" v-if="editDictItemFormData.enable === true">启用</span>
                                <span style="margin-left: 5px;" v-if="editDictItemFormData.enable === false">停用</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!--<div style="margin-bottom: 15px">
                        <el-button v-if="httping" disabled icon="el-icon-loading" size="mini" type="primary">{{$t('systemDict.saveing')}}</el-button>
                        <el-button v-if="!httping" size="mini" type="primary" @click="editSaveClick('editDictItemFormData')">{{$t('systemDict.confirm')}}</el-button>
                    </div>-->
                    <div class="look-title">
                        条目管理<span></span>
                        <el-button v-if="Authority.checkedAuthority('/system/dict/addDictItem')" style="float: right" size="mini" type="primary" @click="mewEntryClick">新增条目</el-button>
                    </div>
                    <el-table
                        :data="entryList"
                        border
                        :height="260"
                        style="width: 100%">
                        <el-table-column
                            label="条目编码">
                            <template slot-scope="scope">
                                <span v-if="scope.row.itemCode === null || scope.row.itemCode === ''">暂无</span>
                                <span v-else>{{scope.row.itemCode}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="条目名称">
                            <template slot-scope="scope">
                                <span v-if="scope.row.itemName === null || scope.row.itemName === ''">暂无</span>
                                <span v-else>{{scope.row.itemName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="条目值">
                            <template slot-scope="scope">
                                <span v-if="scope.row.itemValue === null || scope.row.itemValue === ''">暂无</span>
                                <span v-else>{{scope.row.itemValue}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="100"
                            :label="$t('systemDict.status')">
                            <template slot-scope="scope">
                                <el-switch
                                    v-if="Authority.checkedAuthority('/system/dict/usingDictItem')"
                                    v-model="scope.row.enable"
                                    @change="entryEnableClick(scope.row)"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                                <el-button
                                    v-if="scope.row.enable === true"
                                    type="text">正常
                                </el-button>
                                <el-button
                                    v-if="scope.row.enable === false"
                                    type="text">停用
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="55"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    v-if="Authority.checkedAuthority('/system/dict/editDictItem')"
                                    type="text"
                                    @click="entryEditClick(scope.row)">编辑
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页区域 -->
                    <div class="pagination-pack" style="margin-top: 10px;">
                        <el-pagination
                            background
                            style="text-align: center;"
                            @size-change="entrySizeChange"
                            @current-change="entryCurrentChange"
                            :current-page="current"
                            :page-sizes="[5, 50, 100, 200]"
                            :page-size="size"
                            layout="prev, pager, next, sizes, jumper"
                            :total="totalEntry">
                        </el-pagination>
                    </div>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <!--<el-button v-if="httping" disabled icon="el-icon-loading" size="mini" type="primary">{{$t('systemDict.saveing')}}</el-button>-->
                <!--<el-button v-if="!httping" size="mini" type="primary" @click="editSaveClick('editDictItemFormData')">{{$t('systemDict.confirm')}}</el-button>-->
                <el-button v-if="httping" disabled icon="el-icon-loading" size="mini" type="primary">{{$t('systemDict.saveing')}}</el-button>
                <el-button v-if="!httping" size="mini" type="primary" @click="editSaveClick('editDictItemFormData')">确 认</el-button>
                <el-button :disabled="httping" size="mini" @click="editCancelClick('editDictItemFormData')">取 消</el-button>
            </span>
        </el-dialog>
        <!--新增条目弹窗-->
        <el-dialog
            top="22vh"
            title="新增条目"
            show-file-list="false"
            :visible.sync="newEntryDialogVisible"
            width="550px">
            <div class="new-header-pack">
                <el-form
                    :model="entryFormData"
                    :rules="rulesEntry"
                    ref="entryRef"
                    :label-position="labelPosition"
                    label-width="105px">
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item label="条目编码" prop="itemCode" :required="true">
                                <el-input
                                    size="small"
                                    :maxlength="50"
                                    placeholder="请输入条目编码" v-model.trim="entryFormData.itemCode">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="条目名称" prop="itemName" :required="true">
                                <el-input
                                    size="small"
                                    :maxlength="100"
                                    placeholder="请输入条目名称" v-model.trim="entryFormData.itemName">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item label="条目值" prop="itemValue" :required="true">
                                <el-input
                                    size="small"
                                    :maxlength="18"
                                    placeholder="请输入条目值" v-model.trim="entryFormData.itemValue">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('systemDict.status')" prop="enable" :required="true">
                                <el-switch
                                    v-model="entryFormData.enable"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                                <span style="margin-left: 5px" v-if="entryFormData.enable === true">启用</span>
                                <span style="margin-left: 5px;" v-if="entryFormData.enable === false">停用</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="affirmEntryClick('entryRef')">确 认</el-button>
                <el-button size="small" @click="cancelEntryClick('entryRef')">取 消</el-button>
            </span>
        </el-dialog>
        <!--编辑条目弹窗-->
        <el-dialog
            top="22vh"
            title="编辑条目"
            show-file-list="false"
            :visible.sync="editEntryDialogVisible"
            width="550px">
            <div class="new-header-pack">
                <el-form
                    :model="entryEditFormData"
                    :rules="rulesEntry"
                    ref="entryEditRef"
                    :label-position="labelPosition"
                    label-width="105px">
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item label="条目编码" prop="itemCode" :required="true">
                                <el-input
                                    size="small"
                                    :maxlength="50"
                                    placeholder="请输入条目编码" v-model.trim="entryEditFormData.itemCode">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="条目名称" prop="itemName" :required="true">
                                <el-input
                                    size="small"
                                    :maxlength="100"
                                    placeholder="请输入条目名称" v-model.trim="entryEditFormData.itemName">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item label="条目值" prop="itemValue" :required="true">
                                <el-input
                                    size="small"
                                    :maxlength="18"
                                    placeholder="请输入条目值" v-model.trim="entryEditFormData.itemValue">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('systemDict.status')" prop="enable" :required="true">
                                <el-switch
                                    v-model="entryEditFormData.enable"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                                <span style="margin-left: 5px" v-if="entryEditFormData.enable === true">启用</span>
                                <span style="margin-left: 5px;" v-if="entryEditFormData.enable === false">停用</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="affirmEntryEditClick('entryEditRef')">确 认</el-button>
                <el-button size="small" @click="cancelEntryEditClick('entryEditRef')">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import date from '@/utils/date.js'
    import dragDialog from '@/directive/dragDialog'
    import Search from '@/components/Search';
    import Table from '@/components/Table/index.vue';
    import TableColumnConfig from '@/components/TableColumnConfig';

    export default {
        name: 'Dict',
        directives: {
            dragDialog
        },
        components: {
            TableColumnConfig,
            Search,
            Table
        },
        data () {
            return {
                searchList: {}, // 精准搜索
                entryId: 1,                         // 新增条目的ID
                entryEditId: 1,                     // 编辑条目的ID
                editId: '',                        // 编辑字典ID

                labelPosition: 'top',               // 新增label 显示位置
                httping: false,                     // 标志http请求发送中
                checkedDictId: 'all',                  // 当前设备类型
                dictItemKeyword: '',                    // 代码模糊搜索关键字

                total: 0,                           // 默认数据总数
                pageSize: 20,                       // 每页的数据条数
                currentPage: 1,                     // 默认开始页面
                tableHeight: 0,                     // 表格高度

                current: 1,                          // 条目默认开始页面
                size: 5,                              // 条目每页的数据条数
                totalEntry: 0,                        // 条目数据总数
                // 列表逻辑
                dictList: [],                       // 代码分类列表
                dictItemList: [],               // 代码数据
                checkedDictItemList: [],            // 选中的代码
                dialogDictList: [],                // 新增、编辑弹框列表
                entryList: [],                     // 条目列表数据

                // 弹框逻辑
                newDialogVisible: false,            // 新增字典弹窗值
                editDialogVisible: false,            // 编辑弹字典窗值
                newEntryDialogVisible: false,            // 新建条目 弹窗值
                editEntryDialogVisible: false,           // 编辑条目 弹窗值
                addFlag: true,                       // 新增验证标识
                // 新增条目表单数据
                entryFormData: {
                    itemCode: '',
                    itemName: '',
                    itemValue: '',
                    enable: true
                },
                // 编辑条目表单数据
                entryEditFormData: {
                    itemCode: '',
                    itemName: '',
                    itemValue: '',
                    enable: true
                },
                // 新增条目验证
                rulesEntry: {
                    itemCode: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请输入条目编码'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    itemName: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请输入条目名称'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    itemValue: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请输入条目值'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                addDictItemFormData: {          // 新增字典数据
                    dictType: 'CUSTOM',
                    code: '',
                    enable: true,
                    name: ''
                },
                editDictItemFormData: {
                    dictType: '',
                    code: '',
                    enable: true,
                    name: ''
                },        // 编辑字典的数据
                backupData: {},                      // 备份编辑的数据
                dictItemRules: {              // 新增代码验证规则
                    dictType: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error(this.$t('systemDict.tipClassify')));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    code: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请输入字典编码'));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    name: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error(this.$t('systemDict.tipName')));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    enable: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error(this.$t('systemDict.tipStatus')));
                                }
                                callback();
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                tableConfig: {
                    // 表格高度
                    height: 300,
                    // 表格数据
                    data: [],
                    // 表格是否点击高亮
                    highLightCurrentToggle: false,
                    // 是否有多选功能标识
                    checkedToggle: false,
                    // 是否支持排序功能
                    orderToggle: false,
                    // 列表显示配置
                    fieldList: [
                        { label: '字典编码', value: 'code', 'min-width': 150 },
                        {
                            label: '字典名称',
                            value: 'name',
                            'min-width': 140
                        },
                        {
                            label: '类别',
                            value: 'dictType',
                            slot: 'dictType'
                        },
                        {
                            label: '状态',
                            value: 'enable',
                            slot: 'enable'
                        }
                    ],
                    // 是否显示分页
                    paginationToggle: true,
                    // 分页配置
                    paginationConfig: {
                        total: 0,
                        currentPage: 1,
                        pageSize: 20
                    }
                }
            }
        },
        methods: {
            // 设备类型切换事件
            codeTypeChange (val) {
                this.currentPage = 1;
                this.pageSize = 20;
                this.dictItemKeyword = '';
                this.getDictItemList();
            },
            // 模糊查询事件
            searchClick (param) {
                this.searchList = param;
                this.tableConfig.paginationConfig.currentPage = 1;
                // 模糊查询事件
                this.currentPage = 1;
                this.pageSize = 20;
                this.getDictItemList();
            },
            // 重置点击事件
            resetClick () {
                this.searchList = {
                    ...param,
                    filters: []
                };
                this.tableConfig.paginationConfig.currentPage = 1;
                this.tableConfig.paginationConfig.pageSize = 20;
                this.checkedDictId = 'all';
                this.dictItemKeyword = '';
                this.currentPage = 1;
                this.pageSize = 20;
                this.getDictItemList();
            },
            // 表格前checkbox选中事件
            handleSelectionChange (val) {
                this.checkedDictItemList = val;
            },
            // 触发表格列变化事件
            tableColumnChange (data) {
                this.tableConfig.fieldList = data;
            },
            // 触发表格组件排序事件
            onSortChange (sortValue) {
                this.tableConfig.paginationConfig.pageSize = 20;
                this.tableConfig.paginationConfig.currentPage = 1;
                this.searchList.orderBy = {
                    fieldCode: sortValue.prop,
                    value: sortValue.order === 'descending' ? 'DESC' : 'ASC'
                };
                // 获取列表数据
                this.getDictItemList();
            },
            //  字典页数 变化事件
            handleCurrentChange (val) {
                this.tableConfig.paginationConfig.currentPage = val;
                this.getDictItemList();
            },
            // 字典个数 变化事件
            handleSizeChange (e) {
                this.tableConfig.paginationConfig.currentPage = 1;
                this.tableConfig.paginationConfig.pageSize = e;
                this.getDictItemList();
            },
            //  条目页数 变化事件
            entryCurrentChange (e) {
                this.current = e;
                this.getEntryList();
            },
            // 条目个数 变化事件
            entrySizeChange (e) {
                this.size = e;
                this.currentPage = 1;
                this.getEntryList();
            },
            // 获取条目 列表数据 entryList
            getEntryList () {
                let param = {
                    pageNum: this.current,
                    pageSize: this.size,
                    dictId: this.editId
                };
                this.$store.dispatch('Dict/getEntryList', param).then((cbData) => {
                    this.entryList = _.cloneDeep(cbData.list);
                    this.totalEntry = cbData.total;
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 新增条目 显示事件
            mewEntryClick () {
                this.newEntryDialogVisible = true;
            },
            // 新增条目 确认事件
            affirmEntryClick (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.entryFormData.dictId = this.editId;
                        this.$store.dispatch('Dict/addEntry', this.entryFormData).then((cbData) => {
                            this.$message.success('新增条目成功');
                            this.getEntryList();
                            this.newEntryDialogVisible = false;
                            this.$refs[formName].resetFields();
                        }).catch((response) => {
                            this.$message.error(response.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 新增条目 取消事件
            cancelEntryClick () {
                this.newEntryDialogVisible = false;
            },
            // 编辑条目 事件
            entryEditClick (row) {
                this.editEntryDialogVisible = true;
                this.entryEditFormData = {
                    dictId: this.editId,
                    id: row.id,
                    enable: row.enable,
                    itemCode: row.itemCode,
                    itemName: row.itemName,
                    itemValue: row.itemValue
                };
            },
            // 编辑条目 保存事件
            affirmEntryEditClick (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('Dict/updateEntry', this.entryEditFormData).then((cbData) => {
                            this.$message.success('条目编辑成功');
                            this.getEntryList();
                            this.editEntryDialogVisible = false;
                            this.$refs[formName].resetFields();
                        }).catch((response) => {
                            this.$message.error(response.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 编辑条目 取消事件
            cancelEntryEditClick (formName) {
                this.$refs[formName].resetFields();
                this.editEntryDialogVisible = false;
            },
            // 条目启用 停用事件
            entryEnableClick (row) {
                let msg = row.enable === true ? this.$t('basicsDict.start') : this.$t('basicsDict.stop');
                this.$store.dispatch('Dict/enableEntry', {
                    id: row.id,
                    enable: row.enable
                }).then((cbData) => {
                    this.$message.success(`${msg}${this.$t('systemDict.successful')}`);
                    // 重新获取条目列表
                    this.getEntryList();
                    this.httping = false;
                }).catch((message) => {
                    this.httping = false;
                });
            },
            // 新增字典 弹窗事件
            newClick () {
                if (this.checkedDictId !== 'all') {
                    this.addDictItemFormData.dictId = this.checkedDictId;
                }
                this.newDialogVisible = true;
            },
            // 新增字典 保存事件
            newSaveClick (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.httping = true;
                        this.$store.dispatch('Dict/addDictItem', this.addDictItemFormData).then((cbData) => {
                            this.$message.success(this.$t('systemDict.newSuccessful'));
                            this.newDialogVisible = false;
                            // 置空新增弹框数据
                            this.resetNewData();
                            this.$refs[formName].resetFields();
                            // 重新获取代码列表
                            this.searchClick();
                            this.httping = false;
                        }).catch((response) => {
                            this.httping = false;
                            this.$message.error(response.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 新增字典 取消事件
            newCancelClick (formName) {
                this.newDialogVisible = false;
                this.$refs[formName].resetFields();
            },
            // 编辑字典事件
            editClick (e, rowData) {
                this.editId = rowData.id;
                // 查询条目列表
                this.getEntryList();
                // 备份数据
                this.backupData = _.cloneDeep(rowData);
                // 设置编辑值
                this.editDictItemFormData = {
                    dictType: rowData.dictType,
                    code: rowData.code,
                    enable: rowData.enable,
                    name: rowData.name,
                    id: rowData.id
                };
                this.editDialogVisible = true;
            },
            // 编辑字典 保存事件
            editSaveClick (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.httping = true;
                        this.$store.dispatch('Dict/updateDictItem', this.editDictItemFormData).then((cbData) => {
                            this.editDialogVisible = false;
                            this.$message.success(this.$t('systemDict.editSuccessful'));
                            // 重新获取代码列表
                            this.searchClick();
                            this.httping = false;
                        }).catch((response) => {
                            this.httping = false;
                            this.$message.error(response.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 编辑字典 取消事件
            editCancelClick (formName) {
                this.editDialogVisible = false;
                this.$refs[formName].resetFields();
            },
            // 字典停用 启用事件
            changeDictStatus (row) {
                let msg = row.enable === true ? this.$t('basicsDict.start') : this.$t('basicsDict.stop');
                this.$store.dispatch('Dict/offOrOnDictItem', {
                    id: row.id,
                    enable: row.enable
                }).then((cbData) => {
                    this.$message.success(`${msg}${this.$t('systemDict.successful')}`);
                    // 重新获取字典列表
                    this.searchClick();
                    this.httping = false;
                }).catch((message) => {
                    this.httping = false;
                });
            },
            // 获取字典 列表
            getDictItemList () {
                // let param = {
                //     pageNum: this.currentPage,
                //     pageSize: this.pageSize,
                //     like: this.checkedDictId === 'all' ? '' : this.checkedDictId,
                //     code: this.dictItemKeyword
                // };
                // this.$store.dispatch('Dict/getDictItemList', param).then((cbData) => {
                //     this.dictItemList = _.cloneDeep(cbData.list);
                //     this.total = cbData.total;
                // }).catch((response) => {
                //     this.$message.error(response.message);
                // });
                let queryParams = {
                    searchCode: this.searchList.searchCode || 'SYS_DICT',
                    filters: this.searchList.filters || [],
                    pageSize: this.tableConfig.paginationConfig.pageSize,
                    pageNum: this.tableConfig.paginationConfig.currentPage
                };
                if (this.searchList.hasOwnProperty('orderBy')) {
                    queryParams.orderBy = this.searchList.orderBy;
                }
                return new Promise((resolve, reject) => {
                    this.$fetch(
                        'dict-controller/page-post',
                        queryParams
                    )
                        .then(res => {
                            if (res.list.length === 0 && res.pageNum !== 1) {
                                this.tableConfig.paginationConfig.currentPage -= 1;
                                this.getDictItemList();
                            } else {
                                this.tableConfig.data = _.cloneDeep(res.list);
                                this.tableConfig.paginationConfig.total = res.total;
                                resolve(res);
                            }
                        })
                        .catch(error => {
                            reject(error);
                        });
                });
            },
            // 置空新增字典 弹框数据
            resetNewData () {
                this.addDictItemFormData = {
                    dictId: '',
                    itemCode: '',
                    itemName: ''
                };
                if (this.dialogDictList.length > 0) {
                    this.addDictItemFormData.dictId = this.dialogDictList[0].id;
                }
            },
            // 格式化处理表格的时间数据格式
            formatterTableTime (time) {
                return `${date.format(time, 'yyyy-MM-dd hh:mm:ss')}`;
            },
            getDictCodeOrName (field, id) {
                let fieldName = this.$t('systemDict.notAvailable');
                for (let i = 0, len = this.dialogDictList.length; i < len; i++) {
                    if (this.dialogDictList[i].id === id) {
                        if (field === 'code') {
                            fieldName = this.dialogDictList[i].code;
                        } else {
                            fieldName = this.dialogDictList[i].name;
                        }
                    }
                }
                return fieldName;
            }
        },
        mounted () {
            // 1. teble设置高度滚动条
            setTimeout(() => {
                this.tableConfig.height = document.querySelector('.dict-page').offsetHeight - 200
            }, 0);
            this.getDictItemList();
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "@/styles/System/dict.scss";
</style>
