Merge branch 'master' of http://gitea.zianxin.com/zianxin/biz-pc-cloud

src/api/supermarket/smErpCgDd.ts

@@ -0,0 +1,41 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+  return request({
+    url: '/supermarket/smErpCgDd/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj?: Object) {
+  return request({
+    url: '/supermarket/smErpCgDd',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id?: string) {
+  return request({
+    url: '/supermarket/smErpCgDd/' + id,
+    method: 'get'
+  })
+}
+
+export function delObjs(ids?: Object) {
+  return request({
+    url: '/supermarket/smErpCgDd',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function putObj(obj?: Object) {
+  return request({
+    url: '/supermarket/smErpCgDd',
+    method: 'put',
+    data: obj
+  })
+}
+

src/components/DepTree/index.vue

@@ -1,210 +0,0 @@
-<template>
-	<div class="container">
-		<!-- 头部区域 -->
-		<div class="container-header">
-			<div class="container-header-input">
-				<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getTreeData" />
-			</div>
-			<div class="container-header-dropdown" v-if="showExpand">
-				<el-dropdown :hide-on-click="false">
-					<el-icon style="transform: rotate(90deg)">
-						<MoreFilled />
-					</el-icon>
-					<template #dropdown>
-						<el-dropdown-menu>
-							<el-dropdown-item>
-								<el-button
-									class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
-									link
-									:icon="isExpand ? 'expand' : 'fold'"
-									@click="toggleRowExpansionAll(isExpand ? false : true)"
-								>
-									{{ isExpand ? "折叠" : "展开" }}
-								</el-button>
-							</el-dropdown-item>
-						</el-dropdown-menu>
-					</template>
-				</el-dropdown>
-			</div>
-		</div>
-
-		<!-- 树形结构 -->
-		<div class="container-tree">
-			<el-tree
-				ref="depTreeRef"
-				:props="props.props"
-				:data="state.treeList"
-				:expand-on-click-node="false"
-				:loading="state.loading"
-				node-key="id"
-				highlight-current
-				default-expand-all
-				@node-click="handleNodeClick"
-				show-checkbox
-				@check-change="handleCheckChange"
-			>
-				<template #default="{ node, data }" v-if="$slots.default">
-					<slot :node="node" :data="data" />
-				</template>
-			</el-tree>
-		</div>
-
-		<!-- 底部区域 -->
-		<div class="container-switch">
-			<el-switch
-				v-model="state.isDeep"
-				@change="handleTreeDeepSearch"
-				:inactive-text="switchInactiveText"
-				:active-text="switchActiveText"
-				:disabled="checkedTreeNodes.length > 0"
-			/>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="dep-tree">
-import { useMessage } from "/@/hooks/message"
-
-const props = withDefaults(
-	defineProps<{
-		placeholder?: string // 输入框占位符
-		loading?: boolean // 加载中的状态
-		showExpand?: boolean // 折叠控制
-		query?: (searchName?: string) => Promise<any> // 查询函数
-		props?: object
-		switchInactiveText?: string | undefined
-		switchActiveText?: string | undefined
-	}>(),
-	{
-		placeholder: "",
-		loading: false,
-		showExpand: true,
-		query: () => new Promise((resolve) => resolve([])),
-		props: () => {
-			return {
-				label: "name",
-				children: "children",
-				value: "id",
-			}
-		},
-		switchInactiveText: "当前级",
-		switchActiveText: "当前级及子级",
-	},
-)
-const emit = defineEmits(["nodeClick", "treeDeepSearch"])
-
-const state = reactive({
-	treeList: [],
-	loading: props.loading,
-	isDeep: false,
-})
-
-const depTreeRef = ref() // 树组件的引用
-const searchName = ref() // 查询关键字
-const isExpand = ref(true) // 是否展开所有节点
-// 被勾选的树节点
-const checkedTreeNodes = ref([])
-
-// 获取部门树形结构数据
-const getTreeData = () => {
-	if (props.query instanceof Function) {
-		state.loading = true
-
-		// 调用传入的查询函数，并将查询关键字作为参数传入
-		const result = props.query(unref(searchName))
-
-		// 如果查询结果为 Promise 类型，则进行后续处理
-		if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
-			result
-				.then((r: any) => {
-					state.treeList = r.data
-				})
-				.catch((err) => {
-					useMessage().error(err.msg)
-				})
-				.finally(() => (state.loading = false))
-		}
-	}
-}
-
-// 点击树形结构节点
-const handleNodeClick = (item: any) => emit("nodeClick", item)
-
-// 节点深度搜索
-const handleTreeDeepSearch = () => emit("treeDeepSearch", state.isDeep)
-
-// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
-const toggleRowExpansionAll = (status: boolean) => {
-	isExpand.value = status
-	const nodes = depTreeRef.value.store._getAllNodes()
-	for (let i = 0; i < nodes.length; i++) {
-		nodes[i].expanded = status
-	}
-}
-
-watch(checkedTreeNodes, (val) => {
-	if (checkedTreeNodes.value.length > 0) {
-		state.isDeep = false
-	}
-})
-
-// 勾选树节点时
-const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
-	checkedTreeNodes.value = depTreeRef.value.getCheckedNodes()
-	// console.log(data, checked, indeterminate)
-}
-
-onMounted(() => {
-	getTreeData()
-})
-
-defineExpose({
-	getTreeData,
-})
-</script>
-
-<style lang="scss" scoped>
-.container {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	&-header {
-		display: flex;
-		align-items: center;
-		padding-bottom: 10px;
-		box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1);
-		z-index: 10;
-
-		&-input {
-			width: 90%;
-		}
-		&-dropdown {
-			flex: 1;
-			margin-left: 5%;
-			line-height: 100%;
-		}
-	}
-
-	&-tree {
-		flex: 1;
-		overflow: hidden;
-
-		&:hover {
-			overflow: auto;
-		}
-	}
-
-	&-switch {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding-top: 10px;
-		box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1);
-		z-index: 999;
-		position: sticky;
-		bottom: 0;
-		overflow: hidden;
-	}
-}
-</style>

src/components/DraggableDepTree/index.vue

@@ -0,0 +1,229 @@
+<template>
+	<Splitpanes @resize="state.treeWidth = $event[0].size">
+		<pane :size="state.treeWidth">
+			<!-- 树 -->
+			<div class="h-full flex flex-col m-1">
+				<!-- 头部区域 -->
+				<div class="flex items-center pb-2 shadow-gray-400 z-10" style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
+					<div class="w-4/5">
+						<el-input v-model="state.searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getTreeData" />
+					</div>
+					<div class="flex-1 ml-[5%] leading-[100%]" v-if="showExpand">
+						<el-dropdown :hide-on-click="false">
+							<el-icon style="transform: rotate(90deg)">
+								<MoreFilled />
+							</el-icon>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item>
+										<el-button
+											class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+											link
+											:icon="state.isExpand ? 'expand' : 'fold'"
+											@click="toggleRowExpansionAll(state.isExpand ? false : true)"
+										>
+											{{ state.isExpand ? "折叠" : "展开" }}
+										</el-button>
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</div>
+				</div>
+
+				<!-- 树形结构 -->
+				<div class="flex-1 overflow-hidden hover:overflow-auto">
+					<el-tree
+						ref="treeRef"
+						:props="props.props"
+						:data="state.treeDataList"
+						:expand-on-click-node="false"
+						:loading="state.loading"
+						node-key="id"
+						highlight-current
+						default-expand-all
+						@node-click="handleNodeClick"
+						show-checkbox
+						@check-change="handleCheckChange"
+					/>
+				</div>
+
+				<!-- 底部区域 -->
+				<div
+					class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
+					style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)"
+				>
+					<el-switch
+						v-model="state.switch"
+						@change="handleSwitchChange"
+						:inactive-text="switchInactiveText"
+						:active-text="switchActiveText"
+						:disabled="state.checkedTreeNodes.length > 0"
+					/>
+				</div>
+			</div>
+		</pane>
+
+		<pane :size="100 - state.treeWidth" class="pl-4 relative">
+			<!-- 折叠按钮 -->
+			<div
+				class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
+				@click="handleClickTreeFold()"
+			>
+				<i class="text-gray-400 inline-block text-center leading-[62px] hover:opacity-50">
+					<el-icon>
+						<ArrowLeftBold v-if="state.treeWidth > 0" />
+						<ArrowRightBold v-else />
+					</el-icon>
+				</i>
+			</div>
+
+			<div class="w-full h-full overflow-auto">
+				<slot name="default" />
+			</div>
+		</pane>
+	</Splitpanes>
+</template>
+
+<script setup lang="ts" name="DraggableDepTree">
+import { computed } from "vue"
+import { useMessage } from "/@/hooks/message"
+
+const props = withDefaults(
+	defineProps<{
+		placeholder?: string // 输入框占位符
+		loading?: boolean // 加载中的状态
+		showExpand?: boolean // 折叠控制
+		query?: (searchName?: string) => Promise<any> // 查询函数
+		props?: object
+		switchInactiveText?: string | undefined
+		switchActiveText?: string | undefined
+		defaultTreeWidth?: number | string
+	}>(),
+	{
+		placeholder: "",
+		loading: false,
+		showExpand: true,
+		query: () => new Promise((resolve) => resolve([])),
+		props: () => {
+			return {
+				label: "name",
+				children: "children",
+				value: "id",
+			}
+		},
+		switchInactiveText: "当前级",
+		switchActiveText: "当前级及子级",
+		defaultTreeWidth: 20,
+	},
+)
+const emit = defineEmits(["nodeClick", "treeNodeCheckChange", "treeDeepSearch"])
+
+const treeRef = ref() // 树组件ref
+const state = reactive({
+	searchName: "", // 查询关键字
+	isExpand: true, // 是否展开树所有节点
+	treeWidth: Number(props.defaultTreeWidth), // 树组件宽度
+	treeWidthMemo: Number(props.defaultTreeWidth), // 树组件宽度记录
+	treeDataList: [],
+	checkedTreeNodes: [], // 被勾选的树节点
+	loading: props.loading,
+	switch: false, // switch开关
+})
+// 是否折叠树组件
+const treeVisible = computed(() => state.treeWidth > 0)
+
+// 获取部门树形结构数据
+const getTreeData = () => {
+	if (props.query instanceof Function) {
+		state.loading = true
+		const result = props.query(state.searchName)
+		// 如果查询结果为 Promise 类型，则进行后续处理
+		if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
+			result
+				.then((r: any) => {
+					state.treeDataList = r.data
+				})
+				.catch((err) => {
+					useMessage().error(err.msg)
+				})
+				.finally(() => (state.loading = false))
+		}
+	}
+}
+
+// 点击折叠树组件
+const handleClickTreeFold = () => {
+	if (treeVisible.value) {
+		state.treeWidthMemo = state.treeWidth
+		state.treeWidth = 0
+	} else {
+		state.treeWidth = state.treeWidthMemo
+	}
+}
+
+// 点击树形结构节点
+const handleNodeClick = (nodeData: any) => emit("nodeClick", nodeData)
+
+// 节点深度搜索
+const handleSwitchChange = () => emit("treeDeepSearch", state.switch)
+
+// 勾选树节点时
+const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
+	const checkedNodes = treeRef.value.getCheckedNodes()
+	state.checkedTreeNodes = checkedNodes
+	emit("treeNodeCheckChange", checkedNodes)
+}
+
+// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
+const toggleRowExpansionAll = (status: boolean) => {
+	state.isExpand = status
+	const nodes = treeRef.value.store._getAllNodes()
+	for (let i = 0; i < nodes.length; i++) {
+		nodes[i].expanded = status
+	}
+}
+
+// 勾选树节点时关闭switch
+watch(
+	() => state.checkedTreeNodes,
+	(val) => {
+		if (state.checkedTreeNodes.length > 0) {
+			state.switch = false
+		}
+	},
+)
+
+// 重置数据
+const resetData = () => {
+	state.searchName = ""
+	state.checkedTreeNodes = []
+	state.switch = false
+	getTreeData()
+}
+onMounted(() => {
+	getTreeData()
+})
+
+defineExpose({
+	getTreeData,
+	resetData,
+})
+</script>
+
+<style lang="scss">
+.splitpanes--vertical > .splitpanes__splitter {
+	background: var(--el-color-primary);
+	/* min-width: 2px; */
+	width: 2px;
+	transition: all 0.3s ease;
+}
+.splitpanes--vertical > .splitpanes__splitter:active {
+	background: var(--el-color-primary);
+	opacity: 0.6;
+}
+.splitpanes--vertical > .splitpanes__splitter:hover {
+	background: var(--el-color-primary);
+	opacity: 0.6;
+}
+</style>

