update:20240311的修改

src/components/ZxDialog/src/ZxDialog.vue

@@ -17,7 +17,7 @@
       </div>
     </template>
     <div class="left">
-      <!-- <SPuUploadImg v-model="initialData.picUrl" :disabled="isDetail" /> -->
+      <SPuUploadImg v-model="picUrl" :disabled="isDetail" />
       <el-tabs v-model="activeTabName" @tab-click="handleTabClick" tab-position="left">
         <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.component" />
       </el-tabs>
@@ -60,14 +60,12 @@ const props = defineProps({
   buttonActions: Array,
 });
 
-console.log("子组件",props)
-
 // 从路由中引入store中的app仓库
 import { useAppStore } from '@/store/modules/app'
 const appStore = useAppStore()
 const mobile = computed(() => appStore.getMobile)
 
-
+let picUrl = ref("");
 let OperationsId = ref(props.id);
 const dialogVisible = ref(false);
 const activeTabName = ref(props.initialComponent);
@@ -86,6 +84,17 @@ watch(activeTabName, (newVal) => {
 watch(() => props.id, (newId) => {
   OperationsId.value = newId;
 });
+// watch(() => props.initialData.logoUrl, (newVal) => {
+//   console.log("加载时检测到new", newVal)
+//   updateData();
+// });
+// const updateParentData = inject('updateParentData');
+// const updateData = () => {
+//   updateParentData();
+// };
+// watch(() => picUrl.value, (newVal) => {
+//   console.log("new", newVal)
+// });
 function handleTabClick(tab) {
   activeTabName.value = tab.name;
 }

src/views/Home/components/ToBeDone.vue

@@ -2,8 +2,6 @@
 	<el-tree-v2 :data="treeData" :props="defaultProps" ref="treeRef" :height="250" @node-expand="nodeExpand"
 		@node-collapse="nodeCollapse">
 		<template #default="{ node, data }">
-
-
 			<!-- 目录并且子项目大于1 -->
 			<p v-if="data.children != null" :title=" node.label"
 				style="display:flex;align-items: center;position: relative;">
@@ -19,7 +17,6 @@
 						stroke-width="1" fill="#8a8e99" />
 				</svg>
 			</i> -->
-
 			<!-- 文档 -->
 			<div v-else :title="node.label" class="file" @click="toBeDoneClick(data.type,data.orderId)">
 				<span></span>
@@ -32,7 +29,6 @@
 
 			</div>
 		</template>
-
 	</el-tree-v2>
 
 	<OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
@@ -147,6 +143,7 @@
 	}
 </script>
 <style>
+
 	.el-tree-node__expand-icon {
 		display: none
 	}

src/views/SearchIndex.css

@@ -0,0 +1,128 @@
+/* 移动端的搜索区域 */
+@media screen and (max-width: 768px) {
+  /* 针对订单列表的操作 */
+  .year {
+		display: none;
+	}
+	.card {
+		margin: 10px 0 !important;
+	}
+
+	::v-deep(.el-pagination__sizes),
+	::v-deep(.el-pagination__jump) {
+		display: none;
+	}
+
+	.search {
+		flex-direction: column;
+    padding: unset !important;
+    .search-input{
+      width: 100% ;
+      .el-input-group{
+        width: 100% !important;
+      }
+    }
+	}
+
+	::v-deep(.el-tabs__item) {
+		padding: 0 4px;
+	}
+  .container {
+		min-height: 100vh !important;
+	}
+  
+}
+/* 搜索区域 */
+.search {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0px 10px;
+  
+}
+
+/* 更多搜索区域 */
+.searchMore {
+	text-align: left;
+	background: #f3f5f8;
+	padding: 10px;
+	position: absolute;
+	width: calc(100% - 20px);
+	z-index: 111;
+	box-shadow: 0px 9px 6px rgba(0, 0, 0, 0.2);
+	.el-row {
+		text-align: right;
+	}
+}
+
+/* 数据卡片 */
+.card {
+	font-size: 14px;
+	margin: 10px;
+	.el-card {
+		padding: 15px;
+		cursor: pointer;
+		position: relative;
+
+		:deep(.el-card__body) {
+			padding: unset;
+		}
+	}
+
+	.setting {
+		width: 30px;
+		top: 0px;
+		right: 0px;
+		position: absolute;
+		height: 30px;
+		line-height: 30px;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.setting:hover {
+		background: #666
+	}
+
+	p,
+	div {
+		margin: unset;
+		padding: unset;
+	}
+}
+/* 整个容器 */
+.container {
+	position: relative;
+	min-height: 400px;
+	border: none;
+}
+
+
+
+::v-deep .el-card__body {
+	padding: 0;
+}
+
+::v-deep .parent-tabs .el-tabs__nav-wrap::after {
+	position: static !important;
+}
+
+::v-deep .el-tabs__header {
+	margin: 0;
+}
+
+::v-deep .parent-tabs .el-tabs__active-bar {
+	background-color: unset;
+}
+
+.spu-table-expand {
+	padding-left: 42px;
+
+	:deep(.el-form-item__label) {
+		width: 82px;
+		font-weight: bold;
+		color: #99a9bf;
+	}
+}

src/views/mall/product/spu/form/DeliveryForm.vue

@@ -1,6 +1,6 @@
 <!-- 商品发布 - 物流设置 -->
 <template>
-  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
+  <el-form ref="formRef" :model="formData" :rules="rules"  label-width="120px" :disabled="isDetail" :class="{'view':isDetail}" >
     <el-form-item label="配送方式" prop="deliveryTypes">
       <el-checkbox-group v-model="formData.deliveryTypes" class="w-80">
         <el-checkbox
@@ -94,3 +94,4 @@ onMounted(async () => {
   deliveryTemplateList.value = await ExpressTemplateApi.getSimpleTemplateList()
 })
 </script>
+<style src="./SpuComponents.css"  lang="scss" scoped></style>

src/views/mall/product/spu/form/DescriptionForm.vue

@@ -1,6 +1,6 @@
 <!-- 商品发布 - 商品详情 -->
 <template>
-  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail" :class="{'view':isDetail}">
     <!--富文本编辑器组件-->
     <el-form-item prop="description">
       <Editor v-model:modelValue="formData.description" />
@@ -79,3 +79,4 @@ const validate = async () => {
 }
 defineExpose({ validate })
 </script>
+<style src="./SpuComponents.css"  lang="scss" scoped></style>

src/views/mall/product/spu/form/InfoForm.vue

@@ -1,6 +1,6 @@
 <!-- 商品发布 - 基础设置 -->
 <template>
-	<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
+	<el-form ref="formRef" :model="formData" :rules="rules"  :class="{'view':isDetail}" label-width="120px" :disabled="isDetail" >
 		<el-form-item label="商品名称" prop="name">
 			<el-input v-model="formData.name" placeholder="请输入商品名称" type="textarea"
 				:autosize="{ minRows: 2, maxRows: 2 }" maxlength="64" :show-word-limit="true" :clearable="true"
@@ -113,4 +113,5 @@
 		// 获取商品品牌列表
 		brandList.value = await ProductBrandApi.getSimpleBrandList()
 	})
