修改商品分类价格配置
This commit is contained in:
parent
c0ad55c89a
commit
47a95bd338
|
|
@ -1,163 +1,194 @@
|
|||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="800px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
||||
<el-form-item label="所属ID" prop="pid">
|
||||
<!-- <el-input v-model="formData.pid" clearable placeholder="请输入所属ID" /> -->
|
||||
<el-cascader v-model="formData.pid" :props="props" :show-all-levels="false" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="formData.name" clearable placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息" prop="data">
|
||||
<el-input v-model="formData.data" clearable placeholder="请输入备注信息" />
|
||||
</el-form-item>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="800px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
||||
<el-form-item label="所属ID" prop="pid">
|
||||
<!-- <el-input v-model="formData.pid" clearable placeholder="请输入所属ID" /> -->
|
||||
<el-cascader v-model="formData.pid" :props="props" :show-all-levels="false" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="formData.name" clearable placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息" prop="data">
|
||||
<el-input v-model="formData.data" clearable placeholder="请输入备注信息" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图片" prop="pic">
|
||||
<material-picker v-model="formData.pic" />
|
||||
</el-form-item>
|
||||
<el-form-item label="加价比例" prop="price_rate">
|
||||
<div class="m-1 flex" v-for="item in formData.price_rate" :key="item.id">
|
||||
<div style="display: inline-block; margin-right: 6px">{{ item.title }}:</div>
|
||||
<div style="display: inline-block;">
|
||||
<el-input v-model="item.rate" style="width: 80px">
|
||||
<template #suffix>%</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="pic">
|
||||
<material-picker v-model="formData.pic" />
|
||||
</el-form-item>
|
||||
<el-form-item label="加价比例" prop="price_rate">
|
||||
<el-button @click="addRow" class="mb-2">添加选项</el-button>
|
||||
<el-table :data="formData.price_rate" style="width: 100%">
|
||||
<el-table-column label="用户角色" width="180">
|
||||
<template v-slot="scope">
|
||||
<el-select v-model="scope.row.id" placeholder="请选择用户角色">
|
||||
<el-option v-for="item in userShipList" :key="item.id" :label="item.title"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="比例" width="180">
|
||||
<template v-slot="scope">
|
||||
<el-input v-model="scope.row.rate" style="width: 80px">
|
||||
<template #suffix>%</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="deleteRow(scope.$index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="formData.sort" clearable placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="formData.sort" clearable placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="storeCategoryEdit">
|
||||
import type { FormInstance } from "element-plus";
|
||||
import Popup from "@/components/popup/index.vue";
|
||||
import {
|
||||
apiStoreCategoryAdd,
|
||||
apiStoreCategoryEdit,
|
||||
apiStoreCategoryDetail, apiStoreCategoryLists,
|
||||
} from "@/api/store_category";
|
||||
import { timeFormat } from "@/utils/util";
|
||||
import type { PropType } from "vue";
|
||||
defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["success", "close"]);
|
||||
const formRef = shallowRef<FormInstance>();
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>();
|
||||
const mode = ref("add");
|
||||
import type { FormInstance } from "element-plus";
|
||||
import Popup from "@/components/popup/index.vue";
|
||||
import {
|
||||
apiStoreCategoryAdd,
|
||||
apiStoreCategoryEdit,
|
||||
apiStoreCategoryDetail, apiStoreCategoryLists,
|
||||
} from "@/api/store_category";
|
||||
import { apiUserShipLists } from "@/api/user_ship"
|
||||
import { timeFormat } from "@/utils/util";
|
||||
import type { PropType } from "vue";
|
||||
defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["success", "close"]);
|
||||
const formRef = shallowRef<FormInstance>();
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>();
|
||||
const mode = ref("add");
|
||||
const tableData = ref([])
|
||||
const userShipList = ref([])
|
||||
|
||||
|
||||
const props = {
|
||||
value: "id",
|
||||
label: "name",
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
lazy: true,
|
||||
lazyLoad(node, resolve) {
|
||||
let pid = node.value || 0;
|
||||
apiStoreCategoryLists({
|
||||
pid: pid,
|
||||
page_size: 10000,
|
||||
}).then((res) => {
|
||||
resolve(
|
||||
res.lists.map((item: any) => {
|
||||
item.leaf = item.pid > 0;
|
||||
return item;
|
||||
})
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
const props = {
|
||||
value: "id",
|
||||
label: "name",
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
lazy: true,
|
||||
lazyLoad(node, resolve) {
|
||||
let pid = node.value || 0;
|
||||
apiStoreCategoryLists({
|
||||
pid: pid,
|
||||
page_size: 10000,
|
||||
}).then((res) => {
|
||||
resolve(
|
||||
res.lists.map((item : any) => {
|
||||
item.leaf = item.pid > 0;
|
||||
return item;
|
||||
})
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == "edit" ? "编辑商品分类表" : "新增商品分类表";
|
||||
});
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == "edit" ? "编辑商品分类表" : "新增商品分类表";
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: "",
|
||||
pid: 0,
|
||||
name: "",
|
||||
data: "",
|
||||
pic: "",
|
||||
sort: "",
|
||||
price_rate: []
|
||||
});
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: "",
|
||||
pid: 0,
|
||||
name: "",
|
||||
data: "",
|
||||
pic: "",
|
||||
sort: "",
|
||||
price_rate: []
|
||||
});
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
// pid: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: "请输入所属ID",
|
||||
// trigger: ["blur"],
|
||||
// },
|
||||
// ],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入分类名称",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
});
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入分类名称",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
// 获取详情
|
||||
const setFormData = async (data : Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await apiStoreCategoryDetail({
|
||||
id: row.id,
|
||||
});
|
||||
setFormData(data);
|
||||
};
|
||||
const getDetail = async (row : Record<string, any>) => {
|
||||
const data = await apiStoreCategoryDetail({
|
||||
id: row.id,
|
||||
});
|
||||
setFormData(data);
|
||||
};
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate();
|
||||
let data = { ...formData };
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate();
|
||||
let data = { ...formData };
|
||||
|
||||
mode.value == "edit"
|
||||
? await apiStoreCategoryEdit(data)
|
||||
: await apiStoreCategoryAdd(data);
|
||||
popupRef.value?.close();
|
||||
emit("success");
|
||||
};
|
||||
mode.value == "edit"
|
||||
? await apiStoreCategoryEdit(data)
|
||||
: await apiStoreCategoryAdd(data);
|
||||
popupRef.value?.close();
|
||||
emit("success");
|
||||
};
|
||||
|
||||
//打开弹窗
|
||||
const open = (type = "add") => {
|
||||
mode.value = type;
|
||||
popupRef.value?.open();
|
||||
};
|
||||
//打开弹窗
|
||||
const open = (type = "add") => {
|
||||
mode.value = type;
|
||||
popupRef.value?.open();
|
||||
};
|
||||
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit("close");
|
||||
};
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail,
|
||||
});
|
||||
const getUserShip = () => {
|
||||
apiUserShipLists({page_size: 999}).then(res => {
|
||||
userShipList.value = res.lists
|
||||
})
|
||||
}
|
||||
|
||||
const addRow = () => {
|
||||
formData.price_rate.push({
|
||||
id: '',
|
||||
title: '',
|
||||
rate: ''
|
||||
})
|
||||
}
|
||||
|
||||
const deleteRow = (index) => {
|
||||
formData.price_rate.splice(index, 1)
|
||||
}
|
||||
|
||||
getUserShip()
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail,
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue