@arkxos/arkos-system 0.1.0

package/src/views/codeless/scriptGroovyEdit.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="page-container">
+    <el-form
+      ref="dataForm"
+      label-width="120px"
+      label-position="right"
+      class="fit-form"
+      :model="formData"
+      :rules="rules"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="脚本编码" prop="code">
+            <el-input v-model="formData.code" :disabled="true" placeholder="系统自动生成" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="脚本名称" prop="name">
+            <el-input v-model="formData.name" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="目录名称" prop="folderId">
+            <ac-tree
+              v-model="formData.folderId"
+              dataUrl="/system/scriptFolder/queryTree"
+              :leafSelect="false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="fit-form-row">
+        <el-col :span="24" class="fit-form-col">
+          <el-form-item label="脚本内容" prop="script" class="fit-form-item">
+            <ac-code
+              v-model="formData.script"
+              :title="formData.name"
+              mode="groovy"
+              @change="handleChangeScript"
+            ></ac-code>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import api from '@/http/api';
+import loading from '@/utils/loading';
+
+const emit = defineEmits(['afterSubmit'])
+const props = defineProps({
+  options: Object
+});
+
+const dataForm = ref();
+const formData = ref({});
+const rules = ref({
+  name: [
+    { required: true, message: '请输入脚本名称', trigger: ['blur', 'change'] },
+    { max: 100, message: '脚本名称长度最多只能是100个字符', trigger: ['blur', 'change'] }
+  ],
+});
+
+const changeScript = ref(false);
+
+const handleChangeScript = () => {
+  changeScript.value = true;
+};
+
+const hasChange = () => {
+  return changeScript.value;
+};
+
+const submitData = () => {
+  dataForm.value && dataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        api.post('/system/scriptGroovy/save', formData.value)
+          .then((res) => {
+            changeScript.value = false;
+            ElMessage.success(res.message);
+            emit('afterSubmit', res.data)
+          }).catch(() => {
+          });
+      }).catch(() => {});
+    } else {
+      ElMessage.error('数据录入不正确，请重新检查！');
+    }
+  });
+};
+
+const loadData = (options) => {
+  if (!options.id) {
+    formData.value = Object.assign({}, options);
+    return;
+  }
+
+  loading.showLoading();
+  api.post('/system/scriptGroovy/queryBy', { id: options.id }).then(res => {
+    formData.value = res.data || {};
+    loading.hideLoading();
+    nextTick(() => changeScript.value = false);
+  }).catch(() => loading.hideLoading());
+};
+
+watch(() => props.options, val => {
+  loadData(val);
+});
+
+onMounted(() => {
+  changeScript.value = false;
+  loadData(props.options);
+});
+
+defineExpose({ hasChange, submitData });
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  width: auto;
+  margin-right: 90px;
+  .el-form {
+    margin-top: 20px;
+  }
+}
+.title {
+  display: flex;
+  flex-direction: row;
+  margin-right: 10px;
+  height: 40px;
+  align-items: center;
+
+  .title-content {
+    flex-grow: 1;
+    font-size: 18px;
+  }
+
+  .title-button .title-button-box {
+    height: 30px;
+    width: 40px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+  }
+
+  .title-button .title-button-box:hover {
+    background: #eaeaea;
+    border: none;
+  }
+
+  .title-button .title-button-box:focus-visible {
+    outline: unset;
+  }
+}
+
+.filter-box {
+  margin-right: 10px;
+}
+
+.tree :deep(.el-tree-node__content) {
+  height: 40px;
+}
+
+.page-aside-grow {
+  width: 100% !important;
+
+  :deep(.el-tree) {
+    display: flex;
+    flex-direction: column;
+    width: 1px !important;
+  }
+
+  :deep(.el-tree-node) {
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
+  }
+
+  :deep(.el-tree-node__content) {
+    display: flex;
+    flex-grow: 1;
+  }
+}
+
+.node-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+
+  .node-label {
+    margin-left: 10px;
+    flex-grow: 1;
+    width: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+
+    > span {
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+  .node-button {
+    margin-right: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .node-button .node-button-item {
+    height: 30px;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+  }
+  .node-button .node-button-item:focus-visible {
+    outline: unset;
+  }
+}
+:deep(.el-tree-node:not(.is-current):focus>.el-tree-node__content) {
+  background-color: unset!important;
+}
+:deep(.el-tree-node:focus>.el-tree-node__content) {
+  background-color: unset!important;
+}
+:deep(.el-tree-node:focus>.el-tree-node__content:hover) {
+  background-color: #f5f7fa!important;
+}
+:deep(.el-tree-node.is-current:focus>.el-tree-node__content) {
+  background-color: #ecf5ff!important;
+}
+.node-item:hover {
+  .node-button .node-button-item:hover {
+    background: #eaeaea;
+  }
+}
+</style>

package/src/views/codeless/scriptGroovyExecute.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="page-container">
+    <el-tabs v-model="activeName" class="fit-box full-height">
+      <el-tab-pane label="脚本执行情况" name="detail" class="fit-box full-height">
+        <!--表格内容栏-->
+        <ac-table
+          ref="dataTable"
+          pkName="id"
+          :filters="filters"
+          :filterFields="filterFields"
+          :columns="columns"
+          :defaultSort="defaultSort"
+          @handleCellOperator="handleCellOperator"
+        ></ac-table>
+      </el-tab-pane>
+      <el-tab-pane label="脚本执行统计" name="total" class="fit-box full-height">
+        <!--表格内容栏-->
+        <ac-table
+          ref="totalTable"
+          pkName="groovyId"
+          dataUrl="/system/scriptExecute/queryExecuteCount"
+          :pageSort="true"
+          :filters="totalFilters"
+          :filterFields="totalFilterFields"
+          :columns="totalColumns"
+        ></ac-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+
+  <el-dialog
+    v-model="dialogVisible"
+    width="800px"
+    :title="dialogTitle"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      label-width="100px"
+      label-position="right"
+      :disabled="!dialogEdit"
+      :model="formData"
+      :hide-required-asterisk="!dialogEdit"
+      v-loading="dialogLoading"
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="脚本名称" prop="groovyName">
+            <el-input v-model="formData.groovyName" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="执行结果" prop="result">
+            <el-input v-model="formData.result" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="开始时间" prop="startTime">
+            <ac-datetime v-model="formData.startTime" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="结束时间" prop="endTime">
+            <ac-datetime v-model="formData.endTime" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="参数" prop="params">
+            <el-input type="textarea" rows="5" v-model="formData.params" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="失败信息" prop="message">
+            <el-input type="textarea" rows="5" v-model="formData.message" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="耗时" prop="takeTime">
+            <el-input v-model="formData.takeTime" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="创建时间" prop="createTime">
+            <ac-datetime v-model="formData.createTime" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="dialogVisible=false"
+      >关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import tool from '@/utils/tool';
+import api from '@/http/api';
+
+const filters = ref({
+  groovyId: '',
+  result: ''
+});
+const filterFields = ref([
+  {
+    prop: 'groovyId',
+    label: '脚本名称',
+    type: 'tree',
+    dataUrl: '/system/scriptGroovy/queryTree',
+    typeSelect: 'script',
+    placeholder: '脚本名称'
+  },
+  { prop: 'result', label: '执行结果', type: 'select', options: '成功,失败' },
+]);
+const columns = ref([
+  { prop: 'groovyName', label: '脚本名称', minWidth: 120, sortable: false, click: true },
+  { prop: 'result', label: '执行结果', width: 100 },
+  { prop: 'startTime', label: '开始时间', width: 160, type: 'datetime' },
+  { prop: 'endTime', label: '结束时间', width: 160, type: 'datetime' },
+  {
+    prop: 'takeTime',
+    label: '耗时',
+    width: 180,
+    align: 'right',
+    formatter: (prop, value) => {
+      return value ? tool.formatTime(value) : '';
+    }
+  },
+  { prop: 'message', label: '失败信息', minWidth: 140 },
+  { prop: 'createTime', label: '创建时间', width: 160, type: 'datetime' }
+]);
+const defaultSort = ref({ prop: 'createTime', order: 'descending' });
+
+const totalFilters = ref({ pageSize: 10000 });
+const totalFilterFields = ref([
+  {
+    prop: 'groovyId',
+    label: '脚本名称',
+    type: 'tree',
+    dataUrl: '/system/scriptGroovy/queryTree',
+    typeSelect: 'script',
+    placeholder: '脚本名称'
+  },
+]);
+const totalColumns = ref([
+  { prop: 'groovyName', label: '脚本名称', minWidth: 120 },
+  { prop: 'executeCount', label: '执行总次数', width: 120, align: 'right' },
+  {
+    prop: 'takeTime',
+    label: '执行总耗时',
+    width: 180,
+    align: 'right',
+    formatter: (prop, value) => {
+      return value ? tool.formatTime(value) : '';
+    }
+  },
+  {
+    prop: 'avgTime',
+    label: '平均耗时',
+    width: 180,
+    align: 'right',
+    formatter: (prop, value, row) => {
+      if (row.takeTime > 0 && row.executeCount > 0) {
+        return tool.formatTime(row.takeTime / row.executeCount);
+      } else {
+        return '';
+      }
+    }
+  },
+  { prop: 'createTime', label: '最后一次执行时间', width: 160, type: 'datetime' },
+]);
+
+const activeName = ref('detail');
+const dialogVisible = ref(false);
+const dialogLoading = ref(true);
+const dialogEdit = ref(false);
+const dialogTitle = ref('');
+const formData = ref({});
+
+const handleCellOperator = (prop, value, data) => {
+  dialogLoading.value = true;
+  formData.value = {};
+  dialogTitle.value = '查看执行明细';
+  dialogVisible.value = true;
+  dialogEdit.value = false;
+
+  api.post('/system/scriptExecute/queryBy', { id: data.id }).then(res => {
+    const data = res.data || {};
+    if (data.takeTime) {
+      data.takeTime = tool.formatTime(data.takeTime) || '';
+    }
+    formData.value = data;
+    dialogTitle.value = '查看执行明细';
+    dialogVisible.value = true;
+    dialogEdit.value = false;
+    dialogLoading.value = false;
+  });
+};
+</script>