Arbitrate-Frontend/src/views/officialSeal/components/grabRules.vue

<template>
    <div>
        <el-dialog title="设置抓取规则" :visible="rulesVisable" v-if="rulesVisable" @close="cancelRules" width="1000px"
            append-to-body :destroy-on-close="true" center>
            <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px;" @click="addForm">新增抓取规则</el-button>
            <div class="formDom">
                <el-form ref="form" :model="formData" label-width="150px">
                    <div class="formItem" v-for="(item, index) in formData.forms" :key="item.key">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="字段：" :prop="'forms.' + index + '.column'" :rules="[
                                    {
                                        required: true,
                                        message: '字段不能为空',
                                        trigger: 'blur',
                                    },
                                ]">
                                    <el-input v-model="item.column" placeholder="请输入字段" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="字段名：" :prop="'forms.' + index + '.columnName'" :rules="[
                                    {
                                        required: true,
                                        message: '字段名不能为空',
                                        trigger: 'blur',
                                    },
                                ]">
                                    <el-input v-model="item.columnName" placeholder="请输入字段名" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="抓取文件名：" :prop="'forms.' + index + '.fileName'" :rules="[
                                    {
                                        required: true,
                                        message: '抓取文件名不能为空',
                                        trigger: 'blur',
                                    },
                                ]">
                                    <el-input v-model="item.fileName" placeholder="请输入抓取文件名" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开始抓取字段：" :prop="'forms.' + index + '.startContent'" :rules="[
                                    {
                                        required: true,
                                        message: '开始抓取字段不能为空',
                                        trigger: 'blur',
                                    },
                                ]">
                                    <el-input v-model="item.startContent" placeholder="请输入开始抓取字段" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="结束抓取字段：" :prop="'forms.' + index + '.endContent'" :rules="[
                                    {
                                        required: true,
                                        message: '结束抓取字段不能为空',
                                        trigger: 'blur',
                                    },
                                ]">
                                    <el-input v-model="item.endContent" placeholder="结束抓取字段" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelRules" class="endbutton"><span>取 消</span></el-button>
                <el-button type="primary" @click="submitRules" class="endbutton"><span>确认</span></el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    getFatchRuleByTemplateid,
    saveFatchRules
} from "@/api/officialSeal/officialSeal.js";
export default {
    props: ["rulesVisable", "rulesData", "queryParams"],
    data() {
        return {
            formData: {
                forms: [{
                    fileName: "",
                    startContent: '',
                    endContent: '',
                    column: "",
                    columnName: "",
                    key: Date.now()
                }]
            },
        };
    },
    watch: {
        rulesData(val) {
            if (val) {
                console.log(val, "llllllllllllllll");
                this.getFatchRuleByTemplateidFn({ id: val.id })
            }
        }
    },
    created() {

    },
    methods: {
        cancelRules() {
            this.$emit("cancelRules");
        },
        addForm() {
            this.formData.forms.push({
                fileName: "",
                startContent: '',
                endContent: '',
                column: "",
                columnName: ""
            });
        },
        submitRules() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                   this.saveFatchRulesFn({
                    id:this.rulesData.id,
                    fatchRules:this.formData.forms
                   })
                }
            });
        },
        // 根据id获取抓取规则
        getFatchRuleByTemplateidFn(data) {
            getFatchRuleByTemplateid(data).then(res => {
                this.formData.forms = res.data;
            })
        },
        // 提交抓取规则
        saveFatchRulesFn(data) {
            saveFatchRules(data).then(res => {
                this.$message.success('提交成功');
                this.$emit("cancelRules");
                this
                .$emit('getList', that.queryParams);
            })
        }
    },
};
</script>
  
<style lang="scss" scoped>
::v-deep .el-form {
    border: 1px solid #c2bcbc;
    padding: 20px;
    margin-bottom: 15px;
    max-height: 700px;
    overflow-y: scroll;
}
</style>