From 42973357f6f420d86c1c8a1cfc21b58e63c88ac2 Mon Sep 17 00:00:00 2001
From: mhsnet <mhsnet@163.com>
Date: Sun, 8 Oct 2023 11:24:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BB=87=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../enterpriseDetails/index.vue               |   4 +-
 .../enterpriseDetails/src/Branch.vue          | 177 ++++++----
 .../enterpriseDetails/src/OrgInfo.vue         | 317 ++++++++++++++++++
 3 files changed, 423 insertions(+), 75 deletions(-)
 create mode 100644 yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OrgInfo.vue

diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/index.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/index.vue
index 63c54b2..4f52ab6 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/index.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import BasicInfo from './src/BasicInfo.vue'
 import AuthInfo from './src/AuthInfo.vue'
 import Branch from './src/Branch.vue'
-import DepartmentalOrganization from './src/DepartmentalOrganization.vue'
+import OrgInfo from './src/OrgInfo.vue'
 import BusinessOrganization from './src/BusinessOrganization.vue'
 import EmployeeInfo from './src/EmployeeInfo.vue'
 import CustomerInfo from './src/CustomerInfo.vue'
@@ -125,7 +125,7 @@ const activeKey = ref('1');
               组织信息
             </span>
           </template>
-          <DepartmentalOrganization />
+          <OrgInfo />
         </a-tab-pane>
         <a-tab-pane key="5">
           <template #tab>
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/Branch.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/Branch.vue
index 0e7474d..864da8a 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/Branch.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/Branch.vue
@@ -1,7 +1,17 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref, watch, h } from 'vue'
 import type { TreeProps } from 'ant-design-vue';
 import difference from 'lodash-es/difference';
