属性-属性组-ui

src/views/product/attribute/index.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="属性编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入属性编码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="属性名" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -63,9 +71,8 @@
 
     <el-table v-loading="loading" :data="attributeList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="属性编码" align="center" prop="code" />
       <el-table-column label="属性名" align="center" prop="name" />
-      <el-table-column label="分组id" align="center" prop="groupId" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -98,11 +105,14 @@
     <!-- 添加或修改商品属性对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" 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="请输入属性编码" />
+        </el-form-item>
         <el-form-item label="属性名" prop="name">
           <el-input v-model="form.name" placeholder="请输入属性名" />
         </el-form-item>
-        <el-form-item label="备注">
+        <el-form-item label="备注" prop="remark">
-          <editor v-model="form.remark" :min-height="192"/>
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -142,22 +152,19 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        code: null,
         name: null,
-        groupId: null,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
+        code: [
+          { required: true, message: "属性编码不能为空", trigger: "blur" }
+        ],
         name: [
           { required: true, message: "属性名不能为空", trigger: "blur" }
         ],
-        groupId: [
-          { required: true, message: "分组id不能为空", trigger: "change" }
-        ],
-        remark: [
-          { required: true, message: "备注不能为空", trigger: "blur" }
-        ],
         createBy: [
           { required: true, message: "创建人不能为空", trigger: "blur" }
         ],
@@ -189,13 +196,9 @@ export default {
     reset() {
       this.form = {
         id: null,
+        code: null,
         name: null,
-        groupId: null,
+        remark: null
-        remark: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
       };
       this.resetForm("form");
     },

src/views/product/attributeGroup/index.vue

@@ -9,6 +9,16 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="状态" prop="states">
+        <el-select v-model="queryParams.states" placeholder="请选择状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_yes_no"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -24,7 +34,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['product:attributeGroup:add']"
-        >新增</el-button>
+        >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -35,7 +46,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['product:attributeGroup:edit']"
-        >修改</el-button>
+        >修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -46,7 +58,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['product:attributeGroup:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -56,36 +69,59 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['product:attributeGroup:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="attributeGroupList" @selection-change="handleSelectionChange">
+    <el-row>
-      <el-table-column type="selection" width="55" align="center" />
+        <el-table v-loading="loading" :data="attributeGroupList" @selection-change="handleSelectionChange">
-      <el-table-column label="主键" align="center" prop="id" />
+          <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="属性名" align="center" prop="name" />
+          <el-table-column label="主键" align="center" prop="id"/>
-      <el-table-column label="状态" align="center" prop="states" />
+          <el-table-column label="属性名" align="center" prop="name"/>
-      <el-table-column label="备注" align="center" prop="remark" />
+          <el-table-column label="属性组" align="center" prop="attributeIds"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+
-        <template slot-scope="scope">
+          <el-table-column label="组内属性" align="center" prop="attributeInfoList" >
-          <el-button
+            <template slot-scope="scope">
-            size="mini"
+              <el-tag v-for="item in scope.row.attributeInfoList">
-            type="text"
+                {{item.name}}
-            icon="el-icon-edit"
+              </el-tag>
-            @click="handleUpdate(scope.row)"
+            </template>
-            v-hasPermi="['product:attributeGroup:edit']"
+          </el-table-column>
-          >修改</el-button>
+
-          <el-button
+          <el-table-column label="状态" align="center" prop="states">
-            size="mini"
+            <template slot-scope="scope">
-            type="text"
+              <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.states"/>
-            icon="el-icon-delete"
+            </template>
-            @click="handleDelete(scope.row)"
+          </el-table-column>
-            v-hasPermi="['product:attributeGroup:remove']"
+          <el-table-column label="备注" align="center" prop="remark"/>
-          >删除</el-button>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        </template>
+            <template slot-scope="scope">
-      </el-table-column>
+              <el-button
-    </el-table>
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['product:attributeGroup:edit']"
+              >修改
+              </el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['product:attributeGroup:remove']"
+              >删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+
+    </el-row>
+
+
 
     <pagination
       v-show="total>0"
@@ -96,14 +132,103 @@
     />
 
     <!-- 添加或修改商品属性组对话框 -->
-    <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="备注">
+              <el-input v-model="form.name" placeholder="请输入属性名"/>
-          <editor v-model="form.remark" :min-height="192"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="states">
+              <el-radio-group v-model="form.states">
+                <el-radio
+                  v-for="dict in dict.type.sys_yes_no"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+
+
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
+
+        <el-row>
+
+
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>已选属性</span>
+            </div>
+
+            <div slot="header" class="clearfix">
+              <el-col :span="2" v-for="(item ,index) in attributeList">
+                <el-tag
+                  v-if="attributeids.indexOf(item.id) > -1"
+                  style="margin: 5px 10px"
+                  :key="item.name"
+                  closable @close="handleClose(index)">
+                  {{ item.name }}
+                </el-tag>
+              </el-col>
+            </div>
+
+          </el-card>
+
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>未选属性</span>
+            </div>
+
+
+              <div slot="header" class="clearfix">
+
+                <el-form :inline="true" :model="attribute" class="demo-form-inline">
+                  <el-form-item label="属性编码">
+                    <el-input v-model="attribute.code" placeholder="属性编码"></el-input>
+                  </el-form-item>
+                  <el-form-item label="属性名称">
+                    <el-input v-model="attribute.name" placeholder="属性名"></el-input>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" @click="attributeQuery">查询</el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+
+
+            <el-row>
+              <el-col style="padding: 5px 10px" :span="3" v-for="item in attributeList">
+
+                <el-checkbox
+                  v-model="attributeids"
+                  :key="item.id"
+                  :value="item.id"
+                  :label="item.id"
+                  border>{{ item.name }}
+                </el-checkbox>
+              </el-col>
+            </el-row>
+
+            <pagination
+              v-show="attributeTotal>0"
+              :total="attributeTotal"
+              :page.sync="attribute.pageNum"
+              :limit.sync="attribute.pageSize"
+              @pagination="getList1"
+            />
+            {{ attributeids }}
+          </el-card>
+
+
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -114,12 +239,36 @@
 </template>
 
 <script>
-import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
+import {
+  listAttributeGroup,
+  getAttributeGroup,
+  delAttributeGroup,
+  addAttributeGroup,
+  updateAttributeGroup
+} from "@/api/product/attributeGroup";
+import {listAttribute} from "@/api/product/attribute";
 
 export default {
   name: "AttributeGroup",
+  dicts: ['sys_yes_no'],
   data() {
     return {
+      tags: [
+        {name: '标签一', type: ''},
+        {name: '标签二', type: 'success'},
+        {name: '标签三', type: 'info'},
+        {name: '标签四', type: 'warning'},
+        {name: '标签五', type: 'danger'}
+      ],
+      attributeTotal: 0,
+      attributeList: [],
+      attributeids: [],
+      attribute: {
+        pageNum: 1,
+        pageSize: 6,
+        code: null,
+        name: null
+      },
       // 遮罩层
       loading: true,
       // 选中数组
@@ -146,35 +295,47 @@ export default {
         states: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        attributeIds:"",
+      },
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "属性名不能为空", trigger: "blur" }
+          {required: true, message: "属性名不能为空", trigger: "blur"}
         ],
         states: [
-          { required: true, message: "状态不能为空", trigger: "change" }
+          {required: true, message: "状态不能为空", trigger: "change"}
-        ],
-        remark: [
-          { required: true, message: "备注不能为空", trigger: "blur" }
-        ],
-        createBy: [
-          { required: true, message: "创建人不能为空", trigger: "blur" }
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
       }
     };
   },
   created() {
     this.getList();
+    this.getList1();
   },
   methods: {
+
+    attributeQuery() {
+      listAttribute(this.queryParams).then(response => {
+        this.attributeList = response.data.rows;
+        this.attributeTotal = response.data.total;
+      });
+    },
+    handleClose(index) {
+      this.attributeids.splice(this.attributeids.indexOf(index), 1)
+    },
+    /** 查询商品属性列表 */
+    getList1() {
+      listAttribute(this.attribute).then(response => {
+        this.attributeList = response.data.rows;
+        this.attributeTotal = response.data.total;
+      });
+    },
     /** 查询商品属性组列表 */
     getList() {
       this.loading = true;
       listAttributeGroup(this.queryParams).then(response => {
+        console.log(response)
         this.attributeGroupList = response.data.rows;
         this.total = response.data.total;
         this.loading = false;
@@ -195,7 +356,9 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
+        attributeids:null,
+        attributeIds:null,
       };
       this.resetForm("form");
     },
@@ -212,7 +375,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -226,7 +389,11 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getAttributeGroup(id).then(response => {
+        console.log(response)
         this.form = response.data;
+        let str = response.data.attributeIds;
+        this.attributeids  = str.split(',').map(Number);
+        console.log(this.form)
         this.open = true;
         this.title = "修改商品属性组";
       });
@@ -236,16 +403,27 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+            let str = this.attributeids.join(',');
+            this.form.attributeIds=str
             updateAttributeGroup(this.form).then(response => {
+              console.log(this.form)
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
+              this.reset();
+              this.form.attributeIds=''
+              this.attributeids=[]
             });
           } else {
+            let str = this.attributeids.join(',');
+            this.form.attributeIds=str
             addAttributeGroup(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
+              this.reset();
+              this.form.attributeIds=''
+              this.attributeids=[]
             });
           }
         }
