feat: 线索列表新增查看详情页面

src/views/market-manage/external-manage/clue-management/clue-list/index.vue

@@ -18,6 +18,7 @@ import BsTable, {useBsTable} from '/@/components/BsUi/Table/index.js';
 import {onMounted, ref} from 'vue';
 import AddOrEditDrawer from '/@/views/table-demo/components/AddOrEditDrawer.vue';
 import {useRouter} from 'vue-router';
+import {pick} from "lodash";
 
 const addOrEditDrawerRef = ref(null);
 const router = useRouter();
@@ -29,6 +30,7 @@ const {
   tableOptions: {
     // url:''
     gridOptions: {
+      // data:[],
       loading: false,
       columns: [
         {
@@ -152,7 +154,64 @@ const {
     },
   },
 });
+const goDetailPage = (record) => {
+  router.push({
+    path: "/market-manage/external-manage/clue-management/view-details",
+    query: {
+      data: JSON.stringify(record)
+    }
+  });
+  // router.push('/market-manage/external-manage/clue-management/view-details');
+}
+const getSearchParams = () => {
+  return getValue('searchConfig.data');
+};
+const getPageInfo = () => {
+  return pick(getValue('pagerConfig.pageInfo'), ['pageNum', 'pageSize']);
+};
+const fetchTableData = () => {
+  setValue('gridOptions.loading', true);
+
+  const params = {
+    ...getSearchParams(),
+    ...getPageInfo(),
+  };
+  //
+  // clientManageApi.interventionsList(params).then((res) => {
+  //   console.log('res', res);
+  //   setValue('gridOptions.data', res.data.list);
+  // });
 
+  const TableDate = [
+    {
+      id: '1111111',
+      name: 'John Doe',
+      name1: '1212212',
+      name2: '1313131',
+    },
+    {
+      id: '22222',
+      name: 'John Doe',
+      name1: '1212212',
+      name2: '1313131',
+    },
+    {
+      id: '33333',
+      name: 'John sssssDoe',
+      name1: '12122sss12',
+      name2: '13sss13131',
+    },
+  ];
+  setTimeout(() => {
+    setValue('gridOptions.data', TableDate);
+    setValue('gridOptions.loading', false);
+  }, 1000);
+};
+
+onMounted(() => {
+  console.log('表格已加载');
+  fetchTableData();
+});
 const openCuleDrawer = () => {
   router.push('/market-manage/external-manage/clue-management/clue-registration');
 }

src/views/market-manage/external-manage/clue-management/view-details/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="page-detail">
+    <page-detail-layout :tabs="tabs" v-model:tab-active-key="tabActiveKey">
+      <template #tab1>
+        <bs-contents-wrapper>
+          <bs-descriptions :items="bsDescriptionItems" title="客户信息">
+            <template #name1_label_slot>
+              <span style="color: red">label插槽</span>
+            </template>
+            <template #name1_value_slot> <span style="color: blue">value插槽</span></template>
+          </bs-descriptions>
+          <bs-descriptions title="管理信息" >
+            <bs-table v-bind="tableOptions" >
+            </bs-table>
+          </bs-descriptions>
+<!--          <bs-descriptions :items="bsDescriptionItems" title="">-->
+<!--            <bs-table v-bind="tableOptions">-->
+<!--            </bs-table>-->
+<!--            <template #name1_label_slot>-->
+<!--              <span style="color: red">label插槽</span>-->
+<!--            </template>-->
+<!--            <template #name1_value_slot> <span style="color: blue">value插槽</span></template>-->
+<!--          </bs-descriptions>-->
+          <bs-descriptions :items="otherForms" title="其他信息">
+            <template #name1_label_slot>
+              <span style="color: red">label插槽</span>
+            </template>
+            <template #name1_value_slot> <span style="color: blue">value插槽</span></template>
+          </bs-descriptions>
+        </bs-contents-wrapper>
+
+      </template>
+      <template #tab2>tab2</template>
+      <template #tab3>tab3</template>
+    </page-detail-layout>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
+import { BsDescriptions, BsContentsWrapper } from '/@/components/BsUi/index.js';
+import selectedIcon from '/@/assets/images/page-detail-layout/selectedIcon.png';
+import unSelectedIcon from '/@/assets/images/page-detail-layout/unSelectedIcon.png';
+import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
+const tabActiveKey = ref('tab1');
+
+const tabs = ref([
+  {
+    title: '基本信息',
+    key: 'tab1',
+    slotName: 'tab1',
+    selectedIcon: selectedIcon,
+    unSelectedIcon: unSelectedIcon,
+  },
+  {
+    title: '跟进情况',
+    key: 'tab2',
+    slotName: 'tab2',
+    selectedIcon: selectedIcon,
+    unSelectedIcon: unSelectedIcon,
+  },
+  {
+    title: '关联公司',
+    key: 'tab3',
+    slotName: 'tab3',
+    selectedIcon: selectedIcon,
+    unSelectedIcon: unSelectedIcon,
+  },
+]);
+const {
+  tableOptions,
+  setTablePropsValue: setValue,
+  getTablePropsValue: getValue,
+} = useBsTable({
+  tableOptions: {
+    gridOptions: {
+      loading: false,
+      data:[],
+      columns: [
+        {
+          field: 'id',
+          title: '上级单位名称',
+        },
+        {
+          field: 'name',
+          title: '法定代表人',
+        },
+        {
+          field: 'name1',
+          title: '股份占比',
+        },
+        {
+          field: 'name2',
+          title: '省市区地址',
+        },
+        {
+          field: 'name',
+          title: '企业权责说明',
+        },
+      ],
+    },
+    pagerConfig: {
+      enabled: true,
+      isFixed:false,
+      pageSize: 10,
+      pageNum: 1,
+      total: 100,
+    },
+  },
+});
+const bsDescriptionItems = ref([
+  {label: '客户地区', value: '国内客户'},
+  {label: '客户来源', value: '服务商提供'},
+  {label: '服务商名称', value: '服务名称一显示位置占位'},
+  {label: '客户名称', value: '江西大明环境治理有限公司'},
+  {label: '属性', value: '有限责任公司'},
+  {label: '统一社会代码', value: '913702007180133454'},
+  {label: '法定代表人', value: '汪鹏程'},
+  {label: '存储状态', value: '正常'},
+  {label: '注册地址', value: '江西省南昌经济技术开发区下乡（江西省公路管理局物流配送站内）'},
+  {label: '注册时间', value: '2006-09-16'},
+  {label: '注册资本', value: '1000万'},
+  {label: '官网地址', value: '具体网址信息展示位置'},
+  {label: '经营范围', value: '经营范围是具备商业信息、文字信息等功能的城镇居民，服务人员齐全，符合条件的用户。'},
+  {label: '企业简介', value: '四川山庄旅游度假集团，是国家旅游行业产品销售委员会首批省级重点项目之一...'},
+  {label: '初始对接人', value: '何平'},
+  {label: '功能对接人电话', value: '15012341234'},
+  {label: '办公地址', value: '江西省南昌经济技术开发区下乡（江西省公路管理局物流配送站内）'}
+]);
+const otherForms = ref([
+  {label: '中国裁判文书网查询', value: 'http://wenshu.court.gov.cn/'},
+  {label: '最高院失信被执行人(黑名单)查询', value: 'http://wenshu.court.gov.cn/zhzxgk/'},
+  {label: '国家工商信息查询', value: 'https://www.gsxt.gov.cn/index.html'},
+  {label: '其他附件', value: '关于上传的文书文件名称信息展示位置'},
+  {label: '备注信息', value: '非必填项，有就显示，没有不显示该条'},
+]);
+</script>
+
+<style lang="scss" scoped>
+.page-detail {
+  width: 100%;
+}
+</style>