1. Dialog

1.1. List

<template>
    <el-col :span="20">
        <el-row>
            <el-col :span="24">
                <el-button size="small" style="margin-bottom: 1rem;margin-right: 1rem;">解析站点</el-button>
                <el-tooltip class="item" effect="dark" content="添加站点" placement="top">
                    <el-button type="success" size="small" icon="el-icon-plus" @click="showAddParseDialog = true"
                               circle></el-button>
                </el-tooltip>
                <el-row>
                    <el-col :span="24">
                        <el-table
                                :data="tableData"
                                border
                                style="width: 100%">
                            <el-table-column
                                    label="名称"
                                    width="250">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="地址"
                                    width="300">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.url }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="顺序权值"
                                    width="100">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.apiOrder }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <MyAddParseVipDialog :show-add-parse-dialog="showAddParseDialog"/>
        <MyUpdateParseVipDialog :show-update-parse-dialog="showUpdateParseDialog"/>
    </el-col>
</template>

<script>
    import EventBus from "../../config/EventBus";
    import AddParseVipDialog from "../../components/dialog/AddParseVipDialog";
    import UpdateParseVipDialog from "../../components/dialog/UpdateParseVipDialog";

    export default {
        name: "ParseVipConfig",
        components: {
            'MyAddParseVipDialog': AddParseVipDialog,
            'MyUpdateParseVipDialog': UpdateParseVipDialog,
        },
        data() {
            return {
                tableData: [],
                showAddParseDialog: false,
                showUpdateParseDialog: false,
            }
        },
        methods: {
            handleEdit(index, row) {
                this.showUpdateParseDialog = true;
                EventBus.$emit('ParseVipUpdateData', row);
            },
            handleDelete(index, row) {
                this.$confirm('将永久删除，该操作不可逆, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.reqDelete(row.id);
                });
            },
            reqDelete(id) {
                this.$http.delete('/admin/jx/' + id)
                    .then(res => {
                        let data = res.data;
                        if (data.code === 30004) {
                            this.$notify.success(data.msg);
                            this.reqData();//刷新
                        } else {
                            this.$notify.error(data.msg);
                        }
                    }).catch(() => {
                    this.$notify.error('系统错误');
                })
            },
            reqData() {
                this.$http.get('/admin/jx/all')
                    .then(res => {
                        // console.log(res);
                        let data = res.data;
                        this.tableData = data.data;
                    }).catch(() => {
                    this.$notify.error('系统错误');
                })
            }
        },
        created() {
            this.reqData();
            //监听取消
            EventBus.$on('ParseVipAddDialogVisit', val => {
                this.showAddParseDialog = val;
            });
            EventBus.$on('ParseVipUpdateDialogVisit', val => {
                this.showUpdateParseDialog = val;
            });
            // 监听刷新
            EventBus.$on('RefreshParseList', () => {
                this.reqData();
            });
        }
    }
</script>

<style scoped lang="scss">

</style>

1.2. Add

<template>
    <el-dialog title="添加站点" :visible.sync="showAddParseDialog" :close-on-press-escape="false"
               :show-close="false" width="35%"
               :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="form" label-width="60px" size="medium">
            <el-form-item label="名称" prop="title">
                <el-input v-model="form.name"
                          placeholder="名称"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="titleIcon">
                <el-input v-model="form.url" placeholder="https://..."
                          autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input-number v-model.number="form.apiOrder" placeholder="数字越大,越排在前面，最大100"
                                 value="1" :min="1" :max="100" :step="1" autocomplete="off"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" size="mini">取 消</el-button>
            <el-button type="primary" @click="onSubmit" size="mini">提交</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import EventBus from "../../config/EventBus";

    export default {
        name: "AddParseVipDialog",
        props: {
            showAddParseDialog: {
                default: false,
                type: Boolean
            }
        },
        data() {
            const validateTitleLink = (rule, value, callback) => {
                if (value !== '' && !/^https?:\/\//ig.test(value)) {
                    callback(new Error('链接必须以http(s)开头'));
                } else {
                    callback();
                }
            };
            return {
                form: {
                    name: '',
                    apiOrder: 1,
                    url: '',
                },
                rules: {
                    name: [
                        {required: true, message: '标题不能为空', trigger: 'blur'},
                        {min: 2, message: '最少2个字符', trigger: 'blur'},
                    ],
                    url: [

                        {validator: validateTitleLink, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            cancel() {
                // 关闭
                EventBus.$emit('ParseVipDialogVisit', false);
                // 刷新列表
                EventBus.$emit('RefreshParseList');
            },
            // 提交
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return false;
                    } else {
                        this.$http.post('/admin/jx', this.form).then(res => {
                            let data = res.data;
                            let code = data.code;
                            if (code !== 30002) {
                                this.$notify.error(data.msg);
                            } else {
                                this.$notify.success(data.msg);
                                EventBus.$emit('ParseVipDialogVisit', false);
                                EventBus.$emit('RefreshParseList');//刷新列表
                            }
                        }).catch(() => {
                            this.$notify.error('系统错误，请刷新或联系管理员');
                        })
                    }
                });
            }
        },
        created() {

        }
    }
</script>

<style scoped lang="scss">

</style>

1.3. Update

<template>
    <el-dialog title="修改站点" :visible.sync="showUpdateParseDialog" :close-on-press-escape="false"
               :show-close="false" width="35%"
               :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="form" label-width="60px" size="medium">
            <el-form-item label="名称" prop="title">
                <el-input v-model="form.name"
                          placeholder="名称"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="titleIcon">
                <el-input v-model="form.url" placeholder="https://..."
                          autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input-number v-model.number="form.apiOrder" placeholder="数字越大,越排在前面，最大100"
                                 value="1" :min="1" :max="100" :step="1" autocomplete="off"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" size="mini">取 消</el-button>
            <el-button type="primary" @click="onSubmit" size="mini">提交</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import EventBus from "../../config/EventBus";

    export default {
        name: "UpdateParseVipDialog",
        props: {
            showUpdateParseDialog: {
                default: false,
                type: Boolean
            }
        },
        data() {
            const validateTitleLink = (rule, value, callback) => {
                if (value !== '' && !/^https?:\/\//ig.test(value)) {
                    callback(new Error('链接必须以http(s)开头'));
                } else {
                    callback();
                }
            };
            return {
                form: {
                    name: '',
                    apiOrder: 1,
                    url: '',
                },
                rules: {
                    name: [
                        {required: true, message: '标题不能为空', trigger: 'blur'},
                        {min: 2, message: '最少2个字符', trigger: 'blur'},
                    ],
                    url: [

                        {validator: validateTitleLink, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            cancel() {
                // 关闭
                EventBus.$emit('ParseVipUpdateDialogVisit', false);
                // 刷新列表
                EventBus.$emit('RefreshParseList');
            },
            // 提交
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return false;
                    } else {
                        this.$http.put('/admin/jx', this.form).then(res => {
                            let data = res.data;
                            let code = data.code;
                            if (code !== 30006) {
                                this.$notify.error(data.msg);
                            } else {
                                this.$notify.success(data.msg);
                                EventBus.$emit('ParseVipUpdateDialogVisit', false);
                                EventBus.$emit('RefreshParseList');//刷新列表
                            }
                        }).catch(() => {
                            this.$notify.error('系统错误，请刷新或联系管理员');
                        })
                    }
                });
            }
        },
        created() {
            // 传递修改的数据
            EventBus.$on('ParseVipUpdateData', item => {
                this.form = {...item};
            })
        }
    }
</script>

<style scoped lang="scss">

</style>