AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue3商品SKU多规格编辑组件

2024-10-15 13
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3商品SKU多规格编辑组件

商品SKU多规格组件主要用于电商平台的商品详情页，帮助买家在选择商品时能够根据不同的规格（如颜色、尺码、容量等）进行筛选和购买。这种组件的设计旨在提升用户体验，简化购买流程，并确保买家能够准确地选择到自己需要的商品规格。以下是对商品SKU多规格组件的详细解析：

1. 定义与功能

  • SKU（Stock Keeping Unit）定义：SKU即库存量单位，是指宝贝的销售属性集合，供买家在下单时点选，如“规格”、“颜色分类”、“尺码”等。部分SKU的属性值可以由卖家自定义编辑，部分则不可编辑。
  • 功能：商品SKU多规格组件允许买家在商品详情页直接查看并选择商品的多种规格，同时展示每种规格对应的库存数量、价格等信息。这有助于买家快速了解商品的各种选项，并做出购买决策。

2. 组件特点

数据驱动：现代的商品SKU多规格组件通常采用数据驱动的方式，即组件从服务器获取商品规格数据，并根据这些数据动态渲染出可供买家选择的规格选项。这种方式提高了组件的灵活性和可扩展性。

用户友好：组件的设计注重用户体验，通过清晰的界面布局和交互设计，使买家能够轻松理解和选择商品的规格。

实时更新：组件能够实时从服务器获取商品的库存信息和价格信息，确保买家在选择规格时能够看到最新的数据。

3. 实现方式

前端开发：商品SKU多规格组件通常使用前端技术进行开发。这里使用了Vue3现代前端框架中，可以通过组件化的方式实现商品SKU多规格组件的复用和灵活配置。

后端支持：组件需要后端服务的支持，以获取商品的规格数据、库存信息、价格信息等。后端服务可以通过API接口向前端组件提供这些数据。

数据交互：前端组件与后端服务之间通过HTTP请求和响应进行数据交互。前端组件发送请求获取数据，后端服务处理请求并返回数据给前端组件进行展示。

4. 应用场景

电商平台：商品SKU多规格组件广泛应用于各类电商平台，如淘宝、京东、天猫等。这些平台上的商品种类繁多，规格多样，使用SKU多规格组件可以大大提升买家的购物体验。

零售店铺：对于拥有线上销售渠道的零售店铺来说，商品SKU多规格组件也是一个不可或缺的工具。它可以帮助店铺更好地展示商品信息，提高销售额。

5. 组件实现

<template>
  <div class="diygw-col-24">
    <div v-if="specs.length > 0">
      <VueDraggable v-bind="{ animation: 200, disabled: false, ghostClass: 'ghost' }" v-model="specs" class="list-group" ghost-class="ghost">
        <div v-for="(element, itemIndex) in specs" class="box sku-spec flex flex-direction-column margin-bottom">
          <div class="flex margin-bottom-xs align-center justify-between">
            <el-input style="width: 200px !important; flex: unset" placeholder="请输入规格名称" v-model="element.title"> </el-input>
            <div class="toolbar">
              <i class="diyicon handle diyicon-yidongxuanze" />
              <el-tooltip content="上移" placement="bottom">
                <i class="diy-icon-top" @click.stop="move(itemIndex, 'up')" />
              </el-tooltip>
              <el-tooltip content="下移" placement="bottom">
                <i class="diy-icon-down" @click.stop="move(itemIndex, 'down')" />
              </el-tooltip>
              <el-tooltip content="新增规格组" placement="bottom">
                <i class="diy-icon-add" @click.stop="addSpec()" />
              </el-tooltip>
              <el-tooltip content="删除规格组" placement="bottom">
                <i class="diy-icon-close" @click.stop="removeSpec(itemIndex)" />
              </el-tooltip>
            </div>
          </div>
          <div class="flex flex-wrap align-center">
            <VueDraggable
              v-bind="{ animation: 200, disabled: false, ghostClass: 'ghost' }"
              v-model="element.datas"
              class="flex flex-wrap align-center sku-spec-item"
              ghost-class="ghost"
            >
              <div v-for="(subitem, subindex) in element.datas" class="margin-right-xs spec-item margin-bottom-xs" style="width: 150px">
                <el-input v-model="subitem.title"> </el-input>
                <div class="spec-toolbar">
                  <el-tooltip content="删除规格值" placement="bottom">
                    <i class="diy-icon-close" @click.stop="removeSpecItem(itemIndex, subindex)" />
                  </el-tooltip>
                </div>
              </div>
            </VueDraggable>
            <div class="margin-right-xs margin-bottom-xs text-xs" @click="addSpecIndex(itemIndex)">新增规格值</div>
          </div>
        </div>
      </VueDraggable>
    </div>
    <el-button class="diygw-col-24 margin-bottom-xs" @click="addSpec">新增规格</el-button>
    <DiySkutable v-model="skus" :specs="specs" :columns="columns" ref="skuref"></DiySkutable>
  </div>
