字段内容管理校验

src/views/manage/labelfieldcontent/index.vue

@@ -177,7 +177,7 @@
             placeholder="请选择字段信息"
             style="width: 260px"
             clearable
-            @change=change
+            @change="change"
           >
             <el-option
               v-for="item in labelfieldList"
@@ -229,12 +229,12 @@
             label="画像字段标识"
             :rules="rules.fieldContentList.fieldMark"
             :prop="`fieldContentList.${index}.fieldMark`"
+            
           >
             <el-input
               style="width: 260px"
               v-model="aitem.fieldMark"
               placeholder="请输入画像字段标识,例如:${content}"
-              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
             />
           </el-form-item>
           <el-form-item label="内容备注信息" prop="contentRemark">
@@ -268,8 +268,8 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-     <!--修改标签字段内容信息对话框 -->
-     <el-dialog
+    <!--修改标签字段内容信息对话框 -->
+    <el-dialog
       :title="title"
       :visible.sync="openup"
       width="1200px"
@@ -288,7 +288,7 @@
             placeholder="请选择字段信息"
             style="width: 260px"
             clearable
-            @change=change
+            @change="change"
           >
             <el-option
               v-for="item in labelfieldList"
@@ -299,63 +299,47 @@
             </el-option>
           </el-select> </el-form-item
         ><br />
-        
-          <el-form-item
-            label="内容名称"
-         
-            prop="contentName"
-          >
-            <el-input
-              v-model="form.contentName"
-              placeholder="请输入内容名称"
-              style="width: 260px"
-            />
-          </el-form-item>
-          <el-form-item
-            label="结果预览"
 
-            prop="resultPreview"
-          >
-            <el-input
-              v-model="form.resultPreview"
-              placeholder="请输入结果预览"
-              style="width: 260px"
-            />
-          </el-form-item>
-          <el-form-item
-            label="内容排序"
+        <el-form-item label="内容名称" prop="contentName">
+          <el-input
+            v-model="form.contentName"
+            placeholder="请输入内容名称"
+            style="width: 260px"
+          />
+        </el-form-item>
+        <el-form-item label="结果预览" prop="resultPreview">
+          <el-input
+            v-model="form.resultPreview"
+            placeholder="请输入结果预览"
+            style="width: 260px"
+          />
+        </el-form-item>
+        <el-form-item label="内容排序" prop="contentSort">
+          <el-input-number
+            v-model="form.contentSort"
+            controls-position="right"
+            :min="0"
+            placeholder="请输入内容排序"
+            style="width: 260px"
+          />
+        </el-form-item>
 
-            prop="contentSort"
-          >
-            <el-input-number
-              v-model="form.contentSort"
-              controls-position="right"
-              :min="0"
-              placeholder="请输入内容排序"
-              style="width: 260px"
-            />
-          </el-form-item>
-
-          <el-form-item
-            label="画像字段标识"
-            prop="fieldMark"
-          >
-            <el-input
-              style="width: 260px"
-              v-model="form.fieldMark"
-              placeholder="请输入画像字段标识,例如:${content}"
-              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
-            />
-          </el-form-item>
-          <el-form-item label="内容备注信息" prop="contentRemark">
-            <el-input
-              type="textarea"
-              v-model="form.contentRemark"
-              placeholder="请输入内容备注信息"
-              style="width: 260px"
-            />
-          </el-form-item>
+        <el-form-item label="画像字段标识" prop="fieldMark">
+          <el-input
+            style="width: 260px"
+            v-model="form.fieldMark"
+            placeholder="请输入画像字段标识,例如:${content}"
 
