fix: 客户详情逻辑修改

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

@@ -0,0 +1,174 @@
+<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-form
+        :form-data="formOptions.formData"
+        :form-fields="formOptions.formFields"
+        :form-extra-props="formOptions.formExtraProps"
+        :footer-render="() => null"
+      />
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import { BsModal, useBsModal, useBsForm, BsForm } from '/@/components/BsUi/index.js';
+  import { REQUIRED_STATE, SCENE_TYPE, SELECT_MULTIPLE } from '/@/components/BsUi/constant.js';
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      title: '客户转移',
+      visible: false,
+      width: '500px',
+      modalExtraProps: {
+        destroyOnClose: true,
+        okButtonProps: {
+          loading: false,
+        },
+      },
+    },
+  });
+
+  const { formOptions } = useBsForm({
+    formOptions: {
+      formId: 'formId',
+      formExtraProps: {},
+      formData: {},
+      formFields: [
+        {
+          id: '1',
+          label: '客户名称',
+          component: 'a-input',
+          componentProps: {
+            placeholder: '请输入',
+            disabled: true,
+            required: REQUIRED_STATE.REQUIRED,
+          },
+          field: 'name',
+          sort: '1',
+          visible: '1',
+          required: '1',
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '2',
+          label: '归属营销人员',
+          component: 'bs-org-user-selector',
+          componentProps: {
+            placeholder: '请选择',
+            disabled: false,
+            required: REQUIRED_STATE.REQUIRED,
+            sceneType: SCENE_TYPE.USER,
+            multiple: SELECT_MULTIPLE.ONE,
+          },
+          field: 'name2',
+          sort: '1',
+          visible: '1',
+          required: '1',
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '3',
+          label: '营销经理团队',
+          component: 'bs-org-user-selector',
+          componentProps: {
+            placeholder: '自动带出',
+            disabled: false,
+            sceneType: SCENE_TYPE.ORG,
+            multiple: SELECT_MULTIPLE.ONE,
+          },
+          field: 'name3',
+          sort: '1',
+          visible: '1',
+          required: '1',
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '4',
+          label: '营销经理团队',
+          component: 'a-input',
+          componentProps: {
+            placeholder: '自动带出',
+            disabled: false,
+          },
+          field: 'name4',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  });
+
+  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%;
+  }
+</style>

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

@@ -0,0 +1,69 @@
+<template>
+  <bs-modal
+    :visible="modalOptions.visible"
+    :width="modalOptions.width"
+    :title="modalOptions.title"
+    :modal-extra-props="modalOptions.modalExtraProps"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="content">
+      <a-checkbox-group v-model:value="tagVal" :options="tagOptions"> </a-checkbox-group>
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import  { BsModal, useBsModal } from '/@/components/BsUi/index.js';
+  import { ref } from 'vue';
+  import useBsDict from "/@/utils/dict.js"
+
+  const tagVal = ref([]);
+
+  const tagOptions = useBsDict.getDictList("BLINK_CUSTOMER_TAG_MANAGE")
+
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      size: 'small',
+      title: '标签管理',
+      visible: false,
+      modalExtraProps: {
+        destroyOnClose: true,
+        okButtonProps: {
+          loading: false,
+        },
+      },
+    },
+  });
+
+  const showModal = () => {
+    tagVal.value = [];
+    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%;
+    //padding: 20px;
+  }
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+  <bs-modal
+    :visible="modalOptions.visible"
+    :width="modalOptions.width"
+    :title="modalOptions.title"
+    :modal-extra-props="modalOptions.modalExtraProps"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="content">
+      <a-alert message="请谨慎操作，释放到公海，该客户将会被别人认领！" type="warning" />
+      <bs-form
+        :form-data="formOptions.formData"
+        :form-fields="formOptions.formFields"
+        :form-extra-props="formOptions.formExtraProps"
+        :footer-render="() => null"
+      />
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import { BsModal, useBsModal, useBsForm, BsForm } from '/@/components/BsUi/index.js';
+  import { REQUIRED_STATE, SCENE_TYPE, SELECT_MULTIPLE } from '/@/components/BsUi/constant.js';
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      title: '释放公海',
+      visible: false,
+      width: '500px',
+      modalExtraProps: {
+        destroyOnClose: true,
+        okButtonProps: {
+          loading: false,
+        },
+      },
+    },
+  });
+
+  const { formOptions } = useBsForm({
+    formOptions: {
+      formId: 'formId',
+      formExtraProps: {},
+      formData: {},
+      formFields: [
+        {
+          id: '1',
+          label: '释放原因',
+          component: 'a-textarea',
+          componentProps: {
+            placeholder: '请输入',
+            disabled: false,
+          },
+          field: 'name',
+          sort: '1',
+          visible: '1',
+          required: REQUIRED_STATE.REQUIRED,
+          formItemExtraProps: {
+            rules: [
+              {
+                validator: (_, value) => {
+                  // return Promise.reject(new Error('报错'));
+                  return Promise.resolve();
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  });
+
+  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%;
+  }
+</style>

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

@@ -0,0 +1,89 @@
+<template>
+  <bs-modal
+    :visible="modalOptions.visible"
+    :width="modalOptions.width"
+    :title="modalOptions.title"
+    :modal-extra-props="modalOptions.modalExtraProps"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <div class="content">
+      <a-timeline>
+        <a-timeline-item v-for="i in 4">
+          <div class="cont-item">
+            <div class="time-title">2022-10-11 10:20</div>
+            <div class="cont-it-content">
+              <span>变更名称：江西大同环境治理有限公司</span>
+              <span>变更人：张经理</span>
+            </div>
+          </div>
+        </a-timeline-item>
+      </a-timeline>
+    </div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import BsModal, { useBsModal } from '/@/components/BsUi/Modal/index.js';
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      title: '客户转移',
+      visible: false,
+      width: '500px',
+      modalExtraProps: {
+        destroyOnClose: true,
+        okButtonProps: {
+          loading: 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;
+
+    .cont-item {
+      .time-title {
+        font-size: 14px;
+        color: #202224;
+      }
+      .cont-it-content {
+        display: flex;
+        gap: 5px;
+        flex-direction: column;
+        margin-top: 10px;
+        padding: 10px;
+        background: #f8f8f9;
+        font-size: 14px;
+        color: #1d2129;
+        border-radius: 8px;
+      }
+    }
+  }
+</style>

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

@@ -14,11 +14,11 @@
           <UserAddOutlined />
           <span>加入黑名单</span>
         </a-button>
-        <a-button danger ghost type="primary" size="small">
+        <a-button danger ghost type="primary" size="small" @click="handleTransferPublicSea">
           <UserDeleteOutlined />
           <span>释放公海</span>
         </a-button>
-        <a-button ghost type="primary" size="small">
+        <a-button ghost type="primary" size="small" @click="customerTransferModalRef.showModal()">
           <RightSquareOutlined />
           <span> 客户转移 </span></a-button
         >
@@ -29,7 +29,7 @@
       </template>
 
       <template #titleBottom>
-        <a-tag color="#f0f4fe" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex">
+        <a-tag color="#f0f4fe" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex" @click="tagItem?.click(tagItem)" style="cursor: pointer">
           <div class="tag-stl">
             <img :src="tagItem.icon" alt="" />
             <span class="title-render">{{ tagItem.title }}</span>
@@ -58,11 +58,11 @@
       </template>
 
       <template #CustomerDecisionChain>
-        <CustomerDecisionChain :id="route.query.id"/>
+        <CustomerDecisionChain :id="route.query.id" />
       </template>
 
       <template #InvestmentCompetitionManagement>
-        <InvestmentCompetitionManagement :id="route.query.id"/>
+        <InvestmentCompetitionManagement :id="route.query.id" />
       </template>
 
       <template #InfoMaterial>
@@ -73,6 +73,12 @@
         <EditReport :id="route.query.id" />
       </template>
     </page-detail-layout>
+
+    <TagManageModal ref="tagManageModalRef" />
+    <UsedNameModal ref="usedNameModalRef" />
+    <CustomerTransferModal ref="customerTransferModalRef" />
+
+    <TransferPublicSeaModal ref="transferPublicSeaModalRef" />
   </div>
 </template>
 
@@ -86,10 +92,16 @@
   import CooperativeProject from '/@/views/customer-manage/customer-detail/components/CooperativeProject/index.vue';
   import CustomerDecisionChain from '/@/views/customer-manage/customer-detail/components/CustomerDecisionChain/index.vue';
   import FollowUp from '/@/views/customer-manage/customer-detail/components/FollowUp/index.vue';
-  import InvestmentCompetitionManagement from "/@/views/customer-manage/customer-detail/components/InvestmentCompetitionManagement/index.vue"
-  import InfoMaterial from "/@/views/customer-manage/customer-detail/components/InfoMaterial/index.vue"
-  import EditReport from "/@/views/customer-manage/customer-detail/components/EditReport/index.vue"
+  import InvestmentCompetitionManagement from '/@/views/customer-manage/customer-detail/components/InvestmentCompetitionManagement/index.vue';
+  import InfoMaterial from '/@/views/customer-manage/customer-detail/components/InfoMaterial/index.vue';
+  import EditReport from '/@/views/customer-manage/customer-detail/components/EditReport/index.vue';
+  import TagManageModal from './components/TagManageModal/index.vue';
+  import UsedNameModal from './components/UsedNameModal/index.vue';
+  import CustomerTransferModal from './components/CustomerTransferModal/index.vue';
+  import TransferPublicSeaModal from './components/TransferPublicSeaModal/index.vue';
+
   import { fetchCustomerHeaderInfo, fetchCustomerDetail } from '/@/api/customer-manage/index.js';
+  import { Modal } from 'ant-design-vue';
 
   const route = useRoute();
   const headerIndexData = ref(null);
@@ -140,6 +152,17 @@
       lineTopNum: 0,
     },
   ];
+
+  const tagManageModalRef = ref(null);
+  const usedNameModalRef = ref(null);
+  const customerTransferModalRef = ref(null);
+
+  const transferPublicSeaModalRef = ref(null);
+
+  const handleTransferPublicSea = () => {
+    transferPublicSeaModalRef.value.showModal();
+  };
+
   const getImgUrl = (name) => {
     return new URL('/src/assets/images/page-detail-layout/customer/' + name + '.svg', import.meta.url).href;
   };
@@ -156,10 +179,16 @@
     {
       title: '标签管理',
       icon: getImgUrl('icon-biaoqianguanli'),
+      click(it) {
+        tagManageModalRef.value.showModal();
+      },
     },
     {
       title: '曾用名',
       icon: getImgUrl('icon-cengyongming'),
+      click(it) {
+        usedNameModalRef.value.showModal();
+      },
     },
   ];
 

src/views/customer-manage/customer-management/index.vue

@@ -10,22 +10,16 @@
         </template>
       </a-tab-pane>
     </a-tabs>
-    <bs-table v-bind="tableOptions">
-      <template #searchRight>
-        <div>
-          <a-button type="primary" @click="openCuleDrawer">
-            <span>服务商入库登记</span>
-          </a-button>
-        </div>
-      </template>
-    </bs-table>
+    <bs-table v-bind="tableOptions"></bs-table>
   </div>
 </template>
 <script setup lang="jsx">
-  import { ref, reactive } from 'vue';
+  import { ref, reactive, h } from 'vue';
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
   import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
   import { useRouter } from 'vue-router';
+  import { message } from 'ant-design-vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
 
   const router = useRouter();
 
@@ -105,14 +99,17 @@
             field: 'customerType',
             title: '客户类型',
             width: 200,
+            cellRender: {
+              name: 'CellDict',
+            },
           },
           {
             field: 'customerSource',
             title: '客户来源',
             width: 200,
             cellRender: {
-              name: "CellDict",
-            }
+              name: 'CellDict',
+            },
           },
           {
             field: 'belongRegion',
@@ -123,6 +120,9 @@
             field: 'customerGrade',
             title: '客户等级',
             width: 200,
+            cellRender: {
+              name: 'CellDict',
+            },
           },
           {
             field: '',
@@ -227,7 +227,22 @@
         total: 0,
         isFixed: false,
       },
-      toolbarConfig: {},
+      toolbarConfig: {
+        leftButtons: [
+          {
+            code: 'add',
+            title: '新客户登记',
+            props: {
+              type: 'primary',
+              icon: h(PlusOutlined),
+              disabled: false,
+              onClick(event) {
+                message.success('ok');
+              },
+            },
+          },
+        ],
+      },
     },
   });
 </script>