前段属性组的添加,列表,修改

src/api/product/attribute.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+// 查询属性列表
+export function list(name) {
+  return request({
+    url: '/product/attributeInfo/list?name='+name,
+    method: 'get'
+  })
+}
+
+//新增属性
+export function insertAttribute(attribute) {
+  return request({
+    url: '/product/attributeInfo/insertAttribute',
+    method: 'post',
+    data: attribute
+  })
+}
+
+//删除属性
+export function deleteById(attributeInfoId) {
+  return request({
+    url: '/product/attributeInfo/deleteAttributeById?attributeInfoId='+attributeInfoId,
+    method: 'get'
+  })
+}
+//获取属性组列表
+export function getAttributeGroupList(attributeName) {
+  return request({
+    url: '/product/attributeGroup/getAttributeGroupList?attributeName='+attributeName,
+    method: 'get'
+  })
+}
+
+export function insertAttributeGroup(attributeGroupReq) {
+  return request({
+    url: '/product/attributeGroup/insertAttributeGroup',
+    method: 'post',
+    data: attributeGroupReq
+  })
+}

src/utils/request.js

@@ -73,7 +73,7 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-  debugger
+
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息

src/views/product/attribute/attributeGroup.vue

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <el-table
+      :data="attributeGroupList"
+      style="width: 100%">
+      <el-table-column
+        label="属性组编号"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" >{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="属性组名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" >{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="下辖属性"
+        width="180">
+        <template slot-scope="scope">
+
+          <el-row>
+            <el-col v-for="attribute in scope.row.attributeInfos">
+              <el-tag
+                :key="attribute.id"
+                type="">
+                {{attribute.name}}
+              </el-tag>
+            </el-col>
+          </el-row>
+
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="备注"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" >{{ scope.row.remark }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px" value-format="yyyy-MM-dd HH:dd:ss">{{ scope.row.createTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建人"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" >{{ scope.row.createBy }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-button
+      size="mini"
+      type="danger"
+      @click="queryAttributeList">新增</el-button>
+    <el-dialog title="收货地址" :visible.sync="isOpenAddAttributeGroup">
+      <el-form :model="attributeGroupReq">
+        <el-form-item label="属性组名称" :label-width="formLabelWidth">
+          <el-input v-model="attributeGroupReq.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" :label-width="formLabelWidth">
+          <el-input v-model="attributeGroupReq.remark" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="已选属性" :label-width="formLabelWidth">
+          <el-tag
+            v-for="attribute in attributeGroupReq.selectAttributeList"
+            v-model="attributeGroupReq.selectAttributeList"
+            :key="attribute.id"
+            closable
+            :disable-transitions="false"
+            @close="handleClose(attribute)">
+            {{attribute.name}}
+          </el-tag>
+        </el-form-item>
+      </el-form>
+      <br>
+      <span>可选属性</span>
+      <div>
+        <el-checkbox  @change="updateAttribute(attribute)"
+                      style="margin-left: 10px"
+                      v-for="attribute in attributeList"
+                      :key="attribute.id"
+                      v-model="attribute.checked"
+                      :label="attribute.name" border></el-checkbox>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="isOpenAddAttributeGroup = false">取 消</el-button>
+        <el-button type="primary" @click="insertAttributeGroup">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+  import {getAttributeGroupList, list, insertAttributeGroup} from "@/api/product/attribute";
+import attribute from "@/views/product/attribute/index.vue";
+
+export default {
+    name: "attributeGroup",
+    //import引入的组件需要注入到对象中才能使用"
+    components: {},
+    props: {},
+    data() {
+
+      //这里存放数据"
+      return {
+        attributeName:"",
+        attributeGroupList: [],
+        isOpenAddAttributeGroup: false,
+        formLabelWidth: "120px",
+        //新增请求对象
+        attributeGroupReq: {
+          //已选中属性
+          selectAttributeList: []
+        },
+        attributeQueryName: "",
+        //未选中
+        attributeList: [],
+
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      //修改
+      handleDelete(index, row) {
+        this.isOpenAddAttributeGroup = true
+        console.log(index, row);
+        this.attributeGroupReq = row
+        this.attributeGroupReq.selectAttributeList = row.attributeInfos
+        list(this.attributeQueryName).then(
+          res => {
+            this.attributeList = res.data
+            this.attributeList.forEach(
+              attribute => {
+                this.attributeGroupReq.selectAttributeList.forEach(
+                  attributeReq =>{
+                    if (attribute.id == attributeReq.id){
+                      console.log("六六六")
+                      attribute.checked = true
+                    }
+                  }
+                )
+              }
+            )
+          }
+        )
+
+      },
+      //重置属性
+      reset() {
+        this.attributeGroupReq = {
+          selectAttributeList: []
+        },
+          this.attributeList =[]
+      },
+      //删除选中属性
+      handleClose(attribute){
+        console.log(this.attributeGroupList)
+        debugger
+        this.attributeList.forEach(attr => {
+
+          if (attr.id == attribute.id) {
+            attr.checked = false
+          }
+        })
+        this.attributeGroupReq.selectAttributeList = this.attributeGroupReq.selectAttributeList.filter(item => item!=attribute);
+      },
+      //更新选中属性
+      updateAttribute(attribute) {
+        if (this.attributeGroupReq.selectAttributeList.includes(attribute)){
+          this.attributeGroupReq.selectAttributeList = this.attributeGroupReq.selectAttributeList.filter(item => item !== attribute)
+        }else{
+          this.attributeGroupReq.selectAttributeList.push(attribute)
+        }
+      },
+      //得到属性组列表
+      getAttributeGroupList(){
+        getAttributeGroupList(this.attributeName).then(
+          res => {
+            console.log(res);
+            this.attributeGroupList = res.data
+          }
+        )
+      },
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      queryAttributeList(){
+        this.isOpenAddAttributeGroup = true
+        list(this.attributeQueryName).then(
+          res => {
+            this.attributeList = res.data
+          }
+        )
+      },
+      insertAttributeGroup() {
+        console.log(this.attributeGroupReq)
+        insertAttributeGroup(this.attributeGroupReq).then(
+          res => {
+            this.reset();
+            this.getAttributeGroupList()
+            this.isOpenAddAttributeGroup = false
+          }
+        )
+      }
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+      this.getAttributeGroupList()
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+
+</style>

src/views/product/attribute/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <el-table
+      :data="attributeList"
+      style="width: 100%">
+      <el-table-column
+        label="创建日期"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px"
+          value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.createTime }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="创建人"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px"
+                value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.createBy }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="属性编号"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px"
+                value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="属性名称"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px"
+                value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="属性描述"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px"
+                value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.remark }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleEdit(scope.$index, scope.row)" v-hasPermi="['product:attribute:update']">修改</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)" v-hasPermi="['product:attribute:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-button size="mini" type="primary" @click="openAdd = true" v-hasPermi="['product:attribute:add']">新增</el-button>
+
+    <el-dialog title="属性信息" :visible.sync="openAdd">
+      <el-form :model="addAttribute">
+        <el-form-item label="属性名称" :label-width="formLabelWidth">
+          <el-input v-model="addAttribute.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="属性备注" :label-width="formLabelWidth">
+          <el-input v-model="addAttribute.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelInsert">取 消</el-button>
+        <el-button type="primary" @click="insertAttribute">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {deleteById, insertAttribute, list} from "@/api/product/attribute";
+
+export default {
+    name: 'attribute',
+    //import引入的组件需要注入到对象中才能使用"
+    components: {},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+        formLabelWidth: '120px',
+        //获取属性列表的请求参数
+        attributeName: "",
+        //得到的属性列表
+        attributeList: [],
+        //新增属性需要的参数
+        addAttribute: {
+          name: '',
+          remark: ''
+        },
+        //是否显示新增谈话框
+        openAdd: false
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      //修改方法
+      handleEdit(index, row) {
+        console.log(index, row);
+        this.addAttribute["name"] = row.name
+        this.addAttribute["remark"] = row.remark
+        this.addAttribute["id"] = row.id
+        this.openAdd = true
+
+      },
+      //删除方法
+      handleDelete(index, row) {
+        deleteById(row.id).then(
+          res=>{
+            console.log(res)
+            this.getAttributeList()
+          }
+        )
+        console.log(index, row);
+      },
+      //获取列表方法
+      getAttributeList(){
+        list(this.attributeName).then(
+          res => {
+            this.attributeList = res.data
+            console.log(res)
+          }
+        )
+      },
+      //新增方法
+      insertAttribute(){
+        insertAttribute(this.addAttribute).then(
+          this.getAttributeList
+        )
+        this.addAttribute["name"] = ""
+        this.addAttribute["remark"] = ""
+        this.addAttribute["id"] = ""
+        this.openAdd = false
+
+      },
+      //新增取消
+      cancelInsert(){
+        this.openAdd = false
+        this.addAttribute = {}
+      },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+      this.getAttributeList()
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+
+</style>