+          />
+        </el-form-item>
+        <el-form-item label="内容备注信息" prop="contentRemark">
+          <el-input
+            type="textarea"
+            v-model="form.contentRemark"
+            placeholder="请输入内容备注信息"
+            style="width: 260px"
+          />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -371,48 +355,95 @@ import { listLabelfieldcontent, getLabelfieldcontent, delLabelfieldcontent, addL
 export default {
   name: "Labelfieldcontent",
   data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 标签字段内容信息表格数据
-      labelfieldcontentList: [],
-      labelfieldList:[],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      openup:false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        fieldId: null,
-        fieldName: null,
-        contentName: null,
-        contentCode: null,
-        resultPreview: null,
-        contentSort: null,
-        contentRemark: null,
-        fieldMark: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        fieldId: [
-          { required: true, message: "画像标签和知识库字段表id不能为空", trigger: "blur" }
-        ],
-        fieldContentList: {
+
+    var validateInput = (rule, value, callback) => {
+      const regex =/^\$/;
+       if (!value) {
+          callback(new Error("画像字段标识不能为空"));
+        }else if (!regex.test(value)){
+        callback(new Error('画像字段标识格式有误，请以$开头'));
+        }else{
+        callback();
+        }
+      };
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 标签字段内容信息表格数据
+        labelfieldcontentList: [],
+        labelfieldList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        openup: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          fieldId: null,
+          fieldName: null,
+          contentName: null,
+          contentCode: null,
+          resultPreview: null,
+          contentSort: null,
+          contentRemark: null,
+          fieldMark: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+          fieldId: [
+            { required: true, message: "请选择字段信息", trigger: "blur" }
+          ],
+          fieldContentList: {
+            contentName: [
+              {
+                required: true,
+                message: "请输入内容名称",
+                trigger: "blur",
+              },
+            ],
+            resultPreview: [
+              {
+                required: true,
+                message: "请输入结果预览",
+                trigger: "blur",
+              },
+            ],
+            contentSort: [
+              {
+                required: true,
+                message: "请输入内容排序",
+                trigger: "blur",
+              },
+            ],
+            fieldMark: [
+              {
+    
+                required: true,
+                trigger: "blur",
+                validator: validateInput
+              },
+            ],
+
+          },
+        },
+        rulesup: {
+          fieldId: [
+            { required: true, message: "画像标签和知识库字段表id不能为空", trigger: "blur" }
+          ],
           contentName: [
             {
               required: true,
@@ -437,210 +468,176 @@ export default {
           fieldMark: [
             {
               required: true,
-              message: "请输入画像字段表示",
+              // message: "请输入画像字段表示",
               trigger: "blur",
+              validator: validateInput
             },
           ],
 
         },
-      },
-      rulesup:{
-        fieldId: [
-          { required: true, message: "画像标签和知识库字段表id不能为空", trigger: "blur" }
-        ],
-        contentName: [
-            {
-              required: true,
-              message: "请输入内容名称",
-              trigger: "blur",
-            },
-          ],
-          resultPreview: [
-            {
-              required: true,
-              message: "请输入结果预览",
-              trigger: "blur",
-            },
-          ],
-          contentSort: [
-            {
-              required: true,
-              message: "请输入内容排序",
-              trigger: "blur",
-            },
-          ],
-          fieldMark: [
-            {
-              required: true,
-              message: "请输入画像字段表示",
-              trigger: "blur",
-            },
-          ],
-
-      },
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询标签字段内容信息列表 */
-    getList() {
-      this.loading = true;
-      listLabelfieldcontent(this.queryParams).then(response => {
-        this.labelfieldcontentList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 字段信息
-    getlabel() {
-      this.loading = true;
-      labelFieldInfoList().then(response => {
-        this.labelfieldList = response.data;
-        // this.total = response.total;
-        this.loading = false;
-      });
-
-    },
-    change(e){
-      this.form.fieldName=this.labelfieldList.find(f=> f.id==e).fieldName
-      console.log(e)
-
-    },
-
-    addnurseClassifyitem() {
-      var obj = {
-        contentName: null,
-        resultPreview: null,
-        contentSort: undefined,
-        fieldMark: null,
-        contentRemark: null,
       };
-      if (this.form.fieldContentList.length == 5) {
-        this.$message.error("最多批量添加5条");
-      } else {
-        this.form.fieldContentList.push(obj);
-        console.log(this.form)
-      }
     },
-    //添加时删除item
-    delnurseClassifyitem(index) {
-      this.form.fieldContentList.splice(index, 1);
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-        // 修改取消
-        cancelup(){
-      this.openup=false,
-      this.reset();
-
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        fieldId: null,
-        fieldName: null,
-        contentName: null,
-        contentCode: null,
-        resultPreview: null,
-        contentSort: undefined,
-        contentRemark: null,
-        fieldMark: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.form = {
-        fieldContentList: [
-          {
-            contentName: null,
-            resultPreview: null,
-            contentSort: undefined,
-            fieldMark: null,
-            contentRemark: null,
-          },
-        ],
-      };
-      this.getlabel();
-      this.title = "添加标签字段内容信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      this.getlabel();
-      getLabelfieldcontent(id).then(response => {
-        this.form = response.data;
-        this.openup = true;
-        this.title = "修改标签字段内容信息";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateLabelfieldcontent(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.openup = false;
-              this.getList();
-            });
-          } else {
-            addLabelfieldcontent(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除标签字段内容信息编号为"' + ids + '"的数据项？').then(function () {
-        return delLabelfieldcontent(ids);
-      }).then(() => {
+      created() {
         this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => { });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('manage/labelfieldcontent/export', {
-        ...this.queryParams
-      }, `labelfieldcontent_${new Date().getTime()}.xlsx`)
+      },
+        methods: {
+      /** 查询标签字段内容信息列表 */
+      getList() {
+        this.loading = true;
+        listLabelfieldcontent(this.queryParams).then(response => {
+          this.labelfieldcontentList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 字段信息
+      getlabel() {
+        this.loading = true;
+        labelFieldInfoList().then(response => {
+          this.labelfieldList = response.data;
+          // this.total = response.total;
+          this.loading = false;
+        });
+
+      },
+      change(e) {
+        this.form.fieldName = this.labelfieldList.find(f => f.id == e).fieldName
+        console.log(e)
+
+      },
+
+      addnurseClassifyitem() {
+        var obj = {
+          contentName: null,
+          resultPreview: null,
+          contentSort: undefined,
+          fieldMark: null,
+          contentRemark: null,
+        };
+        if (this.form.fieldContentList.length == 5) {
+          this.$message.error("最多批量添加5条");
+        } else {
+          this.form.fieldContentList.push(obj);
+          console.log(this.form)
+        }
+      },
+      //添加时删除item
+      delnurseClassifyitem(index) {
+        this.form.fieldContentList.splice(index, 1);
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 修改取消
+      cancelup() {
+        this.openup = false,
+          this.reset();
+
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          fieldId: null,
+          fieldName: null,
+          contentName: null,
+          contentCode: null,
+          resultPreview: null,
+          contentSort: undefined,
+          contentRemark: null,
+          fieldMark: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.form = {
+          fieldContentList: [
+            {
+              contentName: null,
+              resultPreview: null,
+              contentSort: undefined,
+              fieldMark: null,
+              contentRemark: null,
+            },
+          ],
+        };
+        this.getlabel();
+        this.title = "添加标签字段内容信息";
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        const id = row.id || this.ids
+        this.getlabel();
+        getLabelfieldcontent(id).then(response => {
+          this.form = response.data;
+          this.openup = true;
+          this.title = "修改标签字段内容信息";
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateLabelfieldcontent(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.openup = false;
+                this.getList();
+              });
+            } else {
+              addLabelfieldcontent(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$modal.confirm('是否确认删除标签字段内容信息编号为"' + ids + '"的数据项？').then(function () {
+          return delLabelfieldcontent(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => { });
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download('manage/labelfieldcontent/export', {
+          ...this.queryParams
+        }, `labelfieldcontent_${new Date().getTime()}.xlsx`)
+      }
     }
-  }
-};
+  };
 </script>
 <style lang="scss">
 .el-input-number .el-input__inner {