注销业务账户

src/assets/styles/mixin.less

@@ -1229,6 +1229,7 @@ input:-internal-autofill-selected {
     }
 }
 .ant-checkbox-group.commonCheckboxGroup {
+    width: 100%;
     .ant-checkbox-wrapper {
         color: @m-white0;
         font-size: 14px;

src/common/components/commonDes/commonDes.vue

@@ -58,6 +58,7 @@ export default defineComponent({
         }
     }
     .ant-descriptions-item-content {
+        width: calc(100% - 146px);
         color: @m-grey1;
     }
 }

src/views/information/account_info/compoments/cancel-trader/index.vue

@@ -19,85 +19,26 @@
                 @click="submit">注销
       </a-button>
     </template>
-    <a-form class="inlineForm"
-            :model="formState">
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <a-form-item label="所属用户"
-                       name="">
-            <span class="white">{{firstBtnData.rolename}}</span>
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="账户名称"
-                       name="accountname">
-            <a-input class="dialogInput"
-                     readonly
-                     style="width: 200px"
-                     v-model:value="formState.accountname"
-                     placeholder="请输入账户名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="登录账号"
-                       name="logincode">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     readonly
-                     v-model:value="formState.logincode"
-                     placeholder="请输入登录账号" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="手机号码"
-                       name="mobile">
-            <a-input class="dialogInput"
-                     v-model:value="formState.mobile"
-                     style="width: 200px"
-                     readonly
-                     placeholder="请输入手机号码" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="授权期货账户"
-                       class="checkboxGroupItem"
-                       name="logintaaccounts">
-            <a-checkbox-group class="commonCheckboxGroup"
-                              v-model:value="formState.logintaaccounts">
-              <a-row>
-                <a-col :span="12"
-                       v-for="(item, index) in selectedData.acclist"
-                       :key="index">
-                  <a-checkbox disabled
-                              :value="item.accountid">
-                    {{item.accountname}}/{{item.accountid}}
-                  </a-checkbox>
-                </a-col>
-              </a-row>
-            </a-checkbox-group>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
+    <Detail :firstBtnData="firstBtnData"
+            :selectedData="selectedData" />
   </a-modal>
 </template>
 
 <script lang="ts">
 import { closeModal } from '@/common/setup/modal/index';
-import { defineComponent, ref, PropType, watchEffect } from 'vue';
+import { defineComponent, ref, PropType } from 'vue';
 import { Modal } from 'ant-design-vue';
 import { LoginaccountOperateReq } from '@/services/proto/accountinfo/interface';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { loginAccountOperate } from '@/services/proto/accountinfo';
-import { ErmcpLoginUser, ErmcpLoginUserEx, ErmcpTaAccount } from '@/services/go/ermcp/account/interface';
-import { handleBusinessForm } from '../setup';
-import { mergeTwoObj } from '@/utils/objHandle';
+import { ErmcpLoginUser, ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
+import Detail from '../detail-commom-trader/index.vue';
 
 export default defineComponent({
     name: 'account_info_trade_btn_child_logout',
-    components: {},
+    components: { Detail },
     props: {
-      firstBtnData: {
+        firstBtnData: {
             type: Object as PropType<ErmcpLoginUserEx>,
             default: {},
         },
@@ -105,28 +46,11 @@ export default defineComponent({
             type: Object as PropType<ErmcpLoginUser>,
             default: {},
         },
-        tableList: {
-            type: Array as PropType<ErmcpLoginUserEx[]>,
-            default: [],
-        },
-        accountList: {
-            default: [],
-            type: Object as PropType<ErmcpTaAccount[]>,
-        },
     },
     setup(props, context) {
         // 控制关闭弹窗
         const { visible, cancel } = closeModal('account_info_trade_btn_child_logout');
         const loading = ref<boolean>(false);
-        const { formState } = handleBusinessForm();
-        watchEffect(() => {
-            if (visible.value && props.selectedData) {
-                const { selectedData } = props;
-                mergeTwoObj(formState, selectedData);
-                formState.logintaaccounts = selectedData.acclist?.map((e) => e.accountid);
-                formState.accountname = props.selectedData.loginname;
-            }
-        });
         function submit() {
             Modal.confirm({
                 title: '是否确认注销该账户',
@@ -149,7 +73,6 @@ export default defineComponent({
         }
 
         return {
-            formState,
             visible,
             cancel,
             submit,

src/views/information/account_info/compoments/detail-commom-trader/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <!-- 账号详情-->
+  <Des :list="desList"
+       :slotDesName="'授权期货账户'">
+    <a-checkbox-group class="commonCheckboxGroup"
+                      v-model:value="logintaaccounts">
+      <a-row>
+        <a-col :span="12"
+               v-for="(item, index) in selectedData.acclist"
+               :key="index"
+               :class="[index > 1 ? 'mt10' : '']">
+          <a-checkbox :value="item.accountid"
+                      disabled>
+            {{item.accountname}}/{{item.accountid}}
+          </a-checkbox>
+        </a-col>
+      </a-row>
+    </a-checkbox-group>
+  </Des>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watchEffect } from 'vue';
+import { ErmcpLoginUser, ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
+import { Des, handleDesList } from '@/common/components/commonDes';
+import { handleRoles } from '../setup';
+
+export default defineComponent({
+    name: 'business-comom-detail',
+    components: {
+        Des,
+    },
+    props: {
+        firstBtnData: {
+            type: Object as PropType<ErmcpLoginUserEx>,
+            default: {},
+        },
+        selectedData: {
+            type: Object as PropType<ErmcpLoginUser>,
+            default: {},
+        },
+    },
+    setup(props) {
+        const { desList, getDesList } = handleDesList();
+        // 账户角色
+        const logintaaccounts = ref<number[]>([]);
+        watchEffect(() => {
+            if (props.selectedData) {
+                const data = props.selectedData;
+                getDesList([
+                    { label: '所属用户', value: props.firstBtnData.rolename },
+                    { label: '账户名称', value: data.loginname },
+                    { label: '登录账号', value: data.logincode },
+                    { label: '手机号码', value: data.mobile },
+                ]);
+                logintaaccounts.value = data.acclist?.map((e) => e.accountid);
+            }
+        });
+        return {
+            logintaaccounts,
+            desList,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+</style>;

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

@@ -12,82 +12,22 @@
                 type="primary"
                 @click="cancel">关闭</a-button>
     </template>
-    <a-form class="inlineForm"
-            :model="formState">
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <a-form-item label="所属用户"
-                       name="">
-            <span class="white">{{firstBtnData.rolename}}</span>
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="账户名称"
-                       name="logincode">
-            <a-input class="dialogInput"
-                     readonly
-                     style="width: 200px"
-                     v-model:value="formState.accountname"
-                     placeholder="请输入账户名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="登录账号"
-                       name="accountname">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     readonly
-                     v-model:value="formState.logincode"
-                     placeholder="请输入登录账号" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="手机号码"
-                       name="mobile">
-            <a-input class="dialogInput"
-                     v-model:value="formState.mobile"
-                     style="width: 200px"
-                     readonly
-                     placeholder="请输入手机号码" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="授权期货账户"
-                       class="checkboxGroupItem"
-                       name="logintaaccounts">
-            <a-checkbox-group class="commonCheckboxGroup"
-                              v-model:value="formState.logintaaccounts">
-              <a-row>
-                <a-col :span="12"
-                       v-for="(item, index) in selectedData.acclist"
-                       :key="index"
-                       :class="[index > 1 ? 'mt10' : '']">
-                  <a-checkbox :value="item.accountid"
-                              disabled>
-                    {{item.accountname}}/{{item.accountid}}
-                  </a-checkbox>
-                </a-col>
-              </a-row>
-            </a-checkbox-group>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
+    <Detail :firstBtnData="firstBtnData"
+            :selectedData="selectedData" />
   </a-modal>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, watchEffect } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { closeModal } from '@/common/setup/modal/index';
-import { mergeTwoObj } from '@/utils/objHandle';
-import { handleBusinessForm } from '../setup';
-import { ErmcpLoginUser, ErmcpLoginUserEx, ErmcpTaAccount } from '@/services/go/ermcp/account/interface';
+import { ErmcpLoginUser, ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
+import Detail from '../detail-commom-trader/index.vue';
 
 export default defineComponent({
     name: 'trader-detail',
-    components: {},
+    components: { Detail },
     props: {
-      firstBtnData: {
+        firstBtnData: {
             type: Object as PropType<ErmcpLoginUserEx>,
             default: {},
         },
@@ -95,30 +35,12 @@ export default defineComponent({
             type: Object as PropType<ErmcpLoginUser>,
             default: {},
         },
-        tableList: {
-            type: Array as PropType<ErmcpLoginUserEx[]>,
-            default: [],
-        },
-        accountList: {
-            default: [],
-            type: Object as PropType<ErmcpTaAccount[]>,
-        },
     },
     setup(props) {
         const { visible, cancel } = closeModal('detail');
-        const { formState } = handleBusinessForm();
-        watchEffect(() => {
-                       if (visible.value && props.selectedData) {
-                const { selectedData } = props;
-                mergeTwoObj(formState, selectedData);
-                formState.logintaaccounts = selectedData.acclist?.map((e) => e.accountid);
-                formState.accountname = props.selectedData.loginname;
-            }
-        });
         return {
             visible,
             cancel,
-            formState,
             maskClosableFlag: false,
         };
     },

src/views/information/account_info/compoments/locked-trader/index.vue

@@ -13,83 +13,24 @@
                 :loading="loading"
                 @click="submit">锁定</a-button>
     </template>
-    <a-form class="inlineForm"
-            :model="formState">
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <a-form-item label="所属用户"
-                       name="">
-            <span class="white">{{firstBtnData.rolename}}</span>
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="账户名称"
-                       name="accountname">
-            <a-input class="dialogInput"
-                     readonly
-                     style="width: 200px"
-                     v-model:value="formState.accountname"
-                     placeholder="请输入账户名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="登录账号"
-                       name="logincode">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     readonly
-                     v-model:value="formState.logincode"
-                     placeholder="请输入登录账号" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="手机号码"
-                       name="mobile">
-            <a-input class="dialogInput"
-                     v-model:value="formState.mobile"
-                     style="width: 200px"
-                     readonly
-                     placeholder="请输入手机号码" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="授权期货账户"
-                       class="checkboxGroupItem"
-                       name="logintaaccounts">
-            <a-checkbox-group class="commonCheckboxGroup"
-                              v-model:value="formState.logintaaccounts">
-              <a-row>
-                <a-col :span="12"
-                       v-for="(item, index) in selectedData.acclist"
-                       :key="index">
-                  <a-checkbox disabled
-                              :value="item.accountid">
-                    {{item.accountname}}/{{item.accountid}}
-                  </a-checkbox>
-                </a-col>
-              </a-row>
-            </a-checkbox-group>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
+    <Detail :firstBtnData="firstBtnData"
+            :selectedData="selectedData" />
   </a-modal>
 </template>
 
 <script lang="ts">
 import { closeModal } from '@/common/setup/modal/index';
-import { defineComponent, ref, PropType, watchEffect } from 'vue';
+import { defineComponent, ref, PropType } from 'vue';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { loginAccountOperate } from '@/services/proto/accountinfo';
 import { LoginaccountOperateReq } from '@/services/proto/accountinfo/interface';
-import { ErmcpLoginUser, ErmcpLoginUserEx, ErmcpTaAccount } from '@/services/go/ermcp/account/interface';
+import { ErmcpLoginUser, ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
 import { Modal } from 'ant-design-vue';
-import { mergeTwoObj } from '@/utils/objHandle';
-import { handleBusinessForm, } from '../setup';
+import Detail from '../detail-commom-trader/index.vue';
 
 export default defineComponent({
     name: 'account_info_trade_btn_locked',
-    components: {},
+    components: { Detail },
     props: {
         firstBtnData: {
             type: Object as PropType<ErmcpLoginUserEx>,
@@ -99,28 +40,11 @@ export default defineComponent({
             type: Object as PropType<ErmcpLoginUser>,
             default: {},
         },
-        tableList: {
-            type: Array as PropType<ErmcpLoginUserEx[]>,
-            default: [],
-        },
-        accountList: {
-            default: [],
-            type: Object as PropType<ErmcpTaAccount[]>,
-        },
     },
     setup(props, context) {
         // 控制关闭弹窗
         const { visible, cancel } = closeModal('account_info_trade_btn_child_locked');
         const loading = ref<boolean>(false);
-        const { formState } = handleBusinessForm();
-        watchEffect(() => {
-            if (visible.value && props.selectedData) {
-                const { selectedData } = props;
-                mergeTwoObj(formState, selectedData);
-                formState.logintaaccounts = selectedData.acclist?.map((e) => e.accountid);
-                formState.accountname = props.selectedData.loginname;
-            }
-        });
         function submit() {
             Modal.confirm({
                 title: '是否确认锁定该账户',
@@ -142,7 +66,6 @@ export default defineComponent({
             });
         }
         return {
-            formState,
             visible,
             cancel,
             submit,

src/views/information/account_info/compoments/unlocked-trader/index.vue

@@ -13,85 +13,26 @@
                 :loading="loading"
                 @click="submit">解锁</a-button>
     </template>
-    <a-form class="inlineForm"
-            :model="formState">
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <a-form-item label="所属用户"
-                       name="">
-            <span class="white">{{firstBtnData.rolename}}</span>
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="账户名称"
-                       name="accountname">
-            <a-input class="dialogInput"
-                     readonly
-                     style="width: 200px"
-                     v-model:value="formState.accountname"
-                     placeholder="请输入账户名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="登录账号"
-                       name="logincode">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     readonly
-                     v-model:value="formState.logincode"
-                     placeholder="请输入登录账号" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="手机号码"
-                       name="mobile">
-            <a-input class="dialogInput"
-                     v-model:value="formState.mobile"
-                     style="width: 200px"
-                     readonly
-                     placeholder="请输入手机号码" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="授权期货账户"
-                       class="checkboxGroupItem"
-                       name="logintaaccounts">
-            <a-checkbox-group class="commonCheckboxGroup"
-                              v-model:value="formState.logintaaccounts">
-              <a-row>
-                <a-col :span="12"
-                       v-for="(item, index) in selectedData.acclist"
-                       :key="index">
-                  <a-checkbox disabled
-                              :value="item.accountid">
-                    {{item.accountname}}/{{item.accountid}}
-                  </a-checkbox>
-                </a-col>
-              </a-row>
-            </a-checkbox-group>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
+    <Detail :firstBtnData="firstBtnData"
+            :selectedData="selectedData" />
   </a-modal>
 </template>
 
 <script lang="ts">
 import { closeModal } from '@/common/setup/modal/index';
-import { defineComponent, ref, PropType, watchEffect } from 'vue';
+import { defineComponent, ref, PropType } from 'vue';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { loginAccountOperate } from '@/services/proto/accountinfo';
 import { LoginaccountOperateReq } from '@/services/proto/accountinfo/interface';
-import { ErmcpLoginUser, ErmcpLoginUserEx, ErmcpTaAccount } from '@/services/go/ermcp/account/interface';
+import { ErmcpLoginUser, ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
 import { Modal } from 'ant-design-vue';
-import { mergeTwoObj } from '@/utils/objHandle';
-import { handleBusinessForm, } from '../setup';
+import Detail from '../detail-commom-trader/index.vue';
 
 export default defineComponent({
     name: 'account_info_trade_btn_child_unlocked',
-    components: {},
+    components: { Detail },
     props: {
-      firstBtnData: {
+        firstBtnData: {
             type: Object as PropType<ErmcpLoginUserEx>,
             default: {},
         },
@@ -99,28 +40,11 @@ export default defineComponent({
             type: Object as PropType<ErmcpLoginUser>,
             default: {},
         },
-        tableList: {
-            type: Array as PropType<ErmcpLoginUserEx[]>,
-            default: [],
-        },
-        accountList: {
-            default: [],
-            type: Object as PropType<ErmcpTaAccount[]>,
-        },
     },
     setup(props, context) {
         // 控制关闭弹窗
         const { visible, cancel } = closeModal('account_info_trade_btn_child_unlocked');
         const loading = ref<boolean>(false);
-        const { formState } = handleBusinessForm();
-        watchEffect(() => {
-            if (visible.value && props.selectedData) {
-                const { selectedData } = props;
-                mergeTwoObj(formState, selectedData);
-                formState.logintaaccounts = selectedData.acclist?.map((e) => e.accountid);
-                formState.accountname = props.selectedData.loginname;
-            }
-        });
         function submit() {
             Modal.confirm({
                 title: '是否确认解锁该账户',
@@ -142,7 +66,6 @@ export default defineComponent({
             });
         }
         return {
-            formState,
             visible,
             cancel,
             submit,