日志展示调整

src/components/JsonEditor/index.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from "vue";
+import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";
+// 组件传参对象
+const props = defineProps<{
+  data: any;
+}>();
+watch(
+  () => props.data,
+  newVal => {
+    try {
+      state.data = newVal;
+    } catch (err) {
+      console.log('JSON ERROR');
+    }
+  }
+);
+const state = reactive({
+  val: JSON.stringify(props.data),
+  data: props.data,
+  showLine: true,
+  showLineNumber: true,
+  showDoubleQuotes: true,
+  showLength: true,
+  editable: true,
+  showIcon: true,
+  editableTrigger: "click",
+  deep: 3
+});
+// 暂不修改
+// watch(
+//   () => state.val,
+//   newVal => {
+//     try {
+//       state.data = JSON.parse(newVal);
+//     } catch (err) {
+//       console.log('JSON ERROR');
+//     }
+//   }
+// );
+
+// watch(
+//   () => state.data,
+//   newVal => {
+//     try {
+//       state.val = JSON.stringify(newVal);
+//     } catch (err) {
+//       console.log('JSON ERROR');
+//     }
+//   }
+// );
+</script>
+
+<template>
+  <el-card shadow="never">
+    <vue-json-pretty v-model:data="state.data" :deep="state.deep" :show-double-quotes="state.showDoubleQuotes"
+      :show-line="state.showLine" :show-length="state.showLength" :show-icon="state.showIcon"
+      :show-line-number="state.showLineNumber" :editable="state.editable"
+      :editable-trigger="state.editableTrigger as any" />
+  </el-card>
+</template>

src/utils/importUsed.ts

@@ -2,7 +2,7 @@
  * @Author: guicheng 1625811865@qq.com
  * @Date: 2024-06-21 11:11:08
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-06-21 11:55:32
+ * @LastEditTime: 2024-11-01 14:41:17
  * @FilePath: /admin-skb/src/utils/importUsed.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -21,5 +21,31 @@ import verification, { RegularVerification } from "./rules";
 import { type PaginationProps } from "@pureadmin/table";
 import { hasAuth } from "@/router/utils";
 import { PureTableBar } from "@/components/RePureTableBar";
+import { usePublicHooks } from "@/utils/switchStyle";
+import { getConfig } from "@/config";
+import JsonEditor from "@/components/JsonEditor/index.vue";
 
-export { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification, PaginationProps, hasAuth, PureTableBar }
+export {
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  usePublicHooks,
+  Uploadfile,
+  UploadImg,
+  Editor,
+  useRenderIcon,
+  ElMessage,
+  ElMessageBox,
+  Upload,
+  Close,
+  http,
+  getGroupUrl,
+  RegularVerification,
+  verification,
+  PaginationProps,
+  hasAuth,
+  PureTableBar,
+  JsonEditor,
+  getConfig
+};

src/utils/switchStyle.ts

@@ -0,0 +1,39 @@
+// 抽离可公用的工具函数等用于系统管理页面逻辑
+import { computed } from "vue";
+import { useDark } from "@pureadmin/utils";
+
+export function usePublicHooks() {
+  const { isDark } = useDark();
+
+  const switchStyle = computed(() => {
+    return {
+      "--el-switch-on-color": "#6abe39",
+      "--el-switch-off-color": "#e84749"
+    };
+  });
+
+  const tagStyle = computed(() => {
+    return (status: number) => {
+      return status === 1
+        ? {
+            "--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
+            "--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
+            "--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
+          }
+        : {
+            "--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
+            "--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
+            "--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
+          };
+    };
+  });
+
+  return {
+    /** 当前网页是否为`dark`模式 */
+    isDark,
+    /** 表现更鲜明的`el-switch`组件  */
+    switchStyle,
+    /** 表现更鲜明的`el-tag`组件  */
+    tagStyle
+  };
+}

src/views/pri/priLog/components/updatePriLog/index.vue

@@ -5,7 +5,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+import { JsonEditor, inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
 // 接口列表实例
 let UrlList = reactive(null)
 // 获取当前板块接口列表
@@ -36,6 +36,7 @@ const UpdateForm: any = ref({
   prizeObjId: "", //发放对象
   logSummary: "", //日志说明
   batchNo: "", //批次号
+  stepList: "", //日志内容
 
 });
 // 配置ID选项数据
@@ -68,11 +69,12 @@ const submit = async (formEl) => {
           type: "success"
         });
         UpdateForm.value = {
-      id: null, //ID
-      listId: null, //配置ID
-      prizeObjId: "", //发放对象
-      logSummary: "", //日志说明
-      batchNo: "", //批次号
+          id: null, //ID
+          listId: null, //配置ID
+          prizeObjId: "", //发放对象
+          logSummary: "", //日志说明
+          batchNo: "", //批次号
+          stepList: "", //日志内容
 
         };
         // 关闭修改弹窗;
