feat: 新增/编辑展示数据表单添加必填项验证，提交表单项内容修正，修改部分样式。

src/views/datamanager/alertformdata/components/common/QuestionFormBase.vue

@@ -3,20 +3,22 @@
     <el-drawer v-model="visible" title="问题详情" direction="rtl" size="30%" :close-on-click-modal="false"
       @close="handleCancel">
       <el-form ref="formRef" :model="formData">
-        <el-form-item label="问题来源：" prop="source">
+        <el-form-item label="问题来源：" prop="source" :rules="{ required: true, message: '请选择问题来源' }">
           <el-select v-model="formData.source" placeholder="请选择问题来源" clearable @change="handleSelectChange">
             <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item label="问题类型：" prop="issueType">
+        <el-form-item label="问题类型：" prop="issueType" :rules="{ required: true, message: '请选择问题类型' }">
           <el-select v-model="formData.issueType" placeholder="请选择问题类型" clearable>
             <el-option v-for="item in options" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="问题描述：" prop="description">
-          <el-input v-model="formData.description" type="textarea"></el-input>
+        <el-form-item label="问题描述：" prop="description" :rules="{ required: true, message: '请输入问题描述，不超过100个字' }">
+          <el-input v-model="formData.description" type="textarea" maxlength="100" autosize show-word-limit
+            placeholder="请输入问题描述，不超过100个字"></el-input>
         </el-form-item>
-        <el-form-item label="问题图片：" prop="pictures">
+        <el-form-item label="问题图片：" prop="pictures" :rules="{ required: true, message: '请至少上传一张图片' }">
+          <p>(建议尺寸192*108，大小10M以下)</p>
           <el-upload v-model:file-list="fileList" action="/skyeye-admin-api/issue/uploadPicture"
             list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
             :on-success="handleAvatarSuccess" :headers="getHeaders()" :data="{ bizType: 'PROBLEM_REPORT' }">
@@ -28,22 +30,24 @@
             <img w-full :src="dialogImageUrl" alt="Preview Image" />
           </el-dialog>
         </el-form-item>
-        <el-form-item label="问题地点：" prop="workspaceId">
-          <el-cascader v-model="workLocation" :options="locationOptions" :props="location" clearable
-            @change="handleCascaderChange" />
+        <el-form-item label="问题地点：" prop="workspaceId" :rules="{ required: true, message: '请选择问题地点' }">
+          <el-cascader v-model="workLocation" :options="locationOptions" :props="location" placeholder="请选择问题地点"
+            clearable @change="handleCascaderChange" />
         </el-form-item>
-        <el-form-item label="问题时间：" prop="issueTime">
+        <el-form-item label="问题时间：" prop="issueTime" :rules="{ required: true, message: '请选择问题时间' }">
           <el-date-picker v-model="formData.issueTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss.SSS"
-            placeholder="请选择时间" />
+            placeholder="请选择问题时间" />
         </el-form-item>
-        <el-form-item label="问题状态：" prop="issueState">
-          <el-select v-model="formData.issueState" placeholder="请选择问题状态">
+        <el-form-item label="问题状态：" prop="issueState" :rules="{ required: true, message: '请选择问题状态' }">
+          <el-select v-model="formData.issueState" placeholder="请选择问题状态" clearable>
             <el-option v-for="item in issueStateOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button @click="handleCancel">取消</el-button>
-          <el-button type="primary" @click="handleSubmit">保存</el-button>
+          <div class="btn-box">
+            <el-button @click="handleCancel">取消</el-button>
+            <el-button type="primary" @click="handleSubmit(formRef)">保存</el-button>
+          </div>
         </el-form-item>
       </el-form>
     </el-drawer>
@@ -75,14 +79,16 @@ interface FormModel {
   description?: string,    // 描述
   pictures?: string[],     // 图片
   workshopId?: number,     // 车间id
+  workshopName?: string,
   workspaceId?: number,    // 工位id
-  issueTime?: string,      // 时间（issueTime为空时填充createdAt）
+  workspaceName?: string,
+  issueTime?: string,      // 时间（issueTime）
   issueState?: number,     // 状态
 };
 
 const visible = ref(true);
 const { aiOptions, manualOptions, getAIOptions, getManualOptions } = useIssueType();
-const { locationOptions, getLocationOptions } = useWorkLocation();
+const { locationOptions, getLocationOptions, getNameByWorkid } = useWorkLocation();
 
 const props = defineProps<Props>();
 const emits = defineEmits(['saveForm', 'closeForm']);
@@ -107,7 +113,6 @@ const handleSelectChange = () => {
   formData.issueType = undefined;
 };
 const options = computed(() => {
-
   if (Number(formData.source) === SourceType.ai && aiOptions.value.length > 0) {
     return aiOptions.value;
   }
@@ -117,8 +122,17 @@ const options = computed(() => {
   return []
 });
 const handleCascaderChange = () => {
-  formData.workshopId = workLocation.value[0];
-  formData.workspaceId = workLocation.value[1];
+  if (workLocation.value != null) {
+    formData.workshopId = workLocation.value[0];
+    formData.workspaceId = workLocation.value[1];
+    const tempString = getNameByWorkid(formData.workshopId, formData.workspaceId, locationOptions.value);
+    const strFlag = tempString.indexOf('-');
+    formData.workshopName = tempString.slice(0, strFlag);
+    formData.workspaceName = tempString.slice(strFlag + 1);
+  } else {
+    Reflect.deleteProperty(formData, "workshopId");
+    Reflect.deleteProperty(formData, "workspaceId");
+  }
 };
 
 const handleCopyData = () => {
@@ -142,8 +156,16 @@ const handleCancel = () => {
 };
 
 // 保存
-const handleSubmit = () => {
-  emits('saveForm', formData);
+const handleSubmit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!', formData);
+      emits('saveForm', formData);
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
 };
 
 // 图片上传
@@ -178,4 +200,33 @@ onBeforeMount(() => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+:deep(.el-drawer__header) {
+  position: relative;
+
+  >:first-child {
+    margin-left: 32px;
+    font-weight: 600;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.88);
+  }
+
+  .el-drawer__close-btn {
+    position: absolute;
+    color: #000;
+  }
+}
+
+.btn-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+p {
+  font-size: 10px;
+  color: #A8ABB2;
+}
+</style>

src/views/datamanager/alertformdata/components/default/Default.vue

@@ -265,7 +265,7 @@ onBeforeMount(() => {
 }
 
 .table-list {
-  height: calc(100vh - 400px);
+  height: calc(100vh - 350px);
   overflow-y: scroll;
 
   .action-bar {

src/views/datamanager/alertformdata/components/show/Show.vue

@@ -258,7 +258,7 @@ onBeforeMount(() => {
 }
 
 .table-list {
-  height: calc(100vh - 400px);
+  height: calc(100vh - 350px);
   overflow-y: scroll;
 
   .action-bar {