src/components/index.ts

@@ -12,7 +12,7 @@ import Tip from "/@/components/Tip/index.vue"
 import TagList from "/@/components/TagList/index.vue"
 import SvgIcon from "/@/components/SvgIcon/index.vue"
 import PreviewImage from "/@/components/PreviewImage/index.vue"
-import DepTree from "/@/components/DepTree/index.vue"
+import DraggableDepTree from "/@/components/DraggableDepTree/index.vue"
 
 // 业务组件
 import SelectUser from "/@/components/Select/SelectUser.vue"
@@ -57,7 +57,7 @@ export default {
 		app.component("TagList", TagList)
 		app.component("SvgIcon", SvgIcon)
 		app.component("PreviewImage", PreviewImage)
-		app.component("DepTree", DepTree)
+		app.component("DraggableDepTree", DraggableDepTree)
 
 		app.component("SelectUser", SelectUser)
 		app.component("SelectWalletType", SelectWalletType)

src/views/admin/system/user/index.vue

@@ -1,46 +1,19 @@
 <template>
 	<div class="layout-padding">
-		<Splitpanes @resize="depTreeWidth = $event[0].size">
-			<pane :size="depTreeWidth">
-				<dep-tree
-					class="p-2"
-					ref="depTreeRef"
-					:placeholder="$t('common.queryDeptTip')"
-					:query="deptData.queryList"
-					:show-expand="true"
-					@node-click="handleNodeClick"
-					@treeDeepSearch="treeDeepSearch"
-					switch-inactive-text="当前部门"
-					switch-active-text="当前部门及子部门"
-				>
-					<!-- 没有数据权限提示 -->
-					<template #default="{ node, data }">
-						<el-tooltip v-if="data.isLock" class="item" effect="dark" :content="$t('sysuser.noDataScopeTip')" placement="right-start">
-							<span>
-								{{ node.label }}
-								<SvgIcon name="ele-Lock" />
-							</span>
-						</el-tooltip>
-						<span v-if="!data.isLock">{{ node.label }}</span>
-					</template>
-				</dep-tree>
-			</pane>
-
-			<pane :size="100 - depTreeWidth" class="pl8 relative">
-				<div
-					class="w-[12px] h-[56px] absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer"
-					@click="handleClickDepTreeDrawer(isOpen)"
-					style="background-color: #e3e9ed; border-top-right-radius: 10px; border-bottom-right-radius: 10px"
-				>
-					<i class="drawer-icon">
-						<el-icon>
-							<ArrowLeftBold v-if="depTreeWidth > 0.5" />
-							<ArrowRightBold v-else />
-						</el-icon>
-					</i>
-				</div>
-
-				<div class="layout-padding-auto layout-padding-view">
+		<div class="layout-padding-auto layout-padding-view">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:query="deptData.queryList"
+				:show-expand="true"
+				@node-click="handleNodeClick"
+				@treeNodeCheckChange="treeNodeCheckChange"
+				@treeDeepSearch="treeDeepSearch"
+				switch-inactive-text="当前部门"
+				switch-active-text="当前部门及子部门"
+				:defaultTreeWidth="20"
+			>
+				<template #default>
 					<el-row v-show="showSearch">
 						<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
 							<el-form-item label="用户" prop="userIds">
@@ -60,7 +33,6 @@
 							</el-form-item>
 						</el-form>
 					</el-row>
-
 					<el-row>
 						<div class="mb8" style="width: 100%">
 							<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" @click="userDialogRef.openDialog()">
@@ -147,7 +119,7 @@
 						<el-table-column
 							v-auths="['sys_user_edit', 'userFace_sysUserFace_view', 'sys_user_del']"
 							:label="$t('common.action')"
-							width="300"
+							width="200"
 							fixed="right"
 						>
 							<template #default="scope">
@@ -198,11 +170,10 @@
 							</template>
 						</el-table-column>
 					</el-table>
-
 					<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
-				</div>
-			</pane>
-		</Splitpanes>
+				</template>
+			</DraggableDepTree>
+		</div>
 
 		<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
 		<face-manage ref="faceManageRef" @refresh="getDataList(false)" />
@@ -225,22 +196,19 @@ import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useI18n } from "vue-i18n"
 import { auth } from "/@/utils/authFunction"
 
