feat: Trigger ui

Author: zhanweizhang7

apps/trigger/serializers/trigger.py

@@ -332,7 +332,7 @@ def insert(self, instance, with_valid=True):
             id=trigger_id,
             name=instance.get('name'),
             workspace_id=self.data.get('workspace_id'),
-            desc=instance.get('desc'),
+            desc=instance.get('desc') or '',
             trigger_type=instance.get('trigger_type'),
             trigger_setting=instance.get('trigger_setting'),
             meta=instance.get('meta', {}),
@@ -497,7 +497,7 @@ def get_query_set(self):
         if self.data.get("name"):
             trigger_query_set = trigger_query_set.filter(name__contains=self.data.get("name"))
         if self.data.get("type"):
-            trigger_query_set = trigger_query_set.filter(type=self.data.get("type"))
+            trigger_query_set = trigger_query_set.filter(trigger_type=self.data.get("type"))
         if self.data.get("is_active") is not None:
             trigger_query_set = trigger_query_set.filter(is_active=self.data.get("is_active"))
         if self.data.get("task"):

ui/src/api/trigger/trigger.ts

@@ -4,7 +4,7 @@ import type { User, ResetPasswordRequest, CheckCodeRequest } from '@/api/type/us
 import type { Ref } from 'vue'
 import type { KeyValue, pageRequest } from '@/api/type/common'
 import useStore from '@/stores'
