账户管理新增弹窗

src/assets/styles/mixin.less

@@ -1246,4 +1246,10 @@ input:-internal-autofill-selected {
 
 .tc {
     text-align: center;
-}
+}
+
+.checkboxGroupItem {
+    .ant-col.ant-form-item-control-wrapper {
+      max-width: calc(100% - 130px);
+    }
+  }

src/assets/styles/variables.less

@@ -47,6 +47,7 @@
 @m-black9: #161A1C;
 @m-black10: #121618;
 @m-black11: #0B1620;
+@m-black12: #13202D;
 @m-blue0: #3a87f7;
 @m-blue0-hover: rgba(@m-blue0, .8);
 @m-blue1: #4885eb;

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

@@ -1,6 +1,6 @@
 <template>
   <!-- 新增账户 -->
-  <a-modal class="add-custom"
+  <!-- <a-modal class="commonModal add-business-info"
            title="新增业务账户"
            v-model:visible="visible"
            @cancel="cancel"
@@ -13,7 +13,474 @@
                 :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-checkbox-group class="commonCheckboxGroup">
+              <a-row>
+                <a-col :span="12">
+                  <a-checkbox value="A">业务员</a-checkbox>
+                </a-col>
+                <a-col :span="12">
+                  <a-checkbox value="B">跟单员</a-checkbox>
+                </a-col>
+              </a-row>
+            </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="所属用户"
+                       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> -->
+  <!-- 新增管理员 -->
+  <!-- <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="模板名称"
+                       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> -->
+  <!-- 新增期货账户 -->
+  <!-- <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"
+                         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>
 
@@ -74,7 +541,102 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-.add-custom {
+.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/add/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 新增账户 -->
-  <a-modal class="add-custom"
+  <a-modal class="commonModal add-account-info"
            title="新增账户"
            v-model:visible="visible"
            @cancel="cancel"
@@ -54,10 +54,6 @@
           <a-col :span="12">
             <a-form-item label="登录密码"
                          name="cardtype">
-              <!-- <a-input class="dialogInput"
-                       style="width: 200px"
-                       v-model:value="formState.legalpersonname"
-                       placeholder="请输入登录密码" /> -->
               <a-input-password class="dialogInput" 
                       style="width: 200px" 
                       v-model:value="formState.legalpersonname" 
@@ -138,7 +134,7 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-.add-custom {
+.add-account-info {
 }
 </style
 >;