bugfix and performance improves

src/views/website/solution/serviceCase/index.vue

@@ -1,36 +1,38 @@
 <template>
   <div class="app-container">
     <el-form
-      :model="queryParams"
-      ref="queryFormRef"
-      v-show="showSearch"
-      :inline="true"
-      @submit.native.prevent
+        :model="queryParams"
+        ref="queryFormRef"
+        v-show="showSearch"
+        :inline="true"
+        @submit.native.prevent
     >
       <el-form-item label="案例标题" prop="title">
         <el-input
-          v-model="queryParams.title"
-          placeholder="请输入关键字"
-          clearable
-          size="default"
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
+            v-model="queryParams.title"
+            placeholder="请输入关键字"
+            clearable
+            size="default"
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
         />
       </el-form-item>
 
       <el-form-item label="所属站点" prop="tenantId">
-        <SiteOptions v-model="queryParams.tenantId" :siteList="siteList" />
+        <SiteOptions v-model="queryParams.tenantId" :siteList="siteList"/>
       </el-form-item>
       <el-form-item>
         <el-button
-          type="primary"
-          icon="search"
-          size="default"
-          @click="handleQuery"
-          >搜索</el-button
+            type="primary"
+            icon="search"
+            size="default"
+            @click="handleQuery"
+        >搜索
+        </el-button
         >
         <el-button icon="refresh" size="default" @click="resetQuery"
-          >重置</el-button
+        >重置
+        </el-button
         >
       </el-form-item>
     </el-form>
@@ -38,30 +40,31 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          type="primary"
-          plain
-          icon="plus"
-          size="default"
-          @click="handleAdd"
-          >新增</el-button
+            type="primary"
+            plain
+            icon="plus"
+            size="default"
+            @click="handleAdd"
+        >新增
+        </el-button
         >
       </el-col>
       <right-toolbar
-        v-model:showSearch="showSearch"
-        @queryTable="getList"
+          v-model:showSearch="showSearch"
+          @queryTable="getList"
       ></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="dataList">
-      <el-table-column label="数据编码" prop="id" align="center" />
-      <el-table-column label="案例标题" prop="title" align="center" />
+      <el-table-column label="数据编码" prop="id" align="center"/>
+      <el-table-column label="案例标题" prop="title" align="center"/>
       <el-table-column label="图片" prop="image" align="center" width="120">
         <template #default="{ row }">
           <div>
             <el-image
-              style="width: 100px; height: 100px"
-              :src="row.image"
-              fit="cover"
+                style="width: 100px; height: 100px"
+                :src="row.image"
+                fit="cover"
             ></el-image>
           </div>
         </template>
@@ -72,10 +75,10 @@
         </template>
       </el-table-column>
       <el-table-column
-        label="描述"
-        prop="description"
-        show-overflow-tooltip
-        align="center"
+          label="描述"
+          prop="description"
+          show-overflow-tooltip
+          align="center"
       />
       <el-table-column label="创建时间" prop="created_at" align="center">
         <template #default="{ row }">
@@ -83,73 +86,81 @@
         </template>
       </el-table-column>
       <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
       >
         <template #default="{ row }">
           <el-button
-            size="small"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(row)"
-            >编辑</el-button
+              size="small"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(row)"
+          >编辑
+          </el-button
           >
           <el-button
-            size="small"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(row)"
-            >删除</el-button
+              size="small"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(row)"
+          >删除
+          </el-button
           >
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
     />
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" v-model="showEditDialog" width="40%">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="案例标题:" prop="title">
-          <el-input v-model="form.title" placeholder="请输入案例标题" />
+          <el-input v-model="form.title" placeholder="请输入案例标题"/>
         </el-form-item>
         <el-form-item label="描述:" prop="description">
           <el-input
-            v-model="form.description"
-            placeholder="请输入描述"
-            maxlength="30"
+              v-model="form.description"
+              placeholder="请输入描述"
+              maxlength="30"
           />
         </el-form-item>
         <el-form-item label="图片:" prop="image">
-          <ImageUpload v-model="form.image" :isShowTip="false" :limit="1" />
+          <ImageUpload v-model="form.image" :isShowTip="false" :limit="1"/>
         </el-form-item>
         <el-form-item label="所属站点:" prop="tenantId">
