落标检查

src/router/routes/index.ts

@@ -416,6 +416,15 @@ export const DataStandardRoute: AppRouteRecordRaw = {
         icon: '',
       },
     },
+    {
+      path: 'labelDropInspection/labelDetail',
+      name: 'labelDropDetail',
+      component: () => import('@/views/dataStandards/labelDropInspection/labelDetail/index.vue'),
+      meta: {
+        title: '落标检查详情',
+        icon: '',
+      },
+    },
     {
       path: 'publicCode/detailPublicCode',
       name: 'detailPublicCode',

src/views/dataStandards/labelDropInspection/addLabelModel.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #typeInfo> 落标检查 </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { addLabelModelFormSchemas } from '@/views/dataStandards/labelDropInspection/label.data';
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: addLabelModelFormSchemas,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  const getTitle = computed(() => (isUpdate.value ? '编辑落点检查' : '新建落点检查'));
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>

src/views/dataStandards/labelDropInspection/index.vue

 <template>
-  <div>
-    落标检查
-  </div>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTree
+      title="落标检查"
+      class="w-1/5"
+      :treeData="treeData"
+      :beforeRightClick="getRightMenuList"
+      defaultExpandLevel="1"
+    />
+    <BasicTable class="w-4/5" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary">批量上线</a-button>
+        <a-button type="primary">批量下载</a-button>
+        <a-button type="primary">复制到</a-button>
+        <a-button type="primary">删除</a-button>
+        <a-button type="primary">移动</a-button>
+        <a-button type="primary">新建分类</a-button>
+        <a-button type="primary" @click="handleAdd">新建落标检查</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                // 编辑
+                icon: 'ant-design:edit-outlined',
+                onClick: handleDetail.bind(null, record),
+              },
+              {
+                // 移动
+                icon: 'ant-design:folder-outlined',
+              },
+              {
+                // 删除
+                icon: 'ant-design:delete-outlined',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleRemove.bind(null, record),
+                },
+                color: 'error',
+              },
+              {
+                // 复制
+                icon: 'ion:documents-outline',
+              },
+              {
+                // 复制
+                icon: 'ion:document-text-outline',
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <AddLabelModel @register="addLabelModel" @success="addLabelSuccess" /> />
+  </PageWrapper>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
-</script>
+<script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { BasicTree, ContextMenuItem } from '@/components/Tree';
+  import { labelTableData, treeData } from './labelData';
+  import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
+  import {
+    labelColumn,
+    labelFormSchemas,
+  } from '@/views/dataStandards/labelDropInspection/label.data';
+  import { reactive } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import AddLabelModel from './addLabelModel.vue';
+  import { useModal } from '@/components/Modal';
+  import {useRouter} from "vue-router";
+
+  const { push } = useRouter();
+  const [addLabelModel, { openModal: openAddLabelModel }] = useModal();
+  const { createMessage, createConfirm } = useMessage();
+  const searchInfo = reactive<Recordable>({});
 
-<style scoped>
+  /**
+   * 新增落标检查
+   */
+  function handleAdd() {
+    openAddLabelModel(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 跳转详情页
+   */
+  function handleDetail(record) {
+    push({
+      path: '/dataStandards/labelDropInspection/labelDetail',
+      query: record,
+    });
+  }
+  /** 列表删除 */
+  function handleRemove(record) {
+    createMessage.success('删除成功!');
+  }
+  function addLabelSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+      //修改表单的值
+      const result = updateTableDataRecord(values.businessId, values);
+      reload();
+    } else {
+      tableData.value.push(values);
+      reload();
+    }
+  }
+  function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
+    const menu = [
+      {
+        label: '查看详情',
+        handler: () => {
+          console.log('点击了查看详情', node);
+        },
+        icon: 'ant-design:file-search-outlined',
+      },
+      {
+        label: '新建分类',
+        handler: () => {
+          console.log('点击了新建分类', node);
+        },
+        icon: 'ant-design:folder-add-outlined',
+      },
+      {
+        label: '新建落标检查',
+        handler: handleAdd,
+        icon: 'ant-design:file-add-outlined',
+      },
+      {
+        label: '刷新',
+        handler: () => {
+          console.log('点击了刷新', node);
+        },
+        icon: 'ant-design:reload-outlined',
+      },
+    ];
+    return new Promise((resolve) => {
+      resolve(menu);
+    });
+  }
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    title: '',
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: labelTableData.length,
+        code: '',
+        message: '',
+        data: labelTableData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: labelColumn,
+    showIndexColumn: false,
+    rowSelection: true,
+    striped: false,
+    // 搜索
+    formConfig: {
+      labelWidth: 120,
+      schemas: labelFormSchemas,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+</script>
 
-</style>
+<style scoped></style>

src/views/dataStandards/labelDropInspection/label.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { BaseFormatProps } from 'vue-i18n';
+
+export const labelColumn: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '规则选择方式',
+    dataIndex: 'type',
+    width: 150,
+  },
+  {
+    title: '发布状态',
+    dataIndex: 'uploadFlag',
+    width: 150,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 150,
+  },
+];
+export const labelFormSchemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
+export const addLabelModelFormSchemas: FormSchema[] = [
+  {
+    field: 'path',
+    label: '路径',
+    component: 'TreeSelect',
+    componentProps: {
+      treeData: [
+        {
+          title: '落标检查',
+          value: '0-0',
+          icon: 'ant-design:line-chart-outlined',
+          children: [
+            { title: 'DMP_admin-个人工作区', value: '0-0-0', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-1', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-2', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+            { title: '共享工作区', value: '0-0-1', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-3', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-4', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+            { title: 'gxx', value: '0-0-2', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-5', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-6', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+            { title: '商城工作区', value: '0-0-3', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-7', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-8', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+            { title: '数据中台工作区01', value: '0-0-4', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-9', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-10', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+            { title: '数据中台工作区02', value: '0-0-5', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-11', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-12', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+            { title: 'glc', value: '0-0-6', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-13', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-14', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+            { title: '数据中台工作区04', value: '0-0-7', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-15', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-16', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+            { title: '数据中台工作区', value: '0-0-8', icon: 'ion:desktop-outline',
+              children: [
+                { title: 'dmp落标检查', value: '0-0-0-17', icon: 'ant-design:line-chart-outlined' },
+                { title: 'gxx落标检查', value: '0-0-0-18', icon: 'ant-design:line-chart-outlined' },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    colProps: { lg: 24 },
+  },
+  {
+    field: 'name',
+    label: '落标检查名称',
+    required: true,
+    component: 'Input',
+    colProps: { lg: 24 },
+  },
+  {
+    field: 'type',
+    label: '标准分类',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '基础标准',
+          value: '基础标准',
+        },
+        {
+          label: '数据标准',
+          value: '数据标准',
+        },
+      ],
+    },
+    colProps: { lg: 24 },
+  },
+  {
+    field: 'typeInfo',
+    label: '类型',
+    slot: 'typeInfo',
+    colProps: { lg: 24 },
+  },
+];

src/views/dataStandards/labelDropInspection/labelData.ts

+export const treeData = [
+  {
+    title: '落标检查',
+    key: '0-0',
+    icon: 'ant-design:line-chart-outlined',
+    children: [
+      { title: 'DMP_admin-个人工作区', key: '0-0-0', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-1', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-2', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+      { title: '共享工作区', key: '0-0-1', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-3', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-4', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+      { title: 'gxx', key: '0-0-2', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-5', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-6', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+      { title: '商城工作区', key: '0-0-3', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-7', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-8', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+      { title: '数据中台工作区01', key: '0-0-4', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-9', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-10', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+      { title: '数据中台工作区02', key: '0-0-5', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-11', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-12', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+      { title: 'glc', key: '0-0-6', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-13', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-14', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+      { title: '数据中台工作区04', key: '0-0-7', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-15', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-16', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+      { title: '数据中台工作区', key: '0-0-8', icon: 'ion:desktop-outline',
+        children: [
+          { title: 'dmp落标检查', key: '0-0-0-17', icon: 'ant-design:line-chart-outlined' },
+          { title: 'gxx落标检查', key: '0-0-0-18', icon: 'ant-design:line-chart-outlined' },
+        ],
+      },
+    ],
+  },
+];
+export const labelTableData = [
+  {
+    name: '客户编号',
+    type: '数据标准',
+    uploadFlag: '已下线',
+    updateTime: '2022/10/27 12:14:41',
+  },
+  {
+    name: '指标落标test',
+    type: '数据标准',
+    uploadFlag: '已下线',
+    updateTime: '2022/10/26 17:57:08',
+  },
+  {
+    name: '主数据标志落标',
+    type: '数据标准',
+    uploadFlag: '已下线',
+    updateTime: '2022/10/26 18:20:41',
+  },
+  {
+    name: '客户详细地址',
+    type: '数据标准',
+    uploadFlag: '已上线',
+    updateTime: '2022/10/26 16:53:45',
+  },
+];

src/views/dataStandards/labelDropInspection/labelDetail/detail.data.ts

+import { FormSchema } from '@/components/Form';
+import {BasicColumn} from "@/components/Table";
+
+export const detailFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '落标检查名称',
+    required: true,
+    slot: 'name',
+  },
+  {
+    field: 'basicType',
+    label: '标准类型',
+    slot: 'type',
+  },
+  {
+    field: 'describe',
+    label: '描述',
+    component: 'Input',
+  },
+  {
+    field: 'updateTime',
+    label: '更新时间',
+    slot: 'updateTime',
+  },
+  {
+    field: 'cycle',
+    label: '调度周期',
+    slot: 'cycle',
+    componentProps: {
+      options: [
+        {
+          label: 'Cron表达式',
+          value: 'Cron表达式',
+        },
+        {
+          label: '无周期',
+          value: '无周期',
+        },
+      ],
+    },
+    colProps: { lg: 6 },
+  },
+  {
+    field: 'formula',
+    slot: 'formula',
+    colProps: { lg: 18 },
+  },
+  {
+    field: 'type',
+    label: '规则选择方式',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '数据标准',
+          value: '数据标准',
+        },
+        {
+          label: '元数据',
+          value: '元数据',
+        },
+      ],
+    },
+  },
+];
+export const detailDataColumn: BasicColumn[] = [
+  {
+    title: '标准',
+    dataIndex: 'standard',
+    width: 150,
+    slots: { customRender: 'standard' },
+  },
+  {
+    title: '路径',
+    dataIndex: 'path',
+    width: 150,
+  },
+  {
+    title: '质量模板',
+    dataIndex: 'model',
+    width: 150,
+  },
+  {
+    title: '字段名称',
+    dataIndex: 'field',
+    width: 150,
+  },
+];
+export const detailDataFormSchema: FormSchema[] = [
+  {
+    field: 'standard',
+    component: 'Input',
+    componentProps: {
+      placeholder: '搜索标准',
+    },
+    colProps: { lg: 4 },
+  },
+  {
+    field: 'path',
+    component: 'Input',
+    componentProps: {
+      placeholder: '搜索路径',
+    },
+    colProps: { lg: 4 },
+  },
+];

src/views/dataStandards/labelDropInspection/labelDetail/detailData.ts

+export const detailFormData = {
+  name: '',
+  basicType: '基础标准',
+  describe: '',
+  updateTime: '',
+  cycle: '',
+  selectType: '',
+};
+export const detailCycleOptions = [
+  {
+    label: 'Cron表达式',
+    value: 'Cron表达式',
+  },
+  {
+    label: '无周期',
+    value: '无周期',
+  },
+];

src/views/dataStandards/labelDropInspection/labelDetail/index.vue

+<template>
+  <PageWrapper :title="modelName" contentBackground headerSticky>
+    <template #extra>
+      <a-button type="primary">跳转运维</a-button>
+      <a-button type="primary">查看报告</a-button>
+      <a-button type="primary">保存</a-button>
+      <a-button type="primary">上线</a-button>
+      <a-button type="primary">运行</a-button>
+    </template>
+    <template #footer>
+      <BasicForm @register="registerForm">
+        <template #name="{ model, field }">
+          <span>{{ model[field] }}</span>
+        </template>
+        <template #type="{ model, field }">
+          <span>{{ model[field] }}</span>
+        </template>
+        <template #updateTime="{ model, field }">
+          <span>{{ model[field] }}</span>
+        </template>
+        <template #cycle="{ model, field }">
+          <Select :options="detailCycleOptions" v-model:value="model[field]" />
+        </template>
+        <template #formula="{ model, field }">
+          <a-input style="width: 200px" v-model:value="model[field]" />
+          <a-button type="link">Cron表达式</a-button>
+        </template>
+      </BasicForm>
+      <span class="table-title" style="font-size: 18px; margin: 12px 10px 0">检查规则</span>
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" />
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import { Select } from 'ant-design-vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import BasicForm from '../../../../components/Form/src/BasicForm.vue';
+  import { useForm } from '../../../../components/Form/index.js';
+  import { onMounted, reactive, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import {
+    detailDataColumn, detailDataFormSchema,
+    detailFormSchema
+  } from '@/views/dataStandards/labelDropInspection/labelDetail/detail.data';
+  import {
+    detailFormData,
+    detailCycleOptions,
+  } from '@/views/dataStandards/labelDropInspection/labelDetail/detailData';
+  import { labelTableData } from '@/views/dataStandards/labelDropInspection/labelData';
+  import {
+    labelColumn,
+    labelFormSchemas,
+  } from '@/views/dataStandards/labelDropInspection/label.data';
+  //初始化表单
+  const route = useRoute();
+  const modelName = ref(route.query.name);
+  const searchInfo = reactive<Recordable>({});
+  const infoData = route.query;
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 12 },
+    schemas: detailFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    title: '',
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: [].length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: detailDataColumn,
+    showIndexColumn: false,
+    rowSelection: true,
+    striped: false,
+    // 搜索
+    formConfig: {
+      labelWidth: 120,
+      schemas: detailDataFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  onMounted(() => {
+    setFieldsValue({ ...detailFormData, ...infoData });
+  });
+</script>
+
+<style scoped></style>