代码和资料文档参考下一章：属性分组-后端（商品服务完成）

image.png

属性分组页面组件-attrgroup.vue

  1. <template>
  2.   <el-row :gutter="20">
  3.     <el-col :span="6">
  4.       <category @tree-node-click="treenodeclick"></category>
  5.     </el-col>
  6.     <el-col :span="18">
  7.       <div class="mod-config">
  8.         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
  9.           <el-form-item>
  10.             <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
  11.           </el-form-item>
  12.           <el-form-item>
  13.             <el-button @click="getDataList()">查询</el-button>
  14.             <el-button type="success" @click="getAllDataList()">查询全部</el-button>
  15.             <el-button
  16.               v-if="isAuth('product:attrgroup:save')"
  17.               type="primary"
  18.               @click="addOrUpdateHandle()"
  19.             >新增
  20.             </el-button>
  21.             <el-button
  22.               v-if="isAuth('product:attrgroup:delete')"
  23.               type="danger"
  24.               @click="deleteHandle()"
  25.               :disabled="dataListSelections.length <= 0"
  26.             >批量删除
  27.             </el-button>
  28.           </el-form-item>
  29.         </el-form>
  30.         <el-table
  31.           :data="dataList"
  32.           border
  33.           v-loading="dataListLoading"
  34.           @selection-change="selectionChangeHandle"
  35.           style="width: 100%;"
  36.         >
  37.           <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
  38.           <el-table-column prop="attrGroupId" header-align="center" align="center" label="分组id"></el-table-column>
  39.           <el-table-column prop="attrGroupName" header-align="center" align="center" label="组名"></el-table-column>
  40.           <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
  41.           <el-table-column prop="descript" header-align="center" align="center" label="描述"></el-table-column>
  42.           <el-table-column prop="icon" header-align="center" align="center" label="组图标"></el-table-column>
  43.           <el-table-column prop="catelogId" header-align="center" align="center" label="所属分类id"></el-table-column>
  44.           <el-table-column
  45.             fixed="right"
  46.             header-align="center"
  47.             align="center"
  48.             width="150"
  49.             label="操作"
  50.           >
  51.             <template slot-scope="scope">
  52.               <el-button type="text" size="small" @click="relationHandle(scope.row.attrGroupId)">关联</el-button>
  53.               <el-button
  54.                 type="text"
  55.                 size="small"
  56.                 @click="addOrUpdateHandle(scope.row.attrGroupId)"
  57.               >修改
  58.               </el-button>
  59.               <el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId)">删除</el-button>
  60.             </template>
  61.           </el-table-column>
  62.         </el-table>
  63.         <el-pagination
  64.           @size-change="sizeChangeHandle"
  65.           @current-change="currentChangeHandle"
  66.           :current-page="pageIndex"
  67.           :page-sizes="[10, 20, 50, 100]"
  68.           :page-size="pageSize"
  69.           :total="totalPage"
  70.           layout="total, sizes, prev, pager, next, jumper"
  71.         ></el-pagination>
  72.         <!-- 弹窗, 新增 / 修改 -->
  73.         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  75.         <!-- 修改关联关系 -->
  76.         <relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update>
  77.       </div>
  78.     </el-col>
  79.   </el-row>
  80. </template>
  82. <script>
  83. /**
  84.  * 父子组件传递数据
  85.  * 1)、子组件给父组件传递数据，事件机制；
  86.  *    子组件给父组件发送一个事件，携带上数据。
  87.  * // this.$emit("事件名",携带的数据...)
  88.  */
  89. //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  90. //例如：import 《组件名称》 from '《组件路径》';
  91. import Category from "@/views/common/category";
  92. import AddOrUpdate from "./attrgroup-add-or-update";
  93. import RelationUpdate from "./attr-group-relation";
  95. export default {
  96.   //import引入的组件需要注入到对象中才能使用
  97.   components: {Category, AddOrUpdate, RelationUpdate},
  98.   props: {},
  99.   data() {
  100.     return {
  101.       catId: 0,
  102.       dataForm: {
  103.         key: ""
  104.       },
  105.       dataList: [],
  106.       pageIndex: 1,
  107.       pageSize: 10,
  108.       totalPage: 0,
  109.       dataListLoading: false,
  110.       dataListSelections: [],
  111.       addOrUpdateVisible: false,
  112.       relationVisible: false
  113.     };
  114.   },
  115.   activated() {
  116.     this.getDataList();
  117.   },
  118.   methods: {
  119.     //处理分组与属性的关联
  120.     relationHandle(groupId) {
  121.       this.relationVisible = true;
  122.       this.$nextTick(() => {
  123.         this.$refs.relationUpdate.init(groupId);
  124.       });
  125.     },
  126.     //感知树节点被点击
  127.     treenodeclick(data, node, component) {
  128.       if (node.level === 3) {
  129.         this.catId = data.catId;
  130.         this.getDataList(); //重新查询
  131.       }
  132.     },
  133.     getAllDataList() {
  134.       this.catId = 0;
  135.       this.getDataList();
  136.     },
  137.     // 获取数据列表
  138.     getDataList() {
  139.       this.dataListLoading = true;
  140.       this.$http({
  141.         url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
  142.         method: "get",
  143.         params: this.$http.adornParams({
  144.           page: this.pageIndex,
  145.           limit: this.pageSize,
  146.           key: this.dataForm.key
  147.         })
  148.       }).then(({data}) => {
  149.         if (data && data.code === 0) {
  150.           this.dataList = data.page.list;
  151.           this.totalPage = data.page.totalCount;
  152.         } else {
  153.           this.dataList = [];
  154.           this.totalPage = 0;
  155.         }
  156.         this.dataListLoading = false;
  157.       });
  158.     },
  159.     // 每页数
  160.     sizeChangeHandle(val) {
  161.       this.pageSize = val;
  162.       this.pageIndex = 1;
  163.       this.getDataList();
  164.     },
  165.     // 当前页
  166.     currentChangeHandle(val) {
  167.       this.pageIndex = val;
  168.       this.getDataList();
  169.     },
  170.     // 多选
  171.     selectionChangeHandle(val) {
  172.       this.dataListSelections = val;
  173.     },
  174.     // 新增 / 修改
  175.     addOrUpdateHandle(id) {
  176.       this.addOrUpdateVisible = true;
  177.       this.$nextTick(() => {
  178.         this.$refs.addOrUpdate.init(id);
  179.       });
  180.     },
  181.     // 删除
  182.     deleteHandle(id) {
  183.       var ids = id
  184.         ? [id]
  185.         : this.dataListSelections.map(item => {
  186.           return item.attrGroupId;
  187.         });
  188.       this.$confirm(
  189.         `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
  190.         "提示",
  191.         {
  192.           confirmButtonText: "确定",
  193.           cancelButtonText: "取消",
  194.           type: "warning"
  195.         }
  196.       ).then(() => {
  197.         this.$http({
  198.           url: this.$http.adornUrl("/product/attrgroup/delete"),
  199.           method: "post",
  200.           data: this.$http.adornData(ids, false)
  201.         }).then(({data}) => {
  202.           if (data && data.code === 0) {
  203.             this.$message({
  204.               message: "操作成功",
  205.               type: "success",
  206.               duration: 1500,
  207.               onClose: () => {
  208.                 this.getDataList();
  209.               }
  210.             });
  211.           } else {
  212.             this.$message.error(data.msg);
  213.           }
  214.         });
  215.       });
  216.     }
  217.   }
  218. };
  219. </script>
  220. <style scoped>
  221. </style>

属性分组新增/修改组件-attrgroup-add-or-update.vue

此组件是属性分组点击新增或修改按钮弹出表单弹框的页面

  1. <template>
  2.   <el-dialog
  3.     :title="!dataForm.id ? '新增' : '修改'"
  4.     :close-on-click-modal="false"
  5.     :visible.sync="visible"
  6.     @closed="dialogClose"
  7.   >
  8.     <el-form
  9.       :model="dataForm"
  10.       :rules="dataRule"
  11.       ref="dataForm"
  12.       @keyup.enter.native="dataFormSubmit()"
  13.       label-width="120px"
  14.     >
  15.       <el-form-item label="组名" prop="attrGroupName">
  16.         <el-input v-model="dataForm.attrGroupName" placeholder="组名"></el-input>
  17.       </el-form-item>
  18.       <el-form-item label="排序" prop="sort">
  19.         <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
  20.       </el-form-item>
  21.       <el-form-item label="描述" prop="descript">
  22.         <el-input v-model="dataForm.descript" placeholder="描述"></el-input>
  23.       </el-form-item>
  24.       <el-form-item label="组图标" prop="icon">
  25.         <el-input v-model="dataForm.icon" placeholder="组图标"></el-input>
  26.       </el-form-item>
  27.       <el-form-item label="所属分类" prop="catelogId">
  28.         <!-- <el-input v-model="dataForm.catelogId" placeholder="所属分类id"></el-input> @change="handleChange" -->
  29.         <!-- <el-cascader filterable placeholder="试试搜索：手机" v-model="catelogPath" :options="categorys"  :props="props"></el-cascader> -->
  30.         <!-- :catelogPath="catelogPath"自定义绑定的属性，可以给子组件传值 -->
  31.         <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
  32.       </el-form-item>
  33.     </el-form>
  34.     <span slot="footer" class="dialog-footer">
  35.       <el-button @click="visible = false">取消</el-button>
  36.       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
  37.     </span>
  38.   </el-dialog>
  39. </template>
  41. <script>
  42. import CategoryCascader from '@/views/common/category-cascader'
  43. export default {
  44.   data() {
  45.     return {
  46.       props:{
  47.         value:"catId",
  48.         label:"name",
  49.         children:"children"
  50.       },
  51.       visible: false,
  52.       categorys: [],
  53.       catelogPath: [],
  54.       dataForm: {
  55.         attrGroupId: 0,
  56.         attrGroupName: "",
  57.         sort: "",
  58.         descript: "",
  59.         icon: "",
  60.         catelogId: 0
  61.       },
  62.       dataRule: {
  63.         attrGroupName: [
  64.           { required: true, message: "组名不能为空", trigger: "blur" }
  65.         ],
  66.         sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
  67.         descript: [
  68.           { required: true, message: "描述不能为空", trigger: "blur" }
  69.         ],
  70.         icon: [{ required: true, message: "组图标不能为空", trigger: "blur" }],
  71.         catelogId: [
  72.           { required: true, message: "所属分类id不能为空", trigger: "blur" }
  73.         ]
  74.       }
  75.     };
  76.   },
  77.   components:{CategoryCascader},
  79.   methods: {
  80.     dialogClose(){
  81.       this.catelogPath = [];
  82.     },
  83.     getCategorys(){
  84.       this.$http({
  85.         url: this.$http.adornUrl("/product/category/list/tree"),
  86.         method: "get"
  87.       }).then(({ data }) => {
  88.         this.categorys = data.data;
  89.       });
  90.     },
  91.     init(id) {
  92.       this.dataForm.attrGroupId = id || 0;
  93.       this.visible = true;
  94.       this.$nextTick(() => {
  95.         this.$refs["dataForm"].resetFields();
  96.         if (this.dataForm.attrGroupId) {
  97.           this.$http({
  98.             url: this.$http.adornUrl(
  99.               `/product/attrgroup/info/${this.dataForm.attrGroupId}`
  100.             ),
  101.             method: "get",
  102.             params: this.$http.adornParams()
  103.           }).then(({ data }) => {
  104.             if (data && data.code === 0) {
  105.               this.dataForm.attrGroupName = data.attrGroup.attrGroupName;
  106.               this.dataForm.sort = data.attrGroup.sort;
  107.               this.dataForm.descript = data.attrGroup.descript;
  108.               this.dataForm.icon = data.attrGroup.icon;
  109.               this.dataForm.catelogId = data.attrGroup.catelogId;
  110.               //查出catelogId的完整路径
  111.               this.catelogPath =  data.attrGroup.catelogPath;
  112.             }
  113.           });
  114.         }
  115.       });
  116.     },
  117.     // 表单提交
  118.     dataFormSubmit() {
  119.       this.$refs["dataForm"].validate(valid => {
  120.         if (valid) {
  121.           this.$http({
  122.             url: this.$http.adornUrl(
  123.               `/product/attrgroup/${
  124.                 !this.dataForm.attrGroupId ? "save" : "update"
  125.               }`
  126.             ),
  127.             method: "post",
  128.             data: this.$http.adornData({
  129.               attrGroupId: this.dataForm.attrGroupId || undefined,
  130.               attrGroupName: this.dataForm.attrGroupName,
  131.               sort: this.dataForm.sort,
  132.               descript: this.dataForm.descript,
  133.               icon: this.dataForm.icon,
  134.               catelogId: this.catelogPath[this.catelogPath.length-1]
  135.             })
  136.           }).then(({ data }) => {
  137.             if (data && data.code === 0) {
  138.               this.$message({
  139.                 message: "操作成功",
  140.                 type: "success",
  141.                 duration: 1500,
  142.                 onClose: () => {
  143.                   this.visible = false;
  144.                   this.$emit("refreshDataList");
  145.                 }
  146.               });
  147.             } else {
  148.               this.$message.error(data.msg);
  149.             }
  150.           });
  151.         }
  152.       });
  153.     }
  154.   },
  155.   created(){
  156.     this.getCategorys();
  157.   }
  158. };
  159. </script>

获取三级分类组件-category.vue

属性分组页面左侧三级分类显示的组件

  1. <template>
  2.   <div>
  3.     <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
  4.     <el-tree
  5.       :data="menus"
  6.       :props="defaultProps"
  7.       node-key="catId"
  8.       ref="menuTree"
  9.       @node-click="nodeclick"
  10.       :filter-node-method="filterNode"
  11.       :highlight-current="true"
  12.     ></el-tree>
  13.   </div>
  14. </template>
  16. <script>
  17. //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  18. //例如：import 《组件名称》 from '《组件路径》';
  20. export default {
  21.   //import引入的组件需要注入到对象中才能使用
  22.   components: {},
  23.   props: {},
  24.   data() {
  25.     //这里存放数据
  26.     return {
  27.       filterText: "",
  28.       menus: [],
  29.       expandedKey: [],
  30.       defaultProps: {
  31.         children: "children",
  32.         label: "name"
  33.       }
  34.     };
  35.   },
  36.   //计算属性 类似于data概念
  37.   computed: {},
  38.   //监控data中的数据变化
  39.   watch: {
  40.     filterText(val) {
  41.       this.$refs.menuTree.filter(val);
  42.     }
  43.   },
  44.   //方法集合
  45.   methods: {
  46.     //树节点过滤
  47.     filterNode(value, data) {
  48.       if (!value) return true;
  49.       return data.name.indexOf(value) !== -1;
  50.     },
  51.     getMenus() {
  52.       this.$http({
  53.         url: this.$http.adornUrl("/product/category/list/tree"),
  54.         method: "get"
  55.       }).then(({data}) => {
  56.         this.menus = data.data;
  57.       });
  58.     },
  59.     nodeclick(data, node, component) {
  60.       console.log("子组件category的节点被点击", data, node, component);
  61.       //向父组件发送事件；
  62.       this.$emit("tree-node-click", data, node, component);
  63.     }
  64.   },
  65.   //生命周期 - 创建完成（可以访问当前this实例）
  66.   created() {
  67.     this.getMenus();
  68.   },
  69.   //生命周期 - 挂载完成（可以访问DOM元素）
  70.   mounted() {
  71.   },
  72.   beforeCreate() {
  73.   }, //生命周期 - 创建之前
  74.   beforeMount() {
  75.   }, //生命周期 - 挂载之前
  76.   beforeUpdate() {
  77.   }, //生命周期 - 更新之前
  78.   updated() {
  79.   }, //生命周期 - 更新之后
  80.   beforeDestroy() {
  81.   }, //生命周期 - 销毁之前
  82.   destroyed() {
  83.   }, //生命周期 - 销毁完成
  84.   activated() {
  85.   } //如果页面有keep-alive缓存功能，这个函数会触发
  86. };
  87. </script>
  88. <style scoped>
  89. </style>

分类级联选择组件-category-cascader.vue

此组件可以生成级联选择三级分类，属性分组新增修改时选择三级分类使用

  1. <template>
  2. <!--
  3. 使用说明：
  4. 1）、引入category-cascader.vue
  5. 2）、语法：<category-cascader :catelogPath.sync="catelogPath"></category-cascader>
  6.     解释：
  7.       catelogPath：指定的值是cascader初始化需要显示的值，应该和父组件的catelogPath绑定;
  8.           由于有sync修饰符，所以cascader路径变化以后自动会修改父的catelogPath，这是结合子组件this.$emit("update:catelogPath",v);做的
  9.       -->
  10.   <div>
  11.     <el-cascader
  12.       filterable
  13.       clearable
  14.       placeholder="试试搜索：手机"
  15.       v-model="paths"
  16.       :options="categorys"
  17.       :props="setting"
  18.     ></el-cascader>
  19.   </div>
  20. </template>
  22. <script>
  23. //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  24. //例如：import 《组件名称》 from '《组件路径》';
  26. export default {
  27.   //import引入的组件需要注入到对象中才能使用
  28.   components: {},
  29.   //接受父组件传来的值
  30.   props: {
  31.     catelogPath: {
  32.       type: Array,
  33.       default(){
  34.         return [];
  35.       }
  36.     }
  37.   },
  38.   data() {
  39.     //这里存放数据
  40.     return {
  41.       setting: {
  42.         value: "catId",
  43.         label: "name",
  44.         children: "children"
  45.       },
  46.       categorys: [],
  47.       paths: this.catelogPath
  48.     };
  49.   },
  50.   watch:{
  51.     catelogPath(v){
  52.       this.paths = this.catelogPath;
  53.       console.log(this.paths)
  54.     },
  55.     paths(v){
  56.       this.$emit("update:catelogPath",v);
  57.       //还可以使用pubsub-js进行传值
  58.       PubSub.publish("catPath",v);
  59.     }
  60.   },
  61.   //方法集合
  62.   methods: {
  63.     getCategorys() {
  64.       this.$http({
  65.         url: this.$http.adornUrl("/product/category/list/tree"),
  66.         method: "get"
  67.       }).then(({ data }) => {
  68.         this.categorys = data.data;
  69.       });
  70.     }
  71.   },
  72.   //生命周期 - 创建完成（可以访问当前this实例）
  73.   created() {
  74.     this.getCategorys();
  75.   }
  76. };
  77. </script>
  78. <style scoped>
  79. </style>

属性分组关联组件-attr-group-relation.vue

  1. <template>
  2.   <div>
  3.     <el-dialog :close-on-click-modal="false" :visible.sync="visible" @closed="dialogClose">
  4.       <el-dialog width="40%" title="选择属性" :visible.sync="innerVisible" append-to-body>
  5.         <div>
  6.           <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
  7.             <el-form-item>
  8.               <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
  9.             </el-form-item>
  10.             <el-form-item>
  11.               <el-button @click="getDataList()">查询</el-button>
  12.             </el-form-item>
  13.           </el-form>
  14.           <el-table
  15.             :data="dataList"
  16.             border
  17.             v-loading="dataListLoading"
  18.             @selection-change="innerSelectionChangeHandle"
  19.             style="width: 100%;"
  20.           >
  21.             <el-table-column type="selection" header-align="center" align="center"></el-table-column>
  22.             <el-table-column prop="attrId" header-align="center" align="center" label="属性id"></el-table-column>
  23.             <el-table-column prop="attrName" header-align="center" align="center" label="属性名"></el-table-column>
  24.             <el-table-column prop="icon" header-align="center" align="center" label="属性图标"></el-table-column>
  25.             <el-table-column prop="valueSelect" header-align="center" align="center" label="可选值列表"></el-table-column>
  26.           </el-table>
  27.           <el-pagination
  28.             @size-change="sizeChangeHandle"
  29.             @current-change="currentChangeHandle"
  30.             :current-page="pageIndex"
  31.             :page-sizes="[10, 20, 50, 100]"
  32.             :page-size="pageSize"
  33.             :total="totalPage"
  34.             layout="total, sizes, prev, pager, next, jumper"
  35.           ></el-pagination>
  36.         </div>
  37.         <div slot="footer" class="dialog-footer">
  38.           <el-button @click="innerVisible = false">取 消</el-button>
  39.           <el-button type="primary" @click="submitAddRealtion">确认新增</el-button>
  40.         </div>
  41.       </el-dialog>
  42.       <el-row>
  43.         <el-col :span="24">
  44.           <el-button type="primary" @click="addRelation">新建关联</el-button>
  45.           <el-button
  46.             type="danger"
  47.             @click="batchDeleteRelation"
  48.             :disabled="dataListSelections.length <= 0"
  49.           >批量删除
  50.           </el-button>
  51.           <!--  -->
  52.           <el-table
  53.             :data="relationAttrs"
  54.             style="width: 100%"
  55.             @selection-change="selectionChangeHandle"
  56.             border
  57.           >
  58.             <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
  59.             <el-table-column prop="attrId" label="#"></el-table-column>
  60.             <el-table-column prop="attrName" label="属性名"></el-table-column>
  61.             <el-table-column prop="valueSelect" label="可选值">
  62.               <template slot-scope="scope">
  63.                 <el-tooltip placement="top">
  64.                   <div slot="content">
  65.                     <span v-for="(i,index) in scope.row.valueSelect.split(';')" :key="index">
  66.                       {{ i }}
  67.                       <br/>
  68.                     </span>
  69.                   </div>
  70.                   <el-tag>{{ scope.row.valueSelect.split(";")[0] + " ..." }}</el-tag>
  71.                 </el-tooltip>
  72.               </template>
  73.             </el-table-column>
  74.             <el-table-column fixed="right" header-align="center" align="center" label="操作">
  75.               <template slot-scope="scope">
  76.                 <el-button type="text" size="small" @click="relationRemove(scope.row.attrId)">移除</el-button>
  77.               </template>
  78.             </el-table-column>
  79.           </el-table>
  80.         </el-col>
  81.       </el-row>
  82.     </el-dialog>
  83.   </div>
  84. </template>
  86. <script>
  87. //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  88. //例如：import 《组件名称》 from '《组件路径》';
  90. export default {
  91.   //import引入的组件需要注入到对象中才能使用
  92.   components: {},
  93.   props: {},
  94.   data() {
  95.     //这里存放数据
  96.     return {
  97.       attrGroupId: 0,
  98.       visible: false,
  99.       innerVisible: false,
  100.       relationAttrs: [],
  101.       dataListSelections: [],
  102.       dataForm: {
  103.         key: ""
  104.       },
  105.       dataList: [],
  106.       pageIndex: 1,
  107.       pageSize: 10,
  108.       totalPage: 0,
  109.       dataListLoading: false,
  110.       innerdataListSelections: []
  111.     };
  112.   },
  113.   //计算属性 类似于data概念
  114.   computed: {},
  115.   //监控data中的数据变化
  116.   watch: {},
  117.   //方法集合
  118.   methods: {
  119.     selectionChangeHandle(val) {
  120.       this.dataListSelections = val;
  121.     },
  122.     innerSelectionChangeHandle(val) {
  123.       this.innerdataListSelections = val;
  124.     },
  125.     addRelation() {
  126.       this.getDataList();
  127.       this.innerVisible = true;
  128.     },
  129.     batchDeleteRelation(val) {
  130.       let postData = [];
  131.       this.dataListSelections.forEach(item => {
  132.         postData.push({attrId: item.attrId, attrGroupId: this.attrGroupId});
  133.       });
  134.       this.$http({
  135.         url: this.$http.adornUrl("/product/attrgroup/attr/relation/delete"),
  136.         method: "post",
  137.         data: this.$http.adornData(postData, false)
  138.       }).then(({data}) => {
  139.         if (data.code == 0) {
  140.           this.$message({type: "success", message: "删除成功"});
  141.           this.init(this.attrGroupId);
  142.         } else {
  143.           this.$message({type: "error", message: data.msg});
  144.         }
  145.       });
  146.     },
  147.     //移除关联
  148.     relationRemove(attrId) {
  149.       let data = [];
  150.       data.push({attrId, attrGroupId: this.attrGroupId});
  151.       this.$http({
  152.         url: this.$http.adornUrl("/product/attrgroup/attr/relation/delete"),
  153.         method: "post",
  154.         data: this.$http.adornData(data, false)
  155.       }).then(({data}) => {
  156.         if (data.code == 0) {
  157.           this.$message({type: "success", message: "删除成功"});
  158.           this.init(this.attrGroupId);
  159.         } else {
  160.           this.$message({type: "error", message: data.msg});
  161.         }
  162.       });
  163.     },
  164.     submitAddRealtion() {
  165.       this.innerVisible = false;
  166.       //准备数据
  167.       console.log("准备新增的数据", this.innerdataListSelections);
  168.       if (this.innerdataListSelections.length > 0) {
  169.         let postData = [];
  170.         this.innerdataListSelections.forEach(item => {
  171.           postData.push({attrId: item.attrId, attrGroupId: this.attrGroupId});
  172.         });
  173.         this.$http({
  174.           url: this.$http.adornUrl("/product/attrgroup/attr/relation"),
  175.           method: "post",
  176.           data: this.$http.adornData(postData, false)
  177.         }).then(({data}) => {
  178.           if (data.code == 0) {
  179.             this.$message({type: "success", message: "新增关联成功"});
  180.           }
  181.           this.$emit("refreshData");
  182.           this.init(this.attrGroupId);
  183.         });
  184.       } else {
  185.       }
  186.     },
  187.     init(id) {
  188.       this.attrGroupId = id || 0;
  189.       this.visible = true;
  190.       this.$http({
  191.         url: this.$http.adornUrl(
  192.           "/product/attrgroup/" + this.attrGroupId + "/attr/relation"
  193.         ),
  194.         method: "get",
  195.         params: this.$http.adornParams({})
  196.       }).then(({data}) => {
  197.         this.relationAttrs = data.data;
  198.       });
  199.     },
  200.     dialogClose() {
  201.     },
  203.     //========
  204.     // 获取数据列表
  205.     getDataList() {
  206.       this.dataListLoading = true;
  207.       this.$http({
  208.         url: this.$http.adornUrl(
  209.           "/product/attrgroup/" + this.attrGroupId + "/noattr/relation"
  210.         ),
  211.         method: "get",
  212.         params: this.$http.adornParams({
  213.           page: this.pageIndex,
  214.           limit: this.pageSize,
  215.           key: this.dataForm.key
  216.         })
  217.       }).then(({data}) => {
  218.         if (data && data.code === 0) {
  219.           this.dataList = data.page.list;
  220.           this.totalPage = data.page.totalCount;
  221.         } else {
  222.           this.dataList = [];
  223.           this.totalPage = 0;
  224.         }
  225.         this.dataListLoading = false;
  226.       });
  227.     },
  228.     // 每页数
  229.     sizeChangeHandle(val) {
  230.       this.pageSize = val;
  231.       this.pageIndex = 1;
  232.       this.getDataList();
  233.     },
  234.     // 当前页
  235.     currentChangeHandle(val) {
  236.       this.pageIndex = val;
  237.       this.getDataList();
  238.     }
  239.   }
  240. };
  241. </script>
  242. <style scoped>
  243. </style>