修好客户资料附件

src/common/components/commonDes/commonDes.vue

@@ -5,7 +5,8 @@
     <a-descriptions-item v-for="(item, i) in list"
                          :key="i + 'des'"
                          :label="item.label">
-      <span class="white">{{item.value}}</span>
+      <span :class="item.className ? item.className : 'white'"
+            @click="onClick(item)">{{item.value}}</span>
     </a-descriptions-item>
     <a-descriptions-item v-if="slotDesName"
                          :label="slotDesName">
@@ -41,7 +42,12 @@ export default defineComponent({
             default: [],
         },
     },
-    setup() {},
+    setup(props, context) {
+        function onClick(value: DescriptionsList) {
+            context.emit('onClick', value);
+        }
+        return { onClick };
+    },
 });
 </script>
 

src/common/components/commonDes/interface.ts

@@ -1,4 +1,5 @@
 export interface DescriptionsList {
     label: string,
     value: string | number,
+    className?: string,
 }

src/common/setup/upload/index.ts

@@ -24,7 +24,8 @@ function getImg(imgURl: string) {
 function getImgName(value: string) {
     let result = '--'
     if (value) {
-        const str = JSON.parse(value).replace(/\"/g, "");
+        // const str = JSON.parse(value).replace(/\"/g, "");
+        const str = value.replace(/\"/g, "");
         const lastIndex = str.lastIndexOf('/') + 1;
         result = str.slice(lastIndex, str.length)
     }
@@ -112,9 +113,20 @@ export function handlePreviewImg() {
     async function previewImg(file: FileItem | string) {
         if (typeof file === 'string') {
             if (file && file !== '--') {
-                const str = JSON.parse(file).replace(/\"/g, "")
-                previewImage.value = getImg(str)
-                previewVisible.value = true;
+                const fn = (val: string) => {
+                    const temp = val.replace(/\"/g, "")
+                    previewImage.value = getImg(temp)
+                    previewVisible.value = true;
+                }
+                // 处理服务的脏数据，时而反而JSON格式，时而返回string格式，
+                // fuck
+                try {
+                    const str = JSON.parse(file)
+                    fn(str)
+                } catch (e) {
+                    fn(file)
+                }
+
             }
         } else {
             if (!file.url && !file.preview) {

src/views/information/custom/compoments/common-detail/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <Des :list="desList"
+         @onClick="imgClick" />
+    <a-modal :visible="previewVisible"
+             :footer="null"
+             @cancel="cancelImg">
+      <img alt="预览附件"
+           style="width: 100%"
+           :src="previewImage" />
+    </a-modal>
+  </div>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, watchEffect } from 'vue';
+import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
+import { getStatusName } from '@/common/constants/enumsName';
+import { formatValue } from '@/common/methods';
+import { getCardTypeEnumItemName } from '@/common/constants/enumsName';
+import { Des, DescriptionsList, handleDesList } from '@/common/components/commonDes';
+import { handlePreviewImg } from '@/common/setup/upload';
+
+export default defineComponent({
+    name: 'custom-detail-desc',
+    components: { Des },
+    props: {
+        selectedRow: {
+            type: Object as PropType<QueryCustomInfoType>,
+            default: {},
+        },
+    },
+    setup(props) {
+        function isPersonal() {
+            return props.selectedRow.userinfotype === '1';
+        }
+        const { desList, getDesList } = handleDesList();
+        // 预览附件
+        const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
+        //
+        function imgClick({ label }: DescriptionsList) {
+            const { attachment1, cardfrontphotourl, cardbackphotourl } = props.selectedRow;
+            switch (label) {
+                case '营业执照':
+                    previewImg(attachment1);
+                    break;
+                case '身份证正面照':
+                    previewImg(cardfrontphotourl);
+                    break;
+                case '身份证反面照':
+                    previewImg(cardbackphotourl);
+                    break;
+            }
+        }
+        watchEffect(() => {
+            if (props.selectedRow.customername) {
+                const data = props.selectedRow;
+                // 个人
+                const person = [
+                    { label: '客户类型', value: '个人' },
+                    { label: '姓名', value: data.customername },
+                    { label: '身份证号码', value: formatValue(data.cardnum) },
+                    { label: '手机号码', value: formatValue(data.mobile) },
+                    { label: '身份证正面照', value: formatValue(getImgName(data.cardfrontphotourl)), className: 'blue' },
+                    { label: '身份证反面照', value: formatValue(getImgName(data.cardbackphotourl)), className: 'blue'  },
+                    { label: '邮箱', value: formatValue(data.email) },
+                    { label: '联系电话', value: formatValue(data.telphone) },
+                    { label: '通讯地址', value: formatValue(data.address) },
+                    { label: '备注', value: formatValue(data.remark) },
+                ];
+                // 企业
+                const company = [
+                    { label: '客户类型', value: '企业' },
+                    { label: '企业名称', value: data.customername },
+                    { label: '企业简称', value: formatValue(data.nickname) },
+                    { label: '证件类型', value: getCardTypeEnumItemName(data.cardtype) },
+                    { label: '法定代表人', value: formatValue(data.legalpersonname) },
+                    { label: '证件号码', value: formatValue(data.cardnum) },
+                    { label: '纳税人识别号', value: formatValue(data.taxpayernum) },
+                    { label: '营业执照', value: formatValue(getImgName(data.attachment1)), className: 'blue'  },
+                    { label: '联系人', value: formatValue(data.contactname) },
+                    { label: '联系人手机号', value: formatValue(data.mobile) },
+                    { label: '联系电话', value: formatValue(data.telphone) },
+                    { label: '状态', value: getStatusName(data.status), className: 'green' },
+                    { label: '通讯地址', value: formatValue(data.address) },
+                    { label: '备注', value: formatValue(data.remark) },
+                ];
+                getDesList(isPersonal() ? person : company);
+            }
+        });
+        return {
+            desList,
+            previewVisible,
+            previewImage,
+            cancelImg,
+            imgClick,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.custom-detail {
+    .ant-form.inlineForm {
+        margin-top: 20px;
+    }
+    .upload {
+        .look {
+            margin-left: 0;
+        }
+    }
+}
+</style>;

src/views/information/custom/compoments/delete/index.vue

@@ -13,157 +13,7 @@
                 @click="submit">删除客户资料
       </a-button>
     </template>
-      <a-form class="inlineForm"
-              :form="form"
-              @submit="handleSearch">
-          <a-row :gutter="24">
-              <a-col :span="12">
-                  <a-form-item label="客户类型">
-                      <span class="white">{{ selectedRow.userinfotype === '2' ? '企业' : '个人' }}</span>
-                  </a-form-item>
-              </a-col>
-              <a-col :span="12">
-                  <a-form-item label="企业名称"
-                               v-if="selectedRow.userinfotype === '2'">
-                      <span class="white">{{ formatValue(selectedRow.customername)}}</span>
-                  </a-form-item>
-                  <a-form-item label="姓名"
-                               v-if="selectedRow.userinfotype !== '2'">
-                      <span class="white">{{ formatValue(selectedRow.customername)}}</span>
-                  </a-form-item>
-              </a-col>
-          </a-row>
-          <template v-if="selectedRow.userinfotype === '2'">
-              <a-row :gutter="24">
-                  <a-col :span="12">
-                      <a-form-item label="企业简称">
-                          <span class="white">{{ formatValue(selectedRow.nickname) }}</span>
-                      </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                      <a-form-item label="证件类型">
-                          <span class="white">{{ getCardTypeEnumItemName(selectedRow.cardtype) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="12">
-                      <a-form-item label="法定代表人">
-                          <span class="white">{{ formatValue(selectedRow.legalpersonname) }}</span>
-                      </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                      <a-form-item label="证件号码">
-                          <span class="white">{{ formatValue(selectedRow.cardnum) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="12">
-                      <a-form-item label="纳税人识别号">
-                          <span class="white">{{ formatValue(selectedRow.taxpayernum) }}</span>
-                      </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                      <a-form-item label="营业执照">
-                          <div class="upload">
-                              <div class="look">查看附件</div>
-                          </div>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="12">
-                      <a-form-item label="联系人">
-                          <span class="white">{{ formatValue(selectedRow.contactname) }}</span>
-                      </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                      <a-form-item label="联系人手机号">
-                          <span class="white">{{ formatValue(selectedRow.mobile) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="12">
-                      <a-form-item label="联系电话">
-                          <span class="white">{{ formatValue(selectedRow.telphone) }}</span>
-                      </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                      <a-form-item label="状态">
-                          <span class="green">{{ formatValue(getStatusName(selectedRow.status)) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="24">
-                      <a-form-item label="通讯地址">
-                          <span class="white">{{ formatValue(selectedRow.address) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="24">
-                      <a-form-item label="备注">
-                          <span class="white">{{ formatValue(selectedRow.remark) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-          </template>
-          <template v-else>
-              <a-row :gutter="24">
-                  <a-col :span="12">
-                      <a-form-item label="身份证号码">
-                          <span class="white">{{ formatValue(selectedRow.cardnum) }}</span>
-                      </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                      <a-form-item label="手机号码">
-                          <span class="white">{{ formatValue(selectedRow.mobile) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="12">
-                      <a-form-item label="身份证正面照">
-                          <span class="white">{{ formatValue(selectedRow.cardfrontphotourl) }}</span>
-                      </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                      <a-form-item label="邮箱">
-                          <span class="white">{{ formatValue(selectedRow.email) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="12">
-                      <a-form-item label="身份证反面照">
-                          <span class="white">{{ formatValue(selectedRow.cardbackphotourl) }}</span>
-                      </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                      <a-form-item label="联系电话">
-                          <span class="white">{{ formatValue(selectedRow.telphone) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="24">
-                      <a-form-item label="通讯地址">
-                          <span class="white">{{ formatValue(selectedRow.address) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                  <a-col :span="24">
-                      <a-form-item label="备注">
-                          <span class="white">{{ formatValue(selectedRow.remark) }}</span>
-                      </a-form-item>
-                  </a-col>
-              </a-row>
-          </template>
-      </a-form>
+    <Detail :selectedRow="selectedRow" />
   </a-modal>
 </template>
 
@@ -171,15 +21,14 @@
 import { defineComponent, PropType, ref } from 'vue';
 import { closeModal } from '@/common/setup/modal/index';
 import { DeleteUserReq, QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
-import { formatValue } from '@/common/methods';
-import {getCardTypeEnumItemName, getStatusName} from '@/common/constants/enumsName';
 import { Modal } from 'ant-design-vue';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { QueryDeleteUserInfoApply } from '@/services/go/ermcp/customInfo';
+import Detail from '../common-detail/index.vue';
 
 export default defineComponent({
     name: 'recover-custom',
-    components: {},
+    components: { Detail },
     props: {
         selectedRow: {
             type: Object as PropType<QueryCustomInfoType>,
@@ -213,9 +62,6 @@ export default defineComponent({
             cancel,
             submit,
             loading,
-            formatValue,
-            getStatusName,
-            getCardTypeEnumItemName,
         };
     },
 });

src/views/information/custom/compoments/detail/index.vue

@@ -11,174 +11,21 @@
       <a-button key="submit"
                 type="primary"
                 :loading="loading.loading"
-                @click="submit">关闭</a-button>
+                @click="cancel">关闭</a-button>
     </template>
-    <a-form class="inlineForm"
-            :form="form"
-            @submit="handleSearch">
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <a-form-item label="客户类型">
-            <span class="white">{{ selectedRow.userinfotype === '2' ? '企业' : '个人' }}</span>
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="企业名称"
-                       v-if="selectedRow.userinfotype === '2'">
-            <span class="white">{{ formatValue(selectedRow.customername)}}</span>
-          </a-form-item>
-          <a-form-item label="姓名"
-                       v-if="selectedRow.userinfotype !== '2'">
-            <span class="white">{{ formatValue(selectedRow.customername)}}</span>
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <template v-if="selectedRow.userinfotype === '2'">
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="企业简称">
-              <span class="white">{{ formatValue(selectedRow.nickname) }}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="证件类型">
-              <span class="white">{{ getCardTypeEnumItemName(selectedRow.cardtype) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="法定代表人">
-              <span class="white">{{ formatValue(selectedRow.legalpersonname) }}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="证件号码">
-              <span class="white">{{ formatValue(selectedRow.cardnum) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="纳税人识别号">
-              <span class="white">{{ formatValue(selectedRow.taxpayernum) }}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="营业执照">
-              <div class="upload">
-                <div class="look">查看附件</div>
-              </div>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="联系人">
-              <span class="white">{{ formatValue(selectedRow.contactname) }}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="联系人手机号">
-              <span class="white">{{ formatValue(selectedRow.mobile) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="联系电话">
-              <span class="white">{{ formatValue(selectedRow.telphone) }}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="状态">
-              <span class="green">{{ formatValue(getStatusName(selectedRow.status)) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="24">
-            <a-form-item label="通讯地址">
-              <span class="white">{{ formatValue(selectedRow.address) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="24">
-            <a-form-item label="备注">
-              <span class="white">{{ formatValue(selectedRow.remark) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </template>
-      <template v-else>
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="身份证号码">
-              <span class="white">{{ formatValue(selectedRow.cardnum) }}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="手机号码">
-              <span class="white">{{ formatValue(selectedRow.mobile) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="身份证正面照">
-              <span class="white">{{ formatValue(selectedRow.cardfrontphotourl) }}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="邮箱">
-              <span class="white">{{ formatValue(selectedRow.email) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="身份证反面照">
-              <span class="white">{{ formatValue(selectedRow.cardbackphotourl) }}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="联系电话">
-              <span class="white">{{ formatValue(selectedRow.telphone) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="24">
-            <a-form-item label="通讯地址">
-              <span class="white">{{ formatValue(selectedRow.address) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="24">
-            <a-form-item label="备注">
-              <span class="white">{{ formatValue(selectedRow.remark) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </template>
-    </a-form>
+    <Detail :selectedRow="selectedRow" />
   </a-modal>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, reactive, ref, watchEffect } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 import { closeModal } from '@/common/setup/modal/index';
 import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
-import { mergeObj } from '@/utils/objHandle';
-import { getStatusName } from '@/common/constants/enumsName';
-import { formatValue, formatTime } from '@/common/methods';
-import { getCardTypeEnumItemName } from '@/common/constants/enumsName';
+import Detail from '../common-detail/index.vue';
 
 export default defineComponent({
     name: 'custom-detail',
-    components: {},
+    components: { Detail },
     props: {
         selectedRow: {
             type: Object as PropType<QueryCustomInfoType>,
@@ -189,20 +36,11 @@ export default defineComponent({
         const { visible, cancel } = closeModal('detail');
         const loading = ref<boolean>(false);
         const maskClosableFlag = ref<boolean>(false);
-        console.log(props)
-        function submit() {
-            console.log(props)
-            cancel()
-        }
         return {
             visible,
             cancel,
-            submit,
             loading,
-            formatValue,
-            getStatusName,
             maskClosableFlag,
-            getCardTypeEnumItemName,
         };
     },
 });