新建项目增加校验

src/locales/en.json

@@ -65,7 +65,10 @@
     "total": "Total",
     "selectAll": "Select All",
     "delete": "Delete",
-    "ok": "OK"
+    "ok": "OK",
+    "inputProjectName": "Please enter project name",
+    "inputProjectDescription": "Please enter project description",
+    "inputProjectKeywords": "Please enter project keywords"
   },
   "dialog": {
     "ok": "OK",

src/locales/zh-CN.json

@@ -65,7 +65,10 @@
     "total": "总计",
     "selectAll": "全选",
     "delete": "删除",
-    "ok": "确定"
+    "ok": "确定",
+    "inputProjectName": "请输入项目名称",
+    "inputProjectDescription": "请输入项目描述",
+    "inputProjectKeywords": "请输入项目关键词"
   },
   "dialog": {
     "ok": "确认",

src/views/project/index.vue

@@ -3,159 +3,261 @@
     <el-header class="project-header">
       <div class="boxcontainer">
         <el-button class="box">
-          <img :src="getImgPath('open.png')" style="width: 20px; margin-right: 5px;" />
-          {{ $t('project.open') }}
+          <img
+            :src="getImgPath('open.png')"
+            style="width: 20px; margin-right: 5px"
+          />
+          {{ $t("project.open") }}
         </el-button>
         <el-button class="box" @click="addProjectdialog = true">
-          <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
-          {{ $t('project.create') }}
+          <img
+            :src="getImgPath('blueplus.png')"
+            style="width: 20px; margin-right: 5px"
+          />
+          {{ $t("project.create") }}
         </el-button>
         <el-button class="box">
-          <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
-          {{ $t('project.newcompound') }}
+          <img
+            :src="getImgPath('blueplus.png')"
+            style="width: 20px; margin-right: 5px"
+          />
+          {{ $t("project.newcompound") }}
         </el-button>
         <el-button class="box">
-          <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
-          {{ $t('project.newlibrary') }}
+          <img
+            :src="getImgPath('blueplus.png')"
+            style="width: 20px; margin-right: 5px"
+          />
+          {{ $t("project.newlibrary") }}
         </el-button>
       </div>
-      
-
     </el-header>
     <el-main class="project-main">
       <div class="project-main-header">
         <div class="project-main-header-title">
-            <span style="margin-right: 10px;">{{ $t('project.projectlist') }}</span>
-            <el-input v-model="gd.searchtag" style="width: 200px;margin-right: 5px;">
-            </el-input>
-            <el-button @click="getprojectlist" :icon="Search" style="width: 22px;" class="custom-icon-button"/>
+          <span style="margin-right: 10px">{{
+            $t("project.projectlist")
+          }}</span>
+          <el-input
+            v-model="gd.searchtag"
+            style="width: 200px; margin-right: 5px"
+          >
+          </el-input>
+          <el-button
+            @click="getprojectlist"
+            :icon="Search"
+            style="width: 22px"
+            class="custom-icon-button"
+          />
         </div>
         <div class="project-main-header-actions">
           <el-button class="custom-icon-button">
-            <img :src="getImgPath('daohang.png')" style="width: 22px;"/>
+            <img :src="getImgPath('daohang.png')" style="width: 22px" />
           </el-button>
           <el-button class="custom-icon-button">
-            <img :src="getImgPath('jiaocheng.png')" style="width: 22px;"/>
+            <img :src="getImgPath('jiaocheng.png')" style="width: 22px" />
           </el-button>
           <el-button class="custom-icon-button">
-            <img :src="getImgPath('shiying.png')" style="width: 22px;"/>
+            <img :src="getImgPath('shiying.png')" style="width: 22px" />
           </el-button>
         </div>
-      </div>  
+      </div>
       <div class="project-main-content custom-table">
         <el-table
           ref="tableRef"
           :data="projectlists"
-          style="width: 100%;height: 540px; overflow: auto;"
+          style="width: 100%; height: 540px; overflow: auto"
           @row-click="handleRowClick"
           :row-class-name="tableRowClassName"
         >
-          <el-table-column type="index" :label="$t('project.number')" width="100"></el-table-column>
-          <el-table-column prop="name" :label="$t('project.name')" ></el-table-column>
-          <el-table-column prop="dirsize" :label="$t('project.dirsize')" ></el-table-column>
-          <el-table-column prop="updateTime" :label="$t('project.updateTime')" min-width="100"></el-table-column>
-          <el-table-column prop="uname" :label="$t('project.uname')" ></el-table-column>
-          <el-table-column prop="keywords" :label="$t('project.keywords')" ></el-table-column>
-          <el-table-column prop="remark" :label="$t('project.description')" ></el-table-column>
+          <el-table-column
+            type="index"
+            :label="$t('project.number')"
+            width="100"
+          ></el-table-column>
+          <el-table-column
+            prop="name"
+            :label="$t('project.name')"
+          ></el-table-column>
+          <el-table-column
+            prop="dirsize"
+            :label="$t('project.dirsize')"
+          ></el-table-column>
+          <el-table-column
+            prop="updateTime"
+            :label="$t('project.updateTime')"
+            min-width="100"
+          ></el-table-column>
+          <el-table-column
+            prop="uname"
+            :label="$t('project.uname')"
+          ></el-table-column>
+          <el-table-column
+            prop="keywords"
+            :label="$t('project.keywords')"
+          ></el-table-column>
+          <el-table-column
+            prop="remark"
+            :label="$t('project.description')"
+          ></el-table-column>
         </el-table>
-        
       </div>
       <div class="project-main-pagination">
-        <div class="custom-pagination" >
-            <el-pagination
-                v-model:current-page="gd.currentPage4"
-                v-model:page-size="gd.pageSize4"
-                :page-sizes="[5, 10, 20, 50]"
-                background
-                size="small"
-                layout="prev, slot, sizes, pager, next"
-                :total="parseInt(gd.total)"
-                class="mt-4"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange2"
-            >
-              <template #default>
-                <span>{{ $t('project.total') }} {{ gd.total }}</span>
-              </template>
-            </el-pagination>
+        <div class="custom-pagination">
+          <el-pagination
+            v-model:current-page="gd.currentPage4"
+            v-model:page-size="gd.pageSize4"
+            :page-sizes="[5, 10, 20, 50]"
+            background
+            size="small"
+            layout="prev, slot, sizes, pager, next"
+            :total="parseInt(gd.total)"
+            class="mt-4"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange2"
+          >
+            <template #default>
+              <span>{{ $t("project.total") }} {{ gd.total }}</span>
+            </template>
+          </el-pagination>
         </div>
       </div>
       <div class="project-main-footer lastbtn">
-        <el-button @click="selectAll">{{ $t('project.selectAll') }}</el-button>
-        <el-button @click="deleteSelected" :disabled="selectedRows.length === 0">{{ $t('project.delete') }}</el-button>
-        <el-button @click="confirmSelected" :disabled="selectedRows.length === 0">{{ $t('project.ok') }}</el-button>
+        <el-button @click="selectAll">{{ $t("project.selectAll") }}</el-button>
+        <el-button
+          @click="deleteSelected"
+          :disabled="selectedRows.length === 0"
+          >{{ $t("project.delete") }}</el-button
+        >
+        <el-button
+          @click="confirmSelected"
+          :disabled="selectedRows.length === 0"
+          >{{ $t("project.ok") }}</el-button
+        >
       </div>
     </el-main>
-
   </div>
 
-  <el-dialog v-model="addProjectdialog" align-center :append-to-body="true" 
-    width="500" class="dialog_class" draggable>
-
+  <el-dialog
+    v-model="addProjectdialog"
+    align-center
+    :append-to-body="true"
+    width="500"
+    class="dialog_class"
+    draggable
+  >
     <template #header="{ titleId, titleClass }">
-    <div class="my-header ">
+      <div class="my-header">
         <!-- <el-image :src="icon" fit="contain"></el-image> -->
-        <h4 :id="titleId" :class="titleClass">{{ $t('dialog.new') }}</h4>
-
-    </div>
+        <h4 :id="titleId" :class="titleClass">{{ $t("dialog.new") }}</h4>
+      </div>
     </template>
-    <div>
-    <el-form-item :label="`${$t('project.name')}：`" :label-width="labelWidth">
-        <el-input v-model="newproject.name" class="w-50 m-2" :placeholder="$t('project.inputmessage')" maxlength="100"/>
-    </el-form-item>
-    <el-form-item :label="`${$t('project.keywords')}：`" :label-width="labelWidth">
-        <el-input v-model="newproject.keywords" class="w-50 m-2" :placeholder="$t('project.inputmessage')" maxlength="100"/>
-    </el-form-item>
-    <el-form-item :label="`${$t('project.description')}：`" :label-width="labelWidth">
-        <el-input v-model="newproject.description" class="w-50 m-2" :placeholder="$t('project.inputmessage')" maxlength="500"/>
-    </el-form-item>
-    </div>
+    <el-form
+      :model="newproject"
+      :rules="rules"
+      ref="projectForm"
+      :label-width="labelWidth"
+    >
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item :label="`${$t('project.name')}：`" prop="name">
+            <el-input
+              v-model="newproject.name"
+              class="w-50 m-2"
+              :placeholder="$t('project.inputProjectName')"
+              maxlength="100"
+            />
+          </el-form-item>
+        </el-col>   
+        <el-col :span="24">
+          <el-form-item :label="`${$t('project.keywords')}：`" prop="keywords">
+            <el-input
+              v-model="newproject.keywords"
+              class="w-50 m-2"
+              :placeholder="$t('project.inputProjectKeywords')"
+              maxlength="100"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="`${$t('project.description')}：`" prop="description">
+            <el-input
+              v-model="newproject.description"
+              class="w-50 m-2"
+              :placeholder="$t('project.inputProjectDescription')"
+              maxlength="500"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
     <template #footer>
       <span class="lastbtn">
-        <el-button @click="addProjectdialog = false">{{ $t('dialog.cancel') }}</el-button>
-        <el-button type="primary" @click="addProject();">
-          {{ $t('dialog.ok') }}
+        <el-button @click="addProjectdialog = false">{{
+          $t("dialog.cancel")
+        }}</el-button>
+        <el-button type="primary" @click="submitForm">
+          {{ $t("dialog.ok") }}
         </el-button>
       </span>
     </template>
-
   </el-dialog>
-  
 </template>
 
 <script setup>
-import { request } from "@/utils/request";
+import { request } from "@/utils/request"
 import router from "@/router"
-import { ElMessage, ElButton, ElDialog, ElSelect, ElMessageBox } from 'element-plus'
-import {Search} from '@element-plus/icons-vue'
-import { useI18n } from 'vue-i18n'
-import { useProjectStore } from '@/store/project'
-
+import {
+  ElMessage,
+  ElButton,
+  ElDialog,
+  ElSelect,
+  ElMessageBox
+} from "element-plus"
+import { Search } from "@element-plus/icons-vue"
+import { useI18n } from "vue-i18n"
+import { useProjectStore } from "@/store/project"
 
 const { t, locale } = useI18n()
 
 const projectStore = useProjectStore()
 
+// 表单引用
+const projectForm = ref(null)
+
 const labelWidth = computed(() => {
-  return locale.value === 'zh-CN' ? '70px' : '120px'
+  return locale.value === "zh-CN" ? "80px" : "120px"
 })
 
-let projectlists = ref([]);
-let selectedRows = ref([]);
-let tableRef = ref();
-let addProjectdialog = ref(false);
+let projectlists = ref([])
+let selectedRows = ref([])
+let tableRef = ref()
+let addProjectdialog = ref(false)
 
 let newproject = ref({
-    name: '',
-    description: '',
-    keywords: ''
-});
+  name: "",
+  description: "",
+  keywords: ""
+})
 
 let gd = ref({
-    total: 1,
-    currentPage4: 1,
-    pageSize4:5,
-    searchtag: ''
+  total: 1,
+  currentPage4: 1,
+  pageSize4: 5,
+  searchtag: ""
+})
+
+// 表单校验规则
+const rules = ref({
+  name: [
+    { required: true, message: t('project.inputProjectName'), trigger: 'blur' }
+  ],
+  keywords: [
+    { required: false, message: t('project.inputProjectKeywords'), trigger: 'blur' }
+  ],
+  description: [
+    { required: false, message: t('project.inputProjectDescription'), trigger: 'blur' }
+  ]
 })
 
 const getImgPath = (url) => {
@@ -163,118 +265,133 @@ const getImgPath = (url) => {
 }
 
 const getprojectlist = () => {
-    const params = {
-        transCode: 'ES0001',
-        count: gd.value.pageSize4,
-        page: gd.value.currentPage4,
-        searchtag: gd.value.searchtag,
-    }
-    request(params)
-        .then((res) => {
-            // console.log(res);
-            gd.value.total = res.total;
-            projectlists.value=res.rows.map((item) =>({
-              ...item,
-              updateTime: item.updateTime.split(' +')[0],
-            }))
-        })
-        .catch((err) => {
-            console.error(err);
-            ElMessage.error(err.returnMsg)
-        })
-};
+  const params = {
+    transCode: "ES0001",
+    count: gd.value.pageSize4,
+    page: gd.value.currentPage4,
+    searchtag: gd.value.searchtag
+  }
+  request(params)
+    .then((res) => {
+      // console.log(res);
+      gd.value.total = res.total
+      projectlists.value = res.rows.map((item) => ({
+        ...item,
+        updateTime: item.updateTime.split(" +")[0]
+      }))
+    })
+    .catch((err) => {
+      console.error(err)
+      ElMessage.error(err.returnMsg)
+    })
+}
 
 const handleSizeChange = (newSize) => {
-    gd.value.pageSize4 = newSize;
-    gd.value.currentPage4 = 1;
-    getprojectlist();
+  gd.value.pageSize4 = newSize
+  gd.value.currentPage4 = 1
+  getprojectlist()
 }
 
