fix: 逻辑修改

src/views/customer-manage/customer-detail/components/CustomerDecisionChain/compoents/LinkList/HistoryJCProject.vue

@@ -0,0 +1,145 @@
+<template>
+  <bs-modal
+      :visible="modalOptions.visible"
+      :width="modalOptions.width"
+      :title="modalOptions.title"
+      :modal-extra-props="modalOptions.modalExtraProps"
+      @cancel="handleCancel"
+      @ok="handleOk"
+  >
+    <div class="content">
+      <bs-table v-bind="tableOptions"></bs-table>
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+import { useBsModal, useBsForm, BsModal, BsTable, useBsTable } from '/@/components/BsUi/index.js';
+import { h, ref } from 'vue';
+import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
+import { DownloadOutlined } from '@ant-design/icons-vue';
+
+const {
+  modalOptions,
+  getModalPropsValue: getMVal,
+  setModalPropsValue: setMVal,
+} = useBsModal({
+  modalOptions: {
+    title: '历史决策项目',
+    visible: false,
+    size: 'middle',
+    modalExtraProps: {
+      footer: null,
+      destroyOnClose: true,
+      okButtonProps: {
+        loading: false,
+      },
+    },
+  },
+});
+
+const { tableOptions } = useBsTable({
+  tableOptions: {
+    searchConfig: {
+      enable: false,
+    },
+    gridOptions: {
+      loading: false,
+      data: [],
+      columns: [
+        {
+          title: '项目名称',
+          field: 'name',
+        },
+        {
+          title: '项目ID',
+          field: 'name1',
+        },
+        {
+          title: '项目报价',
+          field: 'name2',
+        },
+        {
+          title: '合同金额(元)',
+          field: 'name3',
+        },
+        {
+          title: '补充协议金额(元)',
+          field: 'name4',
+        },
+        {
+          // fixed: 'right',
+          cellRender: {
+            name: 'CellOption',
+            extraProps: {
+              buttons: [
+                {
+                  title: '预览',
+                  code: 'view',
+                  display: ({ row }) => {
+                    return DISPLAY_STATE.VISIBLE;
+                  },
+                  disabled({ row }) {
+                    return false;
+                  },
+                  onClick({ row }) {},
+                  extraProps: {},
+                },
+                {
+                  title: '下载',
+                  code: 'download',
+                  display: ({ row }) => {
+                    return DISPLAY_STATE.VISIBLE;
+                  },
+                  disabled({ row }) {
+                    return false;
+                  },
+                  onClick({ row }) {},
+                  extraProps: {
+                    icon: h(DownloadOutlined),
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+    pagerConfig: {
+      enable: true,
+      isFixed: false,
+      pageNum: 1,
+      pageSize: 10,
+    },
+    toolbarConfig: {
+      enable: false
+    }
+  },
+});
+
+const showModal = () => {
+  setMVal('visible', true);
+};
+
+const handleCancel = () => {
+  setMVal('visible', false);
+};
+
+const handleOk = ({}) => {
+  setMVal('modalExtraProps.okButtonProps.loading', true);
+  setTimeout(() => {
+    setMVal('modalExtraProps.okButtonProps.loading', false);
+    setMVal('visible', false);
+  }, 1000);
+};
+
+defineExpose({
+  showModal,
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  max-height: 500px;
+}
+</style>

src/views/customer-manage/customer-detail/components/CustomerDecisionChain/compoents/LinkList/HistoryJDState.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="less">
+
+</style>

src/views/customer-manage/customer-detail/components/CustomerDecisionChain/compoents/LinkList/TableInfo.vue

@@ -1,161 +1,202 @@
 <template>
   <div class="table-wrapper">
     <bs-table v-bind="tableOptions"> </bs-table>
+
+    <HistoryJCProjectModal ref="historyJCProjectModalRef"/>
+    <HistoryJDStateModal ref="historyJDStateModalRef"/>
   </div>
 </template>
 
 <script setup lang="jsx">
-import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
-import { h, onMounted, ref } from 'vue';
-import { message } from 'ant-design-vue';
-import { BorderOuterOutlined, SearchOutlined, PlusSquareOutlined } from '@ant-design/icons-vue';
-import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
+  import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
+  import { h, onMounted, ref } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { BorderOuterOutlined, SearchOutlined, PlusSquareOutlined } from '@ant-design/icons-vue';
+  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
+  import HistoryJCProjectModal from './HistoryJCProject.vue';
+  import HistoryJDStateModal from './HistoryJDState.vue';
 
-const handleEdit = (row) => {};
+  const historyJCProjectModalRef = ref(null);
+  const historyJDStateModalRef = ref(null);
 
-const {
-  tableOptions,
-  setTablePropsValue: setValue,
-  getTablePropsValue: getValue,
-  fetchTableData,
-} = useBsTable({
-  tableOptions: {
-    gridOptions: {
-      loading: false,
-      headerAlign: "center",
-      columns: [
-        {
-          title: "姓名",
-          field: "name",
-          width: '150px'
-        },
-        {
-          title: "性别",
-          field: "name1",
-          width: '150px'
-        },
-        {
-          title: "年龄",
-          field: "name2",
-          width: '150px'
-        },
-        {
-          title: "联系电话",
-          field: "name3",
-          width: '150px'
-        },
-        {
-          title: "部门",
-          field: "name4",
-          width: '150px'
-        },
-        {
-          title: "职务",
-          field: "name5",
-          width: '150px'
-        },
-        {
-          title: "工作",
-          field: "name6",
-          width: '150px'
-        },
-        {
-          title: "职务权重",
-          field: "name7",
-          width: '150px'
-        },
-        {
-          title: "邮箱",
-          field: "name8",
-          width: '150px'
-        },
-        {
-          title: "上级",
-          field: "name9",
-          width: '150px'
-        },
-        {
-          title: "下级",
-          field: "name10",
-          width: '150px'
-        },
-        {
-          title: "爱好",
-          field: "name11",
-          width: '150px'
-        },
-        {
-          title: "家庭情况",
-          field: "name12",
-          width: '150px'
-        },
-        {
-          title: "家庭地址",
-          field: "name13",
-          width: '150px'
-        },
+  const handleEdit = (row) => {};
+
+  const {
+    tableOptions,
+    setTablePropsValue: setValue,
+    getTablePropsValue: getValue,
+    fetchTableData,
+  } = useBsTable({
+    tableOptions: {
+      data: [
         {
-          title: "备注",
-          field: "name14",
-          width: '150px'
+          name: '韩晓辉',
         },
-        {
-          // fixed: 'right',
-          cellRender: {
-            name: 'CellOption',
-            extraProps: {
-              buttons: [
-                {
-                  title: '编辑',
-                  code: 'edit',
-                  display: ({ row }) => {
-                    return DISPLAY_STATE.VISIBLE;
-                  },
-                  disabled({ row }) {
-                    return false;
-                  },
-                  onClick({ row }) {},
-                  extraProps: {},
-                },
-                {
-                  title: '删除',
-                  code: 'delete',
-                  display: ({ row }) => {
-                    return DISPLAY_STATE.VISIBLE;
+      ],
+      gridOptions: {
+        loading: false,
+        headerAlign: 'center',
+        columns: [
+          {
+            title: '姓名',
+            field: 'name',
+            width: '150px',
+          },
+          {
+            title: '历史决策项目',
+            field: 'name111',
+            width: '150px',
+            slots: {
+              default: ({ row }) => {
+                return (
+                  <a-button type='link' onClick={() => {}}>
+                    查看项目
+                  </a-button>
+                );
+              },
+            },
+          },
+          {
+            title: '历史接待情况',
+            field: 'name222',
+            width: '150px',
+            slots: {
+              default: ({ row }) => {
+                return (
+                  <a-button type='link' onClick={() => {}}>
+                    查看项目
+                  </a-button>
+                );
+              },
+            },
+          },
+          {
+            title: '性别',
+            field: 'name1',
+            width: '150px',
+          },
+          {
+            title: '年龄',
+            field: 'name2',
+            width: '150px',
+          },
+          {
+            title: '联系电话',
+            field: 'name3',
+            width: '150px',
+          },
+          {
+            title: '部门',
+            field: 'name4',
+            width: '150px',
+          },
+          {
+            title: '职务',
+            field: 'name5',
+            width: '150px',
+          },
+          {
+            title: '工作',
+            field: 'name6',
+            width: '150px',
+          },
+          {
+            title: '职务权重',
+            field: 'name7',
+            width: '150px',
+          },
+          {
+            title: '邮箱',
+            field: 'name8',
+            width: '150px',
+          },
+          {
+            title: '上级',
+            field: 'name9',
+            width: '150px',
+          },
+          {
+            title: '下级',
+            field: 'name10',
+            width: '150px',
+          },
+          {
+            title: '爱好',
+            field: 'name11',
+            width: '150px',
+          },
+          {
+            title: '家庭情况',
+            field: 'name12',
+            width: '150px',
+          },
+          {
+            title: '家庭地址',
+            field: 'name13',
+            width: '150px',
+          },
+          {
+            title: '备注',
+            field: 'name14',
+            width: '150px',
+          },
+          {
+            // fixed: 'right',
+            cellRender: {
+              name: 'CellOption',
+              extraProps: {
+                buttons: [
+                  {
+                    title: '编辑',
+                    code: 'edit',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {},
+                    extraProps: {},
                   },
-                  disabled({ row }) {
-                    return false;
+                  {
+                    title: '删除',
+                    code: 'delete',
+                    display: ({ row }) => {
+                      return DISPLAY_STATE.VISIBLE;
+                    },
+                    disabled({ row }) {
+                      return false;
+                    },
+                    onClick({ row }) {},
+                    extraProps: {},
                   },
-                  onClick({ row }) {},
-                  extraProps: {},
-                },
-              ],
+                ],
+              },
             },
           },
-        },
-      ],
-      data: [], // 模拟数据源
-    },
-    searchConfig: {
-      enable: false,
-    },
-    pagerConfig: {
-      enable: false,
-    },
-    toolbarConfig: {
-      enable: false,
-      displayToolbar: DISPLAY_STATE.HIDDEN,
-      leftButtons: [],
+        ],
+        data: [], // 模拟数据源
+      },
+      searchConfig: {
+        enable: false,
+      },
+      pagerConfig: {
+        enable: false,
+      },
+      toolbarConfig: {
+        enable: false,
+        displayToolbar: DISPLAY_STATE.HIDDEN,
+        leftButtons: [],
+      },
     },
-  },
-});
+  });
 </script>
 
 <style scoped lang="scss">
-.table-wrapper {
-  width: 100%;
-  :deep(.vxe-grid--table-container) {
-    padding: 0;
+  .table-wrapper {
+    width: 100%;
+    :deep(.vxe-grid--table-container) {
+      padding: 0;
+    }
   }
-}
 </style>

src/views/customer-manage/customer-detail/components/CustomerDecisionChain/index.vue

@@ -3,7 +3,21 @@
     <div class="link-flow">
       <bs-catalog title="关联公司架构">
         <template #content>
-          <org-struct-chart />
+          <div class="link-company-content">
+            <div class="func-btns">
+              <a-tooltip placement="right" title="全屏">
+                <bs-svg-icon name="icon-quanping" size="20" @click="handleFunc('quanping')" />
+              </a-tooltip>
+              <a-tooltip placement="right" title="放大">
+                <bs-svg-icon name="icon-fangda" size="20" @click="handleFunc('fangda')" />
+              </a-tooltip>
+              <a-tooltip placement="right" title="缩小">
+                <bs-svg-icon name="icon-suoxiao" size="20" @click="handleFunc('suoxiao')" />
+              </a-tooltip>
+            </div>
+
+            <org-struct-chart ref="orgStructChartRef" />
+          </div>
         </template>
       </bs-catalog>
     </div>
@@ -13,23 +27,46 @@
   </div>
 </template>
 <script setup>
-  import OrgStructChart from './compoents/OrgStructChart/index.vue';
-  import LinkList from './compoents/LinkList/index.vue';
-  import { BsCatalog } from '/@/components/BsUi/index.js';
+import OrgStructChart from './compoents/OrgStructChart/index.vue';
+import LinkList from './compoents/LinkList/index.vue';
+import { BsCatalog } from '/@/components/BsUi/index.js';
+import { ref } from 'vue';
+const orgStructChartRef = ref(null);
+const handleFunc = (code) => {
+  if (code === 'quanping') {
+    orgStructChartRef.value.handleFullscreen();
+  } else if (code === 'fangda') {
+    orgStructChartRef.value.zoomIn()
+  } else {
+    orgStructChartRef.value.zoomOut()
+  }
+};
 </script>
 
 <style scoped lang="scss">
-  .link-company {
-    width: 100%;
-    display: flex;
-    gap: 30px;
-    .link-flow {
-      border-radius: 8px;
-      flex: 1;
-    }
-    .link-list {
-      border-radius: 8px;
-      width: 800px;
+.link-company {
+  width: 100%;
+  display: flex;
+  gap: 30px;
+  .link-flow {
+    border-radius: 8px;
+    flex: 1;
+    .link-company-content {
+      width: 100%;
+      position: relative;
+      .func-btns {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        right: 10px;
+        top: 10px;
+        z-index: 10;
+      }
     }
   }
+  .link-list {
+    width: 670px;
+  }
+}
 </style>