-// 动态引入组件
 const UserForm = defineAsyncComponent(() => import("./form.vue"))
 const FaceManage = defineAsyncComponent(() => import("./face-manage.vue"))
 const PopoverInput = defineAsyncComponent(() => import("/@/components/PopoverInput/index.vue"))
 
 const { t } = useI18n()
 
-// 定义变量内容
 const userDialogRef = ref()
 const faceManageRef = ref()
 const excelUploadRef = ref()
 const queryRef = ref()
 const showSearch = ref(true)
 const inputPassword = ref()
-const depTreeRef = ref() // 树组件ref引用
-const depTreeWidth = ref<number>(20) // 部门树组件宽度
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 // 多选rows
 const selectObjs = ref([]) as any
@@ -268,22 +236,29 @@ const deptData = reactive({
 	},
 })
 
-const treeDeepSearch = (isDeep: boolean) => {
-	state.queryForm.isDeepDept = isDeep
-	getDataList()
-}
-
 // 清空搜索条件
 const resetQuery = () => {
 	queryRef.value?.resetFields()
 	state.queryForm.deptId = ""
-	depTreeRef.value.getTreeData()
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
 // 点击树
-const handleNodeClick = (e: any) => {
-	state.queryForm.deptId = e.id
+const handleNodeClick = (clickedNode: any) => {
+	state.queryForm.deptId = clickedNode.id
+	getDataList()
+}
+
+// 树节点勾选改变
+const treeNodeCheckChange = (checkedNodes: any) => {
+	state.queryForm.deptId = checkedNodes.map((item: any) => item.id)
+	getDataList()
+}
+
+// 是否深度搜索
+const treeDeepSearch = (isDeep: boolean) => {
+	state.queryForm.isDeepDept = isDeep
 	getDataList()
 }
 
@@ -351,50 +326,4 @@ const changePassword = async (row: any) => {
 	useMessage().success(t("common.optSuccessText"))
 	getDataList()
 }
-
-const isOpen = ref(true)
-const temp = ref()
-const handleClickDepTreeDrawer = (isDrawerOpen: boolean) => {
-	if (isDrawerOpen) {
-		temp.value = depTreeWidth.value
-		depTreeWidth.value = 0.5
-	} else {
-		depTreeWidth.value = temp.value
-	}
-	isOpen.value = !isOpen.value
-}
 </script>
-
-<style>
-.splitpanes--vertical > .splitpanes__splitter {
-	background: var(--el-color-primary);
-	/* min-width: 2px; */
-	width: 2px;
-	transition: all 0.3s ease;
-}
-.splitpanes--vertical > .splitpanes__splitter:active {
-	background: var(--el-color-primary);
-	opacity: 0.6;
-}
-.splitpanes--vertical > .splitpanes__splitter:hover {
-	background: var(--el-color-primary);
-	opacity: 0.6;
-}
-.drawer-icon {
-	color: #b7bdc8;
-	font-size: 1rem;
-	display: inline-block;
-	text-align: center;
-	line-height: 64px;
-}
-.drawer-icon:hover {
-	opacity: 0.5;
-}
-/* .drawer-icon::before {
-	content: "<";
-	background: none;
-	box-sizing: inherit;
-	color: #b7bdc8;
-	font-size: 1em;
-} */
-</style>

src/views/supermarket/smErpCgDd/form.vue

@@ -0,0 +1,200 @@
+<template>
+    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
+      :close-on-click-modal="false" draggable>
+      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
+       <el-row :gutter="24">
+    <el-col :span="12" class="mb20">
+      <el-form-item label="编号" prop="code">
+        <el-input v-model="form.code" placeholder="请输入编号"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="单据日期" prop="dDate">
+      <el-date-picker type="date" placeholder="请选择单据日期" v-model="form.dDate" :value-format="dateStr"></el-date-picker>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="仓库id" prop="warehouseId">
+        <el-input v-model="form.warehouseId" placeholder="请输入仓库id"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="经办人id" prop="handlerUserId">
+          <el-select v-model="form.handlerUserId" placeholder="请选择经办人id">
+            <el-option label="请选择">0</el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="审批状态" prop="checkStatus">
+        <el-input v-model="form.checkStatus" placeholder="请输入审批状态"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="审批人id" prop="checkUserId">
+          <el-select v-model="form.checkUserId" placeholder="请选择审批人id">
+            <el-option label="请选择">0</el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="审核日期" prop="checkTime">
+        <el-input v-model="form.checkTime" placeholder="请输入审核日期"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="商户编号" prop="merchantId">
+        <el-input v-model="form.merchantId" placeholder="请输入商户编号"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="部门id" prop="deptId">
+        <el-input v-model="form.deptId" placeholder="请输入部门id"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="出入库数量" prop="quantity">
+        <el-input v-model="form.quantity" placeholder="请输入出入库数量"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="累计进货数量" prop="totalNumber">
+        <el-input v-model="form.totalNumber" placeholder="请输入累计进货数量"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="累计总金额" prop="totalAmount">
+        <el-input v-model="form.totalAmount" placeholder="请输入累计总金额"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="货商" prop="supplierId">
+        <el-input v-model="form.supplierId" placeholder="请输入货商"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" placeholder="请输入备注"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="订单编号" prop="orderNumber">
+        <el-input v-model="form.orderNumber" placeholder="请输入订单编号"/>
+      </el-form-item>
+      </el-col>
+
+			</el-row>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="SmErpCgDdDialog">
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import { getObj, addObj, putObj } from '/@/api/supermarket/smErpCgDd'
+import { rule } from '/@/utils/validate';
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+const { check_status } = useDict('check_status')
+
+// 提交表单数据
+const form = reactive({
+		id:'',
+	  code: '',
+	  dDate: '',
+	  warehouseId: '',
+	  handlerUserId: '',
+	  checkStatus: '',
+	  checkUserId: '',
+	  checkTime: '',
+	  merchantId: '',
+	  deptId: '',
+	  quantity: '',
+	  totalNumber: '',
+	  totalAmount: '',
+	  supplierId: '',
+	  remark: '',
+	  orderNumber: '',
+});
+
+// 定义校验规则
+const dataRules = ref({
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+	nextTick(() => {
+		dataFormRef.value?.resetFields();
+	});
+
+  // 获取smErpCgDd信息
+  if (id) {
+    form.id = id
+    getsmErpCgDdData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+	const valid = await dataFormRef.value.validate().catch(() => {});
+	if (!valid) return false;
+
+	try {
+    loading.value = true;
+		form.id ? await putObj(form) : await addObj(form);
+		useMessage().success(form.id ? '修改成功' : '添加成功');
+		visible.value = false;
+		emit('refresh');
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	} finally {
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const getsmErpCgDdData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj(id).then((res: any) => {
+    Object.assign(form, res.data)
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>

src/views/supermarket/smErpCgDd/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+            v-auth="'supermarket_smErpCgDd_add'">
+            新 增
+          </el-button>
+          <el-button plain :disabled="multiple" icon="Delete" type="primary"
+            v-auth="'supermarket_smErpCgDd_del'" @click="handleDelete(selectObjs)">
+            删除
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" :export="'supermarket_smErpCgDd_export'"
+                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+            @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" border 
+        :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+        @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column type="index" label="#" width="40" />
+          <el-table-column prop="code" label="编号"  show-overflow-tooltip/>
+          <el-table-column prop="dDate" label="单据日期"  show-overflow-tooltip/>
+          <el-table-column prop="warehouseId" label="仓库id"  show-overflow-tooltip/>
+          <el-table-column prop="handlerUserId" label="经办人id"  show-overflow-tooltip/>
+          <el-table-column prop="checkStatus" label="审批状态" show-overflow-tooltip>
+      <template #default="scope">
+                <dict-tag :options="check_status" :value="scope.row.checkStatus"></dict-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="checkUserId" label="审批人id"  show-overflow-tooltip/>
+          <el-table-column prop="checkTime" label="审核日期"  show-overflow-tooltip/>
+          <el-table-column prop="merchantId" label="商户编号"  show-overflow-tooltip/>
+          <el-table-column prop="deptId" label="部门id"  show-overflow-tooltip/>
+          <el-table-column prop="quantity" label="出入库数量"  show-overflow-tooltip/>
+          <el-table-column prop="totalNumber" label="累计进货数量"  show-overflow-tooltip/>
+          <el-table-column prop="totalAmount" label="累计总金额"  show-overflow-tooltip/>
+          <el-table-column prop="supplierId" label="货商"  show-overflow-tooltip/>
+          <el-table-column prop="remark" label="备注"  show-overflow-tooltip/>
+          <el-table-column prop="orderNumber" label="订单编号"  show-overflow-tooltip/>
+        <el-table-column label="操作" width="150">
+          <template #default="scope">
+            <el-button icon="edit-pen" text type="primary" v-auth="'supermarket_smErpCgDd_edit'"
+              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
+            <el-button icon="delete" text type="primary" v-auth="'supermarket_smErpCgDd_del'" @click="handleDelete([scope.row.id])">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+
+  </div>
+</template>
+
+<script setup lang="ts" name="systemSmErpCgDd">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObjs } from "/@/api/supermarket/smErpCgDd";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+// 定义查询字典
+
+const { check_status } = useDict('check_status')
+// 定义变量内容
+const formDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+	tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/supermarket/smErpCgDd/export', Object.assign(state.queryForm, { ids: selectObjs }), 'smErpCgDd.xlsx')
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>

src/views/supermarketerp/smErpCgPlan/cgPlanOption.vue

@@ -101,7 +101,12 @@
 					</template>
 				</vxe-column> -->
 
-				<vxe-column field="productName" title="库存商品" />
+				<vxe-column field="productName" title="库存商品">
+					<template #default="{ row }">
+						<span v-if="row.productName">{{ row.productName }}</span>
+						<span v-else>{{ row.erpSpuId && state.erpSpuSimpleAll.find((item: any) => item.id === row.erpSpuId).productName }}</span>
+					</template>
+				</vxe-column>
 
 				<vxe-column field="unitId" title="包装单位" :edit-render="{}">
 					<template #edit="{ row }">
@@ -166,7 +171,7 @@
 				<el-tooltip effect="dark" content="返回列表页面" placement="top">
 					<el-button type="primary" plain @click="router.back()">取消</el-button>
 				</el-tooltip>
-				<el-tooltip effect="dark" content="保存并清空数据" placement="top">
+				<el-tooltip v-if="!baseDataForm.id" effect="dark" content="保存并清空数据" placement="top">
 					<el-button type="primary" plain @click="onContinueAdd">继续添加</el-button>
 				</el-tooltip>
 				<el-tooltip effect="dark" content="保存并返回列表页面" placement="top">
@@ -251,14 +256,14 @@ import { ref, reactive, computed, onMounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useDict } from "/@/hooks/dict"
 import { useMessage } from "/@/hooks/message"
-import { getObj, addObj, putObj, getPlanCode, getCgPlanSpuPage } from "/@/api/supermarketerp/smErpCgPlan"
+import { getObj, addObj, putObj, getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/smErpCgPlan"
 import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { storePrice } from "/@/utils/formatMoney"
 
 // 基本表单数据类型
 interface FormVO {
-	id?: string
+	id: string | undefined
 	planCode: string
 	orderNumber: string
 	planDate: string
@@ -300,15 +305,19 @@ const baseDataForm = reactive<FormVO>({
 })
 const state = reactive<{
 	editableTableData: RowVO[]
+	erpSpuItemsMemo: RowVO[]
 	selectedRowsErpSpuIds: string[]
 	insertedRowNumber: number
+	erpSpuSimpleAll: any
 	spuSelectDialogVisible: boolean
 	spuDataList: any[]
 	selectedSpuObjs: any[]
 }>({
 	editableTableData: [], // 可编辑表格数据
+	erpSpuItemsMemo: [], // 请求到的可编辑表格商品数据的缓存
 	selectedRowsErpSpuIds: [], // 可编辑表格已选行的ErpSpuId
 	insertedRowNumber: 0, // 可编辑表格插入行的行号
+	erpSpuSimpleAll: [], // 简要商品列表
 
 	spuSelectDialogVisible: false, // 商品选择对话框开关
 	spuDataList: [], // 商品列表
@@ -333,31 +342,26 @@ const getInitData = async () => {
 	baseDataForm.id = undefined
 	const id = route.query.id as string
 	if (id) {
-		// 获取数据
 		loading.value = true
-		getObj(id)
-			.then((res: any) => {
-				Object.assign(baseDataForm, {
-					id: res.data.id,
-					planCode: res.data.planCode,
-					orderNumber: res.data.orderNumber,
-					planDate: res.data.planDate,
-					supplierId: res.data.supplierId,
-					handlerUserId: res.data.handlerUserId,
-					remark: res.data.remark,
-				})
-				state.editableTableData = res.data.items
-			})
-			.finally(() => {
-				loading.value = false
-			})
+		// 获取采购计划数据 & 获取简要商品列表
+		const [cgPlanData, erpSpuSimpleAll] = await Promise.allSettled([getObj(id), getErpSpuSimpleAll()])
+			.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
+			.finally(() => (loading.value = false))
 
-		// 获取货商选项 & 获取简要商品列表
-		// const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode()]).then((results) =>
-		// 	results.map((result) => (result.status === "fulfilled" ? result.value : null)),
-		// )
-		// supplierTypeOptions && supplierTypeOptions.code === 0 && (supplierTypeDict.value = supplierTypeOptions.data)
-		// planCode && planCode.code === 0 && (baseDataForm.planCode = planCode.data)
+		if (cgPlanData && cgPlanData.code === 0) {
+			Object.assign(baseDataForm, {
+				id: cgPlanData.data.id,
+				planCode: cgPlanData.data.planCode,
+				orderNumber: cgPlanData.data.orderNumber,
+				planDate: cgPlanData.data.planDate,
+				supplierId: cgPlanData.data.supplierId,
+				handlerUserId: cgPlanData.data.handlerUserId,
+				remark: cgPlanData.data.remark,
+			})
+			state.editableTableData = cgPlanData.data.items
+			state.erpSpuItemsMemo = cgPlanData.data.items
+		}
+		erpSpuSimpleAll && erpSpuSimpleAll.code === 0 && (state.erpSpuSimpleAll = erpSpuSimpleAll.data)
 	}
 
 	// 获取货商选项 & 获取采购计划编号
@@ -401,6 +405,7 @@ const addEvent = () => {
 // 底部表格行新增
 const pushEvent = () => {
 	const newRow: RowVO = {
+		id: "",
 		erpSpuId: "",
 		quantity: null,
 		unitPrice: null,
@@ -420,6 +425,7 @@ const pushEvent = () => {
 // 在指定行插入
 const insertEvent = () => {
 	const newRow: RowVO = {
+		id: "",
 		erpSpuId: "",
 		quantity: null,
 		unitPrice: null,
@@ -442,7 +448,7 @@ const removeSelectRowEvent = () => {
 	if ($table) {
 		const selectRecords = $table.getCheckboxRecords()
 		if (selectRecords.length > 0) {
-			state.editableTableData = state.editableTableData.filter((item) => !selectRecords.some((row) => row.id === item.id))
+			state.editableTableData = state.editableTableData.filter((item) => !selectRecords.some((row) => row.erpSpuId === item.erpSpuId))
 		}
 	}
 }
@@ -456,10 +462,10 @@ const handleClickSpuSelect = async () => {
 	try {
 		const { code, data } = await getCgPlanSpuPage().finally(() => (spuListLoading.value = false))
 		if (code === 0) {
-			state.spuDataList = data.records
+			state.spuDataList = data.records.map((item: RowVO) => ({ ...item, erpSpuId: item.id }))
 
 			// 勾选已经选择的商品
-			const target = state.spuDataList.filter((row: any) => state.selectedSpuObjs.some((item: any) => row.id === item.id))
+			const target = state.spuDataList.filter((row: any) => state.selectedSpuObjs.some((item: any) => row.erpSpuId === item.erpSpuId))
 			target.forEach((row: any) => nextTick(() => spuMultipleTableRef.value!.toggleRowSelection(row)))
 		}
 	} catch (error) {
@@ -470,12 +476,12 @@ const handleClickSpuSelect = async () => {
 
 // 点击商品列表表格行
 const rowClick = (row: any) => {
-	state.selectedSpuObjs.findIndex((item: any) => item.id === row.id) === -1
+	state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId) === -1
 		? // state.selectedSpuObjs.indexOf(row) === -1
 		  state.selectedSpuObjs.push(row)
 		: state.selectedSpuObjs.splice(
 				// state.selectedSpuObjs.indexOf(row)
-				state.selectedSpuObjs.findIndex((item: any) => item.id === row.id),
+				state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId),
 				1,
 		  )
 	console.log("click-select", state.selectedSpuObjs)
@@ -484,12 +490,12 @@ const rowClick = (row: any) => {
 
 // 选中商品列表表格行
 const handleSelect = (selectedRows: any[], row: any) => {
-	state.selectedSpuObjs.findIndex((item: any) => item.id === row.id) === -1
+	state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId) === -1
 		? // state.selectedSpuObjs.indexOf(row) === -1
 		  state.selectedSpuObjs.push(row)
 		: state.selectedSpuObjs.splice(
 				// state.selectedSpuObjs.indexOf(row)
-				state.selectedSpuObjs.findIndex((item: any) => item.id === row.id),
+				state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId),
 				1,
 		  )
 	console.log("check-select", state.selectedSpuObjs)
@@ -499,13 +505,13 @@ const handleSelect = (selectedRows: any[], row: any) => {
 const handleSelectAll = (selectedRows: any[]) => {
 	if (selectedRows.length > 0) {
 		selectedRows.forEach((row: any) => {
-			if (state.selectedSpuObjs.findIndex((item: any) => item.id === row.id) === -1) {
+			if (state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId) === -1) {
 				state.selectedSpuObjs.push(row)
 			}
 		})
 	} else {
 		state.spuDataList.forEach((row: any) => {
-			const index = state.selectedSpuObjs.findIndex((item: any) => item.id === row.id)
+			const index = state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId)
 			if (index !== -1) {
 				state.selectedSpuObjs.splice(index, 1)
 			}
@@ -525,19 +531,21 @@ const handleSelectDialogConfirm = () => {
 
 	// 筛选新勾选的项
 	const addedItems = state.selectedSpuObjs
-		.map((item: any) => ({ ...item, erpSpuId: item.id }))
-		.filter((item: any) => !state.editableTableData.some((editableTableItem: RowVO) => editableTableItem.id === item.id))
+		.filter((item: any) => !state.editableTableData.some((editableTableItem: RowVO) => editableTableItem.erpSpuId === item.erpSpuId))
+		.map((addItem) => {
+			if (state.erpSpuItemsMemo.some((item: any) => item.erpSpuId === addItem.erpSpuId)) return addItem
+			return { ...addItem, isNew: true }
+		}) // 为新增的数据项添加isNew标志，若该项原本已经存在，则不添加isNew标志
 	// 仅添加新勾选的项
-	// state.editableTableData.push(...addedItems)
 	state.editableTableData = [...state.editableTableData, ...addedItems]
 
 	// 筛选取消勾选的项
 	const removedItems = state.editableTableData.filter(
-		(item: any) => !state.selectedSpuObjs.some((selectedItem: any) => selectedItem.id === item.id),
+		(item: any) => !state.selectedSpuObjs.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
 	)
 	// 仅移除取消勾选的项
 	state.editableTableData = state.editableTableData.filter(
-		(item: any) => !removedItems.some((removeItem: any) => removeItem.id === item.id),
+		(item: any) => !removedItems.some((removeItem: any) => removeItem.erpSpuId === item.erpSpuId),
 	)
 	// state.editableTableData.push(item)
 	// nextTick(() => {
@@ -555,7 +563,7 @@ const cgPlanSpuItems = computed(() => {
 	return state.editableTableData.map((item: any) => {
 		const unit = item.erpUnitVos.find((unitItem: any) => unitItem.id === item.unitId)
 		return {
-			id: "",
+			id: item.isNew ? undefined : item.id,
 			erpSpuId: item.erpSpuId,
 			quantity: item.quantity,
 			unitPrice: unit.purchasePrice ? storePrice(unit?.purchasePrice) : 0,
@@ -622,17 +630,18 @@ const submitData = async () => {
 	try {
 		loading.value = true
 
-		console.log("提交的数据：", {
+		const _pa = {
 			...baseDataForm,
 			items: cgPlanSpuItems.value,
-		})
+		}
 
-		const res = await addObj({
-			...baseDataForm,
-			items: cgPlanSpuItems.value,
-		}).finally(() => (loading.value = false))
+		console.log("提交的数据：", _pa)
+
+		const res = baseDataForm.id
+			? await putObj(_pa).finally(() => (loading.value = false))
+			: await addObj(_pa).finally(() => (loading.value = false))
 		if (res.code === 0) {
-			useMessage().success("添加成功")
+			useMessage().success(baseDataForm.id ? "修改成功" : "添加成功")
 			return true
 		} else {
 			useMessage().error(res.msg)
@@ -661,15 +670,4 @@ const clearData = () => {
 onMounted(() => {
 	getInitData()
 })
-// const onSubmit = async () => {
-// 	try {
-// 		loading.value = true
-// 		form.id ? await putObj(form) : await addObj(form)
-// 		useMessage().success(form.id ? "修改成功" : "添加成功")
-// 	} catch (err: any) {
-// 		useMessage().error(err.msg)
-// 	} finally {
-// 		loading.value = false
-// 	}
-// }
 </script>