-import type { triggerData } from '../type/trigger'
+import type { TriggerData } from '../type/trigger'
 const prefix: any = { _value: '/workspace/' }
 Object.defineProperty(prefix, 'value', {
   get: function () {
@@ -46,7 +46,7 @@ const getTriggerDetail: (
  * @param loading 
  * @returns 
  */
-const postTrigger: (data: triggerData, loading?: Ref<boolean>) => Promise<Result<any>> = (
+const postTrigger: (data: TriggerData, loading?: Ref<boolean>) => Promise<Result<any>> = (
   data, loading
 ) => {
   return post(`${prefix.value}`, data, undefined,loading)
@@ -59,10 +59,10 @@ const postTrigger: (data: triggerData, loading?: Ref<boolean>) => Promise<Result
  * @param loading 
  * @returns 
  */
-const putTrigger: (trigger_id: string, data: triggerData, loading?: Ref<boolean>) => Promise<Result<any>> = (
+const putTrigger: (trigger_id: string, data: TriggerData, loading?: Ref<boolean>) => Promise<Result<any>> = (
   trigger_id,data,loading
 ) => {
-  return post(`${prefix.value}/${trigger_id}`, data, undefined,loading)
+  return put(`${prefix.value}/${trigger_id}`, data, undefined,loading)
 }
 
 /**
@@ -74,7 +74,7 @@ const putTrigger: (trigger_id: string, data: triggerData, loading?: Ref<boolean>
 const deleteTrigger: (trigger_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
   trigger_id,loading
 ) => {
-  return post(`${prefix.value}/${trigger_id}`, undefined, {},loading)
+  return del(`${prefix.value}/${trigger_id}`, undefined, {},loading)
 }
 
 /**

ui/src/api/type/trigger.ts

@@ -1,4 +1,4 @@
-interface triggerData {
+interface TriggerData {
   id?: string
   name?: string
   desc?: string
@@ -8,4 +8,4 @@ interface triggerData {
   is_active?: boolean
 }
 
-export type { triggerData }
+export type { TriggerData }

ui/src/views/trigger/index.vue

@@ -16,15 +16,81 @@
                 "
                 >{{ $t('common.create') }}
               </el-button>
+              <el-button @click="batchChangeState(true)" :disabled="multipleSelection.length === 0"
+                >{{ $t('view.trigger.activate', '启用') }}
+              </el-button>
+              <el-button @click="batchChangeState(false)" :disabled="multipleSelection.length === 0"
+                >{{ $t('view.trigger.ban', '禁用') }}
+              </el-button>
+              <el-button @click="batchDelete" :disabled="multipleSelection.length === 0"
+                >{{ $t('common.delete') }}
+              </el-button>
+            </div>
+            <div class="flex-between complex-search">
+              <el-select
+                class="complex-search__left"
+                v-model="search_type"
+                style="width: 120px"
+                @change="search_type_change"
+              >
+                <el-option :label="$t('common.name', '名称')" value="name" />
+                <el-option :label="$t('view.trigger.type', '类型')" value="type" />
+                <el-option :label="$t('view.trigger.task', '任务')" value="task" />
+                <el-option :label="$t('view.trigger.status', '状态')" value="status" />
+                <el-option :label="$t('view.trigger.createUser', '创建者')" value="create_user" />
+              </el-select>
+              <el-input
+                v-if="search_type === 'name'"
+                v-model="search_form.name"
+                @change="searchHandle"
+                :placeholder="$t('common.searchBar.placeholder')"
+                style="width: 220px"
+                clearable
+              />
+              <el-select
+                v-else-if="search_type === 'type'"
+                v-model="search_form.type"
+                @change="searchHandle"
+                filterable
+                clearable
+                style="width: 220px"
+              >
+                <el-option :label="$t('view.trigger.scheduled')" value="SCHEDULED" />
+                <el-option :label="$t('view.trigger.event')" value="unpublished" />
+              </el-select>
+              <el-select
+                v-else-if="search_type === 'create_user'"
+                v-model="search_form.create_user"
+                @change="searchHandle"
+                filterable
+                clearable
+                style="width: 220px"
+              >
+                <el-option
+                  v-for="u in user_options"
+                  :key="u.id"
+                  :value="u.id"
+                  :label="u.nick_name"
+                />
+              </el-select>
+              <el-input
+                v-if="search_type === 'task'"
+                v-model="search_form.task"
+                @change="searchHandle"
+                :placeholder="$t('views.document.tag.requiredMessage3')"
+                style="width: 220px"
+                clearable
+              />
             </div>
           </div>
           <app-table
             ref="multipleTableRef"
-            class="mt-16 document-table"
+            class="mt-16"
             :data="triggerData"
             :pagination-config="paginationConfig"
             @sizeChange="handleSizeChange"
             @changePage="getList"
+            @selection-change="handleSelectionChange"
             v-loading="loading"
             :row-key="(row: any) => row.id"
             :maxTableHeight="300"
@@ -33,29 +99,27 @@
             <el-table-column
               prop="name"
               :label="$t('views.trigger.table.name', '名称')"
-              min-width="280"
+              min-width="100"
             >
             </el-table-column>
             <el-table-column
-              prop="desc"
-              :label="$t('views.trigger.table.desc', '描述')"
-              min-width="280"
+              prop="trigger_type"
+              :label="$t('views.trigger.table.type', '类型')"
+              min-width="80"
             >
             </el-table-column>
             <el-table-column
               prop="is_active"
               :label="$t('views.trigger.table.status', '状态')"
-              min-width="280"
+              min-width="80"
             >
             </el-table-column>
             <el-table-column
-              prop="trigger_type"
-              :label="$t('views.trigger.table.type', '类型')"
-              align="right"
-              min-width="90"
+              prop="desc"
+              :label="$t('views.trigger.table.desc', '描述')"
+              min-width="150"
             >
             </el-table-column>
-
             <el-table-column
               prop="update_time"
               :label="$t('views.document.table.updateTime')"
@@ -69,7 +133,12 @@
             <el-table-column align="left" width="160" fixed="right" :label="$t('common.operation')">
               <template #default="{ row }">
                 <span @click.stop>
-                  <el-switch :loading="loading" size="small" v-model="row.is_active" />
+                  <el-switch
+                    :before-change="() => changeState(row)"
+                    :loading="loading"
+                    size="small"
+                    v-model="row.is_active"
+                  />
                 </span>
                 <el-divider direction="vertical" />
                 <el-tooltip effect="dark" :content="$t('common.edit')" placement="top">
@@ -81,7 +150,7 @@
                 </el-tooltip>
                 <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
                   <span class="mr-4">
-                    <el-button type="primary" text>
+                    <el-button type="primary" text @click="deleteTrigger(row)">
                       <AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
                     </el-button>
                   </span>
@@ -98,30 +167,140 @@
 import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 import type { ElTable } from 'element-plus'
-import ImportDocumentDialog from './component/ImportDocumentDialog.vue'
-import SelectKnowledgeDialog from './component/SelectKnowledgeDialog.vue'
 import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import useStore from '@/stores'
 import triggerAPI from '@/api/trigger/trigger'
 import { TaskType, State } from '@/utils/status'
 import { t } from '@/locales'
 import permissionMap from '@/permission'
 import { datetimeFormat } from '@/utils/time'
+import WorkspaceApi from '@/api/workspace/workspace'
+
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
+import type { TriggerData } from '@/api/type/trigger'
 const route = useRoute()
 const router = useRouter()
 const {
   params: { id, folderId, type }, // id为knowledgeID
 } = route as any
-const { common } = useStore()
+const { user } = useStore()
 const loading = ref(false)
 const paginationConfig = ref({
   current_page: 1,
   page_size: 10,
   total: 0,
 })
 
+const user_options = ref<any[]>([])
+const search_type = ref('name')
+const search_form = ref<any>({
+  name: '',
+  type: '',
+  task: '',
+  is_active: '',
+  create_user: '',
+})
+
+const search_type_change = () => {
+  search_form.value = {
+    name: '',
+    type: '',
+    task: '',
+    is_active: '',
+    create_user: '',
+  }
+}
+
+function searchHandle() {
+  paginationConfig.value.current_page = 1
+  triggerData.value = []
+  getList()
+}
+
+function deleteTrigger(row: any) {
+  MsgConfirm(`${t('views.document.delete.confirmTitle3', '是否删除触发器')} ${row.name} ?`, ``, {
+    confirmButtonText: t('common.confirm'),
+    confirmButtonClass: 'danger',
+  }).then(() => {
+    triggerAPI.deleteTrigger(row.id, loading).then(() => {
+      MsgSuccess(t('common.deleteSuccess'))
+      getList()
+    })
+  })
+}
+
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val
+}
+
+function batchChangeState(is_active: boolean) {
+  const idList: string[] = []
+  multipleSelection.value.map((v) => {
+    if (v) {
+      idList.push(v.id)
+    }
+  })
+  triggerAPI.activateMulTrigger({ id_list: idList, is_active: is_active }, loading).then(() => {
+    const msg: string = is_active
+      ? t('views.trigger.delete.successMessage', '批量启用成功')
+      : t('views.trigger.delete.successMessage', '批量禁用成功')
+    MsgSuccess(msg)
+    multipleTableRef.value?.clearSelection()
+    getList()
+  })
+}
+
+function batchDelete() {
+  MsgConfirm(
+    `${t('views.document.delete.confirmTitle1')} ${multipleSelection.value.length} ${t('views.trigger.delete.confirmTitle2', '个触发器?')}`,
+    '',
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'danger',
+    },
+  ).then(() => {
+    const arr: string[] = []
+    multipleSelection.value.map((v) => {
+      if (v) {
+        arr.push(v.id)
+      }
+    })
+    triggerAPI.delMulTrigger(arr, loading).then(() => {
+      MsgSuccess(t('views.document.delete.successMessage'))
+      multipleTableRef.value?.clearSelection()
+      getList()
+    })
+  })
+}
+
+async function changeState(row: any) {
+  const obj = {
+    is_active: !row.is_active,
+  }
+  const str = !row.is_active ? t('common.status.enableSuccess') : t('common.status.disableSuccess')
+  await updateData(row.id, obj, str)
+}
+
+/**
+ * 更新状态/数据
+ */
+function updateData(triggerId: string, data: TriggerData, msg: string) {
+  triggerAPI
+    .putTrigger(triggerId, data, loading)
+    .then((res: any) => {
+      const index = triggerData.value.findIndex((v) => v.id === triggerId)
+      triggerData.value.splice(index, 1, res.data)
+      MsgSuccess(msg)
+      return true
+    })
+    .catch(() => {
+      return false
+    })
+}
+
 const multipleSelection = ref<any[]>([])
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+
 const triggerData = ref<any[]>([])
 const elUploadRef = ref()
 
@@ -142,6 +321,9 @@ function getList(bool?: boolean) {
 
 onMounted(() => {
   getList()
+  WorkspaceApi.getAllMemberList(user.getWorkspaceId(), loading).then((res) => {
+    user_options.value = res.data
+  })
 })
 </script>
 <style lang="scss" scoped>