-const handleCurrentChange2=(val)=>{
-    getprojectlist();
+const handleCurrentChange2 = (val) => {
+  getprojectlist()
+}
+
+// 提交表单
+const submitForm = () => {
+  projectForm.value.validate((valid) => {
+    if (valid) {
+      addProject()
+    } else {
+      console.log('表单校验失败')
+      return false
+    }
+  })
 }
 
 const addProject = () => {
   const params = {
-    transCode: 'ES0002',
+    transCode: "ES0002",
     name: newproject.value.name,
     remark: newproject.value.description,
     keywords: newproject.value.keywords
-  };
+  }
   request(params)
     .then((res) => {
-      console.log(res);
-      ElMessage.success('添加成功');
-      addProjectdialog.value = false;
-      getprojectlist();
+      console.log(res)
+      ElMessage.success("添加成功")
+      addProjectdialog.value = false
+      getprojectlist()
     })
     .catch((err) => {
-      ElMessage.error(err.returnMsg);
-    });
-};
+      ElMessage.error(err.returnMsg)
+    })
+}
 
 // 处理行点击事件
 const handleRowClick = (row) => {
-  const index = selectedRows.value.findIndex(item => item.pid === row.pid);
+  const index = selectedRows.value.findIndex((item) => item.pid === row.pid)
   if (index === -1) {
-    selectedRows.value = [row]; // 单选模式，只保留一个选中项
+    selectedRows.value = [row] // 单选模式，只保留一个选中项
     // selectedRows.value.push(row); // 如果是多选模式，使用 push
   } else {
-    selectedRows.value.splice(index, 1); // 如果已选中，则取消选中
+    selectedRows.value.splice(index, 1) // 如果已选中，则取消选中
   }
-};
+}
 
 // 为行添加类名
 const tableRowClassName = ({ row }) => {
-  return selectedRows.value.some(item => item.pid === row.pid) ? 'selected-row' : '';
-};
+  return selectedRows.value.some((item) => item.pid === row.pid)
+    ? "selected-row"
+    : ""
+}
 
 // 全选/取消全选
 const selectAll = () => {
   if (selectedRows.value.length === projectlists.value.length) {
-    selectedRows.value = [];
+    selectedRows.value = []
   } else {
-    selectedRows.value = [...projectlists.value];
+    selectedRows.value = [...projectlists.value]
   }
-};
+}
 
 // 删除选中行
 const deleteSelected = () => {
   ElMessageBox.confirm(
-    t('message.confirmDelete'), // "确定要删除选中的项目吗?"
-    t('common.tip'),           // "提示"
+    t("message.confirmDelete"), // "确定要删除选中的项目吗?"
+    t("common.tip"), // "提示"
     {
-      confirmButtonText: t('common.ok'), // "确定"
-      cancelButtonText: t('common.cancel'),   // "取消"
-      type: 'warning'
-    }
-  ).then(() => {
-    const selectedIds = selectedRows.value.map(row => row.pid)
-    // console.log('删除的项目ID:', selectedIds)
-    const params = {
-      transCode: 'ES0003',
-      pid: selectedIds.join(',')
+      confirmButtonText: t("common.ok"), // "确定"
+      cancelButtonText: t("common.cancel"), // "取消"
+      type: "warning"
     }
-
-    request(params)
-      .then((res) => {
-        ElMessage.success(t('message.deleteSuccess')) // "删除成功"
-        selectedRows.value = []
-        getprojectlist()
-      })
-      .catch((err) => {
-        ElMessage.error(err.returnMsg || t('message.deleteFailed')) // "删除失败"
-      })
-  }).catch(() => {
-    ElMessage.info(t('message.deleteCancelled')) // "已取消删除"
-  })
+  )
+    .then(() => {
+      const selectedIds = selectedRows.value.map((row) => row.pid)
+      // console.log('删除的项目ID:', selectedIds)
+      const params = {
+        transCode: "ES0003",
+        pid: selectedIds.join(",")
+      }
+
+      request(params)
+        .then((res) => {
+          ElMessage.success(t("message.deleteSuccess")) // "删除成功"
+          selectedRows.value = []
+          getprojectlist()
+        })
+        .catch((err) => {
+          ElMessage.error(err.returnMsg || t("message.deleteFailed")) // "删除失败"
+        })
+    })
+    .catch(() => {
+      ElMessage.info(t("message.deleteCancelled")) // "已取消删除"
+    })
 }
 
 // 确认选中行
 const confirmSelected = () => {
-  
   if (selectedRows.value.length !== 1) {
-    ElMessage.warning(t('message.oneSelection')) // "请选择一个项目"
+    ElMessage.warning(t("message.oneSelection")) // "请选择一个项目"
     return
   }
 
@@ -286,42 +403,42 @@ const confirmSelected = () => {
     name: selectedRows.value[0].name,
     keywords: selectedRows.value[0].keywords,
     remark: selectedRows.value[0].remark,
-    flow: selectedRows.value[0].flow || '',
+    flow: selectedRows.value[0].flow || ""
   })
 
   router.push({
-    path: '/home',
+    path: "/home"
   })
 }
 
 onMounted(() => {
-    getprojectlist();
-});
+  getprojectlist()
+})
 </script>
 
 <style scoped>
 .project-page {
   width: 100%;
   height: 100%;
-  background: #EEEEEE;
+  background: #eeeeee;
   padding: 8px 8px 0 8px;
   overflow: auto;
 }
 
