add EquipmentDrawer

.env.dev

@@ -5,8 +5,8 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
+VUE_APP_BASE_API = 'http://192.168.1.49:48080'
-VUE_APP_BASE_API = 'http://192.168.0.33:48080'
+# VUE_APP_BASE_API = 'http://192.168.0.33:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.188:48080'
 
 # 路由懒加载

src/components/DialogForm/index.vue

@@ -44,6 +44,7 @@
 						v-model="form[col.prop]"
 						type="datetime"
 						:placeholder="`请选择${col.label}`"
+						value-format="timestamp"
 						v-bind="col.bind"></el-date-picker>
 					<el-upload
 						class="upload-in-dialog"
@@ -215,13 +216,14 @@ export default {
 			if (!promiseList.length) this.formLoading = false;
 		},
 		// 上传成功的特殊处理
+		beforeUpload(){},
 		// 上传前的验证规则可通过 bind 属性传入
 		handleUploadSuccess(response, file, fileList) {
+			console.log('[dialogForm:handleUploadSuccess]', response, file, fileList, this.form);
 			// 保存原始文件名
 			if ('fileNames' in this.form) this.form.fileNames.push(file.name);
 			// 保存完整地址
 			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
-			// console.log('[dialogForm:handleUploadSuccess]', response, file, fileList, this.form);
 			this.$modal.msgSuccess('上传成功');
 		},
 

src/views/core/base/equipment/components/EquipmentDrawer.vue