-</script>
+</script>
+<style src="./SpuComponents.css"  lang="scss" scoped></style>

src/views/mall/product/spu/form/OtherForm.vue

@@ -1,6 +1,6 @@
 <!-- 商品发布 - 其它设置 -->
 <template>
-  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
+  <el-form ref="formRef" :model="formData" :rules="rules" :class="{'view':isDetail}" label-width="120px" :disabled="isDetail">
     <el-form-item label="商品排序" prop="sort">
       <el-input-number
         v-model="formData.sort"
@@ -89,3 +89,4 @@ const validate = async () => {
 }
 defineExpose({ validate })
 </script>
+<style src="./SpuComponents.css"  lang="scss" scoped></style>

src/views/mall/product/spu/form/SpuComponents.css

@@ -0,0 +1,4 @@
+/* 如果是查看状态隐藏星号 */
+.view ::v-deep .el-form-item__label::before {
+  display: none;
+}

src/views/mall/product/spu/form/index.vue

@@ -4,7 +4,7 @@
 		draggable class="dialog">
 		<template #header="{ close }">
 			<div class="my-header">
-				<div class="my-header-left">{{dialogTitle}}</div>
+				<div class="my-header-left">{{ dialogTitle }}</div>
 				<div class="my-header-right">
 
 					<span @click="fullScreen">
@@ -18,7 +18,7 @@
 				</div>
 			</div>
 		</template>
-		<ContentWrap v-loading="formLoading">
+		<ContentWrap v-loading="formLoading" style="max-height:560px;min-height:560px;overflow-y: auto;">
 			<div class="left">
 				<SPuUploadImg v-model="formData.picUrl" :disabled="isDetail" />
 				<el-tabs v-model="activeName" tab-position="left" class="child-tabs">
@@ -50,411 +50,411 @@
 				</div>
 			</div>
 
-			<el-form style="clear: both;">
-				<el-form-item style="float: right">
+			<div style="clear: both;"></div>
 
-					<!-- 不在回收站的才可以停用 -->
-					<el-button v-if="!isDetail && parentTabType!=4 && openType != 'create'" :loading="formLoading"
-						type="danger" plain @click="handleStatus02Change(ProductSpuStatusEnum.RECYCLE.status)">
+		</ContentWrap>
+		<template #footer v-if="!isDetail">
+      <div class="dialog-footer">
+        <el-button v-if="!isDetail && parentTabType != 4 && openType != 'create'" :loading="formLoading" type="danger"
+						plain @click="handleStatus02Change(ProductSpuStatusEnum.RECYCLE.status)">
 						停用
 					</el-button>
 					<!-- 在回收站的可以选择恢复或者删除 -->
-					<el-button v-if="!isDetail && parentTabType==4" :loading="formLoading"
-						v-hasPermi="['product:spu:delete']" type="danger" plain @click="handleDelete(productId)">
+					<el-button v-if="!isDetail && parentTabType == 4" :loading="formLoading" v-hasPermi="['product:spu:delete']"
+						type="danger" plain @click="handleDelete(productId)">
 						删除
 					</el-button>
-					<el-button v-if="!isDetail && parentTabType==4" :loading="formLoading"
-						v-hasPermi="['product:spu:update']" type="primary"
-						@click="handleStatus02Change(ProductSpuStatusEnum.DISABLE.status)">
+					<el-button v-if="!isDetail && parentTabType == 4" :loading="formLoading" v-hasPermi="['product:spu:update']"
+						type="primary" @click="handleStatus02Change(ProductSpuStatusEnum.DISABLE.status)">
 						恢复
 					</el-button>
 					<el-button v-if="!isDetail && openType != 'create'" :loading="formLoading" type="primary"
 						@click="handleStatusChange">
-						{{parentRow.status == 0 ?"上架":"下架"}}
+						{{ parentRow.status == 0 ? "上架" : "下架" }}
 					</el-button>
-
 					<el-button v-if="!isDetail" :loading="formLoading" type="primary" @click="submitForm">
 						保存
 					</el-button>
-
-				</el-form-item>
-			</el-form>
-		</ContentWrap>
+      </div>
+    </template>
 	</el-dialog>
 	<!-- </div> -->
 
 </template>
+
 <script lang="ts" setup>
