基础标准页面

src/views/dataStandards/basicStandards/ChooseDictonaryTree.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title="命名字典"
+      ref="treeRef"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="true"
+      :checkable="true"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'label' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import {nextTick, onMounted, ref, unref} from 'vue';
+  import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
+  import {Nullable} from "@vben/types";
+  import {chooseDictoryTreeData} from "./basicStandardsData";
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+
+
+async function fetch() {
+    treeData.value = chooseDictoryTreeData
+  await nextTick(() => {
+    getTree().expandAll(true)
+  })
+  }
+function getTree() {
+  const tree = unref(treeRef);
+  if (!tree) {
+    throw new Error('tree is null!');
+  }
+  return tree;
+}
+
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>
+<style lang="scss" scoped>
+.bg-white{
+  width: 97%;
+}
+::v-deep(.vben-tree){
+  background-color:  #E8ECF7!important;
+}
+</style>

src/views/dataStandards/basicStandards/ChooseNamingDictionaryModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <div class="addDialogBG">
+      <div style="float: right">
+        <Icon icon="ant-design:delete-outlined" :size="25"  :color="'#ED6F6F'" />
+      </div>
+      <ChooseDictonaryTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import {ref, computed, unref, reactive} from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { moveFormSchema } from './basicStandards.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import {TreeData} from "@/views/dataStandards/basicStandards/basicStandardsData";
+  import ChooseDictonaryTree from '@/views/dataStandards/basicStandards/ChooseDictonaryTree.vue'
+
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const rowId = ref('');
+  const getTitle = computed(() => ('选择命名字典'));
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: moveFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    setFieldsValue({
+      ...data.record,
+    })
+    const treeList =  handleTree(TreeData, 'businessId',undefined,undefined,undefined)
+    updateSchema([
+      {
+        field: 'treeId',
+        componentProps: {
+          treeData: treeList
+        },
+      },
+    ]);
+  });
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    createMessage.success('移动成功');
+    closeModal()
+  }
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id'
+    parentId = parentId || 'parentId'
+    children = children || 'children'
+    rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data))
+    // 循环所有项
+    const treeData = cloneData.filter(father => {
+      const branchArr = cloneData.filter(child => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId]
+      })
+      branchArr.length > 0 ? father.children = branchArr : ''
+      // 返回第一层
+      return father[parentId] === rootId
+    })
+    return treeData !== '' ? treeData : data
+  }
+</script>
+<style lang="scss" scoped>
+.modalRow{
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .clearAll{
+    padding-right: 10px;
+    font-size: 16px;
+  }
+  .right{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.addDialogBG{
+  margin: 10px;
+  border-radius: 10px;
+  padding: 20px;
+  background-color:  #E8ECF7;
+  width: 98%;
+  height: 400px;
+}
+</style>

src/views/dataStandards/basicStandards/CopyModal.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, computed, unref, reactive} from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { moveFormSchema } from './basicStandards.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import {TreeData} from "@/views/dataStandards/basicStandards/basicStandardsData";
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const rowId = ref('');
+  const getTitle = computed(() => ('复制到'));
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: moveFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    setFieldsValue({
+      ...data.record,
+    })
+    const treeList =  handleTree(TreeData, 'businessId',undefined,undefined,undefined)
+    updateSchema([
+      {
+        field: 'treeId',
+        componentProps: {
+          treeData: treeList
+        },
+      },
+    ]);
+  });
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    createMessage.success('移动成功');
+    closeModal()
+  }
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id'
+    parentId = parentId || 'parentId'
+    children = children || 'children'
+    rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data))
+    // 循环所有项
+    const treeData = cloneData.filter(father => {
+      const branchArr = cloneData.filter(child => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId]
+      })
+      branchArr.length > 0 ? father.children = branchArr : ''
+      // 返回第一层
+      return father[parentId] === rootId
+    })
+    return treeData !== '' ? treeData : data
+  }
+</script>

src/views/dataStandards/basicStandards/ImportDataStandardsModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm">
+      <template #formFooter>
+        <a-Button type="info" @click="handleDownByData" style="margin-left: 150px;border-color: #4aabfe">下载文件模版</a-Button>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import {ref, computed, unref, reactive} from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { importDataStandardsFormSchema } from './basicStandards.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicUpload } from '@/components/Upload';
+  import { uploadApi } from '@/api/sys/upload';
+  import {downloadByData} from "@/utils/file/download";
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const getTitle = computed(() => ('标准导入'));
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: importDataStandardsFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+
+  });
+
+  /**下载*/
+  function handleDownByData() {
+    downloadByData('text content', '导入数据标准模版.xls');
+  }
+
+  /**上传事件*/
+  function handleChange(list: string[]) {
+    createMessage.success(`已上传文件${JSON.stringify(list)}`);
+  }
+
+  /**提交按钮*/
+  function handleSubmit() {
+    createMessage.success('导入成功！')
+    closeModal();
+  }
+</script>

src/views/dataStandards/basicStandards/basicStandards.data.ts

@@ -110,6 +110,44 @@ export const importRelativeFormSchema: FormSchema[] = [
   },
 ];
 