-.project-header{
+.project-header {
   width: 100%;
   height: 104px;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #FFFFFF;
+  background: #ffffff;
 }
 
-.project-main{
+.project-main {
   width: 100%;
   margin-top: 8px;
   height: calc(100% - 8px - 104px);
-  background: #FFFFFF;
+  background: #ffffff;
   padding: 8px;
 }
 
@@ -332,22 +449,22 @@ onMounted(() => {
   align-items: center;
 }
 
-.box{
+.box {
   width: 192px;
   height: 56px;
   border-radius: 6px 6px 6px 6px;
-  border: 1px solid #12739E;
+  border: 1px solid #12739e;
   display: flex;
   align-items: center;
   justify-content: center;
-  
+
   font-weight: 400;
   font-size: 14px;
-  color: #12739E;
+  color: #12739e;
   font-style: normal;
 }
 
-.boxcontainer .el-button>span {
+.boxcontainer .el-button > span {
   line-height: 18px;
 }
 
@@ -363,19 +480,19 @@ onMounted(() => {
   margin-left: 32px;
   font-weight: 400;
   font-size: 16px;
-  color: #7F7F7F;
+  color: #7f7f7f;
   text-align: left;
   font-style: normal;
   text-transform: none;
 }
 
-.project-main-content{
+.project-main-content {
   width: 100%;
   height: 75%;
   overflow: auto;
 }
 
-.project-main-pagination{
+.project-main-pagination {
   width: 100%;
   height: 5%;
 }
@@ -392,34 +509,32 @@ onMounted(() => {
 .project-main-footer .el-button {
   width: 100px;
   height: 32px;
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 6px 6px 6px 6px;
-  border: 1px solid #12739E;
+  border: 1px solid #12739e;
 
   font-weight: 400;
   font-size: 14px;
-  color: #12739E;
+  color: #12739e;
 }
 
-
 /* 选中行的样式 */
 :deep(.el-table .selected-row) {
-  background-color: #F3F8FB !important;
+  background-color: #f3f8fb !important;
   position: relative;
 }
 
 :deep(.el-table .selected-row td:first-child) {
-  border-left: 4px solid #12739E !important;
+  border-left: 4px solid #12739e !important;
 }
 
 :deep(.el-table .selected-row td) {
-  border-top: 1px solid #12739E !important;
+  border-top: 1px solid #12739e !important;
   /* border-right: 1px solid #12739E !important; */
-  border-bottom: 1px solid #12739E !important;
+  border-bottom: 1px solid #12739e !important;
 }
 
 :deep(.el-table .selected-row td:last-child) {
-  border-right: 1px solid #12739E !important;
+  border-right: 1px solid #12739e !important;
 }
-
 </style>