Преглед на файлове

1.更改vue-treeselect样式

zy преди 8 месеца
родител
ревизия
3f3d8ae966
променени са 3 файла, в които са добавени 164 реда и са изтрити 129 реда
  1. 29 0
      cpp-ui/src/assets/styles/dark.scss
  2. 130 129
      cpp-ui/src/views/system/user/index.vue
  3. 5 0
      cpp-ui/样式开发规则.md

+ 29 - 0
cpp-ui/src/assets/styles/dark.scss

@@ -270,6 +270,10 @@ $table-header-background-color: #284266;
   .el-radio__input.is-checked + .el-radio__label {
      color: white;
   }
+  .el-textarea__inner{
+    color: white;
+    background: transparent;
+  }
 }
 
 /*element-tree*/
@@ -406,3 +410,28 @@ $table-header-background-color: #284266;
   }
 }
 
+/* vue-treeselect*/
+.custom-treeselect{
+  .vue-treeselect__control{
+    /* 修改你想要改变的样式 */
+    background: transparent;
+  }
+  .vue-treeselect__single-value{
+    color: white;
+  }
+  /* 如果你想要修改下拉菜单的样式 */
+  .vue-treeselect__menu {
+    background: rgba(30, 84, 128, 0.8);
+    border: 1px solid rgb(255, 255, 255);
+    box-shadow: rgba(30, 84, 128, 0.8);
+    color: white;
+  }
+  /* 悬停 */
+  .vue-treeselect__option--highlight{
+    background-color: #4a8bec !important;
+  }
+  /*修改选中项的样式*/
+   .vue-treeselect__option--selected{
+    background: none;
+  }
+}

+ 130 - 129
cpp-ui/src/views/system/user/index.vue

@@ -6,25 +6,25 @@
         <el-col :span="4" :xs="24">
           <div class="head-container">
             <el-input
-                v-model="deptName"
-                placeholder="请输入部门名称"
-                clearable
-                size="small"
-                prefix-icon="el-icon-search"
-                style="margin-bottom: 20px"
+              v-model="deptName"
+              placeholder="请输入部门名称"
+              clearable
+              size="small"
+              prefix-icon="el-icon-search"
+              style="margin-bottom: 20px"
             />
           </div>
           <div class="head-container">
             <el-tree
-                :data="deptOptions"
-                :props="defaultProps"
-                :expand-on-click-node="false"
-                :filter-node-method="filterNode"
-                ref="tree"
-                node-key="id"
-                default-expand-all
-                highlight-current
-                @node-click="handleNodeClick"
+              :data="deptOptions"
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              ref="tree"
+              node-key="id"
+              default-expand-all
+              highlight-current
+              @node-click="handleNodeClick"
             />
           </div>
         </el-col>
@@ -36,48 +36,48 @@
                    label-width="68px">
             <el-form-item label="用户名称" prop="userName">
               <el-input
-                  v-model="queryParams.userName"
-                  placeholder="请输入用户名称"
-                  clearable
-                  style="width: 240px"
-                  @keyup.enter.native="handleQuery"
+                v-model="queryParams.userName"
+                placeholder="请输入用户名称"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
               />
             </el-form-item>
             <el-form-item label="手机号码" prop="phonenumber">
               <el-input
-                  v-model="queryParams.phonenumber"
-                  placeholder="请输入手机号码"
-                  clearable
-                  style="width: 240px"
-                  @keyup.enter.native="handleQuery"
+                v-model="queryParams.phonenumber"
+                placeholder="请输入手机号码"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
               />
             </el-form-item>
             <el-form-item label="状态" prop="status">
               <el-select
-                  v-model="queryParams.status"
-                  placeholder="用户状态"
-                  clearable
-                  style="width: 240px"
-                  popper-class="cpp-popper"
+                v-model="queryParams.status"
+                placeholder="用户状态"
+                clearable
+                style="width: 240px"
+                popper-class="cpp-popper"
               >
                 <el-option
-                    v-for="dict in dict.type.sys_normal_disable"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
                 />
               </el-select>
             </el-form-item>
             <el-form-item label="创建时间">
               <el-date-picker
-                  v-model="dateRange"
-                  style="width: 240px"
-                  value-format="yyyy-MM-dd"
-                  type="daterange"
-                  range-separator="-"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  popper-class="cpp-popper"
+                v-model="dateRange"
+                style="width: 240px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                popper-class="cpp-popper"
               ></el-date-picker>
             </el-form-item>
             <el-form-item>
@@ -89,58 +89,58 @@
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button
-                type="primary"
-                plain
-                icon="el-icon-plus"
-                size="mini"
-                @click="handleAdd"
-                v-hasPermi="['system:user:add']"
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['system:user:add']"
             >新增
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button
-                type="success"
-                plain
-                icon="el-icon-edit"
-                size="mini"
-                :disabled="single"
-                @click="handleUpdate"
-                v-hasPermi="['system:user:edit']"
+              type="success"
+              plain
+              icon="el-icon-edit"
+              size="mini"
+              :disabled="single"
+              @click="handleUpdate"
+              v-hasPermi="['system:user:edit']"
             >修改
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button
-                type="danger"
-                plain
-                icon="el-icon-delete"
-                size="mini"
-                :disabled="multiple"
-                @click="handleDelete"
-                v-hasPermi="['system:user:remove']"
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="['system:user:remove']"
             >删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button
