feat(商品参数): 新增参数管理功能并优化相关页面

- 新增参数编辑页面，支持参数名称、必填、索引等属性配置
- 优化参数列表页面，增加搜索和分页功能
- 重构商品发布页面的参数展示逻辑
- 移除商品模板相关功能
- 优化品牌管理页面的分类关联功能
- 调整商品详情页参数展示样式

manager/src/views/goods/goods-manage/parameter.vue

@@ -1,385 +1,202 @@
 <template>
-  <div style="width: 100%">
+  <div class="search">
     <Card>
-      <Button @click="handleAddParamsGroup" type="primary">添加</Button>
+      <Form
+        ref="searchForm"
+        @submit.native.prevent
+        @keydown.enter.native="handleSearch"
+        :model="searchForm"
+        inline
+        :label-width="70"
+        class="search-form"
+      >
+        <Form-item label="参数名称">
+          <Input
+            type="text"
+            v-model="searchForm.paramName"
+            placeholder="请输入参数名称"
+            clearable
+            style="width: 240px"
+          />
+        </Form-item>
+        <Button @click="handleSearch" type="primary">搜索</Button>
+      </Form>
     </Card>
 
-    <div class="row">
-      <Card v-if="paramsGroup.length == 0"> 暂无参数绑定信息 </Card>
-      <div class="paramsGroup" v-else>
-        <Card
-          style="width: 350px; margin: 7px"
-          v-for="(group, index) in paramsGroup"
-          :key="index"
-          :bordered="false"
-        >
-          <p slot="title">
-            <Icon type="ios-film-outline"></Icon>&nbsp;{{ group.groupName }}
-          </p>
-          <p slot="extra">
-            <Dropdown slot="extra">
-              <a href="javascript:void(0)">
-                操作
-                <Icon type="ios-arrow-down"></Icon>
-              </a>
-              <Dropdown-menu slot="list">
-                <Dropdown-item @click.native="handleEditParamsGroup(group)"
-                  >编辑</Dropdown-item
-                >
-                <Dropdown-item @click.native="handleDeleteParamGroup(group)"
-                  >删除</Dropdown-item
-                >
-              </Dropdown-menu>
-            </Dropdown>
-            <Icon type="arrow-down-b"></Icon>
-          </p>
-          <template v-if="group.params && group.params.length > 0">
-            <div
-              v-for="(param, paramId) in group.params"
-              :key="paramId"
-              class="params"
-            >
-              <span>{{ param.paramName }}</span>
-
-              <span>
-                <i-button type="text" @click="handleEditParams(group, param)"
-                  >编辑</i-button
-                >
-                <i-button
-                  type="text"
-                  size="small"
-                  style="color: #f56c6c"
-                  @click="handleDeleteParam(group, param)"
-                  >删除</i-button
-                >
-              </span>
-            </div>
-          </template>
-          <div v-else style="align-content: center">暂无数据...</div>
-          <div style="text-align: center">
-            <i-button type="text" @click="handleAddParams(group)"
-              >添加</i-button
-            >
-          </div>
-        </Card>
-      </div>
-    </div>
-    <div>
-      <Modal
-        :title="modalTitle"
-        v-model="dialogParamsVisible"
-        :mask-closable="false"
-        :width="500"
-      >
-        <Form
-          ref="paramForm"
-          :model="paramForm"
-          :label-width="100"
-          :rules="formValidate"
-        >
-          <FormItem label="参数名称" prop="paramName">
-            <Input v-model="paramForm.paramName" style="width: 100%" />
-          </FormItem>
-          <FormItem label="可选值" prop="options">
-            <Select
-              v-model="paramForm.options"
-              placeholder="输入后回车添加"
-              multiple
-              filterable
-              allow-create
-              :popper-append-to-body="false"
-              popper-class="spec-values-popper"
-              style="width: 100%; text-align: left; margin-right: 10px"
-            >
-              <Option
-                v-for="(item, itemIndex) in ops.options"
-                :value="item"
-                :key="itemIndex"
-                :label="item"
-              >
-                {{ item }}
-              </Option>
-            </Select>
-          </FormItem>
-          <FormItem label="选项" prop="specName3">
-            <Checkbox label="1" v-model="paramForm.required">必填</Checkbox>
-            <Checkbox label="1" v-model="paramForm.isIndex">可索引</Checkbox>
-          </FormItem>
-          <FormItem label="排序" prop="sort">
-            <InputNumber
-              :min="0"
-              type="number"
-              v-model="paramForm.sort"
-              style="width: 100%"
-            />
-          </FormItem>
-        </Form>
-
-        <div slot="footer">
-          <Button type="text" @click="dialogParamsVisible = false">取消</Button>
-          <Button
-            type="primary"
-            :loading="submitLoading"
-            @click="submitParamForm"
-            >提交</Button
-          >
-        </div>
-      </Modal>
-    </div>
-
-    <div>
-      <Modal
-        :title="modalTitle"
-        v-model="dialogParamsGroupVisible"
-        :mask-closable="false"
-        :width="500"
-      >
-        <Form
-          @submit.native.prevent
-          @keydown.enter.native="submitParamGroupForm"
-          ref="paramGroupForm"
-          :model="paramGroupForm"
-          :label-width="100"
-          :rules="paramGroupValidate"
-        >
-          <FormItem label="参数名称" prop="groupName">
-            <Input v-model="paramGroupForm.groupName" style="width: 100%" />
-          </FormItem>
-        </Form>
-
-        <div slot="footer">
-          <Button type="text" @click="dialogParamsGroupVisible = false"
-            >取消</Button
-          >
-          <Button
-            type="primary"
-            :loading="submitLoading"
-            @click="submitParamGroupForm"
-            >提交</Button
-          >
-        </div>
-      </Modal>
-    </div>
+    <Card>
+      <Row class="operation padding-row">
+        <Button @click="goAdd" type="primary">添加</Button>
+      </Row>
+      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
+      <Row type="flex" justify="end" class="mt_10">
+        <Page
+          :current="searchForm.pageNumber"
+          :total="total"
+          :page-size="searchForm.pageSize"
+          @on-change="changePage"
+          @on-page-size-change="changePageSize"
+          :page-size-opts="[20, 50, 100]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+    </Card>
   </div>
 </template>
 <script>
 import {
-  getCategoryParamsListData,
-  insertGoodsParams,
-  updateGoodsParams,
   deleteParams,
-  insertParamsGroup,
-  updateParamsGroup,
-  deleteParamsGroup,
+  getGoodsParamsPage,
 } from "@/api/goods";
 
