低代码可视化-PC商城管理系统-产品分类--代码生成器-阿里云开发者社区

商城管理系统中的产品分类是商城运营中的关键环节，它不仅影响着商城的运营效果，还直接关系到用户体验。

产品分类在商城管理系统中扮演着至关重要的角色。通过合理的分类，用户能够更快速地找到所需商品，提高购物效率。同时，分类也有助于商城对商品进行更有效的管理和展示，从而提升销售额和用户忠诚度。

新增数据库表

拷贝demo_table修改为shop_cate表

修改表结构

其中包括一个自增ID字段，及三个时间类型的字段，其余的字段按照需求增加，这里我们增加title,remark两个字段。接下来我们会在设计页面里用到这两字段。

生成API

输入你安装的PHP时的域名/super/index.html，登录进去找到代码生成器界面。

新增页面

首页我们先增一个分组商品管理-商品管理下新增页面商品分类。点击新增页面，输入页面标识、页面名称、字体图标.

使用CRUD模板页面至设计区

这里采用现成的CRUD模板快速进设计区

修改API

结合表shop_cate表，那么我们在后台API属性设置即为shop/cate即可。

修改表格字段

表单编辑字段

拖入单行文本字段进编辑表单设计区，输入字段标识、字段标识标题。

同理拖入多行文本字段，修改字段标识对应数据库的标识。

点击保存源码至本地

保存源码至本地后打开页面即可访问商品分类管理界面。

进入页面

启动环境进进入产品分类管理，在右上角可以设计不同主题效果。

这时增删改查已经完成。

数据查询

输入单选文本，字段名称改为title_like支持模板查询。

至此我们的产品分类管理增删改查已经完成

代码生成器

VUE2选项式代码生成器

<template>
  <div class="container">
    <div class="el-card is-always-shadow diygw-col-24">
      <div class="el-card__body">
        <div class="mb8">
          <el-form class="flex flex-direction-row flex-wrap" :model="queryParams" :rules="queryParamsRules" ref="queryForm" label-width="80px">
            <div class="flex diygw-col-0">
              <el-form-item class="diygw-el-rate" prop="title_like" label="标题">
                <el-input type="text" placeholder="请输入标题查询" v-model="queryParams.title_like"> </el-input>
              </el-form-item>
            </div>
            <div class="flex diygw-col-0">
              <el-button type="primary" @click="handleQuery"> <SvgIcon name="ele-Search" /> 搜索 </el-button> <el-button @click="resetQuery"> <SvgIcon name="ele-Refresh" /> 重置 </el-button>
            </div>
          </el-form>
        </div>
        <div class="mb8">
          <el-button type="primary" plain @click="onOpenAddModule"> <SvgIcon name="ele-Plus" />新增 </el-button> <el-button type="danger" plain :disabled="multiple" @click="onTabelRowDel"> <SvgIcon name="ele-Delete" />删除 </el-button>
        </div>
        <el-table @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" stripe border current-row-key="id" empty-text="没有数据" style="width: 100%">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="置顶" prop="title" align="center">
            <template #default="scope"> <el-tag style="cursor: pointer" v-if="scope.row.sortnum > 0" type="error" @click="updatenumApi(scope.row)"> 取消置顶 </el-tag><el-tag style="cursor: pointer" @click="ordernumApi(scope.row)" v-else> 置顶 </el-tag> </template>
          </el-table-column>
          <el-table-column label="分类名称" prop="title" align="center"> </el-table-column>
          <el-table-column label="数据状态" prop="status" align="center">
            <template #default="scope"> <el-tag v-if="scope.row.status == 1"> 有效 </el-tag><el-tag v-else> 无效 </el-tag> </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" align="center"> </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="180">
            <template #default="scope">
              <el-button type="primary" plain size="small" @click="onOpenEditModule(scope.row)"> <SvgIcon name="ele-Edit" />修改 </el-button> <el-button v-if="scope.row.id != 0" type="danger" plain size="small" @click="onTabelRowDel(scope.row)"> <SvgIcon name="ele-Delete" />删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页设置-->
        <div v-show="total > 0"><el-divider></el-divider> <el-pagination background :total="total" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /></div>
      </div>
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :fullscreen="isFullscreen" width="800px" v-model="isShowDialog" destroy-on-close title="商品分类" draggable center>
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">商品分类</h4>
          <el-tooltip v-if="!isFullscreen" content="最大化" placement="bottom">
            <el-button class="diygw-max-icon el-dialog__headerbtn">
              <el-icon @click="isFullscreen = !isFullscreen">
                <FullScreen />
              </el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip v-if="isFullscreen" content="返回" placement="bottom">
            <el-button class="diygw-max-icon el-dialog__headerbtn">
              <el-icon @click="isFullscreen = !isFullscreen">
                <Remove />
              </el-icon>
            </el-button>
          </el-tooltip>
        </template>
        <el-form class="flex flex-direction-row flex-wrap" :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="90px">
          <div class="flex diygw-col-24">
            <el-form-item
              :rules="[
                {
                  required: true,
                  trigger: 'blur',
                  message: '不能为空哟'
                }
              ]"
              class="diygw-el-rate"
              prop="title"
              label="分类名称"
            >
              <el-input type="text" placeholder="请输入分类名称" v-model="editForm.title"> </el-input>
            </el-form-item>
          </div>
          <div class="flex diygw-col-24">
            <el-form-item prop="img" class="diygw-el-rate" label="分类图片">
              <diy-uploadinput v-model="editForm.img" title="分类图片"></diy-uploadinput>
            </el-form-item>
          </div>
          <div class="flex diygw-col-24">
            <el-form-item prop="remark" class="diygw-el-rate" label="描述">
              <el-input type="textarea" rows="3" placeholder="请输入描述" v-model="editForm.remark"> </el-input>
            </el-form-item>
          </div>
          <div class="flex diygw-col-24">
            <el-form-item prop="status" class="diygw-el-rate" label="数据状态">
              <el-radio-group v-model="editForm.status">
                <el-radio v-for="item in editFormData.statusDatas" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <div class="dialog-footer flex justify-center"><el-button @click="closeDialog"> 取 消 </el-button> <el-button type="primary" @click="onSubmit" :loading="saveloading"> 保 存 </el-button></div>
        </template>
      </el-dialog>
    </div>
    <div class="clearfix"></div>
  </div>
