指标管理数据集和计划数据➡计划数据集增加查询语句敏感词校验与限制表单提交

 src/views/data/ind/data/DataSetForm.vue

@@ -23,7 +23,11 @@
      <el-form-item label="查询语句" prop="querySql">
        <el-input v-model="formData.querySql" placeholder="请输入内容" type="textarea" maxlength="500"
                  :rows="6"
                  @input="checkSensitiveWords"
                  show-word-limit spellcheck="false"/>
      </el-form-item>
      <el-form-item v-if="showError">
        <p>输入中包含以下敏感词：<span style="color: red">{{sensitiveMessage}}</span></p>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" maxlength="100"
@@ -31,25 +35,29 @@
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button :disabled="disableSubmit" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import * as DataSetApi from '@/api/data/ind/data/data.set'
  import { CommonStatusEnum } from '@/utils/constants'
  import * as DataSourceConfigApi from "@/api/infra/dataSourceConfig";
import * as DataSetApi from '@/api/data/ind/data/data.set'
import * as DataSourceConfigApi from "@/api/infra/dataSourceConfig";

  defineOptions({ name: 'IndDataSetForm' })
defineOptions({ name: 'IndDataSetForm' })

  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗

  const showError = ref(false)
  const foundSensitiveWords = ref()
  const sensitiveMessage = ref('')
  const sensitiveWords = [';', 'master', 'truncate', 'insert', 'select', 'delete', 'update', 'declare', 'alter', 'drop']

  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formLoading = ref(false) // 表单的加载中：修改时的数据加载
  const disableSubmit = ref(false) // 禁止提交
  const formType = ref('') // 表单的类型：create - 新增；update - 修改
  const formData = ref({
    id: undefined,
@@ -85,10 +93,26 @@
        formLoading.value = false
      }
    }


  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗

  /**
   * 验证敏感词
   */
  const checkSensitiveWords = () => {
    showError.value = false;
    const regex = new RegExp(sensitiveWords.map(word => `${word}`).join('|'), 'gi');
    let matches = formData.value.querySql.match(regex);
    if (matches) {
      showError.value = true;
      foundSensitiveWords.value = Array.from(new Set(matches));
      disableSubmit.value = true
      sensitiveMessage.value = foundSensitiveWords.value.join('、')
    } else {
      foundSensitiveWords.value = undefined
      disableSubmit.value = false
    }
  }

  /** 提交表单 */
  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
@@ -99,6 +123,7 @@
    if (!valid) return
    // 提交请求
    formLoading.value = true
    disableSubmit.value = true
    try {
      const data = formData.value as DataSetApi.DataSetVO
      if (formType.value === 'create') {
@@ -113,6 +138,7 @@
      emit('success')
    } finally {
      formLoading.value = false
      disableSubmit.value = false
    }
  }


 src/views/data/plan/data/DataSetForm.vue

@@ -22,7 +22,10 @@
      </el-form-item>
      <el-form-item label="查询语句" prop="querySql">
        <el-input v-model="formData.querySql" placeholder="请输入内容" type="textarea" maxlength="300"
                  show-word-limit :rows="6" spellcheck="false"/>
                  show-word-limit :rows="6" @input="checkSensitiveWords" spellcheck="false"/>
      </el-form-item>
      <el-form-item v-if="showError">
        <p>输入中包含以下敏感词：<span style="color: red">{{sensitiveMessage}}</span></p>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" maxlength="100"
@@ -30,15 +33,13 @@
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button :disabled="disableSubmit" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as DataSetApi from '@/api/data/plan/data'
import { CommonStatusEnum } from '@/utils/constants'
import * as DataSourceConfigApi from "@/api/infra/dataSourceConfig";

defineOptions({ name: 'PlanDataSetForm' })
@@ -46,9 +47,15 @@
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const showError = ref(false)
const foundSensitiveWords = ref()
const sensitiveMessage = ref('')
const sensitiveWords = [';', 'master', 'truncate', 'insert', 'select', 'delete', 'update', 'declare', 'alter', 'drop']

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formLoading = ref(false) // 表单的加载中：修改时的数据加载；
const disableSubmit = ref(false) // 禁止提交
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
@@ -84,10 +91,26 @@
      formLoading.value = false
    }
  }


}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/**
 * 验证敏感词
 */
const checkSensitiveWords = () => {
  showError.value = false;
  const regex = new RegExp(sensitiveWords.map(word => `${word}`).join('|'), 'gi');
  let matches = formData.value.querySql.match(regex);
  if (matches) {
    showError.value = true;
    foundSensitiveWords.value = Array.from(new Set(matches));
    disableSubmit.value = true
    sensitiveMessage.value = foundSensitiveWords.value.join('、')
  } else {
    foundSensitiveWords.value = undefined
    disableSubmit.value = false
  }
}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
@@ -98,6 +121,7 @@
  if (!valid) return
  // 提交请求
  formLoading.value = true
  disableSubmit.value = true
  try {
    const data = formData.value as DataSetApi.DataSetVO
    if (formType.value === 'create') {
@@ -112,6 +136,7 @@
    emit('success')
  } finally {
    formLoading.value = false
    disableSubmit.value = false
  }
}