主体管理

src/views/mainBody/details/setup/DeptTree.vue

@@ -6,33 +6,35 @@
       toolbar
       search
       treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
-      :clickRowToExpand="true"
+      :clickRowToExpand="false"
       :defaultExpandAll="true"
       :treeData="treeData"
       :fieldNames="{ key: 'key', title: 'title' }"
       @select="handleSelect"
+      :actionList="actionList"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import {nextTick, onMounted, ref, unref} from 'vue';
+import {h, nextTick, onMounted, ref, unref} from 'vue';
   import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
   import { getDeptList } from '@/api/system/dept/dept';
   import {Nullable} from "@vben/types";
   import {treeDataList} from "./mock";
+import {DeleteOutlined, EditOutlined, FolderOutlined, PlusOutlined} from "@ant-design/icons-vue";
   defineOptions({ name: 'DeptTree' });
 
   const emit = defineEmits(['select']);
-
+  const showTable = ref(false)
   const treeData = ref<TreeItem[]>([]);
   const treeRef = ref<Nullable<TreeActionType>>(null);
 
 
 async function fetch() {
     treeData.value = treeDataList
-  // await nextTick(() => {
-  //   getTree().expandAll(true)
-  // })
+  await nextTick(() => {
+    getTree().expandAll(true)
+  })
   }
 function getTree() {
   const tree = unref(treeRef);
@@ -41,7 +43,21 @@ function getTree() {
   }
   return tree;
 }
+// 树的操作列表
+const actionList = [
 
+  {
+    //详情
+    render: (node) => {
+      return h(FolderOutlined, {
+        class: 'ml-2',
+        onClick: () => {
+          emit('details');
+        },
+      });
+    },
+  },
+];
 
   function handleSelect(keys) {
     emit('select', keys[0]);

src/views/mainBody/details/setup/detailDrawer.vue

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    :title="getTitle"
+    :showFooter="false"
+    placement="bottom"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #menu="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="treeData"
+          :fieldNames="{ title: 'label', key: 'id' }"
+          checkable
+          toolbar
+          title="菜单分配"
+        />
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+import { ref, computed, unref } from 'vue';
+import { BasicForm, useForm } from '@/components/Form';
+
+import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+import { BasicTree, TreeItem } from '@/components/Tree';
+import { roleDetailApi,roleUpdataApi,addRoleApi } from "@/api/system/role/role";
+import { getMenuSelect,getRoleMenuSelected } from "@/api/system/menu/menu";
+
+import {useMessage} from "@/hooks/web/useMessage";
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const isUpdate = ref(true);
+const roleId = ref('');
+const treeData = ref<TreeItem[]>([]);
+const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+  labelWidth: 90,
+  baseColProps: { span: 24 },
+
+  showActionButtonGroup: false,
+});
+
+const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+  resetFields();
+  setDrawerProps({ confirmLoading: false });
+  // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+  if (unref(treeData).length === 0) {
+
+  }
+
+});
+
+const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+
+async function handleSubmit() {
+
+}
+</script>

src/views/mainBody/details/setup/index.vue

@@ -5,28 +5,65 @@
     </div>
     <Row :gutter="16">
       <Col :span="5">
-        <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+        <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" @details="handleShowDetails" />
       </Col>
       <Col :span="19">
-        <img src="../../../../assets/images/setupImg.png" class="homePage_img" alt="Logo" />
+<!--        <detailDrawer v-if="showDetails === true" @register="registerDrawer" @success="handleSuccess"/>-->
+        <div v-if="showDetails === true" class="tableList">
+          <Tabs default-active-key="1">
+            <Tabs.TabPane key="1" tab="主体信息">
+              <Tabs default-active-key="1">
+                <Tabs.TabPane key="1" tab="列信息">
+                  <BasicTable @register="registerTableThree">
+
+                  </BasicTable>
+                </Tabs.TabPane>
+                <Tabs.TabPane key="2" tab="采样数据">
+                  <BasicTable @register="registerTableTwo">
+
+                  </BasicTable>
+
+                </Tabs.TabPane>
+              </Tabs>
+            </Tabs.TabPane>
+            <Tabs.TabPane key="2" tab="源表数据预览">
+              <div class="titleName">
+                <Icon icon="ant-design:appstore-outlined" :size="28"  :color="'#068CFF'" />
+                <div class="title">Inceptor68/default/zc blood test summary</div>
+              </div>
+              <BasicTable @register="registerTable" :searchInfo="searchInfo">
+
+              </BasicTable>
+
+            </Tabs.TabPane>
+          </Tabs>
+
+        </div>
+          <img v-if="type === '1'" src="../../../../assets/images/setupImg.png" class="homePage_img" alt="Logo" />
+          <img v-else src="../../../../assets/images/SQLImg.png" class="homePage_img" alt="Logo" />
       </Col>
     </Row>
   </div>
 </template>
 <script lang="ts" setup>
 import { Card, Col, Row, Space, message,Tabs,Badge } from 'ant-design-vue';
+import Icon from '@/components/Icon/Icon.vue';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
 import { BasicForm, useForm } from '@/components/Form';