@@ -0,0 +1,331 @@
+<!-- 
+    filename: EquipmentDrawer.vue
+    author: liubin
+    date: 2023-08-22 14:38:56
+    description: 
+-->
+
+<template>
+	<el-drawer
+		:visible.sync="visible"
+		:show-close="false"
+		:wrapper-closable="false"
+		class="drawer"
+		size="60%">
+		<SmallTitle slot="title">
+			{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
+		</SmallTitle>
+
+		<div class="content">
+			<div class="visual-part">
+				<SmallTitle
+					style="margin: 16px 0; padding-left: 8px"
+					:no-padding="true">
+					产品属性列表
+				</SmallTitle>
+
+				<!-- <div class="attr-list">
+					<base-table
+						:table-props="tableProps"
+						:page="listQuery.pageNo"
+						:limit="listQuery.pageSize"
+						:table-data="productAttributeList">
+						<method-btn
+							v-if="!isdetail"
+							slot="handleBtn"
+							:width="120"
+							label="操作"
+							:method-list="tableBtn"
+							@clickBtn="handleClick" />
+					</base-table>
+					<pagination
+						v-show="listQuery.total > 0"
+						:total="listQuery.total"
+						:page.sync="listQuery.current"
+						:limit.sync="listQuery.size"
+						:page-sizes="[5, 10, 15]"
+						@pagination="getList" />
+				</div> -->
+			</div>
+		</div>
+
+		<div style="position: absolute; bottom: 24px; right: 24px">
+			<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
+			<el-button v-if="isdetail" type="primary" @click="goEdit()">
+				编辑
+			</el-button>
+			<span v-if="!isdetail">
+				<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
+				<el-button
+					v-if="dataForm.id && !isdetail"
+					type="primary"
+					@click="addNew()">
+					添加属性
+				</el-button>
+			</span>
+		</div>
+
+		<!-- <product-attr-add
+			v-if="addOrUpdateVisible"
+			ref="addOrUpdate"
+			:product-id="dataForm.id"
+			@refreshDataList="getList" /> -->
+	</el-drawer>
+</template>
+
+<script>
+const SmallTitle = {
+	name: 'SmallTitle',
+	props: ['size'],
+	data() {
+		return {
+			title: 'Default title',
+		};
+	},
+	methods: {},
+	render: function (h) {
+		return h(
+			'span',
+			{
+				class: 'small-title',
+				style: {
+					fontSize: '18px',
+					lineHeight:
+						this.size == 'lg' ? '24px' : this.size == 'sm' ? '18px' : '20px',
+					fontWeight: 500,
+					fontFamily: '微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif',
+				},
+			},
+			this.title
+		);
+	},
+};
+
+export default {
+	components: { SmallTitle },
+	data() {
+		return {
+			visible: false,
+			addOrUpdateVisible: false,
+			productAttributeList: [],
+			dataForm: {
+				id: null,
+				name: '', // 产品名称
+				code: '', // 产品编码
+				area: 0, // 单位平方数(float only)
+				typeDictValue: null, // 产品类型id
+				processTime: null, // 单位产品用时 (s)
+				specifications: '', // 规格
+				unitDictValue: '', // 单位id
+			},
+			listQuery: {
+				pageSize: 10,
+				pageNo: 1,
+				total: 0,
+			},
+			dataRule: {
+				code: [
+					{
+						required: true,
+						message: '产品编码不能为空',
+						trigger: 'blur',
+					},
+					// {
+					// 	type: 'number',
+					// 	message: '产品编码为数字类型',
+					// 	trigger: 'blur',
+					// 	transfom: 'val => Number(val)',
+					// },
+				],
+				name: [
+					{
+						required: true,
+						message: '产品名称不能为空',
+						trigger: 'blur',
+					},
+				],
+				typeDictValue: [
+					{
+						required: true,
+						message: '产品类型不能为空',
+						trigger: 'blur',
+					},
+				],
+				area: [
+					// {
+					// 	type: 'float',
+					// 	message: '单位平方数为浮点类型',
+					// 	trigger: 'blur',
+					// 	transfom: 'val => Float(val)',
+					// },
+				],
+				processTime: [
+					{
+						required: true,
+						message: '完成单位产品用时不能为空',
+						trigger: 'blur',
+					},
+					// {
+					// 	type: 'number',
+					// 	message: '完成单位产品用时为浮点类型',
+					// 	trigger: 'blur',
+					// 	transfom: 'val => Number(val)',
+					// },
+				],
+			},
+			isdetail: false,
+		};
+	},
+	methods: {
+		initData() {
+			this.productAttributeList.splice(0);
+		},
+		init(id, isdetail) {
+			this.initData();
+			this.isdetail = isdetail || false;
+			this.dataForm.id = id || null;
+			this.visible = true;
+
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields();
+
+				if (this.dataForm.id) {
+					// 获取产品详情
+					getProduct(id).then((response) => {
+						this.dataForm = response.data;
+					});
+					// 获取产品的属性列表
+					this.getList();
+				} else {
+					getCode().then((res) => {
+						this.dataForm.code = res.data;
+					});
+				}
+			});
+		},
+
+		getList() {
+			// 获取产品的属性列表
+			const params = {
+				pageSize: 10,
+				pageNo: 1,
+				productId: this.dataForm.id,
+			};
+			getProductAttrPage(params).then((response) => {
+				this.productAttributeList = response.data.list;
+				this.listQuery.total = response.data.total;
+			});
+		},
+		handleClick(raw) {
+			if (raw.type === 'delete') {
+				this.$confirm(
+					`确定对${
+						raw.data.name
+							? '[名称=' + raw.data.name + ']'
+							: '[序号=' + raw.data._pageIndex + ']'
+					}进行删除操作?`,
+					'提示',
+					{
+						confirmButtonText: '确定',
+						cancelButtonText: '取消',
+						type: 'warning',
+					}
+				)
+					.then(() => {
+						deleteProductAttr(raw.data.id).then(({ data }) => {
+							this.$message({
+								message: '操作成功',
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.getList();
+								},
+							});
+						});
+					})
+					.catch(() => {});
+			} else {
+				this.addNew(raw.data.id);
+			}
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate((valid) => {
+				if (valid) {
+					// 修改的提交
+					if (this.dataForm.id) {
+						updateProduct(this.dataForm).then((response) => {
+							this.$modal.msgSuccess('修改成功');
+							this.visible = false;
+							this.$emit('refreshDataList');
+						});
+						return;
+					}
+					// 添加的提交
+					createProduct(this.dataForm).then((response) => {
+						this.$modal.msgSuccess('新增成功');
+						this.visible = false;
+						this.$emit('refreshDataList');
+					});
+				}
+			});
+		},
+		goEdit() {
+			this.isdetail = false;
+		},
+		// 新增 / 修改
+		addNew(id) {
+			this.addOrUpdateVisible = true;
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(id);
+			});
+		},
+		goback() {
+			this.$emit('refreshDataList');
+			this.visible = false;
+			this.initData();
+		},
+	},
+};
+</script>
+
+<style scoped>
+.drawer >>> .el-drawer {
+	border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-form-item__label {
+	padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+	margin: 0;
+	padding: 32px 32px 24px;
+	border-bottom: 1px solid #dcdfe6;
+	margin-bottom: 30px;
+}
+
+.drawer >>> .content {
+	padding: 0 24px 30px;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.drawer >>> .visual-part {
+	flex: 1 auto;
+	max-height: 76vh;
+	overflow: hidden;
+	overflow-y: scroll;
+	padding-right: 10px; /* 调整滚动条样式 */
+}
+
+.drawer >>> .el-form,
+.drawer >>> .attr-list {
+	padding: 0 16px;
+}
+
+.small-title {
+	color: red;
+}
+</style>

src/views/core/base/equipment/components/EquipmentPics.vue

@@ -78,10 +78,11 @@ export default {
 	// margin: auto;
 	top: 0;
 	right: 0;
-	width: 640px;
+	// width: 640px;
-	height: 480px;
+	// height: 480px;
 	background: #000;
 	overflow: hidden;
+	padding: 8px 8px 0;
 }
 
 .equipment-pics > div:hover > figure {

src/views/core/base/equipment/index.vue

@@ -29,7 +29,7 @@
 			:limit.sync="queryParams.pageSize"
 			@pagination="getList" />
 
-		<!-- 对话框(添加 / 修改) -->
+		<!-- 对话框(添加) -->
 		<base-dialog
 			:dialogTitle="title"
 			:dialogVisible="open"
@@ -38,6 +38,16 @@
 			@confirm="submitForm">
 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
 		</base-dialog>
+
+		<!-- 设备 详情 - 编辑 -->
+		<EquipmentDrawer
+			v-if="editVisible"
+			:mode="editMode"
+			@confirm="submitForm"
+			@cancel="editVisible = false"
+			@destroy="editVisible = false">
+			<h1>Ceshi ceshi ceshi</h1>
+		</EquipmentDrawer>
 	</div>
 </template>
 
@@ -47,6 +57,7 @@ import basicPageMixin from '@/mixins/lb/basicPageMixin';
 import { getAccessToken } from '@/utils/auth';
 import EquipmentPics from './components/EquipmentPics';
 import EquipmentAssets from './components/EquipmentAssets';
+import EquipmentDrawer from './components/EquipmentDrawer';
 
 import {
 	createEquipment,
@@ -62,6 +73,7 @@ export default {
 	name: 'Equipment',
 	components: {
 		Editor,
+		EquipmentDrawer,
 	},
 	mixins: [basicPageMixin],
 	data() {
@@ -214,19 +226,19 @@ export default {
 				],
 				[
 					{
-						select: true,
+						datetime: true,
 						label: '生产日期',
 						prop: 'productionTime',
 					},
 					{
-						select: true,
+						datetime: true,
 						label: '进厂日期',
 						prop: 'enterTime',
 					},
 				],
 				[
 					{
-						select: true,
+						input: true,
 						prop: 'tvalue',
 						label: '设备TT值',
 						rules: [
@@ -240,7 +252,7 @@ export default {
 						],
 					},
 					{
-						select: true,
+						input: true,
 						label: '产品加工时间',
 						prop: 'processingTime',
 						rules: [
@@ -255,13 +267,13 @@ export default {
 				],
 				[
 					{
-						select: true,
+						input: true,
 						label: '制造商',
 						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
 						prop: 'manufacturer',
 					},
 					{
-						select: true,
+						input: true,
 						label: '设备规格',
 						prop: 'spec',
 					},
@@ -303,15 +315,17 @@ export default {
 						prop: 'fileUrls',
 						subcomponent: EquipmentPics,
 						pictures: async () => {
-							// some async request		
+							// some async request
-							return []
+							return [];
 						},
-						style: 'overflow-x: auto;'
+						style: 'overflow-x: auto;',
 					},
 				],
 			],
 			// 是否显示弹出层
 			open: false,
+			editVisible: false,
+			editMode: 'edit', // 'edit', 'detail'
 			// 查询参数
 			queryParams: {
 				pageNo: 1,
@@ -444,6 +458,23 @@ export default {
 				})
 				.catch(() => {});
 		},
+		// 重写 basicPageMixin 里的 处理表格按钮 方法
+		handleTableBtnClick({ data, type }) {
+			switch (type) {
+				case 'edit':
+					this.editMode = 'edit';
+					this.reset();
+					const id = data.id;
+					getEquipment(id).then((response) => {
+						this.form = response.data;
+						this.editVisible = true;
+					});
+					break;
+				case 'delete':
+					this.handleDelete(data);
+					break;
+			}
+		},
 	},
 };
 </script>