-import { regular } from "@/utils";
-
 export default {
   name: "categoryParams",
   data() {
     return {
       submitLoading: false,
-      /** 分类ID */
-      categoryId: this.$route.query.id,
-      /** 参数组 */
-      paramsGroup: [],
-      /** 添加或编辑标识 */
-      modalType: 0,
-      /** 添加或编辑标题 */
-      modalTitle: "",
-      /** 参数添加或编辑弹出框 */
-      dialogParamsVisible: false,
-      /** 参数组添加或编辑弹出框 */
-      dialogParamsGroupVisible: false,
-      //参数表单
-      paramForm: {
-        sort: 1,
-      },
-      /** 参数值 **/
-      ops: {
-        options: [],
-      },
-      // 参数表单
-      paramGroupForm: {},
-      /** 添加、编辑参数 规格 */
-      formValidate: {
-        paramName: [regular.REQUIRED, regular.VARCHAR5],
-        options: [regular.REQUIRED, regular.VARCHAR255],
-        sort: [regular.REQUIRED, regular.INTEGER],
-      },
-      /** 参数组*/
-      paramGroupValidate: {
-        groupName: [regular.REQUIRED, regular.VARCHAR5],
+      loading: true,
+      total: 0,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        paramName: "",
       },
+      data: [],
+      columns: [
+        {
+          title: "参数名称",
+          key: "paramName",
+          width: 300,
+          resizable: true,
+          sortable: false,
+        },
+        {
+          title: "参数值",
+          key: "options",
+          minWidth: 260,
+          tooltip: true,
+        },
+        {
+          title: "必填",
+          key: "required",
+          width: 300,
+          align: "center",
+          render: (h, params) => {
+            const val = params.row.required;
+            const on = val === 1 || val === "1" || val === true;
+            return h("span", on ? "是" : "否");
+          },
+        },
+        {
+          title: "可索引",
+          key: "isIndex",
+          width: 300,
+          align: "center",
+          render: (h, params) => {
+            const val = params.row.isIndex;
+            const on = val === 1 || val === "1" || val === true;
+            return h("span", on ? "是" : "否");
+          },
+        },
+        {
+          title: "操作",
+          key: "action",
+          width: 300,
+          align: "center",
+          fixed: "right",
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "a",
+                {
+                  style: {
+                    color: "#2d8cf0",
+                    cursor: "pointer",
+                    textDecoration: "none",
+                  },
+                  on: {
+                    click: () => {
+                      this.goEdit(params.row);
+                    },
+                  },
+                },
+                "编辑"
+              ),
+              h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
+              h(
+                "a",
+                {
+                  style: {
+                    color: "#2d8cf0",
+                    cursor: "pointer",
+                    textDecoration: "none",
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    },
+                  },
+                },
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
     };
   },
-  filters: {
-    paramTypeFilter(val) {
-      return val === 1 ? "输入项" : "选择项";
-    },
-  },
- 
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    //弹出添加参数框
-    handleAddParams(group) {
-      this.paramForm = {
-        paramName: "",
-        paramType: 1,
-        options: "",
-        required: false,
-        isIndex: false,
-        sort: 0,
-        groupId: group.groupId,
-        categoryId: this.categoryId,
-      };
-      this.modalTitle = "添加参数";
-      this.modalType = 0;
-      this.dialogParamsVisible = true;
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
     },
-    //弹出修改参数框
-    handleEditParams(group, param) {
-      console.log(group, param);
-      this.paramForm = {
-        paramName: param.paramName,
-        options: param.options.split(","),
-        required: param.required == 1 ? true : false,
-        isIndex: param.isIndex == 1 ? true : false,
-        groupId: param.groupId || "",
-        categoryId: param.categoryId || "",
-        sort: param.sort || 1,
-        id: param.id,
-      };
-      this.ops.options = this.paramForm.options;
-      this.modalType = 1;
-      this.modalTitle = "修改参数";
-      this.dialogParamsVisible = true;
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
     },
-    //弹出修改参数组框
-    handleEditParamsGroup(group) {
-      this.paramGroupForm = {
-        groupName: group.groupName,
-        categoryId: this.categoryId,
-        id: group.groupId,
-      };
-      this.modalType = 1;
-      this.modalTitle = "修改参数组";
-      this.dialogParamsGroupVisible = true;
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.getDataList();
     },
-    // 添加参数
-    handleAddParamsGroup() {
-      this.paramGroupForm = {};
-      this.ops = {};
-      (this.paramGroupForm.categoryId = this.categoryId), (this.modalType = 0);
-
-      this.modalTitle = "添加参数组";
-      this.dialogParamsGroupVisible = true;
-    },
-    //保存参数组
-    submitParamGroupForm() {
-      this.$refs.paramGroupForm.validate((valid) => {
-        if (valid) {
-          if (this.modalType === 0) {
-            insertParamsGroup(this.paramGroupForm).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("参数组修改成功");
-                this.getDataList();
-                this.dialogParamsVisible = false;
-              }
-            });
-          } else {
-            console.warn(this.paramGroupForm);
-            updateParamsGroup(this.paramGroupForm).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("参数组修改成功");
-                this.getDataList();
-                this.dialogParamsVisible = false;
-              }
-            });
-          }
-          this.dialogParamsGroupVisible = false;
-        }
-      });
-    },
-    //保存参数
-    submitParamForm() {
-      this.$refs.paramForm.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          let data = JSON.parse(JSON.stringify(this.paramForm));
-          data.isIndex = Number(data.isIndex);
-          data.required = Number(data.required);
-          if (this.modalType === 0) {
-            insertGoodsParams(data).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("参数添加成功");
-                this.getDataList();
-                this.dialogParamsVisible = false;
-              }
-            });
-          } else {
-            console.warn(data.isIndex);
-            data.isIndex = Number(data.isIndex);
-            data.required = Number(data.required);
-            updateGoodsParams(data).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("参数修改成功");
-                this.getDataList();
-                this.dialogParamsVisible = false;
-              }
-            });
-          }
-        }
-      });
-    },
-    // 获取分类列表
     getDataList() {
-      getCategoryParamsListData(this.categoryId).then((res) => {
-        if (res.success) {
-          this.paramsGroup = res.result;
+      this.loading = true;
+      getGoodsParamsPage(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res && res.success) {
+          this.data = (res.result && res.result.records) || [];
+          this.total = (res.result && res.result.total) || 0;
         }
       });
     },
-    //删除参数方法
-    handleDeleteParam(group, param) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        // 记得确认修改此处
-        content: "您确认要删除 " + param.paramName + " ?",
-        loading: true,
-        onOk: () => {
-          // 删除
-          deleteParams(param.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除参数成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
+    goAdd() {
+      this.$router.push({ name: "goods-parameter-edit" });
     },
-    //删除参数组方法
-    handleDeleteParamGroup(group) {
+    goEdit(row) {
+      if (!row || !row.id) return;
+      try {
+        window.sessionStorage.setItem(`goods-parameter-edit:${row.id}`, JSON.stringify(row));
+      } catch (e) {}
+      this.$router.push({ name: "goods-parameter-edit", query: { id: row.id } });
+    },
+    remove(row) {
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
-        content: "您确认要删除 " + group.groupName + " ?",
+        content: "您确认要删除 " + (row.paramName || "") + " ?",
         loading: true,
         onOk: () => {
-          // 删除
-          deleteParamsGroup(group.groupId).then((res) => {
+          deleteParams(row.id).then((res) => {
             this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除参数成功");
+            if (res && res.success) {
+              this.$Message.success("删除成功");
               this.getDataList();
             }
           });
@@ -392,33 +209,4 @@ export default {
   },
 };
 </script>
-<style lang="scss">
-.row {
-  overflow: hidden;
-  margin: 20px 0;
-}
-
-.params {
-  align-items: center;
-  display: flex;
-  padding: 3px;
-  background-color: #f5f7fa;
-  font-size: 14px;
-  justify-content: space-between;
-}
-
-.ivu-card-head {
-  background-color: #f5f7fa;
-}
-
-.ivu-btn {
-  font-size: 13px;
-}
-
-.paramsGroup {
-  flex-wrap: wrap;
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-</style>
+<style lang="scss"></style>