车系接口

src/views/parameter/CarSeries.vue

@@ -11,7 +11,7 @@
           @edit="edit"
           @delet_data="deleteData"
           @car_type="carType"
-          :pageSize='sum'
+          :pageSize="sum"
         ></Table>
       </div>
       <div class="page">
@@ -23,11 +23,17 @@
         ></Tablepage>
       </div>
       <div class="modal" v-if="modalFlag">
-        <Modal :modalFlag="modalFlag" @hide_modal="showModal" @submit='submit'></Modal>
+        <Modal
+          :modalFlag="modalFlag"
+          @hide_modal="showModal"
+          @submit="submit"
+        ></Modal>
       </div>
     </div>
     <div v-else>
-      <CarType />
+      <CarType 
+        :parentId='parentId'
+      />
     </div>
   </div>
 </template>
@@ -52,14 +58,9 @@ export default {
       pageSize: 20, // 每页展示的数据
       currentPage: 1,
       // 表格配置
-      tableData: [{ carSeries: "雷克萨斯ES" }, { carSeries: "雷克萨斯ES2" }],
-      getDate: [
-        { carSeries: "雷克萨斯ES", str: "123" },
-        { carSeries: "雷克萨斯ES", str: "124" },
-        { carSeries: "雷克萨斯ES", str: "125" },
-      ],
-      functionData: [],
+      tableData: [],
       modalFlag: false, // 控制模态框展示
+      parentId: ''
     };
   },
   computed: {
@@ -96,49 +97,136 @@ export default {
       }
       console.log(this.currentPage);
     },
-    // 获取数据
-    getData: function () {
-      this.tableData = [];
-      this.functionData = [];
-      this.getDate.forEach((element) => {
-        this.tableData.push({
-          carSeries: element.carSeries,
-        });
-        this.functionData.push({
-          str: element.str,
-        });
-      });
-    },
     // 展示、隐藏模态框
     showModal: function () {
       this.modalFlag = !this.modalFlag;
     },
     // 模态框保存
-    submit: function(car) {
-      console.log('车系保存', car);
+    submit: function (car) {
+      this.addCarSeries(car).then(() => {
+        this.getDateList();
+      });
       this.modalFlag = false;
     },
     // 点击编辑
     edit(index, newName) {
-      console.log(this.functionData[index].str, newName);
+      let id = this.tableData[index]["id"];
+      console.log(id, newName);
+      let req = {
+        id,
+        typeName: newName,
+      };
+      this.updataCarTypeInfo(req).then(() => {
+        this.getDateList();
+      });
     },
     // 点击删除
-    deleteData: function(index) {
-      console.log("删除", this.functionData[index].str);
+    deleteData: function (index) {
+      let id = this.tableData[index]["id"];
+      console.log(id);
+      this.deleteCarTypeInfo(id).then(() => {
+        this.getDateList();
+      });
+      console.log("删除", index);
     },
     // 点击系列车型
-    carType: function(index) {
+    carType: function (index) {
       // 页面变化
       this.$router.push({ query: { tag: "vehicle_type" } });
-      console.log("点击系列车型", this.functionData[index].str);
+      this.parentId = this.tableData[index]['id']
+    },
+    // 新增车系  接口
+    addCarSeries: function (typeName) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: "/base/carTypeManager/addCarTypeInfo",
+          method: "post",
+          data: { typeName: typeName },
+        })
+          .then((res) => {
+            if (res.data && res.data.code === 200) {
+              resolve();
+            } else {
+              alert("新增失败，请重试");
+              console.log(res);
+            }
+          })
+          .catch((err) => {
+            alert("新增失败，请重试");
+            reject(err);
+          });
+      });
+    },
+    // 获取列表数据  接口
+    getDateList: function () {
+      this.$http({
+        method: "post",
+        url: "/base/carTypeManager/selectCarTypePage",
+        data: {},
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            console.log(res);
+            this.tableData = res.data.data;
+            this.sum = res.data.count;
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 编辑车型   接口
+    updataCarTypeInfo: function (data) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: "/base/carTypeManager/updateCarTypeInfo",
+          method: "post",
+          data,
+        })
+          .then((res) => {
+            if (res.data && res.data.code === 200) {
+              resolve();
+            } else {
+              alert("编辑失败，请重试");
+              console.log(res);
+            }
+          })
+          .catch((err) => {
+            alert("编辑失败，请重试");
+            reject(err);
+          });
+      });
+    },
+    // 删除车型   接口
+    deleteCarTypeInfo: function (id) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: "/base/carTypeManager/deleteCarTypeInfo",
+          method: "post",
+          data: {
+            id,
+          },
+        })
+          .then((res) => {
+            if (res.data && res.data.code === 200) {
+              resolve();
+            } else {
+              alert("删除失败，请重试");
+              console.log(res);
+            }
+          })
+          .catch((err) => {
+            alert("删除失败，请重试");
+            reject(err);
+          });
+      });
     },