+import type { Dayjs } from 'dayjs';
+import {
+  SearchOutlined,
+  UndoOutlined,
+  ReloadOutlined
+} from '@ant-design/icons-vue';
+
+
+type RangeValue = [Dayjs, Dayjs];
+const valTime = ref<RangeValue>();
 // 左边
 const treeData: TreeProps['treeData'] = [
   {
@@ -20,17 +30,16 @@ const treeData: TreeProps['treeData'] = [
         title: '济钢愿景工业',
         key: '0-0-3',
         children: [
-          { key: '0-0-3-1', title: ' 废钢' },
-          { key: '0-0-3-2', title: ' 废铝' },
-          { key: '0-0-3-3', title: ' 废铁' },
           {
-            key: '0-0-3-4', title: ' 废铜',
-            children: [
-              { key: '0-0-3-4-1', title: ' 仓库名称A' },
-              { key: '0-0-3-4-2', title: ' 仓库名称B' },
-              { key: '0-0-3-4-3', title: ' 仓库名称C' }
-            ],
+            key: '0-0-3-1', title: ' 废钢', children: [
+              { key: '0-0-3-1-1', title: ' 仓库名称A' },
+              { key: '0-0-3-1-2', title: ' 生产车间B' },
+              { key: '0-0-3-1-3', title: ' 仓库名称C' }
+            ]
           },
+          { key: '0-0-3-2', title: ' 废铁' },
+          { key: '0-0-3-3', title: ' 废铝' },
+          { key: '0-0-3-4', title: ' 废纸' },
           { key: '0-0-3-5', title: ' 煤炭' },
         ],
       },
@@ -42,7 +51,7 @@ const treeData: TreeProps['treeData'] = [
   }
 ];
 
-const expandedKeys = ref<string[]>([]);
+const expandedKeys = ref<string[]>(['0-0']);
 const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
 const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
 watch(expandedKeys, () => {
@@ -64,7 +73,7 @@ const handleExpand = (keys: string[], { expanded, node }) => {
   }
 };
 // 右边
-const headStyleV: any = { color: 'rgb(102, 102, 102)', 'background-color': 'rgb(249, 249, 249)', 'margin': '0px' }
+const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
 const rowSelection = ref({
   checkStrictly: false,
   onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
@@ -188,74 +197,96 @@ const dataSource: any = [
 </script>
 
 <template>
-  <div class="branch">
-    <a-card title="分支机构" :bordered="false" style="width: 1520px" :headStyle="headStyleV">
-      <a-row>
-        <a-col :span="4">
-          <a-tree v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys" :tree-data="treeData"
-            @expand="handleExpand">
-            <template #title="{ title, key }">
-              <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
-              <template v-else>{{ title }}</template>
-            </template>
-          </a-tree>
-        </a-col>
-        <a-col :span="20">
-          <a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" :headStyle="headStyleV">
-            <a-row>
-              <a-col :span="24">
-                <a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
-                  :columns="columns"
-                  :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
-                  <template #bodyCell="{ column, record }">
-                    <template v-if="column.key === 'k1a'">
-                      <a-row>
-                        <a-col :span="5">
-                          <div style="text-align: center;">
-                            <a-image :width="40"
-                              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
-                          </div>
-                        </a-col>
-                        <a-col :span="19">
-                          <div>{{ record.k1a }}</div>
-                          <div>{{ record.k1b }}</div>
-                        </a-col>
-                      </a-row>
-                    </template>
-                    <template v-else-if="column.key === 'k7'">
-                      <template v-if="record.k7 == true">
+  <a-row :wrap="false" class="branch-y1">
+    <a-col flex="1 1 auto">
+      <a-card title="分支机构" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+        <a-row>
+          <a-col :span="4">
+            <div style="padding: 0px 20px;"><a-input placeholder="公司/业务线/仓库名称" /></div>
+            <div style="padding: 0px 20px;"><a-tree v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys"
+                :tree-data="treeData" @expand="handleExpand">
+                <template #title="{ title, key }">
+                  <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+                  <template v-else>{{ title }}</template>
+                </template>
+              </a-tree></div>
+          </a-col>
+          <a-col :span="20">
+            <a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+              <a-row>
+                <a-col flex="1 1 auto" style="padding: 0px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <a-input placeholder="姓名/工号/手机号/邮箱" />
+                    <a-select allowClear placeholder="状态选项">
+                      <a-select-option value="enable">启用</a-select-option>
+                      <a-select-option value="disable">禁用</a-select-option>
+                    </a-select>
+                    <a-range-picker v-model:value="valTime" />
+                    <a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
+                    <a-button :icon="h(UndoOutlined)">重置</a-button>
+                  </a-space>
+                </a-col>
+                <a-col flex="0 0 20px" style="padding: 10px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <ReloadOutlined title="刷新列表" style="cursor: pointer;" />
+                  </a-space>
+                </a-col>
+              </a-row>
+              <a-row>
+                <a-col :span="24">
+                  <a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
+                    :columns="columns"
+                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
+                    <template #bodyCell="{ column, record }">
+                      <template v-if="column.key === 'k1a'">
                         <a-row>
-                          <a-col :span="6">
-                            <div class="dot-true"></div>
+                          <a-col :span="5">
+                            <div style="text-align: center;">
+                              <a-image :width="40"
+                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+                            </div>
                           </a-col>
-                          <a-col :span="18">
-                            <div>启用</div>
+                          <a-col :span="19">
+                            <div>{{ record.k1a }}</div>
+                            <div>{{ record.k1b }}</div>
                           </a-col>
                         </a-row>
                       </template>
-                      <template v-else>
-                        <a-row>
-                          <a-col :span="6">
-                            <div class="dot-false"></div>
-                          </a-col>
-                          <a-col :span="18">
-                            <div>禁用</div>
-                          </a-col>
-                        </a-row>
+                      <template v-else-if="column.key === 'k7'">
+                        <template v-if="record.k7 == true">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>启用</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-else>
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-false"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>禁用</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k9'">
+                        <div><a>详情</a></div>
                       </template>
                     </template>
-                    <template v-else-if="column.key === 'k9'">
-                      <div><a>详情</a></div>
-                    </template>
-                  </template>
-                </a-table>
-              </a-col>
-            </a-row>
-          </a-card>
-        </a-col>
-      </a-row>
-    </a-card>
-  </div>
+                  </a-table>
+                </a-col>
+              </a-row>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+  </a-row>
 </template>
 
 <style lang="less" scoped>
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OrgInfo.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OrgInfo.vue
new file mode 100644
index 0000000..eeec121
--- /dev/null
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/OrgInfo.vue
@@ -0,0 +1,317 @@
+<script lang="ts" setup>
+import { ref, watch, h } from 'vue'
+import type { TreeProps } from 'ant-design-vue';
+import difference from 'lodash-es/difference';
+import type { Dayjs } from 'dayjs';
+import {
+  SearchOutlined,
+  UndoOutlined,
+  ReloadOutlined
+} from '@ant-design/icons-vue';
+
+
+type RangeValue = [Dayjs, Dayjs];
+const valTime = ref<RangeValue>();
+// 左边
+const treeData: TreeProps['treeData'] = [
+  {
+    title: '济钢城市矿产',
+    key: '0-0',
+    children: [
+      {
+        title: '日照济钢金属',
+        key: '0-0-1'
+      },
+      {
+        title: '城市矿产科技',
+        key: '0-0-2',
+        children: [
+          {
+            key: '0-0-2-1', title: ' 行政组'
+          },
+          { key: '0-0-3-2', title: ' 领导组' },
+          { key: '0-0-3-3', title: ' 再生资源事业部' },
+          { key: '0-0-3-4', title: ' 采购组' },
+          { key: '0-0-3-5', title: ' 销售组' },
+        ],
+      },
+      {
+        title: '济钢愿景工业',
+        key: '0-0-3'
+      },
+      {
+        title: '城市矿产科技（佛山）',
+        key: '0-0-4'
+      }
+    ],
+  }
+];
+
+const expandedKeys = ref<string[]>(['0-0']);
+const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+watch(expandedKeys, () => {
+  console.log('expandedKeys', expandedKeys);
+});
+watch(selectedKeys, () => {
+  console.log('selectedKeys', selectedKeys);
+});
+watch(checkedKeys, () => {
+  console.log('checkedKeys', checkedKeys);
+});
+const handleExpand = (keys: string[], { expanded, node }) => {
+  // node.parent add from 3.0.0-alpha.10
+  const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({ key }) => key);
+  if (expanded) {
+    expandedKeys.value = difference(keys, tempKeys).concat(node.key);
+  } else {
+    expandedKeys.value = keys;
+  }
+};
+// 右边
+const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+});
+const columns: any = [
+  {
+    title: '分支机构名称',
+    dataIndex: 'k1a',
+    key: 'k1a',
+  },
+  {
+    title: '负责人',
+    dataIndex: 'k2',
+    key: 'k2',
+    sorter: true,
+  },
+  {
+    title: '联系电话',
+    dataIndex: 'k3',
+    key: 'k3',
+  },
+  {
+    title: '邮箱',
+    dataIndex: 'k4',
+    key: 'k4',
+  },
+  {
+    title: '包含仓库',
+    dataIndex: 'k5',
+    key: 'k5',
+  },
+  {
+    title: '关联员工',
+    dataIndex: 'k6',
+    key: 'k6',
+  },
+  {
+    title: '状态',
+    dataIndex: 'k7',
+    key: 'k7',
+    sorter: true,
+  },
+  {
+    title: '最后更新时间',
+    dataIndex: 'k8',
+    key: 'k8',
+    sorter: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'k9',
+    key: 'k9',
+  }
+]
+const dataSource: any = [
+  {
+    key: '1',
+    k1a: '济钢城市矿产科技有限公司',
+    k1b: 'JGCSKC202309030001',
+    k1c: 'JGCSKC202309030001',
+    k2: '徐守亮',
+    k3: '18612345678',
+    k4: '12345678@126.com',
+    k5: 100,
+    k6: 100,
+    k7: true,
+    k8: '2023-09-03 23:26:08',
+    k9: '详情',
+  },
+  {
+    key: '2',
+    k1a: '日照济钢金属科技有限公司',
+    k1b: 'JGCSKC202309030002',
+    k1c: 'JGCSKC202309030001',
+    k2: '高鹏',
+    k3: '18612344321',
+    k4: '12345678@126.com',
+    k5: 50,
+    k6: 200,
+    k7: true,
+    k8: '2023-09-03 23:26:08',
+    k9: '详情',
+  },
+  {
+    key: '3',
+    k1a: '济钢城市矿产科技（佛山）有限公司',
+    k1b: 'JGCSKC202309030003',
+    k1c: 'JGCSKC202309030001',
+    k2: '王恒山',
+    k3: '18612344321',
+    k4: '12345678@126.com',
+    k5: 20,
+    k6: 300,
+    k7: false,
+    k8: '2023-09-03 23:26:08',
+    k9: '详情',
+  },
+  {
+    key: '4',
+    k1a: '山东济钢愿景工业科技有限公司',
+    k1b: 'JGCSKC202309030004',
+    k1c: 'JGCSKC202309030001',
+    k2: '邹慧丽',
+    k3: '18612344321',
+    k4: '12345678@126.com',
+    k5: 30,
+    k6: 400,
+    k7: true,
+    k8: '2023-09-03 23:26:08',
+    k9: '详情',
+  }
+];
+</script>
+
+<template>
+  <a-row :wrap="false" class="branch-y1">
+    <a-col flex="1 1 auto">
+      <a-card title="组织信息" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+        <a-row>
+          <a-col :span="4">
+            <div style="padding: 0px 20px;"><a-input placeholder="企业/部门" /></div>
+            <div style="padding: 0px 20px;"><a-tree v-model:selectedKeys="selectedKeys" :expanded-keys="expandedKeys"
+                :tree-data="treeData" @expand="handleExpand">
+                <template #title="{ title, key }">
+                  <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+                  <template v-else>{{ title }}</template>
+                </template>
+              </a-tree></div>
+          </a-col>
+          <a-col :span="20">
+            <a-card title="当前：济钢城市矿产科技有限公司（总公司）" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
+              <a-row>
+                <a-col flex="1 1 auto" style="padding: 0px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <a-input placeholder="分支机构编号/名称/负责人" />
+                    <a-select allowClear placeholder="状态选项">
+                      <a-select-option value="enable">启用</a-select-option>
+                      <a-select-option value="disable">禁用</a-select-option>
+                    </a-select>
+                    <a-range-picker v-model:value="valTime" />
+                    <a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
+                    <a-button :icon="h(UndoOutlined)">重置</a-button>
+                  </a-space>
+                </a-col>
+                <a-col flex="0 0 20px" style="padding: 10px 0px 16px 0px;">
+                  <a-space :size="[8, 16]" wrap>
+                    <ReloadOutlined title="刷新列表" style="cursor: pointer;" />
+                  </a-space>
+                </a-col>
+              </a-row>
+              <a-row>
+                <a-col :span="24">
+                  <a-table class="ant-table-striped" :dataSource="dataSource" :row-selection="rowSelection"
+                    :columns="columns"
+                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
+                    <template #bodyCell="{ column, record }">
+                      <template v-if="column.key === 'k1a'">
+                        <a-row>
+                          <a-col :span="5">
+                            <div style="text-align: center;">
+                              <a-image :width="40"
+                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+                            </div>
+                          </a-col>
+                          <a-col :span="19">
+                            <div>{{ record.k1a }}</div>
+                            <div>{{ record.k1b }}</div>
+                          </a-col>
+                        </a-row>
+                      </template>
+                      <template v-else-if="column.key === 'k7'">
+                        <template v-if="record.k7 == true">
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-true"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>启用</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                        <template v-else>
+                          <a-row>
+                            <a-col :span="6">
+                              <div class="dot-false"></div>
+                            </a-col>
+                            <a-col :span="18">
+                              <div>禁用</div>
+                            </a-col>
+                          </a-row>
+                        </template>
+                      </template>
+                      <template v-else-if="column.key === 'k9'">
+                        <div><a>详情</a></div>
+                      </template>
+                    </template>
+                  </a-table>
+                </a-col>
+              </a-row>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped>
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.ant-table-thead) .ant-table-cell {
+  background-color: rgb(245, 245, 245);
+  color: rgb(102, 102, 102);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-a) {
+  background-color: rgb(255, 255, 255);
+}
+
+:where(.css-dev-only-do-not-override-176pxz6) :deep(.table-tr-b) {
+  background-color: rgb(245, 245, 245);
+}
+
+.dot-true {
+  width: 10px;
+  height: 10px;
+  background-color: green;
+  border-radius: 100%;
+  margin: 7px 0px;
+}
+
+.dot-false {
+  width: 10px;
+  height: 10px;
+  background-color: red;
+  border-radius: 100%;
+  margin: 7px 0px;
+}
+</style>
\ No newline at end of file