-	import { cloneDeep } from 'lodash-es'
-	import { useTagsViewStore } from '@/store/modules/tagsView'
-	import * as ProductSpuApi from '@/api/mall/product/spu'
-	import InfoForm from './InfoForm.vue'
-	import DescriptionForm from './DescriptionForm.vue'
-	import OtherForm from './OtherForm.vue'
-	import SkuForm from './SkuForm.vue'
-	import DeliveryForm from './DeliveryForm.vue'
-	import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
-	import {
-		Close,
-		FullScreen
-	} from '@element-plus/icons-vue'
-	import { Icon } from '@/components/Icon'
-	import { ProductSpuStatusEnum } from '@/utils/constants'
-	defineOptions({ name: 'ProductSpuForm' })
-
-	const { t } = useI18n() // 国际化
-	const message = useMessage() // 消息弹窗
-	const { push, currentRoute } = useRouter() // 路由
-	const { params, name } = useRoute() // 查询参数
-	const { delView } = useTagsViewStore() // 视图操作
-
-	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-	const activeName = ref('info') // Tag 激活的窗口
-	const isDetail = ref(false) // 是否查看详情
-	const infoRef = ref() // 商品信息 Ref
-	const skuRef = ref() // 商品规格 Ref
-	const deliveryRef = ref() // 物流设置 Ref
-	const descriptionRef = ref() // 商品详情 Ref
-	const otherRef = ref() // 其他设置 Ref
-	// SPU 表单数据
-	const formData = ref<ProductSpuApi.Spu>({
-		name: '', // 商品名称
-		categoryId: undefined, // 商品分类
-		keyword: '', // 关键字
-		picUrl: '', // 商品封面图
-		sliderPicUrls: [], // 商品轮播图
-		introduction: '', // 商品简介
-		deliveryTypes: [], // 配送方式数组
-		deliveryTemplateId: undefined, // 运费模版
-		brandId: undefined, // 商品品牌
-		specType: false, // 商品规格
-		subCommissionType: false, // 分销类型
-		skus: [
-			{
-				price: 0, // 商品价格
-				marketPrice: 0, // 市场价
-				costPrice: 0, // 成本价
-				barCode: '', // 商品条码
-				picUrl: '', // 图片地址
-				stock: 0, // 库存
-				weight: 0, // 商品重量
-				volume: 0, // 商品体积
-				firstBrokeragePrice: 0, // 一级分销的佣金
-				secondBrokeragePrice: 0 // 二级分销的佣金
-			}
-		],
-		description: '', // 商品详情
-		sort: 0, // 商品排序
-		giveIntegral: 0, // 赠送积分
-		virtualSalesCount: 0 // 虚拟销量
-	})
-	const addFormData = ref<ProductSpuApi.Spu>({
-		name: '', // 商品名称
-		categoryId: undefined, // 商品分类
-		keyword: '', // 关键字
-		picUrl: '', // 商品封面图
-		sliderPicUrls: [], // 商品轮播图
-		introduction: '', // 商品简介
-		deliveryTypes: [], // 配送方式数组
-		deliveryTemplateId: undefined, // 运费模版
-		brandId: undefined, // 商品品牌
-		specType: false, // 商品规格
-		subCommissionType: false, // 分销类型
-		skus: [
-			{
-				price: 0, // 商品价格
-				marketPrice: 0, // 市场价
-				costPrice: 0, // 成本价
-				barCode: '', // 商品条码
-				picUrl: '', // 图片地址
-				stock: 0, // 库存
-				weight: 0, // 商品重量
-				volume: 0, // 商品体积
-				firstBrokeragePrice: 0, // 一级分销的佣金
-				secondBrokeragePrice: 0 // 二级分销的佣金
-			}
-		],
-		description: '', // 商品详情
-		sort: 0, // 商品排序
-		giveIntegral: 0, // 赠送积分
-		virtualSalesCount: 0 // 虚拟销量
-	})
-	const dialogVisible = ref(false) // 弹窗的是否展示
-	const dialogTitle = ref('') // 弹窗的标题
-
-	const parentTabType = ref(0)
-	const productId = ref()
-	const picUrl = ref("")
-	const parentRow = ref()
-	const openType = ref("")
-	const parentNewStatus = ref(0)
-	const isFullScreen = ref(false)
-	// const handleError = (e) => {
-	// 	e.target.src = "https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg"
-	// }
-	/** 打开弹窗 */
-	const open = async (type : string, row : any, newStatus : number, tabType : number) => {
-		parentTabType.value = tabType
-		parentRow.value = row
-		parentNewStatus.value = newStatus
-		dialogVisible.value = true
-		productId.value = row.id
-		picUrl.value = row.picUrl
-		isFullScreen.value = false
-		await getDetail()
-		activeName.value = 'info'
-		openType.value = type
-		dialogTitle.value = t('action.' + type)
-		if (type == "view") {
-			dialogTitle.value = "查看"
-		} else if (type == "create") {
-			formData.value = cloneDeep(addFormData.value)
-			// console.log(formData.value)
-			// console.log(addFormData.value)
+import { cloneDeep } from 'lodash-es'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import InfoForm from './InfoForm.vue'
+import DescriptionForm from './DescriptionForm.vue'
+import OtherForm from './OtherForm.vue'
+import SkuForm from './SkuForm.vue'
+import DeliveryForm from './DeliveryForm.vue'
+import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
+import {
+	Close,
+	FullScreen
+} from '@element-plus/icons-vue'
+import { Icon } from '@/components/Icon'
+import { ProductSpuStatusEnum } from '@/utils/constants'
+defineOptions({ name: 'ProductSpuForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { push, currentRoute } = useRouter() // 路由
+const { params, name } = useRoute() // 查询参数
+const { delView } = useTagsViewStore() // 视图操作
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const activeName = ref('info') // Tag 激活的窗口
+const isDetail = ref(false) // 是否查看详情
+const infoRef = ref() // 商品信息 Ref
+const skuRef = ref() // 商品规格 Ref
+const deliveryRef = ref() // 物流设置 Ref
+const descriptionRef = ref() // 商品详情 Ref
+const otherRef = ref() // 其他设置 Ref
+// SPU 表单数据
+const formData = ref<ProductSpuApi.Spu>({
+	name: '', // 商品名称
+	categoryId: undefined, // 商品分类
+	keyword: '', // 关键字
+	picUrl: '', // 商品封面图
+	sliderPicUrls: [], // 商品轮播图
+	introduction: '', // 商品简介
+	deliveryTypes: [], // 配送方式数组
+	deliveryTemplateId: undefined, // 运费模版
+	brandId: undefined, // 商品品牌
+	specType: false, // 商品规格
+	subCommissionType: false, // 分销类型
+	skus: [
+		{
+			price: 0, // 商品价格
+			marketPrice: 0, // 市场价
+			costPrice: 0, // 成本价
+			barCode: '', // 商品条码
+			picUrl: '', // 图片地址
+			stock: 0, // 库存
+			weight: 0, // 商品重量
+			volume: 0, // 商品体积
+			firstBrokeragePrice: 0, // 一级分销的佣金
+			secondBrokeragePrice: 0 // 二级分销的佣金
 		}
-		// 判断打开状态，如果是view那就只能查看 否则可以编辑
-		if ('view' == openType.value) {
-			isDetail.value = true
-		} else {
-			isDetail.value = false
-		}
-	}
-	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-	//全屏/取消全屏弹窗
-	const fullScreen = () => {
-		isFullScreen.value = !isFullScreen.value
-	}
-	/** 获得详情 */
-	const getDetail = async () => {
-		console.log(productId.value)
-		const id = productId.value as any as number
-		if (id) {
-			formLoading.value = true
-			try {
-				const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
-				res.skus?.forEach((item) => {
-					if (isDetail.value) {
-						item.price = floatToFixed2(item.price)
-						item.marketPrice = floatToFixed2(item.marketPrice)
-						item.costPrice = floatToFixed2(item.costPrice)
-						item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice)
-						item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice)
-					} else {
-						// 回显价格分转元
-						item.price = formatToFraction(item.price)
-						item.marketPrice = formatToFraction(item.marketPrice)
-						item.costPrice = formatToFraction(item.costPrice)
-						item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice)
-						item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice)
-					}
-				})
-				formData.value = res
-			} finally {
-				formLoading.value = false
-			}
+	],
+	description: '', // 商品详情
+	sort: 0, // 商品排序
+	giveIntegral: 0, // 赠送积分
+	virtualSalesCount: 0 // 虚拟销量
+})
+const addFormData = ref<ProductSpuApi.Spu>({
+	name: '', // 商品名称
+	categoryId: undefined, // 商品分类
+	keyword: '', // 关键字
+	picUrl: '', // 商品封面图
+	sliderPicUrls: [], // 商品轮播图
+	introduction: '', // 商品简介
+	deliveryTypes: [], // 配送方式数组
+	deliveryTemplateId: undefined, // 运费模版
+	brandId: undefined, // 商品品牌
+	specType: false, // 商品规格
+	subCommissionType: false, // 分销类型
+	skus: [
+		{
+			price: 0, // 商品价格
+			marketPrice: 0, // 市场价
+			costPrice: 0, // 成本价
+			barCode: '', // 商品条码
+			picUrl: '', // 图片地址
+			stock: 0, // 库存
+			weight: 0, // 商品重量
+			volume: 0, // 商品体积
+			firstBrokeragePrice: 0, // 一级分销的佣金
+			secondBrokeragePrice: 0 // 二级分销的佣金
 		}
+	],
+	description: '', // 商品详情
+	sort: 0, // 商品排序
+	giveIntegral: 0, // 赠送积分
+	virtualSalesCount: 0 // 虚拟销量
+})
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+
+const parentTabType = ref(0)
+const productId = ref()
+const picUrl = ref("")
+const parentRow = ref()
+const openType = ref("")
+const parentNewStatus = ref(0)
+const isFullScreen = ref(false)
+// const handleError = (e) => {
+// 	e.target.src = "https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg"
+// }
+/** 打开弹窗 */
+const open = async (type: string, row: any, newStatus: number, tabType: number) => {
+	parentTabType.value = tabType
+	parentRow.value = row
+	parentNewStatus.value = newStatus
+	dialogVisible.value = true
+	productId.value = row.id
+	picUrl.value = row.picUrl
+	isFullScreen.value = false
+	await getDetail()
+	activeName.value = 'info'
+	openType.value = type
+	dialogTitle.value = t('action.' + type)
+	if (type == "view") {
+		dialogTitle.value = "查看"
+	} else if (type == "create") {
+		formData.value = cloneDeep(addFormData.value)
+		// console.log(formData.value)
+		// console.log(addFormData.value)
 	}
-	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-	/** 添加到仓库 / 回收站的状态 */
-	const handleStatus02Change = async (newStatus : number) => {
-		try {
-			// 二次确认
-			const text = newStatus === ProductSpuStatusEnum.RECYCLE.status ? '加入到回收站' : '恢复到仓库'
-			await message.confirm(`确认要"${parentRow.value.name}"${text}吗？`)
-			// 发起修改
-			await ProductSpuApi.updateStatus({ id: parentRow.value.id, status: newStatus })
-			message.success(text + '成功')
-			// 刷新 tabs 数据
-			// await getTabsCount()
-			// 刷新列表
-			close()
-			emit('success')
-		} catch { }
-	}
-	/** 删除按钮操作 */
-	const handleDelete = async (id : number) => {
-		try {
-			// 删除的二次确认
-			await message.delConfirm()
-			// 发起删除
-			await ProductSpuApi.deleteSpu(id)
-			message.success(t('common.delSuccess'))
-			close()
-			emit('success')
-		} catch { }
+	// 判断打开状态，如果是view那就只能查看 否则可以编辑
+	if ('view' == openType.value) {
+		isDetail.value = true
+	} else {
+		isDetail.value = false
 	}
-	/** 更新上架/下架状态 */
-	const handleStatusChange = async () => {
-		console.log(parentRow.value.status)
-		try {
-			// 二次确认
-			const text = !parentRow.value.status ? '上架' : '下架'
-			const updateStatus = !parentRow.value.status ? 1 : 0
-			await message.confirm(`确认要${text}"${parentRow.value.name}"吗？`)
-			// 发起修改
-			await ProductSpuApi.updateStatus({ id: parentRow.value.id, status: updateStatus })
-			message.success(text + '成功')
-			close()
-			emit('success')
-		} catch {
-
-		}
-	}
-	/** 提交按钮 */
-	const submitForm = async () => {
-		// 提交请求
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+//全屏/取消全屏弹窗
+const fullScreen = () => {
+	isFullScreen.value = !isFullScreen.value
+}
+/** 获得详情 */
+const getDetail = async () => {
+	console.log(productId.value)
+	const id = productId.value as any as number
+	if (id) {
 		formLoading.value = true
 		try {
-			// 校验各表单
-			await unref(infoRef)?.validate()
-			await unref(skuRef)?.validate()
-			await unref(deliveryRef)?.validate()
-			await unref(descriptionRef)?.validate()
-			await unref(otherRef)?.validate()
-			// 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
-			const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
-			deepCopyFormData.skus!.forEach((item) => {
-				// 给sku name赋值
-				item.name = deepCopyFormData.name
-				// sku相关价格元转分
-				item.price = convertToInteger(item.price)
-				item.marketPrice = convertToInteger(item.marketPrice)
-				item.costPrice = convertToInteger(item.costPrice)
-				item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice)
-				item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice)
-			})
-			// 处理轮播图列表
-			const newSliderPicUrls : any[] = []
-			deepCopyFormData.sliderPicUrls!.forEach((item : any) => {
-				// 如果是前端选的图
-				typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
+			const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
+			res.skus?.forEach((item) => {
+				if (isDetail.value) {
+					item.price = floatToFixed2(item.price)
+					item.marketPrice = floatToFixed2(item.marketPrice)
+					item.costPrice = floatToFixed2(item.costPrice)
+					item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice)
+					item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice)
+				} else {
+					// 回显价格分转元
+					item.price = formatToFraction(item.price)
+					item.marketPrice = formatToFraction(item.marketPrice)
+					item.costPrice = formatToFraction(item.costPrice)
+					item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice)
+					item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice)
+				}
 			})
-			deepCopyFormData.sliderPicUrls = newSliderPicUrls
-			// 校验都通过后提交表单
-			const data = deepCopyFormData as ProductSpuApi.Spu
-			const id = productId.value as any as number
-			if (!id) {
-				await ProductSpuApi.createSpu(data)
-				message.success(t('common.createSuccess'))
-			} else {
-				await ProductSpuApi.updateSpu(data)
-				message.success(t('common.updateSuccess'))
-			}
-			close()
-			emit('success')
+			formData.value = res
 		} finally {
 			formLoading.value = false
 		}
 	}
+}
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+/** 添加到仓库 / 回收站的状态 */
+const handleStatus02Change = async (newStatus: number) => {
+	try {
+		// 二次确认
+		const text = newStatus === ProductSpuStatusEnum.RECYCLE.status ? '加入到回收站' : '恢复到仓库'
+		await message.confirm(`确认要"${parentRow.value.name}"${text}吗？`)
+		// 发起修改
+		await ProductSpuApi.updateStatus({ id: parentRow.value.id, status: newStatus })
+		message.success(text + '成功')
+		// 刷新 tabs 数据
+		// await getTabsCount()
+		// 刷新列表
+		close()
+		emit('success')
+	} catch { }
+}
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+	try {
+		// 删除的二次确认
+		await message.delConfirm()
+		// 发起删除
+		await ProductSpuApi.deleteSpu(id)
+		message.success(t('common.delSuccess'))
+		close()
+		emit('success')
+	} catch { }
+}
+/** 更新上架/下架状态 */
+const handleStatusChange = async () => {
+	console.log(parentRow.value.status)
+	try {
+		// 二次确认
+		const text = !parentRow.value.status ? '上架' : '下架'
+		const updateStatus = !parentRow.value.status ? 1 : 0
+		await message.confirm(`确认要${text}"${parentRow.value.name}"吗？`)
+		// 发起修改
+		await ProductSpuApi.updateStatus({ id: parentRow.value.id, status: updateStatus })
+		message.success(text + '成功')
+		close()
+		emit('success')
+	} catch {
 
-	/** 关闭按钮 */
-	const close = () => {
-		dialogVisible.value = false
 	}
-</script>
-<style type="text/css">
-	.el-dialog__body {
-		padding: unset;
+}
+/** 提交按钮 */
+const submitForm = async () => {
+	// 提交请求
+	formLoading.value = true
+	try {
+		// 校验各表单
+		await unref(infoRef)?.validate()
+		await unref(skuRef)?.validate()
+		await unref(deliveryRef)?.validate()
+		await unref(descriptionRef)?.validate()
+		await unref(otherRef)?.validate()
+		// 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
+		const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
+		deepCopyFormData.skus!.forEach((item) => {
+			// 给sku name赋值
+			item.name = deepCopyFormData.name
+			// sku相关价格元转分
+			item.price = convertToInteger(item.price)
+			item.marketPrice = convertToInteger(item.marketPrice)
+			item.costPrice = convertToInteger(item.costPrice)
+			item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice)
+			item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice)
+		})
+		// 处理轮播图列表
+		const newSliderPicUrls: any[] = []
+		deepCopyFormData.sliderPicUrls!.forEach((item: any) => {
+			// 如果是前端选的图
+			typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
+		})
+		deepCopyFormData.sliderPicUrls = newSliderPicUrls
+		// 校验都通过后提交表单
+		const data = deepCopyFormData as ProductSpuApi.Spu
+		const id = productId.value as any as number
+		if (!id) {
+			await ProductSpuApi.createSpu(data)
+			message.success(t('common.createSuccess'))
+		} else {
+			await ProductSpuApi.updateSpu(data)
+			message.success(t('common.updateSuccess'))
+		}
+		close()
+		emit('success')
+	} finally {
+		formLoading.value = false
 	}
+}
 
