修改商品分类价格配置

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">
@@ -44,6 +59,7 @@ import {
 		apiStoreCategoryEdit,
 		apiStoreCategoryDetail, apiStoreCategoryLists,
 	} from "@/api/store_category";
+	import { apiUserShipLists } from "@/api/user_ship"
 	import { timeFormat } from "@/utils/util";
 	import type { PropType } from "vue";
 	defineProps({
@@ -56,6 +72,8 @@ 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 = {
@@ -98,13 +116,6 @@ const formData = reactive({
 
 	// 表单验证
 	const formRules = reactive<any>({
-    //   pid: [
-    //     {
-    //       required: true,
-    //       message: "请输入所属ID",
-    //       trigger: ["blur"],
-    //     },
-    //   ],
 		name: [
 			{
 				required: true,
@@ -155,6 +166,26 @@ const handleClose = () => {
 		emit("close");
 	};
 	
+	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,