修改

src/views/information/account_info/compoments/modify-arbitrage/index.vue

@@ -0,0 +1,242 @@
+<template>
+    <!-- 修改套利 -->
+  <a-modal class="commonModal add-arbitrage"
+           title="修改"
+           v-model:visible="visible"
+           @cancel="cancel"
+           centered
+           :maskClosable="false"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+    <a-form class="inlineForm"
+            ref="formRef"
+            :model="formState"
+            :rules="rules">
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-form-item label="业务类型"
+                       name="">
+            <span class="white">套利</span>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="现货品种"
+                       class="checkboxGroupItem"
+                       name="">
+            <a-checkbox-group class="commonCheckboxGroup">
+              <a-row>
+                <a-col>
+                  <a-checkbox value="A">钢管</a-checkbox>
+                </a-col>
+                <a-col>
+                  <a-checkbox value="B">铁矿石</a-checkbox>
+                </a-col>
+                <a-col>
+                  <a-checkbox value="C">大豆</a-checkbox>
+                </a-col>
+                <a-col>
+                  <a-checkbox value="D">玉米</a-checkbox>
+                </a-col>
+                <a-col>
+                  <a-checkbox value="E">棉花</a-checkbox>
+                </a-col>
+                <a-col>
+                  <a-checkbox value="F">铜板</a-checkbox>
+                </a-col>
+              </a-row>
+              <a-row>
+                <a-col>
+                  <a-checkbox value="G">铜块</a-checkbox>
+                </a-col>
+                <a-col>
+                  <a-checkbox value="H">螺纹钢</a-checkbox>
+                </a-col>
+              </a-row>
+            </a-checkbox-group>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="期货账户"
+                       class="checkboxGroupItem"
+                       name="">
+            <a-checkbox-group class="commonCheckboxGroup autoWidth">
+              <a-row>
+                <a-col :span="12">
+                  <a-checkbox value="A">期货母账户/25000000010</a-checkbox>
+                </a-col>
+                <a-col :span="12">
+                  <a-checkbox value="B">铜套保专用账户/25000000011</a-checkbox>
+                </a-col>
+              </a-row>
+              <a-row>
+                <a-col :span="12">
+                  <a-checkbox value="C">银套保专用账户/25000000012</a-checkbox>
+                </a-col>
+                <a-col :span="12">
+                  <a-checkbox value="D">铁矿石套保专用账户/25000000013</a-checkbox>
+                </a-col>
+              </a-row>
+            </a-checkbox-group>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { closeModal } from '@/common/setup/modal/index';
+import { initData } from '@/common/methods/index';
+import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
+import { AllEnums } from '@/services/go/commonService/interface';
+import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+
+export default defineComponent({
+    name: 'add-custom',
+    components: {},
+    setup() {
+        // 控制关闭弹窗
+        const { visible, cancel } = closeModal('account_info_business_btn_modify');
+        // 证件类型
+        // const cardTypeList = ref<AllEnums[]>(getCardType());
+        // // 表单
+        // const formRef = ref();
+        // const formState: UnwrapRef<FormState> = reactive(initFormState());
+        // const rules = {
+        //     userinfotype: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
+        //     customername: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        //     nickname: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
+        //     cardtype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
+        // };
+        // // 下单方法
+        // const { loading, applyAction } = handleApply();
+        // function isPersonal(): boolean {
+        //     return formState.userinfotype === '1';
+        // }
+        // function submit() {
+        //     formRef.value
+        //         .validate()
+        //         .then(() => {
+        //             const param = toRaw(formState);
+        //             applyAction(param);
+        //             console.log('values', formState);
+        //         })
+        //         .catch((error: ValidateErrorEntity<FormState>) => {
+        //             console.log('error', error);
+        //         });
+        // }
+        return {
+            // formState,
+            // rules,
+            // formRef,
+            // cardTypeList,
+            // isPersonal,
+            visible,
+            cancel,
+            // submit,
+            // loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.add-business-info {
+}
+.add-traders {
+}
+.add-managers {
+}
+.add-powers {
+    .powerTable {
+        width: 100%;
+        height: 100%;
+        border: 3px solid @m-grey11;
+        background-color: @m-black12;
+        font-size: 14px;
+        color: @m-white0;
+        .flex;
+        flex-direction: column;
+        .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+            width: 90px;
+            span + span {
+                margin-right: 0;
+            }
+        }
+        .powerRow {
+            width: 100%;
+            display: inline-flex;
+            border-bottom: 3px solid @m-grey11;
+            div {
+                align-self: center;
+                align-items: center;
+            }
+            .powerLeft {
+                width: 84px;
+                padding: 0 8px;
+            }
+            .powerMiddle {
+                width: 130px;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    border: 3px solid @m-grey11;
+                    border-top: 0;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+            .powerRight {
+                flex: 1;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    justify-content: flex-start;
+                    border-bottom: 3px solid @m-grey11;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+}
+.add-futures {
+}
+.add-futures-son {
+}
+.add-arbitrage {
+    .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+        width: 100px;
+        span + span {
+            margin-right: 0;
+        }
+    }
+    .ant-checkbox-group.autoWidth {
+        width: 520px;
+        .ant-checkbox-wrapper {
+            width: auto;
+        }
+    }
+    .checkboxGroupItem {
+        .ant-row {
+            margin-bottom: 10px;
+        }
+    }
+}
+</style
+>;

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

@@ -1,6 +1,6 @@
 <template>
   <!-- 修改账户 -->
-  <!-- <a-modal class="commonModal add-business-info"
+  <a-modal class="commonModal add-business-info"
            title="修改业务账户"
            v-model:visible="visible"
            @cancel="cancel"
@@ -33,474 +33,36 @@
             </a-checkbox-group>
           </a-form-item>
         </a-col>
-          <a-col :span="12">
-            <a-form-item label="账户名称"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入账户名称" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="登录账号"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入登录账号" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="登录密码"
-                         name="">
-              <a-input-password class="dialogInput" 
-                      style="width: 200px" 
-                      placeholder="请输入登录密码" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="手机号码"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入手机号码" />
-            </a-form-item>
-          </a-col>
-      </a-row>
-    </a-form>
-  </a-modal> -->
-  <!-- 修改交易员 -->
-  <!-- <a-modal class="commonModal add-traders"
-           title="修改交易员"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">完成</a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
         <a-col :span="12">
-          <a-form-item label="所属用户"
+          <a-form-item label="账户名称"
                        name="">
-            <span class="white">王凌团队</span>
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入账户名称" />
           </a-form-item>
         </a-col>
-          <a-col :span="12">
-            <a-form-item label="账户名称"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入账户名称" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="登录账号"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入登录账号" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="登录密码"
-                         name="">
-              <a-input-password class="dialogInput" 
-                      style="width: 200px" 
-                      placeholder="请输入登录密码" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="手机号码"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入手机号码" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="授权期货账户"
-                         class="checkboxGroupItem"
-                         name="">
-              <a-checkbox-group class="commonCheckboxGroup">
-                <a-row>
-                  <a-col :span="12">
-                    <a-checkbox value="A">期货子账户/250000010003</a-checkbox>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-checkbox value="B">铜套保专用账户/25000000011</a-checkbox>
-                  </a-col>
-                  <a-col :span="12" class="mt20">
-                    <a-checkbox value="C">银套保专用账户/250000010003</a-checkbox>
-                  </a-col>
-                  <a-col :span="12" class="mt20">
-                    <a-checkbox value="D">铁矿石套保专用账户/25000000013Q</a-checkbox>
-                  </a-col>
-                </a-row>
-              </a-checkbox-group>
-            </a-form-item>
-          </a-col>
-      </a-row>
-    </a-form>
-  </a-modal> -->
-  <!-- 修改管理员 -->
-  <!-- <a-modal class="commonModal add-managers"
-           title="修改管理员"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">完成</a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
         <a-col :span="12">
-          <a-form-item label="账户权限"
-                       name="">
-            <a-select class="inlineFormSelect"
-                      style="width: 200px"
-                      placeholder="请选择账户权限">
-              <a-select-option value="权限一">权限一</a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-          <a-col :span="12">
-            <a-form-item label="账户名称"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入账户名称" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="登录账号"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入登录账号" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="登录密码"
-                         name="">
-              <a-input-password class="dialogInput" 
-                      style="width: 200px" 
-                      placeholder="请输入登录密码" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="手机号码"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入手机号码" />
-            </a-form-item>
-          </a-col>
-      </a-row>
-    </a-form>
-  </a-modal> -->
-  <!-- 修改权限模板 -->
-  <!-- <a-modal class="commonModal add-powers"
-           title="修改权限模板"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">完成</a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <a-form-item label="模板名称"
+          <a-form-item label="登录账号"
                        name="">
             <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入模板名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="权限功能"
-                       name="">
+                     style="width: 200px"
+                     placeholder="请输入登录账号" />
           </a-form-item>
         </a-col>
-        <a-col :span="24">
-          <div class="powerTable">
-            <a-checkbox-group class="commonCheckboxGroup">
-            <div class="powerRow">
-              <div class="powerLeft">
-                <a-checkbox value="A">采购</a-checkbox>
-              </div>
-              <div class="powerMiddle">
-                <div><a-checkbox value="B">待点价</a-checkbox></div>
-                <div><a-checkbox value="C">履约交收</a-checkbox></div>
-                <div><a-checkbox value="D">全部</a-checkbox></div>
-              </div>
-              <div class="powerRight">
-                <div><a-checkbox value="E">点价登记</a-checkbox><a-checkbox value="F">详情</a-checkbox></div>
-                <div><a-checkbox value="G">交收登记</a-checkbox><a-checkbox value="H">款项登记</a-checkbox><a-checkbox value="I">发票登记</a-checkbox><a-checkbox value="J">入库登记</a-checkbox><a-checkbox value="K">详情</a-checkbox></div>
-                <div><a-checkbox value="L">全部</a-checkbox><a-checkbox value="M">详情</a-checkbox></div>
-              </div>
-            </div>
-             <div class="powerRow">
-              <div class="powerLeft">
-                <a-checkbox value="N">期货</a-checkbox>
-              </div>
-              <div class="powerMiddle">
-                <div><a-checkbox value="O">待点价</a-checkbox></div>
-              </div>
-              <div class="powerRight">
-                <div><a-checkbox value="P">交易</a-checkbox><a-checkbox value="Q">买入</a-checkbox><a-checkbox value="R">卖出</a-checkbox><a-checkbox value="S">平仓</a-checkbox></div>
-              </div>
-            </div>
-            <div class="powerRow">
-              <div class="powerLeft">
-                <a-checkbox value="T">敞口</a-checkbox>
-              </div>
-              <div class="powerMiddle">
-                <div><a-checkbox value="U">实时敞口</a-checkbox></div>
-                <div><a-checkbox value="V">现货头寸</a-checkbox></div>
-                <div><a-checkbox value="W">期货头寸</a-checkbox></div>
-                <div><a-checkbox value="X">历史敞口</a-checkbox></div>
-              </div>
-              <div class="powerRight">
-                <div><a-checkbox value="Y">期货明细</a-checkbox><a-checkbox value="Z">现货明细</a-checkbox><a-checkbox value="A1">下单</a-checkbox></div>
-                <div>&nbsp;</div>
-                <div>&nbsp;</div>
-                <div>&nbsp;</div>
-              </div>
-            </div>
-            </a-checkbox-group>
-          </div>
-        </a-col>
-      </a-row>
-    </a-form>
-  </a-modal> -->
-  <!-- 修改期货账户 -->
-  <!-- <a-modal class="commonModal add-futures"
-           title="修改期货账户"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">完成</a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <a-form-item label="期货公司"
-                       name="userinfotype">
-            <a-select class="inlineFormSelect"
-                      style="width: 200px"
-                      placeholder="请选择期货公司">
-              <a-select-option value="权限一">权限一</a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-          <a-col :span="12">
-            <a-form-item label="账户名称"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入账户名称" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="期货登录账号"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入期货登录账号" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="登录密码"
-                         name="">
-              <a-input-password class="dialogInput" 
-                      style="width: 200px" 
-                      placeholder="请输入登录密码" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="指定交易用户"
-                         name="">
-              <a-select class="inlineFormSelect"
-                      style="width: 200px"
-                      placeholder="请选择指定交易用户">
-              <a-select-option value="权限一">权限一</a-select-option>
-            </a-select>
-            </a-form-item>
-          </a-col>
-      </a-row>
-    </a-form>
-  </a-modal> -->
-  <!-- 修改期货子账户 -->
-  <!-- <a-modal class="commonModal add-futures-son"
-           title="修改期货子账户"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">完成</a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
         <a-col :span="12">
-          <a-form-item label="所属期货账户"
-                       name="userinfotype">
-            <span class="white">王小小/824327648</span>
-          </a-form-item>
-        </a-col>
-          <a-col :span="12">
-            <a-form-item label="账户名称"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入账户名称" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="期货保证金"
-                         name="">
-              <a-input class="dialogInput"
-                       style="width: 200px"
-                       placeholder="请输入期货保证金" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="期货手续费"
-                         name="">
-              <a-select class="inlineFormSelect"
-                        style="width: 200px"
-                        placeholder="请选择期货手续费">
-                <a-select-option value="权限一">权限一</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-      </a-row>
-    </a-form>
-  </a-modal> -->
-  <!-- 修改套利 -->
-  <a-modal class="commonModal add-arbitrage"
-           title="修改"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">完成</a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <a-form-item label="业务类型"
-                       name="">
-            <span class="white">套利</span>
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="现货品种"
-                       class="checkboxGroupItem"
+          <a-form-item label="登录密码"
                        name="">
-            <a-checkbox-group class="commonCheckboxGroup">
-              <a-row>
-                <a-col>
-                  <a-checkbox value="A">钢管</a-checkbox>
-                </a-col>
-                <a-col>
-                  <a-checkbox value="B">铁矿石</a-checkbox>
-                </a-col>
-                <a-col>
-                  <a-checkbox value="C">大豆</a-checkbox>
-                </a-col>
-                <a-col>
-                  <a-checkbox value="D">玉米</a-checkbox>
-                </a-col>
-                <a-col>
-                  <a-checkbox value="E">棉花</a-checkbox>
-                </a-col>
-                <a-col>
-                  <a-checkbox value="F">铜板</a-checkbox>
-                </a-col>
-              </a-row>
-              <a-row>
-                <a-col>
-                  <a-checkbox value="G">铜块</a-checkbox>
-                </a-col>
-                <a-col>
-                  <a-checkbox value="H">螺纹钢</a-checkbox>
-                </a-col>
-              </a-row>
-            </a-checkbox-group>
+            <a-input-password class="dialogInput"
+                              style="width: 200px"
+                              placeholder="请输入登录密码" />
           </a-form-item>
         </a-col>
         <a-col :span="24">
-          <a-form-item label="期货账户"
-                       class="checkboxGroupItem"
+          <a-form-item label="手机号码"
                        name="">
-            <a-checkbox-group class="commonCheckboxGroup autoWidth">
-              <a-row>
-                <a-col :span="12">
-                  <a-checkbox value="A">期货母账户/25000000010</a-checkbox>
-                </a-col>
-                <a-col :span="12">
-                  <a-checkbox value="B">铜套保专用账户/25000000011</a-checkbox>
-                </a-col>
-              </a-row>
-              <a-row>
-                <a-col :span="12">
-                  <a-checkbox value="C">银套保专用账户/25000000012</a-checkbox>
-                </a-col>
-                <a-col :span="12">
-                  <a-checkbox value="D">铁矿石套保专用账户/25000000013</a-checkbox>
-                </a-col>
-              </a-row>
-            </a-checkbox-group>
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入手机号码" />
           </a-form-item>
         </a-col>
       </a-row>

src/views/information/account_info/compoments/modify-futures-son/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <!-- 修改期货子账户 -->
+  <a-modal class="commonModal add-futures-son"
+           title="修改期货子账户"
+           v-model:visible="visible"
+           @cancel="cancel"
+           centered
+           :maskClosable="false"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+    <a-form class="inlineForm"
+            ref="formRef"
+            :model="formState"
+            :rules="rules">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-form-item label="所属期货账户"
+                       name="userinfotype">
+            <span class="white">王小小/824327648</span>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="账户名称"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入账户名称" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="期货保证金"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入期货保证金" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="期货手续费"
+                       name="">
+            <a-select class="inlineFormSelect"
+                      style="width: 200px"
+                      placeholder="请选择期货手续费">
+              <a-select-option value="权限一">权限一</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { closeModal } from '@/common/setup/modal/index';
+import { initData } from '@/common/methods/index';
+import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
+import { AllEnums } from '@/services/go/commonService/interface';
+import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+
+export default defineComponent({
+    name: 'add-custom',
+    components: {},
+    setup() {
+        // 控制关闭弹窗
+        const { visible, cancel } = closeModal('account_info_business_btn_modify');
+        // 证件类型
+        // const cardTypeList = ref<AllEnums[]>(getCardType());
+        // // 表单
+        // const formRef = ref();
+        // const formState: UnwrapRef<FormState> = reactive(initFormState());
+        // const rules = {
+        //     userinfotype: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
+        //     customername: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        //     nickname: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
+        //     cardtype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
+        // };
+        // // 下单方法
+        // const { loading, applyAction } = handleApply();
+        // function isPersonal(): boolean {
+        //     return formState.userinfotype === '1';
+        // }
+        // function submit() {
+        //     formRef.value
+        //         .validate()
+        //         .then(() => {
+        //             const param = toRaw(formState);
+        //             applyAction(param);
+        //             console.log('values', formState);
+        //         })
+        //         .catch((error: ValidateErrorEntity<FormState>) => {
+        //             console.log('error', error);
+        //         });
+        // }
+        return {
+            // formState,
+            // rules,
+            // formRef,
+            // cardTypeList,
+            // isPersonal,
+            visible,
+            cancel,
+            // submit,
+            // loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.add-business-info {
+}
+.add-traders {
+}
+.add-managers {
+}
+.add-powers {
+    .powerTable {
+        width: 100%;
+        height: 100%;
+        border: 3px solid @m-grey11;
+        background-color: @m-black12;
+        font-size: 14px;
+        color: @m-white0;
+        .flex;
+        flex-direction: column;
+        .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+            width: 90px;
+            span + span {
+                margin-right: 0;
+            }
+        }
+        .powerRow {
+            width: 100%;
+            display: inline-flex;
+            border-bottom: 3px solid @m-grey11;
+            div {
+                align-self: center;
+                align-items: center;
+            }
+            .powerLeft {
+                width: 84px;
+                padding: 0 8px;
+            }
+            .powerMiddle {
+                width: 130px;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    border: 3px solid @m-grey11;
+                    border-top: 0;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+            .powerRight {
+                flex: 1;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    justify-content: flex-start;
+                    border-bottom: 3px solid @m-grey11;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+}
+.add-futures {
+}
+.add-futures-son {
+}
+.add-arbitrage {
+    .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+        width: 100px;
+        span + span {
+            margin-right: 0;
+        }
+    }
+    .ant-checkbox-group.autoWidth {
+        width: 520px;
+        .ant-checkbox-wrapper {
+            width: auto;
+        }
+    }
+    .checkboxGroupItem {
+        .ant-row {
+            margin-bottom: 10px;
+        }
+    }
+}
+</style
+>;

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

@@ -0,0 +1,220 @@
+<template>
+  <!-- 修改期货账户 -->
+  <a-modal class="commonModal add-futures"
+           title="修改期货账户"
+           v-model:visible="visible"
+           @cancel="cancel"
+           centered
+           :maskClosable="false"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+    <a-form class="inlineForm"
+            ref="formRef"
+            :model="formState"
+            :rules="rules">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-form-item label="期货公司"
+                       name="userinfotype">
+            <a-select class="inlineFormSelect"
+                      style="width: 200px"
+                      placeholder="请选择期货公司">
+              <a-select-option value="权限一">权限一</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="账户名称"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入账户名称" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="期货登录账号"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入期货登录账号" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="登录密码"
+                       name="">
+            <a-input-password class="dialogInput"
+                              style="width: 200px"
+                              placeholder="请输入登录密码" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="指定交易用户"
+                       name="">
+            <a-select class="inlineFormSelect"
+                      style="width: 200px"
+                      placeholder="请选择指定交易用户">
+              <a-select-option value="权限一">权限一</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { closeModal } from '@/common/setup/modal/index';
+import { initData } from '@/common/methods/index';
+import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
+import { AllEnums } from '@/services/go/commonService/interface';
+import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+
+export default defineComponent({
+    name: 'add-custom',
+    components: {},
+    setup() {
+        // 控制关闭弹窗
+        const { visible, cancel } = closeModal('account_info_business_btn_modify');
+        // 证件类型
+        // const cardTypeList = ref<AllEnums[]>(getCardType());
+        // // 表单
+        // const formRef = ref();
+        // const formState: UnwrapRef<FormState> = reactive(initFormState());
+        // const rules = {
+        //     userinfotype: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
+        //     customername: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        //     nickname: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
+        //     cardtype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
+        // };
+        // // 下单方法
+        // const { loading, applyAction } = handleApply();
+        // function isPersonal(): boolean {
+        //     return formState.userinfotype === '1';
+        // }
+        // function submit() {
+        //     formRef.value
+        //         .validate()
+        //         .then(() => {
+        //             const param = toRaw(formState);
+        //             applyAction(param);
+        //             console.log('values', formState);
+        //         })
+        //         .catch((error: ValidateErrorEntity<FormState>) => {
+        //             console.log('error', error);
+        //         });
+        // }
+        return {
+            // formState,
+            // rules,
+            // formRef,
+            // cardTypeList,
+            // isPersonal,
+            visible,
+            cancel,
+            // submit,
+            // loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.add-business-info {
+}
+.add-traders {
+}
+.add-managers {
+}
+.add-powers {
+    .powerTable {
+        width: 100%;
+        height: 100%;
+        border: 3px solid @m-grey11;
+        background-color: @m-black12;
+        font-size: 14px;
+        color: @m-white0;
+        .flex;
+        flex-direction: column;
+        .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+            width: 90px;
+            span + span {
+                margin-right: 0;
+            }
+        }
+        .powerRow {
+            width: 100%;
+            display: inline-flex;
+            border-bottom: 3px solid @m-grey11;
+            div {
+                align-self: center;
+                align-items: center;
+            }
+            .powerLeft {
+                width: 84px;
+                padding: 0 8px;
+            }
+            .powerMiddle {
+                width: 130px;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    border: 3px solid @m-grey11;
+                    border-top: 0;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+            .powerRight {
+                flex: 1;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    justify-content: flex-start;
+                    border-bottom: 3px solid @m-grey11;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+}
+.add-futures {
+}
+.add-futures-son {
+}
+.add-arbitrage {
+    .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+        width: 100px;
+        span + span {
+            margin-right: 0;
+        }
+    }
+    .ant-checkbox-group.autoWidth {
+        width: 520px;
+        .ant-checkbox-wrapper {
+            width: auto;
+        }
+    }
+    .checkboxGroupItem {
+        .ant-row {
+            margin-bottom: 10px;
+        }
+    }
+}
+</style
+>;

src/views/information/account_info/compoments/modify-managers/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <!-- 修改管理员 -->
+  <a-modal class="commonModal add-managers"
+           title="修改管理员"
+           v-model:visible="visible"
+           @cancel="cancel"
+           centered
+           :maskClosable="false"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+    <a-form class="inlineForm"
+            ref="formRef"
+            :model="formState"
+            :rules="rules">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-form-item label="账户权限"
+                       name="">
+            <a-select class="inlineFormSelect"
+                      style="width: 200px"
+                      placeholder="请选择账户权限">
+              <a-select-option value="权限一">权限一</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="账户名称"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入账户名称" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="登录账号"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入登录账号" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="登录密码"
+                       name="">
+            <a-input-password class="dialogInput"
+                              style="width: 200px"
+                              placeholder="请输入登录密码" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="手机号码"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入手机号码" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { closeModal } from '@/common/setup/modal/index';
+import { initData } from '@/common/methods/index';
+import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
+import { AllEnums } from '@/services/go/commonService/interface';
+import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+
+export default defineComponent({
+    name: 'add-custom',
+    components: {},
+    setup() {
+        // 控制关闭弹窗
+        const { visible, cancel } = closeModal('account_info_business_btn_modify');
+        // 证件类型
+        // const cardTypeList = ref<AllEnums[]>(getCardType());
+        // // 表单
+        // const formRef = ref();
+        // const formState: UnwrapRef<FormState> = reactive(initFormState());
+        // const rules = {
+        //     userinfotype: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
+        //     customername: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        //     nickname: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
+        //     cardtype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
+        // };
+        // // 下单方法
+        // const { loading, applyAction } = handleApply();
+        // function isPersonal(): boolean {
+        //     return formState.userinfotype === '1';
+        // }
+        // function submit() {
+        //     formRef.value
+        //         .validate()
+        //         .then(() => {
+        //             const param = toRaw(formState);
+        //             applyAction(param);
+        //             console.log('values', formState);
+        //         })
+        //         .catch((error: ValidateErrorEntity<FormState>) => {
+        //             console.log('error', error);
+        //         });
+        // }
+        return {
+            // formState,
+            // rules,
+            // formRef,
+            // cardTypeList,
+            // isPersonal,
+            visible,
+            cancel,
+            // submit,
+            // loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.add-business-info {
+}
+.add-traders {
+}
+.add-managers {
+}
+.add-powers {
+    .powerTable {
+        width: 100%;
+        height: 100%;
+        border: 3px solid @m-grey11;
+        background-color: @m-black12;
+        font-size: 14px;
+        color: @m-white0;
+        .flex;
+        flex-direction: column;
+        .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+            width: 90px;
+            span + span {
+                margin-right: 0;
+            }
+        }
+        .powerRow {
+            width: 100%;
+            display: inline-flex;
+            border-bottom: 3px solid @m-grey11;
+            div {
+                align-self: center;
+                align-items: center;
+            }
+            .powerLeft {
+                width: 84px;
+                padding: 0 8px;
+            }
+            .powerMiddle {
+                width: 130px;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    border: 3px solid @m-grey11;
+                    border-top: 0;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+            .powerRight {
+                flex: 1;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    justify-content: flex-start;
+                    border-bottom: 3px solid @m-grey11;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+}
+.add-futures {
+}
+.add-futures-son {
+}
+.add-arbitrage {
+    .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+        width: 100px;
+        span + span {
+            margin-right: 0;
+        }
+    }
+    .ant-checkbox-group.autoWidth {
+        width: 520px;
+        .ant-checkbox-wrapper {
+            width: auto;
+        }
+    }
+    .checkboxGroupItem {
+        .ant-row {
+            margin-bottom: 10px;
+        }
+    }
+}
+</style
+>;

src/views/information/account_info/compoments/modify-powers/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <!-- 修改权限模板 -->
+  <a-modal class="commonModal add-powers"
+           title="修改权限模板"
+           v-model:visible="visible"
+           @cancel="cancel"
+           centered
+           :maskClosable="false"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+    <a-form class="inlineForm"
+            ref="formRef"
+            :model="formState"
+            :rules="rules">
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-form-item label="模板名称"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入模板名称" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="权限功能"
+                       name="">
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <div class="powerTable">
+            <a-checkbox-group class="commonCheckboxGroup">
+              <div class="powerRow">
+                <div class="powerLeft">
+                  <a-checkbox value="A">采购</a-checkbox>
+                </div>
+                <div class="powerMiddle">
+                  <div>
+                    <a-checkbox value="B">待点价</a-checkbox>
+                  </div>
+                  <div>
+                    <a-checkbox value="C">履约交收</a-checkbox>
+                  </div>
+                  <div>
+                    <a-checkbox value="D">全部</a-checkbox>
+                  </div>
+                </div>
+                <div class="powerRight">
+                  <div>
+                    <a-checkbox value="E">点价登记</a-checkbox>
+                    <a-checkbox value="F">详情</a-checkbox>
+                  </div>
+                  <div>
+                    <a-checkbox value="G">交收登记</a-checkbox>
+                    <a-checkbox value="H">款项登记</a-checkbox>
+                    <a-checkbox value="I">发票登记</a-checkbox>
+                    <a-checkbox value="J">入库登记</a-checkbox>
+                    <a-checkbox value="K">详情</a-checkbox>
+                  </div>
+                  <div>
+                    <a-checkbox value="L">全部</a-checkbox>
+                    <a-checkbox value="M">详情</a-checkbox>
+                  </div>
+                </div>
+              </div>
+              <div class="powerRow">
+                <div class="powerLeft">
+                  <a-checkbox value="N">期货</a-checkbox>
+                </div>
+                <div class="powerMiddle">
+                  <div>
+                    <a-checkbox value="O">待点价</a-checkbox>
+                  </div>
+                </div>
+                <div class="powerRight">
+                  <div>
+                    <a-checkbox value="P">交易</a-checkbox>
+                    <a-checkbox value="Q">买入</a-checkbox>
+                    <a-checkbox value="R">卖出</a-checkbox>
+                    <a-checkbox value="S">平仓</a-checkbox>
+                  </div>
+                </div>
+              </div>
+              <div class="powerRow">
+                <div class="powerLeft">
+                  <a-checkbox value="T">敞口</a-checkbox>
+                </div>
+                <div class="powerMiddle">
+                  <div>
+                    <a-checkbox value="U">实时敞口</a-checkbox>
+                  </div>
+                  <div>
+                    <a-checkbox value="V">现货头寸</a-checkbox>
+                  </div>
+                  <div>
+                    <a-checkbox value="W">期货头寸</a-checkbox>
+                  </div>
+                  <div>
+                    <a-checkbox value="X">历史敞口</a-checkbox>
+                  </div>
+                </div>
+                <div class="powerRight">
+                  <div>
+                    <a-checkbox value="Y">期货明细</a-checkbox>
+                    <a-checkbox value="Z">现货明细</a-checkbox>
+                    <a-checkbox value="A1">下单</a-checkbox>
+                  </div>
+                  <div>&nbsp;</div>
+                  <div>&nbsp;</div>
+                  <div>&nbsp;</div>
+                </div>
+              </div>
+            </a-checkbox-group>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { closeModal } from '@/common/setup/modal/index';
+import { initData } from '@/common/methods/index';
+import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
+import { AllEnums } from '@/services/go/commonService/interface';
+import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+
+export default defineComponent({
+    name: 'add-custom',
+    components: {},
+    setup() {
+        // 控制关闭弹窗
+        const { visible, cancel } = closeModal('account_info_business_btn_modify');
+        // 证件类型
+        // const cardTypeList = ref<AllEnums[]>(getCardType());
+        // // 表单
+        // const formRef = ref();
+        // const formState: UnwrapRef<FormState> = reactive(initFormState());
+        // const rules = {
+        //     userinfotype: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
+        //     customername: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        //     nickname: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
+        //     cardtype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
+        // };
+        // // 下单方法
+        // const { loading, applyAction } = handleApply();
+        // function isPersonal(): boolean {
+        //     return formState.userinfotype === '1';
+        // }
+        // function submit() {
+        //     formRef.value
+        //         .validate()
+        //         .then(() => {
+        //             const param = toRaw(formState);
+        //             applyAction(param);
+        //             console.log('values', formState);
+        //         })
+        //         .catch((error: ValidateErrorEntity<FormState>) => {
+        //             console.log('error', error);
+        //         });
+        // }
+        return {
+            // formState,
+            // rules,
+            // formRef,
+            // cardTypeList,
+            // isPersonal,
+            visible,
+            cancel,
+            // submit,
+            // loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.add-business-info {
+}
+.add-traders {
+}
+.add-managers {
+}
+.add-powers {
+    .powerTable {
+        width: 100%;
+        height: 100%;
+        border: 3px solid @m-grey11;
+        background-color: @m-black12;
+        font-size: 14px;
+        color: @m-white0;
+        .flex;
+        flex-direction: column;
+        .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+            width: 90px;
+            span + span {
+                margin-right: 0;
+            }
+        }
+        .powerRow {
+            width: 100%;
+            display: inline-flex;
+            border-bottom: 3px solid @m-grey11;
+            div {
+                align-self: center;
+                align-items: center;
+            }
+            .powerLeft {
+                width: 84px;
+                padding: 0 8px;
+            }
+            .powerMiddle {
+                width: 130px;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    border: 3px solid @m-grey11;
+                    border-top: 0;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+            .powerRight {
+                flex: 1;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    justify-content: flex-start;
+                    border-bottom: 3px solid @m-grey11;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+}
+.add-futures {
+}
+.add-futures-son {
+}
+.add-arbitrage {
+    .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+        width: 100px;
+        span + span {
+            margin-right: 0;
+        }
+    }
+    .ant-checkbox-group.autoWidth {
+        width: 520px;
+        .ant-checkbox-wrapper {
+            width: auto;
+        }
+    }
+    .checkboxGroupItem {
+        .ant-row {
+            margin-bottom: 10px;
+        }
+    }
+}
+</style
+>;

src/views/information/account_info/compoments/modify-traders/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <!-- 修改交易员 -->
+  <a-modal class="commonModal add-traders"
+           title="修改交易员"
+           v-model:visible="visible"
+           @cancel="cancel"
+           centered
+           :maskClosable="false"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+    <a-form class="inlineForm"
+            ref="formRef"
+            :model="formState"
+            :rules="rules">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-form-item label="所属用户"
+                       name="">
+            <span class="white">王凌团队</span>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="账户名称"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入账户名称" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="登录账号"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入登录账号" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="登录密码"
+                       name="">
+            <a-input-password class="dialogInput"
+                              style="width: 200px"
+                              placeholder="请输入登录密码" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="手机号码"
+                       name="">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     placeholder="请输入手机号码" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="授权期货账户"
+                       class="checkboxGroupItem"
+                       name="">
+            <a-checkbox-group class="commonCheckboxGroup">
+              <a-row>
+                <a-col :span="12">
+                  <a-checkbox value="A">期货子账户/250000010003</a-checkbox>
+                </a-col>
+                <a-col :span="12">
+                  <a-checkbox value="B">铜套保专用账户/25000000011</a-checkbox>
+                </a-col>
+                <a-col :span="12"
+                       class="mt20">
+                  <a-checkbox value="C">银套保专用账户/250000010003</a-checkbox>
+                </a-col>
+                <a-col :span="12"
+                       class="mt20">
+                  <a-checkbox value="D">铁矿石套保专用账户/25000000013Q</a-checkbox>
+                </a-col>
+              </a-row>
+            </a-checkbox-group>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { closeModal } from '@/common/setup/modal/index';
+import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
+import { AllEnums } from '@/services/go/commonService/interface';
+import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+
+export default defineComponent({
+    name: 'add-custom',
+    components: {},
+    setup() {
+        // 控制关闭弹窗
+        const { visible, cancel } = closeModal('account_info_trade_btn_modify');
+        // 证件类型
+        // const cardTypeList = ref<AllEnums[]>(getCardType());
+        // // 表单
+        // const formRef = ref();
+        // const formState: UnwrapRef<FormState> = reactive(initFormState());
+        // const rules = {
+        //     userinfotype: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
+        //     customername: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        //     nickname: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
+        //     cardtype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
+        // };
+        // // 下单方法
+        // const { loading, applyAction } = handleApply();
+        // function isPersonal(): boolean {
+        //     return formState.userinfotype === '1';
+        // }
+        // function submit() {
+        //     formRef.value
+        //         .validate()
+        //         .then(() => {
+        //             const param = toRaw(formState);
+        //             applyAction(param);
+        //             console.log('values', formState);
+        //         })
+        //         .catch((error: ValidateErrorEntity<FormState>) => {
+        //             console.log('error', error);
+        //         });
+        // }
+        return {
+            // formState,
+            // rules,
+            // formRef,
+            // cardTypeList,
+            // isPersonal,
+            visible,
+            cancel,
+            // submit,
+            // loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.add-business-info {
+}
+.add-traders {
+}
+.add-managers {
+}
+.add-powers {
+    .powerTable {
+        width: 100%;
+        height: 100%;
+        border: 3px solid @m-grey11;
+        background-color: @m-black12;
+        font-size: 14px;
+        color: @m-white0;
+        .flex;
+        flex-direction: column;
+        .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+            width: 90px;
+            span + span {
+                margin-right: 0;
+            }
+        }
+        .powerRow {
+            width: 100%;
+            display: inline-flex;
+            border-bottom: 3px solid @m-grey11;
+            div {
+                align-self: center;
+                align-items: center;
+            }
+            .powerLeft {
+                width: 84px;
+                padding: 0 8px;
+            }
+            .powerMiddle {
+                width: 130px;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    border: 3px solid @m-grey11;
+                    border-top: 0;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+            .powerRight {
+                flex: 1;
+                .flex;
+                flex-direction: column;
+                div {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 8px;
+                    justify-content: flex-start;
+                    border-bottom: 3px solid @m-grey11;
+                }
+                div:last-child {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+}
+.add-futures {
+}
+.add-futures-son {
+}
+.add-arbitrage {
+    .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+        width: 100px;
+        span + span {
+            margin-right: 0;
+        }
+    }
+    .ant-checkbox-group.autoWidth {
+        width: 520px;
+        .ant-checkbox-wrapper {
+            width: auto;
+        }
+    }
+    .checkboxGroupItem {
+        .ant-row {
+            margin-bottom: 10px;
+        }
+    }
+}
+</style
+>;

src/views/information/account_info/list/account_info_trade/index.vue

@@ -51,6 +51,7 @@
         </a-collapse>
       </a-collapse-panel>
     </a-collapse>
+    <Modify />
   </div>
 </template>
 
@@ -60,6 +61,7 @@ import filterCustomTable from '@/views/information/goods/components/filterTable/
 import { ref } from 'vue';
 import { handleAccountManager, getAccountStatus } from '../setup';
 import { getUserName } from '@/services/bus/user';
+import Modify from '../../compoments/modify-traders/index.vue';
 
 export default defineComponent({
     name: 'account_info_trade',
@@ -67,6 +69,7 @@ export default defineComponent({
         contextMenu,
         BtnList,
         filterCustomTable,
+        Modify,
     },
     setup() {
         const { traderList, getRoleList } = handleAccountManager();
@@ -96,16 +99,16 @@ export default defineComponent({
 
 <style lang="less">
 .account_info_trade {
-  .tltLeft {
+    .tltLeft {
         padding-left: 12px;
-  }
-  .btn-list {
-    .btnPrimary.ant-btn {
-      height: 26px;
-      line-height: 26px;
     }
-  }
-  .ant-collapse.spotCollapse.ant-collapse-borderless {
+    .btn-list {
+        .btnPrimary.ant-btn {
+            height: 26px;
+            line-height: 26px;
+        }
+    }
+    .ant-collapse.spotCollapse.ant-collapse-borderless {
         padding-left: 43px;
         padding-right: 43px;
     }