|
@@ -1,7 +1,223 @@
|
|
|
<template>
|
|
|
- <div>111111111111111111111</div>
|
|
|
+ <div class="multi-center">
|
|
|
+ <!-- 1 -->
|
|
|
+ <div class="container">
|
|
|
+ <Title fontSize="16px">Multi specification parameters</Title>
|
|
|
+ <el-divider />
|
|
|
+ <div class="button-container">
|
|
|
+ <BaseButton btnClass="btn-orange" :onClick="handleAddSpec" text="Add new specifications" />
|
|
|
+ <BaseButton btnClass="btn-yellow" :onClick="handleGenerate" text="Generate immediately" />
|
|
|
+ </div>
|
|
|
+ <el-form :model="formData" ref="formRef" class="spec-form">
|
|
|
+ <div v-for="(spec, index) in specifications" :key="index" class="specification-row">
|
|
|
+ <div class="specification-item">
|
|
|
+ <div class="specification-label">{{ `Specifications ${index + 1}` }}</div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input
|
|
|
+ v-model="spec.name"
|
|
|
+ placeholder="Enter specification name"
|
|
|
+ required
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="specification-item">
|
|
|
+ <div class="specification-label">{{ `Specification value ${index + 1}` }}</div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="spec.value" placeholder="Enter value" required></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="specification-item" style="margin-top: 30px">
|
|
|
+ <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn"> Save</el-button>
|
|
|
+ <el-button style="background: #fff; color: #fb923c" @click="cancelSpec(index)" class="cancel-btn">Cancel</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 2 -->
|
|
|
+ <div class="container">
|
|
|
+ <Title fontSize="16px">Multi specification parameters</Title>
|
|
|
+ <el-divider />
|
|
|
+ <div class="button-container">
|
|
|
+ <BaseButton btnClass="btn-orange" :onClick="handleMemory" text="Add new specifications" />
|
|
|
+ <BaseButton btnClass="btn-yellow" :onClick="MemoryImmediately" text="Generate immediately" />
|
|
|
+ </div>
|
|
|
+ <div class="h-[80px]" v-for="(spec,index) in memoryList" :key="index">
|
|
|
+ <div class="specification-label">{{ `Memory ${index + 1}` }}</div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex w-[400px] justify-between">
|
|
|
+ <el-input style="width: 60px;" v-model="spec.name" ></el-input>
|
|
|
+ <el-input style="width: 60px;" v-model="spec.value"></el-input>
|
|
|
+ <el-input style="width: 60px;" v-model="spec.weight"></el-input>
|
|
|
+ <el-input style="width: 180px" v-model="spec.center" placeholder="Please enter attributes" ></el-input>
|
|
|
+ </div>
|
|
|
+ <div style="margin: 2px 0px 0px 10px">
|
|
|
+ <el-button style="background: #fb923c; color: #fff" @click="memoryAdd(spec)" class="save-btn">Add</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 3 -->
|
|
|
+ <div class="container">
|
|
|
+ <Title fontSize="16px">Multi specification parameters</Title>
|
|
|
+ <el-divider />
|
|
|
+ <div class="button-container">
|
|
|
+ <BaseButton btnClass="btn-orange" :onClick="xxxxx" text="Add new specifications" />
|
|
|
+ <BaseButton btnClass="btn-yellow" :onClick="ccccc" text="Generate immediately" />
|
|
|
+ </div>
|
|
|
+ <div class="specificationAdd h-[80px]">
|
|
|
+ <div class="specification-label">Memory</div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex w-[340px] justify-between">
|
|
|
+ <el-input style="width: 60px;" ></el-input>
|
|
|
+ <el-input style="width: 60px;" ></el-input>
|
|
|
+ <el-input style="width: 180px;" placeholder="Please enter attributes" ></el-input>
|
|
|
+ </div>
|
|
|
+ <div style="margin: 2px 0px 0px 10px">
|
|
|
+ <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn">Add</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form class="spec-form">
|
|
|
+ <div class="specification-row mt-[5px]">
|
|
|
+ <div class="specification-item">
|
|
|
+ <div class="specification-label">Specifications</div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input placeholder="Enter specification name" required></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="specification-item">
|
|
|
+ <div class="specification-label">Specifications</div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input placeholder="Enter value" required></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="specification-item" style="margin-top: 30px">
|
|
|
+ <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn"> Save</el-button>
|
|
|
+ <el-button style="background: #fff; color: #fb923c" @click="cancelSpec(index)" class="cancel-btn"> Cancel</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 4 -->
|
|
|
+ <div class="container mb-[25px]">
|
|
|
+ <Title fontSize="16px">Multi specification parameters</Title>
|
|
|
+ <el-divider />
|
|
|
+ <div class="button-container">
|
|
|
+ <BaseButton btnClass="btn-orange" :onClick="xxx" text="Add new specifications" />
|
|
|
+ <BaseButton btnClass="btn-yellow" :onClick="ccc" text="Generate immediately" />
|
|
|
+ </div>
|
|
|
+ <div class="specificationAdd h-[80px]">
|
|
|
+ <div class="specification-label">Memory</div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex w-[400px] justify-between">
|
|
|
+ <el-input style="width: 60px;" ></el-input>
|
|
|
+ <el-input style="width: 60px;" ></el-input>
|
|
|
+ <el-input style="width: 60px;" ></el-input>
|
|
|
+ <el-input style="width: 180px;" placeholder="Please enter attributes" ></el-input>
|
|
|
+ </div>
|
|
|
+ <div style="margin: 2px 0px 0px 10px">
|
|
|
+ <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn">Add</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table :data="tableData" :cell-style="{ textAlign: 'center' }"
|
|
|
+ :header-cell-style="{ textAlign: 'center' }">
|
|
|
+ <el-table-column prop="memory" label="memory" width="130" />
|
|
|
+ <el-table-column prop="color" label="color" width="130" />
|
|
|
+ <el-table-column prop="price" label="price" width="300" >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.price"
|
|
|
+ placeholder="Please enter the selling price"
|
|
|
+ :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
|
|
|
+ :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="Operation">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button @click="deleteVariant(scope.row)" type="text" size="small">Delete</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup></script>
|
|
|
+<script setup>
|
|
|
+ import Title from '@/components/titleFood.vue'
|
|
|
+ import BaseButton from './BaseButton.vue'
|
|
|
+ import { ref } from 'vue'
|
|
|
+ const formData = ref({})
|
|
|
+ const specifications = ref([ { name: '', value: '' }])
|
|
|
+ const memoryList = ref([ { name: '', value: '',weight:'', center:"",}])
|
|
|
+ const tableData =ref([
|
|
|
+ { memory: '8GB', color: 'Black', price: '' },
|
|
|
+ { memory: '16GB', color: 'White', price: '' },
|
|
|
+ ])
|
|
|
+ // specification 新增
|
|
|
+ const handleAddSpec = () => {
|
|
|
+ console.log('新增')
|
|
|
+ specifications.value.push({ name: '', value: '' })
|
|
|
+ }
|
|
|
+ const handleGenerate = () => {
|
|
|
+ console.log('specifications生成完成')
|
|
|
+ }
|
|
|
+ const saveSpec = (index) => {
|
|
|
+ console.log('保存', index)
|
|
|
+ }
|
|
|
+ const cancelSpec = (index) => {
|
|
|
+ console.log('取消', index)
|
|
|
+ specifications.value.splice(index, 1)
|
|
|
+ }
|
|
|
+ // Memory 添加规格
|
|
|
+ const handleMemory=()=>{
|
|
|
+ console.log("memoryList新增");
|
|
|
+ memoryList.value.push({ name: '', value: '',weight:'', center:"",})
|
|
|
+ }
|
|
|
+ const MemoryImmediately=()=>{
|
|
|
+ console.log('memoryList立即生产',memoryList.value);
|
|
|
+ }
|
|
|
+ const memoryAdd=(spec)=>{
|
|
|
+ console.log("memoryList添加完成",spec);
|
|
|
+ }
|
|
|
+
|
|
|
+// 表格删除
|
|
|
+const deleteVariant=(index)=>{
|
|
|
+ tableData.value.splice(index, 1);
|
|
|
+}
|
|
|
+</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ :deep(.el-divider--horizontal) {
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .scroll::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .button-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+ .specification-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .specification-label {
|
|
|
+ margin: 12px 0px;
|
|
|
+ }
|
|
|
+ .el-table {
|
|
|
+ --el-table-header-bg-color: #f8f9fa;
|
|
|
+ --el-table-border-color: #e5e7eb;
|
|
|
+ --el-table-header-text-color: #4b5563;
|
|
|
+}
|
|
|
+</style>
|