服务管理添加下拉和搜索

public/config.js

@@ -138,7 +138,8 @@ var NEW_DATACONTENT_ID = [
   52242,
   52243,
   52244,
-  51063
+  51063,
+  50501
 ]
 
 var DATACONTENT_ID = {
@@ -269,7 +270,7 @@ var DATACONTENT_ID = {
   booleanOptions: 20, //系统设置-布尔值下拉
   filteredTemplateOptions: 21, //系统设置-下拉选项下拉
 
-  sysServiceTable: 2, //系统设置-服务管理-表格
+  sysServiceTable: 50501, //系统设置-服务管理-表格
   sysServiceMachineTable: 3, //系统设置-服务管理-编辑-部署机器-表格
   sysServiceOutTable: 7, //系统设置-服务管理-编辑-输出-表格
   sysServiceDetail: 23, //系统设置-服务管理-编辑服务-根据id获取服务详情

src/components/minheader/index.vue

@@ -24,6 +24,13 @@
       </el-date-picker>
     </div> -->
     <div v-if="isBtn" class="rb">
+      <template v-if="isService">
+        <el-select style="margin-right: 15px;" size="default" @change="serviceChange" v-model="serviceType" clearable>
+          <el-option value="运行" label="运行" />
+          <el-option value="异常" label="异常" />
+          <el-option value="停止" label="停止" />
+        </el-select>
+      </template>
       <template v-if="isSearch">
         <!-- <div class="serlog">
           <div class="log"></div>
@@ -68,6 +75,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isService: {
+    type: Boolean,
+    default: false,
+  },
   //是否启用权限按钮
   isAuth: {
     type: Boolean,
@@ -149,6 +160,7 @@ const props = defineProps({
 const input = ref("");
 const startTime = ref("");
 const endTime = ref("");
+const serviceType = ref("");
 // const startTime = momentMini(new Date()).format("YYYY-MM-DD"); //时间
 // const endTime = momentMini(new Date()).format("YYYY-MM-DD"); //时间
 const emits = defineEmits([
@@ -160,6 +172,7 @@ const emits = defineEmits([
   "searchForm",
   "searchForms",
   "clearForm",
+  "serviceForms",
 ]);
 const addBbut = () => {
   emits("addForm");
@@ -189,6 +202,9 @@ const addslot = () => {
 const show = () => {
   emits("showForm");
 };
+const serviceChange = (val) => {
+  emits("serviceForms", val);
+};
 // console.log(power);
 startTime.value = momentMini(new Date()).format("YYYY-MM-DD");
 endTime.value = momentMini(new Date()).format("YYYY-MM-DD");

src/views/systemSettings/serviceManagement/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="serivce-home scroll-y">
     <div class="wrap">
-      <MinHeader
-        :is-auth="true"
-        :is-statuser="true"
-        power-data="service_addition_button"
-        @addForm="addServiceDialogShow"
-      >
+      <MinHeader :is-auth="true" :is-search="true" :is-service="true" :is-statuser="true" power-data="service_addition_button" @addForm="addServiceDialogShow" @searchForms="searchForms" @clearForm="clearForm" @serviceForms="serviceForms">
         <template #header>
           <div class="status flex-wrap">
             <div class="manageTitle">服务管理</div>
@@ -17,57 +12,19 @@
         </template>
       </MinHeader>
       <div class="app-containers">
-        <DataTable
-          :is-Status="true"
-          :table-header="tableColumns"
-          :table-data="tableData"
-          :table-btn-group="tableBtnGroup"
-          btn-group-width="310px"
-          :table-property="{ rowKey: 'ID' }"
-          @btn-click="tableButtonClickHandler"
-        />
+        <DataTable :is-Status="true" :table-header="tableColumns" :table-data="tableData" :table-btn-group="tableBtnGroup" btn-group-width="310px" :table-property="{ rowKey: 'ID' }" @btn-click="tableButtonClickHandler" />
       </div>
-      <Dialog
-        :width="serviceDialogWidth"
-        :flag="serviceDialogVisible"
-        :type="serviceDialogType"
-        :del-name="delName"
-        :msg-title="msgTitle"
-        @del-remove="delSubmitHandler"
-        @del-rest="delDialogHide"
-        @submit-form="serviceSubmitHandler"
-        @reset-form="addServiceDialogHide"
-      >
-        <el-form
-          ref="serviceFormRef"
-          class="service-form"
-          :model="serviceForm"
-          :rules="serviceFormRules"
-          label-position="right"
-          label-width="90px"
-          size="mini"
-        >
+      <Dialog :width="serviceDialogWidth" :flag="serviceDialogVisible" :type="serviceDialogType" :del-name="delName" :msg-title="msgTitle" @del-remove="delSubmitHandler" @del-rest="delDialogHide" @submit-form="serviceSubmitHandler" @reset-form="addServiceDialogHide">
+        <el-form ref="serviceFormRef" class="service-form" :model="serviceForm" :rules="serviceFormRules" label-position="right" label-width="90px" size="mini">
           <el-row :gutter="36" type="flex">
             <el-col :span="12">
               <el-form-item label="服务名称" prop="serviceName">
-                <el-input
-                  v-model="serviceForm.serviceName"
-                  placeholder="请输入服务名称"
-                  clearable
-                />
+                <el-input v-model="serviceForm.serviceName" placeholder="请输入服务名称" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item
-                label="前序输出编号"
-                label-width="120px"
-                prop="serviceOutputID"
-              >
-                <el-input
-                  v-model="serviceForm.serviceOutputID"
-                  placeholder="请输入前序输出编号"
-                  clearable
-                />
+              <el-form-item label="前序输出编号" label-width="120px" prop="serviceOutputID">
+                <el-input v-model="serviceForm.serviceOutputID" placeholder="请输入前序输出编号" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -92,146 +49,66 @@
               <div class="flex">
                 <el-form-item label="数据来源" prop="dataSourceID">
                   <el-select v-model="serviceForm.dataSourceID" clearable>
-                    <el-option
-                      v-for="dataSource in selectOptionMap[
+                    <el-option v-for="dataSource in selectOptionMap[
                         queryTemplateIDMap.dataSourceName
-                      ]"
-                      :key="dataSource.dataSourceID"
-                      :value="dataSource.dataSourceID"
-                      :label="dataSource.dataSourceName"
-                    />
+                      ]" :key="dataSource.dataSourceID" :value="dataSource.dataSourceID" :label="dataSource.dataSourceName" />
                   </el-select>
                 </el-form-item>
-                <el-button
-                  type="primary"
-                  size="small"
-                  style="height: 28px; line-height: 0px"
-                  @click="addDataSourceDialogShow"
-                  >新增</el-button
-                >
+                <el-button type="primary" size="small" style="height: 28px; line-height: 0px" @click="addDataSourceDialogShow">新增</el-button>
               </div>
             </el-col>
             <el-col :span="12">
-              <el-form-item
-                label="数据来源对象"
-                label-width="120px"
-                prop="sourceObjectName"
-              >
-                <el-input
-                  v-model="serviceForm.sourceObjectName"
-                  placeholder="请输入数据来源对象名称"
-                  clearable
-                />
+              <el-form-item label="数据来源对象" label-width="120px" prop="sourceObjectName">
+                <el-input v-model="serviceForm.sourceObjectName" placeholder="请输入数据来源对象名称" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="服务描述" prop="serviceDescribe">
-                <el-input
-                  v-model="serviceForm.serviceDescribe"
-                  placeholder="请输入描述"
-                  clearable
-                />
+                <el-input v-model="serviceForm.serviceDescribe" placeholder="请输入描述" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item
-                label="生命周期ID键名"
-                prop="lifeCycleCol"
-                label-width="120px"
-              >
-                <el-input
-                  v-model="serviceForm.lifeCycleCol"
-                  placeholder="请输入生命周期ID键名"
-                  clearable
-                />
+              <el-form-item label="生命周期ID键名" prop="lifeCycleCol" label-width="120px">
+                <el-input v-model="serviceForm.lifeCycleCol" placeholder="请输入生命周期ID键名" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="取值规则" prop="computingMethod">
-                <el-input
-                  v-model="serviceForm.computingMethod"
-                  placeholder="请输入取值规则"
-                  type="textarea"
-                  :autosize="{ minRows: 4, maxRows: 4 }"
-                  resize="none"
-                  clearable
-                />
+                <el-input v-model="serviceForm.computingMethod" placeholder="请输入取值规则" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="检测规则" prop="validationExpression">
-                <el-input
-                  v-model="serviceForm.validationExpression"
-                  placeholder="请输入检测规则"
-                  type="textarea"
-                  :autosize="{ minRows: 4, maxRows: 4 }"
-                  resize="none"
-                  clearable
-                />
+                <el-input v-model="serviceForm.validationExpression" placeholder="请输入检测规则" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="启动时间" prop="startTime">
-                <el-date-picker
-                  v-model="serviceForm.startTime"
-                  type="datetime"
-                  format="YYYY-MM-DD HH:mm"
-                  value-format="YYYY-MM-DD HH:mm"
-                  placeholder="请选择启动时间"
-                />
+                <el-date-picker v-model="serviceForm.startTime" type="datetime" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" placeholder="请选择启动时间" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="停止时间" prop="stopTime">
-                <el-date-picker
-                  v-model="serviceForm.stopTime"
-                  type="datetime"
-                  format="YYYY-MM-DD HH:mm"
-                  value-format="YYYY-MM-DD HH:mm"
-                  placeholder="请选择停止时间"
-                />
+                <el-date-picker v-model="serviceForm.stopTime" type="datetime" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" placeholder="请选择停止时间" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item
-                label="失败重试次数"
-                prop="retryCount"
-                label-width="100px"
-              >
-                <el-input
-                  v-model="serviceForm.retryCount"
-                  type="number"
-                  placeholder="请输入重试次数"
-                  clearable
-                />
+              <el-form-item label="失败重试次数" prop="retryCount" label-width="100px">
+                <el-input v-model="serviceForm.retryCount" type="number" placeholder="请输入重试次数" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="循环次数" prop="loopCount">
-                <el-input
-                  v-model="serviceForm.loopCount"
-                  type="number"
-                  placeholder="请输入循环次数"
-                  clearable
-                />
+                <el-input v-model="serviceForm.loopCount" type="number" placeholder="请输入循环次数" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="循环频率" prop="frequencyCount">
-                <el-input
-                  v-model="serviceForm.frequencyCount"
-                  type="number"
-                  placeholder="请输入循环频率"
-                  clearable
-                />
+                <el-input v-model="serviceForm.frequencyCount" type="number" placeholder="请输入循环频率" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item
-                label="循环频率单位"
-                prop="frequencyUnit"
-                label-width="100px"
-              >
+              <el-form-item label="循环频率单位" prop="frequencyUnit" label-width="100px">
                 <el-select v-model="serviceForm.frequencyUnit" clearable>
                   <el-option label="天" :value="24 * 60 * 60 * 1000" />
                   <el-option label="小时" :value="60 * 60 * 1000" />
@@ -242,75 +119,36 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item
-                label="日志存储位置"
-                label-width="100px"
-                prop="logDataSourceID"
-              >
+              <el-form-item label="日志存储位置" label-width="100px" prop="logDataSourceID">
                 <el-select v-model="serviceForm.logDataSourceID">
-                  <el-option
-                    v-for="dataSource in selectOptionMap[
+                  <el-option v-for="dataSource in selectOptionMap[
                       queryTemplateIDMap.dataSourceName
-                    ]"
-                    :key="dataSource.dataSourceID"
-                    :value="dataSource.dataSourceID"
-                    :label="dataSource.dataSourceName"
-                  />
+                    ]" :key="dataSource.dataSourceID" :value="dataSource.dataSourceID" :label="dataSource.dataSourceName" />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item
-                label="日志过滤条件"
-                label-width="100px"
-                prop="logList"
-              >
-                <el-input
-                  v-model="serviceForm.logList"
-                  placeholder="请输入日志过滤条件"
-                  clearable
-                />
+              <el-form-item label="日志过滤条件" label-width="100px" prop="logList">
+                <el-input v-model="serviceForm.logList" placeholder="请输入日志过滤条件" clearable />
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
       </Dialog>
-      <Dialog
-        type="add"
-        width="500px"
-        :flag="dataSourceDialogVisible"
-        msg-title="新增数据来源"
-        @submit-form="dataSourceSubmitHandler"
-        @reset-form="dataSourceDialogHide"
-      >
+      <Dialog type="add" width="500px" :flag="dataSourceDialogVisible" msg-title="新增数据来源" @submit-form="dataSourceSubmitHandler" @reset-form="dataSourceDialogHide">
         <el-form ref="sourceFormRef" label-width="100px" :model="sourceForm">
           <el-form-item label="数据源名称">
             <el-input v-model="sourceForm.dataSourceName" size="small" />
           </el-form-item>
           <el-form-item label="协议名称">
-            <el-select
-              size="small"
-              style="width: 100%"
-              v-model="sourceForm.protocolID"
-              placeholder="请选择活动区域"
-            >
-              <el-option
-                v-for="protocol in selectOptionMap[
+            <el-select size="small" style="width: 100%" v-model="sourceForm.protocolID" placeholder="请选择活动区域">
+              <el-option v-for="protocol in selectOptionMap[
                   queryTemplateIDMap.protocolName
-                ]"
-                :key="protocol.protocolID"
-                :label="protocol.protocolName"
-                :value="protocol.protocolID"
-              />
+                ]" :key="protocol.protocolID" :label="protocol.protocolName" :value="protocol.protocolID" />
             </el-select>
           </el-form-item>
           <el-form-item label="连接参数">
-            <el-input
-              size="small"
-              type="textarea"
-              rows="3"
-              v-model="sourceForm.connectConfig"
-            />
+            <el-input size="small" type="textarea" rows="3" v-model="sourceForm.connectConfig" />
           </el-form-item>
         </el-form>
       </Dialog>
@@ -318,6 +156,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import _ from "lodash";
 import DataTable from "@/components/tableTemp/index.vue";
 import MinHeader from "@/components/minheader/index.vue";
 import Dialog from "@/components/dialog/index.vue";
@@ -386,9 +225,11 @@ onMounted(async () => {
 // 表格
 const tableColumns = ref<CommonTableColumn[]>([]);
 const tableData = ref<any[]>([]);
+const tableDataCopy = ref<any[]>([]);
 const page = ref(0);
 const noMore = ref(false);
 const rowTitle = ref("");
+const serviceVal = ref("");
 onMounted(() => {
   getTableData();
 });
@@ -423,6 +264,7 @@ const getTableData = async () => {
     getSelectOptionOfColumn(columnSet);
     tableColumns.value = columnSet;
     tableData.value.push(...listValues);
+    tableDataCopy.value = _.cloneDeep(tableData.value);
   } catch (error) {
     page.value--;
     console.error(error);
@@ -529,6 +371,45 @@ const changeServiceState = async (serviceID: number, runState: string) => {
   }
 };
 
+//搜索
+const searchForms = (val) => {
+  if (serviceVal.value) {
+    const arrs = tableDataCopy.value.filter(
+      (item) =>
+        item.nodeState == serviceVal.value && item.serviceName.includes(val)
+    );
+    tableData.value = arrs;
+  } else {
+    const arrs = tableDataCopy.value.filter((item) =>
+      item.serviceName.includes(val)
+    );
+    tableData.value = arrs;
+  }
+};
+
+//清空搜索
+const clearForm = () => {
+  if (serviceVal.value) {
+    const arrs = tableDataCopy.value.filter(
+      (item) => item.nodeState == serviceVal.value
+    );
+    tableData.value = arrs;
+  } else {
+    tableData.value = tableDataCopy.value;
+  }
+};
+
+//下拉搜索
+const serviceForms = (val) => {
+  serviceVal.value = val;
+  if (val) {
+    const arrs = tableDataCopy.value.filter((item) => item.nodeState == val);
+    tableData.value = arrs;
+  } else {
+    tableData.value = tableDataCopy.value;
+  }
+};
+
 // 新增/删除服务-弹窗
 const serviceDialogVisible = ref(false); // 弹窗开关
 const serviceDialogType = ref(""); // 弹窗类型是否删除