UI 调整

src/views/modules/workSys/demandCate.vue

@@ -1,12 +1,19 @@
 <template>
-  <div v-if="pageLoading" class="resi-container">
+  <div v-if="pageLoading"
-    <el-card  ref="searchCard" class="search-card">
+       class="resi-container">
+    <el-card ref="searchCard"
+             class="search-card">
       <div>
-        <el-form :inline="true" :model="form" class="demo-form-inline">
+        <el-form :inline="true"
+                 :model="form"
+                 class="demo-form-inline">
           <el-form-item label="需求分类">
-            <el-select v-model="form.firstCategoryCode" filterable placeholder="请选择" clearable>
+            <el-select size="small"
-              <el-option
+                       v-model="form.firstCategoryCode"
-                v-for="item in demandOptions"
+                       filterable
+                       placeholder="请选择"
+                       clearable>
+              <el-option v-for="item in demandOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
@@ -14,110 +21,110 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button class="diy-button--search" size="small" @click="handleSearch">查询</el-button>
+            <el-button class="diy-button--search"
+                       size="small"
+                       @click="handleSearch">查询</el-button>
           </el-form-item>
         </el-form>
       </div>
     </el-card>
     <el-card class="resi-card-table">
       <div class="resi-row-btn">
-        <el-button class="diy-button--add" size="small" @click="handleAdd('1', 'add')">新增分类</el-button>
+        <el-button class="diy-button--add"
+                   size="small"
+                   @click="handleAdd('1', 'add')">新增分类</el-button>
       </div>
 
-      <el-table
+      <el-table :data="tableData"
-        :data="tableData"
                 row-key="categoryId"
                 v-loading="tableLoading"
                 border
                 :height="tableHeight"
                 style="width: 100%"
-        class="resi-table"
+                class="resi-table">
-      >
+        <el-table-column label="序号"
-        <el-table-column label="序号" type="index" align="center" width="50">
+                         type="index"
+                         align="center"
+                         width="50">
           <template slot-scope="scope">{{ scope.row.index }}</template>
         </el-table-column>
-        <el-table-column
+        <el-table-column v-for="item in tableHeader"
-          v-for="item in tableHeader"
                          :key="item.columnName"
                          :prop="item.columnName"
                          :label="item.label"
-          :align="item.align"
+                         :align="item.align">
-        >
           <template slot-scope="scope">
             <span>{{ handleFilterSpan(scope.row, item) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="200">
+        <el-table-column label="操作"
+                         align="center"
+                         width="200">
           <template slot-scope="scope">
-            <el-button
+            <el-button v-if="scope.row.hasBtn"
-              v-if="scope.row.hasBtn"
                        @click="handleLook(scope.row)"
                        type="text"
                        size="small"
-              class="div-table-button--detail"
+                       class="div-table-button--detail">{{(scope.row.usableFlag&&'禁用') || '启用'}}</el-button>
-              >{{(scope.row.usableFlag&&'禁用') || '启用'}}</el-button
+            <el-button v-if="scope.row.level == 1"
-            >
-            <el-button
-                v-if="scope.row.level == 1"
                        @click="handleAdd('2', 'add', scope.row)"
                        type="text"
                        size="small"
-                class="div-table-button--delete"
+                       class="div-table-button--delete">添加二级分类</el-button>
-                >添加二级分类</el-button
+            <el-button @click="handleEdit(scope.row, 'edit')"
-              >
-            <el-button
-                @click="handleEdit(scope.row, 'edit')"
                        type="text"
                        size="small"
-                class="div-table-button--edit"
+                       class="div-table-button--edit">编辑</el-button>
-                >编辑</el-button
-              >
           </template>
         </el-table-column>
       </el-table>
       <div>
-        <el-pagination
+        <el-pagination @size-change="handleSizeChange"
-          @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[20, 50, 100, 200]"
                        :page-size="pageSize"
                        layout="sizes, prev, pager, next, total"
-          :total="total"
+                       :total="total">
-        >
         </el-pagination>
       </div>
     </el-card>
 
-    <el-dialog
+    <el-dialog title="居民需求分类"
-      title="居民需求分类"
                :visible.sync="dialogVisible"
                width="40%"
                append-to-body
                :close-on-click-modal="false"
-      :before-close="handlerCancle"
+               :before-close="handlerCancle">
-    >
+      <el-form label-width="100px"
-      <el-form label-width="100px" :model="form" :rules="rules" ref="ruleForm">
+               :model="form"
-        <el-form-item label="分类名称" prop="categoryName">
+               :rules="rules"
-          <el-input v-model="form.categoryName" size="small" style="width: 180px;"></el-input>
+               ref="ruleForm">
+        <el-form-item label="分类名称"
+                      prop="categoryName">
+          <el-input v-model="form.categoryName"
+                    size="small"
+                    style="width: 180px;"></el-input>
         </el-form-item>
 
         <!-- <el-form-item label="状态">
           <el-switch v-model="form.usableFlag"></el-switch>
         </el-form-item> -->
-        <el-form-item v-if="addLevel == '2'" label="奖励积分">
+        <el-form-item v-if="addLevel == '2'"
-          <el-input-number v-model="form.awardPoint" :min="0" size="small" label="描述文字"></el-input-number>
+                      label="奖励积分">
+          <el-input-number v-model="form.awardPoint"
+                           :min="0"
+                           size="small"
+                           label="描述文字"></el-input-number>
         </el-form-item>
       </el-form>
       <div class="resi-btns">
-        <el-button size="small" @click="handlerCancle">取消</el-button>
+        <el-button size="small"
-        <el-button
+                   @click="handlerCancle">取消</el-button>
-          type="primary"
+        <el-button type="primary"
                    size="small"
                    :loading="btnLoading"
-          @click="handleSUbmit"
+                   @click="handleSUbmit">提交</el-button>
-          >提交</el-button
-        >
       </div>
     </el-dialog>
 
@@ -444,7 +451,6 @@ export default {
     }
 
     .cell {
-      
       span:nth-of-type(3) {
         display: inline-block;
         width: 90%;
@@ -483,14 +489,13 @@ export default {
   }
 }
 .avatar-uploader {
-  ::v-deep
+  ::v-deep .el-upload {
-  .el-upload {
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
   .el-upload:hover {
-    border-color: #409EFF;
+    border-color: #409eff;
   }
   .avatar {
     width: 70px;
@@ -509,8 +514,6 @@ export default {
   }
 }
 
-  
-
 .resi-btns {
   margin-top: 20px;
   text-align: center;