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
  }
}