</template>
 
<script setup name="DiySku">
import { ElMessage } from 'element-plus';
import { useVModels } from '@vueuse/core';
import { VueDraggable } from 'vue-draggable-plus';
import DiySkutable from './skutable.vue';
const props = defineProps({
  skus: {
    type: Array,
    default: () => {
      return [];
    },
  },
  specs: {
    //规格配置
    type: Array,
    default: () => {
      return [];
    },
  },
  columns: {
    //自定义sku属性
    type: Array,
    default: () => {
      return [];
    },
  },
  filterable: {
    //是否开启sku搜索
    type: Boolean,
    default: true,
  },
});
 
const emit = defineEmits(['update:specs', 'update:skus']);
const { skus, specs } = useVModels(props, emit);
const removeSpec = (index) => {
  specs.value.splice(index, 1);
};
 
const removeSpecItem = (index, subindex) => {
  specs.value[index].datas.splice(subindex, 1);
};
 
const addSpecIndex = (index) => {
  let id = specs.value[index].datas.length + specs.value[index].id;
  specs.value[index].datas.push({
    title: '',
    id: id + '' + new Date().getTime(),
  });
};
 
const addSpec = () => {
  let id = (specs.value.length + 1) * 1000;
  specs.value.push({
    id: id,
    title: '',
    datas: [
      {
        title: '',
        id: id + '' + new Date().getTime(),
      },
    ],
  });
};
 
