add 添加一个缓存方案

.env.dev

@@ -12,8 +12,8 @@ ENV = 'development'
 VUE_APP_TITLE = 产线监控系统
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.1.8:48082'
+# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
-# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/components/DialogForm/index.vue

@@ -106,6 +106,7 @@
 <script>
 import { getAccessToken } from '@/utils/auth';
 import tupleImg from '@/assets/images/tuple.png';
+import cache from '@/views/extend/processFlow/cache';
 
 /**
  * 找到最长的label
@@ -133,7 +134,7 @@ const uploadedFile = {
 	},
 	methods: {
 		handleDelete() {
-			console.log('emit delete event')
+			console.log('emit delete event');
 			this.$emit('delete', this.file);
 		},
 	},
@@ -188,6 +189,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		hasFiles: {
+			type: Boolean,
+			default: false,
+		},
 		labelPosition: {
 			type: String,
 			default: 'right',
@@ -231,7 +236,9 @@ export default {
 		dataForm: {
 			handler(val) {
 				this.form = JSON.parse(JSON.stringify(val));
-				this.form.files = this.form.files ?? [];
+				if (this.hasFiles) {
+					this.form.files = this.form.files ?? [];
+				}
 			},
 			deep: true,
 			immediate: true,
@@ -310,6 +317,11 @@ export default {
 										'list' in response.data
 											? response.data.list
 											: response.data;
+
+									if (opt.cache) {
+										cache.store(opt.cache, list);
+									}
+
 									this.$set(
 										this.optionListOf,
 										opt.prop,
@@ -369,7 +381,9 @@ export default {
 		},
 
 		handleDeleteFile(file) {
-			this.form.files = this.form.files.filter(item => item.fileUrl != file.fileUrl);
+			this.form.files = this.form.files.filter(
+				(item) => item.fileUrl != file.fileUrl
+			);
 			this.$emit('update', this.form);
 		},
 	},

src/mixins/lb/basicPageMixin.js

@@ -28,10 +28,34 @@ export default {
 			// tableBtn: [], // 占位
 			// searchBarFormConfig: [], // 占位
 			// // 弹窗表单配置
-			// dialogFormConfig: [], // 占位
+			// dialogFormConfig: [], // 
+			updateUrl: '',
+			addUrl: '',
+			pageUrl: '',
+			form: {}
 		};
 	},
 	methods: {
+		// utils
+		http(url, method, payload) {
+			return this.$axios({
+				url,
+				method,
+				params: method === 'get' ? payload : null,
+				data: method !== 'get' ? payload : null,
+			})
+		},
+		put(payload) {
+			return this.http(this.updateUrl, 'put', payload);
+		},
+		post(payload) {
+			return this.http(this.addUrl, 'post', payload);
+		},
+		recv(payload) {
+			return this.http(this.pageUrl, 'get', payload);
+		},
+
+
 		// 过滤后端传回的详情数据
 		filterData(data, keys) {
 			const obj = {};

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

@@ -37,7 +37,12 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
+			<DialogForm
+				v-if="open"
+				ref="form"
+				v-model="form"
+				:has-files="true"
+				:rows="rows" />
 		</base-dialog>
 	</div>
 </template>

src/views/extend/processFlow/cache.js

@@ -0,0 +1,53 @@
+let timers = [];
+
+export default {
+
+    exists(key) {
+        const _ = localStorage.getItem('stored_keys');
+        return _ ? _.split(',')?.indexOf(key) != -1 : false;
+    },
+
+    store(key, value, duration = null) {
+        if (!localStorage.getItem('stored_keys')) localStorage.setItem('stored_keys', key);
+        else localStorage.setItem('stored_keys', localStorage.getItem('stored_keys') + ',' + key);
+
+        localStorage.setItem(key, JSON.stringify(value));
+        console.log('store duration', duration)
+        if (duration) {
+            if (timers[key]) clearTimeout(timers[key]);
+            timers[key] = setTimeout(() => {
+                console.log("clear cache", key)
+                this.clear([key]);
+            }, duration * 1000);
+        }
+    },
+
+    /**
+     * 
+     * @param {*} key 
+     * @param {*} cb 
+     * @param {*} param2 force 强制更新，调用cb
+     * @returns 
+     */
+    async getList(key, cb = null, { force = false, duration = null } = {}) {
+        if (this.exists(key) && !force) {
+            return JSON.parse(localStorage.getItem(key))
+        } else {
+            const list = await cb();
+            this.store(key, list, duration);
+            return list;
+        }
+    },
+
+    clear(keys) {
+        if (keys && keys.length) {
+            let stored_keys = localStorage.getItem('stored_keys').split(',');
+            keys.forEach((key) => {
+                stored_keys = stored_keys.filter((item) => item != key);
+            });
+            localStorage.setItem('stored_keys', stored_keys);
+            return;
+        }
+        localStorage.removeItem('stored_keys');
+    },
+}

src/views/extend/processFlow/index.vue

