zfire-newmall-admin/src/views/mallManagement/goods/goodsWarehouse/detail.vue

<template>
	<template-page v-if="isShowTab" ref="pageRef" :get-list="getList"
		:table-attributes="tableAttributes" :table-events="tableEvents" :options-evens-group="optionsEvensGroup"
		:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation":operationColumnWidth="80">
		<div class="footer">
			<el-button size="mini" @click="cancel()">取消</el-button>
			<el-button size="mini" @click="formConfirm()" type="primary">确定</el-button>
		</div>
		<!-- 选择商品 -->
		<el-dialog title="商品详情" :visible.sync="isShowDetail" width="90%" :close-on-click-modal="false" :modal-append-to-body="false" :append-to-body="true">
			<div style="max-height: 600px;overflow-y: auto;">
				<el-form ref="formRef" :rules="rules" :model="formData" label-width="110px" size="small" label-position="left">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>基础信息</span>
						</div>
						<div class="mymain-container">
							<el-row :gutter="20" justify="start">
								<el-col :span="24">
									<el-form-item label="商品可选状态" prop="status" :required="true">
										<div class="flex_ac">
											<el-radio-group v-model="formData.status">
											    <el-radio disabled :label="true">开启</el-radio>
											    <el-radio disabled :label="false">关闭</el-radio>
											</el-radio-group>
											<div class="hui" style="margin-left: 80px;">开启状态，商户可选择本商品；关闭则不允许商户选择；</div>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="品牌" prop="brandName" :rules="[{ required: true, message: `请输入品牌`, trigger: 'blur' }]">
										<el-input type="text" v-model="formData.brandName" disabled placeholder="请输入"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="是否虚拟商品" prop="isVr" :required="true">
										<el-radio-group v-model="formData.isVr">
										    <el-radio disabled :label="true">是</el-radio>
										    <el-radio disabled :label="false">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="商品大类" prop="category1" :rules="[{ required: true, message: `请输入商品大类`, trigger: 'blur' }]">
										<el-input type="text" v-model="formData.category1" disabled placeholder="请输入"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="商品小类" prop="category2" :rules="[{ required: true, message: `请输入商品小类`, trigger: 'blur' }]">
										<el-input type="text" v-model="formData.category2" disabled placeholder="请输入"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="商品名称" prop="goodsName" :rules="[{ required: true, message: `请输入商品名称`, trigger: 'blur' }]">
										<el-input type="textarea" :rows="3" v-model="formData.goodsName" disabled placeholder="请输入"></el-input>
										<div class="hui">商品名称将显示在商品详情，让用户更直接了解商品内涵</div>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="商品描述" prop="describeText">
										<el-input type="textarea" :rows="3" v-model="formData.describeText" disabled placeholder="请输入"></el-input>
										<div class="hui">商品描述将显示在商品详情，让用户更了解商品细节</div>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="商品主图" prop="imgUrl" :rules="[{ required: true, message: `请上传商品主图`, trigger: 'change' }]">
										<ImageUpload :fileList="formData.imgUrl" :limit="1" :isEdit="false" :fileType="['image']"/>
										<div class="suggest">建议尺寸800*800</div>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="商品视频" prop="vedio">
										<ImageUpload :fileList="formData.vedio" :limit="1" :isEdit="false" :fileType="['video']"/>
										<div class="suggest">建议视频宽高比16:9，建议时长9-30秒</div>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="轮播图" prop="imgs" :rules="[{ required: true, message: `请上传轮播图`, trigger: 'change' }]">
										<ImageUpload :fileList="formData.imgs" :limit="6" :isEdit="false" :fileType="['image']"/>
										<div class="suggest">建议尺寸800*800，最多上传6张</div>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-card>
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>价格库存</span>
						</div>
						<div class="mymain-container">
							<el-row :gutter="20" justify="start">
								<el-col :span="24">
									<el-form-item label="规格类型" prop="goodsLibrarySpecList" class="is-required">
									</el-form-item>
								</el-col>
								<el-table :data="formData.goodsLibrarySpecList" element-loading-text="Loading" border fit highlight-current-row stripe>
									<el-table-column prop="" align="center" label="*大类">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.mainName'" :rules="[{ required: true, message: `请输入大类`, trigger: 'blur' }]" label-width="0">
												<el-input type="text" v-model="scope.row.mainName" disabled placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="*小类">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.smallName'" :rules="[{ required: true, message: `请输入小类`, trigger: 'blur' }]" label-width="0">
												<el-input type="text" v-model="scope.row.smallName" disabled placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="*规格型号">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.specValue'" :rules="[{ required: true, message: `请输入规格型号`, trigger: 'blur' }]" label-width="0">
												<el-input type="text" v-model="scope.row.specValue" disabled placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="*参考销售价格">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.price'" :rules="[{ required: true, message: `请输入参考销售价格`, trigger: 'blur' },{ pattern:/^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g, message: '请输入大于等于0的数', trigger: 'blur' }]" label-width="0">
												<el-input type="number" v-model="scope.row.price" disabled placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="*参考划线价格">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.orgPrice'" :rules="[{ required: true, message: `请输入参考划线价格`, trigger: 'blur' },{ pattern:/^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g, message: '请输入大于等于0的数', trigger: 'blur' }]" label-width="0">
												<el-input type="number" v-model="scope.row.orgPrice" disabled placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="*参考成本价">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.costPrice'" :rules="[{ required: true, message: `请输入参考成本价`, trigger: 'blur' },{ pattern:/^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g, message: '请输入大于等于0的数', trigger: 'blur' }]" label-width="0">
												<el-input type="number" v-model="scope.row.costPrice" disabled placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="*参考佣金">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.shareAmount'" :rules="[{ required: true, message: `请输入参考佣金`, trigger: 'blur' },{ pattern:/^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g, message: '请输入大于等于0的数', trigger: 'blur' }]" label-width="0">
												<el-input type="number" v-model="scope.row.shareAmount" disabled placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="*参考内部佣金">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.innerShareAmount'" :rules="[{ required: true, message: `请输入参考内部佣金`, trigger: 'blur' },{ pattern:/^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g, message: '请输入大于等于0的数', trigger: 'blur' }]" label-width="0">
												<el-input type="number" v-model="scope.row.innerShareAmount" disabled placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="*参考规格图片">
										<template slot-scope="scope">
											<el-form-item :prop="'goodsLibrarySpecList.' + scope.$index + '.imgUrl'" :rules="[{ required: true, message: `请上传参考规格图片`, trigger: 'change' }]" label-width="0">
												<div class="flex_ac">
													<ImageUpload :fileList="scope.row.imgUrl" :limit="1" :download="false" :viewOnline="false" :isEdit="false" modType="text" :fileType="['image']"/>
												</div>
											</el-form-item>
										</template>
									</el-table-column>
								</el-table>
							</el-row>
						</div>
					</el-card>
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>详情内容</span>
						</div>
						<div class="mymain-container">
							<el-row :gutter="20" justify="start">
								<el-form-item label="详情内容" prop="content" :rules="[{ required: true, message: `请输入详情内容`, trigger: 'change' }]">
									<quillEditor v-model="formData.content"></quillEditor>
									<input type="hidden" v-model="formData.content">
								</el-form-item>
							</el-row>
						</div>
					</el-card>
				</el-form>
			</div>
			<div class="footer">
				<el-button size="mini" @click="isShowDetail = false">返回</el-button>
			</div>
		</el-dialog>
	</template-page>