const move = (itemIndex, dir) => {
  let comps = specs.value;
  let item = comps[itemIndex];
  if (dir == 'up') {
    if (itemIndex == 0) {
      ElMessage.error('已经是第一个了！');
      return;
    }
    const swap = comps[itemIndex - 1];
    const tmp = swap;
    comps[itemIndex - 1] = item;
    comps[itemIndex] = tmp;
  } else {
    if (itemIndex == comps.length - 1) {
      ElMessage.error('已经是最一个了！');
      return;
    } else {
      const swap = comps[itemIndex + 1];
      const tmp = swap;
      comps[itemIndex + 1] = item;
      comps[itemIndex] = tmp;
    }
  }
};
</script>
<style lang="scss">
.sku-spec {
  padding: 6px;
  border-radius: 5px;
  border: 1px solid #ebeef5;
 
  .sku-spec-item {
    padding-left: 30px;
    padding-right: 5px;
    .spec-item {
      position: relative;
 
      .spec-toolbar {
        top: -2px;
        right: -3px;
        position: absolute;
        display: none;
      }
 
      &:hover {
        .spec-toolbar {
          display: block;
        }
      }
    }
  }
}
</style>
<template>
  <div class="sku-table" v-if="specs.length > 0">
    <table class="diy-table diy-skutable">
      <tr>
        <th v-for="(item, colIndex) in specs" :key="colIndex">
          {{ item.title }}
        </th>
        <th v-for="(item, colIndex) in columns" :style="{ width: item.type == 'number' ? '100px' : 'auto' }" :key="colIndex + specs.length + 1">
          {{ item.title }}
        </th>
      </tr>
      <tr>
        <td v-for="(item, colIndex) in specs" :key="colIndex">
          <el-select v-if="filterable" @change="resetTable" v-model="headerFilterParams[item.title]" placeholder="过滤查询" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(child, index2) in item.datas" :key="index2" :label="child.title" :value="child.title"></el-option>
          </el-select>
          <span v-else class="spec-title">
            {{ item.title }}
          </span>
        </td>
        <td v-for="(item, colIndex) in columns" :key="colIndex + specs.length + 1">
          <span v-if="item.readOnly">{{ item.title }}</span>
          <diy-uploadinput
            class="diygw-col-24"
            v-else-if="item.type == 'img'"
            @blur="
              () => {
                onBatchEdit(item.id);
              }
            "
            placeholder="批量修改"
            v-model="columnsValue[item.id]"
          />
          <el-input-number
            :min="0"
            :precision="item.precision ? item.precision : 0"
            :step="item.precision ? 0.1 : 1"
            v-else-if="item.type == 'number'"
            v-model="columnsValue[item.id]"
            controls-position="right"
            :controls="false"
            class="sku-input-number"
            @blur="
              () => {
                onBatchEdit(item.id);
              }
            "
            @keyup.native.enter="
              () => {
                onBatchEdit(item.id);
              }
            "
            placeholder="批量修改"
          />
          <el-input
            v-else
            class="diygw-col-24"
            v-model="columnsValue[item.id]"
            @blur="
              () => {
                onBatchEdit(item.id);
              }
            "
            @keyup.native.enter="
              () => {
                onBatchEdit(item.id);
              }
            "
            placeholder="批量修改"
          />
        </td>
      </tr>
      <tr v-for="(row, rowIndex) in renderTableRows" :key="row.id">
        <td
          v-for="(child, colIndex) in row.columns"
          :class="[
            child.shouldSetRowSpan ? '' : 'hide',
            rowIndex === rowLastCanSpan[colIndex] ? 'col-last-rowspan' : '',
            colIndex < specs.length - 1 ? 'row-span-style' : '',
          ]"
          :rowspan="child.shouldSetRowSpan ? assignRule[colIndex] : ''"
          :key="colIndex"
        >
          <span>{{ child.showValue }}</span>
        </td>
        <td v-for="(child, colIndex) in columns" :key="colIndex + columns.length + 1">
          <span v-if="child.readOnly">{{ row[child.id] }}</span>
          <diy-uploadinput
            v-else-if="child.type == 'img'"
            @change="
              (value) => {
                checkValue(value, child, row);
              }
            "
            :placeholder="child.title"
            v-model="row[child.id]"
          ></diy-uploadinput>
          <el-input-number
            :min="0"
            :precision="child.precision ? child.precision : 0"
            :step="child.precision ? 0.1 : 1"
            v-else-if="child.type == 'number'"
            v-model="row[child.id]"
            controls-position="right"
            :controls="false"
            class="sku-input-number"
            @change="
              (value) => {
                checkValue(value, child, row);
              }
            "
            :placeholder="child.title"
          />
          <el-input
            v-else
            v-model="row[child.id]"
            @change="
              (value) => {
                checkValue(value, child, row);
              }
            "
            :placeholder="child.title"
          />
        </td>
      </tr>
    </table>
  </div>
</template>
 
<script setup name="DiySkutable">
import { uuid } from '@/utils';
import { ElMessageBox } from 'element-plus';
import { onMounted, ref, watch, computed } from 'vue';
import DiyUploadinput from '@/components/upload/uploadinput.vue';
import { useVModel } from '@vueuse/core';
 
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
  specs: {
    //规格配置
    type: Array,
    default: () => {
      return [];
    },
  },
  columns: {
    //自定义sku属性
    type: Array,
    default: () => {
      return [];
    },
  },
  filterable: {
    //是否开启sku搜索
    type: Boolean,
    default: true,
  },
});
 
