8/1 限制前端输入字数

2026-08-01 10:11:38 +08:00
parent 2907f9202c
commit ca5f214bac
33 changed files with 271 additions and 253 deletions
--- a/src/views/system/Questionnaire/addQuestionnaire.vue
+++ b/src/views/system/Questionnaire/addQuestionnaire.vue
@@ -16,7 +16,7 @@
                  </el-radio-group>
                  <Holder v-if="form.scope === '1'" returnvalue="id" ref="HolderRef" :isMultiple="true" :userid="checkoutUses" @change="handleSelect">
                    <template #default>
-                      <el-button type="primary" link @click="OpenUseTablesfun">选择业主</el-button>
+                      <el-button type="primary" link @click="OpenUseTablesFun">选择业主</el-button>
                    </template>
                  </Holder>
                </div>
@@ -26,9 +26,9 @@

          <el-row>
            <el-col :span="8">
-              <el-form-item label="时间范围" prop="timedata">
+              <el-form-item label="时间范围" prop="timeData">
                <el-date-picker
-                  v-model="timedata"
+                  v-model="timeData"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  type="datetimerange"
@@ -73,18 +73,16 @@ const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnair
 const router = useRouter();
 const route = useRoute();

-import { listResident } from '@/api/system/residentReviewProcess/resident';
-
 const form = ref({
  scope: '0',
  residents: '',
  remark: ''
 });
-const timedata = ref([]);
+const timeData = ref([]);
 //  ! 路由参数 --------------------------------------------------------------------------------
 // 打开
 const HolderRef = ref<InstanceType<typeof Holder>>();