@@ -254,12 +432,13 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除商品属性组编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除商品属性组编号为"' + ids + '"的数据项？').then(function () {
         return delAttributeGroup(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {

src/views/product/category/index.vue

@@ -106,17 +106,25 @@
     <!-- 添加或修改品类信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="父级品类" prop="parentId">
+          <treeselect v-model="form.parentId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择父级品类" />
+        </el-form-item>
+
         <el-form-item label="品牌名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入品牌名称" />
         </el-form-item>
         <el-form-item label="图片" prop="image">
           <image-upload v-model="form.image"/>
         </el-form-item>
-        <el-form-item label="父级品类" prop="parentId">
+
-          <treeselect v-model="form.parentId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择父级品类" />
+        <el-form-item label="状态" prop="states">
-        </el-form-item>
+          <el-radio-group v-model="form.start">
-        <el-form-item label="是否启用" prop="start">
+            <el-radio
-          <el-input v-model="form.start" placeholder="请输入是否启用" />
+              v-for="dict in dict.type.sys_yes_no"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item label="介绍" prop="introduction">
           <el-input v-model="form.introduction" type="textarea" placeholder="请输入内容" />
@@ -140,6 +148,7 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Category",
+  dicts: ['sys_yes_no'],
   components: {
     Treeselect
   },

src/views/product/productInfo/index.vue

@@ -127,7 +127,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="请输入商品名称" />