const emit = defineEmits(['update:modelValue']);
const modeldata = useVModel(props, 'modelValue', emit);
 
const headerFilterParams = ref({});
const columnsValue = ref({});
const originTableRows = ref([]);
const renderTableRows = ref([]);
 
onMounted(() => {
  render();
});
 
function render() {
  originTableRows.value = createTable();
  renderTableRows.value = originTableRows.value;
  getData();
}
 
function _resetRowSpan(table) {
  table.forEach((row, rowIndex) => {
    row.columns.forEach((column, columnIndex) => {
      column.shouldSetRowSpan = shouldSetRowSpan(rowIndex, columnIndex);
    });
  });
}
function createTable() {
  let tableData = [];
  let details = props.modelValue;
  let theaderFilterParams = {};
  props.specs.forEach((item) => {
    theaderFilterParams[item.title] = '';
  });
  headerFilterParams.value = theaderFilterParams;
  for (let i = 0; i < skuTotal.value; i++) {
    let columns = props.specs.map((t, j) => {
      let { title, id } = getShowValue(i, j);
      return {
        shouldSetRowSpan: shouldSetRowSpan(i, j),
        showValue: title,
        valueId: id,
        columnName: t.title,
        columnId: t.id,
        precision: t.precision,
      };
    });
    //获取当前组合
    let pattern = columns
      .map((t) => t.valueId)
      .sort()
      .toString();
    //从详情中找回同一个组合的sku数据
    let rowDetails = details.find((t) => t.specIds === pattern);
    //当数据长度不为0,并新增了大的规格
    if (details.length > 0 && details.length >= i && !rowDetails && details[0].specIds.split(',').length != columns.length) {
      rowDetails = details[i];
    }
    tableData.push({
      id: uuid(),
      ...createSkuPropertyFields(columns, i, rowDetails),
      columns,
    });
  }
  return tableData;
}
function createSkuPropertyFields(columns, rowIndex, row) {
  return props.columns.reduce((res, item) => {
    if (row && row[item.id]) {
      res[item.id] = row[item.id] || '';
    } else {
      if (item.defaultValue) {
        // 设置默认值，可以为string或function，fuction时会传入行的索引和列的信息
        if (typeof item.defaultValue === 'string') {
          res[item.id] = item.defaultValue;
        } else if (typeof item.defaultValue === 'function') {
          res[item.id] = item.defaultValue({ columns, rowIndex });
        }
      } else if (columnsValue.value[item.id]) {
        res[item.id] = columnsValue.value[item.id];
      } else if (res.type == 'number') {
        res[item.id] = 0;
      } else {
        res[item.id] = '';
      }
    }
    return res;
  }, {});
}
function shouldSetRowSpan(rowIndex, colIndex) {
  return rowIndex % assignRule.value[colIndex] === 0;
}
function getShowValue(rowIndex, colIndex) {
  let datas = props.specs[colIndex].datas;
  let index;
  if (colIndex === props.specs.length - 1) {
    index = rowIndex % datas.length;
  } else {
    let step = assignRule.value[colIndex];
    index = Math.floor(rowIndex / step);
    if (index >= datas.length) {
      index = index % datas.length;
    }
  }
  return datas[index];
}
 
function onBatchEdit(id) {
  ElMessageBox.confirm(`确认批量修改吗?`, '提示', {
    customClass: 'diygw-messagebox',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      let value = columnsValue.value[id];
      renderTableRows.value.forEach((item) => {
        item[id] = value;
      });
      getData();
    })
    .catch(() => {});
}
function checkValue(value, columnInfo, row) {
  // let { id, pattern } = columnInfo;
  // if (pattern) {
  //  (row || columnsValue.value)[id] = value.replace(pattern, '');
  // }
  getData();
}
function getData() {
  let data = originTableRows.value.map((t) => {
    let columnObj = props.columns.reduce((res, item) => {
      res[item.id] = item.format ? item.format(t[item.id]) : t[item.id];
      return res;
    }, {});
    return {
      specIds: t.columns.map((t) => t.valueId).join(','),
      ...columnObj,
    };
  });
  modeldata.value = data;
}
 
