保存一版指标加工，格式化sql插件：npm install sql-formatter

src/views/IndexProcess/ProcedureRule/components/ProcedureConfig.vue

@@ -14,6 +14,10 @@ const props = defineProps({
   ruleType:{
     type: String,
     default: 'ProcedureRule'
+  },
+  ruleInfo:{
+    type: Object,
+    default: () => {}
   }
 })
 
@@ -21,7 +25,7 @@ const props = defineProps({
 // const formSchema = reactive<FormSchema[]>([
 //   {
 //     //数据源Id：dataSourceId
-//     field: 'schema',
+//     field: 'dataSourceId',
 //     label: '数据源',
 //     component: 'Select',
 //     colProps: {
@@ -56,27 +60,17 @@ const props = defineProps({
 // ])
 
 const rules = reactive({
-  schema: [required('请选择数据源')],
+  dataSourceId: [required('请选择数据源')],
   procedureName:[required('请输入存储过程名称')],
-
 })
 
-watch(
-  () => props.currentRow,
-  (currentRow) => {
-    if (!currentRow) return
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
+
 let sqlInfo = reactive({
-  schema:"",//数据源信息
+  dataSourceId:"",//数据源信息
   dataSourceList:[],//数据源list
   procedureName:"",//存储过程名称
   procedureParams:"",//存储过程参数
-  pureSql:''//sql
+  ruleSql:''//sql
 })
 
 const sqlEditor = ref(null);
@@ -85,7 +79,6 @@ let editorInstance = null;
 //获取数据源列表
 const getDataSourceList = async()=>{
   const res = await getTableList({})
-  console.log(res,"获取res信息");
   if(res.head.code == '0'){//说明获取成功
     sqlInfo.dataSourceList = res.body.list;
   }
@@ -94,7 +87,7 @@ const getDataSourceList = async()=>{
 //初始化编辑器实例
 const InitEditorInstance = () => {
   editorInstance = monaco.editor.create(sqlEditor.value, {
-    value: sqlInfo.pureSql,
+    value: sqlInfo.ruleSql,
     language: 'sql',
     theme: 'vs',
     automaticLayout: true,
@@ -102,13 +95,28 @@ const InitEditorInstance = () => {
   });
 
   editorInstance.onDidChangeModelContent(() => {
-    sqlInfo.pureSql = editorInstance.getValue();
+    sqlInfo.ruleSql = editorInstance.getValue();
   });
 }
 onMounted(()=>{
   InitEditorInstance();//初始化编辑器实例
   getDataSourceList();//获取数据源列表
 }) 
+watch(
+  () => props.ruleInfo,
+  (ruleInfo) => {
+    if (!ruleInfo) return
+    sqlInfo = Object.assign(sqlInfo,ruleInfo);
+    if(editorInstance){
+      const model = editorInstance.getModel();
+      model.setValue(sqlInfo.ruleSql);
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
 //格式化SQL
 const formatterSql = ()=>{
   const model = editorInstance.getModel();
@@ -121,7 +129,8 @@ const formatterSql = ()=>{
 //提交当前界面的信息
 const submit = () =>{
   const model = editorInstance.getModel();
-  sqlInfo.pureSql = model.getValue();
+  sqlInfo.ruleSql = model.getValue();
+  console.log(sqlInfo,"sqlInfo信息Submit");
   return sqlInfo
 }
 defineExpose({
@@ -134,7 +143,7 @@ defineExpose({
     <ElRow>
       <ElCol :span="12">
         <ElFormItem label="数据源" style="margin-left:20px;">
-          <ElSelect v-model="sqlInfo.schema" placeholder="请选择数据源">
+          <ElSelect v-model="sqlInfo.dataSourceId" placeholder="请选择数据源">
             <el-option :label="item.dsname" :value="item.dscode" :key="item.dscode" v-for="item in sqlInfo.dataSourceList" />
           </ElSelect>
         </ElFormItem>

src/views/IndexProcess/SqlRule/SqlRule.vue

@@ -6,6 +6,18 @@
     import BasicInfo from './components/BasicInfo.vue';
 
     import { saveRepSetRuleApi } from '@/api/dataset/RepSetRule/index'
+
+    const props = defineProps({
+      actionType: {
+        type: String,
+        default: 'add'
+      },
+      ruleInfo:{//规则信息
+        type:Object,
+        default:()=>{}
+      },
+    })
+
     //保存sql规则信息
     const procedureConfig = ref<ComponentRef<typeof ProcedureConfig>>();//sql规则
     const setParams = ref<ComponentRef<typeof SetParams>>();//参数设置
@@ -15,15 +27,18 @@
     const setParamsRef = ref(setParams);
     const basicInfoRef = ref(basicInfo);
     let loading = ref(false);
+    const emit = defineEmits(['closeDialogVisible']);
+    //保存SQL规则信息
     const saveSqlRule = async()=>{
       loading.value = true;
       const procedureConfigSubmit = await procedureConfigRef.value?.submit();
       const setParamsSubmit = await setParamsRef.value?.submit();
       const basicInfoSubmit = await basicInfoRef.value?.submit();
-      saveRepSetRuleApi(Object.assign(procedureConfigSubmit,setParamsSubmit,basicInfoSubmit)).then(res=>{
+      saveRepSetRuleApi(Object.assign(basicInfoSubmit,setParamsSubmit,procedureConfigSubmit,{ruleClass:'SqlRule'})).then(res=>{
         loading.value = false;
         if(res.head.code == '0'){
           ElMessage.success('保存成功');
+          emit('closeDialogVisible');
         }else{
           ElMessage.error(res.head.message);
         }
@@ -38,13 +53,13 @@
   <ContentWrap v-loading="loading">
     <ElTabs tab-position="left" style="height: 100%;">
       <ElTabPane label="SQL">
-        <ProcedureConfig ref="procedureConfig" rule-type="SqlRule" />
+        <ProcedureConfig ref="procedureConfig" rule-type="SqlRule" :rule-info="props.ruleInfo" />
       </ElTabPane>
       <ElTabPane label="参数配置">
-        <SetParams ref="setParams" />
+        <SetParams ref="setParams" :rule-info="props.ruleInfo" />
       </ElTabPane>
       <ElTabPane label="基本信息">
-        <BasicInfo ref="basicInfo" @save-sql-rule="saveSqlRule" />
+        <BasicInfo ref="basicInfo" @save-sql-rule="saveSqlRule" :rule-info="props.ruleInfo" :actionType="props.actionType" />
       </ElTabPane>
     </ElTabs>
   </ContentWrap>

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

@@ -7,9 +7,13 @@ import {RULE_CYCLE_LIST,RULE_IS_VALID_LIST} from '@/views/IndexProcess/constants
 const { required } = useValidator()
 
 const props = defineProps({
-  currentRow: {
+  actionType: {
+    type: String,
+    default: 'add'
+  },
+  ruleInfo:{
     type: Object as PropType<any>,
-    default: () => null
+    default: () => {}
   }
 })
 
@@ -20,8 +24,8 @@ const formSchema = reactive<FormSchema[]>([
     component: 'Input',
     componentProps:{
       placeholder: '请输入规则编码',
-      showWordLimit: true,
-    }
+      disabled: props.actionType != 'add'
+    },
   },
   {
     field: 'ruleName',
@@ -29,7 +33,6 @@ const formSchema = reactive<FormSchema[]>([
     component: 'Input',
     componentProps:{
       placeholder: '请输入规则编码',
-      showWordLimit: true,
     }
   },
   {
@@ -113,10 +116,10 @@ const submit = async () => {
 }
 
 watch(
-  () => props.currentRow,
-  (currentRow) => {
-    if (!currentRow) return
-    setValues(currentRow)
+  () => props.ruleInfo,
+  (ruleInfo) => {
+    if (!ruleInfo) return
+    setValues(props.ruleInfo)
   },
   {
     deep: true,

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

@@ -5,7 +5,7 @@ import { useForm } from '@/hooks/web/useForm'
 import { PropType,ref,reactive, watch,computed } from 'vue'
 import {FIELD_TYPES_LIST} from '@/views/IndexProcess/constants'
 const props = defineProps({
-  currentRow: {
+  ruleInfo: {
     type: Object as PropType<any>,
     default: () => null
   }
@@ -90,10 +90,10 @@ const formSchema = reactive<FormSchema[]>([
 const { formRegister, formMethods } = useForm()
 const { setValues,getFormData } = formMethods
 watch(
-  () => props.currentRow,
-  (currentRow) => {
-    if (!currentRow) return
-    setValues(currentRow)
+  () => props.ruleInfo,
+  (ruleInfo) => {
+    if (!ruleInfo) return
+    setValues(ruleInfo)
   },
   {
     deep: true,

src/views/dataset/RepSetRule/RepSetRule.vue

@@ -21,7 +21,7 @@ import Write from './components/Write.vue'
 import { Dialog } from '@/components/Dialog'
 import { getWidth } from '@/utils';
 import { Upload } from '@/components/Upload'
-import { RULE_TYPE_LIST } from '@/views/IndexProcess/constants'
+import { RULE_TYPE_LIST,RULE_CYCLE_LIST,RULE_IS_VALID_LIST } from '@/views/IndexProcess/constants'
 
 const { t } = useI18n()
 
@@ -57,15 +57,23 @@ const tableColumns = reactive<TableColumn[]>([
   },
   {
     field: 'ruleCode',
-    label: '指标集规则清单编码'
+    label: '指标集规则清单编码',
+    width:180
   },
   {
     field: 'ruleName',
-    label: '规则名称'
+    label: '规则名称',
+    align: "left",
+    headerAlign: 'left',
   },
   {
     field: 'ruleClass',
-    label: '规则分类'
+    label: '规则分类',
+    slots:{
+      default:(data:any)=>{
+        return RULE_TYPE_LIST.find(item=>item.name==data.row.ruleClass)?.label;
+      }
+    }
   },
   {
     field: 'startDate',
@@ -77,11 +85,21 @@ const tableColumns = reactive<TableColumn[]>([
   },
   {
     field: 'ruleCycle',
-    label: '规则周期'
+    label: '规则周期',
+    slots:{
+      default:(data:any)=>{
+        return RULE_CYCLE_LIST.find(item=>item.value==data.row.ruleCycle)?.label;
+      }
+    }
   },
   {
     field: 'ruleStatus',
-    label: '是否有效'
+    label: '是否有效',
+    slots:{
+      default:(data:any)=>{
+        return RULE_IS_VALID_LIST.find(item=>item.value==data.row.ruleStatus)?.label;
+      }
+    }
   },
   {
     field: 'description',
@@ -134,13 +152,13 @@ const tableColumns = reactive<TableColumn[]>([
   {
     field: 'action',
     label: t('tableDemo.action'),
-    width: 160,
+    width: 120,
     fixed: 'right',
     slots: {
       default: (data: any) => {
         return (
           <>
-            <ElLink type="primary" underline={false} onClick={() => action(data.row, 'edit')}>
+            <ElLink type="primary" underline={false} onClick={() => AddAction(data.row.ruleClass, 'edit',data.row)}>
               {t('tableDemo.edit')}
             </ElLink>
             <ElPopconfirm
@@ -159,9 +177,9 @@ const tableColumns = reactive<TableColumn[]>([
               }}
               onConfirm={() => delData(data.row)}
             ></ElPopconfirm>
-            <ElLink type="primary" underline={false} onClick={() => action(data.row, 'detail')}>
+            {/* <ElLink type="primary" underline={false} onClick={() => action(data.row, 'detail')}>
               {t('tableDemo.detail')}
-            </ElLink>
+            </ElLink> */}
           </>
         )
       }
@@ -210,33 +228,13 @@ const actionType = ref('')
 
 const writeRef = ref<ComponentRef<typeof Write>>()
 
-/**单行查询**/
-const action = async (row: TableData, type: string) => {
-  let detailLoading = ElLoading.service({
-    background: 'rgba(0, 0, 0, 0.7)'
-  })
-  const res = await queryRepSetRuleApi(row.ruleCode)
-    .catch(() => {})
-    .finally(() => {
-      detailLoading.close()
-    })
-  detailLoading.close()
-  if (res) {
-    const data = res.body.result
-    dialogTitle.value = t(type === 'edit' ? 'tableDemo.edit' : 'tableDemo.detail')
-    actionType.value = type
-    currentRow.value = data
-    dialogVisible.value = true
-  }
-}
 let RuleType = ref('');
-
-const AddAction = (ruleType: string) => {
+const AddAction = (ruleType: string,actiontype: string,currentrow) => {
   RuleType.value = ruleType;
-  dialogTitle.value = t('tableDemo.add')
-  currentRow.value = undefined
-  dialogVisible.value = true
-  actionType.value = 'add'
+  dialogTitle.value = actiontype=='add'?`新增规则`:`编辑规则`;
+  currentRow.value = currentrow;
+  dialogVisible.value = true;
+  actionType.value = actiontype;
 }
 const saveLoading = ref(false)
 
@@ -303,6 +301,8 @@ const exportExcel = async () => {
     <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
 
     <Table
+      headerAlign="center"
+      align="center"
       :columns="tableColumns"
       v-model:pageSize="pageSize"
       v-model:currentPage="currentPage"
@@ -322,7 +322,7 @@ const exportExcel = async () => {
           <ElButton type="primary">添加规则</ElButton>
           <template #dropdown>
             <ElDropdownMenu>
-              <ElDropdownItem v-for="item in RULE_TYPE_LIST" :key="item.name" @click="AddAction(item.name)">{{ item.label }}</ElDropdownItem>
+              <ElDropdownItem v-for="item in RULE_TYPE_LIST" :key="item.name" @click="AddAction(item.name,'add',{})">{{ item.label }}</ElDropdownItem>
             </ElDropdownMenu>
           </template>
         </ElDropdown>
@@ -342,6 +342,7 @@ const exportExcel = async () => {
       :current-row="currentRow"
       :action-type="actionType"
       :rule-type="RuleType"
+      @close-dialog="dialogVisible=false;getList()"
     />
   </Dialog>
 </template>

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

@@ -3,7 +3,7 @@ import { PropType,ref, reactive, watch } from 'vue'
 import ProcedureRule from '@/views/IndexProcess/ProcedureRule/ProcedureRule.vue';
 import SqlRule from '@/views/IndexProcess/SqlRule/SqlRule.vue';
 import PureSqlRule from '@/views/IndexProcess/PureSqlRule/PureSqlRule.vue'
-
+import { queryRepSetRuleApi } from '@/api/dataset/RepSetRule/index'
 
 const props = defineProps({
   currentRow: {
@@ -20,15 +20,37 @@ const props = defineProps({
   }
 })
 const ruleType = props.ruleType;//当前界面中的规则类型
+let loading = ref(false);
+let ruleInfo = ref({});
+// 查询单条信息
+if(props.actionType != 'add'){
+  loading.value = true;
+  queryRepSetRuleApi(props.currentRow.ruleCode).then(res=>{
+    ruleInfo.value = res.body.result;
+    loading.value = false;
+  })
+}
+
+const emit = defineEmits(['closeDialog']);
+const closeDialogVisible = () => {
+  emit('closeDialog')
+}
 
 </script>
 
 <template>
-  <!-- 指标规则 -->
-  <ProcedureRule v-show="ruleType=='ProcedureRule'" />
-  <!-- SQL规则 -->
-  <SqlRule v-show="ruleType=='SqlRule'" />
-  <!-- 存储过程规则 -->
-  <PureSqlRule v-show="ruleType=='PureSqlRule'" />
+  <div v-loading="loading" class="container">
+    <!-- 指标规则 -->
+    <ProcedureRule v-if="ruleType=='ProcedureRule' && !loading" :ruleInfo="ruleInfo" :actionType="props.actionType" />
+    <!-- SQL规则 -->
+    <SqlRule v-if="ruleType=='SqlRule' && !loading" :ruleInfo="ruleInfo" :actionType="props.actionType" @close-dialog-visible="closeDialogVisible" />
+    <!-- 存储过程规则 -->
+    <PureSqlRule v-if="ruleType=='PureSqlRule' && !loading" :ruleInfo="ruleInfo" :actionType="props.actionType" />
+  </div>
 </template>
+<style scoped>
+  .container{
+    min-height:50vh
+  }
+</style>