-                type="info"
-                plain
-                icon="el-icon-upload2"
-                size="mini"
-                @click="handleImport"
-                v-hasPermi="['system:user:import']"
+              type="info"
+              plain
+              icon="el-icon-upload2"
+              size="mini"
+              @click="handleImport"
+              v-hasPermi="['system:user:import']"
             >导入
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button
-                type="warning"
-                plain
-                icon="el-icon-download"
-                size="mini"
-                @click="handleExport"
-                v-hasPermi="['system:user:export']"
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              v-hasPermi="['system:user:export']"
             >导出
             </el-button>
           </el-col>
@@ -162,10 +162,10 @@
           <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
             <template slot-scope="scope">
               <el-switch
-                  v-model="scope.row.status"
-                  active-value="0"
-                  inactive-value="1"
-                  @change="handleStatusChange(scope.row)"
+                v-model="scope.row.status"
+                active-value="0"
+                inactive-value="1"
+                @change="handleStatusChange(scope.row)"
               ></el-switch>
             </template>
           </el-table-column>
@@ -175,26 +175,26 @@
             </template>
           </el-table-column>
           <el-table-column
-              label="操作"
-              align="center"
-              width="160"
-              class-name="small-padding fixed-width"
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
           >
             <template slot-scope="scope" v-if="scope.row.userId !== 1">
               <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-edit"
-                  @click="handleUpdate(scope.row)"
-                  v-hasPermi="['system:user:edit']"
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:user:edit']"
               >修改
               </el-button>
               <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleDelete(scope.row)"
-                  v-hasPermi="['system:user:remove']"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:user:remove']"
               >删除
               </el-button>
               <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
@@ -214,11 +214,11 @@
         </el-table>
 
         <pagination
-            v-show="total>0"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="getList"
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
         />
       </el-col>
     </el-row>
@@ -235,7 +235,7 @@
             <el-col :span="12">
               <el-form-item label="归属部门" prop="deptId">
                 <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
-                            placeholder="请选择归属部门"/>
+                            placeholder="请选择归属部门"  class="custom-treeselect"/>
               </el-form-item>
             </el-col>
           </el-row>
@@ -269,10 +269,10 @@
               <el-form-item label="用户性别">
                 <el-select v-model="form.sex" placeholder="请选择性别" popper-class="cpp-popper">
                   <el-option
-                      v-for="dict in dict.type.sys_user_sex"
-                      :key="dict.value"
-                      :label="dict.label"
-                      :value="dict.value"
+                    v-for="dict in dict.type.sys_user_sex"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
                   ></el-option>
                 </el-select>
               </el-form-item>
@@ -281,9 +281,9 @@
               <el-form-item label="状态">
                 <el-radio-group v-model="form.status">
                   <el-radio
-                      v-for="dict in dict.type.sys_normal_disable"
-                      :key="dict.value"
-                      :label="dict.value"
+                    v-for="dict in dict.type.sys_normal_disable"
+                    :key="dict.value"
+                    :label="dict.value"
                   >{{ dict.label }}
                   </el-radio>
                 </el-radio-group>
@@ -295,11 +295,11 @@
               <el-form-item label="岗位">
                 <el-select v-model="form.postIds" multiple placeholder="请选择岗位" popper-class="cpp-popper">
                   <el-option
-                      v-for="item in postOptions"
-                      :key="item.postId"
-                      :label="item.postName"
-                      :value="item.postId"
-                      :disabled="item.status == 1"
+                    v-for="item in postOptions"
+                    :key="item.postId"
+                    :label="item.postName"
+                    :value="item.postId"
+                    :disabled="item.status == 1"
                   ></el-option>
                 </el-select>
               </el-form-item>
@@ -308,11 +308,11 @@
               <el-form-item label="角色">
                 <el-select v-model="form.roleIds" multiple placeholder="请选择角色" popper-class="cpp-popper">
                   <el-option
-                      v-for="item in roleOptions"
-                      :key="item.roleId"
-                      :label="item.roleName"
-                      :value="item.roleId"
-                      :disabled="item.status == 1"
+                    v-for="item in roleOptions"
+                    :key="item.roleId"
+                    :label="item.roleName"
+                    :value="item.roleId"
+                    :disabled="item.status == 1"
                   ></el-option>
                 </el-select>
               </el-form-item>
@@ -336,16 +336,16 @@
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
       <el-upload
-          ref="upload"
-          :limit="1"
-          accept=".xlsx, .xls"
-          :headers="upload.headers"
-          :action="upload.url + '?updateSupport=' + upload.updateSupport"
-          :disabled="upload.isUploading"
-          :on-progress="handleFileUploadProgress"
-          :on-success="handleFileSuccess"
-          :auto-upload="false"
-          drag
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
@@ -508,10 +508,10 @@ export default {
     getList() {
       this.loading = true;
       listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-            this.userList = response.rows;
-            this.total = response.total;
-            this.loading = false;
-          }
+          this.userList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
       );
     },
     /** 查询部门下拉树结构 */
@@ -712,3 +712,4 @@ export default {
   }
 };
 </script>
+

+ 5 - 0
cpp-ui/样式开发规则.md

@@ -14,4 +14,9 @@ element-ui 新增 修改 删除 按钮大小为 mini
 
 echarts 初始化应用 dark 主题
 echarts.init(document.getElementById(id),'dark')
+
+
+
+vue-treeselect  样式class  custom-treeselect    
+<treeselect  class="custom-treeselect"/>
 ```