落标检查-列表-改

src/views/dataStandards/labelDropInspection/addTypeModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #path="{ field, model }">
+        <div class="flex">
+          <InputSearch v-model:value="model[field]" enter-button="选择" />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { InputSearch } from 'ant-design-vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    addTypeModalFormSchema,
+    copyModalFormSchema
+  } from '@/views/dataStandards/labelDropInspection/label.data';
+  import {useMessage} from "@/hooks/web/useMessage";
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { lg: 24, md: 24 },
+      schemas: addTypeModalFormSchema,
+      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
+      // 塞值
+      await setFieldsValue({
+        path: data.path,
+      });
+    }
+  });
+
+  // const getTitle = computed(() => (isUpdate.value ? '编辑实体' : '新建实体'));
+  const getTitle = '复制到';
+
+  const { createMessage } = useMessage();
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+    createMessage.success('新增成功！');
+  }
+</script>

src/views/dataStandards/labelDropInspection/copyModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #path="{ field, model }">
+        <div class="flex">
+          <InputSearch v-model:value="model[field]" enter-button="选择" />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { InputSearch } from 'ant-design-vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { copyModalFormSchema } from '@/views/dataStandards/labelDropInspection/label.data';
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { lg: 24, md: 24 },
+      schemas: copyModalFormSchema,
+      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 ? '编辑实体' : '新建实体'));
+  const getTitle = '复制到';
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>

src/views/dataStandards/labelDropInspection/index.vue

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <BasicTree
-      title="落标检查"
-      class="w-1/5"
-      :treeData="treeData"
-      :beforeRightClick="getRightMenuList"
-      defaultExpandLevel="1"
-    />
+    <div class="w-1/5">
+      <BasicTree
+        style="padding: 16px 0 16px 16px"
+        :treeData="treeData"
+        :beforeRightClick="getRightMenuList"
+        ref="tree"
+        defaultExpandLevel="1"
+        @select="handleSelect"
+      />
+    </div>
     <BasicTable class="w-4/5" @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
-          >批量上线</a-button
-        >
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
-          >批量下载</a-button
-        >
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
-          >复制到</a-button
-        >
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0">删除</a-button>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0">移动</a-button>
-        <a-button type="primary">新建分类</a-button>
-        <a-button type="primary" @click="handleAdd">新建落标检查</a-button>
+        <div class="flex-1" style="display: flex; flex-direction: column; gap: 15px">
+          <div class="flex" style="gap: 10px">
+            <div class="flex-1 flex">
+              <div>
+                <FundProjectionScreenOutlined style="font-size: 30px" />
+              </div>
+              <div style="margin-left: 10px">
+                <div style="font-size: 16px">{{ tabName }}</div>
+                <div style="color: #b3b8c3">{{ path }}</div>
+              </div>
+            </div>
+            <a-button
+              type="primary"
+              :disabled="getRowSelection().selectedRowKeys <= 0"
+              @click="handleUp"
+              >批量上线</a-button
+            >
+            <a-button
+              type="primary"
+              :disabled="getRowSelection().selectedRowKeys <= 0"
+              @click="handleDown"
+              >批量下线</a-button
+            >
+            <a-button
+              type="primary"
+              :disabled="getRowSelection().selectedRowKeys <= 0"
+              @click="handleCopy"
+              >复制到</a-button
+            >
+            <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
+              >删除</a-button
+            >
+            <a-button
+              type="primary"
+              :disabled="getRowSelection().selectedRowKeys <= 0"
+              @click="handleMove"
+              >移动</a-button
+            >
+            <a-button type="primary" @click="handleAddType">新建分类</a-button>
+            <a-button type="primary" @click="handleAdd">新建落标检查</a-button>
+          </div>
+          <div>
+            <Input style="width: 200px" v-model:value="searchKey">
+              <template #suffix>
+                <SearchOutlined />
+              </template>
+            </Input>
+          </div>
+        </div>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -30,15 +69,19 @@
               {
                 // 编辑
                 icon: 'ant-design:edit-outlined',
+                tooltip: '编辑',
                 onClick: handleDetail.bind(null, record),
               },
               {
                 // 移动
                 icon: 'ant-design:folder-outlined',
+                tooltip: '移动',
+                onClick: handleMove.bind(null, record),
               },
               {
                 // 删除
                 icon: 'ant-design:delete-outlined',
+                tooltip: '删除',
                 popConfirm: {
                   title: '是否确认删除',
                   placement: 'left',
@@ -49,9 +92,11 @@
               {
                 // 复制
                 icon: 'ion:documents-outline',
+                onClick: handleCopy.bind(null, record),
+                tooltip: '复制',
               },
               {
-                // 复制
+                // 移动
                 icon: 'ion:document-text-outline',
               },
             ]"
@@ -59,13 +104,18 @@
         </template>
       </template>
     </BasicTable>
-    <AddLabelModel @register="addLabelModel" @success="addLabelSuccess" /> />
+    <AddLabelModel @register="addLabelModel" @success="addLabelSuccess" />
+    <CopyModal @register="copyModal" />
+    <MoveModal @register="moveModal" />
+    <AddTypeModal @register="addTypeModal" />
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
   import { PageWrapper } from '@/components/Page';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { Input } from 'ant-design-vue';
+  import { SearchOutlined, FundProjectionScreenOutlined } from '@ant-design/icons-vue';
   import { BasicTree, ContextMenuItem } from '@/components/Tree';
   import { labelTableData, treeData } from './labelData';
   import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
@@ -73,18 +123,56 @@
     labelColumn,
     labelFormSchemas,
   } from '@/views/dataStandards/labelDropInspection/label.data';
