商品属性组添加

src/views/product/attribute/index.vue

@@ -95,7 +95,7 @@
     />
 
     <!-- 添加或修改商品属性对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="属性编码" prop="code">
           <el-input v-model="form.code" placeholder="请输入属性编码" />

src/views/product/attributeGroup/index.vue

@@ -110,23 +110,91 @@
     />
 
     <!-- 添加或修改属性组对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="组名称" prop="name">
+        <el-row>
-          <el-input v-model="form.name" placeholder="请输入组名称" />
+          <el-col :span="12">
-        </el-form-item>
+            <el-form-item label="组名称" prop="name">
-        <el-form-item label="状态" prop="states">
+              <el-input v-model="form.name" placeholder="请输入组名称" />
-          <el-radio-group v-model="form.states">
+            </el-form-item>
-            <el-radio
+          </el-col>
-              v-for="dict in dict.type.sys_yes_no"
+          <el-col :span="12">
-              :key="dict.value"
+            <el-form-item label="状态" prop="states">
-              :label="dict.value"
+              <el-radio-group v-model="form.states">
-            >{{dict.label}}</el-radio>
+                <el-radio
-          </el-radio-group>
+                  v-for="dict in dict.type.sys_yes_no"
-        </el-form-item>
+                  :key="dict.value"
-        <el-form-item label="备注" prop="remark">
+                  :label="dict.value"
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+                >{{dict.label}}</el-radio>
-        </el-form-item>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-row>
+
+        <el-row>
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>选择属性关联关系</span>
+            </div>
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>已选择属性</span>
+              </div>
+              <el-row>
+                <el-col :span="2" v-for="(attribute, index) in checkedAttributeList">
+                  <el-tag
+                    style="margin: 5px 10px"
+                    :key="attribute.name"
+                    closable @close="removeChecked(index)">
+                    {{attribute.name}}
+                  </el-tag>
+                </el-col>
+              </el-row>
+            </el-card>
+            <el-divider></el-divider>
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>未选属性</span>
+              </div>
+              <el-row>
+                <el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
+                  <el-form-item label="属性编码">
+                    <el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
+                  </el-form-item>
+                  <el-form-item label="属性名称">
+                    <el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" @click="queryAttribute">查询</el-button>
+                  </el-form-item>
+                </el-form>
+              </el-row>
+              <el-row>
+                <el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList" >
+                  <el-checkbox
+                    v-model="form.attributeIdList"
+                    :key="attribute.id"
+                    :value="attribute.id"
+                    :label="attribute.id"
+                    @change="checkedAttribute(attribute)"
+                    border>{{attribute.name}}</el-checkbox>
+                </el-col>
+              </el-row>
+              <pagination
+                v-show="total>0"
+                :total="total"
+                :page.sync="attributeQuery.pageNum"
+                :limit.sync="attributeQuery.pageSize"
+                @pagination="queryAttribute"
+              />
+            </el-card>
+          </el-card>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -138,6 +206,7 @@
 
 <script>
 import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
+import {listAttribute} from "@/api/product/attribute";
 
 export default {
   name: "AttributeGroup",
@@ -179,13 +248,60 @@ export default {
         states: [
           { required: true, message: "状态不能为空", trigger: "change" }
         ],
-      }
+      },
+      tags: [
+        { name: '标签一' },
+        { name: '标签二' }
+      ],
+      checkedAttributeList: [],
+      attributeQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        code: null,
+        name: null
+      },
+      attributeTotal: 0,
+      attributeList: []
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    /**
+     * 选中值触发方法
+     */
+    checkedAttribute(attribute){
+      let isCheck = this.form.attributeIdList.indexOf(attribute.id) > -1;
+      if (isCheck){
+        this.checkedAttributeList.push(attribute);
+      }else {
+        // 删除
+        this.checkedAttributeList.splice(
+          this.checkedAttributeList.indexOf(attribute), 1
+        )
+      }
+    },
+    /**
+     * 删除选中值
+     * @param index
+     */
+    removeChecked(index){
+      console.log(index)
+      this.checkedAttributeList.splice(index, 1);
+      this.form.attributeIdList.splice(index, 1);
+    },
+
+    /**
+     * 查询属性
+     */
+    queryAttribute(){
+      listAttribute(this.attributeQuery).then(response => {
+        this.attributeList = response.data.rows;
+        this.total = response.data.total;
+      });
+    },
+
     /** 查询属性组列表 */
     getList() {
       this.loading = true;
@@ -206,10 +322,10 @@ export default {
         id: null,
         name: null,
         states: null,
-        createBy: null,
+        remark: null,
-        createTime: null,
+        attributeIdList: [],
-        remark: null
       };
+      this.checkedAttributeList = []
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -233,6 +349,7 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加属性组";
+      this.queryAttribute();
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -243,6 +360,7 @@ export default {
         this.open = true;
         this.title = "修改属性组";
       });
+      this.queryAttribute();
     },
     /** 提交按钮 */
     submitForm() {

src/views/product/brand/index.vue

@@ -116,7 +116,7 @@
     />
 
     <!-- 添加或修改品牌信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="品牌名称" prop="nam">
           <el-input v-model="form.nam" placeholder="请输入品牌名称" />

src/views/product/category/index.vue

@@ -104,7 +104,7 @@
     </el-table>
 
     <!-- 添加或修改品类信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="品类名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入品类名称" />

src/views/product/comment/index.vue

@@ -110,7 +110,7 @@
     />
 
     <!-- 添加或修改商品评论对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="商品id" prop="projectId">
           <el-input v-model="form.projectId" placeholder="请输入商品id" />

src/views/product/info/index.vue

@@ -142,7 +142,7 @@
     />
 
     <!-- 添加或修改商品信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="商品名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入商品名称" />

src/views/product/rule/index.vue

@@ -96,7 +96,7 @@
     />
 
     <!-- 添加或修改商品规格对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="规格名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入规格名称" />

src/views/system/config/index.vue

@@ -155,7 +155,7 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="参数名称" prop="configName">
           <el-input v-model="form.configName" placeholder="请输入参数名称"/>

src/views/system/dict/data.vue

@@ -153,7 +153,7 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典类型">
           <el-input v-model="form.dictType" :disabled="true"/>

src/views/system/dict/index.vue

@@ -165,7 +165,7 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="dictName">
           <el-input v-model="form.dictName" placeholder="请输入字典名称"/>

src/views/system/post/index.vue

@@ -130,7 +130,7 @@
     />
 
     <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="岗位名称" prop="postName">
           <el-input v-model="form.postName" placeholder="请输入岗位名称"/>

src/views/system/role/index.vue

@@ -165,7 +165,7 @@
     />
 
     <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称"/>
@@ -220,7 +220,7 @@
     </el-dialog>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog :title="title" :visible.sync="openDataScope" append-to-body width="500px">
+    <el-dialog :title="title" :visible.sync="openDataScope" append-to-body width="80%">
       <el-form :model="form" label-width="80px">
         <el-form-item label="角色名称">
           <el-input v-model="form.roleName" :disabled="true"/>

src/views/tool/build/CodeTypeDialog.vue

@@ -4,7 +4,7 @@
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       v-bind="$attrs"
-      width="500px"
+      width="80%"
       @close="onClose"
       @open="onOpen"
       v-on="$listeners"