</template>

<script>
	import TemplatePage from '@/components/template/template-page-1.vue'
	import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
	import { listPageV2, pageExport, save, del, getDetail, batch, sync } from "@/api/goodsWarehouse";
	import operation_mixin from '@/components/template/operation_mixin.js'
	import ImageUpload from '@/components/file-upload'
	import quillEditor from '@/components/v-quill-editor'
	export default {
		components: {
			TemplatePage,ImageUpload,quillEditor
		},
		mixins: [operation_mixin],
		props: ['isSelectShop'],
		data() {
			return {
				// 表格属性
				tableAttributes: {
					// 启用勾选列
					selectColumn: true,
					selectable: this.selectable
				},
				// 表格事件
				tableEvents: {
					'selection-change': this.selectionChange
				},
				// 勾选选中行
				recordSelected: [],
				/** 表单变量 */
				formDialogType: 0,
				formDialogTitles: ["新增", "编辑"],
				formDialog: false,
				formData: {
					status: true,
					brandName: '',
					category1: '',
					category2: '',
					isVr: true,
					goodsName: '',
					describeText: '',
					imgUrl: [],
					vedio: [],
					imgs: [],
					content: '',
					goodsLibrarySpecList: []
				},
				rules: {},
				status: '',
				formType: 'add',
				formVisible: false,
				stepIndex: 1,
				isEdit: 0,
				editSpecImageIdx: 0,
				isShowTab: true,
				isShowDetail: false
			}
		},
		watch: {
			isSelectShop(){
				this.isShowTab = false
				this.recordSelected = []
				this.$nextTick(()=>{
					this.isShowTab = true
				})
			}
		},
		computed: {
			// 事件组合
			optionsEvensGroup() {
				return [
					
				]
			},
			// 更多参数
			moreParameters() {
				return []
			},
			formItems() {
				return []
			}
		},
		methods: {
			// 列表请求函数
			getList(p, cb) {
				try {
					var pam = JSON.parse(JSON.stringify(p))
					pam.params.push({ 'param': 'a.status', "compare": "=", "value": this.status })
					cb && cb(pam)
					return listPageV2(pam)
				} catch (error) {
					console.log(error)
				}
			},
			// 列表导出函数
			exportList: pageExport,
			changeType(){
				this.$refs.pageRef.refreshList()
			},
			selectable(row){
				return this.recordSelected.length ? !!this.recordSelected.find(item=>item.goodsLibraryId==row.goodsLibraryId) : true
			},
			// 表格列解析渲染数据更改
			columnParsing(item, defaultData) {
				if (item.jname === 'imgUrl') {
					defaultData.render = (h, { row, index, column }) => {
						return (
							<div style="padding:6px;cursor: pointer;">
							  {row.imgUrl ? row.imgUrl.split(",").map(url => <el-image src={url} preview-src-list={[url]} fit="fit" style="width:60px;height:60px;" />) : null}
							</div>
						)
					}
				}
				return defaultData
			},
			// 监听勾选变化
			selectionChange(data) {
				this.recordSelected = data
			},
			// 表格操作列
			operation(h, { row, index, column }) {
			  return (
			    <div class='operation-btns'>
			      <el-button type="text" onClick={() => {
			        this.isShowDetail = true
					getDetail({
						goodsLibraryId: row.goodsLibraryId
					}).then(res => {
						let imgs = []
						let goodsLibrarySpecList = []
						res.data.imgs.split(",").forEach(item=>{
							imgs.push({
								url: item
							})
						})
						res.data.goodsLibrarySpecList.forEach(item=>{
							goodsLibrarySpecList.push({
								...item,
								imgUrl: item.imgUrl?[{url: item.imgUrl}]:[]
							})
						})
						Object.assign(this.formData, res.data,{
							imgUrl: res.data.imgUrl?[{url: res.data.imgUrl}]:[],
							imgs: res.data.imgs?imgs:[],
							vedio: res.data.vedio?[{url: res.data.vedio}]:[],
							goodsLibrarySpecList
						})
						console.log(this.formData,imgs)
					})
			      }}>查看详情</el-button>
			    </div>
			  )
			},
			formCancel() {
				this.formVisible = false
				this.$refs?.formRef?.resetFields()
				this.$data.formData = this.$options.data().formData
			},
			formConfirm() {
				if (this.recordSelected.length == 0) {
					return this.$message.warning('请至少勾选一条数据！');
				}
				this.$emit('selectShop',this.recordSelected[0].goodsLibraryId)
			},
			cancel(){
				this.$emit('selectShop')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 20px;
		padding-bottom: 60px;
		box-sizing: border-box;
	}
	.flex_ac{
		display: flex;
		align-items: center;
	}
	.box-card{
		margin-top: 30px;
	}
	.hui{
		color: #888888;
	}
	.suggest{
		display: inline-block;
		padding: 0 10px;
		margin-top: 10px;
		background-color: #ffdee5;
		color: #cd1e46;
	}
	.footer {
		padding: 15px 40px;
		box-sizing: border-box;
		text-align: right;
	}
	::v-deep .zj-page-fill{
		max-height: 360px !important;
		overflow-y: auto;
	}
</style>