const hasFilter = computed(() => {
  return Object.values(headerFilterParams.value).filter((t) => !!t).length > 0;
});
 
const renderSpecs = computed(() => {
  return props.specs
    .map((t) => t.datas.length)
    .map((t, index) => {
      return hasFilter.value ? (headerFilterParams.value[props.specs[index].title] ? 1 : t) : t;
    });
});
 
const skuTotal = computed(() => {
  return renderSpecs.value.reduce((result, item) => result * item, renderSpecs.value.length ? 1 : 0);
});
 
const assignRule = computed(() => {
  return renderSpecs.value.reduce((result, item, index) => {
    let preValue = result[index - 1];
    if (preValue) {
      result.push(preValue / item);
    } else {
      result.push(skuTotal.value / item);
    }
    return result;
  }, []);
});
 
const rowLastCanSpan = computed(() => {
  let indexArr = Array.from(new Array(skuTotal.value).keys()); //生成行的索引数组
  //每列可以合并的最后一行的行索引数组，为了设置样式
  return assignRule.value.map((t, index, array) => {
    return index === array.length - 1 ? null : indexArr.filter((row) => row % t === 0).pop();
  });
});
 
watch(
  () => props.specs,
  () => {
    render();
  },
  {
    deep: true,
    immediate: true,
  }
);
function resetTable() {
  if (hasFilter.value) {
    let trenderTableRows = originTableRows.value.filter((t) => {
      return t.columns.reduce((res, item) => {
        let filterValue = headerFilterParams.value[item.columnName];
        return filterValue ? res && item.showValue === filterValue : res;
      }, true);
    });
    _resetRowSpan(trenderTableRows);
    renderTableRows.value = trenderTableRows;
  } else {
    _resetRowSpan(originTableRows.value);
    renderTableRows.value = originTableRows.value;
  }
}
// watch(
//  headerFilterParams,
//  () => {
//    resetTable();
//  },
//  {
//    deep: true,
//    immediate: true,
//  }
// );
</script>

组件调用

<template>
  <div class="container">
    <div class="el-card is-always-shadow diygw-col-24">
      <div class="el-card__body">
        <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="name" align="center"> </el-table-column>
          <el-table-column label="性别" prop="sex" align="center"> </el-table-column>
          <el-table-column label="邮箱" prop="email" 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="CRUD表格" draggable center>
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">CRUD表格</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="80px">
          <div class="flex diygw-col-24">
            <el-form-item prop="sku" label="多规格">
              <diy-sku :columns="editFormData.skuColumns" v-model:skus="editForm.sku.skus" v-model:specs="editForm.sku.specs"></diy-sku>
            </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="index">
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 DiySku from '@/components/sku/index.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,
  // 遮罩层
  loading: true,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 弹出层标题
  title: '',
  // 总条数
  total: 0,
  tableData: [],
  // 是否显示弹出层
  isFullscreen: false,
  isShowDialog: false,
  saveloading: false,
 
  editFormData: {
    skuColumns: [
      { title: '图片地址', id: 'thumb', type: 'img' },
      { title: '价格', id: 'price', type: 'number' },
      { title: '划线价格', id: 'linePrice', type: 'number' },
      { title: '数量', id: 'amount', type: 'number' },
      { title: '备注', id: 'sku', type: 'text' },
    ],
  },
 
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
 
  queryParamsRules: {},
 
  editForm: {
    id: undefined,
    sku: {
      skus: [],
      specs: [],
    },
  },
 
  editFormRules: {},
});
const {
  userInfo,
  editFormData,
  queryParams,
  multiple,
  tableData,
  loading,
  title,
  single,
  total,
  isShowDialog,
  editForm,
  ids,
  saveloading,
  isFullscreen,
} = toRefs(state);
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) => {
    if (valid) {
      state.saveloading = true;
      if (state.editForm.id != undefined && state.editForm.id != 0) {
        updateData('/sys/user', state.editForm)
          .then(() => {
            ElMessage.success('修改成功');
            state.saveloading = false;
            closeDialog(state.editForm); // 关闭弹窗
          })
          .finally(() => {
            state.saveloading = false;
          });
      } else {
        addData('/sys/user', state.editForm)
          .then(() => {
            ElMessage.success('新增成功');
            state.saveloading = false;
            closeDialog(state.editForm); // 关闭弹窗
          })
          .finally(() => {
            state.saveloading = false;
          });
      }
    } else {
      ElMessage.error('验证未通过！');
    }
  });
};
// 表单初始化，方法：`resetFields()` 无法使用
const initForm = () => {
  state.editForm = deepClone(editFormInit);
};
const queryParamsInit = deepClone(state.queryParams);
/** 查询CRUD表格列表 */
const handleQuery = () => {
  state.loading = true;
  listData('/sys/user', state.queryParams).then((response) => {
    state.tableData = response.rows;
    state.total = response.total;
    state.loading = false;
  });
};
/** 重置按钮操作 */
const resetQuery = () => {
  state.queryParams = deepClone(queryParamsInit);
  handleQuery();
};
 