-          <SiteOptions v-model="form.tenantId" :siteList="siteList" />
+          <SiteOptions v-model="form.tenantId" :siteList="siteList"/>
         </el-form-item>
         <el-form-item label="所属服务:" prop="kindId">
           <el-cascader
-            v-model="form.kindId"
-            clearable
-            separator="-"
-            placeholder="请选择，支持搜索"
-            :options="caseOptions"
-            filterable
-            :props="{ emitPath: false, value: 'id', label: 'title' }"
+              v-model="form.kindId"
+              clearable
+              separator="-"
+              placeholder="请选择，支持搜索"
+              :options="caseOptions"
+              filterable
+              :props="{ emitPath: false, value: 'id', label: 'title' }"
           ></el-cascader>
         </el-form-item>
         <el-form-item label="案例描述:" prop="content">
-          <WangEditor
-            v-model="form.content"
-            destroy-on-close
-            minHeight="150px"
-          ></WangEditor>
+          <!--          <WangEditor-->
+          <!--            v-model="form.content"-->
+          <!--            destroy-on-close-->
+          <!--            minHeight="150px"-->
+          <!--          ></WangEditor>-->
+          <el-input
+              type="textarea"
+              v-model="form.content"
+              placeholder="请输入案例描述"
+              :autosize="{ minRows: 6, maxRows: 8}"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -160,9 +171,9 @@
   </div>
 </template>
 <script setup name="serviceCase">
-import { ElMessage, ElMessageBox } from "element-plus";
-import { reactive, ref, toRefs } from "vue";
-import { tenantSelect } from "@/api/subPlatform/tenant";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {reactive, ref, toRefs} from "vue";
+import {tenantSelect} from "@/api/subPlatform/tenant";
 import {
   serviceCaseList,
   serviceCaseAdd,
@@ -173,7 +184,7 @@ import {
 } from "@/api/website/solution";
 import WangEditor from "@/components/WangEditor/index.vue";
 import SiteOptions from "@/views/components/SiteOptions";
-import { planCategoryList } from "../../../../api/website/solution";
+import {planCategoryList} from "../../../../api/website/solution";
 
 const dataList = ref([]);
 const loading = ref(true);
@@ -195,8 +206,8 @@ const data = reactive({
   },
   form: {},
   rules: {
-    title: [{ required: true, message: "案例标题不能为空", trigger: "blur" }],
-    description: [{ required: true, message: "描述不能为空", trigger: "blur" }],
+    title: [{required: true, message: "案例标题不能为空", trigger: "blur"}],
+    description: [{required: true, message: "描述不能为空", trigger: "blur"}],
     image: [
       {
         required: true,
@@ -227,7 +238,7 @@ const data = reactive({
     ],
   },
 });
-const { queryParams, form, rules } = toRefs(data);
+const {queryParams, form, rules} = toRefs(data);
 const resetQuery = () => {
   if (queryFormRef.value) {
     queryFormRef.value.resetFields();
@@ -248,7 +259,7 @@ const getList = async () => {
 };
 
 const getSiteList = async () => {
-  const { rows } = await tenantSelect();
+  const {rows} = await tenantSelect();
   siteList.value = rows;
 };
 
@@ -258,7 +269,7 @@ const getCaseKindList = async () => {
   // const serviceResp= await ser
   for (const key in resp.data) {
     if (Object.hasOwnProperty.call(resp.data, key)) {
-      const item = { ...resp.data[key], id: parseInt(key) };
+      const item = {...resp.data[key], id: parseInt(key)};
       caseOptions.value.push(item);
     }
   }
@@ -320,12 +331,13 @@ const submitForm = async () => {
 /** 删除按钮操作 */
 const handleDelete = (row) => {
   ElMessageBox.confirm(`是否确认删除名为${row.title}的数据项？`)
-    .then(async () => {
-      await serviceCaseDelete(row.id);
-      getList();
-      ElMessage.success("删除成功");
-    })
-    .catch(() => {});
+      .then(async () => {
+        await serviceCaseDelete(row.id);
+        getList();
+        ElMessage.success("删除成功");
+      })
+      .catch(() => {
+      });
 };
 
 getList();