页面修改

src/components/huimai/hbrand.vue

@@ -2,28 +2,62 @@
   <div class="performanceStatics">
     <div class="head-title">
       品牌管理
-      <el-button style="float:right;margin-top: -5px;" type="primary" class="el-button--small"
-        @click="CommonJump('hbrandedit')">新增</el-button>
+      <el-button
+        style="float:right;margin-top: -5px;"
+        type="primary"
+        class="el-button--small"
+        @click="CommonJump('hbrandedit')"
+        >新增</el-button
+      >
     </div>
     <div class="content">
       <div style="margin-bottom:20px">
         <span>分类</span>
-        <el-select style="margin:0 10px" class="w200" @change="msg.pageIndex=1,getList()" v-model="msg.CategoryId"
-          size="small" placeholder="请选择" clearable>
+        <el-select
+          style="margin:0 10px"
+          class="w200"
+          @change="(msg.pageIndex = 1), getList()"
+          v-model="msg.CategoryId"
+          size="small"
+          placeholder="请选择"
+          clearable
+        >
           <el-option label="不限" :value="0"></el-option>
-          <el-option v-for="item in CategoryList" :key="item.Id" :label="item.Name" :value="item.Id">
+          <el-option
+            v-for="item in CategoryList"
+            :key="item.Id"
+            :label="item.Name"
+            :value="item.Id"
+          >
           </el-option>
         </el-select>
         <span>品牌名称</span>
-        <el-input type="text" style="width:250px" size="small" maxlength="100" v-model="msg.Name" clearable
-          @input="msg.pageIndex=1,getList()">
+        <el-input
+          type="text"
+          style="width:250px"
+          size="small"
+          maxlength="100"
+          v-model="msg.Name"
+          clearable
+          @input="(msg.pageIndex = 1), getList()"
+        >
         </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="100">
+      <el-table
+        :data="tableData"
+        v-loading="loading"
+        border
+        style="width: 100%"
+      >
+        <el-table-column prop="Id" label="编号" width="100"> </el-table-column>
+        <el-table-column prop="CategoryName" label="所属分类" width="100">
         </el-table-column>
         <el-table-column prop="Name" label="品牌名称" width="200">
         </el-table-column>
@@ -34,118 +68,145 @@
         </el-table-column>
         <el-table-column label="是否热门" width="100px">
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.IsHot==1" effect="dark">
+            <el-tag v-if="scope.row.IsHot == 1" effect="dark">
               热门
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="RemarkDesc" label="上传描述">
-        </el-table-column>
-        <el-table-column prop="MoreDesc" label="备注描述">
-        </el-table-column>
-        <el-table-column label="操作" width="250px">
+        <el-table-column prop="RemarkDesc" label="上传描述"> </el-table-column>
+        <el-table-column prop="MoreDesc" label="备注描述"> </el-table-column>
+        <el-table-column label="操作" width="150px">
           <template slot-scope="scope">
-            <img @click="showBrandForm(scope.row)" src="../../assets/img/userman/edit.png" alt="" />
-            <img @click="RemmoveBrand(scope.row)" style="margin-left:10px;" src="../../assets/img/userman/del.png"
-              alt="" />
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="编辑"
+              placement="top"
+            >
+              <img
+                class="edit-img"
+                src="../../assets/img/userman/edit.png"
+                @click="showBrandForm(scope.row)"
+              />
+            </el-tooltip>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="删除"
+              placement="top"
+            >
+              <img
+                src="../../assets/img/userman/del.png"
+                @click="RemmoveBrand(scope.row)"
+              />
+            </el-tooltip>
           </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>
   </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        loading: false,
-        tableData: [],
-        total: 0,
-        msg: {
-          pageIndex: 1,
-          pageSize: 15,
-          CategoryId: 0, //分类编号
-          Name: '', //品牌名称
-        },
-        CategoryList: [], //分类列表
-        dateList: [], //日期
-      }
-    },
-    created() {
-      this.getCategoryList()
+export default {
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      total: 0,
+      msg: {
+        pageIndex: 1,
+        pageSize: 15,
+        CategoryId: 0, //分类编号
+        Name: "" //品牌名称
+      },
+      CategoryList: [], //分类列表
+      dateList: [] //日期
+    };
+  },
+  created() {
+    this.getCategoryList();
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    //获取分类列表
+    getCategoryList() {
+      this.apipost("/api/Assess/GetCategoryDropList", {}, res => {
+        if (res.data.resultCode == 1) {
+          this.CategoryList = res.data.data;
+        } else {
+          this.Error(res.data.message);
+        }
+      });
     },
-    mounted() {
-      this.getList();
+    refreshPage() {},
+    //新增修改品牌
+    showBrandForm(item) {
+      this.CommonJump("hbrandedit", {
+        Id: item.Id
+      });
     },
-    methods: {
-      //获取分类列表
-      getCategoryList() {
-        this.apipost("/api/Assess/GetCategoryDropList", {}, res => {
-          if (res.data.resultCode == 1) {
-            this.CategoryList = res.data.data;
-          } else {
-            this.Error(res.data.message);
-          }
-        })
-      },
-      refreshPage() {
-
-      },
-      //新增修改品牌
-      showBrandForm(item) {
-        this.CommonJump('hbrandedit', {
-          Id: item.Id
-        })
-      },
-      //删除品牌
-      RemmoveBrand(item) {
-        let that = this;
-        that.Confirm("是否删除此品牌?", function () {
-          that.apipost(
-            "/api/Assess/DelBrandInfo", {
-              BrandId: item.Id,
-            },
-            res => {
-              if (res.data.resultCode == 1) {
-                that.Success(res.data.message);
-                that.getList();
-              } else {
-                that.Error(res.data.message);
-              }
-            },
-          );
-        });
-      },
-      //获取数据
-      getList() {
-        this.loading = true;
-        this.assetsApipost("/api/Assess/GetBrandPageList", this.msg, res => {
-          this.loading = false;
-          if (res.data.resultCode == 1) {
-            this.total = res.data.data.count;
-            this.tableData = res.data.data.pageData;
-          } else {
-            this.Error(res.data.message);
+    //删除品牌
+    RemmoveBrand(item) {
+      let that = this;
+      that.Confirm("是否删除此品牌?", function() {
+        that.apipost(
+          "/api/Assess/DelBrandInfo",
+          {
+            BrandId: item.Id
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              that.Success(res.data.message);
+              that.getList();
+            } else {
+              that.Error(res.data.message);
+            }
           }
-        })
-      },
-      handleCurrentChange(val) {
-        this.msg.pageIndex = val;
-        this.getList();
-      },
+        );
+      });
+    },
+    //获取数据
+    getList() {
+      this.loading = true;
+      this.assetsApipost("/api/Assess/GetBrandPageList", this.msg, res => {
+        this.loading = false;
+        if (res.data.resultCode == 1) {
+          this.total = res.data.data.count;
+          this.tableData = res.data.data.pageData;
+        } else {
+          this.Error(res.data.message);
+        }
+      });
+    },
+    handleCurrentChange(val) {
+      this.msg.pageIndex = val;
+      this.getList();
     }
-  };
-</script>
-<style>
-  .performanceStatics .content {
-    background: #fff;
-    margin-top: 10px;
-    padding: 20px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
   }
-</style>
\ No newline at end of file
+};
+</script>
+<style scope>
+.performanceStatics .content {
+  background: #fff;
+  margin-top: 10px;
+  padding: 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.edit-img {
+  margin-right: 10px;
+}
+</style>