-  import { reactive } from 'vue';
+  import { reactive, ref, unref } from 'vue';
   import { useMessage } from '@/hooks/web/useMessage';
   import AddLabelModel from './addLabelModel.vue';
   import { useModal } from '@/components/Modal';
   import { useRouter } from 'vue-router';
   import { router } from '@/router';
+  import CopyModal from './copyModal.vue';
+  import MoveModal from './moveModal.vue';
+  import AddTypeModal from './addTypeModal.vue';
 
   const { push } = useRouter();
   const [addLabelModel, { openModal: openAddLabelModel }] = useModal();
+  const [moveModal, { openModal: openMoveModal }] = useModal();
+  const [copyModal, { openModal: openCopyModal }] = useModal();
+  const [addTypeModal, { openModal: openAddTypeModal }] = useModal();
   const { createMessage, createConfirm } = useMessage();
   const searchInfo = reactive<Recordable>({});
-
+  const searchKey = ref();
+  const tabName = ref();
+  const tree = ref();
+  const path = ref();
+  function handleSelect() {
+    const keys = unref(tree).getSelectedKeys();
+    const node = unref(tree).getSelectedNode(keys[0]);
+    console.log('node', node);
+    // 获取标题
+    tabName.value = node.title;
+    path.value = getPath(treeData[0]);
+  }
+  function getPath(data) {
+    if (data.name === tabName.value) {
+      return '/' + data.name;
+    } else {
+      if (data.children && data.children.length > 0) {
+        for (let item of data.children) {
+          const path = getPath(item);
+          if (path) {
+            return '/' + data.name + path;
+          }
+        }
+      }
+      return;
+    }
+  }
+  function handleAddType() {
+    openAddTypeModal(true, {
+      isUpdate: true,
+      path: path.value,
+    });
+  }
   /**
    * 新增落标检查
    */
@@ -123,7 +211,7 @@
       {
         label: '查看详情',
         handler: () => {
-          handleReport(node);
+          handleDetail(node);
         },
         icon: 'ant-design:file-search-outlined',
       },
@@ -185,12 +273,12 @@
     rowSelection: true,
     striped: false,
     // 搜索
-    formConfig: {
-      labelWidth: 120,
-      schemas: labelFormSchemas,
-      autoSubmitOnEnter: true,
-    },
-    useSearchForm: true,
+    // formConfig: {
+    //   labelWidth: 120,
+    //   schemas: labelFormSchemas,
+    //   autoSubmitOnEnter: true,
+    // },
+    useSearchForm: false,
     showTableSetting: false,
     bordered: true,
     handleSearchInfoFn(info) {
@@ -202,6 +290,39 @@
       dataIndex: 'action',
     },
   });
+  function handleUp() {
+    createConfirm({
+      iconType: 'warning',
+      title: '批量上线',
+      content: '确认上线选中数据吗？',
+      onOk() {
+        createMessage.success('上线成功!');
+        reload();
+      },
+    });
+  }
+  function handleDown() {
+    createConfirm({
+      iconType: 'warning',
+      title: '批量下线',
+      content: '确认下线选中数据吗？',
+      onOk() {
+        createMessage.success('下线成功!');
+        reload();
+      },
+    });
+  }
+  /** 移动按钮*/
+  function handleCopy() {
+    openCopyModal(true, {
+      isUpdate: false,
+    });
+  }
+  function handleMove() {
+    openMoveModal(true, {
+      isUpdate: false,
+    });
+  }
 </script>
 
 <style scoped></style>

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

@@ -42,55 +42,82 @@ export const addLabelModelFormSchemas: FormSchema[] = [
           value: '0-0',
           icon: 'ant-design:line-chart-outlined',
           children: [
-            { title: 'DMP_admin-个人工作区', value: '0-0-0', icon: 'ion:desktop-outline',
+            {
+              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',
+            {
+              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',
+            {
+              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',
+            {
+              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',
+            {
+              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',
+            {
+              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',
+            {
+              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',
+            {
+              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',
+            {
+              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' },
@@ -135,3 +162,29 @@ export const addLabelModelFormSchemas: FormSchema[] = [
     colProps: { lg: 24 },
   },
 ];
+export const copyModalFormSchema: FormSchema[] = [
+  {
+    field: 'path',
+    label: '路径',
+    slot: 'path',
+  },
+];
+export const moveModalFormSchema: FormSchema[] = [
+  {
+    field: 'path',
+    label: '路径',
+    slot: 'path',
+  },
+];
+export const addTypeModalFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '分类名称',
+    component: 'Input',
+  },
+  {
+    field: 'path',
+    label: '路径',
+    slot: 'path',
+  },
+];

src/views/dataStandards/labelDropInspection/moveModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #path="{ field, model }">
+        <div class="flex">
+          <InputSearch v-model:value="model[field]" enter-button="选择" />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { InputSearch } from 'ant-design-vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    copyModalFormSchema,
+    moveModalFormSchema
+  } from '@/views/dataStandards/labelDropInspection/label.data';
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { lg: 24, md: 24 },
+      schemas: moveModalFormSchema,
+      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 ? '编辑实体' : '新建实体'));
+  const getTitle = '移动';
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>