8/1 限制前端输入字数

src/views/system/HandleLog/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col h-full p-2">
-    <pageheader title="办事记录"></pageheader>
+    <pageheader></pageheader>
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
@@ -37,7 +37,7 @@
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="办事内容" align="center" prop="content">
           <template #default="scope">
-            <div class="color-blue" v-html="scope.row.content"></div>
+            <div class="color-blue moreRowEllipsis" v-html="scope.row.content"></div>
           </template>
         </el-table-column>
         <el-table-column label="求助人" align="center" prop="seekName" width="120" />
@@ -50,7 +50,7 @@
         </el-table-column>
         <el-table-column label="附属材料" width="100" align="center" prop="handlePosition">
           <template #default="scope">
-            <el-button type="primary" @click="openDiage(scope.row)" link>点击查看</el-button>
+            <el-button type="primary" v-if="scope.row.handleLogFileList?.length > 0" @click="openDialog(scope.row)" link>点击查看</el-button>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="200" align="center" fixed="right" class-name="small-padding fixed-width">
@@ -64,15 +64,15 @@
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
       <!-- 添加或修改办事记录对话框 -->
       <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-        <ul class="ulbox" v-if="dialog.files.length > 0">
+        <ul class="ulBox" v-if="dialog.files.length > 0">
           <li @click="handleDown(item)" class="files_item" v-for="(item, index) in dialog.files" :key="index">
             <div>
               {{ item.fileName }}
             </div>
-            <span class="clickdown">点击下载</span>
+            <span class="clickDown">点击下载</span>
           </li>
         </ul>
-        <ul class="ulbox" v-else>
+        <ul class="ulBox" v-else>
           <li class="files_item_no">
             <div>暂无数据</div>
           </li>
@@ -83,14 +83,13 @@
 </template>
 
 <script setup name="HandleLog" lang="ts">
-import { listHandleLog, delHandleLog } from '@/api/system/HandleLog/index';
-import { HandleLogVO, HandleLogQuery, HandleLogForm } from '@/api/system/HandleLog/type';
+import { listHandleLog, delHandleLog } from '@/api/system/HandleLog';
+import { HandleLogVO, HandleLogQuery, HandleLogForm, FileVO } from '@/api/system/HandleLog/type';
 import { checkPermi } from '@/utils/permission';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const handleLogList = ref<HandleLogVO[]>([]);
-const buttonLoading = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref<Array<string | number>>([]);
@@ -99,7 +98,6 @@ const multiple = ref(true);
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
-const handleLogFormRef = ref<ElFormInstance>();
 
 const initFormData: HandleLogForm = {
   id: undefined,
@@ -126,7 +124,7 @@ const data = reactive<PageData<HandleLogForm, HandleLogQuery>>({
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams } = toRefs(data);
 
 /** 查询办事记录列表 */
 const getList = async () => {
@@ -169,7 +167,7 @@ const handleAdd = () => {
 };
 
 /** 修改按钮操作 */
-const handleUpdate = async (row?: HandleLogVO) => {
+const handleUpdate = (row?: HandleLogVO) => {
   const _id = row ? row.id : ids.value[0];
   router.push({
     path: '/repair/editHandleLog',
@@ -192,14 +190,14 @@ const dialog = reactive({
   title: '',
   files: []
 });
-
-const openDiage = (row) => {
+// 查看附属材料
+const openDialog = (row: HandleLogVO) => {
   dialog.visible = true;
   dialog.title = '查看附属材料';
-  console.log(row);
   dialog.files = row.handleLogFileList ?? [];
 };
-const handleDown = (item) => {
+// 下载文件
+const handleDown = (item: FileVO) => {
   proxy?.$download.oss(item.ossId);
 };
 onMounted(() => {
@@ -210,8 +208,16 @@ onMounted(() => {
 <style lang="scss" scoped>
 .el-table {
   height: calc(100% - 80px);
+  // 超出部分省略号 3 行
+  .moreRowEllipsis {
+    word-break: break-all;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
 }
-.ulbox {
+.ulBox {
   max-height: 300px;
   overflow-y: auto;
   overflow-x: hidden;
@@ -233,12 +239,12 @@ onMounted(() => {
   &:hover {
     background-color: #f5f5f5;
     color: #409eff;
-    .clickdown {
+    .clickDown {
       color: #409eff;
     }
   }
 
-  .clickdown {
+  .clickDown {
     color: #cccc;
     font-size: small;
   }