</template>
 
<script>
  import { useRouter, useRoute } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/stores/userInfo';
 
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { deepClone, changeRowToForm } from '@/utils/other';
  import { addData, updateData, delData, listData } from '@/api';
 
  import DiyUploadinput from '@/components/upload/uploadinput.vue';
 
  export default {
    components: {
      DiyUploadinput
    },
    data() {
      return {
        globalOption: {},
        userInfo: {},
        ordernum: {
          code: 200,
          msg: '设置成功'
        },
        updatenum: {
          code: 200,
          msg: '修改成功',
          data: {
            id: '1',
            sortnum: '0'
          }
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 弹出层标题
        title: '',
        // 总条数
        total: 0,
        tableData: [],
        // 是否显示弹出层
        isFullscreen: false,
        isShowDialog: false,
        saveloading: false,
        editFormInit: {},
        queryParamsInit: {},
 
        editFormData: {
          statusDatas: [
            { value: '1', label: '有效' },
            { value: '2', label: '无效' }
          ]
        },
 
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          title_like: ''
        },
 
        queryParamsRules: {},
 
        editForm: {
          id: undefined,
          title: '',
          img: '',
          remark: '',
          status: '1'
        },
 
        editFormRules: {}
      };
    },
    methods: {
      getParamData(e, row) {
        row = row || {};
        let dataset = e.currentTarget ? e.currentTarget.dataset : e;
        if (row) {
          dataset = Object.assign(dataset, row);
        }
        return dataset;
      },
      navigateTo(e, row) {
        let dataset = this.getParamData(e, row);
        let { type } = dataset;
        if (type == 'page' || type == 'inner' || type == 'href') {
          this.router.push({
            path: dataset.url,
            query: dataset
          });
        } else if (typeof this[type] == 'function') {
          this[type](dataset);
        } else {
          ElMessage.error('待实现点击事件');
        }
      },
      async init() {},
      // 置顶 API请求方法
      async ordernumApi(param) {
        param = param || {};
        param = this.getParamData(param);
        let http_url = '/shop/cate/sortnum';
        let http_data = {};
        let http_header = {};
 
        http_data.id = param.id;
        let flag = await this.confirmFunction({ title: '确定置顶吗' });
        if (!flag) {
          ElMessage.error('你已取消');
          return;
        }
        let ordernum = await this.$http.post(http_url, http_data, http_header, 'json');
        this.ordernum = ordernum;
        this.resetQuery();
      },
      // 设置为0 API请求方法
      async updatenumApi(param) {
        param = param || {};
        param = this.getParamData(param);
        let http_url = '/shop/cate/update';
        let http_data = {};
        let http_header = {};
 
        http_data.id = param.id;
        http_data.sortnum = 0;
        let flag = await this.confirmFunction({ title: '确定取消置顶吗' });
        if (!flag) {
          ElMessage.error('你已取消');
          return;
        }
        let updatenum = await this.$http.post(http_url, http_data, http_header, 'json');
        this.updatenum = updatenum;
        this.resetQuery();
      },
 
      // confirm 自定义方法
      async confirmFunction(param) {
        param = param || {};
        let thiz = this;
        let title = param && (param.title || param.title == 0) ? param.title : thiz.title || '';
        return new Promise((resolve) => {
          ElMessageBox({
            message: title,
            title: '警告',
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              resolve(true);
            })
            .catch(() => {
              resolve(false);
            });
        });
      },
      // 打开弹窗
      openDialog(row) {
        if (row.id && row.id != undefined && row.id != 0) {
          this.editForm = changeRowToForm(row, this.editForm);
        } else {
          this.initForm();
        }
        this.isShowDialog = true;
        this.saveloading = false;
      },
 
      // 关闭弹窗
      closeDialog(row) {
        this.mittBus.emit('onEditAdmintableModule', row);
        this.isShowDialog = false;
      },
 
      // 保存
      onSubmit() {
        const formWrap = this.$refs.editFormRef;
        if (!formWrap) return;
        formWrap.validate((valid, fields) => {
          if (valid) {
            this.saveloading = true;
            if (this.editForm.id != undefined && this.editForm.id != 0) {
              updateData('/shop/cate', this.editForm)
                .then(() => {
                  ElMessage.success('修改成功');
                  this.saveloading = false;
                  this.closeDialog(this.editForm); // 关闭弹窗
                })
                .finally(() => {
                  this.saveloading = false;
                });
            } else {
              addData('/shop/cate', this.editForm)
                .then(() => {
                  ElMessage.success('新增成功');
                  this.saveloading = false;
                  this.closeDialog(this.editForm); // 关闭弹窗
                })
                .finally(() => {
                  this.saveloading = false;
                });
            }
          } else {
            let message = '';
            if (fields && Object.keys(fields).length > 0) {
              let field = fields[Object.keys(fields)[0]];
              let messages = field.map((item) => {
                return item.message;
              });
              message = messages.join(',');
            }
            ElMessage.error('验证未通过！' + message);
          }
        });
      },
      // 表单初始化，方法：`resetFields()` 无法使用
      initForm() {
        this.editForm = deepClone(this.editFormInit);
      },
      /** 查询商品分类列表 */
      handleQuery() {
        this.loading = true;
        listData('/shop/cate', this.queryParams).then((response) => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = deepClone(this.queryParamsInit);
        this.handleQuery();
      },
 
      // 打开新增商品分类弹窗
      onOpenAddModule(row) {
        row = [];
        this.title = '添加商品分类';
        this.openDialog(row);
      },
      // 打开编辑商品分类弹窗
      onOpenEditModule(row) {
        this.title = '修改商品分类';
        this.initForm();
        this.openDialog(row);
      },
      /** 删除按钮操作 */
      onTabelRowDel(row) {
        let thiz = this;
        const id = row.id || this.ids;
        ElMessageBox({
          message: '是否确认删除选中的商品分类?',
          title: '警告',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delData('/shop/cate', id).then(() => {
            thiz.handleQuery();
            ElMessage.success('删除成功');
          });
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
 
      //分页页面大小发生变化
      handleSizeChange(val) {
        this.queryParams.pageSize = val;
        this.handleQuery();
      },
      //当前页码发生变化
      handleCurrentChange(val) {
        this.queryParams.pageNum = val;
        this.handleQuery();
      }
    },
    async mounted() {
      this.router = useRouter();
      this.globalOption = useRoute().query;
      const stores = useUserInfo();
      const { userInfos } = storeToRefs(stores);
      this.userInfo = userInfos;
      await this.init();
      this.editFormInit = deepClone(this.editForm);
      this.queryParamsInit = deepClone(this.queryParams);
      this.handleQuery();
      this.mittBus.on('onEditAdmintableModule', () => {
        this.handleQuery();
      });
    },
    beforeUnmount() {
      this.mittBus.off('onEditAdmintableModule');
    }
  };
</script>
 
<style lang="scss" scoped>
  .container {
    font-size: 12px;
  }
</style>

VUE3组合式代码生成器

<template>
  <div class="container">
    <div class="el-card is-always-shadow diygw-col-24">
      <div class="el-card__body">
        <div class="mb8">
          <el-form class="flex flex-direction-row flex-wrap" :model="state.queryParams" :rules="queryParamsRules" ref="queryForm" label-width="80px">
            <div class="flex diygw-col-0">
              <el-form-item class="diygw-el-rate" prop="title_like" label="标题">
                <el-input type="text" placeholder="请输入标题查询" v-model="queryParams.title_like"> </el-input>
              </el-form-item>
            </div>
            <div class="flex diygw-col-0">
              <el-button type="primary" @click="handleQuery"> <SvgIcon name="ele-Search" /> 搜索 </el-button> <el-button @click="resetQuery"> <SvgIcon name="ele-Refresh" /> 重置 </el-button>
            </div>
          </el-form>
        </div>
        <div class="mb8">
          <el-button type="primary" plain @click="onOpenAddModule"> <SvgIcon name="ele-Plus" />新增 </el-button> <el-button type="danger" plain :disabled="state.multiple" @click="onTabelRowDel"> <SvgIcon name="ele-Delete" />删除 </el-button>
        </div>
        <el-table @selection-change="handleSelectionChange" v-loading="state.loading" :data="state.tableData" stripe border current-row-key="id" empty-text="没有数据" style="width: 100%">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="置顶" prop="title" align="center">
            <template #default="scope"> <el-tag style="cursor: pointer" v-if="scope.row.sortnum > 0" type="error" @click="updatenumApi(scope.row)"> 取消置顶 </el-tag><el-tag style="cursor: pointer" @click="ordernumApi(scope.row)" v-else> 置顶 </el-tag> </template>
          </el-table-column>
          <el-table-column label="分类名称" prop="title" align="center"> </el-table-column>
          <el-table-column label="数据状态" prop="status" align="center">
            <template #default="scope"> <el-tag v-if="scope.row.status == 1"> 有效 </el-tag><el-tag v-else> 无效 </el-tag> </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" align="center"> </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="180">
            <template #default="scope">
              <el-button type="primary" plain size="small" @click="onOpenEditModule(scope.row)"> <SvgIcon name="ele-Edit" />修改 </el-button> <el-button v-if="scope.row.id != 0" type="danger" plain size="small" @click="onTabelRowDel(scope.row)"> <SvgIcon name="ele-Delete" />删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页设置-->
        <div v-show="state.total > 0"><el-divider></el-divider> <el-pagination background :total="state.total" :current-page="state.queryParams.pageNum" :page-size="state.queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /></div>
      </div>
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :fullscreen="isFullscreen" width="800px" v-model="isShowDialog" destroy-on-close title="商品分类" draggable center>
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">商品分类</h4>
          <el-tooltip v-if="!isFullscreen" content="最大化" placement="bottom">
            <el-button class="diygw-max-icon el-dialog__headerbtn">
              <el-icon @click="isFullscreen = !isFullscreen">
                <FullScreen />
              </el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip v-if="isFullscreen" content="返回" placement="bottom">
            <el-button class="diygw-max-icon el-dialog__headerbtn">
              <el-icon @click="isFullscreen = !isFullscreen">
                <Remove />
              </el-icon>
            </el-button>
          </el-tooltip>
        </template>
        <el-form class="flex flex-direction-row flex-wrap" :model="state.editForm" :rules="state.editFormRules" ref="editFormRef" label-width="90px">
          <div class="flex diygw-col-24">
            <el-form-item
              :rules="[
                {
                  required: true,
                  trigger: 'blur',
                  message: '不能为空哟'
                }
              ]"
              class="diygw-el-rate"
              prop="title"
              label="分类名称"
            >
              <el-input type="text" placeholder="请输入分类名称" v-model="editForm.title"> </el-input>
            </el-form-item>
          </div>
          <div class="flex diygw-col-24">
            <el-form-item prop="img" class="diygw-el-rate" label="分类图片">
              <diy-uploadinput v-model="editForm.img" title="分类图片"></diy-uploadinput>
            </el-form-item>
          </div>
          <div class="flex diygw-col-24">
            <el-form-item prop="remark" class="diygw-el-rate" label="描述">
              <el-input type="textarea" rows="3" placeholder="请输入描述" v-model="editForm.remark"> </el-input>
            </el-form-item>
          </div>
          <div class="flex diygw-col-24">
            <el-form-item prop="status" class="diygw-el-rate" label="数据状态">
              <el-radio-group v-model="editForm.status">
                <el-radio v-for="item in editFormData.statusDatas" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <div class="dialog-footer flex justify-center"><el-button @click="closeDialog"> 取 消 </el-button> <el-button type="primary" @click="onSubmit" :loading="state.saveloading"> 保 存 </el-button></div>
        </template>
      </el-dialog>
    </div>
    <div class="clearfix"></div>
  </div>
</template>
 
<script setup name="goodscate">
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { ref, toRefs, reactive, onMounted, getCurrentInstance, onUnmounted, unref } from 'vue';
  import { deepClone, changeRowToForm } from '@/utils/other';
  import { addData, updateData, delData, listData } from '@/api';
 
  import { useRouter, useRoute } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/stores/userInfo';
 
  import DiyUploadinput from '@/components/upload/uploadinput.vue';
 
  const stores = useUserInfo();
  const { userInfos } = storeToRefs(stores);
  const { proxy } = getCurrentInstance();
  const router = useRouter();
  const route = useRoute();
  const globalOption = ref(route.query);
  const getParamData = (e, row) => {
    row = row || {};
    let dataset = e.currentTarget ? e.currentTarget.dataset : e;
    if (row) {
      dataset = Object.assign(dataset, row);
    }
    return dataset;
  };
 
  const navigateTo = (e, row) => {
    let dataset = getParamData(e, row);
    let { type } = dataset;
    if ((type == 'page' || type == 'inner' || type == 'href') && dataset.url) {
      router.push({
        path: (dataset.url.startsWith('/') ? '' : '/') + dataset.url,
        query: dataset
      });
    } else {
      ElMessage.error('待实现点击事件');
    }
  };
 
  const state = reactive({
    userInfo: userInfos.value,
    ordernum: {
      code: 200,
      msg: '设置成功'
    },
    updatenum: {
      code: 200,
      msg: '修改成功',
      data: {
        id: '1',
        sortnum: '0'
      }
    },
    // 遮罩层
    loading: true,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    // 弹出层标题
    title: '',
    // 总条数
    total: 0,
    tableData: [],
    // 是否显示弹出层
    isFullscreen: false,
    isShowDialog: false,
    saveloading: false,
 
    editFormData: {
      statusDatas: [
        { value: '1', label: '有效' },
        { value: '2', label: '无效' }
      ]
    },
 
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      title_like: ''
    },
 
    queryParamsRules: {},
 
    editForm: {
      id: undefined,
      title: '',
      img: '',
      remark: '',
      status: '1'
    },
 
    editFormRules: {}
  });
  const { userInfo, editFormData, queryParams, multiple, ordernum, tableData, updatenum, loading, title, single, total, isShowDialog, editForm, ids, saveloading, isFullscreen } = toRefs(state);
  // 置顶 API请求方法
  const ordernumApi = async (param) => {
    param = param || {};
    param = getParamData(param);
    let http_url = '/shop/cate/sortnum';
    let http_data = {};
 
    let http_header = {};
 
    http_data.id = param.id;
    let flag = await confirmFunction({ title: '确定置顶吗' });
    if (!flag) {
      ElMessage.error('你已取消');
      return;
    }
    let ordernum = await proxy.$http.post(http_url, http_data, http_header, 'json');
 
    state.ordernum = ordernum;
    state.resetQuery();
  };
  // 设置为0 API请求方法
  const updatenumApi = async (param) => {
    param = param || {};
    param = getParamData(param);
    let http_url = '/shop/cate/update';
    let http_data = {};
 
    let http_header = {};
 
    http_data.id = param.id;
    http_data.sortnum = 0;
    let flag = await confirmFunction({ title: '确定取消置顶吗' });
    if (!flag) {
      ElMessage.error('你已取消');
      return;
    }
    let updatenum = await proxy.$http.post(http_url, http_data, http_header, 'json');
 
    state.updatenum = updatenum;
    state.resetQuery();
  };
 
  //confirm 自定义方法
  const confirmFunction = async (param) => {
    let title = param && (param.title || param.title == 0) ? param.title : state.title || '';
    return new Promise((resolve) => {
      ElMessageBox({
        message: title,
        title: '警告',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          resolve(true);
        })
        .catch(() => {
          resolve(false);
        });
    });
  };
  const editFormRef = ref(null);
 
  const editFormInit = deepClone(state.editForm);
 
  // 打开弹窗
  const openDialog = (row) => {
    if (row.id && row.id != undefined && row.id != 0) {
      state.editForm = changeRowToForm(row, state.editForm);
    } else {
      initForm();
    }
    state.isShowDialog = true;
    state.saveloading = false;
  };
 
  // 关闭弹窗
  const closeDialog = (row) => {
    proxy.mittBus.emit('onEditAdmintableModule', row);
    state.isShowDialog = false;
  };
 
  // 保存
  const onSubmit = () => {
    const formWrap = unref(editFormRef);
    if (!formWrap) return;
    formWrap.validate((valid, fields) => {
      if (valid) {
        state.saveloading = true;
        if (state.editForm.id != undefined && state.editForm.id != 0) {
          updateData('/shop/cate', state.editForm)
            .then(() => {
              ElMessage.success('修改成功');
              state.saveloading = false;
              closeDialog(state.editForm); // 关闭弹窗
            })
            .finally(() => {
              state.saveloading = false;
            });
        } else {
          addData('/shop/cate', state.editForm)
            .then(() => {
              ElMessage.success('新增成功');
              state.saveloading = false;
              closeDialog(state.editForm); // 关闭弹窗
            })
            .finally(() => {
              state.saveloading = false;
            });
        }
      } else {
        let message = '';
        if (fields && Object.keys(fields).length > 0) {
          let field = fields[Object.keys(fields)[0]];
          let messages = field.map((item) => {
            return item.message;
          });
          message = messages.join(',');
        }
        ElMessage.error('验证未通过！' + message);
      }
    });
  };
  // 表单初始化，方法：`resetFields()` 无法使用
  const initForm = () => {
    state.editForm = deepClone(editFormInit);
  };
  const queryParamsInit = deepClone(state.queryParams);
  /** 查询商品分类列表 */
  const handleQuery = () => {
    state.loading = true;
    listData('/shop/cate', state.queryParams).then((response) => {
      state.tableData = response.rows;
      state.total = response.total;
      state.loading = false;
    });
  };
  /** 重置按钮操作 */
  const resetQuery = () => {
    state.queryParams = deepClone(queryParamsInit);
    handleQuery();
  };
 
  // 打开新增商品分类弹窗
  const onOpenAddModule = (row) => {
    row = [];
    state.title = '添加商品分类';
    initForm();
    openDialog(row);
  };
  // 打开编辑商品分类弹窗
  const onOpenEditModule = (row) => {
    state.title = '修改商品分类';
    openDialog(row);
  };
  /** 删除按钮操作 */
  const onTabelRowDel = (row) => {
    const id = row.id || state.ids;
 
    ElMessageBox({
      message: '是否确认删除选中的商品分类?',
      title: '警告',
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(function () {
      return delData('/shop/cate', id).then(() => {
        handleQuery();
        ElMessage.success('删除成功');
      });
    });
  };
  // 多选框选中数据
  const handleSelectionChange = (selection) => {
    state.ids = selection.map((item) => item.id);
    state.single = selection.length != 1;
    state.multiple = !selection.length;
  };
 
  //分页页面大小发生变化
  const handleSizeChange = (val) => {
    state.queryParams.pageSize = val;
    handleQuery();
  };
  //当前页码发生变化
  const handleCurrentChange = (val) => {
    state.queryParams.pageNum = val;
    handleQuery();
  };
  const init = async () => {};
  // 页面加载时
  onMounted(async () => {
    await init();
    handleQuery();
    proxy.mittBus.on('onEditAdmintableModule', () => {
      handleQuery();
    });
  });
 
  // 页面卸载时
  onUnmounted(() => {
    proxy.mittBus.off('onEditAdmintableModule');
  });
</script>
 
<style lang="scss" scoped>
  .container {
    font-size: 12px;
  }
</style>

扩展阅读

以下是对商城管理系统产品分类的详细解析：

一、产品分类的重要性

二、产品分类的设置原则

用户购物习惯：根据用户的浏览和购买行为，可以将商品进行不同的分类，如热销商品、新品推荐、个性定制等。通过大数据分析用户行为，可以更好地满足用户需求，提高购买转化率。

商品属性：商城管理系统需要根据商品的品类、品牌、性别、年龄段、季节等属性进行分类和展示。例如，服装类商品可以根据性别和季节进行分类，电子产品可以根据品牌和功能进行分类。

销售策略：促销商品、特价商品、秒杀商品等可以根据不同的销售策略进行分类和展示，以便用户更便捷地参与活动并进行购买。

新品发布：新品发布是商城运营中常见的活动，新品发布分类模块可以凸显新品的特点和吸引力，提高用户对新品的关注度和购买欲望。

地域特色：商城管理系统需要根据不同地域的用户需求和消费习惯进行商品分类。例如，南方用户对衣物的需求可能与北方用户有所不同，可以针对不同地域进行商品分类设置。

三、产品分类的具体实现

商城可以根据实际需求随时调整分类结构。

分类展示：分类在前台展示时，应支持一级、二级甚至更多级分类的展示。点击分类可以展示下级分类或者商品列表，方便用户进行浏览和选择。

商品属性管理：商城管理系统应支持商品属性的添加、修改、删除以及类型、值、单位、排序等设置。这有助于商城对商品进行更精细化的管理和展示。

商品管理：商城管理系统应支持商品的添加、修改、删除以及基本属性（如名称、价格、库存、状态等）的设置。同时，还应支持商品的批量导入和导出功能，提高商品管理的效率。

四、产品分类的优化建议

数据分析：通过数据分析工具对用户的购物行为进行分析，了解用户的偏好和需求，从而优化分类结构。

用户反馈：积极收集用户的反馈意见，对分类进行持续改进和优化。

技术创新：引入先进的技术手段，如人工智能、大数据等，对分类进行智能化管理和优化。

综上所述，商城管理系统中的产品分类是一个复杂而重要的环节。通过合理的分类设置和优化措施，商城可以提高运营效率、提升用户体验并推动销售业绩的增长。

低代码可视化-PC商城管理系统-产品分类--代码生成器

新增数据库表

修改表结构

生成API

新增页面

使用CRUD模板页面至设计区

修改API

修改表格字段

表单编辑字段

点击保存源码至本地

进入页面

数据查询

代码生成器

VUE2选项式代码生成器

VUE3组合式代码生成器

扩展阅读

一、产品分类的重要性

二、产品分类的设置原则

三、产品分类的具体实现

四、产品分类的优化建议

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

低代码可视化-PC商城管理系统-产品分类--代码生成器

新增数据库表

修改表结构

生成API

新增页面

使用CRUD模板页面至设计区

修改API

修改表格字段

表单编辑字段

点击保存源码至本地

进入页面

数据查询

代码生成器

VUE2选项式代码生成器

VUE3组合式代码生成器

扩展阅读

一、产品分类的重要性

二、产品分类的设置原则

三、产品分类的具体实现

四、产品分类的优化建议

热门文章

最新文章

相关课程

相关电子书

相关实验场景