版本管理

src/router/routes/index.ts

@@ -386,7 +386,7 @@ export const QualityRuleRoute: AppRouteRecordRaw = {
     {
       path: 'ruleMoreAdd',
       name: 'RuleMoreAdd',
-      component: () => import('@/views/dataQuality/rule/ruleMoreAdd.vue'),
+      component: () => import('@/views/dataQuality/dataSheet/rule/ruleMoreAdd.vue'),
       meta: {
         title: '质量规则批量创建',
         icon: '',

src/views/dataQuality/dataSheet/rule/addNewVersion.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import {
+    addNewVersionFormSchema,
+  } from '@/views/dataQuality/dataSheet/rule/rule.data';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+
+  const emit = defineEmits(['handle-submit-new-version']);
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  // const getTitle = computed(() => (isUpdate.value ? '质量规则详情' : '新建规则'));
+  const getTitle = '提交新版本';
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, getFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: addNewVersionFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+    // 确认按钮配置
+    submitButtonOptions: {
+      text: '提交新版本',
+    },
+  });
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+    emit('handle-submit-new-version', getFieldsValue().describe);
+  }
+</script>

src/views/dataQuality/dataSheet/rule/index.vue

@@ -54,6 +54,7 @@
               },
               {
                 icon: 'ion:chevron-down-circle-outline',
+                onClick: handleVersion.bind(null, record),
               },
               {
                 // 删除
@@ -70,11 +71,12 @@
         </template>
       </template>
     </BasicTable>
-    <RuleModel @register="ruleModal" />
+    <RuleEditModel :is-add="isAdd" @register="ruleEditModal" />
     <RuleMoreUpdate @register="ruleMoreUpdateModel" />
     <RuleGroupAddModel @register="ruleGroupAddModel" />
     <RuleGroupEditModel @register="ruleGroupEditModel" />
     <MoveInGroupModel @register="moveInGroupModel" />
+    <VersionManage @register="versionManage" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -84,7 +86,7 @@
   import { ruleFormSchema, ruleTable } from '@/views/dataQuality/dataSheet/rule/rule.data';
   import { Tabs } from 'ant-design-vue';
   import { ruleData, treeData, treeData1, treeData2 } from './ruleData';
-  import RuleModel from './ruleModel.vue';
+  import RuleEditModel from './ruleEditModel.vue';
   import RuleMoreUpdate from './ruleMoreUpdateModel.vue';
   import RuleGroupAddModel from './ruleGroupAddModel.vue';
   import RuleGroupEditModel from './ruleGroupEditModel.vue';
@@ -92,16 +94,18 @@
   import { useModal } from '@/components/Modal';
   import { useRouter } from 'vue-router';
   import { useMessage } from '@/hooks/web/useMessage';
-  import { h } from 'vue';
+  import { h, ref } from 'vue';
   import { FolderAddOutlined, SettingOutlined } from '@ant-design/icons-vue';
   // 模态框
+  const isAdd = ref(true);
   const { push } = useRouter();
   const { createMessage, createConfirm } = useMessage();
-  const [ruleModal, { openModal: openRuleModel }] = useModal();
+  const [ruleEditModal, { openModal: openRuleEditModel }] = useModal();
   const [ruleMoreUpdateModel, { openModal: openRuleMoreUpdateModel }] = useModal();
   const [ruleGroupAddModel, { openModal: openRuleGroupAddModel }] = useModal();
   const [ruleGroupEditModel, { openModal: openRuleGroupEditModel }] = useModal();
   const [moveInGroupModel, { openModal: openMoveInGroupModel }] = useModal();
+  const [versionManage, { openModal: openVersionManage }] = useModal();
   const actionList: TreeActionItem[] = [
     {
       render: (node) => {
@@ -132,7 +136,8 @@
   ];
   // 新增
   function handleAdd() {
-    openRuleModel(true, {
+    isAdd.value = true
+    openRuleEditModel(true, {
       isUpdate: false,
     });
   }
@@ -166,12 +171,21 @@
    * 列表编辑
    */
   function handleEdit(record) {
-    openRuleModel(true, {
+    isAdd.value = false
+    openRuleEditModel(true, {
       record,
       isUpdate: true,
     });
   }
 
+  /**
+   * 历史版本
+   */
+  function handleVersion() {
+    openVersionManage(true, {
+      isUpdate: false,
+    });
+  }
   /**
    * 批量编辑
    */

src/views/dataQuality/dataSheet/rule/rule.data.ts

-import { BasicColumn } from '@/components/Table';
+import {BasicColumn, FormSchema} from '@/components/Table';
 
 export const ruleFormSchema = [
   {
@@ -164,6 +164,79 @@ export const ruleModelFormSchema: any[] = [
     colProps: { lg: 24, md: 24 },
   },
 ];
+export const ruleEditModelFormSchema: any[] = [
+  {
+    field: 'rule',
+    label: '规则名称',
+    required: true,
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'distinct',
+    label: '规则描述',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'group',
+    label: '所属规则组',
+    slot: 'group',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'dataSource',
+    label: '检查数据源',
+    required: true,
+    slot: 'dataSource',
+    component: 'Select',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'dataSource',
+    label: '数据源',
+    slot: 'dataSourceTxt',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'model',
+    label: '关键模板',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [{ label: '公民身份号码', value: '公民身份号码' }],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'config',
+    label: '参数配置',
+    slot: 'config',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'whiteList',
+    label: '质量白名单',
+    component: 'Select',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'preview',
+    label: 'SQL预览',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入描述',
+      rows: 4,
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'task',
+    label: '关联质量任务',
+    slot: 'task',
+    colProps: { lg: 24, md: 24 },
+  },
+];
 export const configColumn: BasicColumn[] = [
   {
     title: '参数',
@@ -354,3 +427,32 @@ export const moveInGroupFormSchema = [
     colProps: { lg: 24, md: 24 },
   },
 ];
+export const addNewVersionFormSchema = [
+  {
+    field: 'describe',
+    label: '版本说明',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入内容',
+      autoSize: { minRows: 2, maxRows: 6 },
+      maxlength: 255,
+      showCount: true,
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];
+export const versionFormSchema: FormSchema[] = [
+  {
+    field: 'field1',
+    component: 'InputSearch',
+    colProps: {
+      span: 12,
+    },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+      onChange: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+];

src/views/dataQuality/dataSheet/rule/ruleData.ts

@@ -260,3 +260,17 @@ export const ruleGroupEditData = [
     group: '',
   },
 ];
+export const versionModelList = [
+  {
+    version: 'V2',
+    time: '2022/10/27 18:53:43',
+    created: 'admin',
+    describe: 'batch create version',
+  },
+  {
+    version: 'V1',
+    time: '2022/10/27 18:17:37',
+    created: 'admin',
+    describe: 'batch create version',
+  },
+];

src/views/dataQuality/dataSheet/rule/ruleModel.vue → src/views/dataQuality/dataSheet/rule/ruleEditModel.vue

@@ -95,23 +95,29 @@
       </template>
     </BasicForm>
     <RuleGroupAddModel @register="ruleGroupAddModel" />
+    <AddNewVersion @register="addNewVersion" @handle-submit-new-version="handleSubmitNewVersion" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, unref, onMounted } from 'vue';
+import {ref, computed, unref, defineProps} from 'vue';
   import { Select } from 'ant-design-vue';
   import { BasicModal, useModalInner, useModal } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
-  import {
+import {
   configColumn,
-    ruleModelFormSchema,
+  ruleEditModelFormSchema, ruleModelFormSchema,
   taskColumn,
-  } from '@/views/dataQuality/dataSheet/rule/rule.data';
+} from '@/views/dataQuality/dataSheet/rule/rule.data';
   import BasicTable from '@/components/Table/src/BasicTable.vue';
   import RuleGroupAddModel from './ruleGroupAddModel.vue';
+  import AddNewVersion from './addNewVersion.vue';
   import { useTable } from '@/components/Table';
   import { configData, taskData } from '@/views/dataQuality/dataSheet/rule/ruleData';
 
+  const props = defineProps({
+    disabled: { type: Boolean, default: false },
+    isAdd: { type: Boolean, default: false },
+  });
   const isUpdate = ref(true);
   const rowId = ref('');
   const getTitle = computed(() => (isUpdate.value ? '质量规则详情' : '新建规则'));
@@ -122,24 +128,25 @@
   }
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   const [ruleGroupAddModel, { openModal: openRuleGroupAddModel }] = useModal();
+  const [addNewVersion, { openModal: openAddNewVersion }] = useModal();
   //初始化表单
   const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
     labelWidth: 100,
     baseColProps: { lg: 12, md: 24 },
-    schemas: ruleModelFormSchema,
+    schemas: props.isAdd ? ruleModelFormSchema : ruleEditModelFormSchema,
     showActionButtonGroup: false,
+    disabled: props.disabled,
     actionColOptions: {
       span: 23,
     },
-    // 确认按钮配置
-    submitButtonOptions: {
-      text: '提交新版本',
-    },
   });
   //初始化弹框
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     await resetFields();
-    setModalProps({ confirmLoading: false });
+    setModalProps({
+      confirmLoading: false,
+      okText: props.disabled ? '回滚' : props.isAdd ? '确定' : '提交新版本',
+    });
     isUpdate.value = !!data?.isUpdate;
     if (unref(isUpdate)) {
       // 获取行数据的id
@@ -204,6 +211,12 @@
   /**确定按钮*/
   async function handleSubmit() {
     await validate();
+    openAddNewVersion(true, {
+      isUpdate: false,
+    });
+  }
+  /**确定按钮*/
+  async function handleSubmitNewVersion(describe) {
     closeModal();
   }
 </script>

src/views/dataQuality/dataSheet/rule/versionManage.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm :labelWidth="100" :schemas="versionFormSchema" :showActionButtonGroup="false" />
+    <List>
+      <template v-for="item in versionModelList" :key="item.id">
+        <List.Item>
+          <List.Item.Meta>
+            <template #title>
+              <div style="display: flex">
+                <div style="flex: 1">
+                  <span>{{ item.version }}</span>
+                  <span style="margin-left: 20px">{{ item.time }}</span>
+                </div>
+                <div>
+                  <a-button @click="handleRollback(item)"><RollbackOutlined /></a-button>
+                </div>
+              </div>
+            </template>
+            <template #description>
+              <div>
+                {{ item.created }}
+              </div>
+              <div>
+                {{ item.describe }}
+              </div>
+            </template>
+          </List.Item.Meta>
+        </List.Item>
+      </template>
+    </List>
+    <RuleEditModel :disabled="true" @register="ruleEditModel" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicForm } from '@/components/Form';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { List } from 'ant-design-vue';
+  import { RollbackOutlined } from '@ant-design/icons-vue';
+  import { versionFormSchema } from './rule.data';
+  import { versionModelList } from './ruleData';
+  import RuleEditModel from './ruleEditModel.vue';
+
+  const [ruleEditModel, { openModal: openRuleEditModel }] = useModal();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  // const getTitle = computed(() => (isUpdate.value ? '质量规则详情' : '新建规则'));
+  const getTitle = '版本管理';
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+    }
+  });
+  function handleRollback(record) {
+    openRuleEditModel(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>