update

src/common/components/commonDes/commonDes.vue

@@ -0,0 +1,51 @@
+<template>
+  <a-descriptions :column="column"
+                  :bordered="bordered"
+                  class="commom-des">
+    <a-descriptions-item v-for="(item, i) in list"
+                         :key="i + 'des'"
+                         :label="item.label">
+      {{item.value}}
+    </a-descriptions-item>
+    <a-descriptions-item v-if="slotDesName"
+                         :label="slotDesName">
+      <slot></slot>
+    </a-descriptions-item>
+  </a-descriptions>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { DescriptionsList } from './interface';
+
+export default defineComponent({
+    name: 'des-list',
+    components: {},
+    props: {
+        column: {
+            // 一行的 DescriptionItems 数量
+            type: Number,
+            default: 2,
+        },
+        bordered: {
+            // 是否展示边框
+            type: Boolean,
+            default: false,
+        },
+        slotDesName: {
+            // 使用插槽的时候，DescriptionItems 的内容描述
+            type: String,
+            default: '',
+        },
+        list: {
+            type: Array as PropType<DescriptionsList[]>,
+            default: [],
+        },
+    },
+    setup() {},
+});
+</script>
+
+<style lang="less">
+.commom-des {
+}
+</style>;

src/common/components/commonDes/desList.ts

@@ -0,0 +1,13 @@
+import { ref } from "vue";
+import { DescriptionsList } from "./interface";
+
+/**
+ * 处理描述列表
+ */
+export function handleDesList() {
+    const desList = ref<DescriptionsList[]>([])
+    function getDesList(arr: DescriptionsList[]) {
+        desList.value = arr
+    }
+    return { desList, getDesList }
+}

src/common/components/commonDes/index.ts

@@ -0,0 +1,7 @@
+import Des from './commonDes.vue';
+import { handleDesList } from './desList';
+import { DescriptionsList } from './interface';
+
+export { Des, handleDesList };
+export type { DescriptionsList };
+

src/common/components/commonDes/interface.ts

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

src/views/information/account_info/compoments/detail-business/index.vue

@@ -14,6 +14,20 @@
     </template>
     <a-form class="inlineForm"
             :model="formState">
+      <Des :list="desList"
+           :slotDesName="'账户角色'">
+        <a-checkbox-group class="commonCheckboxGroup"
+                          v-model:value="formState.roleids">
+          <a-row>
+            <a-col :span="12">
+              <a-checkbox :value="22">业务员</a-checkbox>
+            </a-col>
+            <a-col :span="12">
+              <a-checkbox :value="23">跟单员</a-checkbox>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+      </Des>
       <a-row :gutter="24">
         <a-col :span="12">
           <a-form-item label="登录账号"
@@ -55,15 +69,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, watchEffect } from 'vue';
+import { defineComponent, PropType, ref, watchEffect } from 'vue';
 import { closeModal } from '@/common/setup/modal/index';
 import { mergeTwoObj } from '@/utils/objHandle';
 import { handleBusinessForm } from '../setup';
 import { ErmcpLoginUser } from '@/services/go/ermcp/account/interface';
+import { Des, handleDesList } from '@/common/components/commonDes';
 
 export default defineComponent({
     name: 'business-detail',
-    components: {},
+    components: {
+        Des,
+    },
     props: {
         selectedData: {
             type: Object as PropType<ErmcpLoginUser>,
@@ -73,8 +90,15 @@ export default defineComponent({
     setup(props) {
         const { visible, cancel } = closeModal('detail');
         const { formState } = handleBusinessForm();
+        const { desList, getDesList } = handleDesList();
         watchEffect(() => {
             if (visible.value) {
+                const data = props.selectedData;
+                getDesList([
+                    { label: '登录账号', value: data.logincode },
+                    { label: '账户名称', value: data.accountname },
+                    { label: '手机号码', value: data.mobile },
+                ]);
                 mergeTwoObj(formState, props.selectedData);
                 // roletype	:string;//角色类型(逗号隔开,如22,23), 22:业务员 23:跟单员 24:交易员
                 formState.roleids = props.selectedData.roletype.split(',').map((e) => +e);
@@ -84,6 +108,7 @@ export default defineComponent({
             visible,
             cancel,
             formState,
+            desList,
             maskClosableFlag: false,
         };
     },

src/views/information/account_info/compoments/detail-futures/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 交易账号详情-->
+  <!-- 账号详情-->
   <a-modal class="add-custom custom-detail"
            title="账号详情"
            v-model:visible="visible"