From 321e4fb68877f1e62ffab8341ebe11bb426f096f Mon Sep 17 00:00:00 2001
From: mhsnet <mhsnet@163.com>
Date: Thu, 28 Sep 2023 17:51:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=81=E4=B8=9A=E5=88=86=E6=94=AF=E7=AD=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=83=A8=E5=88=86=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/AuthenticationInformation.vue         |   3 +-
 .../src/BasicInformation.vue                  |  10 +-
 .../enterpriseDetails/src/Branch.vue          | 283 +++++++++++++++++-
 3 files changed, 286 insertions(+), 10 deletions(-)

diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/AuthenticationInformation.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/AuthenticationInformation.vue
index 5802236..bb0e3d0 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/AuthenticationInformation.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/AuthenticationInformation.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+const headStyleV: any = { color: 'rgb(102, 102, 102)', 'background-color': 'rgb(249, 249, 249)', 'margin': '12px 0px' }
 </script>
 
 <template>
   <div class="basic-information">
-    <a-card title="认证信息" :bordered="false" style="width: 1520px">
+    <a-card title="认证信息" :bordered="false" style="width: 1520px" :headStyle=headStyleV>
       <div class="stycus-infoa-box">
         <a-row>
           <a-col :span="24">
diff --git a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/BasicInformation.vue b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/BasicInformation.vue
index 41ba9c5..3e9c89a 100644
--- a/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/BasicInformation.vue
+++ b/yudao-ui-admin-vben-master/src/views/stpagea/enterpriseCentre/enterpriseDetails/src/BasicInformation.vue
@@ -27,16 +27,12 @@ const stepItems = [
     description: '2023-09-03 23:26:08'
   }
 ];
+const headStyleV: any = { color: 'rgb(102, 102, 102)', 'background-color': 'rgb(249, 249, 249)', 'margin': '20px 0px' }
 </script>
 
 <template>
   <div class="basic-information">
-    <a-card :bordered="false">
-      <template #title>
-        <span class="tab-title">
-          流程进度
-        </span>
-      </template>
+    <a-card title="流程进度" :bordered="false" style="width: 1520px" :headStyle="headStyleV">
       <a-steps v-model:current="current" :items="stepItems">
         <template #progressDot="{ index, status, prefixCls }">
           <a-popover>
@@ -48,7 +44,7 @@ const stepItems = [
         </template>
       </a-steps>
     </a-card>
-    <a-card title="基本信息" :bordered="false" style="width: 1520px" :headStyle="{color: 'rgb(102, 102, 102)'}">
+    <a-card title="基本信息" :bordered="false" style="width: 1520px" :headStyle="headStyleV">
       <div class="stycus-infoa-box">
         <a-row>
           <a-col :span="24">
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 ddc2aaa..0e7474d 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,11 +1,290 @@
 <script lang="ts" setup>
+import { ref, watch } from 'vue'
+import type { TreeProps } from 'ant-design-vue';
+import difference from 'lodash-es/difference';
+// 左边
+const treeData: TreeProps['treeData'] = [
+  {
+    title: '济钢城市矿产',
+    key: '0-0',
+    children: [
+      {
+        title: '城市矿产科技',
+        key: '0-0-1'
+      },
+      {
+        title: '日照济钢金属',
+        key: '0-0-2'
+      },
+      {
+        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-5', title: ' 煤炭' },
+        ],
+      },
+      {
+        title: '城市矿产科技（佛山）',
+        key: '0-0-4'
+      }
+    ],
+  }
+];
+
+const expandedKeys = ref<string[]>([]);
+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: 'rgb(102, 102, 102)', 'background-color': 'rgb(249, 249, 249)', 'margin': '0px' }
+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>
-  <div class="basic-information">
-    分支机构内容
+  <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>
+                          <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>
   </div>
 </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