+/**导入数据标准 表单*/
+export const importDataStandardsFormSchema: FormSchema[] = [
+  {
+    field: 'file',
+    component: 'Upload',
+    label: '导入文件选择',
+    componentProps: {
+      api: uploadApi,
+    },
+    labelWidth: 150,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'agreement',
+    component: 'RadioGroup',
+    label: '标准重名',
+    colProps: { lg: 24, md: 24 },
+    labelWidth: 150,
+    componentProps: {
+      defaultValue:'1',
+      options: [
+        {
+          label: '全部放弃',
+          value: '1',
+        },
+        {
+          label: '全部替换',
+          value: '2',
+        },
+        {
+          label: '自动重命名',
+          value: '3',
+        },
+      ],
+    },
+  },
+];
+
 export const moveFormSchema: any[] = [
   {
     field: 'treeId',

src/views/dataStandards/basicStandards/basicStandardsData.ts

@@ -628,22 +628,7 @@ export const accountFormSchema: any[] = [
 
 ];
 
-/**详情数据*/
-export const refundData = {
-  a1: '1000000000',
-  a2: '已取货',
-  a3: '1234123421',
-  a4: '3214321432',
-};
-
-export const personData = {
-  b1: '付小小',
-  b2: '18100000000',
-  b3: '菜鸟仓储',
-  b4: '浙江省杭州市西湖区万塘路18号',
-  b5: '无',
-};
-
+/**首页 新增表单树 数据*/
 export const treeDataListTwo = [
   {
     label: '默认工作组',
@@ -656,3 +641,17 @@ export const treeDataListTwo = [
     ],
   },
 ]
+
+/**编辑页 选择字典树 数据*/
+export const chooseDictoryTreeData = [
+  {
+    label: '默认工作组',
+    businessId: 1,
+    children: [
+      { label: '默认工作组01', businessId: 2 },
+      { label: '默认工作组02', businessId: 3 },
+      { label: '默认工作组03', businessId: 4 },
+      { label: '默认工作组04', businessId: 5 },
+    ],
+  },
+]

src/views/dataStandards/basicStandards/createBasicStandards.vue

@@ -24,7 +24,7 @@
   import {ref, computed, unref, reactive} from 'vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
-  import {accountFormSchema, resetNameFormSchema} from './basicStandards.data';
+  import {resetNameFormSchema} from './basicStandards.data';
   import { getDeptList } from '@/api/system/dept/dept';
   import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user'
   import { useMessage } from '@/hooks/web/useMessage';

src/views/dataStandards/basicStandards/createStandardsType.vue

 <template>
   <BasicModal  width="50%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm"/>
+    <div class="modalRow">
+      <div>可见范围</div>
+      <div class="right">
+        <div class="clearAll">
+          清空
+        </div>
+        <div>
+          <a-button type="primary">添加工作组</a-button>
+        </div>
+      </div>
+    </div>
+    <div class="addDialogBG">
+      <div style="float: right">
+        <Icon icon="ant-design:delete-outlined" :size="25"  :color="'#ED6F6F'" />
+      </div>
+      <TreeTwo class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    </div>
   </BasicModal>
 </template>
 <script lang="ts" setup>
   import {ref, computed, unref, reactive} from 'vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
-  import {accountFormSchema, resetNameFormSchema} from './basicStandards.data';
+  import {resetNameFormSchema} from './basicStandards.data';
   import { getDeptList } from '@/api/system/dept/dept';
   import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user'
   import { useMessage } from '@/hooks/web/useMessage';
   import {createBasicTypeFormSchema} from './basicStandards.data';
   import {TreeData} from "@/views/dataStandards/basicStandards/basicStandardsData";
+  import TreeTwo from '@/views/dataStandards/basicStandards/TreeTwo.vue'
   defineOptions({ name: 'AccountModal' });
 
   const emit = defineEmits(['success', 'register']);
@@ -87,3 +105,28 @@
     return treeData !== '' ? treeData : data
   }
 </script>
+<style lang="scss" scoped>
+.modalRow{
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .clearAll{
+    padding-right: 10px;
+    font-size: 16px;
+  }
+  .right{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.addDialogBG{
+  margin: 10px;
+  border-radius: 10px;
+  padding: 20px;
+  background-color:  #E8ECF7;
+  width: 98%;
+  height: 400px;
+}
+</style>

src/views/dataStandards/basicStandards/detailStandard.vue

@@ -48,7 +48,7 @@ import { Select } from 'ant-design-vue';
 import { Description } from '@/components/Description';
 import { PageWrapper } from '@/components/Page';
 import { Divider } from 'ant-design-vue';
-import {refundData, TreeData} from './basicStandardsData';
+import {TreeData} from './basicStandardsData';
 import {router} from "@/router";
 import { BasicForm, useForm } from '@/components/Form';
 import {

src/views/dataStandards/basicStandards/editDetailStandard.vue

@@ -20,13 +20,16 @@
     <Divider />
     <BasicForm @register="registerForm3" />
     <Divider />
+
+<!--    选择命名字典 弹窗-->
+    <ChooseNamingDictionaryModal @register="registerChooseNamingDictionaryModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
 import { Description } from '@/components/Description';
 import { PageWrapper } from '@/components/Page';
 import { Divider } from 'ant-design-vue';
-import {refundData, TreeData} from './basicStandardsData';
+import {TreeData} from './basicStandardsData';
 import {router} from "@/router";
 import { BasicForm, useForm } from '@/components/Form';
 import {
@@ -36,13 +39,14 @@ import {
 } from './basicStandards.data';
 import {onMounted, ref} from "vue";
 import {useRoute} from "vue-router";
-
+import ChooseNamingDictionaryModal from './ChooseNamingDictionaryModal.vue'
+import {useModal} from "@/components/Modal";
 
 const route = useRoute()
 const title = ref('')
 const formData = ref({})
 const businessId = ref('')
-
+const [registerChooseNamingDictionaryModal, { openModal: openChooseNamingDictonaryModal }] = useModal();
 const [registerForm1, { setFieldsValue: setFieldsValue1 }] = useForm({
   labelWidth: 100,
   baseColProps: { lg: 12, md: 24 },
@@ -52,7 +56,6 @@ const [registerForm1, { setFieldsValue: setFieldsValue1 }] = useForm({
     span: 23,
   },
 });
-
 const [registerForm2, { setFieldsValue: setFieldsValue2 }] = useForm({
   labelWidth: 100,
   baseColProps: { lg: 12, md: 24 },
@@ -62,7 +65,6 @@ const [registerForm2, { setFieldsValue: setFieldsValue2 }] = useForm({
     span: 23,
   },
 });
-
 const [registerForm3, { setFieldsValue: setFieldsValue3 }] = useForm({
   labelWidth: 100,
   baseColProps: { lg: 12, md: 24 },
@@ -93,6 +95,14 @@ function publishButton(record) {
 
 }
 
+
+/**选择按钮*/
+function chooseButton(record) {
+  openChooseNamingDictonaryModal(true, {
+
+  });
+}
+
 /**初始化*/
 onMounted(() => {
   businessId.value = route.query.businessId

src/views/dataStandards/basicStandards/index.vue

@@ -21,17 +21,17 @@
               {
                 icon: 'ant-design:signature-outlined',
                 // label: '重命名',
-                onClick: copyButton.bind(null, record),
+                onClick: copyButton1.bind(null, record),
               },
               {
                 icon: 'ion:layers-outline',
                 // label: '数据源关联',
-                onClick: copyButton.bind(null, record),
+                onClick: copyButton1.bind(null, record),
               },
               {
                 icon: 'clarity:note-edit-line',
                 // label: '编辑',
-                onClick: copyButton.bind(null, record),
+                onClick: copyButton1.bind(null, record),
               },
               {
                 icon: 'ant-design:delete-outlined',
@@ -40,7 +40,7 @@
                 popConfirm: {
                   title: '是否确认删除',
                   placement: 'left',
-                  confirm: copyButton.bind(null, record),
+                  confirm: copyButton1.bind(null, record),
                 },
               },
               {
@@ -64,8 +64,12 @@
     <CreateStandardsType @register="registerCreateStandardsTypeModal" @success="handleSuccess" />
 <!--    导入关联关系 弹窗-->
     <ImportRelativeModal @register="registerImportRelativeModal" @success="handleSuccess" />
+<!--    导入数据标准 弹窗-->
+    <ImportDataStandardsModal @register="registerDataStandardsModal" @success="handleSuccess" />
 <!--    移动 弹窗-->
     <MoveModal @register="registerMoveModal" @success="handleSuccess" />
+<!--    复制到 弹窗-->
+    <CopyModal @register="registerCopyModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -79,6 +83,8 @@
   import CreateStandardsType from './createStandardsType.vue';
   import ImportRelativeModal from './ImportRelativeModal.vue';
   import MoveModal from './MoveModal.vue';
+  import CopyModal from './CopyModal.vue';
+  import ImportDataStandardsModal from './ImportDataStandardsModal.vue';
   import { columns, searchFormSchema } from './basicStandards.data';
   import { useGo } from '@/hooks/web/usePage';
   import { useRoute } from 'vue-router';
@@ -96,6 +102,8 @@
   const [registerCreateStandardsTypeModal, { openModal: openCreateStandardsTypeModal }] = useModal();
   const [registerImportRelativeModal, { openModal: openImportRelativeModal }] = useModal();
   const [registerMoveModal, { openModal: openMoveModal }] = useModal();
+  const [registerCopyModal, { openModal: openCopyModal }] = useModal();
+  const [registerDataStandardsModal, { openModal: openDataStandardsModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
   const tableData = ref([])
   const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
@@ -150,7 +158,14 @@
 
   /**复制到 按钮*/
   function copyButton() {
-    openMoveModal(true, {
+    openCopyModal(true, {
+
+    });
+  }
+
+  /**复制到 按钮*/
+  function copyButton1() {
+    openCopyModal(true, {
 
     });
   }
@@ -213,7 +228,9 @@
 
   /**导入数据标准*/
   async function ImportDataStandardsButton() {
+    openDataStandardsModal(true, {
 
+    });
   }
 
   /**导出关联关系*/