修改指标加工的sql规则信息

package.json

@@ -48,6 +48,7 @@
     "mammoth": "^1.8.0",
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
+    "monaco-editor": "^0.52.0",
     "nprogress": "^0.2.0",
     "pdfjs-dist": "2.11.338",
     "pinia": "^2.1.7",
@@ -55,6 +56,7 @@
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "sass": "^1.77.8",
+    "sql-formatter": "^15.4.5",
     "url": "^0.11.3",
     "vue": "3.3.4",
     "vue-draggable-plus": "~0.4.1",
@@ -98,6 +100,7 @@
     "js-cookie": "~3.0.5",
     "less": "^4.2.0",
     "lint-staged": "^14.0.1",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "plop": "^4.0.0",
     "postcss": "^8.4.31",
     "postcss-html": "^1.5.0",

src/views/IndexProcess/SqlRule/SqlRule.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-    import { ref } from 'vue';
+    import { ref,watch } from 'vue';
     import { ElTabs,ElTabPane,ElMessage } from 'element-plus';
     import ProcedureConfig from '@/views/IndexProcess/ProcedureRule/components/ProcedureConfig.vue';
     import SetParams from './components/SetParams.vue';
@@ -32,8 +32,12 @@
     const saveSqlRule = async()=>{
       loading.value = true;
       const procedureConfigSubmit = await procedureConfigRef.value?.submit();
-      const setParamsSubmit = await setParamsRef.value?.submit();
+      let setParamsSubmit = await setParamsRef.value?.submit();
       const basicInfoSubmit = await basicInfoRef.value?.submit();
+      if (setParamsSubmit && procedureConfigSubmit) {
+        setParamsSubmit.ruleJson.dataSourceId = procedureConfigSubmit.dataSourceId;
+        setParamsSubmit.ruleJson = JSON.stringify(setParamsSubmit.ruleJson);
+      }
        saveRepSetRuleApi(Object.assign(basicInfoSubmit,setParamsSubmit,procedureConfigSubmit,{ruleClass:'SqlRule'})).then(res=>{
         loading.value = false;
         if(res.head.code == '0'){
@@ -48,6 +52,7 @@
       })
     }
 
+    
 </script>
 <template>
   <ContentWrap v-loading="loading">

src/views/IndexProcess/SqlRule/components/SetParams.vue

@@ -89,11 +89,23 @@ const formSchema = reactive<FormSchema[]>([
 
 const { formRegister, formMethods } = useForm()
 const { setValues,getFormData } = formMethods
+
+
+let searchParam = reactive({
+  paramsType:"filedName",//参数类型
+  searchText:"",//参数名称
+})
+let filterList = reactive([]);//当前表格的列项
+let filterListTemp = reactive([]);//当前表格的列项Temp
+let idsList = reactive([]);//选中的表格项
+let ColumnStatus = ref(false);
+
 watch(
   () => props.ruleInfo,
   (ruleInfo) => {
-    if (!ruleInfo) return
+    if (!ruleInfo || !ruleInfo.paramsDefs) return
-    setValues(ruleInfo)
+    filterList = reactive(ruleInfo.paramsDefs);
+    filterListTemp = reactive(ruleInfo.paramsDefs);
   },
   {
     deep: true,
@@ -101,14 +113,6 @@ watch(
   }
 )
 
-let searchParam = reactive({
-  paramsType:"filedName",//参数类型
-  searchText:"",//参数名称
-})
-let filterList = reactive([]);//当前表格的列项
-let filterListTemp = reactive([]);//当前表格的列项Temp
-let idsList = reactive([]);//选中的表格项
-let ColumnStatus = ref(false);
 //表格的信息多选
 const onSelectionChange = (ids)=>{
   console.log(ids,"多选的ids信息");
@@ -185,11 +189,15 @@ const filterTableList = ()=>{
 
 //提交当前参数信息界面的信息
 const submit = ()=>{
-  return {paramsDefs:filterList};
+  return {ruleJson:{
+    dataSourceId:'',
+    paramsDefs:filterList
+  }};
 }
 defineExpose({
   submit
 })
+
 </script>
 
 <template>
@@ -239,7 +247,7 @@ defineExpose({
         </ElTable>
       </ElMain>
     </ElContainer>
-    <ElAside width="250px" style="border-left:1px solid #ddd;height:100vh;">
+    <ElAside width="250px" style="border-left:1px solid #ddd;height:calc(100vh - 70px);">
       <Form @register="formRegister" :schema="formSchema" labelPosition="top" v-show="ColumnStatus" />
     </ElAside>
   </ElContainer>

src/views/IndexProcess/constants.ts

@@ -1,5 +1,6 @@
 //指标加工规则的类型信息
 export const RULE_TYPE_LIST = [
+    //改编vue3.0的一套
     // {
     //     value: '0',
     //     label: '指标规则',
@@ -15,6 +16,23 @@ export const RULE_TYPE_LIST = [
     //     label: '存储过程规则',
     //     name:'PureSqlRule'
     // }
+
+    //原有react对应的
+    // {
+    //     value: '0',
+    //     label: '指标规则',
+    //     name:'sql'
+    // },
+    // {
+    //     value: '1',
+    //     label: 'SQL规则',
+    //     name:'pureSql'
+    // },
+    // {
+    //     value: '2',
+    //     label: '存储过程规则',
+    //     name:'procedure'
+    // }
 ]
 
 //规则周期

src/views/dataset/RepSetRule/RepSetRule.vue

@@ -158,7 +158,7 @@ const tableColumns = reactive<TableColumn[]>([
       default: (data: any) => {
         return (
           <>
-            <ElLink type="primary" underline={false} onClick={() => AddAction(data.row.ruleClass, 'edit',data.row)}>
+            <ElLink type="primary" underline={false} onClick={() => AddAction(data.row.ruleClass,'edit',data.row)}>
               {t('tableDemo.edit')}
             </ElLink>
             <ElPopconfirm
@@ -223,13 +223,14 @@ const setSearchParams = (data: any) => {
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
 
-const currentRow = ref()
+let currentRow = ref()
-const actionType = ref('')
+let actionType = ref('')
 
 const writeRef = ref<ComponentRef<typeof Write>>()
 
 let RuleType = ref('');
 const AddAction = (ruleType: string,actiontype: string,currentrow) => {
+  console.log(currentrow,"currentRow信息");
   RuleType.value = ruleType;
   dialogTitle.value = actiontype=='add'?`新增规则`:`编辑规则`;
   currentRow.value = currentrow;
@@ -342,7 +343,7 @@ const exportExcel = async () => {
       :current-row="currentRow"
       :action-type="actionType"
       :rule-type="RuleType"
-      @close-dialog="dialogVisible=false;getList()"
+      @close-dialog="dialogVisible=false;getList();"
     />
   </Dialog>
 </template>

src/views/dataset/RepSetRule/components/Write.vue

@@ -22,15 +22,32 @@ const props = defineProps({
 const ruleType = props.ruleType;//当前界面中的规则类型
 let loading = ref(false);
 let ruleInfo = ref({});
-// 查询单条信息
+
-if(props.actionType != 'add'){
+watch(
+  () => props.currentRow,
+  (currentRow) => {
+    if (!currentRow) return
+    
+    // 查询单条信息
+    if(props.actionType != 'add'){
       loading.value = true;
-  queryRepSetRuleApi(props.currentRow.ruleCode).then(res=>{
+      queryRepSetRuleApi(currentRow.ruleCode).then(res=>{
         ruleInfo.value = res.body.result;
+        if(ruleInfo.value.ruleJson && typeof ruleInfo.value.ruleJson == 'string'){
+          ruleInfo.value.ruleJson = JSON.parse(ruleInfo.value.ruleJson);
+          ruleInfo.value.dataSourceId = ruleInfo.value.ruleJson.dataSourceId;
+          ruleInfo.value.paramsDefs = ruleInfo.value.ruleJson.paramsDefs;
+        }
+        console.log(ruleInfo.value);
         loading.value = false;
       })
-}
+    }
-
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
 const emit = defineEmits(['closeDialog']);
 const closeDialogVisible = () => {
   emit('closeDialog')
@@ -50,7 +67,7 @@ const closeDialogVisible = () => {
 </template>
 <style scoped>
   .container{
-    min-height:50vh
+    min-height:50vh;
   }
 </style>