设置抓取规则修改

src/views/officialSeal/components/grabRules.vue

     <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>
+            <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-button type="primary" icon="el-icon-delete" style="margin-bottom: 20px;"
+                            @click="deleteForm(item)">删除</el-button>
                         <el-row>
-                            <el-col :span="12">
+                            <!-- <el-col :span="12">
                                 <el-form-item label="字段：" :prop="'forms.' + index + '.column'" :rules="[
                                     {
                                         required: true,
                                 ]">
                                     <el-input v-model="item.column" placeholder="请输入字段" />
                                 </el-form-item>
+                                <el-form-item label="字段：" :prop="'forms.' + index + '.column'" :rules="[
+                                    {
+                                        required: true,
+                                        message: '字段不能为空',
+                                    },
+                                ]">
+                                    <el-select v-model="item.column" placeholder="请选择">
+                                        <el-option v-for="dict in selectList" :key="dict.id" :label="dict.column"
+                                            :value="dict.column"></el-option>
+                                    </el-select>
+                                </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-form-item label="字段名：" :prop="'forms.' + index + '.columnName'" :rules="[
+                                    {
+                                        required: true,
+                                        message: '字段名不能为空',
+                                    },
+                                ]">
+                                    <el-select v-model="item.columnName" placeholder="请选择" @change="columnNameChange(item)">
+                                        <el-option v-for="dict in dict.type.case_built_type" :key="dict.value"
+                                            :label="dict.label" :value="dict.label"></el-option>
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="抓取文件名：" :prop="'forms.' + index + '.fileName'" :rules="[
+                                    {
+                                        required: true,
+                                        message: '抓取文件名不能为空',
+                                    },
+                                ]">
+                                    <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: '开始抓取字段不能为空',
+                                    },
+                                ]">
+                                    <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: '结束抓取字段不能为空',
+                                    },
+                                ]">
+                                    <el-input v-model="item.endContent" placeholder="结束抓取字段" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-form>
+            </div>
+            <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px;"
+                @click="addFormCustom">新增自定义抓取规则</el-button>
+            <div class="formDom">
+                <el-form ref="form_custom" :model="formData_custom" label-width="150px">
+                    <div class="formItem" v-for="(item, index) in formData_custom.forms" :key="item.key">
+                        <el-button type="primary" icon="el-icon-delete" style="margin-bottom: 20px;"
+                            @click="deleteFormCustom(item)">删除</el-button>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="字段：" :prop="'forms.' + index + '.column'" :rules="[
+                                    {
+                                        required: true,
+                                        message: '字段不能为空',
+                                    },
+                                ]">
+                                    <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="请输入字段名" />
                                     {
                                         required: true,
                                         message: '抓取文件名不能为空',
-                                        trigger: 'blur',
                                     },
                                 ]">
                                     <el-input v-model="item.fileName" placeholder="请输入抓取文件名" />
                                     {
                                         required: true,
                                         message: '开始抓取字段不能为空',
-                                        trigger: 'blur',
                                     },
                                 ]">
                                     <el-input v-model="item.startContent" placeholder="请输入开始抓取字段" />
                                     {
                                         required: true,
                                         message: '结束抓取字段不能为空',
-                                        trigger: 'blur',
                                     },
                                 ]">
                                     <el-input v-model="item.endContent" placeholder="结束抓取字段" />
 } from "@/api/officialSeal/officialSeal.js";
 export default {
     props: ["rulesVisable", "rulesData", "queryParams"],
+    dicts: ["case_built_type"],
     data() {
         return {
             formData: {
                 forms: [{
-                    fileName: "",
-                    startContent: '',
-                    endContent: '',
-                    column: "",
-                    columnName: "",
-                    key: Date.now()
+                    // fileName: "",
+                    // startContent: '',
+                    // endContent: '',
+                    // column: "",
+                    // columnName: "",
                 }]
             },
+            formData_custom: {
+                forms: []
+            },
+            // selectList: []
         };
     },
     watch: {
         rulesData(val) {
             if (val) {
-                console.log(val, "llllllllllllllll");
-                this.getFatchRuleByTemplateidFn({ id: val.id })
+                this.formData.forms = [];
+                this.formData_custom.forms = [];
+                // this.getFatchRuleByTemplateidFn({ id: val.id })
             }
         }
     },
                 startContent: '',
                 endContent: '',
                 column: "",
-                columnName: ""
+                columnName: "",
+                isDefault: 0
             });
         },
+        deleteForm(item) {
+            var index = this.formData.forms.indexOf(item)
+            if (index !== -1) {
+                this.formData.forms.splice(index, 1)
+            }
+        },
+        deleteFormCustom(item) {
+            var index = this.formData_custom.forms.indexOf(item)
+            if (index !== -1) {
+                this.formData_custom.forms.splice(index, 1)
+            }
+        },
+        addFormCustom() {
+            this.formData_custom.forms.push({
+                fileName: "",
+                startContent: '',
+                endContent: '',
+                column: "",
+                columnName: "",
+                isDefault: 1
+            });
+        },
+        columnNameChange(item){
+            let result = this.dict.type.case_built_type.find((data=>{
+                return data.label == item.columnName
+            }))
+            item.column = result.value;
+        },
         submitRules() {
             this.$refs['form'].validate((valid) => {
                 if (valid) {
-                   this.saveFatchRulesFn({
-                    id:this.rulesData.id,
-                    fatchRules:this.formData.forms
-                   })
+                    this.$refs['form_custom'].validate((valid_custom) => {
+                        if (valid_custom) {
+                            let paramsList = this.formData.forms.concat(this.formData_custom.forms)
+                            this.saveFatchRulesFn({
+                                id: this.rulesData.id,
+                                fatchRules: paramsList
+                            })
+                        }
+                    })
                 }
             });
         },
         // 根据id获取抓取规则
-        getFatchRuleByTemplateidFn(data) {
-            getFatchRuleByTemplateid(data).then(res => {
-                this.formData.forms = res.data;
-            })
-        },
+        // getFatchRuleByTemplateidFn(data) {
+        //     getFatchRuleByTemplateid(data).then(res => {
+        //         // this.formData.forms = res.data;
+        //         this.selectList = res.data
+        //     })
+        // },
         // 提交抓取规则
         saveFatchRulesFn(data) {
             saveFatchRules(data).then(res => {
                 this.$message.success('提交成功');
                 this.$emit("cancelRules");
-                this
-                .$emit('getList', that.queryParams);
+                this.$emit('getList', that.queryParams);
             })
         }
     },
     border: 1px solid #c2bcbc;
     padding: 20px;
     margin-bottom: 15px;
-    max-height: 700px;
+    max-height: 300px;
     overflow-y: scroll;
 }
 </style>