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,15 +35,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/ind/data/data.set'
  import { CommonStatusEnum } from '@/utils/constants'
  import * as DataSourceConfigApi from "@/api/infra/dataSourceConfig";

  defineOptions({ name: 'IndDataSetForm' })
@@ -47,9 +49,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,
@@ -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
    }
  }