refactor: 列表筛选、排序

backend/src/main/java/io/metersphere/base/mapper/ext/ExtCustomFunctionMapper.xml

@@ -15,7 +15,28 @@
             <if test="request.type != null">
                 and custom_function.type = #{request.type}
             </if>
+            <if test="request.filters != null and request.filters.size() > 0">
+                <foreach collection="request.filters.entrySet()" index="key" item="values">
+                    <if test="values != null and values.size() > 0">
+                        <choose>
+                            <when test="key == 'type'">
+                                AND custom_function.type IN
+                                <foreach collection="values" item="value" separator="," open="(" close=")">
+                                    #{value}
+                                </foreach>
+                            </when>
+                        </choose>
+                    </if>
+                </foreach>
+            </if>
+            <if test="request.orders != null and request.orders.size() > 0">
+                ORDER BY
+                <foreach collection="request.orders" separator="," item="order">
+                    custom_function.${order.name} ${order.type}
+                </foreach>
+            </if>
         </where>
+        order by custom_function.create_time desc
 
     </select>
 

backend/src/main/java/io/metersphere/controller/request/CustomFunctionRequest.java

@@ -4,9 +4,13 @@ import io.metersphere.base.domain.CustomFunctionWithBLOBs;
 import lombok.Getter;
 import lombok.Setter;
 
+import java.util.List;
+import java.util.Map;
 
 @Getter
 @Setter
 public class CustomFunctionRequest extends CustomFunctionWithBLOBs {
+    private Map<String, List<String>> filters;
+    private List<OrderRequest> orders;
 
 }

frontend/src/business/components/settings/project/function/CustomFunction.vue

@@ -27,8 +27,9 @@
             <span></span>
           </template>
         </el-table-column>
-        <el-table-column prop="type" :label="$t('project.code_segment.language')" show-overflow-tooltip/>
+        <el-table-column prop="type" column-key="type" :label="$t('project.code_segment.language')" show-overflow-tooltip :filters="languages"/>
         <el-table-column prop="createTime"
+                         sortable
                          :label="$t('commons.create_time')"
                          show-overflow-tooltip>
           <template v-slot:default="scope">
@@ -68,6 +69,7 @@ import MsTableOperatorButton from "@/business/components/common/components/MsTab
 import EditFunction from "@/business/components/settings/project/function/EditFunction";
 import {getCurrentProjectID} from "@/common/js/utils";
 import MsDeleteConfirm from "@/business/components/common/components/MsDeleteConfirm";
+import {_filter, _sort} from "@/common/js/tableUtils";
 
 export default {
   name: "CustomFunction",
@@ -90,6 +92,13 @@ export default {
       pageSize: 10,
       total: 0,
       screenHeight: 'calc(100vh - 195px)',
+      languages: [
+        {text: 'beanshell', value: 'beanshell'},
+        {text: 'python', value: 'python'},
+        {text: 'groovy', value: 'groovy'},
+        {text: 'nashornScript', value: 'nashornScript'},
+        {text: 'rhinoScript', value: 'rhinoScript'},
+      ],
     }
   },
   activated() {
@@ -116,11 +125,13 @@ export default {
     handleCreate() {
       this.$refs.editFunction.open({});
     },
-    sort() {
-
+    sort(column) {
+      _sort(column, this.condition);
+      this.init();
     },
-    filter() {
-
+    filter(filters) {
+      _filter(filters, this.condition);
+      this.init();
     },
     handleEdit(row) {
       this.$refs.editFunction.open(row);

frontend/src/business/components/settings/project/function/EditFunction.vue

@@ -1,6 +1,7 @@
 <template>
+  <div v-loading="result.loading">
     <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="visible" :destroy-on-close="true"
-             @close="close" width="75%" top="5vh" v-loading="result.loading">
+               @close="close" width="75%" top="5vh">
       <div style="height: 62vh; overflow-y: auto; overflow-x: hidden">
         <el-form :model="form" label-position="right" label-width="80px" size="small" :rules="rules" v-if="isFormAlive"
                  ref="form">
@@ -83,6 +84,8 @@
         </el-button>
       </template>
     </el-dialog>
+  </div>
+
 </template>
 
 <script>
@@ -253,7 +256,6 @@ export default {
           this.form.id = res.data.id;
         }
         this.$success(this.$t('commons.save_success'));
-        this.reload();
       })
     },
     update(obj) {
@@ -263,7 +265,6 @@ export default {
       this.result = this.$post("/custom/func/update", obj, () => {
         this.$emit("refresh");
         this.$success(this.$t('commons.modify_success'));
-        this.reload();
       })
     },
     handleTest() {