From 47a95bd3386cc1d83376bcf5ec77295ffe4f0790 Mon Sep 17 00:00:00 2001
From: lewis <604446095@qq.com>
Date: Fri, 27 Dec 2024 16:47:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E4=BB=B7=E6=A0=BC=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/store/store_category/edit.vue | 321 +++++++++++++-----------
 1 file changed, 176 insertions(+), 145 deletions(-)

diff --git a/src/views/store/store_category/edit.vue b/src/views/store/store_category/edit.vue
index ad1e2d87f..641c925f0 100644
--- a/src/views/store/store_category/edit.vue
+++ b/src/views/store/store_category/edit.vue
@@ -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="sort">
-                    <el-input v-model="formData.sort" clearable placeholder="请输入排序" />
-                </el-form-item>
-            </el-form>
-        </popup>
-    </div>
+				<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>
 </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");
+	};
+	
+	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>
+	defineExpose({
+		open,
+		setFormData,
+		getDetail,
+	});
+</script>
\ No newline at end of file