Initial commit

src/views/oa/customer/components/customer-info.vue

@@ -0,0 +1,160 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="75%"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="'客户详情'"
+    :maxable="true"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+  >
+    <a-form
+      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
+    >
+      <div class="base-form" style="margin-bottom: 20px">
+        <div class="card-head">
+          <a-avatar
+            :size="50"
+            style="margin-right: 10px"
+            :src="
+              customer.customerAvatar
+                ? FILE_SERVER + customer.customerAvatar
+                : ''
+            "
+          />
+          <h2>{{ customer.customerName }}</h2>
+        </div>
+        <a-descriptions bordered>
+          <a-descriptions-item label="客户名称">
+            {{ customer.customerName }}
+          </a-descriptions-item>
+          <a-descriptions-item label="客户标识">
+            {{ customer.customerCode }}
+          </a-descriptions-item>
+          <a-descriptions-item label="跟进状态">
+            <div color="blue" v-for="(d, index) in progress" :key="index">
+              <span v-if="d.value == customer.progress">{{ d.label }}</span>
+            </div>
+          </a-descriptions-item>
+          <a-descriptions-item label="座机电话">
+            {{ customer.customerPhone }}
+          </a-descriptions-item>
+          <a-descriptions-item label="联系人">
+            {{ customer.customerContacts }}
+          </a-descriptions-item>
+          <a-descriptions-item label="客户类型">
+            <div color="blue" v-for="(d, index) in customerType" :key="index">
+              <span v-if="d.value == customer.customerType">{{ d.value }}</span>
+            </div>
+          </a-descriptions-item>
+          <a-descriptions-item label="联系地址">
+            {{ customer.customerAddress }}
+          </a-descriptions-item>
+          <a-descriptions-item label="联系电话">
+            {{ customer.customerMobile }}
+          </a-descriptions-item>
+          <a-descriptions-item label="备注">
+            {{ customer.comments }}
+          </a-descriptions-item>
+        </a-descriptions>
+        <!--        <a-descriptions-->
+        <!--          title="其他信息"-->
+        <!--          :column="1"-->
+        <!--          bordered-->
+        <!--          style="margin-top: 30px"-->
+        <!--        >-->
+        <!--          <a-descriptions-item label="相关项目">-->
+        <!--            {{ customer.comments }}-->
+        <!--          </a-descriptions-item>-->
+        <!--        </a-descriptions>-->
+      </div>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import type { Customer } from '@/api/oa/customer/model';
+  import { FILE_SERVER } from '@/config/setting';
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Customer | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 用户信息
+  const customer = reactive<Customer>({
+    customerCode: '',
+    customerName: '',
+    customerType: undefined,
+    customerMobile: '',
+    customerAvatar: '',
+    customerPhone: '',
+    customerContacts: '',
+    customerAddress: '',
+    comments: '',
+    progress: '',
+    status: '0',
+    sortNumber: 100,
+    customerId: 0
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  const { resetFields } = useForm(customer);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 打开外部链接 */
+  // const openUrl = (record) => {
+  //   window.open(record.panel);
+  // };
+
+  /* 获取字典数据 */
+  const customerType = getDictionaryOptions('customerType');
+  const progress = getDictionaryOptions('customerFollowStatus');
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = false;
+          assignObject(customer, props.data);
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style lang="less">
+  .tab-pane {
+    min-height: 100px;
+  }
+  .card-head {
+    display: flex;
+    height: 40px;
+    align-items: center;
+    margin-bottom: 30px;
+  }
+</style>