添加文本框输入验证，按钮样式修改，图片放大预览

src/components/huimai/hbrand.vue

@@ -45,8 +45,8 @@
         </el-table-column>
         <el-table-column label="操作" width="250px">
           <template slot-scope="scope">
-            <el-button size="mini" type="info" plain @click="showBrandForm(scope.row)">编辑 </el-button>
-            <el-button size="mini" type="info" plain @click="RemmoveBrand(scope.row)">删除</el-button>
+            <el-button class="el-icon-s-tools" size="mini" type="info" plain @click="showBrandForm(scope.row)"></el-button>
+            <el-button class="el-icon-delete-solid" size="mini" type="info" plain @click="RemmoveBrand(scope.row)"></el-button>
           </template>
         </el-table-column>
       </el-table>

src/components/huimai/hcategory.vue

@@ -2,84 +2,157 @@
   <div class="performanceStatics">
     <div class="head-title">
       分类管理
-      <el-button style="float:right;margin-top: -5px;" type="primary" class="el-button--small"
-        @click="showCategoryForm(null)">新增</el-button>
+      <el-button
+        style="float:right;margin-top: -5px;"
+        type="primary"
+        class="el-button--small"
+        @click="showCategoryForm(null)"
+        >新增</el-button
+      >
     </div>
     <div class="content">
       <div style="margin-bottom:20px">
         <span>分类名称</span>
-        <el-input type="text" style="width:250px" size="small" maxlength="100" v-model="msg.Name" @input="msg.pageIndex=1,getList()" clearable>
+        <el-input
+          type="text"
+          style="width:250px"
+          size="small"
+          maxlength="100"
+          v-model="msg.Name"
+          @input="(msg.pageIndex = 1), getList()"
+          clearable
+        >
         </el-input>
-        <el-button @click="msg.pageIndex=1,getList()" size="small" type="primary">
+        <el-button
+          @click="(msg.pageIndex = 1), getList()"
+          size="small"
+          type="primary"
+        >
           查询
         </el-button>
       </div>
-      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
-        <el-table-column prop="Id" label="编号" width="150">
-        </el-table-column>
+      <el-table
+        :data="tableData"
+        v-loading="loading"
+        border
+        style="width: 100%"
+      >
+        <el-table-column prop="Id" label="编号" width="150"> </el-table-column>
         <el-table-column prop="Name" label="名称"></el-table-column>
         <el-table-column label="Logo" width="300px">
           <template slot-scope="scope">
-            <img :src="scope.row.Image" style="width:35px;height:35px;" alt="" />
+            <img
+              :src="scope.row.Image"
+              style="width:35px;height:35px;"
+              alt=""
+            />
           </template>
         </el-table-column>
         <el-table-column label="启用状态" width="300px">
           <template slot-scope="scope">
-            {{scope.row.Enable==1?"启用":"禁用"}}
+            {{ scope.row.Enable == 1 ? "启用" : "禁用" }}
           </template>
         </el-table-column>
-        <el-table-column prop="Sort" label="排序">
-        </el-table-column>
+        <el-table-column prop="Sort" label="排序"> </el-table-column>
         <el-table-column label="操作" width="250px">
           <template slot-scope="scope">
-            <el-button size="mini" type="info" plain @click="showCategoryForm(scope.row)">编辑 </el-button>
-            <el-button size="mini" type="info" plain @click="RemmoveCategory(scope.row)">删除</el-button>
+            <el-button
+              class="el-icon-s-tools"
+              size="mini"
+              type="info"
+              plain
+              @click="showCategoryForm(scope.row)"
+            ></el-button>
+            <el-button
+              class="el-icon-delete-solid"
+              size="mini"
+              type="info"
+              plain
+              @click="RemmoveCategory(scope.row)"
+            ></el-button>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
-        :current-page.sync="msg.pageIndex" layout="prev, pager, next" :total="total">
+      <el-pagination
+        style="text-align:right"
+        background
+        @current-change="handleCurrentChange"
+        :page-size="msg.pageSize"
+        :current-page.sync="msg.pageIndex"
+        layout="prev, pager, next"
+        :total="total"
+      >
       </el-pagination>
     </div>
     <!-- 修改分类 -->
-    <el-dialog :title="editTitle" :visible.sync="isShowCategoryForm" width="500px">
-      <el-form label-width="150px">
-        <el-form-item label="分类名称">
-          <el-input type="text" style="width:250px" size="small" maxlength="100" v-model="postMsg.Name">
+    <el-dialog
+      :title="editTitle"
+      :visible.sync="isShowCategoryForm"
+      width="500px"
+    >
+      <el-form :model="postMsg" :rules="rules" label-width="150px">
+        <el-form-item label="分类名称" prop="Name">
+          <el-input
+            type="text"
+            style="width:250px"
+            size="small"
+            maxlength="100"
+            v-model="postMsg.Name"
+          >
           </el-input>
         </el-form-item>