// 打开新增CRUD表格弹窗
const onOpenAddModule = (row) => {
  row = [];
  state.title = '添加CRUD表格';
  initForm();
  openDialog(row);
};
// 打开编辑CRUD表格弹窗
const onOpenEditModule = (row) => {
  state.title = '修改CRUD表格';
  openDialog(row);
};
/** 删除按钮操作 */
const onTabelRowDel = (row) => {
  const id = row.id || state.ids;
 
  ElMessageBox({
    message: '是否确认删除选中的CRUD表格?',
    title: '警告',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(function () {
    return delData('/sys/user', 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>


已集成进开源项目组件：diygw-ui-admin: 基于vite、vue3.x 、router、pinia、Typescript、Element plus等，适配手机、平板、pc 的后台开源免费模板库

文章标签：
前端开发
UED
JavaScript
API
关键词：
vue3组件VUE.js
编辑组件VUE.js
商品组件VUE.js
规格VUE.js
商品VUE.js
diygwcom
目录
相关文章
那年春天
|
1天前
|
存储 JavaScript UED
在 Vue 组件中动态切换全局样式
【10月更文挑战第5天】
那年春天
8 1
mao29955
|
1天前
Vue3 使用mapState
【10月更文挑战第5天】
mao29955
5 1
一缕微风绕指柔
|
1天前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API：一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API：一种更灵活的组件状态管理方式
一缕微风绕指柔
5 1
john散漫
|
2天前
|
存储 消息中间件 JavaScript
vue组件传值的12种方式
【10月更文挑战第1天】
john散漫
13 1
Codelinghu
|
2天前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
Codelinghu
15 3
mao29955
|
2天前
|
JavaScript 开发者
Svelte 中的事件处理机制与 Vue 有什么不同？
【10月更文挑战第4天】
mao29955
95 58
那年春天
|
2天前
|
前端开发 JavaScript 开发者
除了 Vue，还有哪些框架支持 Render 函数？
【10月更文挑战第4天】
那年春天
95 58
派大鑫的工作室
|
1天前
|
JavaScript UED 开发者
Vue中的导航守卫有哪三种？分别有什么作用
Vue中的导航守卫有哪三种？分别有什么作用
派大鑫的工作室
11 1
大树营养快线
|
1天前
|
JavaScript 前端开发 UED
如何在 Vue 中实现路由懒加载？
【10月更文挑战第5天】
大树营养快线
7 1
光明顶阳顶天
|
1天前
|
JavaScript 前端开发
使用 Vue CLI 来处理样式的编译和打包
【10月更文挑战第5天】
光明顶阳顶天
6 1