-function OpenUseTablesfun() {
+function OpenUseTablesFun() {
  HolderRef.value.open(form.value.residents.split(',').filter((item) => item));
 }
 // 多选
@@ -92,8 +90,8 @@ const checkoutUses = ref([]);
 function handleSelect(val) {
  checkoutUses.value = val;
  form.value.residents = val
-    .map((item) => item)
-    .filter((item) => item)
+    .map((item: string) => item)
+    .filter((item: string) => item)
    .join(',');
 }

@@ -104,25 +102,21 @@ const editData = ref<QuestionComponentnaireForm>(null);
 //  ! 路由参数 --------------------------------------------------------------------------------
 const userid = ref(null);

-if (route.query.id) {
-  userid.value = route.query.id;
-  handleEdit(userid.value);
-} else {
-  handleAdd();
-}
-
-//
-const tableData = ref([]);
-
+onMounted(() => {
+  if (route.query.id) {
+    userid.value = route.query.id;
+    handleEdit(userid.value);
+  } else {
+    handleAdd();
+  }
+});
 // 新增问卷
 function handleAdd() {
  editData.value = null;
  questionnaireEditRef.value?.reset();
 }
 // 编辑问卷
-async function handleEdit(id: string | number) {
-  const res = await listResident();
-  tableData.value = res.rows;
+function handleEdit(id: string | number) {
  // 父组件自己调用接口获取数据
  getQuestionnaire(id).then((res) => {
    editData.value = res.data as QuestionComponentnaireForm;
@@ -137,7 +131,7 @@ async function handleEdit(id: string | number) {
      .split(',')
      .filter((item) => item)
      .map((item) => item);
-    timedata.value = [res.data.startTime, res.data.endTime];
+    timeData.value = [res.data.startTime, res.data.endTime];
  });
 }

@@ -145,13 +139,13 @@ async function handleEdit(id: string | number) {
 async function handleSave(data: QuestionComponentnaireForm) {
  try {
    // 父组件自己调用接口提交
-    if (userid.value) {
+    if (userid.value !== null) {
      await updateQuestionnaire({
        ...data,
        content: JSON.stringify(data.content),
        status: '0', // 草稿状态
-        startTime: timedata.value[0],
-        endTime: timedata.value[1],
+        startTime: timeData.value[0],
+        endTime: timeData.value[1],
        ...form.value
      });
    } else {
@@ -159,8 +153,8 @@ async function handleSave(data: QuestionComponentnaireForm) {
        ...data,
        content: JSON.stringify(data.content),
        status: '0', // 草稿状态
-        startTime: timedata.value[0],
-        endTime: timedata.value[1],
+        startTime: timeData.value[0],
+        endTime: timeData.value[1],
        ...form.value
      });
    }
@@ -175,13 +169,13 @@ async function handleSave(data: QuestionComponentnaireForm) {
 // 发布问卷
 async function handlePublish(data: QuestionComponentnaireForm) {
  try {
-    if (userid.value) {
+    if (userid.value !== null) {
      await updateQuestionnaire({
        ...data,
        content: JSON.stringify(data.content),
        status: '1', // 发布状态
-        startTime: timedata.value[0],
-        endTime: timedata.value[1],
+        startTime: timeData.value[0],
+        endTime: timeData.value[1],
        ...form.value
      });
    } else {
@@ -189,8 +183,8 @@ async function handlePublish(data: QuestionComponentnaireForm) {
        ...data,
        content: JSON.stringify(data.content),
        status: '1', // 发布状态
-        endTime: timedata.value[1],
-        startTime: timedata.value[0],
+        endTime: timeData.value[1],
+        startTime: timeData.value[0],
        ...form.value
      });
    }
@@ -224,7 +218,7 @@ function handleCancel() {
  position: relative;

  .formBody {
-    .checkoutSideUsesbox {
+    .checkoutSideUsesBox {
      margin-left: 130px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
--- a/src/views/system/Questionnaire/components/QuestionnaireEdit.vue
+++ b/src/views/system/Questionnaire/components/QuestionnaireEdit.vue
@@ -36,8 +36,8 @@
          </template>

          <div class="question-title-area">
-            <el-input maxlength="20" show-word-limit v-model="form.title" placeholder="请输入问卷标题" class="title-input" />
-            <el-input maxlength="200" show-word-limit v-model="form.description" type="textarea" placeholder="请输入问卷描述（选填）" />
+            <el-input maxlength="20" show-word-limit v-model.trim="form.title" placeholder="请输入问卷标题" class="title-input" />
+            <el-input maxlength="200" show-word-limit v-model.trim="form.description" type="textarea" placeholder="请输入问卷描述（选填）" />
          </div>

          <draggable v-model="form.content" group="components" item-key="cid" class="question-list" @add="handleAddQuestion">
@@ -72,16 +72,21 @@
          </template>
          <el-form style="position: sticky; top: 60px" label-width="80px">
            <el-form-item label="题目标题">
-              <el-input v-model="activeQuestion.title" placeholder="请输入题目标题" />
+              <el-input maxlength="20" v-model.trim="activeQuestion.title" placeholder="请输入题目标题" />
            </el-form-item>
            <el-form-item label="是否必填">
-              <el-switch v-model="activeQuestion.required" />
+              <el-switch v-model.trim="activeQuestion.required" />
            </el-form-item>
            <!-- 单选/多选特有属性 -->
            <template v-if="activeQuestion.type === 'radio' || activeQuestion.type === 'checkbox'">
              <el-divider content-position="left">选项设置</el-divider>
              <div v-for="(opt, idx) in activeQuestion.options" :key="idx" class="option-item">
-                <el-input v-model="opt.label" placeholder="选项内容" style="width: 200px; margin-right: 10px; margin-bottom: 10px" />
+                <el-input
+                  maxlength="20"
+                  v-model.trim="opt.label"
+                  placeholder="选项内容"
+                  style="width: 200px; margin-right: 10px; margin-bottom: 10px"
+                />
                <el-button link type="danger" :icon="Delete" @click="activeQuestion.options.splice(idx, 1)"> 删除 </el-button>
              </div>
              <el-button type="primary" @click="activeQuestion.options.push({ label: '新选项' })"> 添加选项 </el-button>