-        <el-form-item label="Logo">
+        <el-form-item label="Logo" prop="file">
           <div>
-            <el-button @click="openChangeDig()" size="small">选择文件</el-button>
+            <el-button @click="openChangeDig()" size="small"
+              >选择文件</el-button
+            >
           </div>
           <div class="indexApp_image">
-            <img v-if="postMsg.Image" :src="postMsg.Image" alt="" style="width:100px;height:100px;" />
+            <img
+              v-if="postMsg.Image"
+              :src="postMsg.Image"
+              alt=""
+              style="width:100px;height:100px;"
+            />
           </div>
         </el-form-item>
-        <el-form-item label="启用状态" prop="name">
+        <el-form-item label="启用状态" prop="Enable">
           <el-radio v-model="postMsg.Enable" :label="1">启用</el-radio>
           <el-radio v-model="postMsg.Enable" :label="2">禁用</el-radio>
         </el-form-item>
-        <el-form-item label="排序">
-          <el-input style="width:250px" size="small" maxlength="200" v-model="postMsg.Sort">
+        <el-form-item label="排序" prop="Sort">
+          <el-input
+            style="width:250px"
+            size="small"
+            maxlength="200"
+            v-model="postMsg.Sort"
+          >
           </el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="isShowCategoryForm = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="saveData()">确 定</el-button>
+        <el-button size="small" @click="isShowCategoryForm = false"
+          >取 消</el-button
+        >
+        <el-button size="small" type="primary" @click="saveData()"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <!-- 选择文件 -->
-    <el-dialog title="选择文件" :visible.sync="isShowChooseImage" width="1240px">
+    <el-dialog
+      title="选择文件"
+      :visible.sync="isShowChooseImage"
+      width="1240px"
+    >
       <ChooseImg @SelectId="SelectId"></ChooseImg>
     </el-dialog>
   </div>
 </template>
 
 <script>
-  import ChooseImg from "@/components/global/ChooseImg.vue";
-  export default {
+import ChooseImg from "@/components/global/ChooseImg.vue";
+export default {
   components: {
     ChooseImg
   },
@@ -91,7 +164,7 @@
       msg: {
         pageIndex: 1,
         pageSize: 15,
-          Name: "",
+        Name: ""
       },
       dateList: [], //日期
       editTitle: "新增分类分类",
@@ -100,24 +173,35 @@
         Name: "",
         Image: "",
         Enable: 1,
-          Sort: 0,
+        Sort: 0
       },
       isShowCategoryForm: false,
       isShowChooseImage: false,
+      rules: {
+        Name: [
+          { required: true, message: "请输入名称", trigger: "blur" }
+        ],
+         Sort: [
+          { required: true, message: "请输入排序", trigger: "blur" }
+        ],
+        Enable: [
+          { required: true, message: "请选择状态", trigger: "change" }
+        ]
+        
       }
+    };
   },
   created() {},
   mounted() {
     this.getList();
-
   },
   methods: {
     openChangeDig() {
       this.isShowChooseImage = true;
     },
     SelectId(msg) {
-        let url = this.getIconLink(msg.url)
-        this.postMsg.Image = url
+      let url = this.getIconLink(msg.url);
+      this.postMsg.Image = url;
       this.isShowChooseImage = false;
     },
     //获取数据
@@ -132,7 +216,7 @@
         } else {
           this.Error(res.data.message);
         }
-        })
+      });
     },
     handleCurrentChange(val) {
       this.msg.pageIndex = val;
@@ -166,15 +250,16 @@
         } else {
           this.Error(res.data.message);
         }
-        })
+      });
     },
     //删除分类
     RemmoveCategory(item) {
       let that = this;
-        that.Confirm("是否删除此分类?", function () {
+      that.Confirm("是否删除此分类?", function() {
         that.apipost(
-            "/api/Assess/DelCategoryInfo", {
-              CategoryId: item.Id,
+          "/api/Assess/DelCategoryInfo",
+          {
+            CategoryId: item.Id
           },
           res => {
             if (res.data.resultCode == 1) {
@@ -183,19 +268,19 @@
             } else {
               that.Error(res.data.message);
             }
-            },
+          }
         );
       });
     }
   }
-  };
+};
 </script>
 <style>
-  .performanceStatics .content {
+.performanceStatics .content {
   background: #fff;
   margin-top: 10px;
   padding: 20px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  }
+}
 </style>