出入库记录

src/api/supermarketerp/common.ts

@@ -0,0 +1,27 @@
+import request from "/@/utils/request"
+
+// type:1 获取采购计划编号
+// type:2 获取订单编号
+export function getPlanCode(params: { type: 1 | 2 }) {
+	return request({
+		url: "/supermarket/sm/common/getSequence",
+		method: "get",
+		params,
+	})
+}
+
+// 获取采购计划和订单所选择的商品的列表
+export function getCgPlanSpuPage() {
+	return request({
+		url: "/supermarket/smErpCgPlan/erpSpuPage",
+		method: "get",
+	})
+}
+
+// 获取简要商品列表
+export function getErpSpuSimpleAll() {
+	return request({
+		url: "/supermarket/supermarketSpu/SimpleAll",
+		method: "get",
+	})
+}

src/api/supermarketerp/smErpCgPlan.ts

@@ -38,28 +38,3 @@ export function putObj(obj?: Object) {
 		data: obj,
 	})
 }
-
-// 获取采购计划编号
-export function getPlanCode() {
-	return request({
-		url: "/supermarket/sm/common/getSequence",
-		method: "get",
-		params: { type: 1 },
-	})
-}
-
-// 获取采购计划选择商品的列表
-export function getCgPlanSpuPage() {
-	return request({
-		url: "/supermarket/smErpCgPlan/erpSpuPage",
-		method: "get",
-	})
-}
-
-// 获取简要商品列表
-export function getErpSpuSimpleAll() {
-	return request({
-		url: "/supermarket/supermarketSpu/SimpleAll",
-		method: "get",
-	})
-}

src/views/supermarketerp/smErpCgDd/smErpCgDdOption.vue

@@ -251,10 +251,11 @@ import { ref, reactive, computed, onMounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useMessage } from "/@/hooks/message"
 import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpCgDd"