-    // 删除数据
-    detletData: function() {
-      console.log('删除数据');
-    }
   },
-  mounted() {
-    this.getData();
+  mounted() {},
+  created() {
+    this.getDateList();
   },
 };
 </script>

src/views/parameter/components/Carseries/CarSeriesTable.vue

@@ -14,7 +14,7 @@
           :class="{ table_gray: index % 2 === 0 }"
         >
           <td style="width: 50%">
-            <p v-if="!editFlag[index]">{{ obj.carSeries }}</p>
+            <p v-if="!editFlag[index]">{{ obj.typeName }}</p>
             <input
               type="text"
               v-model="newName"
@@ -78,7 +78,7 @@ export default {
     // 确认编辑
     submitEdit: function (i) {
       if (!this.newName) {
-        alert("姓名不能为空");
+        alert("车系不能为空");
       } else if (this.newName === this.tableData[i].carSeries) {
         this.newName = ""; // 没有改
       } else {

src/views/parameter/components/Carseries/CarType.vue

@@ -1,49 +1,55 @@
 <template>
   <div>
-  <div class="car_series">
-    <div class="count">
-      <button @click="showModal">新增车型</button>
-      <Count :sum='sum'></Count>
-    </div>
-    <div class="table">
-      <Table
-        :tableData='tableData'
-        @edit='edit'
-        @delet_data='deleteData'
-        :pageSize='sum'
-      ></Table>
-    </div>
-    <div class="page">
-      <Tablepage
-        :totalPage='totalPage'
-        :currentPage='currentPage'
-        @change_page='changePage'
-        @jump_page='jumpPage'
-      ></Tablepage>
-    </div>
-    <div class="modal" v-if="modalFlag">
-      <Modal
-        :modalFlag='modalFlag'
-        @submit='submit'
-        @hide_modal='showModal'
-      ></Modal>
+    <div class="car_series">
+      <div class="count">
+        <button @click="showModal">新增车型</button>
+        <Count :sum="sum"></Count>
+      </div>
+      <div class="table">
+        <Table
+          :tableData="tableData"
+          @edit="edit"
+          @delet_data="deleteData"
+          :pageSize="sum"
+        ></Table>
+      </div>
+      <div class="page">
+        <Tablepage
+          :totalPage="totalPage"
+          :currentPage="currentPage"
+          @change_page="changePage"
+          @jump_page="jumpPage"
+        ></Tablepage>
+      </div>
+      <div class="modal" v-if="modalFlag">
+        <Modal
+          :modalFlag="modalFlag"
+          @submit="submit"
+          @hide_modal="showModal"
+        ></Modal>
+      </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
-import Count from '../../../../components/Count';
-import Tablepage from '../../../../components/TablePage';
-import Table from './CarTypeTable';
+import Count from "../../../../components/Count";
+import Tablepage from "../../../../components/TablePage";
+import Table from "./CarTypeTable";
 import Modal from "./CarTypeModal";
 
 export default {
+  props: {
+    parentId: {
+      type: String,
+      default: "",
+    },
+  },
   components: {
     Count,
     Table,
     Tablepage,
-    Modal
+    Modal,
   },
   data() {
     return {
@@ -51,31 +57,29 @@ export default {
       pageSize: 20, // 每页展示的数据
       currentPage: 1,
       tableData: [],
-      getDate: [{carType: 'ES200', str: '123'},{carType: 'ES@@', str: '124'},{carType: 'ES4', str: '125'},],
-      functionData: [],
       modalFlag: false, // 控制模态框展示
-    }
+    };
   },
-  computed:{
+  computed: {
     // 表格总页数
     totalPage() {
-      return Math.ceil(this.sum/this.pageSize);
+      return Math.ceil(this.sum / this.pageSize);
     },
     // 获取路由参数
     queryTag() {
-      console.log (111, this.$route.query);
-      return (this.$route.query && this.$route.query.tag) ? 0 : 1
-    }
+      console.log(111, this.$route.query);
+      return this.$route.query && this.$route.query.tag ? 0 : 1;
+    },
   },
   methods: {
     // 获取某一页面的数据，展示在表格
-    changePage: function(page) {
+    changePage: function (page) {
       this.currentPage = page;
       console.log(page);
     },
     // 点击上一页，下一页，首页，尾页
-    jumpPage: function(item) {
-      switch(item) {
+    jumpPage: function (item) {
+      switch (item) {
         case 1:
           this.currentPage = 1;
           break;
@@ -91,56 +95,87 @@ export default {
       }
       console.log(this.currentPage);
     },
-    // 获取数据
-    getData: function() {
-      this.tableData = [];
-      this.functionData = [];
-      this.getDate.forEach( (element) => {
-        this.tableData.push(
-          {
-            carType: element.carType
-          }
-        );
-        this.functionData.push(
-          {
-            str: element.str
-          }
-        )
-      });
-    },
     // 展示、隐藏模态框
-    showModal: function() {
+    showModal: function () {
       this.modalFlag = !this.modalFlag;
     },
     // 点击编辑
-    edit (index, newName) {
-      console.log(this.functionData[index].str, newName);
+    edit(index, newName) {
+      console.log(index, newName);
     },
     // 点击删除
-    deleteData (index) {
-      console.log('删除', this.functionData[index].str)
+    deleteData(index) {
+      console.log("删除", index);
     },
     // 新增车型模态框 保存
-    submit: function(car) {
-        console.log('保存', car);
-        this.modalFlag = false;
+    submit: function (car) {
+      this.addCarSeries(car);
+      this.modalFlag = false;
+    },
+        // 获取数据  接口
+    getData: function () {
+      this.$http({
+        method: "post",
+        url: "/base/carTypeManager/selectCarTypePage",
+        data: {
+          parentId: this.parentId
+        },
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            console.log(res);
+            this.tableData = res.data.data;
+            this.sum = res.data.count;
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+        // 新增车系  接口
+    addCarSeries: function (typeName) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: "/base/carTypeManager/addCarTypeInfo",
+          method: "post",
+          data: { 
+            typeName: typeName,
+            parentId: this.parentId
+           },
+        })
+          .then((res) => {
+            if (res.data && res.data.code === 200) {
+              resolve();
+            } else {
+              alert("新增失败，请重试");
+              console.log(res);
+            }
+          })
+          .catch((err) => {
+            alert("新增失败，请重试");
+            reject(err);
+          });
+      });
     },
   },
   mounted() {
     this.getData();
-  }
-}
+    console.log(this.parentId);
+  },
+};
 </script>
 
 <style scoped lang="less">
-.car_series{
-  .count{
+.car_series {
+  .count {
     height: 40px;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    button{
+    button {
       width: 86px;
       height: 30px;
       position: relative;