用户配置样式

src/dashoo.cn/frontend_web/src/pages/system/auditsetting/_opera/operation.vue

@@ -5,7 +5,7 @@
       <el-breadcrumb-item :to="{ path: '/system/auditsetting1' }">单位审批步骤自定义配置</el-breadcrumb-item>
       <el-breadcrumb-item>编辑</el-breadcrumb-item>
     </el-breadcrumb>
-    <el-card class="box-card" style="height: calc(100vh - 113px);">
+    <el-card class="box-card">
       <div slot="header">
         <span>
           <i class="icon icon-table2"></i> 编辑
@@ -16,74 +16,116 @@
         </span>
       </div>
       <el-form label-width="110px" ref="EntityForm" :model="formData">
+
+
+        <el-row :gutter="2">
+          <el-col :span="8">
+            <el-card style="width: 100%;height: calc(100vh - 253px);overflow: auto">
+              <div slot="header" class="clearfix">
+                <span>请选择部门</span>
+              </div>
+              <el-tree :data="orgtreelist" :props="orgtreeprops"
+                       @node-click="handleNodeClick" ></el-tree>
+            </el-card>
+          </el-col>
+
+          <el-col :span="8">
+            <el-card style="width: 100%;height: calc(100vh - 253px);overflow: auto">
+              <!--<div slot="header" class="clearfix">
+                <span>用户</span>
+                <el-button type="primary" plain style="float: right; padding: 3px 0" @click="toggleSelection">
+                  选择用户 <el-icon class="el-icon-d-arrow-right"></el-icon>
+                </el-button>
+              </div>-->
+              <el-table :data="userOptions" style="width: 100%" @selection-change="handleSelectionChange">
+                <el-table-column
+                  type="selection"
+                  width="55">
+                </el-table-column>
+                <el-table-column
+                  prop="realname"
+                  label="可选用户">
+                  <template slot="header" slot-scope="scope">
+                    <el-button type="primary" style="float: right;" size="small" @click="toggleSelection">
+                      选择用户 <el-icon class="el-icon-d-arrow-right"></el-icon>
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+          </el-col>
+
+          <!--<el-col style="width: 200px">
+            <el-card style="width: 100%">
+              <div style="margin-top: 7px">
+                <el-button type="primary" round style="margin-left: 10px;width: 80px" size="small" @click="toggleSelection">&gt;&gt;
+                </el-button>
+
+                <div style="margin-top: 7px">
+                  <el-button type="primary" round style="margin-left: 10px;width: 80px" size="small" @click="delSelection">&lt;&lt;</el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-col>-->
+
+          <el-col :span="8">
+            <el-card style="width: 100%;height: calc(100vh - 253px);overflow: auto">
+              <!--<div slot="header" class="clearfix">
+                <span>已选用户</span>
+                <el-button type="primary" plain style="float: right; padding: 3px 0" @click="delSelection">
+                  <el-icon class="el-icon-d-arrow-right"></el-icon> 取消用户
+                </el-button>
+              </div>-->
+              <el-table
+                :data="userselectOptions"
+                style="width: 100%" @selection-change="delSelectionChange">
+                <el-table-column
+                  type="selection"
+                  width="55">
+                </el-table-column>
+                <el-table-column
+                  prop="realname"
+                  label="已选用户">
+                  <template slot="header" slot-scope="scope">
+                    <el-button type="warning" @click="delSelection" size="small">
+                      <el-icon class="el-icon-d-arrow-left"></el-icon> 取消已选用户
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+          </el-col>
+
+        </el-row>
         <el-row>
           <!--<el-col :span="12">-->
-            <!--<el-form-item label="单位名称" required>-->
-              <!--<el-cascader :options="orgtreelist" :props="orgtreeprops" change-on-select :show-all-levels="false"-->
-                           <!--v-model="selectedorg" filterable style="width: 100%" @change="auditOrgChang"-->
-                           <!--placeholder="请选择组织"></el-cascader>-->
-            <!--</el-form-item>-->
+          <!--<el-form-item label="单位名称" required>-->
+          <!--<el-cascader :options="orgtreelist" :props="orgtreeprops" change-on-select :show-all-levels="false"-->
+          <!--v-model="selectedorg" filterable style="width: 100%" @change="auditOrgChang"-->
+          <!--placeholder="请选择组织"></el-cascader>-->
+          <!--</el-form-item>-->
           <!--</el-col>-->
           <!--<el-col :span="12">-->
-            <!--<el-form-item label="审批人" required>-->
-              <!--<el-select v-model="auditers" multiple placeholder="请选择" style="width: 100%">-->
-                <!--<el-option-->
-                  <!--v-for="item in userOptions"-->
-                  <!--:key="item.Id"-->
-                  <!--:label="item.Realname"-->
-                  <!--:value="item.Id">-->
-                <!--</el-option>-->
-              <!--</el-select>-->
+          <!--<el-form-item label="审批人" required>-->
+          <!--<el-select v-model="auditers" multiple placeholder="请选择" style="width: 100%">-->
+          <!--<el-option-->
+          <!--v-for="item in userOptions"-->
+          <!--:key="item.Id"-->
+          <!--:label="item.Realname"-->
+          <!--:value="item.Id">-->
+          <!--</el-option>-->
+          <!--</el-select>-->
 
-            <!--</el-form-item>-->
+          <!--</el-form-item>-->
           <!--</el-col>-->
 
-          <el-col :span="24">
+          <el-col :span="24" style="margin-top: 20px;">
             <el-form-item label="备注">
               <el-input v-model="formData.Remark" type="textarea" placeholder="请输入" style="width: 100%"></el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
-            <el-tree :data="orgtreelist" :props="orgtreeprops"
-                     @node-click="handleNodeClick" ></el-tree>
-          </el-col>
-          <el-col :span="8">
-            <!--<el-transfer v-model="auditers" :data="userOptions" ></el-transfer>-->
-            <el-table :data="userOptions" style="width: 100%" @selection-change="handleSelectionChange">
-              <el-table-column
-                type="selection"
-                width="55">
-              </el-table-column>
-              <el-table-column
-                prop="realname"
-                label="未选择"
-                width="180">
-              </el-table-column>
-            </el-table>
-            <div style="margin-top: 7px">
-              <el-button type="primary" round style="margin-left: 10px;width: 80px" size="small" @click="toggleSelection">&gt;&gt;
-              </el-button>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-table
-              :data="userselectOptions"
-              style="width: 100%" @selection-change="delSelectionChange">
-              <el-table-column
-                type="selection"
-                width="55">
-              </el-table-column>
-              <el-table-column
-                prop="realname"
-                label="已选择"
-                width="180">
-              </el-table-column>
-            </el-table>
-            <div style="margin-top: 7px">
-              <el-button type="primary" round style="margin-left: 10px;width: 80px" size="small" @click="delSelection">&lt;&lt;</el-button>
-            </div>
-          </el-col>
         </el-row>
+
       </el-form>
     </el-card>
   </div>
@@ -94,7 +136,12 @@
     mapGetters
   } from 'vuex'
   import api from '@/api/system/auditsetting'
+  import ElCol from "element-ui/packages/col/src/col";
+  import ElIcon from "../../../../../node_modules/element-ui/packages/icon/src/icon";
   export default {
+    components: {
+      ElIcon,
+      ElCol},
     computed: {
       ...mapGetters({
         authUser: 'authUser'