修改商品分类价格配置

src/views/store/store_category/edit.vue

@@ -18,14 +18,29 @@
 					<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">
+					<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>
-						</div>
-					</div>
+							</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">
@@ -37,28 +52,31 @@
 </template>
 
 <script lang="ts" setup name="storeCategoryEdit">
-import type { FormInstance } from "element-plus";
-import Popup from "@/components/popup/index.vue";
-import {
+	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({
+	} 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 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 = {
+	const props = {
 		value: "id",
 		label: "name",
 		checkStrictly: true,
@@ -71,22 +89,22 @@ const props = {
 				page_size: 10000,
 			}).then((res) => {
 				resolve(
-                res.lists.map((item: any) => {
+					res.lists.map((item : any) => {
 						item.leaf = item.pid > 0;
 						return item;
 					})
 				);
 			});
 		},
-};
+	};
 
-// 弹窗标题
-const popupTitle = computed(() => {
+	// 弹窗标题
+	const popupTitle = computed(() => {
 		return mode.value == "edit" ? "编辑商品分类表" : "新增商品分类表";
-});
+	});
 
-// 表单数据
-const formData = reactive({
+	// 表单数据
+	const formData = reactive({
 		id: "",
 		pid: 0,
 		name: "",
@@ -94,17 +112,10 @@ const formData = reactive({
 		pic: "",
 		sort: "",
 		price_rate: []
-});
+	});
 
-// 表单验证
-const formRules = reactive<any>({
-    //   pid: [
-    //     {
-    //       required: true,
-    //       message: "请输入所属ID",
-    //       trigger: ["blur"],
-    //     },
-    //   ],
+	// 表单验证
+	const formRules = reactive<any>({
 		name: [
 			{
 				required: true,
@@ -112,28 +123,28 @@ const formRules = reactive<any>({
 				trigger: ["blur"],
 			},
 		],
-});
+	});
 
 
-// 获取详情
-const setFormData = async (data: Record<any, any>) => {
+	// 获取详情
+	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 getDetail = async (row : Record<string, any>) => {
 		const data = await apiStoreCategoryDetail({
 			id: row.id,
 		});
 		setFormData(data);
-};
+	};
 
-// 提交按钮
-const handleSubmit = async () => {
+	// 提交按钮
+	const handleSubmit = async () => {
 		await formRef.value?.validate();
 		let data = { ...formData };
 
@@ -142,22 +153,42 @@ const handleSubmit = async () => {
 			: await apiStoreCategoryAdd(data);
 		popupRef.value?.close();
 		emit("success");
-};
+	};
 
-//打开弹窗
-const open = (type = "add") => {
+	//打开弹窗
+	const open = (type = "add") => {
 		mode.value = type;
 		popupRef.value?.open();
-};
+	};
 
-// 关闭回调
-const handleClose = () => {
+	// 关闭回调
+	const handleClose = () => {
 		emit("close");
-};
+	};
 	
-defineExpose({
+	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>