admin-ui/src/views/modules/policy/index/components/execute.vue

<template>
  <el-dialog title="执行" v-model="isShowDialog" width="600px">
    <el-form>
      <el-form-item>
        <p>标题：{{currentPolicy.title}}</p>
        <p class="ml30">执行类型：{{typesText[currentPolicy.types]}}</p>
      </el-form-item>
      <el-form-item >
        <div style="width: 100%;">
          <p>参数配置</p>
          <div class="param-wrap" v-for="(item, index) in currentPolicy.paramData" :key="index">
            <p class="mr6 label">{{item.title}}：</p>
            <!-- int、long、float、double、string、boolean、date、timestamp -->
            <el-input v-if="item.types === 'string'" clearable :placeholder="`请输入${item.title}`" v-model="item.value" />
            <el-input-number v-if="['int',  'long'].indexOf(item.types) > -1" :placeholder="`请输入${item.title}`" v-model="item.value" :step="1" step-strictly />
            <el-input-number v-if="['float',  'double'].indexOf(item.types) > -1" :placeholder="`请输入${item.title}`" v-model="item.value" :precision="2" />
            <el-radio-group v-if="item.types === 'boolean'" v-model="item.value">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="item.types === 'date'"
              v-model="item.value"
              type="datetime"
              :placeholder="`请选择${item.title}`"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="YYYY-MM-DD h:m:s"
            />
            <el-date-picker
              v-if="item.types === 'timestamp'"
              v-model="item.value"
              type="datetime"
              :placeholder="`请选择${item.title}`"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="x"
            />
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="form-btn-wrap">
      <el-button @click="onSubmit('handle')">手动执行 </el-button>
      <el-button type="primary" @click="onSubmit('auto')"> 开始执行 </el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from "element-plus";
import api from '/@/api/modules/policy';
import axios from 'axios';
import { getToken } from "/@/utils/auth";

const isShowDialog = ref(false);
const typesText = {
  1: '手动',
  2: '自动'
};
const headers = {
  Authorization: "Bearer " + getToken(),
};
const currentPolicy = ref<any>({});

const emit = defineEmits(['getList']);

// 手动执行/开始执行
const onSubmit = async () => {
  const params:any = {};
  currentPolicy.value.paramData.forEach((item:any) => {
    params[item.key] = item.value
  })
  await api.saveParam({
    id: currentPolicy.value.id,
    param: {
      ...params
    }
  })
  await axios.post(`${import.meta.env.VITE_RULE_SERVER_URL}/api/v1/rules/${currentPolicy.value.flowId}/execute/${currentPolicy.value.types}`, params, { headers }).catch(() => {
    ElMessage.error("规则不存在");
  }) as any;

	ElMessage.success('操作成功');
	isShowDialog.value = false;
	emit('getList');
}

// 打开弹窗
const openDialog = (row?: any) => {
  if (row) {
    api.detail(row.id).then((res: any) => {
      currentPolicy.value = res.data;
    });
  }
  isShowDialog.value = true;
};

defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
  .param-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    .label {
      width: 120px;
      text-align: right;
    }
  }
  .el-input-number,
  .el-input {
    width: 260px!important;
  }
  ::v-deep   .el-date-editor.el-input {
    width: 260px!important;
  }

  ::v-deep .el-dialog__body {
    position: relative;
  }
  .form-btn-wrap {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
</style>