-  import { reactive,unref,onDeactivated,onMounted } from 'vue';
+import {reactive,ref, unref, onDeactivated, onMounted, computed} from 'vue';
+import detailDrawer from './detailDrawer.vue'
   import { PageWrapper } from '@/components/Page';
   import DeptTree from './DeptTree.vue';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
-  import {tableList} from "./mock";
+  import {tableListViewTwo,tableListView,tableListViewThree} from "./mock";
   import { useGo } from '@/hooks/web/usePage';
   import { useRoute,onBeforeRouteLeave } from 'vue-router';
   import { useFilterStore } from '@/store/modules/filterData';
   import {router} from "@/router";
-import {FormSchema} from "./mainBody.data";
+import {FormSchema, columns,Threecolumns, Twocolumns} from "./mainBody.data";
+import {useDrawer} from "@/components/Drawer";
+
   defineOptions({ name: 'AccountManagement' });
   const { createMessage } = useMessage();
   const filterStore = useFilterStore();
@@ -34,11 +71,12 @@ import {FormSchema} from "./mainBody.data";
   const go = useGo();
   const [registerImport, { openModal: openImportModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
-
-
+  const type = ref('1')
+const showDetails = ref(false)
+const [registerDrawer, { openDrawer }] = useDrawer();
 //获取接口数据并放在下拉框里（这里是打开了一个弹框）
 //初始化表单
-const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+const [registerForm, { setFieldsValue, updateSchema, resetFields, validate,getFieldsValue }] = useForm({
   labelWidth: 100,
   baseColProps: { lg: 4, md: 24 },
   schemas: FormSchema,
@@ -47,20 +85,109 @@ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] =
     span: 23,
   },
 });
+const [registerTable, ] = useTable({
+  title: '',
+  api: async (params) => {
+    console.log(params)
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableListView.length,
+      code:'',
+      message:'',
+      data: tableListView,
+    };
+
+    return { ...response};
+  },
+
+  columns,
+
+  useSearchForm: false,
+  showTableSetting: false,
+  bordered: true,
+
+
+});
+const [registerTableTwo, ] = useTable({
+  title: '',
+  api: async (params) => {
+    console.log(params)
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableListViewTwo.length,
+      code:'',
+      message:'',
+      data: tableListViewTwo,
+    };
+
+    return { ...response};
+  },
+
+  columns:Twocolumns,
+
+  useSearchForm: false,
+  showTableSetting: false,
+  bordered: true,
+
+
+});
+const [registerTableThree, ] = useTable({
+  title: '',
+  api: async (params) => {
+    console.log(params)
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableListViewThree.length,
+      code:'',
+      message:'',
+      data: tableListViewThree,
+    };
+
+    return { ...response};
+  },
+
+  columns:Threecolumns,
 
+  useSearchForm: false,
+  showTableSetting: false,
+  bordered: true,
 
 
+});
+
+function handleShowDetails() {
+  console.log('1111')
+  showDetails.value = true
+  openDrawer(true);
+}
 
 
   /** 部门树的select*/
   function handleSelect(deptId = '') {
     searchInfo.deptId = deptId;
-
   }
 
-  function handleView(record: Recordable) {
-    go('/system/account_detail/' + record.id);
-  }
+onMounted(() => {
+  updateSchema({
+    field: 'valueFour',
+    componentProps: {
+      onChange: (value: any, option: any, form: any) => {
+        //调用接口 返回的参数赋值给dictValue
+        if(value === '1') {
+          type.value = '1'
+        }else {
+          type.value = '2'
+        }
+      },
+    },
+  });
+})
 
 
 </script>
@@ -72,5 +199,32 @@ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] =
     margin: 0!important;
     width: 100%!important;
   }
+  .tableList{
+    padding: 0 0 0 10px;
+    position: absolute;
+   background-color: white;
+    width: 100%;
+    bottom: 1px;
+    right: -18px;
+    height: 400px;
+    .header{
+      padding: 5px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .cloase{
+        color: black;
+        cursor: pointer;
+      }
+    }
+    .titleName{
+      padding: 8px 20px;
+      display: flex;
+      align-items: center;
+      .title{
+        padding-left: 10px;
+      }
+    }
+  }
 }
 </style>

src/views/mainBody/details/setup/mainBody.data.ts

 import {getAllRoleList} from '@/api/system/role/role';
 import { BasicColumn, FormSchema } from '@/components/Table';
 