@@ -96,7 +98,7 @@ const submit = async (formEl) => {
 
 //获取配置ID数据
 const listIdQuery = async () => {
-  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriListDic.method, url: UrlList.prizeSet.prigetPriListDic.url, params: { } });
+  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriListDic.method, url: UrlList.prizeSet.prigetPriListDic.url, params: {} });
   if (status === 1) {
     listIdOptionList.value = data.records;
   }
@@ -115,9 +117,10 @@ const rules = reactive({
 const closeFn: any = inject('closeEditUpdatePriLogVisible');
 const openVisible = async () => {
   //通过ID获取表格数据
-  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriLogQuery.method, url: UrlList.prizeSet.prigetPriLogQuery.url, params: { id: props.formData.id }});
+  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriLogQuery.method, url: UrlList.prizeSet.prigetPriLogQuery.url, params: { id: props.formData.id } });
   if (status === 1) {
     UpdateForm.value = data;
+    UpdateForm.value.stepList = JSON.parse(data.stepList);
 
   }
 };
@@ -129,6 +132,7 @@ const closeUpdatePriLogVisible = () => {
     prizeObjId: "", //发放对象
     logSummary: "", //日志说明
     batchNo: "", //批次号
+    stepList: "", //日志内容
 
   };
   closeFn();
@@ -140,27 +144,10 @@ const isFullscreen = ref(false)
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeUpdatePriLogVisible" @open="openVisible")
+  el-dialog(v-model='props.editVisible' draggable width="70%" :fullscreen="isFullscreen" title="日志" @close="closeUpdatePriLogVisible" @open="openVisible")
     el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
-      el-form-item(label='ID' prop="id")
-        el-input-number(v-model='UpdateForm.id' :min="1" :max="1000"
-          placeholder="请输入ID")
-      el-form-item(label="配置ID", prop="listId")
-        el-select(
-          v-model="UpdateForm.listId",
-          placeholder="请选择配置ID",
-          clearable,
-        )
-          el-option(:label="item.id", :value="item.prizeName" v-for="(item,index) in listIdOptionList")
-      el-form-item(label='发放对象' prop="prizeObjId")
-        el-input(v-model='UpdateForm.prizeObjId' autocomplete='off'
-          placeholder="请输入发放对象")
-      el-form-item(label='日志说明' prop="logSummary")
-        el-input(v-model='UpdateForm.logSummary' autocomplete='off'
-          placeholder="请输入日志说明")
-      el-form-item(label='批次号' prop="batchNo")
-        el-input(v-model='UpdateForm.batchNo' autocomplete='off'
-          placeholder="请输入批次号")
+      el-form-item(label='奖励日志' prop="stepList")
+        JsonEditor(v-model:data="UpdateForm.stepList")
 
     .flex.justify-end
       el-button(
@@ -168,11 +155,11 @@ const isFullscreen = ref(false)
         :loading="loading",
         @click="closeUpdatePriLogVisible()"
       ) 关闭
-      el-button(
-        type="primary",
-        :icon="useRenderIcon(Upload)",
-        @click="submit(ruleFormRef)"
-      ) 确认提交
+      //- el-button(
+      //-   type="primary",
+      //-   :icon="useRenderIcon(Upload)",
+      //-   @click="submit(ruleFormRef)"
+      //- ) 确认提交
 </template>
 
 <style scoped lang="scss">

src/views/pri/priLog/components/updatePriLogErr/index.vue

