更改设备分组页面样式

fuchengshen

2022-06-24 0924fcc06ead4d10ea5d0d579c8224850a0f37a4

 src/cool/modules/base/views/user.vue

@@ -1,104 +1,94 @@
<template>
   <div class="system-user">
      <div class="pane">
         <!-- 组织架构 -->
         <div class="dept" :class="[isExpand ? '_expand' : '_collapse']">
            <cl-dept-tree
               @row-click="onDeptRowClick"
               @user-add="onDeptUserAdd"
               @list-change="onDeptListChange"
            />
         </div>
  <div class="system-user">
    <div class="pane">
      <!-- 组织架构 -->
      <div class="dept"
           :class="[isExpand ? '_expand' : '_collapse']">
        <cl-dept-tree @row-click="onDeptRowClick"
                      @user-add="onDeptUserAdd"
                      @list-change="onDeptListChange" />
      </div>

         <!-- 成员列表 -->
         <div class="user">
            <div class="header">
               <div class="icon" @click="deptExpand">
                  <i class="el-icon-arrow-left" v-if="isExpand"></i>
                  <i class="el-icon-arrow-right" v-else></i>
               </div>
      <!-- 成员列表 -->
      <div class="user">
        <div class="header">
          <div class="icon"
               @click="deptExpand">
            <i class="el-icon-arrow-left"
               v-if="isExpand"></i>
            <i class="el-icon-arrow-right"
               v-else></i>
          </div>

               <span>成员列表</span>
            </div>
          <span>成员列表</span>
        </div>

            <div class="container">
               <cl-crud :ref="setRefs('crud')" :on-refresh="onRefresh" @load="onLoad">
                  <el-row type="flex">
                     <cl-refresh-btn />
                     <cl-add-btn />
                     <cl-multi-delete-btn />
                     <el-button
                        v-permission="service.base.sys.user.permission.move"
                        size="mini"
                        type="success"
                        :disabled="selects.ids.length == 0"
                        @click="toMove()"
                        >转移</el-button
                     >
                     <cl-flex1 />
                     <cl-search-key />
                  </el-row>
        <div class="container">
          <cl-crud :ref="setRefs('crud')"
                   :on-refresh="onRefresh"
                   @load="onLoad">
            <el-row type="flex">
              <cl-refresh-btn />
              <cl-add-btn />
              <cl-multi-delete-btn />
              <el-button v-permission="service.base.sys.user.permission.move"
                         size="mini"
                         type="success"
                         :disabled="selects.ids.length == 0"
                         @click="toMove()">转移</el-button>
              <cl-flex1 />
              <cl-search-key />
            </el-row>

                  <el-row>
                     <cl-table
                        :ref="setRefs('table')"
                        v-bind="table"
                        @selection-change="onSelectionChange"
                     >
                        <!-- 头像 -->
                        <template #column-headImg="{ scope }">
                           <cl-avatar
                              shape="square"
                              size="medium"
                              :src="scope.row.headImg"
                              :style="{ margin: 'auto' }"
                           />
                        </template>
            <el-row>
              <cl-table :ref="setRefs('table')"
                        v-bind="table"
                        @selection-change="onSelectionChange">
                <!-- 头像 -->
                <template #column-headImg="{ scope }">
                  <cl-avatar shape="square"
                             size="medium"
                             :src="scope.row.headImg"
                             :style="{ margin: 'auto' }" />
                </template>

                        <!-- 权限 -->
                        <template #column-roleName="{ scope }">
                           <el-tag
                              v-for="(item, index) in scope.row.roleNameList"
                              :key="index"
                              disable-transitions
                              size="small"
                              effect="dark"
                              style="margin: 2px"
                              >{{ item }}</el-tag
                           >
                        </template>
                <!-- 权限 -->
                <template #column-roleName="{ scope }">
                  <el-tag v-for="(item, index) in scope.row.roleNameList"
                          :key="index"
                          disable-transitions
                          size="small"
                          effect="dark"
                          style="margin: 2px">{{ item }}</el-tag>
                </template>

                        <!-- 单个转移 -->
                        <template #slot-move-btn="{ scope }">
                           <el-button
                              v-permission="service.base.sys.user.permission.move"
                              type="text"
                              size="mini"
                              @click="toMove(scope.row)"
                              >转移</el-button
                           >
                        </template>
                     </cl-table>
                  </el-row>
                <!-- 单个转移 -->
                <template #slot-move-btn="{ scope }">
                  <el-button v-permission="service.base.sys.user.permission.move"
                             type="text"
                             size="mini"
                             @click="toMove(scope.row)">转移</el-button>
                </template>
              </cl-table>
            </el-row>

                  <el-row type="flex">
                     <cl-flex1 />
                     <cl-pagination />
                  </el-row>
            <el-row type="flex">
              <cl-flex1 />
              <cl-pagination />
            </el-row>

                  <cl-upsert
                     :ref="setRefs('upsert')"
                     v-bind="upsert"
                     :on-submit="onUpsertSubmit"
                  />
               </cl-crud>
            </div>
         </div>
      </div>
            <cl-upsert :ref="setRefs('upsert')"
                       v-bind="upsert"
                       :on-submit="onUpsertSubmit" />
          </cl-crud>
        </div>
      </div>
    </div>

      <!-- 部门移动 -->
      <cl-dept-move :ref="setRefs('dept-move')" @success="refresh({ page: 1 })" />
   </div>
    <!-- 部门移动 -->
    <cl-dept-move :ref="setRefs('dept-move')"
                  @success="refresh({ page: 1 })" />
  </div>
</template>

<script lang="ts">
@@ -395,9 +385,11 @@
      // 刷新监听
      async function onRefresh(params: any, { next, render }: any) {
         const { list } = await next(params);
         console.log(list, "list");

         render(
            list.map((e: any) => {
               console.log(e, "刷新打印e");
               if (e.roleName) {
                  e.roleNameList = e.roleName.split(",");
               }