-import { getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/smErpCgPlan"
+import { getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
 import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { storePrice } from "/@/utils/formatMoney"
+import { formatDate } from "/@/utils/formatTime"
 
 // 基本表单数据类型
 interface FormVO {
@@ -301,7 +302,7 @@ const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
 const baseDataForm = reactive<FormVO>({
 	id: "",
 	code: "",
-	dDate: "",
+	dDate: formatDate(new Date(), "YYYY-mm-dd"),
 	warehouseId: "",
 	handlerUserId: "",
 	checkStatus: "",
@@ -339,8 +340,8 @@ const state = reactive<{
 
 // 基本信息表单校验规则
 const dataRules = ref({
-	planCode: [{ required: true, message: "采购计划编号不能为空", trigger: "blur" }],
+	code: [{ required: true, message: "采购订单编号不能为空", trigger: "blur" }],
-	planDate: [{ required: true, message: "采购计划单据日期不能为空", trigger: "blur" }],
+	dDate: [{ required: true, message: "采购订单单据日期不能为空", trigger: "blur" }],
 	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
 })
 
@@ -378,11 +379,11 @@ const getInitData = async () => {
 	}
 
 	// 获取货商选项 & 获取采购计划编号
-	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode()]).then((results) =>
+	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode({ type: 2 })]).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)
+	planCode && planCode.code === 0 && (baseDataForm.code = planCode.data)
 }
 
 // 可编辑表格行勾选
@@ -670,7 +671,7 @@ const submitData = async () => {
 // 清空填写的数据 返回 true
 const clearData = () => {
 	for (const key in baseDataForm) {
-		if (key === "planCode" || key === "id") continue
+		if (key === "code" || key === "id" || key === "dDate") continue
 		baseDataForm[key] = ""
 	}
 	state.insertedRowNumber = 0

src/views/supermarketerp/smErpCgPlan/cgPlanOption.vue

@@ -233,7 +233,8 @@
 import { ref, reactive, computed, onMounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useMessage } from "/@/hooks/message"
-import { getObj, addObj, putObj, getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/smErpCgPlan"
+import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpCgPlan"
+import { getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
 import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { storePrice } from "/@/utils/formatMoney"
@@ -343,7 +344,7 @@ const getInitData = async () => {
 	}
 
 	// 获取货商选项 & 获取采购计划编号
-	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode()]).then((results) =>
+	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode({ type: 1 })]).then((results) =>
 		results.map((result) => (result.status === "fulfilled" ? result.value : null)),
 	)
 	supplierTypeOptions && supplierTypeOptions.code === 0 && (supplierTypeDict.value = supplierTypeOptions.data)
@@ -635,7 +636,7 @@ const submitData = async () => {
 // 清空填写的数据 返回 true
 const clearData = () => {
 	for (const key in baseDataForm) {
-		if (key === "planCode" || key === "id") continue
+		if (key === "planCode" || key === "id" || key === "planDate") continue
 		baseDataForm[key] = ""
 	}
 	state.insertedRowNumber = 0

src/views/supermarketerp/smErpInventoryRecords/form.vue

@@ -1,203 +0,0 @@
-<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="inventoryCode">
-        <el-input v-model="form.inventoryCode" placeholder="请输入单据编号(规则生成，出入库编号)"/>
-      </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="单据日期" prop="inventoryDate">
-        <el-input v-model="form.inventoryDate" placeholder="请输入单据日期"/>
-      </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="单据类型(字典inventory_type)采购入库、采购退货、盘点入库等" prop="inventoryType">
-          <el-select v-model="form.inventoryType" placeholder="请选择单据类型(字典inventory_type)采购入库、采购退货、盘点入库等">
-            <el-option :value="item.value" :label="item.label" v-for="(item, index) in inventory_type" :key="index"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）" prop="sourceId">
-        <el-input v-model="form.sourceId" placeholder="请输入来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）"/>
-      </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-input v-model="form.checkUserId" placeholder="请输入审批人id"/>
-      </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="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="订单类型(1入库 2出库)" prop="orderType">
-        <el-input v-model="form.orderType" placeholder="请输入订单类型(1入库 2出库)"/>
-      </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-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="SmErpInventoryRecordsDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from "/@/hooks/message";
-import { getObj, addObj, putObj } from '/@/api/supermarketerp/smErpInventoryRecords'
-import { rule } from '/@/utils/validate';
-const emit = defineEmits(['refresh']);
-
-// 定义变量内容
-const dataFormRef = ref();
-const visible = ref(false)
-const loading = ref(false)
-// 定义字典
-const { erp_order_type,inventory_type,check_status } = useDict('erp_order_type','inventory_type','check_status')
-
-// 提交表单数据
-const form = reactive({
-		id:'',
-	  inventoryCode: '',
-	  inventoryDate: '',
-	  inventoryType: '',
-	  sourceId: '',
-	  warehouseId: '',
-	  handlerUserId: '',
-	  checkStatus: '',
-	  checkUserId: '',
-	  checkTime: '',
-	  merchantId: '',
-	  deptId: '',
-	  supplierId: '',
-	  remark: '',
-	  orderType: '',
-	  totalAmount: '',
-});
-
-// 定义校验规则
-const dataRules = ref({
-        inventoryCode: [{required: true, message: '单据编号(规则生成，出入库编号)不能为空', trigger: 'blur'}],
-        inventoryDate: [{required: true, message: '单据日期不能为空', trigger: 'blur'}],
-        inventoryType: [{required: true, message: '单据类型(字典inventory_type)采购入库、采购退货、盘点入库等不能为空', trigger: 'blur'}],
-})
-
-// 打开弹窗
-const openDialog = (id: string) => {
-  visible.value = true
-  form.id = ''
-
-  // 重置表单数据
-	nextTick(() => {
-		dataFormRef.value?.resetFields();
-	});
-
-  // 获取smErpInventoryRecords信息
-  if (id) {
-    form.id = id
-    getsmErpInventoryRecordsData(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 getsmErpInventoryRecordsData = (id: string) => {
-  // 获取数据
-  loading.value = true
-  getObj(id).then((res: any) => {
-    Object.assign(form, res.data)
-  }).finally(() => {
-    loading.value = false
-  })
-};
-
-// 暴露变量
-defineExpose({
-  openDialog
-});
-</script>

src/views/supermarketerp/smErpInventoryRecords/index.vue

@@ -1,114 +1,151 @@
 <template>
-  <div class="layout-padding">
+	<div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
+		<div class="layout-padding-auto layout-padding-view">
-      <el-row v-show="showSearch">
+			<el-row v-show="showSearch">
-        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-      <el-form-item label="单据编号(规则生成，出入库编号)" prop="inventoryCode" >
+					<el-form-item label="单据编号(出入库编号)" prop="inventoryCode">
-        <el-input placeholder="请输入单据编号(规则生成，出入库编号)" v-model="state.queryForm.inventoryCode" />
+						<el-input placeholder="请输入单据编号(出入库编号)" v-model="state.queryForm.inventoryCode" />
-      </el-form-item>
+					</el-form-item>
-      <el-form-item label="单据日期" prop="inventoryDate">
+					<el-form-item label="单据日期" prop="inventoryDate">
-      <el-date-picker type="date" placeholder="请输入单据日期" v-model="state.queryForm.inventoryDate"></el-date-picker>
+						<el-date-picker
-      </el-form-item>
+							type="date"
-      <el-form-item label="单据类型(字典inventory_type)采购入库、采购退货、盘点入库等" prop="inventoryType">
+							placeholder="请输入单据日期"
-            <el-select v-model="state.queryForm.inventoryType" placeholder="请选择单据类型(字典inventory_type)采购入库、采购退货、盘点入库等">
+							v-model="state.queryForm.inventoryDate"
-              <el-option :label="item.label" :value="item.value" v-for="(item, index) in inventory_type" :key="index"></el-option>
+							fomat="yyyy-MM-dd"
-            </el-select>
+							value-format="yyyy-MM-dd"
-      </el-form-item>
+						/>
-      <el-form-item label="经办人id" prop="handlerUserId">
+					</el-form-item>
-            <el-select v-model="state.queryForm.handlerUserId" placeholder="请选择经办人id">
+					<el-form-item label="单据类型(字典inventory_type)采购入库、采购退货、盘点入库等" prop="inventoryType">
-              <el-option label="请选择">0</el-option>
+						<el-select
-            </el-select>
+							v-model="state.queryForm.inventoryType"
-      </el-form-item>
+							placeholder="请选择单据类型(字典inventory_type)采购入库、采购退货、盘点入库等"
-      <el-form-item label="审批状态" prop="checkStatus">
+						>
-            <el-select v-model="state.queryForm.checkStatus" placeholder="请选择审批状态">
+							<el-option :label="item.label" :value="item.value" v-for="(item, index) in inventory_type" :key="index" />
-              <el-option :label="item.label" :value="item.value" v-for="(item, index) in check_status" :key="index"></el-option>
+						</el-select>
-            </el-select>
+					</el-form-item>
-      </el-form-item>
+					<el-form-item label="经办人id" prop="handlerUserId">
-          <el-form-item>
+						<el-select v-model="state.queryForm.handlerUserId" placeholder="请选择经办人id">
-            <el-button icon="search" type="primary" @click="getDataList">
+							<el-option label="请选择" value="0" />
-              查询
+						</el-select>
-            </el-button>
+					</el-form-item>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+					<el-form-item label="审批状态" prop="checkStatus">
-          </el-form-item>
+						<el-select v-model="state.queryForm.checkStatus" placeholder="请选择审批状态">
-        </el-form>
+							<el-option :label="item.label" :value="item.value" v-for="(item, index) in check_status" :key="index" />
-      </el-row>
+						</el-select>
-      <el-row>
+					</el-form-item>
-        <div class="mb8" style="width: 100%">
+					<el-form-item>
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
-            v-auth="'supermarket_smErpInventoryRecords_add'">
+						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            新 增
+					</el-form-item>
-          </el-button>
+				</el-form>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary"
+			</el-row>
-            v-auth="'supermarket_smErpInventoryRecords_del'" @click="handleDelete(selectObjs)">
+			<el-row>
-            删除
+				<div class="mb8" style="width: 100%">
-          </el-button>
+					<el-button
-          <right-toolbar v-model:showSearch="showSearch" :export="'supermarket_smErpInventoryRecords_export'"
+						icon="folder-add"
-                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+						type="primary"
-            @queryTable="getDataList"></right-toolbar>
+						class="ml10"
-        </div>
+						@click="handleClickCreateInventoryRecord()"
-      </el-row>
+						v-auth="'supermarket_smErpInventoryRecords_add'"
-      <el-table :data="state.dataList" v-loading="state.loading" border
+					>
-        :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+						新 增
+					</el-button>
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'supermarket_smErpInventoryRecords_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						删 除
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'supermarket_smErpInventoryRecords_export'"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					/>
+				</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">
+				@sort-change="sortChangeHandle"
-        <el-table-column type="selection" width="40" align="center" />
+			>
-        <el-table-column type="index" label="#" width="40" />
+				<el-table-column type="selection" width="40" align="center" />
-          <el-table-column prop="inventoryCode" label="单据编号(规则生成，出入库编号)"  show-overflow-tooltip/>
+				<el-table-column type="index" label="#" width="50" />
-          <el-table-column prop="inventoryDate" label="单据日期"  show-overflow-tooltip/>
+				<el-table-column prop="inventoryCode" label="单据编号(出入库编号)" show-overflow-tooltip />
-          <el-table-column prop="inventoryType" label="单据类型(字典inventory_type)采购入库、采购退货、盘点入库等" show-overflow-tooltip>
+				<el-table-column prop="inventoryDate" label="单据日期" show-overflow-tooltip />
-      <template #default="scope">
+				<el-table-column prop="inventoryType" label="单据类型(字典inventory_type)采购入库、采购退货、盘点入库等" show-overflow-tooltip>
-                <dict-tag :options="inventory_type" :value="scope.row.inventoryType"></dict-tag>
+					<template #default="scope">
-            </template>
+						<dict-tag :options="inventory_type" :value="scope.row.inventoryType" />
-          </el-table-column>
+					</template>
-          <el-table-column prop="sourceId" label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）"  show-overflow-tooltip/>
+				</el-table-column>
-          <el-table-column prop="warehouseId" label="仓库id"  show-overflow-tooltip/>
+				<el-table-column prop="sourceId" label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）" show-overflow-tooltip />
-          <el-table-column prop="handlerUserId" label="经办人id"  show-overflow-tooltip/>
+				<el-table-column prop="warehouseId" label="仓库id" show-overflow-tooltip />
-          <el-table-column prop="checkStatus" label="审批状态" show-overflow-tooltip>
+				<el-table-column prop="handlerUserId" label="经办人id" show-overflow-tooltip />
-      <template #default="scope">
+				<el-table-column prop="checkStatus" label="审批状态" show-overflow-tooltip>
-                <dict-tag :options="check_status" :value="scope.row.checkStatus"></dict-tag>
+					<template #default="scope">
-            </template>
+						<dict-tag :options="check_status" :value="scope.row.checkStatus"></dict-tag>
-          </el-table-column>
+					</template>
-          <el-table-column prop="checkUserId" label="审批人id"  show-overflow-tooltip/>
+				</el-table-column>
-          <el-table-column prop="checkTime" label="审核日期"  show-overflow-tooltip/>
+				<el-table-column prop="checkUserId" label="审批人id" show-overflow-tooltip />
-          <el-table-column prop="merchantId" label="商户编号"  show-overflow-tooltip/>
+				<el-table-column prop="checkTime" label="审核日期" show-overflow-tooltip />
-          <el-table-column prop="deptId" label="部门id"  show-overflow-tooltip/>
+				<el-table-column prop="merchantId" label="商户编号" show-overflow-tooltip />
-          <el-table-column prop="supplierId" label="货商"  show-overflow-tooltip/>
+				<el-table-column prop="deptId" label="部门id" show-overflow-tooltip />
-          <el-table-column prop="remark" label="备注"  show-overflow-tooltip/>
+				<el-table-column prop="supplierId" label="货商" show-overflow-tooltip />
-          <el-table-column prop="orderType" label="订单类型(1入库 2出库)" show-overflow-tooltip>
+				<el-table-column prop="remark" label="备注" show-overflow-tooltip />
-      <template #default="scope">
+				<el-table-column prop="orderType" label="订单类型(1入库 2出库)" show-overflow-tooltip>
-                <dict-tag :options="erp_order_type" :value="scope.row.orderType"></dict-tag>
+					<template #default="scope">
-            </template>
+						<dict-tag :options="erp_order_type" :value="scope.row.orderType"></dict-tag>
-          </el-table-column>
+					</template>
-          <el-table-column prop="totalAmount" label="入库总金额"  show-overflow-tooltip/>
+				</el-table-column>
-        <el-table-column label="操作" width="150">
+				<el-table-column prop="totalAmount" label="入库总金额" show-overflow-tooltip />
-          <template #default="scope">
+				<el-table-column label="操作" width="150">
-            <el-button icon="edit-pen" text type="primary" v-auth="'supermarket_smErpInventoryRecords_edit'"
+					<template #default="scope">
-              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
+						<el-button
-            <el-button icon="delete" text type="primary" v-auth="'supermarket_smErpInventoryRecords_del'" @click="handleDelete([scope.row.id])">删除</el-button>
+							icon="edit-pen"
-          </template>
+							text
-        </el-table-column>
+							type="primary"
-      </el-table>
+							v-auth="'supermarket_smErpInventoryRecords_edit'"
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+							@click="handleClickEditInventoryRecord(scope.row.id)"
-    </div>
+						>
-
+							编辑
-    <!-- 编辑、新增  -->
+						</el-button>
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+						<el-button
-
+							icon="delete"
-  </div>
+							text
+							type="primary"
+							v-auth="'supermarket_smErpInventoryRecords_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>
+	</div>
 </template>
 
 <script setup lang="ts" name="systemSmErpInventoryRecords">
-import { BasicTableProps, useTable } from "/@/hooks/table";
+import { useRouter } from "vue-router"
-import { fetchList, delObjs } from "/@/api/supermarketerp/smErpInventoryRecords";
+import { BasicTableProps, useTable } from "/@/hooks/table"
-import { useMessage, useMessageBox } from "/@/hooks/message";
+import { fetchList, delObjs } from "/@/api/supermarketerp/smErpInventoryRecords"
-import { useDict } from '/@/hooks/dict';
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
 
-// 引入组件
+const router = useRouter()
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const { erp_order_type, inventory_type, check_status } = useDict("erp_order_type", "inventory_type", "check_status")
-// 定义查询字典
-
-const { erp_order_type,inventory_type,check_status } = useDict('erp_order_type','inventory_type','check_status')
-// 定义变量内容
 const formDialogRef = ref()
 // 搜索变量
 const queryRef = ref()
@@ -118,54 +155,57 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
+	queryForm: {},
-  pageList: fetchList
+	pageList: fetchList,
 })
 
 //  table hook
-const {
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  downBlobFile,
-	tableStyle
-} = useTable(state)
 
 // 清空搜索条件
 const resetQuery = () => {
-  // 清空搜索条件
+	// 清空搜索条件
-  queryRef.value?.resetFields()
+	queryRef.value?.resetFields()
-  // 清空多选
+	// 清空多选
-  selectObjs.value = []
+	selectObjs.value = []
-  getDataList()
+	getDataList()
 }
 
 // 导出excel
 const exportExcel = () => {
-  downBlobFile('/supermarket/smErpInventoryRecords/export', Object.assign(state.queryForm, { ids: selectObjs }), 'smErpInventoryRecords.xlsx')
+	downBlobFile(
+		"/supermarket/smErpInventoryRecords/export",
+		Object.assign(state.queryForm, { ids: selectObjs }),
+		"smErpInventoryRecords.xlsx",
+	)
 }
 
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
+	selectObjs.value = objs.map(({ id }) => id)
-  multiple.value = !objs.length;
+	multiple.value = !objs.length
-};
+}
+
+// 点击创建出库入库记录表
+const handleClickCreateInventoryRecord = () => router.push({ path: "/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption" })
+// 点击编辑出库入库记录表
+const handleClickEditInventoryRecord = (id: string) =>
+	router.push({ path: "/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption", query: { id } })
 
 // 删除操作
 const handleDelete = async (ids: string[]) => {
-  try {
+	try {
-    await useMessageBox().confirm('此操作将永久删除');
+		await useMessageBox().confirm("此操作将永久删除")
-  } catch {
+	} catch {
-    return;
+		return
-  }
+	}
 
-  try {
+	try {
-    await delObjs(ids);
+		await delObjs(ids)
-    getDataList();
+		getDataList()
-    useMessage().success('删除成功');
+		useMessage().success("删除成功")
-  } catch (err: any) {
+	} catch (err: any) {
-    useMessage().error(err.msg);
+		useMessage().error(err.msg)
-  }
+	}
-};
+}
 </script>

src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption.vue

@@ -0,0 +1,728 @@
+<template>
+	<div class="layout-padding">
+		<div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll">
+			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" formDialogRef label-width="140px">
+				<div class="flex flex-wrap">
+					<el-form-item label="单据编号(出入库编号)" prop="inventoryCode">
+						<el-input v-model.trim="baseDataForm.inventoryCode" readonly style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="单据日期" prop="inventoryDate">
+						<el-input v-model.trim="baseDataForm.inventoryDate" readonly style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="单据类型(字典inventory_type)采购入库、采购退货、盘点入库等" prop="inventoryType">
+						<el-select
+							v-model.trim="baseDataForm.inventoryType"
+							placeholder="请选择单据类型(字典inventory_type)采购入库、采购退货、盘点入库等"
+							style="width: 200px"
+						>
+							<el-option :value="item.value" :label="item.label" v-for="(item, index) in inventory_type" :key="index"></el-option>
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）" prop="sourceId">
+						<el-input
+							v-model.trim="baseDataForm.sourceId"
+							placeholder="请输入来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）"
+							style="width: 200px"
+						/>
+					</el-form-item>
+
+					<el-form-item label="仓库id" prop="warehouseId">
+						<el-input v-model.trim="baseDataForm.warehouseId" placeholder="请输入仓库id" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="经办人id" prop="handlerUserId">
+						<el-select v-model.trim="baseDataForm.handlerUserId" placeholder="请选择经办人id" style="width: 200px">
+							<el-option label="请选择" value="0" />
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="审批状态" prop="checkStatus">
+						<el-input v-model.trim="baseDataForm.checkStatus" placeholder="请输入审批状态" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="审批人id" prop="checkUserId">
+						<el-input v-model.trim="baseDataForm.checkUserId" placeholder="请输入审批人id" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="审核日期" prop="checkTime">
+						<el-input v-model.trim="baseDataForm.checkTime" placeholder="请输入审核日期" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="商户编号" prop="merchantId">
+						<el-input v-model.trim="baseDataForm.merchantId" placeholder="请输入商户编号" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="部门id" prop="deptId">
+						<el-input v-model.trim="baseDataForm.deptId" placeholder="请输入部门id" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="货商" prop="supplierId">
+						<el-input v-model.trim="baseDataForm.supplierId" placeholder="请输入货商" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="订单类型(1入库 2出库)" prop="orderType">
+						<el-input v-model.trim="baseDataForm.orderType" placeholder="请输入订单类型(1入库 2出库)" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="入库总金额" prop="totalAmount">
+						<el-input v-model.trim="baseDataForm.totalAmount" placeholder="请输入入库总金额" style="width: 200px" />
+					</el-form-item>
+				</div>
+			</el-form>
+
+			<el-row class="my-3">
+				<el-button @click="addEvent">新增（顶部）</el-button>
+				<el-button @click="pushEvent">新增（尾部）</el-button>
+				<el-button @click="insertEvent">
+					在第
+					<el-input-number
+						@click.stop
+						v-model="state.insertedRowNumber"
+						:min="0"
+						:max="state.editableTableData.length"
+						:precision="0"
+						size="small"
+						controls-position="right"
+						style="min-width: 50px; margin: 0 5px"
+					/>
+					行新增
+				</el-button>
+				<el-button @click="removeSelectRowEvent" :disabled="state.selectedRowsErpSpuIds.length <= 0">删除选中</el-button>
+				<el-button @click="clearData">清空数据</el-button>
+				<el-button @click="handleClickSpuSelect">商品选择</el-button>
+			</el-row>
+
+			<vxe-table
+				ref="editableTableRef"
+				border
+				:loading="loading"
+				show-overflow
+				max-height="400"
+				:edit-config="{
+					trigger: 'click',
+					mode: 'cell',
+					beforeEditMethod({ row, column }:any) {
+						// 禁止编辑
+						if (column.property === '') {
+							return false
+						}
+						return true
+					},
+				}"
+				:column-config="{ resizable: true }"
+				:row-config="{ isHover: true }"
+				:resizable-config="{ dragMode: 'fixed' }"
+				:data="state.editableTableData"
+				:edit-rules="validRules"
+				@checkbox-all="selectChangeEvent"
+				@checkbox-change="selectChangeEvent"
+				size="mini"
+				align="center"
+			>
+				<vxe-column type="checkbox" width="40" fixed="left" />
+
+				<vxe-column type="seq" width="50" fixed="left" />
+
+				<!-- <vxe-column field="planId" title="采购" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+					<template #edit="{ row }">
+						<el-input v-model="row.planId" />
+					</template>
+				</vxe-column> -->
+
+				<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 }">
+						<el-select v-model="row.unitId" placeholder="请选择包装单位">
+							<el-option
+								v-if="row.erpUnitVos?.length > 0"
+								v-for="item in row.erpUnitVos"
+								:key="item.id"
+								:label="item.unit"
+								:value="item.id"
+							/>
+						</el-select>
+					</template>
+					<template #default="{ row }">
+						<span v-if="row.unitId">{{ row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.unit }}</span>
+						<span v-else style="color: #c0c4cf">请选择</span>
+					</template>
+				</vxe-column>
+
+				<vxe-column field="quantity" title="数量" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+					<template #edit="{ row }">
+						<el-input v-model="row.quantity" />
+					</template>
+				</vxe-column>
+
+				<vxe-column field="unitPrice" title="进价">
+					<template #default="{ row }">
+						{{ row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice }}
+					</template>
+				</vxe-column>
+
+				<vxe-column field="totalAmount" title="累计总金额">
+					<template #default="{ row }">
+						{{
+							row.unitId && row.quantity
+								? Number(row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice) * row.quantity
+								: ""
+						}}
+					</template>
+				</vxe-column>
+
+				<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+					<template #edit="{ row }">
+						<el-input v-model="row.remark" />
+					</template>
+				</vxe-column>
+
+				<!--				<vxe-column field="merchantId" title="商户编号" :edit-render="{ autoFocus: 'input', placeholder: '请选择' }">-->
+				<!--					<template #edit="{ row }">-->
+				<!--						<select-mch v-model="row.merchantId" />-->
+				<!--					</template>-->
+				<!--				</vxe-column>-->
+
+				<!--				<vxe-column field="deptId" title="部门id" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">-->
+				<!--					<template #edit="{ row }">-->
+				<!--						<el-input v-model="row.deptId" />-->
+				<!--					</template>-->
+				<!--				</vxe-column>-->
+			</vxe-table>
+
+			<el-row class="my-3">
+				<el-tooltip effect="dark" content="返回列表页面" placement="top">
+					<el-button type="primary" plain @click="router.back()">取消</el-button>
+				</el-tooltip>
+				<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">
+					<el-button type="primary" plain @click="onSave">保存</el-button>
+				</el-tooltip>
+			</el-row>
+
+			<!-- 商品选择对话框 -->
+			<el-dialog
+				v-model="state.spuSelectDialogVisible"
+				title="选择商品"
+				width="70%"
+				:close-on-click-modal="false"
+				draggable
+				@close="state.selectedSpuObjs = []"
+			>
+				<!-- <el-row>
+					<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
+						<el-form-item label="商品名称" prop="name">
+							<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
+						</el-form-item>
+						<el-form-item label="商品分类" prop="categoryId">
+							<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
+						</el-form-item>
+						<el-form-item>
+							<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
+							<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+						</el-form-item>
+					</el-form>
+				</el-row> -->
+
+				<el-table
+					ref="spuMultipleTableRef"
+					:data="state.spuDataList"
+					v-loading="spuListLoading"
+					@select="handleSelect"
+					@select-all="handleSelectAll"
+					@selection-change="selectionChangeHandle"
+					:row-key="(row:any) => row.id"
+					:reserve-selection="true"
+					@row-click="rowClick"
+					:row-style="{ cursor: 'pointer' }"
+				>
+					<el-table-column type="selection" width="40" align="center" fixed="left" />
+					<el-table-column type="index" label="#" width="50" align="center" fixed="left" />
+					<el-table-column prop="productName" label="商品名称" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="barcode" label="自编码/条码" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="deptId" label="商户" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
+						<template #default="scope">
+							<preview-image @click.stop :src="scope.row.picUrl" />
+						</template>
+					</el-table-column>
+					<el-table-column prop="stock" label="库存" min-width="100px" align="center" show-overflow-tooltip />
+				</el-table>
+				<!-- <pagination
+					@size-change="sizeChangeHandle"
+					@current-change="currentChangeHandle"
+					v-model:current-page="foodQueryForm.current"
+					v-model:page-size="foodQueryForm.size"
+					:total="total"
+				/> -->
+
+				<template #footer>
+					<div class="dialog-footer">
+						<el-button @click="state.spuSelectDialogVisible = false">取消</el-button>
+						<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
+					</div>
+				</template>
+			</el-dialog>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="smErpInventoryRecordsOption">
+import { ref, reactive, computed, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpInventoryRecords"
+import { getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
+import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
+import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
+import { storePrice } from "/@/utils/formatMoney"
+import { formatDate } from "/@/utils/formatTime"
+import { useDict } from "/@/hooks/dict"
+
+// 基本表单数据类型
+interface FormVO {
+	id: string | undefined
+	inventoryCode: string
+	inventoryDate: string
+	inventoryType: string
+	sourceId: string
+	warehouseId: string
+	handlerUserId: string
+	checkStatus: string
+	checkUserId: string
+	checkTime: string
+	merchantId: string
+	deptId: string
+	supplierId: string
+	remark: string
+	orderType: string
+	totalAmount: string
+	[key: string]: string | undefined
+}
+
+// 可编辑表格行数据类型
+interface RowVO {
+	id?: string
+	erpSpuId: string
+	quantity: number | null
+	unitPrice: number | null
+	totalAmount: number | null
+	remark: string
+	unitId: string
+}
+const { erp_order_type, inventory_type, check_status } = useDict("erp_order_type", "inventory_type", "check_status")
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false) // 采购计划加载
+const spuListLoading = ref(false) // 对话框商品列表加载
+const baseDataFormRef = ref() // 基本数据表单ref
+const editableTableRef = ref<VxeTableInstance<RowVO>>() // 可编辑表格ref
+const spuMultipleTableRef = ref() // 对话框多选表格ref
+const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
+
+// 基本信息表单数据
+const baseDataForm = reactive<FormVO>({
+	id: "",
+	inventoryCode: "",
+	inventoryDate: formatDate(new Date(), "YYYY-mm-dd"),
+	inventoryType: "",
+	sourceId: "",
+	warehouseId: "",
+	handlerUserId: "",
+	checkStatus: "",
+	checkUserId: "",
+	checkTime: "",
+	merchantId: "",
+	deptId: "",
+	supplierId: "",
+	remark: "",
+	orderType: "",
+	totalAmount: "",
+})
+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: [], // 商品列表
+	selectedSpuObjs: [], // 已选中的商品列表项
+})
+
+// 基本信息表单校验规则
+const dataRules = ref({
+	inventoryCode: [{ required: true, message: "出入库记录表编号不能为空", trigger: "blur" }],
+	inventoryDate: [{ required: true, message: "出入库记录表单据日期不能为空", trigger: "blur" }],
+	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
+})
+
+// 可编辑表格校验规则
+const validRules = ref<VxeTablePropTypes.EditRules<RowVO>>({
+	unitId: [{ required: true, message: "必须选择" }],
+	quantity: [{ required: true, type: "number", min: 1, max: 99, message: "数值范围1~99" }],
+})
+
+// 初始化数据
+const getInitData = async () => {
+	baseDataForm.id = undefined
+	const id = route.query.id as string
+	if (id) {
+		loading.value = true
+		// 获取采购计划数据 & 获取简要商品列表
+		const [cgPlanData, erpSpuSimpleAll] = await Promise.allSettled([getObj(id), getErpSpuSimpleAll()])
+			.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
+			.finally(() => (loading.value = false))
+
+		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)
+	}
+
+	// 获取货商选项 & 获取采购计划编号
+	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode({ type: 2 })]).then((results) =>
+		results.map((result) => (result.status === "fulfilled" ? result.value : null)),
+	)
+	supplierTypeOptions && supplierTypeOptions.code === 0 && (supplierTypeDict.value = supplierTypeOptions.data)
+	planCode && planCode.code === 0 && (baseDataForm.inventoryCode = planCode.data)
+}
+
+// 可编辑表格行勾选
+const selectChangeEvent: VxeTableEvents.CheckboxChange<RowVO> = ({ checked }) => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const records = $table.getCheckboxRecords()
+		console.log(checked ? "勾选事件" : "取消事件", records)
+		state.selectedRowsErpSpuIds = records.map((item) => item.erpSpuId)
+	}
+}
+
+// 顶部表格行新增
+const addEvent = () => {
+	const newRow: RowVO = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.unshift(newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 底部表格行新增
+const pushEvent = () => {
+	const newRow: RowVO = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.push(newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 在指定行插入
+const insertEvent = () => {
+	const newRow: RowVO = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.splice(state.insertedRowNumber, 0, newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 删除选中的行
+const removeSelectRowEvent = () => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const selectRecords = $table.getCheckboxRecords()
+		if (selectRecords.length > 0) {
+			state.editableTableData = state.editableTableData.filter((item) => !selectRecords.some((row) => row.erpSpuId === item.erpSpuId))
+		}
+	}
+}
+
+// 点击商品选择
+const handleClickSpuSelect = async () => {
+	state.selectedSpuObjs = [...state.editableTableData]
+
+	state.spuSelectDialogVisible = true
+	spuListLoading.value = true
+	try {
+		const { code, data } = await getCgPlanSpuPage().finally(() => (spuListLoading.value = false))
+		if (code === 0) {
+			state.spuDataList = data.records.map((item: RowVO) => ({ ...item, erpSpuId: 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) {
+		state.spuDataList = []
+		spuListLoading.value = false
+	}
+}
+
+// 点击商品列表表格行
+const rowClick = (row: any) => {
+	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.erpSpuId === row.erpSpuId),
+				1,
+		  )
+	console.log("click-select", state.selectedSpuObjs)
+	spuMultipleTableRef.value.toggleRowSelection(row)
+}
+
+// 选中商品列表表格行
+const handleSelect = (selectedRows: any[], row: any) => {
+	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.erpSpuId === row.erpSpuId),
+				1,
+		  )
+	console.log("check-select", state.selectedSpuObjs)
+}
+
+// 全选和反全选商品列表表格行
+const handleSelectAll = (selectedRows: any[]) => {
+	if (selectedRows.length > 0) {
+		selectedRows.forEach((row: any) => {
+			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.erpSpuId === row.erpSpuId)
+			if (index !== -1) {
+				state.selectedSpuObjs.splice(index, 1)
+			}
+		})
+	}
+	console.log("checkAll-select", state.selectedSpuObjs)
+}
+
+// 商品表格多选
+const selectionChangeHandle = (rows: any) => {
+	// console.log("onChange-selects", rows)
+}
+
+// 商品选择对话框确认
+const handleSelectDialogConfirm = () => {
+	console.log(state.editableTableData, state.selectedSpuObjs)
+
+	// 筛选新勾选的项
+	const addedItems = state.selectedSpuObjs
+		.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 = [...state.editableTableData, ...addedItems]
+
+	// 筛选取消勾选的项
+	const removedItems = state.editableTableData.filter(
+		(item: any) => !state.selectedSpuObjs.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
+	)
+	// 仅移除取消勾选的项
+	state.editableTableData = state.editableTableData.filter(
+		(item: any) => !removedItems.some((removeItem: any) => removeItem.erpSpuId === item.erpSpuId),
+	)
+	// state.editableTableData.push(item)
+	// nextTick(() => {
+	// 	const $table = editableTableRef.value
+	// 	if ($table) {
+	// 		$table.setRow(item)
+	// 	}
+	// })
+	state.spuSelectDialogVisible = false
+	console.log("state.editableTableData", state.editableTableData)
+}
+
+// 整理数据
+const cgPlanSpuItems = computed(() => {
+	return state.editableTableData.map((item: any) => {
+		const unit = item.erpUnitVos.find((unitItem: any) => unitItem.id === item.unitId)
+		return {
+			id: item.isNew ? undefined : item.id,
+			erpSpuId: item.erpSpuId,
+			quantity: item.quantity,
+			unitPrice: unit.purchasePrice ? storePrice(unit?.purchasePrice) : 0,
+			totalAmount: Number(unit?.purchasePrice || 0) * item.quantity,
+			remark: item.remark,
+			unitId: item.unitId,
+		}
+	})
+})
+
+// 点击继续添加
+const onContinueAdd = async () => {
+	console.log("baseDataForm", baseDataForm)
+	console.log("state.editableTableData", state.editableTableData)
+	;(await baseDataFormValidate()) && checkSelectSpu() && (await editableTableValidate()) && (await submitData()) && clearData()
+}
+
+// 点击保存
+const onSave = async () => {
+	console.log("baseDataForm", baseDataForm)
+	console.log("state.editableTableData", state.editableTableData)
+	;(await baseDataFormValidate()) &&
+		checkSelectSpu() &&
+		(await editableTableValidate()) &&
+		(await submitData()) &&
+		clearData() &&
+		router.replace({ path: "/supermarketerp/smErpInventoryRecords/index" })
+}
+
+// 校验基本数据表单 成功返回 true 失败返回 undefined
+const baseDataFormValidate = async () => {
+	const valid = await baseDataFormRef.value.validate().catch(() => {})
+	return valid
+}
+
+// 校验是否选择了商品 成功返回 true 失败返回 false
+const checkSelectSpu = () => {
+	if (state.editableTableData.length <= 0) {
+		useMessage().warning("请选择商品")
+		return false
+	} else {
+		return true
+	}
+}
+
+// 校验可编辑表格 成功返回 true 失败返回 false
+const editableTableValidate = async () => {
+	// 全量校验
+	const $table = editableTableRef.value
+	if ($table) {
+		const errMap = await $table.validate(true)
+		if (errMap) {
+			console.log("全量校验失败！")
+			return false
+		} else {
+			console.log("全量校验成功！")
+			return true
+		}
+	}
+}
+
+// 提交数据 成功返回 true 失败返回 false
+const submitData = async () => {
+	try {
+		loading.value = true
+
+		const _pa = {
+			...baseDataForm,
+			items: cgPlanSpuItems.value,
+		}
+
+		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(baseDataForm.id ? "修改成功" : "添加成功")
+			return true
+		} else {
+			useMessage().error(res.msg)
+			return false
+		}
+	} catch (err: any) {
+		useMessage().error(err.msg)
+		loading.value = false
+		return false
+	}
+}
+
+// 清空填写的数据 返回 true
+const clearData = () => {
+	for (const key in baseDataForm) {
+		if (key === "id" || key === "inventoryCode" || key === "inventoryDate") continue
+		baseDataForm[key] = ""
+	}
+	state.insertedRowNumber = 0
+	state.editableTableData = []
+	state.selectedRowsErpSpuIds = []
+	state.selectedSpuObjs = []
+	return true
+}
+
+onMounted(() => {
+	getInitData()
+})
+</script>

src/views/supermarketerp/supermarketSpu/components/supermarketUnit/index.vue

@@ -60,12 +60,7 @@
 			</div>
 		</el-row>
 		<el-form-item label="" prop="supermarketUnitEntityList">
-			<el-table
+			<el-table :data="supermarketUnitEntityList" border :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
-				:data="supermarketUnitEntityList"
-				border
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-			>
 				<!-- <el-table-column type="selection" width="40" align="center" fixed /> -->
 				<el-table-column type="index" label="#" width="50" />
 				<el-table-column prop="barCode" label="条码" show-overflow-tooltip />
@@ -120,9 +115,6 @@
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
 
 const supermarketUnitEntityList = defineModel<any>("supermarketUnitEntityList", { default: [] })
-const props = defineProps<{
-	defaultSpuUnit: any
-}>()
 
 const formDialogRef = ref()
 // 搜索变量
@@ -150,36 +142,36 @@ const tableStyle = {
 }
 
 // 根据基础信息的部分填写项自动生成一条默认包装单位
-watch(
+// watch(
-	() => props.defaultSpuUnit,
+// 	() => props.defaultSpuUnit,
-	(newValue, oldValue) => {
+// 	(newValue, oldValue) => {
-		console.log(newValue, oldValue)
+// 		console.log(newValue, oldValue)
 
-		const defaultSpuUnitIndex = supermarketUnitEntityList.value.findIndex((item: any) => {
+// 		const defaultSpuUnitIndex = supermarketUnitEntityList.value.findIndex((item: any) => {
-			return (
+// 			return (
-				item.barCode == oldValue.barCode &&
+// 				item.barCode == oldValue.barCode &&
-				item.unit == oldValue.unit &&
+// 				item.unit == oldValue.unit &&
-				item.packageNum == oldValue.packageNum &&
+// 				item.packageNum == oldValue.packageNum &&
-				item.retailPrice == oldValue.retailPrice &&
+// 				item.retailPrice == oldValue.retailPrice &&
-				item.purchasePrice == oldValue.purchasePrice &&
+// 				item.purchasePrice == oldValue.purchasePrice &&
-				item.promotionPrice == oldValue.promotionPrice &&
+// 				item.promotionPrice == oldValue.promotionPrice &&
-				item.costPrice == oldValue.costPrice
+// 				item.costPrice == oldValue.costPrice
-			)
+// 			)
-		})
+// 		})
-		console.log(defaultSpuUnitIndex)
+// 		console.log(defaultSpuUnitIndex)
 
-		if (defaultSpuUnitIndex !== -1) {
+// 		if (defaultSpuUnitIndex !== -1) {
-			supermarketUnitEntityList.value[defaultSpuUnitIndex] = newValue
+// 			supermarketUnitEntityList.value[defaultSpuUnitIndex] = newValue
-		} else {
+// 		} else {
-			supermarketUnitEntityList.value.push(newValue)
+// 			supermarketUnitEntityList.value.push(newValue)
-		}
+// 		}
-		console.log(supermarketUnitEntityList.value)
+// 		console.log(supermarketUnitEntityList.value)
-	},
+// 	},
-	{
+// 	{
-		deep: true,
+// 		deep: true,
-		immediate: true,
+// 		immediate: true,
-	},
+// 	},
-)
+// )
 
 const getDataList = (formData: any) => {
 	console.log(formData)

src/views/supermarketerp/supermarketSpu/form.vue

@@ -27,12 +27,7 @@
 						<el-col :span="12" class="mb20">
 							<el-form-item label="货商" prop="supplierId">
 								<el-select v-model="form.supplierId" placeholder="请选择货商">
-									<el-option
+									<el-option v-for="item in supplierOptions" :key="item?.id" :label="item?.typeName" :value="item?.id" />
-										v-for="item in supplierOptions"
-										:key="item?.id"
-										:label="item?.typeName"
-										:value="item?.id"
-									/>
 								</el-select>
 							</el-form-item>
 						</el-col>
@@ -53,12 +48,7 @@
 						<el-col :span="12" class="mb20">
 							<el-form-item label="商品性质" prop="productNature">
 								<el-select v-model="form.productNature" placeholder="请选择商品性质">
-									<el-option
+									<el-option :value="item.value" :label="item.label" v-for="(item, index) in supermarket_nature" :key="index"></el-option>
-										:value="item.value"
-										:label="item.label"
-										v-for="(item, index) in supermarket_nature"
-										:key="index"
-									></el-option>
 								</el-select>
 							</el-form-item>
 						</el-col>
@@ -118,9 +108,7 @@
 						<el-col :span="24" class="mb20">
 							<el-form-item label="商品状态" prop="status">
 								<el-radio-group v-model="form.status">
-									<el-radio :label="item.value" v-for="(item, index) in status" border :key="index"
+									<el-radio :label="item.value" v-for="(item, index) in status" border :key="index">{{ item.label }} </el-radio>
-										>{{ item.label }}
-									</el-radio>
 								</el-radio-group>
 							</el-form-item>
 						</el-col>
@@ -157,10 +145,7 @@
 					</el-row>
 				</el-tab-pane>
 				<el-tab-pane label="包装单位" name="包装单位" style="overflow-y: auto; height: 60vh">
-					<supermarketUnit
+					<supermarketUnit v-model:supermarketUnitEntityList="form.smErpUnitEntityList" />
-						v-model:supermarketUnitEntityList="form.smErpUnitEntityList"
-						:defaultSpuUnit="defaultSpuUnit"
-					/>
 				</el-tab-pane>
 				<el-tab-pane label="辅助条码" name="辅助条码" style="overflow-y: auto; height: 60vh">
 					<supermarketAuxiliaryCode v-model:supermarketAuxiliaryCodeEntityList="form.smErpAuxiliaryCodeEntityList" />
@@ -173,9 +158,7 @@
 				<el-button @click="visible = false">取消</el-button>
 				<el-button v-if="currentTabPaneIndex != 0" type="primary" @click="currentTabPaneIndex--">上一步</el-button>
 				<el-button v-if="currentTabPaneIndex != 2" type="primary" @click="currentTabPaneIndex++">下一步</el-button>
-				<el-button v-if="currentTabPaneIndex == 2" type="primary" @click="onSubmit" :disabled="loading">
+				<el-button v-if="currentTabPaneIndex == 2" type="primary" @click="onSubmit" :disabled="loading"> 确 认 </el-button>
-					确 认
-				</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -184,13 +167,7 @@
 <script setup lang="ts">
 import { useDict } from "/@/hooks/dict"
 import { useMessage } from "/@/hooks/message"
-import {
+import { getObj, addObj, putObj, getSupermarketCategory, getSupermarketBrand } from "/@/api/supermarketerp/supermarketSpu"
-	getObj,
-	addObj,
-	putObj,
-	getSupermarketCategory,
-	getSupermarketBrand,
-} from "/@/api/supermarketerp/supermarketSpu"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { rule } from "/@/utils/validate"
 import supermarketAuxiliaryCode from "./components/supermarketAuxiliaryCode/index.vue"
@@ -272,18 +249,18 @@ const categoryOptions = ref<any>([]) // 商品分类的下拉选项
 const brandOptions = ref<any>([]) // 超市品牌的下拉选项
 const supplierOptions = ref<any>([]) // 货商的下拉选项
 // 默认包装单位
-const defaultSpuUnit = computed(() => ({
+// const defaultSpuUnit = computed(() => ({
-	flag: "default",
+// 	flag: "default",
-	barCode: form.barcode,
+// 	barCode: form.barcode,
-	unit: form.unit,
+// 	unit: form.unit,
-	packageNum: form.packageNum,
+// 	packageNum: form.packageNum,
-	retailPrice: form.retailPrice,
+// 	retailPrice: form.retailPrice,
-	purchasePrice: form.purchasePrice,
+// 	purchasePrice: form.purchasePrice,
-	promotionPrice: form.promotionPrice,
+// 	promotionPrice: form.promotionPrice,
-	costPrice: form.costPrice,
+// 	costPrice: form.costPrice,
-	spec: form.spec,
+// 	spec: form.spec,
-	status: "0",
+// 	status: "0",
-}))
+// }))
 
 // 打开弹窗
 const openDialog = async (id: string) => {
@@ -345,8 +322,7 @@ const onSubmit = async () => {
 	const valid = await dataFormRef.value.validate().catch(() => {})
 	if (!valid) useMessage().warning("基础信息必填项未填写完整")
 	if (!form.smErpUnitEntityList || form.smErpUnitEntityList.length <= 0) useMessage().warning("请添加包装单位")
-	if (!form.smErpAuxiliaryCodeEntityList || form.smErpAuxiliaryCodeEntityList.length <= 0)
+	if (!form.smErpAuxiliaryCodeEntityList || form.smErpAuxiliaryCodeEntityList.length <= 0) useMessage().warning("请添加辅助条码")
-		useMessage().warning("请添加辅助条码")
 	if (!valid) return false
 
 	try {