@@ -11,19 +11,39 @@
 		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
 
 		<section class="process-flow">
-			<div class="process-item__add-btn">+ 新增工艺</div>
+			<el-button class="process-item__add-btn" @click="handleAdd">
+				+ 新增工艺
+			</el-button>
 			<ProcessItem
-				v-for="n in 5"
+				v-for="item in list"
-				:key="n"
+				:key="item.id"
-				:name="'工艺 ' + n"
+				:name="item.name"
-				line="产线1"
+				:line="item.lineName"
-				desc="显示工艺描述的内容"
+				:desc="item.remark"
-				:isActive="n % 2 == 0" />
+				:isActive="item.enabled" />
 		</section>
+
+		<base-dialog
+			:dialogTitle="title"
+			:dialogVisible="open"
+			@close="cancel"
+			@cancel="cancel"
+			width="45%"
+			@confirm="submitForm">
+			<DialogForm
+				v-if="open"
+				key="index-dialog-form"
+				ref="form"
+				v-model="form"
+				:rows="rows" />
+		</base-dialog>
 	</div>
 </template>
 
 <script>
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import cache from './cache';
+
 const ProcessItem = {
 	name: 'ProcessItem',
 	components: {},
@@ -95,18 +115,185 @@ const ProcessItem = {
 export default {
 	name: 'ProcessFlow',
 	components: { ProcessItem },
+	mixins: [basicPageMixin],
 	props: {},
 	data() {
 		return {
+			updateUrl: '/extend/process-flow/update',
+			addUrl: '/extend/process-flow/create',
+			pageUrl: '/extend/process-flow/page',
+			searchBarKeys: ['name', 'code', 'lineId', 'productId'],
 			searchBarFormConfig: [
 				{
 					label: '工艺流程列表',
 				},
 			],
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				code: null,
+				name: null,
+				productId: null,
+				lineId: null,
+			},
+			lineList: null,
+			list: [],
+			rows: [
+				[
+					{
+						input: true,
+						label: '工艺名称',
+						prop: 'name',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: this.editMode == 'detail', // some condition, like detail mode...
+						// }
+					},
+					{
+						input: true,
+						label: '工艺编码',
+						prop: 'code',
+						// url: '/base/core-equipment/getCode',
+					},
+				],
+				[
+					{
+						select: true,
+						label: '产线',
+						prop: 'lineId',
+						cache: 'processFlow::lineList',
+						url: '/base/core-production-line/listAll',
+						bind: {
+							filterable: true,
+						},
+					},
+
+					{
+						input: true,
+						label: '是否启用',
+						prop: 'enabled',
+					},
+				],
+				[
+					{
+						textarea: true,
+						label: '功能描述',
+						prop: 'remark',
+					},
+				],
+			],
+			form: {
+				id: null,
+				code: null,
+				name: null,
+				productId: null,
+				lineId: null,
+				enabled: 1,
+				remark: null,
+				externalCode: null,
+			},
 		};
 	},
 	computed: {},
-	methods: {},
+	mounted() {
+		this.getList();
+	},
+	methods: {
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
+		reset() {
+			this.form = {
+				id: null,
+				code: null,
+				name: null,
+				productId: null,
+				lineId: null,
+				enabled: 1,
+				remark: null,
+				externalCode: null,
+			};
+			this.resetForm('form');
+		},
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.showUploadComponents = false;
+			this.title = '添加工艺';
+		},
+		submitForm() {
+			this.$refs['form'].validate((valid) => {
+				if (!valid) {
+					return;
+				}
+				// 修改的提交
+				if (this.form.id != null) {
+					this.put(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				this.post(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+
+		async getList() {
+			this.loading = true;
+			const { code, data } = await this.recv(this.queryParams);
+			if (code == 0) {
+				this.list = data.list;
+				this.total = data.total;
+				this.loading = false;
+				return;
+			}
+			this.loading = false;
+		},
+
+		// async getList() {
+		// 	this.loading = true;
+		// 	const { code, data } = await this.recv(this.queryParams);
+		// 	if (code == 0) {
+		// 		const list = [];
+		// 		for (const item of data.list) {
+		// 			const newItem = await this.itemAttachName(item);
+		// 			list.push(newItem);
+		// 		}
+		// 		this.list = list;
+		// 		this.total = data.total;
+		// 		this.loading = false;
+		// 		return;
+		// 	}
+		// 	this.loading = false;
+		// },
+
+		// async itemAttachName(item) {
+		// 	if (!this.lineList) {
+		// 		this.lineList = await cache.getList(
+		// 			'processFlow::lineList',
+		// 			async () => {
+		// 				const { code, data } = await this.$axios(
+		// 					'/base/core-production-line/listAll'
+		// 				);
+		// 				if (code == 0) {
+		// 					return data;
+		// 				}
+		// 			}
+		// 		);
+		// 	}
+		// 	return {
+		// 		...item,
+		// 		lineName: this.lineList.find((line) => line.id == item.lineId)?.name,
+		// 	};
+		// },
+	},
 };
 </script>