-	.dialog .el-card__body {
-		padding: 0 20px 20px 0;
-	}
+/** 关闭按钮 */
+const close = () => {
+	dialogVisible.value = false
+}
+</script>
 
-	.dialog .el-dialog__headerbtn {
-		top: 0px;
-		line-height: 60px;
-	}
+<style type="text/css">
+.el-dialog__body {
+	padding: unset;
+}
+
+.dialog .el-card__body {
+	padding: 0 20px 20px 0;
+}
+
+.dialog .el-dialog__headerbtn {
+	top: 0px;
+	line-height: 60px;
+}
+
+.dialog .el-dialog__headerbtn:hover {
+	background-color: #ef6b6b;
+}
+
+.dialog .el-dialog__headerbtn:hover .el-dialog__close {
+	color: #fff;
+}
+
+.dialog .el-dialog__header {
+	padding: 0;
+	margin: 0
+}
+</style>
 
-	.dialog .el-dialog__headerbtn:hover {
-		background-color: #ef6b6b;
+<style lang="scss" scoped>
+::v-deep .left {
+	width: 106px;
+	float: left;
+
+	img {
+		// width: 98%;
+		// border-bottom: 2px solid #e4e7ee;
+		// border-right: 2px solid #e4e7ee;
+		// margin-bottom: -5px;
 	}
+}
 
-	.dialog .el-dialog__headerbtn:hover .el-dialog__close {
-		color: #fff;
-	}
+.child-tabs {
+	border-top: 2px solid #e4e7ef;
+	margin-top: -7px;
+}
 
-	.dialog .el-dialog__header {
-		padding: 0;
-		margin: 0
-	}
-</style>
-<style lang="scss" scoped>
-	::v-deep .left {
-		width: 106px;
-		float: left;
-
-		img {
-			// width: 98%;
-			// border-bottom: 2px solid #e4e7ee;
-			// border-right: 2px solid #e4e7ee;
-			// margin-bottom: -5px;
-		}
-	}
+::v-deep .child-tabs .is-active {
+	// border-left: 2px solid;
+}
 
-	.child-tabs {
-		border-top: 2px solid #e4e7ef;
-		margin-top: -7px;
-	}
+::v-deep .child-tabs .el-tabs__active-bar {
+	// background-color: #30fdff;
+	// background-color: unset;
+}
 
-	::v-deep .child-tabs .is-active {
-		// border-left: 2px solid;
-	}
+::v-deep .child-tabs .el-tabs__item {
+	width: 106px;
+	justify-content: center;
+}
 
-	::v-deep .child-tabs .el-tabs__active-bar {
-		// background-color: #30fdff;
-		// background-color: unset;
-	}
+::v-deep .child-tabs .el-tabs__item {}
 
-	::v-deep .child-tabs .el-tabs__item {
-		width: 106px;
-		justify-content: center;
-	}
+.right {
+	padding: 10px 0 60px;
+	border-left: 2px solid #e4e7ee;
+	margin-left: -2px;
+	float: left;
+	width: calc(100% - 120px);
+}
 
-	::v-deep .child-tabs .el-tabs__item {}
 
-	.right {
-		padding: 10px 0 60px;
-		border-left: 2px solid #e4e7ee;
-		margin-left: -2px;
-		float: left;
-		width: calc(100% - 120px);
-	}
 
+.my-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 
+	&-left {
+		font-weight: bold;
+		font-size: 18px;
+		padding: 20px;
+		padding-bottom: 10px
+	}
 
-	.my-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+	&-right {
+		span {
+			width: 55px;
+			height: 55px;
+			display: inline-block;
+			line-height: 55px;
+			text-align: center;
+			cursor: pointer;
+		}
 
-		&-left {
-			font-weight: bold;
-			font-size: 18px;
-			padding: 20px;
-			padding-bottom: 10px
+		span:first-child:hover {
+			background-color: #f6f6f6;
+			// color: white
 		}
 
-		&-right {
-			span {
-				width: 55px;
-				height: 55px;
-				display: inline-block;
-				line-height: 55px;
-				text-align: center;
-				cursor: pointer;
-			}
-
-			span:first-child:hover {
-				background-color: #f6f6f6;
-				// color: white
-			}
-
-			span:last-child:hover {
-				background-color: #ef6b6b;
-				color: white
-			}
+		span:last-child:hover {
+			background-color: #ef6b6b;
+			color: white
 		}
 	}
+}
 </style>

src/views/mall/product/spu/index.vue

@@ -2,14 +2,14 @@
 
 <template>
 	<!-- 列表 -->
-	<ContentWrap style="" class="spu-div">
-		<div class="search" style="display: flex;justify-content: space-between;align-items: center;padding: 0 10px;">
-			<el-tabs v-model="queryParams.tabType" @tab-click="handleTabClick" class="parent-tabs">
+	<ContentWrap style="" class="container">
+		<div class="search">
+			<el-tabs v-model="queryParams.tabType" @tab-click="handleTabClick" class="parent-tabs" v-if="!mobile">
 				<el-tab-pane v-for="item in tabsData" :key="item.type" :label="item.name + '(' + item.count + ')'"
 					:name="item.type" />
 			</el-tabs>
-			<div style="text-align: right;">
-				<el-input v-model="queryParams.name" class="!w-240px" placeholder="搜索商品名称" @keyup.enter="handleQuery">
+			<div style="text-align: right;" class="search-input">
+				<el-input v-model="queryParams.name" placeholder="搜索商品名称" @keyup.enter="handleQuery" class="!w-240px">
 					<template #suffix>
 						<el-icon class="el-input__icon" @click="handleQuery" style="cursor: pointer;">
 							<Search />
@@ -20,29 +20,32 @@
 						<el-button :icon="Operation" @click="showSearchMore" />
 					</template>
 				</el-input>
-				&nbsp;
 
-				<el-button v-hasPermi="['product:spu:create']" @click="openForm('create', '', 0)" v-if="!mobile">
-					<Icon class="mr-5px" icon="ep:plus" />
+				<el-button v-hasPermi="['product:spu:create']" @click="openForm('create', '', 0)" class="ml-5px" v-if="!mobile">
+					<Icon class="mr-5px " icon="ep:plus" />
 					新增
 				</el-button>
 			</div>
 		</div>
-		<div class="searchMore" v-if="searchMoreShow">
+		<div class="searchMore" v-show="searchMoreShow">
 			<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
-				<div>
-					<el-form-item label="商品分类" prop="categoryId">
-						<el-cascader v-model="queryParams.categoryId" :options="categoryList" :props="defaultProps" class="w-1/1"
-							clearable filterable placeholder="请选择商品分类" />
-					</el-form-item>
-					<el-form-item label="创建时间" prop="createTime">
-						<el-date-picker style="margin-right: unset;" v-model="queryParams.createTime"
-							:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" end-placeholder="结束日期"
-							start-placeholder="开始日期" type="daterange" value-format="YYYY-MM-DD HH:mm:ss" />
-					</el-form-item>
-				</div>
+				<el-form-item label="商品分类" prop="categoryId">
+					<el-cascader v-model="queryParams.categoryId" :options="categoryList" :props="defaultProps" 
+						clearable filterable placeholder="请选择商品分类" />
+				</el-form-item>
+				<el-form-item label="商品状态" prop="">
+					<el-select v-model="queryParams.tabType" placeholder="全部">
+						<el-option v-for="dict in tabsData" :key="dict.type" :label="dict.name" :value="dict.type" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="创建时间" prop="createTime">
+					<el-date-picker style="margin-right: unset;width:auto !important" v-model="queryParams.createTime"
+						:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" end-placeholder="结束日期"
+						start-placeholder="开始日期" type="daterange" value-format="YYYY-MM-DD HH:mm:ss" />
+				</el-form-item>
 				<el-row>
 					<el-col>
+						<el-form-item>
 						<el-button @click="hideSearchMore">
 							收起
 						</el-button>
@@ -53,21 +56,16 @@
 							<Icon class="mr-5px" icon="ep:search" />
 							搜索
 						</el-button>
+					</el-form-item>
 					</el-col>
 				</el-row>
-				<!-- <el-button v-hasPermi="['product:spu:export']" :loading="exportLoading" plain type="success"
-								@click="handleExport">
-								<Icon class="mr-5px" icon="ep:download" />
-								导出
-							</el-button> -->
-
 			</el-form>
 		</div>
 
 
 		<el-row>
-			<el-col v-for="(o, index) in list" class="card" :key="index" :span="7" :xl="7" :lg="7" :md="7" :sm="24"
-				:xs="24" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
+			<el-col v-for="(o, index) in list" class="card" :key="index" :span="7" :xl="7" :lg="7" :md="7" :sm="24" :xs="24"
+				@mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
 				<el-card @click="openDetail('view', o, ProductSpuStatusEnum.RECYCLE.status, queryParams.tabType)">
 					<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
 						<p style="width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color:#000"
@@ -170,7 +168,7 @@ const tabsData = ref([
 const queryParams = ref({
 	pageNo: 1,
 	pageSize: 10,
-	tabType: 0,
+	tabType: undefined,
 	name: '',
 	categoryId: undefined,
 	createTime: undefined
@@ -220,7 +218,7 @@ const getList = async () => {
 
 /** 切换 Tab */
 const handleTabClick = (tab: TabsPaneContext) => {
-	queryParams.value.tabType = tab.paneName as number
+	queryParams.value.tabType = tab.paneName
 	getList()
 }
 
@@ -302,7 +300,8 @@ const resetQuery = () => {
 	queryParams.value.categoryId = undefined
 	queryParams.value.createTime = undefined
 	queryParams.value.name = ""
-	// queryFormRef.value.resetFields()
+	// q
+	queryParams.value.tabType = undefined
 	// console.log(queryParams.value)
 	// console.log(queryFormRef.value)
 	handleQuery()
@@ -356,94 +355,4 @@ onMounted(async () => {
 })
 </script>
 
-<style lang="scss" scoped>
-.spu-div {
-	position: relative;
-	min-height: 400px;
-	border: none;
-}
-
-::v-deep .el-card__body {
-	padding: 0;
-}
-
-::v-deep .parent-tabs .el-tabs__nav-wrap::after {
-	position: static !important;
-}
-
-::v-deep .el-tabs__header {
-	margin: 0;
-}
-
-::v-deep .parent-tabs .el-tabs__active-bar {
-
-	background-color: unset;
-}
-
-.searchMore {
-	text-align: left;
-	background: #f3f5f8;
-	padding: 10px;
-	position: absolute;
-	height: 100px;
-	width: calc(100% - 20px);
-	z-index: 111;
-	box-shadow: 0px 9px 6px rgba(0, 0, 0, 0.2);
-
-	.el-row {
-		text-align: right;
-	}
-
-}
-
-
-
-.card {
-
-	font-size: 14px;
-	margin: 10px;
-
-	.el-card {
-		padding: 15px;
-		cursor: pointer;
-		position: relative;
-
-		:deep(.el-card__body) {
-			padding: unset;
-		}
-	}
-
-	.setting {
-		width: 30px;
-		top: 0px;
-		right: 0px;
-		position: absolute;
-		height: 30px;
-		line-height: 30px;
-		text-align: center;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.setting:hover {
-		background: #666
-	}
-
-	p,
-	div {
-		margin: unset;
-		padding: unset;
-	}
-}
-
-.spu-table-expand {
-	padding-left: 42px;
-
-	:deep(.el-form-item__label) {
-		width: 82px;
-		font-weight: bold;
-		color: #99a9bf;
-	}
-}
-</style>
+<style src="@/views/SearchIndex.css"  lang="scss" scoped></style>

src/views/mall/trade/order/components/OrderBaseInfo.vue

@@ -130,7 +130,7 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="支付时间" prop="keyword">
-          {{ formData.payTime }}
+          {{ formData.payTime && formatDate(formData.payTime) }}
         </el-form-item>
       </el-col>
     </el-row>

src/views/mall/trade/order/components/OrderComponents.css

@@ -31,7 +31,7 @@
   padding-top: .5rem;
 }
 .el-descriptions {
-  margin-top: 30px;
+  /* margin-top: 30px; */
   overflow-x: auto;
 }
 

src/views/mall/trade/order/components/OrderProduct.vue

@@ -51,6 +51,8 @@
     </el-row>
   </el-form>
 
+  <p v-if="mobile" style="margin-bottom: 5px;font-weight: bold;color: #909399;font-size: 16px;text-indent:15px">商品列表</p>
+  <p v-else style="margin-bottom: 5px;font-weight: bold;color: #909399;font-size: 16px;">商品列表</p>
   <!-- 如果是移动端的话 换成移动端的样式来显示 -->
   <div v-if="mobile">
     <el-form ref="formRef" :model="formData" label-width="120px" :border="true" class="mobile-elform"  v-for="item in formData.items" :key="item.id">
@@ -107,6 +109,7 @@
     </el-form>
   </div>
   <!-- 如果是pc端直接显示描述框 -->
+
   <el-descriptions width="100" v-else>
     <el-descriptions-item labelClassName="no-colon">
       <el-row width="100%">

src/views/mall/trade/order/index.vue

@@ -1,13 +1,13 @@
 <template>
-	<ContentWrap class="order-div">
+	<ContentWrap class="container">
 		<!-- 搜索 -->
 		<div class="search">
-			<el-tabs v-model="queryParams.status" @tab-click="handleTabClick" class="parent-tabs">
+			<el-tabs v-model="queryParams.status" @tab-click="handleTabClick" class="parent-tabs" v-if="!mobile">
 				<el-tab-pane v-for="item in tabsData" :key="item.type" :label="item.name + '(' + item.count + ')'"
 					:name="item.type" />
 			</el-tabs>
-			<div style="text-align: right;">
-				<el-input v-model="queryParams['userNickname']" class="!w-240px" placeholder="搜索客户名称"
+			<div style="text-align: right;" class="search-input">
+				<el-input v-model="queryParams['userNickname']" placeholder="搜索客户名称"
 					@keyup.enter="handleQuery">
 					<template #suffix>
 						<Icon class="mr-5px" icon="ep:search" @click="handleQuery" style="cursor: pointer;" />
@@ -106,7 +106,7 @@
 			</el-form>
 		</div>
 		<el-row>
-			<el-col v-for="(o, index) in list" class="product-card" :key="index" :span="7" :xl="7" :lg="7" :md="24" :sm="24"
+			<el-col v-for="(o, index) in list" class="card" :key="index" :span="7" :xl="7" :lg="7" :md="24" :sm="24"
 				:xs="24" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
 				<el-card @click="openDetail('view', o, o.no)">
 					<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
@@ -247,7 +247,7 @@ const queryFormRef = ref<FormInstance>() // 搜索的表单
 const queryParams = ref({
 	pageNo: 1, // 页数
 	pageSize: 10, // 每页显示数量
-	status: 0, // 订单状态
+	status: undefined, // 订单状态
 	payChannelCode: undefined, // 支付方式
 	createTime: undefined, // 创建时间
 	terminal: undefined, // 订单来源
@@ -412,128 +412,4 @@ onMounted(async () => {
 })
 
 </script>
-
-<style lang="scss" scoped>
-//当屏幕最大宽度为768时，走这套样式
-@media screen and (max-width: 768px) {
-	.year {
-		display: none;
-	}
-
-	.product-card {
-		margin: 10px 0 !important;
-		
-	}
-
-	::v-deep(.el-pagination__sizes),
-	::v-deep(.el-pagination__jump) {
-		display: none;
-	}
-
-	.search {
-		flex-direction: column;
-	}
-
-	::v-deep(.el-tabs__item) {
-		padding: 0 4px;
-	}
-
-	.order-div {
-		min-height: 100vh !important;
-	}
-}
-
-.search {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0px 10px;
-}
-
-.order-div {
-	position: relative;
-	min-height: 400px;
-	border: none;
-}
-
-
-::v-deep .parent-tabs .el-tabs__nav-wrap::after {
-	position: static !important;
-
-}
-
-::v-deep .el-card__body {
-	padding: 0;
-}
-
-::v-deep .parent-tabs .el-tabs__active-bar {
-
-	background-color: unset;
-}
-
-.searchMore {
-	text-align: left;
-	background: #f3f5f8;
-	padding: 10px;
-	position: absolute;
-	// height: 100px;
-	width: calc(100% - 20px);
-	z-index: 111;
-	box-shadow: 0px 9px 6px rgba(0, 0, 0, 0.2);
-
-	.el-row {
-		text-align: right;
-	}
-}
-
-::v-deep .el-tabs__header {
-	margin: 0;
-}
-
-.product-card {
-
-	font-size: 14px;
-	margin: 10px;
-
-	.el-card {
-		padding: 15px;
-		cursor: pointer;
-		position: relative;
-
-		:deep(.el-card__body) {
-			padding: unset;
-		}
-	}
-
-	.setting {
-		width: 30px;
-		top: 0px;
-		right: 0px;
-		position: absolute;
-		height: 30px;
-		line-height: 30px;
-		text-align: center;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.setting :focus-visible {
-		outline: 0;
-	}
-
-	.setting:focus-visible {
-		font-size: 20px;
-	}
-
-	.setting:hover {
-		background: #666
-	}
-
-	p,
-	div {
-		margin: unset;
-		padding: unset;
-	}
-}
-</style>
+<style src="@/views/SearchIndex.css"  lang="scss" scoped> </style>

src/views/system/sale/merchant/components/MerchantBaseInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="overflow-auto"
+  <el-form ref="formRef" :model="formData" :class="{'view':isDetail}" :rules="formRules" label-width="120px" class="overflow-auto"
     v-loading="formLoading" :disabled="isDetail">
     <el-row>
       <el-col :span="12">
@@ -63,27 +63,57 @@
         </el-form-item>
       </el-col>
     </el-row>
-    <el-row>
+    <!-- {{ mobile }} -->
+    <div v-if="mobile">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="营业执照" prop="businessLicensePicture" />
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item prop="businessLicensePicture" class="businessLicensePicture">
+            <UploadImg v-model="formData.businessLicensePicture" :limit="1" :disabled="isDetail" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="简介" prop="description" />
+        </el-col>
+      </el-row>
       <el-col :span="24">
-        <el-form-item label="营业执照" prop="businessLicensePicture">
-          <UploadImg v-model="formData.businessLicensePicture" :limit="1"  :disabled="isDetail" />
+        <el-form-item prop="description" class="description">
+          <div v-html="formData.description"></div>
         </el-form-item>
       </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="24">
-        <el-form-item label="简介" prop="description">
-          <Editor v-model="formData.description" height="150px" :disabled="isDetail" />
-        </el-form-item>
-      </el-col>
-    </el-row>
+    </div>
+    <div v-else>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="营业执照" prop="businessLicensePicture">
+            <UploadImg v-model="formData.businessLicensePicture" :limit="1" :disabled="isDetail" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="简介" prop="description">
+            <Editor v-model="formData.description" height="150px" :disabled="isDetail" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
   </el-form>
 </template>
 
 <script setup lang="ts">
 import { MerchantApi, MerchantVO } from '@/api/system/sale/merchant'
 import { copyValueToTarget } from '@/utils'
-
+// 从路由中引入store中的app仓库
+import { useAppStore } from '@/store/modules/app'
+const appStore = useAppStore()
+const mobile = computed(() => appStore.getMobile)
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -128,7 +158,7 @@ const props = defineProps({
   },
   "openType": {
     type: String,
-    default: "create"
+    default: "查看"
   },
   propFormData: {
     type: Object,
@@ -165,18 +195,16 @@ const validate = async () => {
   }
 }
 defineExpose({ validate })
-
-const updateParentData = inject('updateParentData');
-const updateData = () => {
-  updateParentData(formData);
-};
+const updateInitialData = inject('updateInitialData');
 
 watch(formData, (data) => {
-  try { updateData() }catch{
-    console.log("chakan ")
-  }
 
-  
+  copyValueToTarget(updateInitialData.value, formData)
+  // try { updateData() } catch {
+  //   console.log("chakan ")
+  // }
+
+
 },
   {
     immediate: true
@@ -197,4 +225,5 @@ watch(formData, (data) => {
 //   }
 // })
 </script>
-<style src="./MerchantComponents.css"  lang="scss" scoped></style>
+
+<style src="./MerchantComponents.css"  lang="scss" scoped></style>

src/views/system/sale/merchant/components/MerchantComponents.css

@@ -1,3 +1,8 @@
+/* 如果是查看状态隐藏星号 */
+.view ::v-deep .el-form-item__label::before {
+  display: none;
+}
+
 .el-row {
   border: 1px solid #ebeef5
 }
@@ -41,4 +46,17 @@
   bottom: 0;
   left: 11px;
   font-size: 10px;
-}
+}
+
+@media screen and (max-width: 768px) {
+  .businessLicensePicture ::v-deep .el-form-item__content{
+    margin: 0 !important;
+    div{
+      margin: 0 auto;
+    }
+  }
+  .description ::v-deep .el-form-item__content{
+    margin: 0 !important;
+  }
+}
+

src/views/system/sale/merchant/index.vue

@@ -88,12 +88,12 @@
           <div style="display:flex;align-items: center;">
             <div
               style="width: 151px;height: 85px;margin-right:10px;border:1px solid rgb(220 223 231);border-radius: 5px;display: flex;align-items: center;justify-content: center;">
-              <img :src="o.picUrl" style="width: auto;height: auto;max-width: 100%;max-height: 100%;" />
+              <img :src="o.logoUrl" style="width: auto;height: auto;max-width: 100%;max-height: 100%;" />
             </div>
-            <div style='line-height: 30px;'>
+            <div style='line-height: 30px;width: calc(100% - 170px);'>
               <p>销量:1444</p>
               <p>商品数量:34</p>
-              <p>所在地:{{ o.address }}</p>
+              <p style="white-space: nowrap;text-overflow: ellipsis;width: 100%;overflow: hidden;" :title="o.address">所在地:{{ o.address }}</p>
             </div>
           </div>
         </el-card>
@@ -142,7 +142,6 @@ const tabs = ref([
   { name: 'Employee', label: '人员', component: 'views/system/sale/merchant/components/MerchantEmployee' },
 ]);
 const initialData = ref({
-  logo: undefined,
   id: undefined,
   name: undefined,
   status: undefined,
@@ -155,13 +154,15 @@ const initialData = ref({
   customerServiceHotline: undefined,
   email: undefined,
   businessLicensePicture: undefined,
-  expireTime: undefined
+  expireTime: undefined,
+  logoUrl: undefined,
 });
 const addData = JSON.parse(JSON.stringify(initialData.value));
-const updateParentData = (newData) => {
-  initialData.value = newData;
-};
-provide('updateParentData', updateParentData);
+
+
+provide('updateInitialData', initialData);
+
+
 
 // 定义按钮和对应的方法
 const buttonActions = ref([
@@ -182,9 +183,9 @@ const buttonActions = ref([
   // 可以根据需要添加更多按钮和方法
 ]);
 
-// 定义保存数据的方法
+//保存数据
 async function saveData() {
-  console.log('保存数据', initialData.value);
+  console.log('保存数据的时候的数据', initialData.value);
   // 实现数据保存的逻辑
   // 提交请求
   try {
@@ -202,7 +203,7 @@ async function saveData() {
     getList()
   }
 }
-// 定义删除数据的方法
+//删除
 function deleteData() {
   // 调用删除
   handleDelete(initialData.value.id)
@@ -216,31 +217,27 @@ const dialogTitle = ref("")
 const isDetail = ref(false);
 const openType = ref("")
 async function showDialog(opentype: string, row: object) {
-
-  
   // 如果有row的话就是view或者edit
   openType.value = opentype;
   if (row != null) {
     // 如果row不为null则证明是有数据，即是说是编辑或者查看状态
     // 获取通过id查到数据再传给子组件
     initialData.value = await MerchantApi.getMerchant(row.id);
-
+    // console.log(initialData.value)
     // 如果是移动端，则进入移动端的页面
-    console.log("ismobile?", mobile.value)
     if (mobile.value) {
       push({
         name: 'MobileDetail', query: {
           tabs: JSON.stringify(tabs.value),
           initialComponent: initialComponent.value,
           id: row.id,
-          initialData: JSON.stringify(initialData.value)
+          initialData: JSON.stringify(initialData.value),
+          opentype: opentype
         }
       })
       return
     }
     if (opentype == "查看") {
-      console.log("查看")
-
       isDetail.value = true
     } else {
       isDetail.value = false