@@ -0,0 +1,205 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { JsonEditor, inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["prizeSet"]);
+  listIdQuery();
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  id: null, //ID
+  listId: null, //配置ID
+  prizeObjId: "", //发放对象
+  logSummary: "", //日志说明
+  batchNo: "", //批次号
+  errLog: "", //日志内容
+
+});
+// 配置ID选项数据
+const listIdOptionList = ref([]);
+
+// 表单实例
+const ruleFormRef = ref()
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async (formEl) => {
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+
+      // 需动态生成接口
+      const { status, msg }: any = await http.Request({
+        method: UrlList.prizeSet.priupdatePriLog.method,
+        url: UrlList.prizeSet.priupdatePriLog.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+          id: null, //ID
+          listId: null, //配置ID
+          prizeObjId: "", //发放对象
+          logSummary: "", //日志说明
+          batchNo: "", //批次号
+          errLog: "", //日志内容
+
+        };
+        // 关闭修改弹窗;
+        closeUpdatePriLogVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+//获取配置ID数据
+const listIdQuery = async () => {
+  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriListDic.method, url: UrlList.prizeSet.prigetPriListDic.url, params: {} });
+  if (status === 1) {
+    listIdOptionList.value = data.records;
+  }
+};
+
+
+
+// 表单校验规则
+const rules = reactive({
+  batchNo: [
+    { required: true, message: '请输入批次号', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditUpdatePriLogErrVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriLogQuery.method, url: UrlList.prizeSet.prigetPriLogQuery.url, params: { id: props.formData.id } });
+  if (status === 1) {
+    UpdateForm.value = data;
+  }
+};
+// 关闭弹窗回调函数
+const closeUpdatePriLogVisible = () => {
+  UpdateForm.value = {
+    id: null, //ID
+    listId: null, //配置ID
+    prizeObjId: "", //发放对象
+    logSummary: "", //日志说明
+    batchNo: "", //批次号
+    errLog: "", //日志内容
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' draggable width="70%" :fullscreen="isFullscreen" title="报错" @close="closeUpdatePriLogVisible" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+      el-form-item(label='报错日志' prop="errLog")
+        JsonEditor(v-model:data="UpdateForm.errLog")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeUpdatePriLogVisible()"
+      ) 关闭
+      //- el-button(
+      //-   type="primary",
+      //-   :icon="useRenderIcon(Upload)",
+      //-   @click="submit(ruleFormRef)"
+      //- ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/pri/priLog/hook.tsx

@@ -62,6 +62,11 @@ export function usePriLog() {
       prop: "batchNo",
       width: 200
     },
+    {
+      label: "状态",
+      prop: "status",
+      width: 100
+    },
     {
       label: "时间",
       prop: "createDate",
@@ -195,7 +200,7 @@ export function usePriLog() {
     addVisible.value = true;
   };
 
-  // 修改
+  // 日志
   const editUpdatePriLogVisible = ref(false);
   const editUpdatePriLogFormData = ref({});
   function handleUpdatePriLog(row) {
@@ -204,6 +209,15 @@ export function usePriLog() {
     editUpdatePriLogFormData.value = row;
   };
 
+  // 报错
+  const editUpdatePriLogErrVisible = ref(false);
+  const editUpdatePriLogErrFormData = ref({});
+  function handleUpdatePriLogErr(row) {
+    editUpdatePriLogErrVisible.value = true;
+    // 表格数据赋值
+    editUpdatePriLogErrFormData.value = row;
+  };
+
   return {
     form,
     loading,
@@ -221,8 +235,11 @@ export function usePriLog() {
     handleAdd,
     addVisible,
     handleUpdatePriLog,
+    handleUpdatePriLogErr,
     editUpdatePriLogVisible,
     editUpdatePriLogFormData,
+    editUpdatePriLogErrVisible,
+    editUpdatePriLogErrFormData,
     handleDelete,
 
   };

src/views/pri/priLog/index.vue

@@ -11,6 +11,7 @@ import { http } from "@/utils/http";
 import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
 import Add from "./components/add/index.vue";
 import EditUpdatePriLog from "./components/updatePriLog/index.vue";
+import EditUpdatePriLogErr from "./components/updatePriLogErr/index.vue";
 import Search from "@iconify-icons/ep/search";
 import Addicon from "@iconify-icons/ep/document-add";
 import Delete from "@iconify-icons/ep/delete";
@@ -32,8 +33,11 @@ const {
   handleAdd,
   addVisible,
   handleUpdatePriLog,
+  handleUpdatePriLogErr,
   editUpdatePriLogVisible,
   editUpdatePriLogFormData,
+  editUpdatePriLogErrVisible,
+  editUpdatePriLogErrFormData,
   handleDelete,
 
 } = usePriLog();
@@ -50,6 +54,12 @@ const closeEditUpdatePriLogVisible = () => {
 }
 provide('closeEditUpdatePriLogVisible', closeEditUpdatePriLogVisible)
 
+const closeEditUpdatePriLogErrVisible = () => {
+  onSearch(ruleFormRef.value);
+  editUpdatePriLogErrVisible.value = false
+}
+provide('closeEditUpdatePriLogErrVisible', closeEditUpdatePriLogErrVisible)
+
 </script>
 
 <template lang="pug">
@@ -118,10 +128,13 @@ provide('closeEditUpdatePriLogVisible', closeEditUpdatePriLogVisible)
               link
               type="primary"
               size="small"
-              @click="handleUpdatePriLog(row)"
+              @click="handleUpdatePriLogErr(row)"
               :icon="useRenderIcon(EditPen)"
             ) 报错
 
+    EditUpdatePriLog(:editVisible="editUpdatePriLogVisible" :formData="editUpdatePriLogFormData")
+    EditUpdatePriLogErr(:editVisible="editUpdatePriLogErrVisible" :formData="editUpdatePriLogErrFormData")
+
 </template>
 
 <style scoped lang="scss">