-
+export const Threecolumns: BasicColumn[] = [
+  {
+    title: '表名',
+    dataIndex: 'orderName',
+    width: 120,
+  },
+  {
+    title: '列名',
+    dataIndex: 'colName',
+    width: 120,
+  },
+  {
+    title: '中文名',
+    dataIndex: 'chinaName',
+    editable:true,
+    edit:true,
+    width: 120,
+  },
+  {
+    title: '字段描述',
+    dataIndex: 'des',
+    editable:true,
+    edit:true,
+    width: 120,
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+  {
+    title: '可空',
+    dataIndex: 'empty',
+    width: 120,
+  },
+  {
+    title: '时间字段',
+    dataIndex: 'time',
+    editable:true,
+    edit: true,
+    editComponent: 'Checkbox',
+    editValueMap: (value) => {
+      return value ? '是' : '否';
+    },
+    width: 120,
+  },
+]
+export const Twocolumns: BasicColumn[] = [
+  {
+    title: '取消时间',
+    dataIndex: 'cancelTime',
+    width: 120,
+  },
+  {
+    title: '车型',
+    dataIndex: 'carType',
+    width: 120,
+  },
+  {
+    title: '城市',
+    dataIndex: 'city',
+    width: 120,
+  },
+  {
+    title: '下单时间',
+    dataIndex: 'creationTime',
+    width: 120,
+  },
+  {
+    title: '订单编号',
+    dataIndex: 'orderId',
+    width: 120,
+  },
+  {
+    title: '用户',
+    dataIndex: 'name',
+    width: 120,
+  },
+]
+export const columns: BasicColumn[] = [
+  {
+    title: '车型',
+    dataIndex: 'carType',
+    width: 120,
+  },
+  {
+    title: '城市',
+    dataIndex: 'city',
+    width: 120,
+  },
+  {
+    title: 'cancel_count',
+    dataIndex: 'cancelCount',
+    width: 120,
+  },
+  {
+    title: '各城市各车型用户有效下单量',
+    dataIndex: 'cityCar',
+    width: 120,
+  },
+  {
+    title: 'order_count',
+    dataIndex: 'orderCount',
+    width: 120,
+  },
+]
 
 
 export const FormSchema: FormSchema[] = [
@@ -42,10 +147,12 @@ export const FormSchema: FormSchema[] = [
     field: 'valueFour',
     label: '配置方式',
     component: 'Select',
+    defaultValue: '1',
     componentProps: {
       placeholder: '配置方式',
       options: [
         { label: '可视化', value: '1' },
+        { label: 'SQL模式', value: '2' },
       ],
     },
     colProps: { span: 3 },

src/views/mainBody/details/setup/mock.ts

+
+
+export const tableListViewThree: any[] = [
+  {
+    businessId: 1,
+    orderName: 'order_creation_details',
+    colName: 'city',
+    chinaName: '城市',
+    des: '城市',
+    type: 'varchar(255)',
+    empty: '是',
+    time: '1',
+  },
+  {
+    businessId: 1,
+    orderName: 'order_creation_details',
+    colName: 'city',
+    chinaName: '城市',
+    des: '城市',
+    type: 'varchar(255)',
+    empty: '是',
+    time: '1',
+  },
+  {
+    businessId: 1,
+    orderName: 'order_creation_details',
+    colName: 'city',
+    chinaName: '城市',
+    des: '城市',
+    type: 'varchar(255)',
+    empty: '是',
+    time: '1',
+  },
+]
+export const tableListViewTwo: any[] = [
+  {
+    businessId: 1,
+    cancelTime: 'null',
+    carType: '顺风车',
+    city: '上海',
+    creationTime: '2022-11-16 00：02：00',
+    orderId: 'SH202211160001',
+    name: '张三',
+  },
+  {
+    businessId: 1,
+    cancelTime: 'null',
+    carType: '顺风车',
+    city: '上海',
+    creationTime: '2022-11-16 00：02：00',
+    orderId: 'SH202211160001',
+    name: '张三',
+  },
+  {
+    businessId: 1,
+    cancelTime: 'null',
+    carType: '顺风车',
+    city: '上海',
+    creationTime: '2022-11-16 00：02：00',
+    orderId: 'SH202211160001',
+    name: '张三',
+  },
+]
+export const tableListView: any[] = [
+  {
+    businessId: 1,
+    carType: '顺风车',
+    city: '上海',
+    cancelCount: '0',
+    cityCar: '1',
+    orderCount: '1',
+  },
+  {
+    businessId: 2,
+    carType: '顺风车',
+    city: '上海',
+    cancelCount: '0',
+    cityCar: '1',
+    orderCount: '1',
+  },
+  {
+    businessId: 3,
+    carType: '顺风车',
+    city: '上海',
+    cancelCount: '0',
+    cityCar: '1',
+    orderCount: '1',
+  },
+
+]
+
 export const tableList: any[] = [
   {
     businessId: 1,

src/views/mainBody/mock.ts

@@ -67,13 +67,13 @@ export const tableList: any[] = [
 export const treeDataList = [
   {
     title: '主体管理',
-    key: '0-0',
+    key: 1,
     icon: 'home|svg',
     children: [
-      { title: 'admin_个人工作区', key: '0-0-0' },
-      { title: '共享工作区', key: '0-0-1' },
-      { title: '商城工作区', key: '0-0-2' },
-      { title: '指标工作区', key: '0-0-2' },
+      { title: 'admin_个人工作区', key: 2 },
+      { title: '共享工作区', key: 3 },
+      { title: '商城工作区', key: 4 },
+      { title: '指标工作区', key: 5 },
     ],
   },
 ]